validate-ui

Archon Web UI — 包括的な E2E 検証

Archon Web UI の徹底的なエンドツーエンドのブラウザー自動化テストとコードベースのレビューを実施します。 目的は、並行エージェントの管理、カスタムワークフローの実行、エージェントの作業状況の完全な可視化という課題に対して、Archon が最善を尽くしているかどうかを判断することです。

任意のフォーカス引数：$ARGUMENTS（例：「workflows」、「chat」、「projects」）。空の場合は、すべてのセクションを実行します。

---

フェーズ 0：環境のセットアップ

0.1 古い Archon プロセスを終了する

# Kill any running Archon dev servers (backend + frontend)
pkill -f "bun.*dev:server" 2>/dev/null || true
pkill -f "bun.*dev:web" 2>/dev/null || true
pkill -f "bun.*packages/server" 2>/dev/null || true
pkill -f "bun.*packages/web" 2>/dev/null || true
pkill -f "vite.*5173" 2>/dev/null || true

# Kill any leftover processes on our ports
lsof -ti:3090 | xargs kill -9 2>/dev/null || true
lsof -ti:5173 | xargs kill -9 2>/dev/null || true

# Wait for ports to free up
sleep 2

# Verify ports are free
! lsof -i:3090 && ! lsof -i:5173 && echo "Ports 3090 and 5173 are free" || echo "WARNING: Ports still in use"

0.2 agent-browser をインストールする（必要な場合）

# Check if agent-browser is available
which agent-browser 2>/dev/null || npx agent-browser --version 2>/dev/null

# If not installed globally, install it:
# npm install -g agent-browser && agent-browser install
# On WSL2/Linux, use --with-deps to get Chromium system dependencies:
# agent-browser install --with-deps

# IMPORTANT: Do NOT use bunx — Bun skips postinstall scripts that agent-browser needs.
# Use npx or global npm install.

0.3 Archon のバックエンドとフロントエンドを起動する

両方のサービスを起動します。フロントエンドの SSE 接続が機能するには、先にバックエンドが起動している必要があります。

# From the repo root: /path/to/archon

# Start backend (port 3090)
cd /path/to/archon && bun run dev:server &
sleep 5  # Wait for server initialization + DB

# Verify backend is healthy
curl -s http://localhost:3090/api/health | head -c 200

# Start frontend (port 5173)
cd /path/to/archon && bun run dev:web &
sleep 5  # Wait for Vite dev server

# Verify frontend is serving
curl -s http://localhost:5173 | head -c 200

URL：

• フロントエンド：http://localhost:5173
• バックエンド API：http://localhost:3090/api
• SSE ストリーム：http://localhost:3090/api/stream/{conversationId}（開発時は Vite プロキシをバイパスします）

0.4 テストデータを投入する（必要な場合）

既存のコードベースと会話があるか確認します。データがない場合は、テストデータを作成します。

# Check existing codebases
curl -s http://localhost:3090/api/codebases | python3 -m json.tool 2>/dev/null || curl -s http://localhost:3090/api/codebases

# Register the current repo as a codebase (if none exist)
curl -s -X POST http://localhost:3090/api/codebases \
  -H "Content-Type: application/json" \
  -d '{"path": "/path/to/archon"}'

# Create a test conversation
curl -s -X POST http://localhost:3090/api/conversations \
  -H "Content-Type: application/json" \
  -d '{}' | python3 -m json.tool 2>/dev/null

---

フェーズ 1：ブラウザー自動化 — エンドツーエンドテスト

すべてのブラウザー操作に agent-browser CLI を使用します。スナップショット参照のワークフローに従ってください。

1. agent-browser open <url> — 移動します
2. agent-browser snapshot -i — 参照番号付きの操作可能な要素を取得します
3. 参照番号を使って操作します（クリック、入力など）
4. ページ遷移や DOM の変更後に、スナップショットを再取得します

各主要テストポイントでスクリーンショットを撮影します：agent-browser screenshot /tmp/archon-test-{name}.png

テストスイート 1：ダッシュボード（ルート：/）

1.1 初期表示

• http://localhost:5173 を開きます
• ダッシュボードが表示されることを確認します：統計カード（実行中のワークフロー、会話、システムステータス）
• システムヘルスインジケーターに「Healthy」（緑色）と表示されることを確認します
• ダッシュボード全体のスクリーンショットを撮影します

1.2 統計の正確性

