Claude Code セッショントラッカー UI
概要
Claude Code Session Tracker は、複数プロジェクトにまたがる Claude のコード作業セッションを可視化するリアルタイムダッシュボードです。Durable Streams によるリアルタイム更新で「現在 Claude が何をしているか」「どのセッションが承認を必要としているか」を即座に把握でき、カンバンビューでステータス別にセッションを整理します。さらに Claude Sonnet による AI 要約でセッション活動を自動的に要約し、関連する PR と CI ステータスも紐付けてトラッキングします。チーム運用でのレビュー待ち、CI エラーの早期発見、マルチリポジトリ対応が主なユースケースです。
リポジトリの統計情報
- スター数: 13
- フォーク数: 3
- ウォッチャー数: 13
- コミット数: 22
- ファイル数: 9
- メインの言語: TypeScript
主な特徴
- Durable Streams によるリアルタイム更新で即時反映されるダッシュボード
- カンバンボードでセッションを「Working / Needs Approval / Waiting / Idle」等に分類
- Claude Sonnet を用いた AI 要約でセッション活動を自動要約
- PR と CI の紐付けによるマルチリポジトリでの進捗可視化
技術的なポイント
このプロジェクトはフロントエンド側が TypeScript で書かれており、リアルタイム性を確保するために Durable Streams を利用する設計が目立ちます。Durable Streams は接続の再確立や履歴の差分配信、各クライアントごとのストリーム購読管理が可能なため、複数クライアントが同時にダッシュボードを閲覧しても一貫した状態を保てます。アーキテクチャとしては、セッションごとに一意のイベントストリームを発行し、UI はそのストリームを購読してセッションのステータス更新・ログ・PRリンク・CI ステータスを反映する流れが想定されます。
データモデルは「セッション」エンティティ(ID、ステータス、開始時刻、最終更新、関連 PR/CI、要約)を中心に設計されていると考えられ、ステート管理は差分イベントに基づくインクリメンタル更新で低遅延を実現します。AI 要約は Claude Sonnet へセッションログを送り、要約テキストを受け取って UI に表示するパイプラインで、要約頻度やトークンコスト管理、要約のバージョン管理(いつのログを元に生成したか)といった実運用上の設計配慮が重要です。
PR/CI トラッキング部分は GitHub などの外部 API から PR メタデータと CI ステータスを取得し、セッションと紐づけて表示する役割です。実装上の課題としては API レート制限、CI フローの多様性(GitHub Actions、CircleCI 等)への対応、そして CI ステータスの正確なマッピングがあります。Durable Streams 経由で送るイベントには idempotency を保つためのイベント ID やタイムスタンプを付与し、クライアント側で順序や重複を処理できるようにするのが実務的です。
拡張性としては、コネクタ層を抽象化して新しいリポジトリソースや CI システムを追加できる設計、細粒度の権限管理(誰が承認できるか)や監査ログの保持、そしてオフライン時の差分同期(再接続時に欠落イベントを補完)を組み込むことが推奨されます。テスト面では TESTING.md が用意されており、Durable Streams のモックや API 結合テストを整備することで信頼性を高められます。
プロジェクトの構成
主要なファイルとディレクトリ:
- .gitignore: file
- .tool-versions: file
- README.md: file
- TESTING.md: file
- package.json: file
…他 4 ファイル
(上記ファイル群から、TypeScript プロジェクトであること、テスト指針が用意されていること、依存や実行スクリプトが package.json に定義されていることがわかります。)
まとめ
リアルタイム性と AI 要約を組み合わせたセッション監視ダッシュボード。チームのレビュー効率化に有用。
リポジトリ情報:
- 名前: claude-code-ui
- 説明: Claude Code session tracker UI with real-time updates via Durable Streams
- スター数: 13
- 言語: TypeScript
- URL: https://github.com/KyleAMathews/claude-code-ui
- オーナー: KyleAMathews
- アバター: https://avatars.githubusercontent.com/u/71047?v=4
READMEの抜粋:
Claude Code Session Tracker
A real-time dashboard for monitoring Claude Code sessions across multiple projects. See what Claude is working on, which sessions need approval, and track PR/CI status.
Features
- Real-time updates via Durable Streams
- Kanban board showing sessions by status (Working, Needs Approval, Waiting, Idle)
- AI-powered summaries of session activity using Claude Sonnet
- PR & CI tracking - see associated PRs and their CI status
- Multi-repo support…