Agent Office
Real-time WebSocket dashboard for 20 AI agents on a kanban board with live status and chat.
github.com/sigitdanip/agent-officeThe Problem
Twenty AI agents operate in parallel across kanban boards, event logs, standup summaries, and chat threads — 13 developers plus 6 paper-team specialists, all coordinated by one human lead via Discord DM. Watching them all at once is a coordination problem. Agent Office solves it by polling a shared SQLite kanban database every two seconds and pushing live state diffs to every connected browser via WebSocket.
The dashboard surfaces five panels: a team roster with per-agent status badges (color-coded by role), a kanban board color-coded by assignee across multiple boards (default for dev, paper-lead for papers), a streaming activity feed, sprint standup stats, and an agent chat log rendered as conversation bubbles. Everything updates live, no refresh required.
It runs in two modes: standalone VPS mode where the server reads the kanban database directly, and remote client mode where a lightweight Express server on Windows bridges the frontend to a remote backend over WebSocket. Zero native dependencies on the client side.
The System
The server opens the Hermes kanban SQLite database with better-sqlite3, reading all tables (projects, tasks, events, comments) every two seconds. It computes a lightweight state diff against the last known snapshot and pushes only what changed to connected WebSocket clients.
Express serves the single-page HTML frontend with compression middleware. Request timing metrics normalize route patterns to avoid Prometheus cardinality explosion. The remote mode injects the backend WebSocket URL directly into the HTML at serve time, so the frontend always connects to the right backend.
The frontend is zero-dependency vanilla JavaScript with no framework, no build step, no node_modules in the browser. CSS custom properties drive the brutalist terminal theme, and CSS transitions handle all status-change animations.
Results
The dashboard is designed for two-second glanceability. Each agent's status badge pulses when active, columns reflow as tasks change lanes, and the activity feed streams new events as they happen. CSS transitions keep everything smooth.
The system handles 20 agent profiles (13 dev + 6 paper + 1 human lead) with typical kanban workloads: 20-50 active tasks at any time, hundreds of events, and multiple concurrent WebSocket clients. Compression keeps payloads small for the 2-second poll cycle.
Implementation
The main server file handles Express setup, request timing middleware, static file serving, API routing, WebSocket management, and graceful shutdown, all in one cohesive module. The remote mode is a 20-line branch that swaps the backend connection strategy without touching the frontend.
Future work includes adding authentication for multi-user access, persisting dashboard layout preferences, and building a TypeScript migration path for the frontend.
Related
Agent Office is the monitoring layer for the same 20-agent Hermes team that powers the Crisis Monitor pipeline. Together they form a full-stack AI operations suite: Agent Office watches the agents, Crisis Monitor watches the world.