# 课题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 项，按优先级排序）

**剩余工作属于编码范畴**，设计层面可结题。