• 「実行中のワークフロー」の件数を GET /api/workflows/runs?status=running と照合します
• 「会話」の件数を GET /api/conversations と照合します
• 新しいデータの作成後に数値が更新されることを確認します

1.3 最近の項目

• 「最近の会話」リストに最大 10 件が表示されることを確認します
• 「最近のワークフロー実行」リストに最大 10 件が表示されることを確認します
• 会話をクリックし、/chat/{id} に移動することを確認します
• ワークフロー実行をクリックし、/workflows/runs/{id} に移動することを確認します
• ブラウザーの戻るボタンを使い、ダッシュボードに戻ることを確認します

1.4 空の状態

• 会話や実行がない場合、「新しいチャット」の CTA が表示された空の状態になることを確認します
• 空の状態から「新しいチャット」をクリックし、/chat に移動することを確認します

テストスイート 2：プロジェクト管理

2.1 プロジェクトを追加する（GitHub URL）

• サイドバーの「Projects」の横にある + ボタンをクリックします
• GitHub URL（例：https://github.com/anthropics/claude-code）を入力します
• 送信し、プロジェクトがサイドバーに表示されることを確認します
• プロジェクトが自動選択されることを確認します

2.2 プロジェクトを追加する（ローカルパス）

• 再度 + をクリックします
• ローカルパス（例：/path/to/archon）を入力します
• 送信し、プロジェクトが表示されることを確認します
• 重複排除を確認します。すでに登録済みのパスの場合、重複するプロジェクトが作成されないことを確認します

2.3 プロジェクトを選択／選択解除する

• サイドバーのプロジェクトをクリックし、選択状態（ハイライト表示）になることを確認します
• サイドバーの内容が ProjectDetail ビューに切り替わることを確認します（プロジェクト名、リポジトリ URL、プロジェクトに紐づく会話、ワークフロー実行が表示されます）
• 「All Projects」をクリックし、サイドバーが AllConversationsView に切り替わることを確認します（すべての会話が表示され、プロジェクトによる絞り込みはありません）
• ページを更新しても選択状態が localStorage に保持されることを確認します

2.4 プロジェクトを削除する

• プロジェクトにカーソルを合わせ、ゴミ箱アイコンが表示されることを確認します
• ゴミ箱アイコンをクリックし、確認ダイアログが表示されることを確認します
• 削除を確定し、プロジェクトがリストから削除されることを確認します
• プロジェクトに関連付けられた会話と実行が適切に処理されることを確認します

2.5 折りたたみ可能なセレクターでプロジェクトを選択する

• プロジェクトが選択されているとき、折りたたみ可能なヘッダーにプロジェクト名が表示されることを確認します
• シェブロンをクリックして展開し、ほかのプロジェクトが一覧表示されることを確認します
• 折りたたみ可能なセレクターからプロジェクトを切り替え、表示が更新されることを確認します

テストスイート 3：チャットインターフェース

3.1 新しいチャット（プロジェクトなし）

• プロジェクトが選択されていない状態で、サイドバーの「New Chat」をクリックします
• 空のチャットインターフェースがメッセージ入力欄とともに表示されることを確認します
• メッセージを入力して送信します
• ユーザーのメッセージが右寄せで表示され、アシスタントの「考え中」を示すドットが表示されることを確認します
• 会話が作成され、URL が /chat/{conversationId} に更新されることを確認します
• 会話がサイドバーに表示されることを確認します

3.2 新しいチャット（プロジェクトあり）

• 先にプロジェクトを選択します
• 「New Chat」をクリックします
• メッセージ（例：/status）を送信します
• 会話が選択したプロジェクトに紐づいていることを確認します
• プロジェクトのコンテキスト（cwd、コードベース）が添付されていることを確認します

3.3 スラッシュコマンド

• /status を送信し、応答にセッションのステータスが表示されることを確認します
• /help を送信し、ヘルプテキストが Markdown 形式で表示されることを確認します
• /commands を送信し、コマンド一覧が表示されることを確認します
• /getcwd を送信し、作業ディレクトリが表示されることを確認します
• コマンドが即座に実行され、「考え中」のアニメーションが不要であることを確認します

3.4 メッセージの表示

• AI から Markdown 形式の応答が返るメッセージを送信します
• コードブロックがシンタックスハイライト付きで表示されることを確認します
• アシスタントのメッセージ内でテーブルが正しく表示されることを確認します
• リンクをクリックすると新しいタブで開くことを確認します（target="_blank"）
• 引用ブロックが左罫線付きで表示されることを確認します
• インラインコードが等幅フォントで表示されることを確認します
• 非常に長いメッセージを送信し、レイアウトがはみ出さないことを確認します

