Back to case studies
2026Live6 weeks · Mar–May 2026

Agent Dashboard

Pixel-art office where Claude Code agents work in real time — a live spatial visualization of an asynchronous LLM workforce.

Role
Realtime ops viz · Canvas 2D + WebSocket
Open project ↗

By the numbers

~20
Live agents in the office
4
Walled rooms with HVAC + decor
23
Vanilla JS modules in src/
Canvas
No React — 60fps pixel art

Stack

  • Node.js
  • WebSocket (ws)
  • Vite 5
  • HTML5 Canvas 2D
  • Chokidar (file watcher)
  • Playwright (E2E)
  • Fly.io

In action

  • Office floor — 20 agentsOffice floor — 20 agents
  • Sidebar + activity tickerSidebar + activity ticker
  • Full office floor with HVAC + decorFull office floor with HVAC + decor
  • Leaderboard — per-agent activity rankingLeaderboard — per-agent activity ranking
  • Settings panelSettings panel

Process receipts

The pipeline of agents that built it, the count of commits and deploys, and the wall-clock time from spec to production. No decks — just the audit trail.

6 weeks
Shipped in
160
Commits
22
Deploys
6
Agents in pipeline
Agent pipeline
  1. product-manager
  2. ux-designer
  3. 3d-scene-designer
  4. motion-designer
  5. developer
  6. qa-engineer

Context

Running 20 Claude Code agents in parallel is invisible — terminal tabs, JSONL log files, status spinners. We wanted a spatial metaphor: a pixel-art office where each agent is a sprite with a name, an emotion, a workstation, and an activity. Walked rooms cluster agents by domain (frontend, backend, design, ops). Stats sidebar surfaces uptime, online count, working/idle ratio.

Approach

Vanilla Node WebSocket server reads `~/.claude/projects/**/*.jsonl` via Chokidar, parses tool-use and assistant events, maps each Claude session to an in-office agent. Vite-built frontend renders 60fps Canvas 2D — no React. Twenty-three modules in src/: sprite atlas, room layouts, HVAC particles, click handling with nested-clickable priority, websocket reconnect with backoff. Playwright E2E for spawn / move / interact flows.

Outcome

Live on Fly.io, deployed 22 times during build. Now the canonical way to know "what is my parallel agent pool doing right now" — better than reading 20 terminal panes. The wall editor, sprint preview, and bottom-zone redesign all shipped iteratively from spec to prod. Currently powering @btw_aitech sprint reports via TG bot integration.

Have a similar project?

We reply within 24 hours. Usually faster.

Start a project →Telegram → @btw_aitech