hoangsonww/Claude-Code-Agent-Monitor
🚀 A real-time monitoring dashboard for Claude Code, built with SQLite3, Node.js, Express, React, Vite, TailwindCSS, and WebSockets. It tracks sessions, agent activity, tool usage, and subagent orchestration, providing live analytics, a Kanban status board, status notifications, a cute buddy, and an interactive web UI/MacOS/Windows native app.
What it solves
It provides a professional, visual interface to monitor Claude Code agent activity, which can otherwise be difficult to track through a standard terminal. It solves the problem of visibility into agent sessions, tool usage, subagent orchestration, and resource consumption (tokens/cost).
How it works
The platform integrates with Claude Code via its native hook system. A Node.js hook handler captures events (like tool usage or session stops) and sends them via HTTP POST to a central Express server. This server stores data in SQLite and broadcasts updates to a React-based frontend using WebSockets for real-time visualization.
Who it’s for
Developers and teams using Claude Code who need deep observability into agent workflows, session history, and system health.
Highlights
- Real-time Monitoring: Live dashboard for tracking active agent cards, tool invocation, and session status.
- Visual Analytics: Kanban boards for agent and session status, Sankey diagrams for tool execution, and D3.js/Mermaid visualizations for workflows.
- Session Deep-dives: Detailed views including live transcripts, chronological event timelines, and agent hierarchy trees.
- Configuration Management: A dedicated explorer to inspect and edit Claude Code skills, subagents, and memory files.
- Advanced Alerting: Rules-based alerting engine with support for 14 webhook providers like Slack, Discord, and PagerDuty.
- Remote Monitoring: Ability to pull activity from other machines over SSH.