agent-dashboard

Claude Code でマルチエージェントを並列実行するときに、各サブエージェントの進捗をリアルタイムで監視し、人間への質問にブラウザから回答できるツールキット。

スキル (/orchestrate) + MCP サーバー + Web ダッシュボード + ヘルパースクリプトが 1 ディレクトリに収まっており、任意のプロジェクトにドロップインできる。

デモ

┌──────────────────────────────────────────────────────┐
│ Agent Dashboard   session: session-20260412-abc123   │
├──────────────────────────────────────────────────────┤
│ AGENTS                                               │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐  │
│ │ Backend API  │ │ Frontend JS  │ │ HTML/CSS     │  │
│ │ ■■■■■■■□ 75% │ │ ■■■■□□□□ 50% │ │ ■■■■■■■■ ✓  │  │
│ │ 🟢 running   │ │ 🟢 running   │ │ ⚫ completed │  │
│ └──────────────┘ └──────────────┘ └──────────────┘  │
│                                                      │
│ PENDING QUESTIONS                                    │
│ ┌──────────────────────────────────────────────────┐ │
│ │ From: Backend API                                │ │
│ │ Q: DBはPostgreSQLとMySQLどちらを使いますか？     │ │
│ │ [回答を入力...                    ] [送信]       │ │
│ └──────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────┘

セットアップ

# プロジェクトに配置
cp -r agent-dashboard/ /path/to/your-project/agent-dashboard/
# または
git clone https://github.com/youwat/agent-dashboard.git

# インストール（.mcp.json 登録 + スキルのシンボリックリンク作成）
cd /path/to/your-project
node agent-dashboard/install.js

# Claude Code を再起動（MCP サーバーの読み込みに必要）

install.js が行うこと:

1. .mcp.json に MCP サーバーを登録
2. .claude/commands/orchestrate.md にスキルをシンボリックリンク
3. node_modules が無ければ npm install

使い方

基本: /orchestrate スキル

/orchestrate TODOアプリを作って。backend と frontend の2並列で。

スキルが自動で:

1. init_session MCP ツールでダッシュボード Web サーバーを起動
2. タスクを分割してサブエージェントを並列起動
3. 各サブエージェントの prompt に進捗報告の指示を注入
4. サブエージェントが curl で REST API を叩いて進捗報告

手動: MCP ツールを直接使う

ツール	説明
init_session	ダッシュボード起動、session_id / port / URL を返す
register_agent	エージェント登録
update_status	進捗・ステータス更新
add_log	ログ追記
ask_human	人間に質問（回答までブロック、最大30分）
complete_agent	完了報告

アーキテクチャ

Claude Code セッション
  │
  ├─ MCP サーバー (stdio)
  │   ├─ init_session → Web サーバーを子プロセスで起動
  │   ├─ register_agent / update_status / add_log / ask_human / complete_agent
  │   └─ セッション終了時に Web サーバーも自動停止
  │
  ├─ Web サーバー (自動起動)
  │   ├─ GET  /api/state (?session=<id> で過去セッションも閲覧可)
  │   ├─ POST /api/register, /api/status, /api/log, /api/complete
  │   ├─ POST /api/ask → 質問作成、GET /api/ask/:id → 回答ポーリング
  │   ├─ POST /api/questions/:id/answer → ブラウザから回答送信
  │   └─ GET  / → ダッシュボード UI
  │
  ├─ /orchestrate スキル
  │   └─ テンプレートを読み、サブエージェントの prompt に REST API 指示を注入
  │
  └─ サブエージェント (Agent ツール)
      └─ curl で REST API を叩いて進捗報告
          または scripts/report.sh / scripts/ask.sh を使用

サブエージェントが使うヘルパースクリプト

# 登録
bash agent-dashboard/scripts/report.sh 3000 register "my-agent" "My Agent"

# ログ
bash agent-dashboard/scripts/report.sh 3000 log "my-agent" "Wrote server.js"

# ステータス更新
bash agent-dashboard/scripts/report.sh 3000 status "my-agent" "running" "Writing tests" 75

# 完了
bash agent-dashboard/scripts/report.sh 3000 complete "my-agent" "All done"

# 人間に質問（ブロッキング）
ANSWER=$(bash agent-dashboard/scripts/ask.sh 3000 "my-agent" "DBはどちらを使う？")

ライフサイクル

イベント	動作
Claude Code 起動	MCP サーバー起動 → Web サーバー自動起動
/orchestrate 実行	init_session でポート情報取得 → サブエージェント起動
サブエージェント実行中	curl で REST API に進捗報告 → ダッシュボードにリアルタイム反映
ask_human 呼び出し	ダッシュボードに質問カード表示 → ブラウザで回答 → エージェントに返却
Claude Code 終了	MCP サーバー終了 → Web サーバー自動停止

ディレクトリ構造

agent-dashboard/
├── install.js                  # ワンコマンドセットアップ
├── mcp-server.js               # MCP サーバー
├── web-server.js               # Web サーバー + REST API
├── config.js                   # 設定集約
├── package.json
├── commands/
│   └── orchestrate.md          # /orchestrate スキル
├── templates/
│   └── sub-agent-instructions.md  # サブエージェント prompt テンプレート
├── scripts/
│   ├── report.sh               # register/log/status/complete ヘルパー
│   └── ask.sh                  # ブロッキング ask_human ヘルパー
├── lib/
│   └── state.js                # 状態管理（ファイルロック付き）
├── public/
│   └── index.html              # ダッシュボード UI
└── data/                       # セッションデータ（.gitignore）

設定

環境変数	デフォルト	説明
AGENT_SESSION_ID	自動生成	セッション識別子

その他の設定は config.js に集約:

• Web サーバーポート範囲: 3000〜3099
• ask_human ポーリング間隔: 2秒
• ask_human タイムアウト: 30分
• エージェントあたりのログ保持数: 100件

ライセンス

MIT