Real-time control plane for Claude Code.
A local-first dashboard that tracks every Claude Code session, agent, and tool call as it happens - and now spawns new ones for you. Sessions, kanban, analytics, workflows, MCP, plugin marketplace, and a 12-tab Config Explorer for everything Claude Code knows about.
Why local-first?
Your Claude Code data stays where it belongs - on your machine. No accounts to sign up for, no cloud service to trust, no telemetry quietly leaking back. Just a fast dashboard that watches what's already happening on your laptop.
Zero telemetry
No accounts, no analytics, no third-party calls. The MCP server binds to localhost. Web Push needs your explicit opt-in. What you do here stays here.
Instant feedback
Hooks fire to the local server in milliseconds. WebSocket push updates the UI before you've taken your finger off the keyboard. No polling, no spinners.
Yours forever
Everything's a SQLite file in ~/.dashboard/ and JSONL transcripts in
~/.claude/. Backup with cp, sync with whatever you already
use, take it offline.
Hooks-native
Built around Claude Code's own hook system. The dashboard never wraps, proxies, or monkey-patches your CLI. Your normal workflow continues even if the dashboard is down - hooks always exit zero.
Everything you need, on your machine.
Hooks-driven session capture, deep analytics, in-browser Claude spawning, full configuration inspector, and a typed local MCP server with 25 tools.
Real-time dashboard
Six-tile overview, live agent cards with collapsible subagent hierarchy, recent activity feed, and a composite Health tab - all updated via WebSocket push, no polling.
Run Claude in-browser
Spawn claude subprocesses with a chat-style streaming UI. Conversation
or one-shot mode. Resume any past session in one click. Slash + @-file
autocomplete, live token meter, thinking-effort dial, and model picker.
Claude Config Explorer
12 tabs covering skills, subagents, slash commands, output styles, plugins, marketplaces, MCP servers, hooks, settings, memory, keybindings, statusline. Edit text-file artifacts with timestamped backups.
Workflows visualization
D3-powered orchestration DAG, tool execution Sankey, collaboration network, error propagation map, concurrency timeline, complexity scatter, compaction impact - 11 datasets with rich i18n tooltips.
Cost & token tracking
Per-model cost estimation with configurable pricing rules, compaction-aware token accounting that preserves totals across context compressions, and an LRU-cached JSONL extractor.
Local MCP server
25 typed tools across 6 domains. Three transport modes (stdio, HTTP+SSE, interactive REPL). Strict input schemas, retry/backoff, localhost-only API enforcement, and tiered safety gates.
Hooks-driven capture
Auto-installs into ~/.claude/settings.json. SessionStart, PreToolUse,
PostToolUse, Stop, SubagentStop, Notification - every event lands in SQLite within
milliseconds.
Plugin marketplace
Official plugin marketplace with 5 plugins: ccam-analytics, ccam-productivity, ccam-devtools, ccam-insights, ccam-dashboard. 18 skills, 4 agents, 3 CLI tools, 2 hook configs.
Multi-language UI
English, Chinese, and Vietnamese - coverage extends end-to-end through every chart tooltip, Settings flow, Workflow narrative, Config Explorer tab, and Run page.
Kanban board
Agents and sessions in toggleable views. Working / Waiting / Completed / Error / Abandoned columns with card cost, model, and current tool at a glance. WebSocket-scoped updates avoid unnecessary refetches.
Swagger API docs
Full OpenAPI 3.0 spec with interactive Swagger UI. Try-it-out controls for every endpoint, request/response schemas, and collapsible endpoint groups - all served locally alongside the dashboard.
VS Code extension
Full dashboard sidebar inside VS Code. Monitor active sessions, view agents, and track tool calls without leaving your editor. Ships as a VSIX with zero external dependencies.
macOS desktop app
The whole dashboard as a native macOS .app, built with Electron 35. It
embeds the Express server in-process, lives in the menu bar with a live status
snapshot dropdown, auto-starts at login, and installs Claude Code hooks on first
boot - zero-setup monitoring. Runs alongside npm run dev with hooks
fanning out to both dashboards in parallel.
Live activity feed
A real-time streaming event log with pause/resume buffering, multi-dimension filters, color-coded entries by event type, expandable hook payloads, and per-row session navigation. WebSocket-scoped updates so off-screen events never cost a refetch.
History import & backfill
Rescan ~/.claude/projects/, point at any directory, or drag-drop a
.tar.gz archive of transcripts. Imports are idempotent
— per-event-type high-water marks dedupe re-runs — with WebSocket progress, archive
extraction limits, and full subagent JSONL parsing.
Cross-surface notifications
Configurable per event type (new session, error, completion, subagent spawn). The web dashboard uses Web Push (VAPID); the macOS app fires native macOS toasts directly from the embedded server, side-stepping Web Push (which has no FCM credentials inside Electron). Both surfaces stay live when running together.
See it for yourself.
Every page of the dashboard, from real-time monitoring to config editing, API docs, and even the VS Code extension. Click any screenshot to expand.
How the data flows.
A tight pipeline from CLI hooks to your browser. Everything's local - SQLite, your home dir, your machine. No accounts, no cloud, zero telemetry.
Claude Code fires a hook
Auto-installed entries in ~/.claude/settings.json trigger
scripts/hook-handler.js on every SessionStart, PreToolUse, PostToolUse,
Stop, SubagentStop, and Notification.
Hook handler POSTs
Stdin payload is parsed and POSTed to http://127.0.0.1:4820/api/hooks/event.
Always exits zero - Claude Code never blocks on the dashboard being unreachable.
Server ingests & persists
Single SQLite transaction per event. Auto-creates sessions and agents. Extracts token usage, tool calls, compactions, API errors, and turn durations from JSONL transcripts via a stat-cached reader.
WebSocket push
session_*, agent_*, and new_event frames stream
to every connected client. The React UI updates without polling. New
run_stream / run_status frames power the Run page.
Who actually uses this.
Originally a tool for one person to keep track of one developer's Claude Code use. Turned out it's useful for anyone who ships AI-assisted code - solo or in a team.
Watch what your CLI is doing
See every session, every tool call, every token spent - in real time. Cost tracking, compaction-aware accounting, kanban view of in-flight work.
Monitor team-wide CC usage
Deploy to Kubernetes with Helm, point hook handlers at the central instance, get Prometheus metrics + Grafana dashboards. Aggregate cost by project / model / user.
Inspect & debug your plugin
Config Explorer shows exactly what your plugin contributes, how its hooks fire, and how its skills/agents are structured. Marketplace tab walks you through publishing.
Run Claude from the browser
Spawn one-shot or multi-turn sessions, resume any past conversation, manage runs
from a single page. Slash + @-file autocomplete, live token meter, effort
dial, model picker, and permission mode all per-spawn.
Optimize your AI spend
Per-model pricing rules, daily / weekly / monthly cost trends, token-by-token analytics, compaction baselines so you know exactly what each session costs - even after a long thread compresses.
Study agentic workflows
D3 orchestration DAG, Sankey of tool transitions, collaboration network of subagent calls, error-propagation map - the workflow page is purpose-built for understanding how multi-agent CC sessions actually behave.
Keep the squad aligned
See who's running what, which sessions are active across the team, and how many tokens each project consumes. Kanban board and activity feed keep standups honest.
Monitor without leaving the editor
Use the VS Code extension sidebar to watch sessions and tool calls while you code. No browser tab needed - everything docks into VS Code as a side panel.
Up and running in 60 seconds.
Local-first by design. Clone, install, run - your Claude Code sessions start showing
up immediately because the dashboard auto-installs its hooks into your existing
~/.claude/settings.json.
Run it from your browser.
Four commands.
No accounts, no cloud, no telemetry. Everything stays on your machine. Existing
sessions in ~/.claude/projects import on first start.
# Clone & install $git clone https://github.com/hoangsonww/Claude-Code-Agent-Monitor $cd Claude-Code-Agent-Monitor $npm run setup # Install the hooks $npm run install-hooks # Start the dashboard (server + Vite) $npm run dev # Then open →http://localhost:4820
Install it once, forget the terminal.
Prefer not to keep a terminal open? The dashboard also ships as a native macOS
.app - an Electron 35 shell that embeds the same Express server
in-process and renders the built React client in a native window. Same dashboard,
macOS-native lifecycle on top.
Native, menu-bar-first
A menu-bar (tray) icon with a single-click dropdown showing a live status snapshot (sessions, agents, events today), a native macOS title bar with the conventional traffic-light row, single-instance lock, and window-close-hides-but-server-keeps-running. ⌘Q opens a confirmation dialog (press ⌘Q again to skip it).
Auto-start at login
Toggle Open at Login from the tray menu - it registers through macOS's native Login Items, so the dashboard is always running when you sit down.
Zero-setup, durable data
On first boot the app installs Claude Code hooks and starts background services
automatically - a DMG-only user gets monitoring with essentially no manual setup.
Your SQLite database lives in
~/Library/Application Support/Claude Code Monitor/data/, outside the
.app bundle, so it survives reinstalls and updates. The app also
recovers your login-shell PATH at startup, so Run Claude can
find and launch the claude CLI. Notifications are delivered as
native macOS toasts from the embedded server (Web Push doesn't
work reliably inside Electron).
Coexists with the web dashboard
Run the desktop app and npm run dev at the same time and both stay
real-time. Every running dashboard appends its {port, pid, startedAt}
entry to ~/.claude/.agent-dashboard.json on startup; the hook handler
fans each hook out to every live entry in parallel, so both UIs receive the same
events and both their SQLite stores stay in sync. Stale entries self-evict via a
PID liveness check on read.
From DMG to running in under a minute.
The DMG isn't notarized through Apple (yet), so the first launch needs one extra Terminal command to clear macOS's quarantine flag. Everything after that is normal macOS lifecycle.
Download the right DMG
Open the latest
release and grab
ClaudeCodeMonitor-<version>-arm64.dmg for Apple Silicon (M1 / M2 /
M3 / M4) or -x64.dmg for Intel Macs. Not sure which? Open the
Apple menu → About This Mac: anything labelled "Apple" silicon is
arm64.
Drag into Applications
Double-click the DMG to mount it, then drag Claude Code Monitor.app
onto the Applications shortcut beside it. Eject the DMG once the
copy is done.
Clear the Gatekeeper quarantine
In Terminal, run:
xattr -cr "/Applications/Claude Code Monitor.app". Without this,
macOS shows "Apple could not verify…" because the build is ad-hoc signed,
not notarized. One-time step per install.
Launch & toggle auto-start
Open Claude Code Monitor from Applications (or
Spotlight). The menu-bar icon appears within a second; click it →
Open at Login and macOS will start the app at every login from now on -
managed through System Settings → General → Login Items.
Get it in two ways.
Download a pre-built DMG - no build required. Hit the
button below to land on the latest GitHub Release; grab
the matching arch DMG -
ClaudeCodeMonitor-<version>-arm64.dmg for Apple Silicon
or -x64.dmg for Intel - from its assets and drag the app into
/Applications. The link always redirects to the current
release because CI publishes a new vX.Y.Z automatically every
time the version in package.json is bumped on
master. Releases are public - no GitHub sign-in required.
Want a per-commit build from CI instead of waiting for a
release? The macOS Desktop (DMG) workflow uploads a
ClaudeCodeMonitor-dmg artifact on every green run - useful
for testing master before it's tagged. Or
build it yourself: a single-arch build
(desktop:dmg:arm64 or desktop:dmg:x64) finishes
in about a minute, while desktop:dmg produces both DMGs in
one go - the same dual output the release workflow ships - and is
correspondingly slower. Each DMG is roughly 125 MB, about
250 MB installed.
# Build the macOS .app locally $npm run setup $npm run build $npm run desktop:install # Fast - one architecture (recommended for your own Mac) $npm run desktop:dmg:arm64 # Apple Silicon $npm run desktop:dmg:x64 # Intel # Both arches - two separate DMGs, what the release workflow ships $npm run desktop:dmg # Open the DMG, drag the app to Applications, then clear # the Gatekeeper quarantine on first launch: $xattr -cr "/Applications/Claude Code Monitor.app"
A purpose-built page for every job.
Each route is its own focused workspace - kanban for at-a-glance status, sessions for drill-down, analytics for trends, run for live spawning. They all sit on the same hook-driven event store, so what you see anywhere is the same source of truth.
/
Live overview of every active session, agent, and tool call across all projects.
/kanban
Drag-free swim lanes by agent status - waiting, working, completed, error, abandoned.
/sessions
Searchable, filterable list of every session with token, cost, and status facets.
/sessions/:id
Full conversation transcript, agent tree, tool calls, errors, and per-turn token cost.
/activity
Real-time event log with grouping, multi-dimension filters, and pause / resume.
/analytics
Cost trends, model mix, tool usage, error rates, productivity heatmaps - 11 datasets.
/workflows
D3-rendered subagent DAGs, propagation maps, and complexity bubbles per session.
/cc-config
12-tab inspector for skills, subagents, plugins, MCP, hooks, settings, memory, and more.
/run
Spawn, resume, attach, and stream Claude subprocesses straight from the browser with full config control.
/settings
Pricing rules, hook installer, notification setup, theme, language, and data tools.
A focused stack.
Boring, battle-tested foundations. No SaaS, no databases-as-a-service, no authentication providers. Just your machine + the tools that actually matter.
Frequently asked questions.
Quick answers to the things people ask most. The wiki has the full picture.
Does this send any data to the cloud?
No. The dashboard is a 100% local-first Node.js + React app that reads your existing
~/.claude/ directory and writes to a local SQLite file. There is zero
telemetry, zero analytics, no third-party calls. The MCP server is bound to
localhost. Web Push notifications use VAPID and only push to subscribers who
explicitly opted in via your own browser.
How does it integrate with Claude Code?
Claude Code's native hook system. npm run setup installs hook entries
into ~/.claude/settings.json that POST every SessionStart, PreToolUse,
PostToolUse, Stop, SubagentStop, and Notification event to the local server. Hooks
always exit zero so they never block your CLI; if the dashboard is down, your
workflow is unaffected and events resume capture as soon as it's back.
Will running Claude from the dashboard cost extra tokens?
The Run page spawns real claude processes - they consume your normal
Claude Code quota / API tokens, the same as if you ran them in your terminal. The
dashboard adds no overhead. The cost-tracking analytics show you exactly what each
run consumes, by model, with compaction-aware accounting.
Can I resume any session, even ones I didn't start in the dashboard?
Yes. The Run page's "Resume existing session" picker lets you select any session
from your full history (everything that's ever lived in
~/.claude/projects/), spawn claude --resume <id> with
the original cwd, and continue the conversation from where it left off - directly
in your browser.
Does the Run page have feature parity with the terminal TUI?
Most of what matters, with the limits the stream-json interface forces on us. We
support slash-command autocomplete (user / project / plugin commands expanded
client-side, plus built-in CLI commands flagged "CLI only - won't run from here"),
@-file references with debounced cwd-scoped fuzzy search, a live
context-window / token meter showing input + output + cache-read with cost, a
thinking-effort field wired to --effort, multi-turn conversation,
session resume, real character-by-character streaming, and full hook capture. What
doesn't carry over is the TUI itself - in-place tool approval prompts,
interactive /login / /init, the keybinding overlay - those
are CLI-only. There's a collapsible limitations banner on the Run page that spells
out exactly which is which, and any session can be popped open in your terminal
with claude --resume <id>.
Is it safe to edit my skills / agents from the Config Explorer?
Yes. Every mutation creates a timestamped backup in
<CLAUDE_HOME>/cc-config-backups/<type>/ before writing. Backups land
outside the directories Claude Code scans, so a deleted skill cannot resurface as a
backup-named one. Writes are atomic via temp file + rename. Plugins, MCP servers,
hooks-in-settings, and live settings.json files are intentionally
read-only because they have concurrent-write races with the running CLI.
Is there a desktop app, and how is it different from running the server?
Yes - a native macOS .app built with Electron 35. It embeds the same
Express server in-process and renders the built React client in a native window,
so it is the same dashboard with macOS-native lifecycle on top: a menu-bar icon,
a native app menu, auto-start at login, a single-instance lock, and
window-close-hides-but-server-keeps-running. It also installs Claude Code hooks
and starts background services on first boot, so you get monitoring with
essentially zero manual setup. Get it by downloading the
ClaudeCodeMonitor-dmg CI artifact or building locally with
npm run desktop:dmg:arm64 / :x64 (fast) or
npm run desktop:dmg (universal, slow). The DMG is ad-hoc signed, so
clear Gatekeeper on first launch with
xattr -cr "/Applications/Claude Code Monitor.app". Your SQLite
database lives in ~/Library/Application Support/Claude Code Monitor/data/
outside the .app bundle, so it survives reinstalls and updates, and the
app recovers your shell PATH at startup so Run Claude can
launch the claude CLI. macOS only for now - see the
MacOS app guide.
What about scaling / multi-user?
The default deployment mode is single-user, localhost-bound. For team setups we ship Docker / Podman compose files, Kubernetes manifests with Kustomize, Terraform modules for AWS/GCP/Azure/OCI, Helm charts, and Prometheus/Grafana observability - see the deployment guide.
Take Claude Code from black box to glass box.
See every session, agent, and tool call as it happens. Spawn and resume Claude from your browser. Inspect every plugin, skill, hook, and setting in 12 tabs. All on your machine - no telemetry, no signup, no cloud.