3.5 ストリーミングとリアルタイム更新

• AI の応答が返るメッセージを送信します
• ストリーミング中に点滅するカーソルが表示されることを確認します
• テキストが一度にすべて表示されるのではなく、逐次表示されることを確認します
• ロックインジケーターに「エージェントが作業中です…」と表示されることを確認します
• 応答の完了後、ロックインジケーターが非表示になることを確認します
• 完了時にメッセージの isStreaming フラグが解除されることを確認します

3.6 ツール呼び出しカード

• ツールの使用を促すメッセージ（例：プロジェクトのコンテキスト内でのコードに関する質問）を送信します
• アシスタントのメッセージの下にツール呼び出しカードが表示されることを確認します
• カードにツール名と入力の概要が表示されることを確認します
• ツールカードをクリックして展開し、入力 JSON 全体と出力が表示されることを確認します
• 実行中のツールにスピナーアニメーションとプライマリボーダーが表示されることを確認します
• 完了したツールに所要時間のバッジが表示されることを確認します
• ツールの出力が長い場合、「Show N more lines」をテストします

3.7 エラー処理

• エラーが発生する状況を引き起こします（例：AI の認証情報が設定されていない状態でメッセージを送信します）
• AlertCircle アイコン付きのエラーカードが表示されることを確認します
• エラー分類バッジ（transient/fatal）が表示されることを確認します
• 推奨される操作が一覧表示されることを確認します
• エラー発生後もチャットが機能することを確認します

3.8 キューの位置

• 可能であれば、同じ会話に複数のメッセージを同時に送信します
• キューの位置を示すインジケーター（「Position N in queue」）が表示されることを確認します
• キューが進むとロックインジケーターが更新されることを確認します

3.9 自動スクロールの動作

• ストリーミング応答中に上方向へスクロールします
• ユーザーのスクロール位置が維持され、自動スクロールが停止することを確認します
• 「Jump to bottom」ボタンが表示されることを確認します
• 「Jump to bottom」をクリックし、最新のメッセージまでスクロールすることを確認します
• 手動で最下部までスクロールし、自動スクロールが再開することを確認します

3.10 会話の切り替え

• 複数の会話を作成します
• サイドバーで会話を切り替えます
• 各会話に固有のメッセージ履歴が読み込まれることを確認します
• 会話間でメッセージが漏れないことを確認します
• サイドバーで正しい会話がハイライトされることを確認します

テストスイート 4：会話の管理

4.1 会話名の変更

• サイドバーの会話にカーソルを合わせます — 鉛筆アイコンが表示されることを確認します
• 鉛筆アイコンをクリックします — インライン編集入力欄が表示されることを確認します
• 新しいタイトルを入力して Enter キーを押します
• 確認：タイトルがサイドバーとチャットヘッダーで更新されます
• 名前の変更中に Escape キーを押します — 保存せずにキャンセルされることを確認します

4.2 会話の削除

• 会話にカーソルを合わせます — ゴミ箱アイコンが表示されることを確認します
• ゴミ箱アイコンをクリックします — 確認ダイアログが表示されることを確認します
• 削除を確定します — 会話が削除されることを確認します
• 削除した会話がアクティブだった場合：/ にリダイレクトされることを確認します
• 確認：ソフト削除（会話は非表示になりますが、破棄はされません）

4.3 自動タイトル設定

• 新しい会話を作成し、コマンド以外のメッセージを送信します
• 2～3 秒待ちます
• 確認：最初のメッセージに基づいて会話のタイトルが自動的に更新されます
• 確認：タイトルが約 80 文字で切り詰められます

4.4 検索

• サイドバーの検索バーに文字を入力します
• 確認：タイトルが一致する会話に絞り込まれます
• 検索をクリアします — すべての会話が再表示されることを確認します
• / キーを押します — 検索入力欄にフォーカスされることを確認します
• Escape キーを押します — 検索がクリアされることを確認します

テストスイート 5：ワークフロー管理

5.1 ワークフロー一覧ページ（/workflows）

• /workflows に移動します
• 確認： 「Available Workflows」タブに、検出されたすべてのワークフローが表示されます
• 確認： 各ワークフローカードに名前と説明が表示されます
• 確認： 「Recent Runs」タブに、最近実行されたワークフローが表示されます
• 確認： 実行中のワークフローがある場合、「Recent Runs」タブのラベルに点滅するドットが表示されます

