agent-self-verification

Agent 闭环自验证工作流

核心理念：写完代码不是终点，验证通过才算完成。 Agent 应像人类工程师一样，改完代码后"打开浏览器看看对不对、查看日志有没有报错、确认性能正常"。

何时触发

每次完成以下任何改动后，必须进入验证循环：

• 前端 UI 变更（组件、样式、布局）
• 后端 API 变更（接口、逻辑、数据结构）
• Bug 修复
• 配置变更（Docker、Nginx、环境变量）
• 数据库 schema 变更

验证循环流程

┌─────────┐
│ 写代码   │
└────┬────┘
     ▼
┌─────────┐
│ 构建/部署 │ ← docker compose up --build / npm run build
└────┬────┘
     ▼
┌─────────────┐
│ 静态检查     │ ← Linter + TypeCheck
└────┬────────┘
     ▼
┌─────────────┐
│ UI 验证(眼睛) │ ← 浏览器快照 + 截图 + 控制台
└────┬────────┘
     ▼
┌──────────────────┐
│ 系统验证(听诊器)   │ ← 容器日志 + 健康检查 + 网络请求
└────┬─────────────┘
     ▼
┌─────────┐    失败    ┌─────────┐
│ 判定结果  │─────────→│ 定位修复  │──→ 返回"写代码"
└────┬────┘           └─────────┘
     │ 通过
     ▼
┌─────────┐
│ 任务完成  │
└─────────┘

第一步：构建与部署验证

代码改动后，先确认构建成功：

# 前端项目
docker compose up --build -d <service-name>
docker logs <container-name> --tail 30

# 检查容器状态
docker ps --filter "name=<container-name>" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"

判定标准：容器状态为 Up，无 Restarting，日志无 Error/Exception。

第二步：静态检查

# 使用 ReadLints 工具检查已编辑文件
# 如果有 TypeScript，检查类型错误
docker exec <container-name> npx tsc --noEmit 2>&1 | tail -20

判定标准：无新增 linter 错误，无类型错误。

第三步：UI 验证（装"眼睛"）

对于前端变更，使用浏览器 MCP 工具验证：

3.1 导航到目标页面

browser_navigate → 目标 URL
browser_snapshot → 获取页面结构（相当于 DOM "X光片"）

3.2 验证页面元素

browser_snapshot(interactive: true) → 检查交互元素是否存在且可操作
browser_is_visible(selector) → 确认关键元素可见
browser_get_input_value → 验证表单默认值

3.3 验证交互行为

browser_click / browser_fill → 模拟用户操作
browser_snapshot(includeDiff: true) → 对比操作前后的页面变化

3.4 检查前端错误

browser_console_messages → 检查是否有 JS 错误或警告
browser_network_requests → 检查 API 请求是否成功（无 4xx/5xx）

3.5 视觉确认

browser_take_screenshot(fullPage: true) → 截取完整页面

判定标准：

• 目标元素存在且可见
• 控制台无 error 级别消息
• 网络请求全部成功
• 交互行为符合预期

第四步：系统验证（装"听诊器"）

4.1 容器日志检查

# 查看最近日志，过滤错误
docker logs <container-name> --since 2m 2>&1 | grep -iE "error|exception|traceback|failed"

# 后端 API 日志
docker logs <backend-container> --since 2m 2>&1 | tail -50