# EvoPanel · 布局线框（仅结构示意，非最终视觉）

用线框标出「实时聊天」与「任务进度监控」两屏的信息分区。可直接用浏览器打开本文件查看。实现时可对齐 `chat.js`、`task-detail.js` 等页面。

屏一 · 实时聊天页
会话标题 / 模型 thread_id 流式中…
用户：帮我做竞品分析，分步骤执行。
助手：已创建主任务并拆分子任务…
工具 supervisor · list_subtasks / create_subtask（示意）
（此处为多条消息滚动区域）

#### 复杂任务协作

开启复杂任务 主任务 ID
0fd9d43b（绑定后 task 带 collab_*）

→ 跳转「任务监控」深链

#### 快捷

📋 打开任务进度页
📎 上传（如有）

栅格：顶栏全宽 · 左主列=对话区 · 右列=协作绑定与快捷入口（窄屏可改为对话下方折叠）· 底栏全宽=输入框+发送。

屏二 · 智能体任务进度监控（任务详情 / 看板）

## 主任务名称 · E2E-XXX

task_id · project_id · 绑定 thread · 状态：执行中

### 子任务看板（卡片 = 一行子任务）

Subtask-A
状态 · 进度 60% · 模板 general-purpose
profile：tools / skills / depends_on
🧩 含 worker_profile
Subtask-B
待开始 · 模板 bash
依赖：Subtask-A
🧩 含 worker_profile
（更多子任务卡片…）

#### 任务记忆 / 事实

搜索过滤 · facts 列表

#### SSE 实时

task:progress / completed / memory:updated

栅格：顶栏全宽=主任务摘要+进度条+操作 · 左下=子任务卡片网格（可改列表）· 右栏=记忆+事件（窄屏右栏沉底）。

图例：虚线外框 = 整屏边界；复杂任务侧栏仅聊天页需要；任务监控以主任务为轴，子任务用卡片展示模板与 worker_profile，与 API / SSE 字段一一对应。