5.2 ワークフローページからワークフローを呼び出す

• ワークフローカード（例：archon-assist）をクリックします
• 確認： プロジェクトセレクターとメッセージ入力欄を含むインライン実行パネルが展開されます
• ドロップダウンからプロジェクトを選択します
• メッセージを入力して「Run」をクリックします
• 確認： 会話が作成され、/chat/{conversationId} に移動します
• 確認： ワークフローの実行が始まり、AI からのメッセージが表示されます

5.3 サイドバーからワークフローを呼び出す（WorkflowInvoker）

• サイドバーでプロジェクトを選択します
• 確認： ProjectDetail ビューにワークフローのドロップダウンが表示されます
• ドロップダウンからワークフローを選択します
• メッセージを入力して送信します
• 確認： 新しい会話が作成され、チャットに移動してワークフローが実行されます

5.4 ワークフロールーター（エージェントオーケストレーター）

• プロジェクトのチャットで、自然言語のメッセージ（例：「認証フローについて教えてください」）を送信します
• 確認： ルーターが意図を検出し、適切なワークフローに振り分けます
• 確認： ワークフローのディスパッチ状況を示すメッセージ（例：「Dispatching workflow: archon-assist (background)」）が表示されます
• 確認： WorkflowDispatchInline バッジがスピナーとともに表示されます
• 確認： ディスパッチバッジをクリックすると、ワークフロー実行画面またはワーカーの会話に移動します

5.5 チャットでのワークフローの進捗

• ワークフローの実行中に、チャットに WorkflowProgressCard が表示されることを確認します
• 確認： コンパクトモードにワークフロー名、ステップ数、経過時間が表示されます
• 確認： 経過時間のタイマーが毎秒更新されます
• 「Open Full View」をクリックし、/workflows/runs/{runId} に移動することを確認します
• 確認： チャットに戻っても、進捗カードが表示されたままです

5.6 ワークフロー実行ページ（/workflows/runs/:runId）

• 実行中または完了済みのワークフロー実行に移動します
• 確認： ヘッダーにワークフロー名、ステータス、経過時間が表示されます
• 確認： 左側のステップ進捗パネルに、ステータスアイコンとともにすべてのステップが表示されます
• 別のステップをクリックし、右側のログパネルが更新されることを確認します
• 確認： 親の会話に戻る「Chat」リンクが機能します
• ディスパッチされたワークフローの場合： WorkflowLogs にワーカーの会話メッセージが表示されることを確認します

5.7 並列エージェントのステップ

• 並列エージェントを含むワークフローを実行します（例：archon-comprehensive-pr-review には 5 つの並列エージェントがあります）
• 確認： ParallelBlockView に親ステップとネストされたエージェント一覧が表示されます
• 確認： 各エージェントにそれぞれのステータス（pending／running／completed／failed）が表示されます
• 確認： ブロック全体のステータスが正しく決定されます（いずれかが failed なら failed、いずれかが running なら running、すべて完了なら complete）
• 確認： 進捗カウンターに (完了数/エージェント総数) が表示されます

5.8 ループの反復

• ループワークフロー（例：archon-test-loop または archon-ralph-fresh）を実行します
• 確認： LoopIterationView に反復回数が表示されます
• 確認： 進捗バーが現在の反復回数／最大反復回数に比例して伸びます
• 確認： 各反復にステータスが表示されます
• 確認： 完了シグナル（<promise>COMPLETE</promise>）によってループが終了します

5.9 ワークフローの成果物

• PR の URL、コミット、ブランチなどの成果物を生成するワークフローが完了した後、次を確認します
• 確認： ArtifactSummary コンポーネントが画面下部に表示されます
• 確認： URL がクリック可能なリンクになっており、新しいタブで開きます
• 確認： 成果物の種類に合ったアイコン（PR、コミット、ブランチ、ファイル）が表示されます

5.10 ワークフローの古さの検出

• ワークフローの実行中に SSE 接続が一時的に切断された場合、次を確認します
• 確認： ワークフローカードに stale インジケーターが表示されます
• 確認： ポーリングのフォールバックが開始されます（15 秒ごとに確認）
• 確認： 新しいデータを受信すると stale 状態が解除されます

5.11 ワークフローのキャンセル

• ワークフローの実行中に「Cancel」ボタンを探します
• ボタンがある場合： クリックし、ワークフローのステータスが failed／cancelled に変わることを確認します
• ボタンがない場合： UX 上の課題として記録します

