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.

解決する課題

標準的なターミナルでは追跡が困難な Claude Code エージェントのアクティビティを監視するための、プロフェッショナルなビジュアルインターフェースを提供します。エージェントセッション、ツール使用状況、サブエージェントのオーケストレーション、およびリソース消費(トークン/コスト)の可視化に関する問題を解決します。

仕組み

このプラットフォームは、ネイティブのフックシステムを介して Claude Code と統合されます。Node.js フックハンドラーがイベント(ツールの使用やセッションの停止など)をキャプチャし、HTTP POST を介して中央の Express サーバーに送信します。このサーバーはデータを SQLite に保存し、WebSockets を使用して React ベースのフロントエンドに更新をブロードキャストし、リアルタイムの可視化を実現します。

対象者

エージェントのワークフロー、セッション履歴、およびシステムの状態について深いオブザーバビリティ(観測性)を必要とする、Claude Code を使用している開発者およびチーム。

ハイライト

  • リアルタイム監視: アクティブなエージェントカード、ツールの呼び出し、およびセッションステータスを追跡するためのライブダッシュボード。
  • ビジュアル分析: エージェントとセッションステータスのためのカンバンボード、ツール実行のための Sankey ダイアグラム、およびワークフローのための D3.js/Mermaid 可視化。
  • セッションのディープダイブ: ライブトランスクリプト、時系列のイベントタイムライン、およびエージェント階層ツリーを含む詳細なビュー。
  • 設定管理: Claude Code のスキル、サブエージェント、およびメモリファイルを検査・編集するための専用エクスプローラー。
  • 高度なアラート機能: Slack、Discord、PagerDuty など 14 の webhook プロバイダーをサポートするルールベースのアラートエンジン。
  • リモート監視: SSH を介して他のマシンからアクティビティを取得する機能。