Claude Agent Dashboard

A real-time monitoring dashboard for Claude Code sessions. Watch agent activity as it happens, browse persistent memory files across projects, and review session history — all from a local web UI served by a lightweight Express server.

Everything runs on 127.0.0.1. No data leaves your machine.

Table of Contents

• Themes
• Features
• Prerequisites
• Installation
• Starting the Dashboard
• Configuration
• How It Works
• Development
• Troubleshooting
• Uninstalling

Themes

Avalon Deck	Cipher
Digital Rain	Inferno Station
Iron AI	LCARS
Rebel Command	Xenoterm

Features

Live view

Real-time session feed with an agent Gantt timeline and scrolling event log. Updates within 1 second of any Claude Code hook event. Shows tool calls, agent invocations, and prompt boundaries as they happen.

Memory browser

Browse memory/*.md files across all projects that have appeared in session history. Filter by status, type, prefix, or search text. Click any row to read the full file with rendered markdown.

Session history

SQLite-backed log of past sessions. Shows duration, prompt counts, and agent invocation counts per session. Click a session to expand its full event timeline.

Themes

8 built-in themes — see the gallery above for screenshots: Avalon Deck, Cipher, Digital Rain (animated Matrix canvas), Inferno Station, Iron AI, LCARS, Rebel Command, Xenoterm.

Zero native dependencies

Uses Node's built-in node:sqlite module — no C++ build tools, no native add-ons.

Prerequisites

• Node.js 22+ (required for the built-in node:sqlite module — earlier versions will fail with a module-not-found error)
• pnpm — npm install -g pnpm
• Claude Code

Optional: claude-agent-pack — a curated set of Claude Code agent definitions that write structured memory/*.md files. The dashboard works with any Claude Code installation, but the Memory browser is most useful when agents consistently write memory files. claude-agent-pack provides agents that do this out of the box.

Installation

git clone https://github.com/chuckplayer/claude-agent-dashboard.git
cd claude-agent-dashboard

macOS / Linux

./install.sh

Windows (PowerShell)

.\install.ps1

The installer will:

1. Install dependencies and build the server and dashboard
2. Create ~/.claude/agent-dashboard/config.json with defaults
3. Merge hook configuration into ~/.claude/settings.json

Starting the Dashboard

macOS / Linux

./start-dashboard.sh

Windows

.\Start-Dashboard.ps1

Then open http://localhost:7822 in your browser.

Configuration

Config file: ~/.claude/agent-dashboard/config.json

{
  "port": 7822,
  "dbPath": "~/.claude/agent-dashboard/dashboard.db",
  "logLevel": "info",
  "retainSessionsDays": 90,
  "nodePath": ""
}

The server binds to 127.0.0.1 only — it is never exposed on 0.0.0.0.

How It Works

Claude Code hook fires
       |
       v
event-hook.ps1 / event-hook.sh
       |  POST /events  (x-project-dir header)
       v
Express server (127.0.0.1:7822)
       |
       +-- SQLite  (sessions, events, agent_runs)
       +-- WebSocket broadcast to all connected clients
       +-- chokidar watches memory/ directories
       |
       v
Vue 3 SPA  (http://localhost:7822)
  Live | Memory | History

Hook scripts are installed into ~/.claude/settings.json and fire on every Claude Code tool use. Each event is a small JSON payload sent to the local server.

Development

Start both the server and the Vite dev server with hot reload:

pnpm dev

The dashboard dev server runs at http://localhost:5173 — open that during development, not 7822. The Vite proxy forwards /api and /ws to the backend on 7822.

Do not open 7822 directly during dev mode: it serves the last production build, not the live-reloading version.

To override the default port:

VITE_SERVER_PORT=8000 pnpm dev:dashboard

Building individually

pnpm --filter server build
pnpm --filter dashboard build

Troubleshooting

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'node:sqlite'
You are running Node.js older than 22. Run node --version to check. Install Node 22+ via nvm or the official installer.

Events are not appearing in the Live view
The hook scripts must be registered in ~/.claude/settings.json. Re-run the installer (./install.sh or .\install.ps1) to merge the hook config. You can verify the hooks are present by checking that settings.json contains an entry pointing to event-hook.sh (macOS/Linux) or event-hook.ps1 (Windows).

The dashboard shows a blank page or can't connect
Make sure the server is running (./start-dashboard.sh or .\Start-Dashboard.ps1) before opening the browser. Check the server logs for port conflicts if 7822 is already in use, and update port in config.json.

nodePath not finding Node
If launching the dashboard outside a normal shell (e.g. as a login item or via a launcher app), PATH may not include the Node binary. Set nodePath in config.json to the absolute path returned by which node (macOS/Linux) or (Get-Command node).Source (Windows).

Uninstalling

macOS / Linux

./uninstall.sh

Windows

.\uninstall.ps1

Your session history (dashboard.db) is preserved by default.

License

MIT