mateclaw/mateclaw-ui/TEST_CASES.md

UI 精简改动 - 验证测试用例

基于 MateClaw 内置的 3 个 Agent、19 个工具、31 条 Guard 规则和审批工作流设计。 默认登录：admin / admin123

---

前置条件

1. 后端启动：cd mateclaw-server && mvn spring-boot:run（零环境变量，启动后到「设置 → 模型」加 LLM 供应商）
2. 前端启动：cd mateclaw-ui && pnpm dev
3. 访问 http://localhost:5173，登录

---

一、StreamLoadingBar 状态简化验证

TC-1.1 思考中状态（Thinking）

• Agent: MateClaw Assistant（ReAct）
• 操作: 发送 "请分析一下量子计算的发展趋势"
• 预期:
  • 加载条显示 "思考中…" 和 ◐ 图标，不再显示 "准备上下文"/"读取记忆"/"推理中" 等内部阶段
  • 无 statusDetail 第二行解释文本
  • 无 slowHint（即使等待超过 8 秒也不出现 "耗时较长" 提示）
  • 仅显示耗时计时器（如 "12s"），不显示 token 计数

TC-1.2 执行中状态（Working）

• Agent: MateClaw Assistant（ReAct），绑定 WebSearch 工具
• 操作: 发送 "搜索一下今天的科技新闻"
• 预期:
  • 工具调用时加载条切换为 "执行中…" 和 ⚙ 图标
  • 显示工具名（如 search）
  • 不显示 "正在执行工具" 的详情文本

TC-1.3 撰写中状态（Writing）

• Agent: MateClaw Assistant（ReAct）
• 操作: 发送 "写一篇 500 字的短文"
• 预期:
  • 内容流输出阶段，加载条显示 "生成中…" 和 ▸ 图标
  • 流结束后加载条消失

TC-1.4 错误/中断状态

• 操作: 发送消息后立即点击停止按钮
• 预期:
  • 加载条图标变为 ⊘，文本变红
  • 无 amber/blue 等其他颜色状态

---

二、审批 UI 精简验证

TC-2.1 Shell 命令触发审批（高危操作）

• Agent: MateClaw Assistant（ReAct），绑定 Shell 工具
• 操作: 发送 "帮我删除 /tmp/test 目录下的所有临时文件"
• 预期:
  • Agent 推理后调用 execute_shell_command，参数含 rm
  • Guard 规则 SHELL_RM 触发 → 进入审批流程
  • ChatInput 区域：替换为审批栏，显示工具名 + 批准/拒绝按钮（保留）
  • MessageBubble 中：仅显示一行 "等待审批：execute_shell_command"，无完整的审批卡片（无 severity 徽章、无 findings 列表、无参数展示、无等待 spinner）
  • 点击"批准"后，气泡状态变为 "已批准：execute_shell_command"

TC-2.2 文件写入触发审批

• Agent: MateClaw Assistant（ReAct），绑定 WriteFile 工具
• 操作: 发送 "创建一个 hello.txt 文件，内容写 Hello World"
• 预期:
  • write_file 工具触发审批
  • 输入栏显示审批操作，气泡仅一行状态
  • 拒绝后，气泡状态变为 "已拒绝：write_file"

TC-2.3 危险命令直接阻断（CRITICAL 级别）

• Agent: MateClaw Assistant（ReAct），绑定 Shell 工具
• 操作: 发送 "执行 rm -rf /"
• 预期:
  • Guard 规则 SHELL_RM_RF_ROOT 直接 BLOCK
  • 不进入审批流程，直接返回阻断消息
  • 输入栏不显示审批栏

---

三、Plan-Execute 流程验证

TC-3.1 PlanStepsPanel 渲染唯一性

• Agent: Task Planner（Plan-Execute）
• 操作: 发送 "帮我调研 MateClaw 项目的技术栈，列出前端和后端分别用了哪些核心技术，然后生成一个技术概览文档"
• 预期:
  • 生成计划后，PlanStepsPanel 只在消息气泡中出现一次
  • 步骤进度正确显示（pending → running → completed）
  • 不在分段式视图和传统模式中同时出现两个 PlanStepsPanel

