EvoPanel · 布局线框(仅结构示意,非最终视觉)

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

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

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

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

主任务名称 · 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
(更多子任务卡片…)

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

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