Agent Dashboard

Real-time surveillance dashboard for Claude Code Agent Teams

Monitor your AI agent teams live — track task progress, message flow, team coordination, and session history from a single pane of glass.

---

What It Does

Claude Code's experimental Agent Teams feature lets you spawn multiple Claude instances that work in parallel on the same codebase. This dashboard gives you a live view into what they're doing.

• Live team monitor — see active agents, task assignments, and real-time status
• Message feed — watch agent-to-agent and agent-to-lead communication as it happens
• Task tracker — follow task progress from pending → in_progress → completed
• Session history — replay and review past agent sessions
• SSE-powered — zero-polling, push-based updates via Server-Sent Events

---

Prerequisites

• Claude Code with Agent Teams enabled
• CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1 environment variable set
• Node.js 20+ or Bun

---

Quick Start

# Clone
git clone https://github.com/aiwithabidi/agent-dash.git
cd agent-dash

# Install
bun install

# Run
bun dev

Open http://localhost:3847

The dashboard connects automatically to Claude Code's local SQLite database (~/.claude/). Start a Claude Code session with agent teams and the dashboard updates live.

---

Stack

Layer	Tech
Framework	Next.js 16 (App Router)
UI	React 19 + Tailwind CSS v4
Components	shadcn/ui + Radix UI
State	Zustand
Real-time	Server-Sent Events (SSE)
Database	better-sqlite3 (reads Claude Code's local DB)
Tables	TanStack Table
Animations	Motion
Tests	Playwright (E2E)

---

Project Structure

src/
├── app/
│   ├── api/           # SSE stream, teams, tasks, sessions, messages
│   ├── live/          # Real-time agent monitoring view
│   ├── history/       # Session replay
│   └── layout.tsx     # Root layout with SEO metadata
├── components/
│   ├── layout/        # App shell, header, sidebar, split layout
│   ├── live/          # Live team view components
│   └── ui/            # shadcn/ui primitives
└── stores/
    └── dashboard-store.ts   # Zustand global state

---

How It Works

Claude Code stores agent team state in a local SQLite database at ~/.claude/. This dashboard's API routes read that database directly and stream updates to the frontend via SSE — no backend server needed beyond Next.js.

Claude Code Agent Teams
        ↓ writes
~/.claude/*.db (SQLite)
        ↓ reads (API routes)
SSE Stream (/api/stream)
        ↓ pushes
React UI (live dashboard)

---

Running Tests

# E2E tests (Playwright)
bun test:e2e

# With UI
bun test:e2e:ui

---

Contributing

PRs welcome. Open an issue first for major changes.

---

Part of the OpenClaw Ecosystem

This dashboard was built while running OpenClaw — a personal AI assistant you self-host across WhatsApp, Telegram, Discord, Slack, and more. Agent Dashboard gives you visibility into the Claude Code agent teams that power agentic workflows.

If you're using Claude Code with agent teams, OpenClaw + Agent Dashboard is a natural pairing:

• OpenClaw handles your personal AI assistant across all your channels
• Agent Dashboard monitors the Claude Code agent teams doing the work

openclaw.ai · github.com/openclaw/openclaw

---

Built By

Mohammad-Ali Abidi — AI developer and builder

• Website: agxntsix.ai
• Email: abidi@agxntsix.ai
• GitHub: @aiwithabidi
• LinkedIn: mohammad-ali-abidi
• YouTube: @aiwithabidi
• Instagram: @abidi.ai

---

License

MIT — free to use, modify, and distribute.