プロジェクト概要
複数のClaude Codeインスタンスを1画面でリアルタイム監視するElectronデスクトップアプリ。AIエージェントが自律的にコードを書く時代、「承認待ちに気づかない」「どのセッションが何をしているかわからない」という課題を解決します。
解決した課題
Claude Codeをtmuxで複数起動して並列開発する際、各セッションの状態を把握するにはターミナルを一つずつ切り替えて確認する必要がありました。承認待ちのまま放置されたり、エラーで止まっていることに気づかず時間をロスするケースが頻発。
Claude Code Monitorは全セッションのステータス（作業中・承認待ち・指示待ち・エラー）をリアルタイムで検知し、1画面に集約。承認待ちはワンクリックで対応でき、モニターから直接指示を送信できます。
主な機能
- リアルタイムステータス監視 — tmuxセッションを自動検出し、作業中/承認待ち/指示待ちを色分け表示
- ワンクリック承認 — 承認待ちのセッションにモニターから直接承認を送信
- 指示送信 — 各セッションに対してモニター画面からテキスト指示を送信
- タスク進捗トラッキング — task.mdのマーカーを解析し、プログレスバーで進捗を可視化
- グリッド/リスト表示切り替え — セッション数に応じてレイアウトを変更
- ターミナルプレビュー — xterm.jsによるリアルタイムターミナル出力の表示
技術的なポイント
tmux連携: tmux list-sessionsとtmux capture-paneを定期的にポーリングし、セッション名がclaude-で始まるものを自動検出。ペイン単位での監視にも対応。
ステータス判定ロジック: ターミナル出力の末尾パターンを解析し、「Do you want to proceed?」などの承認待ちフレーズを検出。正規表現ベースのルールエンジンで拡張可能。
自己参照ループ: このアプリの開発自体をClaude Code Monitorで監視しながら進めた。改善点をkaizen.txtに書き、隣のClaude Codeセッションに渡して実装 — アプリが自分自身の開発をモニタリングする構造を実現。
技術スタック
| レイヤー | 技術 |
|---|---|
| デスクトップ | Electron + React + TypeScript |
| ターミナル描画 | xterm.js |
| プロセス管理 | tmux + execa |
| ビルド | Vite + electron-builder |
| パッケージ配布 | GitHub Releases |
開発プロセス
アイデア3行からスタートし、モックアップHTML → 要件定義書(requirements.md) → 技術設計書(design.md) → タスク分解(task.md) → CLAUDE.md作成 → Claude Codeに自律実行させる、という一連のAI駆動開発フローで1日で完成。人間はコードを1行も書かず、方向性の判断と品質チェックに集中。