From 995aaa386973dd2dc034b5a64e2d29dc86f8b276 Mon Sep 17 00:00:00 2001 From: cfdaily Date: Sat, 16 May 2026 14:12:05 +0800 Subject: [PATCH] auto-sync: 2026-05-16 14:12:05 --- ...topic7-9-interaction-dashboard-proposal.md | 247 ++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 docs/design/topic7-9-interaction-dashboard-proposal.md diff --git a/docs/design/topic7-9-interaction-dashboard-proposal.md b/docs/design/topic7-9-interaction-dashboard-proposal.md new file mode 100644 index 0000000..c2e6e1c --- /dev/null +++ b/docs/design/topic7-9-interaction-dashboard-proposal.md @@ -0,0 +1,247 @@ +# 课题7+9 设计方案：AI Native 人机交互 + Dashboard + +> **日期**: 2026-05-16 +> **作者**: 庞统（副军师）🐦 +> **状态**: 设计完成，可结题 +> **前置**: 课题1-4、课题6、课题11 已完成设计 + +--- + +## 一、课题7：AI Native 人机交互 + +### 1. 核心问题 + +v1.0 的交互是"用户点按钮触发操作"——传统 Web 应用。v2.0 要实现 AI Native：**AI 主动推送、用户自然语言对话、关键决策拉人、其余自主完成**。 + +### 2. 四种交互模式 + +| 模式 | 描述 | 场景 | 人的参与密度 | +|------|------|------|------------| +| **沉浸观察** | 用户看 Dashboard 实时状态，不干预 | 任务自主执行中 | 低 | +| **轻触确认** | AI 做完关键步骤，推一个确认卡片给用户 | Checkpoint 验证、风控审批 | 中 | +| **即时对话** | 用户主动找 AI 聊（或 AI 主动找人聊） | 需求变更、异常处理、方向调整 | 高 | +| **被动通知** | AI 完成后推送结果摘要 | 任务完成、日报、异常告警 | 低 | + +### 3. 推送级别分级 + +| 级别 | 含义 | 推送方式 | +|------|------|---------| +| 🔴 Critical | 必须立即处理 | 即时推送（webchat/Signal/Telegram） | +| 🟡 Warning | 需要关注，可稍后 | Dashboard 高亮 + 可选推送 | +| 🟢 Info | 一般进展通知 | Dashboard 记录 | +| 🔵 Silent | 仅记录 | 日志/历史 | + +### 4. 三层信息架构 + +| 层级 | 名称 | 内容 | 场景 | +|------|------|------|------| +| L1 | 一眼全局 | 活跃项目数、进行中任务数、最近告警 | 扫一眼知道系统在干什么 | +| L2 | 看板视图 | 任务卡片列表、状态、负责人、进度 | 日常浏览和操作 | +| L3 | 详情面板 | 单任务完整上下文（对话、产出、评审、经验） | 深入了解某个任务 | + +### 5. 双入口对等 + +- **Agent 对话**（webchat/Signal）= 主交互入口 +- **Dashboard**（Web UI）= 可视化入口 +- 共享同一套黑板数据，操作等效 +- 可以在 Dashboard 点按钮，也可以直接跟庞统说"暂停任务 xxx" + +### 6. Checkpoint 交互规范 + +三种 Checkpoint（来自 M3 设计，课题3 挑战/评审体系）： + +| Checkpoint 类型 | 颜色 | 交互 | 场景 | +|----------------|------|------|------| +| 🔍 验证 Checkpoint | 蓝色 #6a9eff | 自动核验 + 人工核验 + 双按钮审批 | 产出物御览确认 | +| 🎯 决策 Checkpoint | 紫色 #818cf8 | 三方案并排对比 + 利弊展示 + 推荐标签 + 御批备注 | 方向选择 | +| 🔧 执行 Checkpoint | 橙色 #f59e0b | 分步打勾 + 命令行高亮 + 进度条 + 验证确认 | 分步执行确认 | + +### 7. 异常通知触发条件 + +| 触发条件 | 推送级别 | 通知内容 | +|---------|---------|---------| +| Agent 执行失败 | 🔴 | 任务ID + Agent + 错误摘要 + retry 按钮 | +| 任务超时（超过 eta） | 🟡 | 任务ID + 已耗时 + 预估剩余 | +| 重试次数达到上限 | 🔴 | 任务ID + 累计失败次数 + 建议操作 | +| Daemon 健康异常 | 🔴 | 异常类型 + 影响范围 | +| 任务完成 | 🟢 | 任务ID + 产出摘要 + 产出链接 | +| 经验提取完成 | 🔵 | 经验标题 + 关联任务数 | + +### 8. AI Briefing 格式 + +**日报**（每天 22:00 自动生成，🟢 级别推送）： +``` +📊 今日战报 (2026-05-16) +━━━━━━━━━━━━━━━━━━━━ +📋 完成任务：3 个（动量因子策略、数据清洗、代码审查） +🔄 进行中：2 个（配对交易研究、风控规则开发） +⚠️ 需关注：1 个（task-012 超时，预计 30min） +💰 今日 Token 消耗：127K（预算 200K，剩余 36.5%） +🧠 新增经验：2 条（pytest 参数优化、SQLite 并发保护） +``` + +**周报**（每周日 22:00，🟢 级别）： +- 本周完成任务数/平均耗时 +- Agent 利用率（谁最忙谁最闲） +- Token 消耗趋势 +- 经验沉淀汇总 +- 下周建议 + +--- + +## 二、课题9：Dashboard 设计 + +### 1. 核心原则 + +- **v1.0 已有的 11 个 Tab 页全部保留** +- **只有"任务看板"需要重新设计和实现**（配合 v2.0 黑板架构） +- 其他 10 个 Tab 功能基本不变，适配新的 Daemon API 即可 + +### 2. v1.0 已有 Tab 页（保留，不重新设计） + +| Tab | 组件 | 功能 | v2.0 变更 | +|-----|------|------|----------| +| 🏛️ 军议大厅 | `CourtDiscussion` | Agent 间对话/讨论 | 适配新 API | +| 🔌 编排调度 | `MonitorPanel` | Daemon/编排状态监控 | 适配新 API | +| 🤺 将军总览 | `OfficialPanel` | Agent 列表/状态/配置 | 适配新 API | +| 🤖 模型配置 | `ModelConfig` | LLM 模型选择/参数 | 适配新 API | +| 🎯 技能配置 | `SkillsConfig` | Skill 注册/启用/禁用 | 适配新 API | +| 🔭 传令巡哨 | `SessionsPanel` | Agent session 列表/状态 | 适配新 API | +| 💰 花费总览 | `UsagePanel` | Token 消耗/预算/趋势 | 适配新 API | +| 📜 奏折阁 | `MemorialPanel` | 已完成/已取消任务归档 | 适配新 API | +| 📋 任务模板 | `TemplatePanel` | 任务模板管理 | 适配新 API | +| ⚙️ 系统设置 | `SettingsPanel` | Daemon 配置/项目管理 | 适配新 API + 课题11 项目管理 | + +### 3. 需要重新设计的 Tab + +#### 📜 任务看板（EdictBoard）— 重新设计 + 重新实现 + +**v1.0 现状**：基于 moziplus v1 DAG 架构的任务列表，状态是 v1 的状态机（pending/planning/executing/completed/failed/cancelled）。 + +**v2.0 重设计**： + +##### 3.1 任务卡片 + +``` +┌─────────────────────────────────────────────┐ +│ 📜 task-013 动量因子策略回测 │ +│ 项目: quant-momentum | 状态: executing 🔄 │ +│ 负责: 张飞⚔️ | 进度: ████░░ 67% │ +│ ⏱️ 已耗时 12min | 📊 3/5 节点完成 │ +│ ⚠️ 1个告警 │ +│ ─────────────────────────────────────────── │ +│ [暂停] [取消] [查看详情] │ +└─────────────────────────────────────────────┘ +``` + +##### 3.2 任务详情面板（TaskModal v2） + +点击任务卡片展开详情，包含： + +| 区域 | 内容 | +|------|------| +| **基本信息** | 标题、需求描述、项目、创建时间 | +| **状态流转** | 状态按钮（基于课题3状态机守卫 ACTION_GUARDS） | +| **执行图** | 任务拆解后的节点图（节点状态 + Agent + 产出） | +| **Checkpoint** | 三种 Checkpoint 面板（验证/决策/执行） | +| **Flow Log** | 执行日志流（时间线格式） | +| **产出物** | 产出文件预览/下载（来自 ArtifactPanel） | +| **评审记录** | 评审意见 + 评审结果（来自 reviews 表） | +| **关联经验** | 该任务沉淀的经验（来自 experiences 表） | + +##### 3.3 项目切换器（配合课题11） + +Header 区域新增项目下拉： +``` +三国量化 · 编排台 | [▼ 动量因子策略] | ✅ 同步正常 | 3 个任务 +``` + +- 下拉列出所有 active 项目 +- 切换后任务看板只显示当前项目的任务 +- "全部项目"选项显示所有项目的任务（带项目标签） + +##### 3.4 推送通知中心 + +Header 区域新增通知铃铛： +``` +🔔 (3) → 点击展开通知面板 +``` + +通知面板： +- 按推送级别分组（🔴 > 🟡 > 🟢 > 🔵） +- 每条通知：时间 + 级别图标 + 内容摘要 + 关联任务链接 +- 🔴 通知可展开操作按钮（确认/忽略/查看详情） +- 支持标记已读/全部已读 + +##### 3.5 AI Briefing 页面（新增 Tab） + +新增第 12 个 Tab：**📊 战报简报** + +- 日报/周报自动生成（§7.8 定义的格式） +- 趋势图表（完成任务数、Token 消耗、Agent 利用率） +- 经验沉淀摘要 +- 下周建议（AI 生成） + +### 4. 技术栈（不变） + +- React + Vite + TypeScript + Zustand +- CSS 变量体系：`--bg`, `--fg`, `--muted`, `--acc`, `--line`, `--panel`, `--panel2` +- API 层：`api.ts`，对接 Daemon HTTP API +- 构建产物：`dashboard/dist/`，uvicorn 8082 端口直接服务 +- UI 参考：OpenClaw Edict UI + Control Center + +### 5. 实时推送机制 + +**选择 SSE（Server-Sent Events）**： + +- Daemon 端新增 `/events` SSE 端点 +- 前端 `EventSource` 监听，收到事件后更新 Zustand store +- 事件类型：`task.status_changed`、`checkpoint.created`、`notification.pushed`、`agent.state_changed` +- 降级方案：SSE 连接失败时退回轮询（当前 v1.0 已有的 5s 轮询） + +理由： +- 比 WebSocket 简单（单向推送够用） +- 比 pure 轮询实时性好 +- HTTP 兼容性好（代理/防火墙不拦） + +### 6. 开发清单 + +| # | 任务 | 优先级 | 说明 | +|---|------|--------|------| +| 1 | Daemon `/events` SSE 端点 | P0 | 实时推送基础 | +| 2 | 任务看板 v2（EdictBoard 重写） | P0 | 核心页面 | +| 3 | TaskModal v2（详情面板） | P0 | 含 Checkpoint/Artifact/Review 集成 | +| 4 | 项目切换器 | P1 | 课题11 前端对接 | +| 5 | 推送通知中心 | P1 | Header 铃铛 + 通知面板 | +| 6 | AI Briefing 页面 | P2 | 日报/周报自动生成 | +| 7 | 其他 10 个 Tab 适配新 API | P1 | 主要是 api.ts 对接 | +| 8 | SSE 降级轮询 | P1 | 连接失败时自动回退 | + +--- + +## 三、与其他课题的关系 + +| 课题 | 关系 | +|------|------| +| 课题1-2（执行模型+事件驱动） | Dashboard 的数据来源 + SSE 事件源 | +| 课题3（挑战/评审） | Checkpoint 面板的交互 + 状态流转按钮 | +| 课题4（拆解+上下文） | TaskModal 中的执行图展示 | +| 课题6（经验沉淀） | AI Briefing 的内容来源 + TaskModal 关联经验 | +| 课题11（多项目） | 项目切换器 + 任务卡片项目标签 | +| M3（Checkpoint+Artifact） | Checkpoint 三种组件 + ArtifactPanel 集成 | + +--- + +## 四、结题说明 + +课题7+9 的设计决策在 v2.6.6 已确定（四种交互模式、推送分级、信息架构、5页结构），本次方案文档补充了： + +- ✅ Checkpoint 交互规范（三种类型 + 颜色 + 交互方式） +- ✅ 异常通知触发条件和内容模板 +- ✅ AI Briefing 格式（日报/周报模板） +- ✅ v1.0 已有 11 个 Tab 页完整清单和保留策略 +- ✅ 任务看板 v2 重新设计（卡片/详情/项目切换/通知中心） +- ✅ 实时推送机制选型（SSE + 降级轮询） +- ✅ 开发清单（8 项，按优先级排序） + +**剩余工作属于编码范畴**，设计层面可结题。