TC-3.2 Plan 中触发审批的步骤暂停与恢复

• Agent: Task Planner（Plan-Execute），绑定 Shell + WriteFile 工具
• 操作: 发送 "查看当前目录结构，然后创建一个 project-summary.md 文件"
• 预期:
  • 计划包含多个步骤
  • 涉及文件写入的步骤触发审批
  • 审批期间，PlanStepsPanel 该步骤显示 running 状态
  • 气泡中审批为一行极简文本
  • 批准后步骤继续执行，状态更新为 completed

---

四、BrowserTimeline 默认收起验证

TC-4.1 浏览器操作时间线默认折叠

• Agent: MateClaw Assistant（ReAct），绑定 BrowserUse 工具
• 操作: 发送 "打开浏览器访问 baidu.com，截图"
• 预期:
  • 浏览器操作完成后，时间线默认收起
  • 仅显示标题栏 "Browser: N actions"
  • 点击标题栏可展开查看操作细节和截图

---

五、动画与视觉一致性验证

TC-5.1 无 Typing Bounce Dots

• Agent: 任意 Agent
• 操作: 发送消息，观察 AI 响应开始前
• 预期:
  • 不再出现三个弹跳圆点的加载动画
  • 使用 TypingCursor（闪烁光标）代替

TC-5.2 动画一致性

• 操作: 在不同场景触发加载状态
• 预期:
  • StreamLoadingBar 的 icon-pulse 动画时长统一为 1.2s
  • 所有 spinner 使用相同的旋转动画
  • 无竞争性的多重脉冲动画

---

六、ChatInput 占位符验证

TC-6.1 加载中占位符不暴露键盘操作

• Agent: 任意 Agent
• 操作: 发送消息，在 AI 生成过程中观察输入框
• 预期:
  • 占位符仅显示原始 placeholder 文本
  • 不再显示 "(Enter to send / interrupt)"
  • 发送按钮变为红色停止图标已足够提示

---

七、深色模式主题变量验证

TC-7.1 深色模式颜色正确性

• 操作: 切换到深色模式（侧边栏底部主题切换）
• 检查项:
  • StreamLoadingBar 文本颜色使用主题主色调（非硬编码 #f97316）
  • 审批状态文字颜色正确（成功绿/失败红均跟随主题）
  • 中断按钮使用 --mc-warning 变量的深色模式值 (#fbbf24)
  • 排队指示器使用 --mc-info 变量的深色模式值 (#60a5fa)
  • 工具调用状态图标（成功/失败/等待）颜色均来自 CSS 变量

TC-7.2 浅色/深色快速切换

• 操作: 在生成过程中快速切换浅色/深色模式
• 预期:
  • 所有颜色即时切换，无残留的硬编码颜色

---

八、回归测试

TC-8.1 普通对话流程（无工具调用）

• Agent: MateClaw Assistant
• 操作: 发送 "你好，介绍一下你自己"
• 预期: 正常生成回复，无 UI 异常

TC-8.2 多轮对话 + 工具调用

• Agent: MateClaw Assistant，绑定多个工具
• 操作: 连续发送 3-5 条消息，触发不同工具
• 预期: 每轮消息的加载条、工具调用显示、内容输出均正常

TC-8.3 消息中断与重试

• 操作: 发送消息 → 中断 → 重试
• 预期: 中断指示器正常显示，重试后正常生成

TC-8.4 会话切换

• 操作: 在多个会话间切换
• 预期: 历史消息正确加载，审批状态（已批准/已拒绝）正确回显

TC-8.5 移动端响应式

• 操作: 浏览器宽度缩小到 768px 以下
• 预期:
  • 审批栏在 ChatInput 中正常自适应
  • 气泡中审批状态一行文本不溢出
  • 加载条内容不截断