validate-ui

Archon Web UI — 全面 E2E 验证

对 Archon Web UI 执行全面的端到端浏览器自动化测试和代码库审查。 目标：判断 Archon 是否已尽可能出色地解决并行 Agent 管理、自定义工作流执行以及全面查看 Agent 工作进展的问题。

可选的聚焦参数：$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
• 验证仪表板已渲染：统计卡片（运行中的工作流、对话、系统状态）
• 检查系统健康指示器是否显示“健康”（绿色）
• 截取完整仪表板的屏幕截图

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）

• 点击侧边栏“项目”旁的 + 按钮
• 填入 GitHub URL（例如，https://github.com/anthropics/claude-code）
• 提交并验证项目显示在侧边栏中
• 验证项目已自动选中

2.2 添加项目（本地路径）

• 再次点击 +
• 填入本地路径（例如，/path/to/archon）
• 提交并验证项目已显示
• 验证去重行为：如果该路径已注册，则不应创建重复项目

2.3 选择/取消选择项目

• 点击侧边栏中的一个项目——验证该项目已选中（高亮显示）
• 验证侧边栏内容切换为 ProjectDetail 视图（显示项目名称、仓库 URL、限定在该项目范围内的对话和工作流运行）
• 点击“所有项目”——验证侧边栏切换为 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 响应的消息
• 验证：流式传输期间会显示闪烁光标
• 验证：文本逐步显示（而非一次性全部显示）
• 验证：锁定指示器显示“Agent is working...”
• 验证：响应完成后，锁定指示器会隐藏
• 验证：响应完成后，消息的 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
• 验证：“可用工作流”选项卡显示所有已发现的工作流
• 验证：每张工作流卡片都显示名称和描述
• 验证：“最近运行”选项卡显示最近运行的工作流
• 验证：正在运行的工作流会在“最近运行”选项卡标签上显示闪烁的圆点

5.2 从工作流页面调用工作流

• 点击一张工作流卡片（例如，archon-assist）
• 验证：展开内嵌运行面板，其中包含项目选择器和消息输入框
• 从下拉菜单中选择一个项目
• 输入消息并点击“运行”
• 验证：对话已创建，并导航至 /chat/{conversationId}
• 验证：工作流执行开始（出现来自 AI 的消息）

5.3 从侧边栏调用工作流（WorkflowInvoker）

• 在侧边栏中选择一个项目
• 验证：ProjectDetail 视图中会显示工作流下拉菜单
• 从下拉菜单中选择一个工作流
• 输入消息并提交
• 验证：新对话已创建、已导航至聊天页面，并且工作流正在运行

5.4 工作流路由器（Agent 编排器）

• 在项目聊天中发送一条自然语言消息（例如，“帮我了解身份验证流程”）
• 验证：路由器检测到意图并将其路由至相应的工作流
• 验证：出现工作流调度状态消息（例如，“正在调度工作流：archon-assist（后台）”）
• 验证：出现 WorkflowDispatchInline 徽标和加载动画
• 验证：点击调度徽标会导航至工作流运行页面或工作进程对话

5.5 聊天中的工作流进度

• 工作流运行期间，验证聊天中会出现 WorkflowProgressCard
• 验证：紧凑模式会显示工作流名称、步骤数和已用时间
• 验证：计时器每秒更新一次
• 点击“打开完整视图”——验证导航至 /workflows/runs/{runId}
• 验证：返回聊天后，进度卡片仍会显示

5.6 工作流执行页面（/workflows/runs/:runId）

• 导航至一个正在运行或已完成的工作流
• 验证：页眉显示工作流名称、状态和已用时间
• 验证：步骤进度面板（左侧）显示所有步骤及其状态图标
• 点击不同的步骤——验证日志面板（右侧）随之更新
• 验证：“聊天”链接可以返回父级对话
• 对于已调度的工作流：验证 WorkflowLogs 会呈现工作进程对话消息

5.7 并行 Agent 步骤

• 运行包含并行 Agent 的工作流（例如，archon-comprehensive-pr-review 有 5 个并行 Agent）
• 验证：ParallelBlockView 会呈现父步骤和嵌套 Agent 列表
• 验证：每个 Agent 都会显示自身状态（待处理/运行中/已完成/失败）
• 验证：整体区块状态的判定正确（任意一个失败 = 失败，任意一个运行中 = 运行中，全部完成 = 已完成）
• 验证：进度计数器显示“（已完成 Agent 数/Agent 总数）”

5.8 循环迭代

• 运行一个循环工作流（例如，archon-test-loop 或 archon-ralph-fresh）
• 验证：LoopIterationView 会呈现迭代计数器
• 验证：进度条按比例填充（当前值/最大值）
• 验证：每次迭代都会显示状态
• 验证：完成信号（<promise>COMPLETE</promise>）会结束循环

5.9 工作流产物

• 工作流完成后，若其生成了产物（PR URL、提交、分支）
• 验证：底部会呈现 ArtifactSummary 组件
• 验证：URL 是可点击链接，并会在新标签页中打开
• 验证：产物类型图标正确（PR、提交、分支、文件）

5.10 工作流过期检测

• 工作流运行期间，如果 SSE 连接短暂断开
• 验证：工作流卡片上会出现 stale 指示标记
• 验证：轮询回退机制会启动（每 15 秒检查一次）
• 验证：收到新数据后，过期状态会清除

5.11 取消工作流

• 工作流运行期间，查找“取消”按钮
• 如果存在：点击并验证工作流状态会变为失败/已取消
• 如果不存在：将其记录为 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 重连

• 暂时关闭后端服务
• 验证：界面显示断开连接状态（标题栏中的灰色圆点）
• 重启后端
• 验证：SSE 自动重新连接
• 验证：连接指示灯再次变绿
• 验证：重连时会传递已缓冲的消息

7.3 多个标签页

• 在两个浏览器标签页中打开同一对话（并行操作请使用 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	双标签页布局、行内运行面板、运行指示器脉冲效果
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	整体状态推导、嵌套 Agent 列表
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	路由器提示词构建、后台分发即发即弃、隔离解析
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 目前是否已尽其所能，解决并行管理大量 Agent 并执行自定义工作流且提供全面可见性的问题？

请具体评估：

• 用户能否轻松一览所有 Agent 正在进行的工作？
• 无需点击浏览多个页面，用户能否看到并理解工作流状态？
• 用户能否在编排器聊天、单个工作流运行和任务日志之间快速导航？
• 通过路由器启动工作流的体验是否直观？
• 并行 Agent 是否展示清晰，并分别显示各自的状态？
• UI 是否足够醒目地呈现错误和问题？
• 对于需要管理 5–10 个并发 Agent 的用户而言，整体信息架构是否合理？

---

执行说明

• 使用 Bash 工具运行所有 agent-browser 命令
• 如果未全局安装，请使用 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