DEV Community

Jesus Fernandez
Jesus Fernandez

Posted on Edited on

I gave my AI coding agents an office, and now my team can watch them work

#ai #showdev #opensource #typescript

deskmates: agents at their desks, two of them in a meeting, a subagent handing its work back and one waiting for permission at the vending machines

I spend most of my day with three or four AI coding agents running at once: Claude Code in two profiles, Codex in another terminal, sometimes a subagent or two. They are good company, but invisible company. The only way to know that one of them has been waiting for my permission for five minutes is to cycle through terminals.

So I built them an office.

deskmates is a pixel-art office where every agent session on your machine is a character at a desk. It walks in when the session starts, types while it edits, reads while it searches, raises a yellow question mark when it needs your permission, shows a green check when it is done, and walks out when the session ends. Subagents sit next to the agent that launched them, and when they finish they stop by its desk with a document before leaving.

It is open source (MIT). To see it without installing anything:

npx deskmates demo   # opens http://127.0.0.1:47821 with simulated agents; Ctrl+C closes it
Enter fullscreen mode Exit fullscreen mode

And to use it with your own agents:

npm install -g deskmates
deskmates serve      # http://127.0.0.1:47821
deskmates connect    # your Claude Code sessions walk in
Enter fullscreen mode Exit fullscreen mode

How the agents get in

Every tool tells deskmates what it is doing in its own way, and everything ends up as the same small event:

  • Claude Code through hooks. deskmates connect adds them to a profile's settings, tagged so disconnect removes only its own. The hook is a few lines of shell with a 50 ms ceiling that always exits 0: it must never slow an agent down.
  • Codex, Copilot CLI, Cursor and Gemini CLI through the session files they already write. No setup.
  • Anything else through a small HTTP ingest API or an MCP server, so a script, a CI job or another agent can walk in too.

From there the data flows one way: events, deduplication, a pure reducer that decides who is working, waiting, idle, asleep or leaving, and a WebSocket that feeds the page. The page is a canvas with an actor simulation on top: walking on a tile grid, breaks at the vending machines, meetings when two agents of the same project are free, pets that wander between rooms.

Privacy was the first rule, not the last

An office that shows what your agents do could easily show too much. Events carry only a tool name and a detail of at most 120 characters: a file name or the first line of a command. Prompts, file contents and tool output never leave the adapters, and the daily history stores counts, not content. Nothing leaves your machine unless you ask it to.

Then it ended up on the office TV

Next to my keyboard was not where I wanted it. I wanted it on a tablet, and then on the screen in the office.

deskmates serve --lan serves your network behind a token, prints a QR in the terminal, and the page has a Share button with the same QR and a kiosk mode that fills the screen. On a TV that meant learning about device pixels: the office is drawn at whole-number scales so the pixel art stays crisp, and kiosk stretches it to fill the screen when that matters more.

The shared office

Watching only my agents got old quickly. Several of us use coding agents, so the last piece was a shared office:

# on a machine everyone can reach
deskmates serve --lan --shared

# on each PC
deskmates serve --relay http://lab:47821 --name "Jesús"
Enter fullscreen mode Exit fullscreen mode

Each PC relays the same small events to the shared office, where they land on the Headquarters floor: six islands of four desks, each in its PC's colour, a lounge, a meeting table and a café in the middle. When agents from different PCs are waiting for permission at the same time, they walk to the café and chat. It is the most useless feature I have written this year, and my favourite.

The Headquarters floor: four PCs' agents on their islands, three of them chatting at the café while they wait for permission

What I learned

  • Pure core, visual edges. The reducer and the scene are deterministic functions of events and time. That made almost everything testable without a browser, and the browser tests compare screenshots pixel by pixel.
  • The floor had to become data. The shared office started on the same small room repeated side by side. A single large floor meant turning the room's constants into a value that themes can declare. Every existing screenshot had to stay identical while that happened, and that rule caught more bugs than any review.
  • Agents are better reviewers than I expected, and worse at reading screenshots than I am. I built most of this with Claude Code, with a fresh agent reviewing each change. They found real concurrency and edge-case bugs; I still had to look at every picture.

Try it

  • Repository: https://github.com/Jfernandez27/deskmates
  • Try it without installing: npx deskmates demo (simulated agents, no tokens spent)
  • Install: npm install -g deskmates, then deskmates serve and deskmates connect (deskmates connect --all if you use more than one Claude profile)
  • Node 22.18 or newer

If you run several agents a day, I would like to know which signal you miss most when they work in the background. That is what decides what the office learns next.

Top comments (0)