The Office

What if your AI agents had a real office?

A pixel-art virtual office where your AI agent fleet shows up as tiny characters sitting at desks, typing away, judging each other's code, and occasionally panicking about production incidents. Think The Sims meets your CI/CD pipeline.

Why Does This Exist?

Because staring at terminal logs to figure out which agent is doing what is boring. Now you can watch your reviewer silently judge code from their private room while the incident agent frantically investigates a Sentry alert across the hall. Each agent has their own desk, their own personality, and their own passive-aggressive status messages.

The Cast

Agent	Role	Vibe
backend-eng	Writes services, controllers, the boring stuff	"refactoring this controller..."
reviewer	Judges everyone's code from a private room	"who wrote this?"
qa-lead	Finds the bugs you swore didn't exist	"edge case found!"
marketing-eng	Campaign wizardry	"designing charts"
ops	Keeps the lights on	"index looks good."
docs	Documents what nobody reads	"this endpoint has no docs"
incident	First responder when prod goes boom	"blast radius: 3 countries."
pm-intel	Knows everything about every ticket	"updating Jira board"
security	Scans for auth holes, trusts nobody	"Doorkeeper config is fine."

Each agent is mapped to one of 4 pixel-art characters (Adam, Alex, Amelia, Bob) with unique color tints so you can tell them apart at a glance.

Architecture

┌─────────────┐     Unix Socket      ┌──────────────┐    WebSocket     ┌──────────────┐
│  Claude Code │ ──── events ──────> │  Event Hub   │ ──── state ────> │  Web Client  │
│  (hooks)     │   {"agent":"..."}   │  (Go binary) │   /ws endpoint   │  (Phaser 3)  │
└─────────────┘                      └──────────────┘                  └──────────────┘
                                           │
                                           │ WebSocket
                                           v
                                     ┌──────────────┐
                                     │  TUI Client  │
                                     │  (Bubble Tea) │
                                     └──────────────┘

Three components, zero databases, zero cloud dependencies. Everything runs locally.

• Event Hub (Go) -- Central brain. Receives events via Unix domain socket, maintains agent state machine (idle/active), broadcasts via WebSocket. Each agent has a personality with custom idle messages and colors.
• Web Client (React + Phaser 3 + Vite) -- The pixel-art office. Real sprite animations, furniture, server room with blinking LEDs, coffee machine with animated steam. Title bar shows active agent count and a real clock.
• TUI Client (Go + Bubble Tea) -- Terminal dashboard for when you want to feel like a hacker. Compact multi-line view of all agent states.

The Office Layout

┌──────────┬────────────────────────┬──────────┐
│ Security │                        │ PM Intel │
│  (dark)  │     Open Floor         │  (warm)  │
│          │  marketing  backend    │          │
├──────────┤                        ├──────────┤
│ Incident │    docs    qa-lead     │ Reviewer │
│  (gray)  │                        │  (wood)  │
│          │   [coffee] [plants]    │          │
├──────────┤       ops              ├──────────┤
│  Server  │   [whiteboard]         │ Entrance │
│  Room    │                        │          │
│ (LEDs!)  │                        │          │
└──────────┴────────────────────────┴──────────┘

7 rooms with distinct tile floors. Private rooms for Security, Incident, Reviewer, and PM Intel. Open floor with desks for everyone else. A server room with blinking LEDs. An entrance with a water cooler. And a break area with a coffee machine, whiteboard with sprint goals, and a rug.

Features

• Real pixel-art sprites -- LimeZu characters with idle/sit/walk animations (16x32 frames scaled 2x)
• Personality system -- Each agent has unique idle messages that rotate. The reviewer says things like "who wrote this?" while idle. The incident agent mutters about blast radii.
• Live status updates -- When an agent activates, their character glows with a personality-colored tint and shows what they're working on
• Toast notifications -- Slide-in notifications with colored accent bars when agents wake up or finish work
• Furniture & decorations -- Desks with monitors at every position, bookshelves, floor lamps, paintings, clocks, potted plants everywhere
• Server room -- Three racks with staggered blinking green LEDs
• Coffee area -- Counter, coffee machine, cup, and animated steam particles
• Whiteboard -- Sprint goals with bullet points and a yellow sticky note
• Title bar HUD -- Real-time clock, active agent counter with green indicator
• State machine -- Agents transition between idle/active with a 10-second timeout back to idle

Getting Started

Prerequisites

• Go 1.18+
• Node.js 18+
• socat (for integration testing): brew install socat

Quick Start

# Start everything (installs deps automatically)
make run

# Or start components individually:
make hub     # Start the event hub
make web     # Start the web client (opens http://localhost:5173)
make tui     # Start the terminal dashboard

Simulating Activity

# Run the test script to simulate a realistic work session
make test-events

# Or send individual events manually
echo '{"agent":"backend-eng","action":"started","task":"Writing a service"}' \
  | socat - UNIX-CONNECT:~/.umai-office/event-hub.sock

Integration with Claude Code

Install the hook to automatically send events when Claude Code works:

make install-hook

This installs a Claude Code hook that emits events to the office whenever an agent starts or finishes work.

Event Protocol

Events are JSON objects sent to the Unix domain socket:

{
  "agent": "backend-eng",
  "action": "started",
  "task": "Writing Partners::Reservations::Create service"
}

Actions: started, tool_call, handoff, completed

Agents: backend-eng, reviewer, qa-lead, marketing-eng, ops, docs, incident, pm-intel, security

Project Structure

the-office/
├── event-hub/          # Go event hub (state machine + WebSocket server)
│   ├── agent.go        # Agent personalities, state machine, idle messages
│   ├── hub.go          # Event processing and state broadcasting
│   ├── socket.go       # Unix domain socket listener
│   ├── ws.go           # WebSocket server (/ws endpoint)
│   └── main.go         # Wiring
├── tui/                # Go + Bubble Tea terminal dashboard
│   ├── model.go        # WebSocket client + Bubble Tea model
│   └── view.go         # Compact terminal rendering
├── web/                # React + Phaser 3 + Vite browser client
│   ├── src/
│   │   ├── game/
│   │   │   ├── agents/        # Agent personality definitions
│   │   │   ├── office/        # Tilemap and furniture placement
│   │   │   └── scenes/        # Phaser scenes (Boot, Office, UI)
│   │   ├── hooks/             # React hooks (WebSocket connection)
│   │   ├── App.tsx            # Main app (wires React to Phaser)
│   │   └── types.ts           # Shared TypeScript types
│   └── public/assets/         # Sprite sheets and tile sets
├── test-events.sh      # Integration test script
├── Makefile            # Build and run targets
└── README.md           # You are here

Tech Stack

Component	Technology	Why
Event Hub	Go	Fast, single binary, great concurrency
Web Client	Phaser 3 + React + Vite	Pixel-art game engine + modern tooling
TUI Client	Bubble Tea	The prettiest terminal framework
IPC	Unix Domain Socket	No network overhead, local only
State Sync	WebSocket	Real-time push to all clients

Art Credits

• Characters: LimeZu - Modern Interiors (free version)
• Tiles & Furniture: bitglow - Pixel Interior (free, CC0)

License

MIT