Case Study · 2026 · Personal
AI Office
Delegating to software agents fails when you can't see what they're doing. AI Office makes the work visible.
The four agent states: thinking · working · blocked · done.
Interactive demo — simulated event stream. The real app renders from live WebSocket events (214 tests).
- Role
- Sole Builder
- Timeline
- 2026
- Stack
- React + React-Three-Fiber, Node/TypeScript, WebSockets, Claude Agent SDK
- Status
- In Progress — 75% Complete · Phases 0–2 of 6 Shipped
The Problem
Running several autonomous workers at once turns into tab-switching and guesswork. Logs tell you what happened; nothing tells you what's happening. Trust dies when state is invisible.
Who It's For
Anyone directing multiple agents on real tasks who needs to know, at a glance, who's thinking, who's working, who's blocked, who's done.
Product Decisions
-
Space over lists.
A 3D room instead of a log feed — position and posture encode agent state pre-attentively, so you read the room the way a manager reads an office, not the way an operator reads a terminal.
-
State is the interface.
Four states only — thinking, working, blocked, done. Resisting a richer status taxonomy kept the room readable and the orchestrator honest.
-
Steerable, not just watchable.
Every agent can be interrupted and redirected from inside the room; visibility without control is a dashboard, not an office.
The Build
A monorepo: packages/shared holds the typed event contracts, apps/server is the Node/TypeScript WebSocket orchestrator, and apps/web is the React + react-three-fiber office. The 3D layer renders purely from the event stream.
The engineering decision that paid off: the office was built first against a fake event emitter, then real Claude Agent SDK execution was swapped in behind the same contract — without touching the 3D layer.
In Use
Delegate a goal.
The office comes alive.
Real tools, visible work.
Blocked is a state you can see — and fix.
What Happened
Shipped so far: typed TypeScript event contracts shared by server and UI — the spine of the system; the 3D office rendering live employee states from a WebSocket stream; and real agent execution via the Claude Agent SDK — one subscription credential powers every employee, no per-model API keys, with built-in web search/fetch and external MCP tools. 214 tests passing.
What I'd Do Next
The roadmap: roster, persistence, and parallel employees. Then a shared message bus, so a goal lets the team self-organize. Then the headline — record a good run and save it as a one-click replayable workflow. Then Docker sandboxing.