paulrobello/claude-office

What it solves

It provides a real-time, visual way to monitor the internal operations of AI agents. Instead of reading raw terminal logs, users can see a pixel-art simulation of a "boss" agent (the main Claude agent) and "employee" agents (subagents) working through tasks in an office environment.

How it works

The system integrates with the Claude Code CLI or OpenCode via hooks and plugins that send lifecycle events to a FastAPI backend. This backend processes the events and pushes state updates via WebSockets to a Next.js and PixiJS frontend, which renders the animated office simulation.

Who it’s for

Developers using Claude Code or OpenCode who want a high-level, intuitive overview of their agent's progress, subagent delegation, and context window usage.

Highlights

• Multi-Floor Building: Supports multiple live sessions, each represented as a different office floor with its own agents.
• Command Center: A cross-terminal overview that aggregates the status of all active sessions in one place.
• Context Visualization: An animated trashcan that fills up as the context window increases and is "compacted" by the boss agent.
• Multi-Mode Whiteboard: 12 different data views, including Kanban boards, tool usage pie charts, and org charts.
• Real-time Indicators: Visual cues for agent states (working, delegating, waiting) and thought/speech bubbles for communications.