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 代理活動，而這在標準終端機中通常難以追蹤。它解決了代理會話、工具使用、子代理編排以及資源消耗（Token/成本）的可視化問題。

工作原理

該平台透過其原生鉤子系統與 Claude Code 集成。Node.js 鉤子處理器捕捉事件（如工具使用或會話停止），並透過 HTTP POST 發送到中央 Express 伺服器。該伺服器將數據儲存在 SQLite 中，並使用 WebSockets 向基於 React 的前端廣播更新，實現即時視覺化。

適用對象

需要對代理工作流、會話歷史和系統健康狀況進行深度觀測的 Claude Code 開發者和團隊。

亮點

  • 即時監控：用於追蹤活動代理卡片、工具調用和會話狀態的即時儀表板。
  • 視覺化分析：用於代理和會話狀態的看板、用於工具執行的 Sankey 圖，以及用於工作流的 D3.js/Mermaid 可視化。
  • 會話深度解析：包括即時轉錄、按時間順序排列的事件時間線和代理層級樹的詳細檢視。
  • 配置管理：用於檢查和編輯 Claude Code 技能、子代理和記憶體檔案的專用資源管理器。
  • 進階告警：支援 Slack、Discord 和 PagerDuty 等 14 個 webhook 提供商的基於規則的告警引擎。
  • 遠端監控：能夠透過 SSH 從其他機器獲取活動數據。