テストスイート 6：プロジェクト単位のビュー

6.1 プロジェクト詳細 — 会話

• プロジェクトを選択します
• 確認：そのプロジェクトに属する会話だけが表示されます
• プロジェクト内で新しいチャットを作成します
• 確認：新しい会話が絞り込み済みリストに表示されます
• 確認：他のプロジェクトの会話は表示されません

6.2 プロジェクト詳細 — ワークフローの実行

• 確認：選択したプロジェクトに属するワークフローの実行が表示されます
• 確認：実行は優先度順に並びます：失敗 ＞ 実行中 ＞ 完了
• 実行をクリックし、/workflows/runs/{id} に移動することを確認します
• 確認：実行中のワークフローがある会話には、会話のステータスを示すドットが表示されます

6.3 プロジェクト間のナビゲーション

• プロジェクト A でワークフローを開始します
• サイドバーでプロジェクト B に切り替えます
• 確認：プロジェクト A のワークフローはプロジェクト B のビューに表示されません
• プロジェクト A に戻り、ワークフローの実行が引き続き表示されることを確認します
• 「すべてのプロジェクト」をクリックし、すべてのプロジェクトの会話を確認できることを確認します

テストスイート 7：SSE とリアルタイムインフラストラクチャ

7.1 SSE 接続

• ブラウザーの DevTools の Network タブを開きます（agent-browser eval またはコンソールを使用）
• 確認：/api/stream/{conversationId} への EventSource 接続が確立されています
• 確認：ハートビートイベントが約 30 秒ごとに届きます
• 確認：接続状態が OPEN（readyState 1）です

7.2 SSE の再接続

• バックエンドサーバーを一時的に停止します
• 確認：UI に切断状態（ヘッダーのグレーのドット）が表示されます
• バックエンドを再起動します
• 確認：SSE が自動的に再接続します
• 確認：接続インジケーターが再び緑色になります
• 確認：バッファーされたメッセージが再接続時に配信されます

7.3 複数のタブ

• 2 つのブラウザータブで同じ会話を開きます（並行して開くには agent-browser --session を使用）
• タブ 1 からメッセージを送信します
• 確認：両方のタブで応答がストリーミングされます（ストリームレジストリの置き換えによる SSE ファンアウト）
• 注：Web アダプターは新しい接続時に古いストリームを置き換えるため、SSE のライブ配信を受け取れるのは最新のタブだけです

テストスイート 8：UI/UX 品質監査

8.1 視覚的な階層とダークテーマ

• 状態を変えてアプリ全体のスクリーンショットを撮ります
• 確認：テキストの階層（プライマリ／セカンダリ／ターシャリ）が読みやすいです
• 確認：操作可能な要素に明確なホバー状態があります
• 確認：アクセントカラー（青紫）が一貫して使用されています
• 確認：成功（緑）、警告（琥珀色）、エラー（赤）の色が適切です
• 確認：境界線や区切り線によって視覚的に明確に分離されています

8.2 読み込み状態

• 次の場合の読み込み状態を確認します：
  • ダッシュボードの読み込み中
  • 会話のメッセージの読み込み中
  • ワークフローリストの読み込み中
  • ワークフローの実行の取得中
• 確認：すべての読み込み状態で適切なフィードバック（スピナー、スケルトン、またはテキスト）が表示されます
• 確認：画面が空白になったり、スタイルが適用されていないコンテンツが一瞬表示されたりしません

8.3 空の状態

• 次の空の状態を確認します：
  • 会話がない場合（ダッシュボードとサイドバー）
  • 登録済みのプロジェクトがない場合
  • 利用可能なワークフローがない場合
  • ワークフローの実行がない場合
  • 会話にメッセージがない場合
• 確認：各空の状態に、役立つメッセージと CTA があります

8.4 レスポンシブ対応

• ビューポートをさまざまなサイズに設定します：

  agent-browser set viewport 1920 1080  # Desktop
  agent-browser set viewport 1366 768   # Laptop
  agent-browser set viewport 1024 768   # Tablet landscape
  agent-browser set viewport 768 1024   # Tablet portrait
  agent-browser set viewport 375 812    # Mobile
  

• 各サイズでスクリーンショットを撮り、レイアウトの崩れ、はみ出し、切り詰めがないか確認します

8.5 サイドバーのサイズ変更

