# Claude Office Visualizer

> Real-time pixel art office simulation that visualizes Claude Code operations, showing boss and employee agents working in an animated office environment.

Claude Office Visualizer is an open-source tool by Paul Robello that turns Claude Code CLI operations into a live pixel art office simulation. Built with Next.js, PixiJS, FastAPI, and Zustand, it runs locally and connects to Claude Code via hooks to render agent activity in real time. The project is licensed under MIT and available on GitHub.

## What It Is

Claude Office Visualizer is a developer novelty and observability tool that maps Claude Code's agentic operations onto an animated office metaphor. The main Claude agent appears as a "boss" character, while spawned subagents appear as "employees." As Claude Code runs tasks, the visualization updates in real time via WebSocket, showing agent states, thought bubbles, tool usage, and context window growth.

## How the Visualization Works

The tool hooks into Claude Code's lifecycle events through installed shell hooks. These hooks fire on events like session start/end, tool use, subagent spawning, and context compaction, sending data to a local FastAPI backend. The backend processes events through a state machine and pushes updates to the Next.js/PixiJS frontend over WebSocket. The result is a continuously animated office scene that reflects what Claude Code is actually doing.

Key visual elements include:
- **Boss & employee agents** with working, delegating, and waiting state indicators
- **Thought/speech bubbles** showing agent activities and communications
- **Context window trashcan** that fills with paper as context grows, with a compaction animation when the boss stomps on it
- **City skyline window** with a real-time day/night cycle and animated clouds
- **Printer station** that animates when Claude produces a report or document
- **Git status panel** showing repository status in real time

## Multi-Mode Whiteboard and Advanced Features

The visualizer includes a 12-mode whiteboard (keyboard shortcuts 0–9, T, B, K) covering todo lists, remote worker tiles, tool usage pie charts, org charts, a "stonks" display, weather, safety board, timeline, news ticker, coffee tracker, heat map, and kanban. The Remote Workers mode shows background task status in video-call-style tiles. A wall clock can be clicked to cycle between analog and digital (12h/24h) modes.

Optional AI enhancements — agent name generation and task summaries — activate when a Claude Code OAuth token is provided in the backend `.env` file. Without the token, the visualizer still works fully but shows raw agent IDs and tool names instead of friendly labels.

## OpenCode Integration

Beyond Claude Code CLI, the project includes an `opencode-plugin/` directory that maps OpenCode lifecycle events to the same backend API, making the visualizer compatible with OpenCode as an alternative agent runtime. The plugin handles session creation/deletion, tool execution, permission requests, and token usage reporting.

## Update: v0.15.0 (May 2026)

The most recent release adds multi-floor building navigation, letting users browse a multi-story building where each floor has its own office layout and independent agents. v0.15.0 also overhauled settings with new building configuration and consolidated general settings tabs, and added a kanban whiteboard mode as the 12th display mode. The multi-floor feature was contributed by community member @mjcadile via PR #20. The prior v0.14.0 release added pluralization support for internationalization and a star history chart to the README. The repository was created in January 2026 and last pushed in May 2026, with 406 stars and 81 forks as reported by GitHub.

## Features
- Real-time pixel art office simulation of Claude Code operations
- Boss and employee agent visualization with state indicators
- WebSocket architecture for live state updates
- 12-mode whiteboard with keyboard shortcuts
- Multi-floor building navigation with independent offices per floor
- Context window trashcan animation with compaction effect
- City skyline window with real-time day/night cycle
- Git status panel
- Printer station animation on document completion
- Thought and speech bubbles for agent activity
- Wall clock with analog/digital toggle
- Remote Workers display with video-call-style tiles
- Optional AI-powered agent name generation and task summaries
- OpenCode integration via plugin
- Docker deployment support
- Cross-platform: Windows, macOS, Linux
- Settings persistence via backend database
- Event simulation script for testing

## Integrations
Claude Code CLI, OpenCode, Next.js, PixiJS, FastAPI, Zustand, Docker, tmux

## Platforms
WINDOWS, MACOS, LINUX, WEB, API, CLI

## Pricing
Open Source

## Version
0.15.0

## Links
- Website: https://github.com/paulrobello/claude-office
- Documentation: https://github.com/paulrobello/claude-office/blob/main/docs/guides/quickstart.md
- Repository: https://github.com/paulrobello/claude-office
- EveryDev.ai: https://www.everydev.ai/tools/claude-office-visualizer