Claude Code Session Dashboard: 複数セッションを監視するオープンソースツール

概要

Claude Codeセッションダッシュボードは、複数のClaude Codeセッションを同時に実行する際の可視性の問題を解決するために構築されたオープンソースツールです。セッション全体のコスト、セッションステータス、コンテキストウィンドウ使用率を統合して表示します。

開発経緯

プロジェクト全体はClaude Codeを使用して記述されました。開発者が問題を説明すると、ClaudeはClaude CodeがJSONLセッションログを~/.claude/projects/に書き込むことを特定しました。その後、Claudeはファイルウォッチャー、Express API、フロントエンドを単一のHTMLファイル内に構築しました。

セッションごとの機能

• 正確なモデルごとの価格設定によるトークン使用量とコスト
• ステータスインジケーター：思考中、待機中、アイドル、または古い状態
• 視覚的なプログレスバーとしてのコンテキストウィンドウ使用率
• 実行中のアクティブなサブエージェント
• セッションが現在作業中のファイル
• 展開可能なアクティビティログ
• Gitブランチと権限モード（AUTO-EDIT / YOLO）

仕組み

Claude CodeはJSONLセッションログを~/.claude/projects/に書き込みます。ダッシュボードはこれらのファイルを監視し、ブラウザタブですべてをレンダリングします。WebSocket、ビルドステップ、クラウドは不要で、Node.jsがローカルファイルを監視し、UI用の単一HTMLファイルを使用します。

クイックスタート

git clone https://github.com/Stargx/claude-code-dashboard
cd claude-code-dashboard
npm install && npm start

その後、http://localhost:3001を開いてください。このプロジェクトは無料でMITライセンスです。

開発者はフィードバックを求めています。特に、セッション検出で問題が発生する可能性のあるmacOSまたはLinuxユーザーからの意見を歓迎します。