• サイドバーのサイズ変更ハンドルをドラッグします
• 確認：サイドバーの幅がスムーズに変わります（240-400px の範囲）
• 確認：幅が localStorage に保存され、更新後も維持されます
• 確認：サイドバーの幅が異なっても、コンテンツが適切に再配置されます

8.6 キーボード操作

• / を押し、検索欄にフォーカスが移ることを確認します
• Escape を押し、検索内容がクリアされることを確認します
• メッセージ入力欄で Enter を押し、メッセージが送信されることを確認します
• Shift+Enter を押し、改行が入力されること（送信されないこと）を確認します
• Tab キーで操作可能な要素を順に移動し、フォーカス順が論理的であることを確認します

8.7 コピー／クリップボード

• チャットヘッダーの作業ディレクトリパスをクリックします
• 確認：パスがクリップボードにコピーされます
• 確認：視覚的なフィードバック（ツールチップまたはフラッシュ表示）でコピーの成功が示されます

8.8 外部リンク

• 「IDE で開く」ボタン（VSCode リンク）をクリックします
• 確認：vscode://file/... URL が正しく構築されます
• アシスタントのメッセージ内のリンクをクリックし、新しいタブで開くことを確認します

テストスイート 9：エッジケースとストレステスト

9.1 メッセージの連続送信

• 直前の応答が完了する前に、複数のメッセージを短時間で続けて送信します
• 確認：メッセージが正しくキューに追加される（重複や欠落がない）
• 確認：ロックインジケーターにキュー内の位置が表示される
• 確認：応答が順番どおりに届く

9.2 長いコンテンツ

• 非常に長い出力が生成されるメッセージを送信します（例：「プロジェクト内のすべてのファイルを一覧表示してください」）
• 確認：レイアウトからはみ出さずに Markdown が表示される
• 確認：コードブロックに横スクロールが表示される
• 確認：WorkflowResultCard の省略表示が機能する（500 文字／8 行、「さらに表示」付き）
• 確認：ツール呼び出しの出力が省略表示される（20 行を表示し、展開可能）

9.3 特殊文字

• 特殊文字を含むメッセージを送信します：<script>alert('xss')</script>、Markdown の記号 *_[]()、絵文字
• 確認：XSS の脆弱性がない（HTML がエスケープされる）
• 確認：Markdown が正しく表示される
• 確認：絵文字が適切に表示される

9.4 ストリーミング中のブラウザー更新

• AI が応答をストリーミングしている間に、ページを更新します
• 確認：再読み込み後、過去のメッセージが API から読み込まれる
• 確認：進行中の応答が失われない（保存済みのセグメントが表示される）
• 確認：SSE が再接続し、新しいイベントを受信する

9.5 ワークフローの同時実行

• 2～3 個のワークフローを同時に起動します（異なるプロジェクト、または同じプロジェクト）
• 確認：各ワークフローがそれぞれ独立して追跡される
• 確認：各チャットに表示されるワークフロー進行状況カードが正しい
• 確認：ワークフロー間でイベントが混在しない

9.6 ネットワーク遅延

• 可能であれば、人工的にネットワーク遅延を発生させます
• 確認：応答が遅い場合も UI の応答性が保たれる
• 確認：API 呼び出しに時間がかかる場合、読み込みインジケーターが表示される
• 確認：通常の使用でタイムアウトエラーが発生しない

---

フェーズ 2：コードベースのレビュー

以下に記載されたすべてのコンポーネントとモジュールのソースコードを読みます。それぞれについて、以下を評価します：

• 正確性：ロジックのバグ、競合状態、または壊れた状態遷移はありませんか？
• UX の品質：コンポーネントは適切なフィードバックを提供し、エッジケースに対処し、洗練された使い心地になっていますか？
• パフォーマンス：不要な再レンダリング、メモ化の不足、またはコストの高い処理はありませんか？
• アクセシビリティ：インタラクティブな要素に適切なラベルが付いていますか？キーボードで操作できますか？
• エラー処理：エラーが捕捉、表示され、復旧可能になっていますか？

レビュー対象のフロントエンドファイル

