Pixel Office
RU EN 中文
Pixel Office

Visualize
AI Agents

Watch Claude and Codex agents in real time. A pixel office where every agent is a living character.

npx office-for-claude-agents

See it yourself

Not just logs. A living map of your agents.

Idle activities

Idle activities

Sofa, coffee, smoke break — each idle mode has its own sprite and animation.

Idle activities
Roles

Boss seat

Only BOSS/MEGABOSS can sit here. Instantly see the leader.

Boss seat
Clustering

Clustering

Agents group by relationships and shared tasks.

Clustering
Spawn points

Agent spawn and exit points

Spawn and exit are captured in the layout and visible on the map.

Spawn points
Approvals

Waiting for your approval

Instantly see where your confirmation is required.

Waiting for approval
Events

All events

Event sidebar captures actions and agent communication.

All events
Sharing

Share with friends

Share a read-only link with friends and colleagues.

Share
Assets

Many assets

Expanded item and decoration pack out of the box.

Assets
Codex

Codex support

Codex sessions and subagents are visible in the office.

Codex support
Real-time visualization

Living agent office

Every agent becomes a character. See hierarchy, status, and activity.

Living office
Hierarchy & dependencies

Understand structure

Who reports to whom. Who interacts with whom. All links are visible.

Hierarchy
HUD panel

Control spend

Tokens, cost, cache hit rate — all metrics in front of you.

HUD
Clustering

Automatic grouping

Agents form teams. See who works together.

Clusters
Communication

Observe interactions

Every message, every event, every interaction in context.

Communication
Scale

Scale without limits

Hundreds or thousands of agents. The office grows with your workload.

Big office

Everything under control

From visualization to analytics — full control of your agents.

Real-time visualization

See every agent in the pixel office: who works, who is idle, who just spawned.

Idle activities

Agents rest, drink coffee, smoke: sofa/coffee/smoke (33/33/33), each with its own animation.

Events & communication

Events sidebar shows inter-agent communication and status changes.

Codex support

Basic Codex sessions and subagent support (early).

Token metrics

HUD panel: tokens, cost, cache hit rate, context usage.

Deep inspection

Double-click to inspect a specific agent’s chat and details.

Boss chair

Only BOSS/MEGABOSS can sit there. Leads use regular seats.

Strict hierarchy

Spawner is always higher — the chain is immediately visible.

Cluster behavior

Agents gather and gravitate toward related work.

Left sidebar

Agents, roles, tokens, context and statuses in one panel.

GitHub tasks sidebar

Separate panel with repository tasks and progress.

Pipeline & assets

Custom pipeline progress via ~/.pixel-agents/config.json and extended office asset pack.

And even more

  • Spawn and exit coordinates are reflected in layout and rendering.
  • Coordinate highlighting, cell type highlighting, and agent labels.
  • Smart agent naming based on specialization.
  • Soft zoom via touchpad/pinch and smooth canvas panning.
  • Fit button — auto-scale office between sidebars.
  • Layout editor with import/export configs.

Modern stack

Technologies for high-performance visualization.

Node.jsExpressWebSocketReact 19TypeScriptViteCanvas 2DGitHub CLI
$ npx office-for-claude-agents

Installs dependencies and opens the office in your browser.

Start right now

Setup takes 30 seconds. No complex configuration.

Open Source • MIT License