Pixel Office

A pixel-art office visualization for AI coding assistants. Works with both OpenCode and Claude Code simultaneously.

Features

• Dual Support: Works with both OpenCode and Claude Code CLI
• Live Visualization: Real-time pixel-art office showing agent activity
• Tabbed Interface: Switch between OpenCode Office and Claude Office views
• Mobile Ready: Connect via local network + QR code
• Session Tracking: Monitor multiple sessions across different repos

Quick Start

# Install globally
npm install -g opencode-pixel-office

# Install for both OpenCode and Claude Code
opencode-pixel-office install

# Start the server
opencode-pixel-office start

That's it! The dashboard opens at http://localhost:5100.

CLI Commands

Command	Description
install	Install plugin + hooks for both OpenCode and Claude Code
start	Start the Pixel Office server
stop	Stop the server
status	Show installation status
uninstall	Remove everything

Options

• --port <number> - Set server port (default: 5100)
• --version, -v - Show version number

How It Works

┌─────────────┐     ┌─────────────┐
│  OpenCode   │     │ Claude Code │
│   Plugin    │     │    Hooks    │
└──────┬──────┘     └──────┬──────┘
       │                   │
       │   HTTP POST       │
       └───────┬───────────┘
               ▼
       ┌───────────────┐
       │ Pixel Office  │
       │    Server     │
       │   :5100       │
       └───────┬───────┘
               │ WebSocket
               ▼
       ┌───────────────┐
       │    Browser    │
       │   Dashboard   │
       └───────────────┘

• OpenCode Plugin → ~/.opencode/plugins/pixel-office.js
• Claude Code Hooks → ~/.claude/hooks/ + ~/.claude/settings.json
• Server/App → ~/.opencode/pixel-office/

📱 Mobile Support

Monitor your agents from your phone!

1. Click the Network URL in the top-right corner
2. Scan the QR code
3. Watch agents work from anywhere on your network

Development

# Clone the repo
git clone https://github.com/anthropics/opencode-pixel-office.git
cd opencode-pixel-office
npm install

# Run server (dev mode)
npm start

# Run client (dev mode, separate terminal)
npm run dev:client

# Build client for production
npm run build:client

Project Structure

pixel-opencode/
├── client/                 # React + PixiJS Frontend
│   └── src/
│       ├── App.tsx         # Main app with tabs
│       ├── PixiScene.tsx   # Pixel art rendering
│       └── useOfficeState.ts
├── server/
│   └── index.ts            # Express + WebSocket server
├── plugin/
│   └── pixel-office.js     # OpenCode plugin
└── bin/
    ├── opencode-pixel-office.js  # CLI
    └── claude-code-hook.js       # Claude Code hook

Credits

• Tileset: Office Tileset by DonArg
• Icons: Lucide React
• Engine: PixiJS