hoangsonww/Claude-Code-Agent-Monitor

🚀 A real-time monitoring dashboard for Claude Code & Codex, built with SQLite3, Node.js, Express, React, Vite, TailwindCSS, & WebSockets. It tracks sessions, agent activity, tool usage, and subagent orchestration, providing live analytics, a Kanban status board, status notifications, a cute buddy, & an interactive web UI/MacOS/Windows native app.

Claude Code & Codex Agent Dashboard

何であるか – Anthropic の Claude Code と OpenAI の Codex エージェントのリアルタイム活動を監視する自己ホスト型ウェブアプリケーション。エージェントが発行するフックイベント（ツール呼び出し、サブエージェント起動、トークン使用量、エラーなど）を受信し、ローカルの SQLite データベースに保存し、WebSockets / Server-Sent Events を通じて React ベースの UI にデータをプッシュします。UI ではセッション、エージェント、ツール使用状況、トークンフロー、ヘルスメトリクス、ワークフローダイアグラムを可視化し、デスクトップラッパー（Electron）と VS Code 拡張機能も提供して即時アクセスを可能にします。

コア機能（README に記載）

リアルタイム監視 – フックハンドラが Claude Code / Codex からの HTTP POST を受信し、SQLite に書き込み、即座に更新をブロードキャストします。
豊富な可視化 – トークン使用量の D3/Mermaid チャート、ツール頻度のヒートマップ、サブエージェントオーケストレーションの DAG、ツールパイプラインのサンキー図、ヘルススコアゲージ。
カンバンボード – エージェントとセッションをステータス（作業中、待機中、完了、エラーなど）ごとにグループ化。マウスオーバーで待機理由を説明するツールチップを表示。
セッションエクスプローラー – すべての記録されたセッションをページネーション・検索可能なテーブルで表示。コスト、モデル、実行時間、各セッションの詳細ページ（エージェント、会話トランスクリプト、タイムライン、分析）を提供。
国際化 – i18next を使用して英語、中国語、ベトナム語、韓国語、スペイン語をサポート。リロード後も言語設定が保持されます。
プラグインマーケットプレイス & 拡張機能 – Claude Code / Codex プラグイン、スキル、サブエージェント用の組み込みレイヤー。ローカル MCP（Model-Context-Protocol）サーバー経由でダッシュボードと連携可能。
デスクトップ & IDE 統合 – macOS（DMG）および Windows（NSIS/ポータブル）用 Electron ビルド。VS Code 拡張機能でエディタから直接ダッシュボードを開くことができる。
観測性スタック – プロダクション展開向けに、オプションの Prometheus メトリクス、Grafana ダッシュボード、OpenTelemetry コレクタ、Coralogix 統合を提供。
デプロイの柔軟性 – Docker/Podman イメージ、Helm チャート、Terraform モジュール、Kubernetes マニフェストを提供。サーバーは単純な npm start プロセスでも実行可能。
自動化ヘルパー – CLI スクリプト、Make ターゲット、GitHub Actions を用いた自動リリースパイプライン（ビルド、テスト：Vitest + React Testing Library、公開）。

技術スタック（バッジリストからの要約）

レイヤー	技術
バックエンド	Node.js ≥ 22, Express 4.21, better-sqlite3 (WALモード), WebSocket, Server-Sent Events, Swagger-UI, OpenAPI 3, Multer（ファイルアップロード）
フロントエンド	React 19, TypeScript 5, Vite 7, Tailwind CSS, D3.js, Mermaid, i18next, React-Router
デスクトップ	Electron 35 + electron-builder
観測性	Prometheus, Grafana, OpenTelemetry, Coralogix
インフラ	Docker, Podman, OCI, Kubernetes ≥ 1.29, Helm, Terraform ≥ 1.7, Nginx ingress
テスト / リンター	Vitest, React Testing Library, ESLint, Prettier
データベース	SQLite 3（better-sqlite3 経由）
CI/CD	GitHub Actions（自動リリース）
ライセンス	MIT

どのような人にとって有用か

Claude Code や Codex を使ってマルチエージェントアプリケーションを開発している開発者：エージェントがツールを呼び出し、サブエージェントを起動し、トークンを消費する様子を可視化したい人。
LLM駆動のコードアシスタントを運用しているチーム：使用状況、コスト、エラーパターンを監査できる中央UIが必要な人。
大規模にLLMエージェントを展開するオペス / SRE：ダッシュボードUIに加えて、PrometheusメトリクスとGrafanaダッシュボードを必要とする人。
エージェントオーケストレーション、ツール使用パターン、セッション間のトークンフローを研究している研究者。

はじめ方（README からのクイックスタート）

リポジトリをクローン

git clone https://github.com/hoangsonww/Claude-Code-Agent-Monitor.git
cd Claude-Code-Agent-Monitor

依存関係をインストール

npm ci   # バックエンドとフロントエンドのパッケージをインストール

サーバーを起動（開発モード）

npm run dev   # Express + SQLite + WebSocket + ホットリロード Vite UI を起動

Claude Code / Codex を設定
- エージェントのネイティブフック設定に、提供されたフックURL（例：http://localhost:3000/hook）を追加。ツール使用、停止時などにイベントをPOSTするように設定。
ダッシュボードを開く
- http://localhost:5173（Vite 開発サーバー）にアクセス、またはパッケージ化された Electron アプリを起動。
オプション：プロダクション展開
- UI をビルド：npm run build
- コンパイル済みの Express サーバーを実行：npm start
- または、提供された Dockerfile / Helm チャートを使ってコンテナ化/K8s展開。

詳細情報の入手先

Wiki – 実用的なハンドブック、自動化のレシピ、トラブルシューティング： https://github.com/hoangsonww/Claude-Code-Agent-Monitor/wiki
Docs フォルダ – 詳細な API 情報、i18nガイド、サーバーアーキテクチャ、MCP 統合。
ローカライズされた README – 中国語、ベトナム語、韓国語、スペイン語版。地域特有のヒントを提供。

ライセンス

MIT – 著作権表示を伴えば、個人的、学術的、商用用途で自由に利用可能。