A visual command center for the OpenClaw ecosystem, providing real-time agent/subagent monitoring, timeline debugging, alert management, and multi-agent orchestration. Built with React 19 + Vite 7, featuring SSE streaming updates and configurable isometric office layouts.
openClawOffice is a web-based visual command center designed for real-time monitoring and orchestration of OpenClaw agents and subagents. Currently at version 0.0.0, it is under active development with MIT license.
- Lack of unified visualization interface for monitoring multi-agent runtime status in OpenClaw ecosystem
- Missing timeline playback and event tracing capabilities when debugging Agent behavior
- Difficulty in quickly identifying anomalies and orchestrating tasks in multi-agent scenarios
- Local single-user only: Runtime constraint binds to
127.0.0.1
- Depends on OpenClaw runtime: Must be pre-installed in
~/.openclaw/ directory
- Frontend monitoring tool: Does not execute Agent logic directly, only provides observation and command entry points
| Feature | Description |
|---|
| Real-time Monitoring | SSE streaming updates, 2.5s refresh cycle, polling fallback supported |
| Isometric Office View | 5 functional zones: Strategy Room / Ops Floor / Spawn Lab / Build Pods / Recovery Lounge |
| Configurable Room Layout | Supports ring, grid, line, cluster shapes |
| Agent/Subagent Distinction | Different style identifiers, entity clustering supported |
| Timeline Debugger | Play, filter, event type filtering |
| Command Palette | ⌘/Ctrl + K shortcut to invoke |
| Alert Rules Engine | Custom alert rules, ⌘/Ctrl + Shift + A to open alert center |
| OpenClaw Hub | Project status dashboard, progressive information disclosure |
| ARIA Accessibility | Compliant with accessibility standards |
openClawOffice/
├── src/
│ ├── components/ # React components
│ ├── hooks/ # Custom hooks (useOfficeStream)
│ ├── lib/ # Core logic
│ └── types/ # TypeScript types
├── server/ # Vite plugin API (embedded middleware)
├── public/assets/ # Static assets and configuration
└── docs/ # Documentation
Data from ~/.openclaw/ agents and subagents → server/office-state.ts builds OfficeSnapshot → outputs via /api/office/snapshot or /api/office/stream (SSE) → consumed by useOfficeStream hook → renders to OfficeStage (isometric view), EventRail (timeline), Stats bar
- API-as-Plugin: No standalone backend process,
server/ runs as Vite middleware plugin
- Room Layout Algorithm: Dynamically calculates entity positions based on zone-config.json
- Hash Sprites:
hashString(entityId) selects deterministic avatars from Kenney sprite sheet
- Bubble Extraction: Latest JSONL line from session files parsed as dialogue bubbles
- Config Hot Reload: Zone configuration auto-refreshes every 10 seconds
- Node.js 18+ (20+ recommended)
- pnpm 8+
- OpenClaw runtime installed in
~/.openclaw/
git clone https://github.com/Two-Weeks-Team/openClawOffice.git
cd openClawOffice
pnpm install
pnpm dev
# Access at http://127.0.0.1:5179
| Variable | Default | Description |
|---|
OPENCLAW_STATE_DIR | ~/.openclaw | OpenClaw state directory |
OPENCLAW_PROJECT_DIR | ../openclaw | OpenClaw project root directory |
OPENCLAW_GATEWAY_PORT | 18789 | OpenClaw gateway port |
PORT | 5179 | Development server port |
| Endpoint | Method | Description |
|---|
/api/office/snapshot | GET | Full office state snapshot |
/api/office/stream | GET | SSE real-time update stream |
/api/office/metrics | GET | Server metrics and diagnostics |
/api/office/openclaw-hub | GET | OpenClaw project status snapshot |
/api/office/openclaw-hub/doc | GET | Full document content (?path=) |
| Shortcut | Action |
|---|
| ⌘/Ctrl + K | Open command palette |
| ⌘/Ctrl + H | Toggle OpenClaw Hub |
| ⌘/Ctrl + Shift + A | Open alert center |
| Escape | Close panel/clear selection |
| + / - | Zoom |
| 0 | Reset zoom |
| F | Fit content |
- AI agent operations monitoring (real-time execution status, subagent lifecycle)
- Debugging & diagnostics (timeline playback, session message inspection)
- Multi-agent orchestration (manage up to 50 active agents in isometric office view)
- Project health overview (OpenClaw Hub dashboard)
- openClawWorld - Spatial AI Collaboration OS by the same organization