ファイル	注目する点
packages/web/src/App.tsx	ルート設定、エラーバウンダリー、QueryClient の設定
packages/web/src/components/chat/ChatInterface.tsx	SSE ハンドラーの正確性、メッセージ状態の管理、新しいチャットのフロー、ワークフローのディスパッチ処理
packages/web/src/components/chat/MessageList.tsx	自動スクロール、WorkflowDispatchInline のポーリング、WorkflowResultCard の省略表示
packages/web/src/components/chat/MessageBubble.tsx	Markdown のレンダリング、ストリーミングカーソル、思考中のドット
packages/web/src/components/chat/ToolCallCard.tsx	展開／折りたたみ、実行中の状態アニメーション、出力の省略表示
packages/web/src/components/chat/WorkflowProgressCard.tsx	タイマーの正確性、コンパクトモードとフルモード、古い状態を示すインジケーター
packages/web/src/components/chat/LockIndicator.tsx	表示／非表示の遷移、キュー位置の表示
packages/web/src/components/chat/MessageInput.tsx	Enter と Shift+Enter の使い分け、自動リサイズ、無効状態
packages/web/src/components/layout/Sidebar.tsx	ドラッグによるサイズ変更、プロジェクト追加のフロー、検索、新しいチャット、localStorage への永続化
packages/web/src/components/sidebar/ProjectDetail.tsx	スコープ付きクエリ、会話の状態ドット、ワークフロー実行の並べ替え
packages/web/src/components/sidebar/WorkflowInvoker.tsx	ワークフローの取得、会話の作成と実行のフロー、エラー処理
packages/web/src/components/sidebar/AllConversationsView.tsx	検索フィルタリング、コードベースマップの構築、「新しいチャット」
packages/web/src/components/sidebar/ProjectSelector.tsx	削除確認、「すべてのプロジェクト」ボタン
packages/web/src/components/conversations/ConversationItem.tsx	インライン編集による名前変更、削除フロー、アクティブ状態のハイライト
packages/web/src/components/workflows/WorkflowList.tsx	2 タブのレイアウト、インライン実行パネル、実行中インジケーターのパルス
packages/web/src/components/workflows/WorkflowExecution.tsx	イベントからの初期データの再構築、ライブ SSE オーバーレイ、ワーカーと親のフロー
packages/web/src/components/workflows/WorkflowLogs.tsx	読み取り専用のチャットビュー、SSE ハンドラー、タイムスタンプによるメッセージのフィルタリング
packages/web/src/components/workflows/StepProgress.tsx	ステップリストのレンダリング、並列ブロックへの委譲、アクティブステップのハイライト
packages/web/src/components/workflows/StepLogs.tsx	仮想スクロール、自動スクロール、メタデータヘッダー
packages/web/src/components/workflows/ArtifactSummary.tsx	成果物の種類を示すアイコン、URL リンク、パスの表示
packages/web/src/components/workflows/LoopIterationView.tsx	進捗バーの計算、最大反復回数の制限
packages/web/src/components/workflows/ParallelBlockView.tsx	全体ステータスの導出、ネストされたエージェントのリスト
packages/web/src/hooks/useSSE.ts	テキストのバッチ処理（50ms 間隔でフラッシュ）、再接続、ハンドラー参照の安定性
packages/web/src/hooks/useWorkflowStatus.ts	ワークフロー状態マップ、ポーリングのフォールバック（15s）、古い状態の検出
packages/web/src/hooks/useAutoScroll.ts	スクロールしきい値（50px）、ユーザーが上方向にスクロールしたことの検出
packages/web/src/lib/api.ts	SSE_BASE_URL の計算、エラー処理、404 の無視
packages/web/src/lib/types.ts	SSEEvent ユニオンの網羅性、ChatMessage のフィールド、WorkflowState の形状
packages/web/src/lib/message-cache.ts	キャッシュキーの正確性、メモリ管理
packages/web/src/contexts/ProjectContext.tsx	古いプロジェクト ID のクリーンアップ、コードベースのポーリング間隔

レビュー対象のバックエンドファイル

ファイル	確認項目
packages/server/src/routes/api.ts	エンドポイントの正確性、CORS、SSE ハートビートループ、ワークフロー実行エンドポイント、コードベースの重複排除
packages/server/src/adapters/web.ts	sendMessage のカテゴリフィルタリング、構造化イベントの処理、ロックイベントのフラッシュ
packages/server/src/adapters/web/persistence.ts	セグメント分割ロジック、ツール呼び出し時間の追跡、フラッシュのタイミング、50 セグメントの上限
packages/server/src/adapters/web/transport.ts	ストリーム置換の競合状態の修正、バッファー上限（100 メッセージ／200 会話）、ゾンビプロセスの回収処理
packages/server/src/adapters/web/workflow-bridge.ts	イベントマッピングの完全性、ブリッジのサブスクリプションのライフサイクル、親への転送
packages/core/src/orchestrator/orchestrator.ts	ルーターのプロンプト構築、バックグラウンドの fire-and-forget ディスパッチ、分離の解決
packages/core/src/workflows/executor.ts	古いワークフローの検出（15 分）、ステップ間のセッション継続性、並列 Promise.all、ループ完了シグナル
packages/core/src/workflows/router.ts	大文字と小文字を区別しないマッチング、複数行正規表現、フォールバック動作
packages/core/src/workflows/event-emitter.ts	リスナーエラーの分離、リスナー数の上限、実行登録のライフサイクル

