A real-time monitoring dashboard for Claude Code agents, this project provides engineers and power users with deep visibility into agent activity, tool usage, and subagent orchestration. It offers live analytics, status notifications, and an interactive web interface, enabling quick evaluation of agent performance and cost.

How It Works

The system integrates directly with Claude Code via its native hook system. Events like SessionStart, PreToolUse, and Stop are captured by a Node.js hook handler, which forwards them via HTTP POST requests to an Express server. This server processes events, updates a SQLite3 database, and broadcasts changes in real-time to a React-based frontend using WebSockets. This architecture ensures immediate visualization of agent states, tool invocations, and session lifecycles without polling.

Quick Start & Requirements

• Prerequisites: Node.js >= 18.0.0 (22+ recommended), npm >= 9.0.0.
• Installation: Clone the repository, navigate to the directory, and run npm run setup.
• Hook Configuration: Execute npm run install-hooks to configure Claude Code to send events to the dashboard.
• Running: Use npm run dev for development with hot-reloading or npm run build && npm start for production.
• Access: The dashboard is accessible at http://localhost:5173 (development) or http://localhost:4820 (production). Docker and Podman Compose options are also available.
• Links: Official Docs, Deployment Guide.

Highlighted Details

• Real-time Visualization: Live dashboard with overview stats, active agent cards, and an activity feed.
• Kanban Boards: Visualizes agents and sessions across status columns (Working, Waiting, Completed, Error, Abandoned).
• Detailed Analytics: Comprehensive views for session details, conversation transcripts, event timelines, token usage, tool frequency, and workflow visualizations (DAGs, Sankey diagrams).
• Cost Tracking: Per-model cost estimation with configurable pricing rules, updated manually.
• Local MCP Server: Includes a local MCP server exposing dashboard operations as tools for AI agents.
• Internationalization: UI supports English, Chinese, and Vietnamese.
• VS Code Extension: Monitor agents directly within the VS Code editor.
• Plugin Marketplace: Offers official plugins for analytics, productivity, devtools, and insights.

Maintenance & Community

The project appears actively maintained with detailed documentation and features. No specific community channels (like Discord or Slack) are listed in the README.

Licensing & Compatibility

The project is released under the MIT License, permitting commercial use and integration into closed-source projects.

Limitations & Caveats

Setup requires Node.js and npm. Functionality is dependent on Claude Code's hook system. Cost tracking requires manual updates to pricing rules. No explicit community support channels are detailed.