Claude Office Visualizer plugin
Hooks for Claude Code and OpenCode draw agent work as a pixel-art office: the main agent as a boss, subagents as employees.
- 616 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The hooks hand tool input and output and file paths to the backend, so only a local address is allowed by default.
- With an OpenAI-compatible endpoint for summaries, texts go to an external service.
Install
- Works in
Manual install
git clone https://github.com/paulrobello/claude-office.git
cd claude-office
make install-all
make dev-tmuxThe README quick start. make hooks-install installs the Claude Code hooks and is part of make install-all. Then open http://localhost:3000.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The hooks hand tool input and output and file paths to the backend, so only a local address is allowed by default.
- With an OpenAI-compatible endpoint for summaries, texts go to an external service.
This is third-party code. Review the repository files before installing.
What it does
Claude Office Visualizer shows in a browser what agents are doing as an animated office. The main agent acts as the boss, the subagents it spawns work as employees, and states of working, delegating and waiting show up through characters and speech bubbles. Claude Code hooks send events to a local backend, and the frontend receives them over WebSocket. The office whiteboard has twelve modes: to-do list, background tasks, tool-usage chart, org chart, timeline, kanban and more. A trash can fills with paper as context grows, and the boss stomps on it when context is compacted. A printer fires when an agent finishes a report or document. The Command Center gathers the bosses of every live terminal into one office with Needs-you, Working, Done and Ended columns. A multi-floor mode shows separate offices per floor. Short agent names and task descriptions come from the claude CLI by default; any OpenAI-compatible endpoint can replace it, or summaries can be switched off.
Who it is for. Developers who run several Claude Code sessions with subagents and want to see which one is working, waiting for input or done.
Good fit when
- Three terminals run Claude Code in parallel and you need to see at once which one waits for your decision.
- You want a visual of how the main agent delegates work to subagents.
- You want to follow context growth and the moment of compaction without reading logs.
- A demo needs a live picture of what the agent is doing.
- OpenCode needs the same overview through its plugin.
Not a fit when
- You need exact cost and token metrics for reporting: the visualizer shows activity, not accounting.
- The server must run on a remote machine outside a trusted network: events carry tool input and output and file paths.
- The environment cannot install Python 3.13 and Node.js 20.
Example request
Start Claude Office and show what my subagents are doing right now.Limitations
Python 3.13, Node.js 20 or Bun, the uv package manager and an installed Claude Code or OpenCode with Bun are required.
Events carry tool input and output and file paths. LOCALHOST_ONLY is on by default, and the OpenCode plugin and Claude Code hooks accept a non-local API address only with CLAUDE_OFFICE_ALLOW_REMOTE=1.
Summaries come by default from the claude CLI under your subscription; with an OpenAI-compatible endpoint the texts go to that service.
How to disable. Remove the Claude Code hooks that `make hooks-install` added to the settings and stop the backend and frontend. For OpenCode, remove the plugin.
FAQ
How do I start Claude Office?
Clone the repository, run `make install-all` and `make dev-tmux`, open http://localhost:3000 and run any command in Claude Code. The event appears in the office.
Does it work with OpenCode?
Yes, OpenCode has its own plugin, and `make docker-config` points both the hooks and the plugin at port 8050. Child @agent sessions from OpenCode stay out of the office.
How do I enable AI summaries?
By default SUMMARY_BACKEND is claude-cli and uses your Claude login. For an OpenAI-compatible API set SUMMARY_BACKEND=openai with address, key and model; use disabled to opt out.
What is the Command Center?
A shared overview of several terminals in one office: the boss of each live session stands in a status column. It appears in the header when two or more sessions are active.
Where does the event data go?
To the local FastAPI backend. A non-local API address is blocked until CLAUDE_OFFICE_ALLOW_REMOTE=1 is set.
Discussion
No questions or reviews yet.
Related
PluginsA pixel-art office in the browser: each Claude Code or Codex session sits at a desk, types and raises a hand when it needs you.
A Claude Code plugin that draws a 3D office where your session and subagents work at desks from real transcripts, zero config.
A Claude Code workspace folder: hooks with a local Ollama detect the project type, pick skills and remind you to update the docs
Claudette runs several Claude Code sessions in parallel, each in its own git worktree, from a window or the console
Multi-agent orchestration for Claude Code: teams, roles, autopilot and task routing across skills and subagents
An environment for Claude Code that keeps context across sessions via hooks, ledgers and handoffs, orchestrates agents and saves tokens
README in short
The README has a table of contents, screenshots, release notes up to 0.25.1, a feature list, quick start, manual install and optional AI enhancements. Development, project structure, troubleshooting and documentation links follow.