レビューチェックリスト

レビューしたファイルごとに、以下のカテゴリで指摘事項を記録します。

1. バグ — ロジックエラー、競合状態、状態の不整合、クラッシュ
2. UX の問題 — フィードバックの不足、分かりにくい操作、状態が不明瞭、行き止まり
3. パフォーマンス — 不要な再レンダリング、React.memo/useMemo/useCallback の不足、レンダリング時の高負荷な計算
4. アクセシビリティ — ARIA ラベルの不足、フォーカス管理の問題、スクリーンリーダー関連の問題
5. エラー処理 — 未処理の Promise 拒否、try/catch の不足、エラーの握りつぶし
6. コード品質 — 未使用コード、TODO、不統一なパターン、型の不足

---

フェーズ 3：レポート

すべてのテストとレビューが完了したら、以下の形式で構造化レポートを作成します。

レポート形式

# Archon Web UI Validation Report

**Date**: {date}
**Tester**: Claude Code (agent-browser + codebase review)
**Archon Version**: {git commit hash}
**Screenshots**: /tmp/archon-test-*.png

## Executive Summary
{2-3 sentences: overall quality assessment, critical issues count, UX rating}

## Critical Bugs (P0)
{Bugs that break core functionality or lose data}

## Major Issues (P1)
{Issues that significantly degrade the experience}

## Minor Issues (P2)
{Polish items, edge cases, visual inconsistencies}

## UX Recommendations
{Suggestions for improving the user experience — not just bugs but "could be better"}

## Accessibility Findings
{Keyboard nav gaps, ARIA issues, contrast problems}

## Performance Observations
{Slow renders, unnecessary work, optimization opportunities}

## Codebase Quality Notes
{Dead code, inconsistencies, architectural concerns}

## What's Working Well
{Positive findings — features that are solid, patterns that are good}

## Detailed Test Results

### Dashboard Tests
| Test | Status | Notes |
|------|--------|-------|
| 1.1 Initial Load | PASS/FAIL | ... |
...

### Project Management Tests
...

### Chat Interface Tests
...

### Workflow Management Tests
...

答えるべき重要な質問

Archon は現在、多数のエージェントを並列で管理し、カスタムワークフローを可視性を完全に保ちながら実行するという課題を解決するために、最善を尽くせていますか？

具体的には、以下を評価してください。

• ユーザーは、すべてのエージェントが何をしているかをひと目で簡単に確認できますか？
• ワークフローのステータスは、複数のページをクリックして移動しなくても確認でき、理解しやすいですか？
• オーケストレーターのチャット、個々のワークフロー実行、タスクログの間をすばやく移動できますか？
• ルーターを通じてワークフローを開始する操作は直感的ですか？
• 並列で動作するエージェントは、それぞれのステータスとともに分かりやすく表示されていますか？
• エラーや問題は、十分に目立つ形で UI に表示されますか？
• 5～10 個のエージェントを同時に管理する人にとって、全体的な情報設計は論理的ですか？

---

実行上の注意

• agent-browser のコマンドはすべて Bash ツールから実行してください。
• グローバルにインストールされていない場合は、npx agent-browser を使用してください。
• ページ遷移のたびにスナップショットを再取得し（agent-browser snapshot -i）、最新の参照情報を確認してください。
• スクリーンショットは多めに撮影し、/tmp/archon-test-{section}-{name}.png に保存してください。
• テストに失敗した場合は、すぐに記録してから次のテストに進んでください。
• API 呼び出しを発生させる操作の後は、agent-browser wait --load networkidle を使用してください。
• SSE のテストでは、agent-browser eval を使って EventSource の状態を確認してください。
• WSL2 のヘッドレスモードは問題なく動作します。ディスプレイサーバーは不要です。
• 完了したら、ブラウザーセッションを閉じてください（agent-browser close）。