リアルタイムダッシュボード

パイプラインのフェーズ遷移をブラウザでリアルタイム表示する依存ゼロの Web UI です。Claude Code を別ウィンドウで動かしたまま進捗を別画面で監視したい場合や、セッションを奪わずチームメンバに状況を共有したい場合に有効です。

表示内容

パイプラインが発行する全イベントを新しい順に並べたタイムライン:

イベント	色	発生タイミング
phase-start	紫	フェーズが実行開始
phase-complete	緑	フェーズが正常終了
phase-fail	赤	フェーズがエラー終了
checkpoint	オレンジ	人間の入力待ちで一時停止中
abandon	赤（淡色）	パイプラインが中断された

各イベント行はフェーズ名、spec 名、結果バッジ（completed / in_progress / failed / awaiting_human / abandoned）、実時間タイムスタンプを表示します。フェーズ完了イベントには生成された成果物（例: analysis.md, design.md）へのリンクが表示され、クリックするとダッシュボード内ビューアで閲覧できます。

ヘッダ部には接続ステータス（live / disconnected）、セッション内累積イベント数、ワークスペースフィルタ、clear ボタンを配置。空状態のときは /forge <task> 実行を促すメッセージが表示されます。

成果物ビューア

フェーズが完了すると、そのフェーズが生成した成果物へのリンクが表示されます（例: Phase 3 完了後の design.md、Phase 3b 完了後の review-design.md）。リンクをクリックすると、Markdown の生テキストをモーダルオーバーレイで表示します。

チェックポイントイベントでは、関連する全成果物のリンクも表示されます。例えば checkpoint-a では analysis.md、investigation.md、design.md、review-design.md が表示され、承認前に作業内容をレビューできます。

成果物エンドポイント（GET /api/artifact）はワークスペースディレクトリ内の .md ファイルのみを配信します。パストラバーサルはブロックされ、アクセスはループバックリクエストに制限されます。

チェックポイント操作

チェックポイントイベント（checkpoint-a, checkpoint-b）では、approve ボタンとオプションのメッセージテキストエリアが表示されます:

• メッセージなしで承認 — Claude Code セッションで「proceed」と入力するのと同等です。
• メッセージ付きで承認 — メッセージは次のエージェントのプロンプトに ## Human Feedback セクションとして注入されます。ターミナルに戻らずに AI の次のフェーズを指示できます。

メッセージはワークスペースディレクトリの checkpoint-message.txt に書き込まれます。次のエージェント起動時に enrichPrompt がファイルを読み取り、エージェントプロンプトに内容を追加し、ファイルを削除します（ワンショット配信）。この処理はすべてサーバサイドで完結し、SKILL.md の変更や LLM の解釈は不要です。

モバイル対応

ダッシュボードはレスポンシブ対応で、スマートフォンサイズのビューポート（640px 以下）に最適化されています:

• ヘッダのコントロールが全幅に折り返し、タッチターゲットを拡大
• イベントカードが 3 カラムグリッドから 2 行スタックレイアウトに切替
• 成果物ビューアとチェックポイントフォームが狭い画面に適応
• ボタンと入力欄が推奨タッチターゲットサイズを満たす

有効化

ダッシュボードは forge-state MCP バイナリ内に埋め込み HTML として同梱されています。プラグインとしてインストールした場合、デフォルトで有効 です — .mcp.json に FORGE_EVENTS_PORT=8099 が設定されているため、セッション開始時に自動起動します。

ブラウザで http://localhost:8099/ を開くと、/events を購読し、パイプラインがイベントを発行し始めた瞬間から描画を開始します。

ポートフォールバック

ポート 8099 が既に使用中の場合（例: 別の Claude Code セッション）、サーバは 8100〜8200 の範囲でランダムなポートを自動的にリトライします（最大10回）。実際の URL は stderr に出力されます:

forge-state: port 8099 in use, trying fallback range 8100–8200
forge-state: dashboard ready at http://localhost:8142/

全てのフォールバック試行が失敗した場合、MCP サーバはダッシュボードなしで stdio トランスポートの提供を続けます。ダッシュボードの問題でパイプライン本体が止まることはありません。

手動オーバーライド

別のポートを使用するには、カスタム FORGE_EVENTS_PORT で MCP サーバを登録します:

claude mcp add forge-state \
  --scope user \
  --transport stdio \
  --cmd forge-state-mcp \
  --env FORGE_AGENTS_PATH=/absolute/path/to/agents \
  --env FORGE_EVENTS_PORT=9876

ワークスペース別フィルタ

同一 .specs/ ディレクトリで複数のパイプラインを実行した場合、ワークスペースドロップダウンで対象を絞り込めます。選択値は ?workspace=<absolute-path> としてサーバに渡され、SSE ストリームはサーバ側でフィルタされるため、他ワークスペースの古いイベントはブラウザに届きません。

再接続の挙動

ダッシュボードはブラウザ標準の EventSource API を使用します。MCP サーバを停止・再起動した場合、リスナが復活した時点でブラウザが自動的に再接続します。画面上のタイムラインは永続化されません — タブを閉じれば消え、新しいページはロード後に到着したイベントしか表示しません。

セキュリティに関する注意

• HTTP リスナは 127.0.0.1（localhost のみ）にバインドします。ネットワーク上の他のマシンからはアクセスできません。
• 認証機構はありません。localhost の開発サーバと同様の扱いをしてください。
• ダッシュボードは単一の埋め込みファイルとして配信され、外部 CDN・フォント・アナリティクス・サードパーティスクリプトのいずれも含みません。唯一のネットワーク通信は同一オリジンの /events のみです。

現バージョンでできないこと

• 実行中パイプラインのフェーズ途中での一時停止・再開・分岐
• リビジョン間の成果物 diff 表示
• リッチフォーマットでの Markdown レンダリング（現在は生テキスト表示）
• 別マシンからのリモートパイプライン操作
• 予算に対するトークン・コストのバーンダウン表示

これらは BACKLOG.md の Devin-Class Autonomy ギャップ分析（Layer B intervention API、Layer C budget enforcement）として追跡しています。現在のダッシュボードはそれら機能の土台となります。