调研报告：Agent 阶段产物的展示方式（市面上怎么做）
调研时间：2026-08-19 · 决策问题：Agent 每个阶段产物（研究素材/大纲/草稿/审核结果/发布计划）在界面上怎么展示最好——用于升级平台 C 端任务详情页与 B 端可观测
范围：主流 Agent 产品（OpenAI DeepResearch/通用 Agent UI/LangGraph Studio）+ 内容生产工具链 · 深度：决策级→实现级
0. 结论先行（TL;DR）
- 业界第一原则：把 Agent 内部执行状态转换为用户可理解、可判断、可操作的界面状态——展示"阶段、已做、下一步、是否错误、是否需要你参与"，而不是暴露模型推理过程。（CSDN Agent UI 共识 + DeepResearch 活动侧栏 + LangGraph Studio 三方印证）
- 主流的展示布局是"两栏/三栏"：左=会话/任务列表，中=对话与执行状态区（时间线/步骤卡/审批卡片），右=产物工作区（文档/表格/图表/可编辑报告）——"聊天"与"工作"分开，产物独立呈现。
- 阶段产物要"可检查、可编辑、可回放"：DeepResearch 产出交互式文档（目录+引用侧栏+方法学）；LangGraph Studio 做到节点级状态查看/编辑/时间旅行。产物不是只读日志，是可操作对象。
- 执行前先给"可编辑的计划"：DeepResearch 2026-02 升级的标志性功能——Agent 开工前先展示研究计划，用户可加/删/改子主题再放行。
- 对我们平台的落地：事件流时间线（已有）只是"状态层"；缺的是产物层（阶段产物卡片/工作区）和可操作层（编辑回写、计划确认、状态快照）。按 C 端/运营/开发三层补，工作量可控。
1. 关键事实（实体确认）
1.1 OpenAI Deep Research（2026-02 升级至 GPT-5.2 后的形态）
| 环节 | 展示方式 |
|---|
| 开工前 | 可编辑研究计划：Agent 先给出拟执行计划，用户可增删子主题、限定来源域（reuters.com 等）、绑定 Connected Apps 数据源 |
| 执行中 | 实时活动侧栏：显示正在访问的站点 + agentic reasoning 步骤跟踪（"需要回溯，这条路径没有希望"这类决策轨迹），用户可实时中断/插入问题/换方向 |
| 产出 | 交互式文档：全屏阅读器，左侧目录（TOC）、右侧引用（Citations）侧栏；内嵌图表/表格；附 methodology 方法学章节（怎么得出结论、优先了哪些来源）；可导出 PDF/Word/MD |
| 引用 | 每条事实断言带内联可点击引用，直达来源页面——报告可验证 |
1.2 通用 Agent UI 设计共识（Manus 类产品）
- 从 Chat UI 到 Agent UI：单栏聊天页不够；执行过程要转成用户可理解的状态列表：
✓ 文件读取完成 / ● 正在分析评分办法 / ○ 等待匹配历史案例
- 用户需要知道 5 件事：当前在哪个阶段 / 已经做了什么 / 下一步做什么 / 是否出错 / 是否需要用户参与
- 三栏布局：
- 左：会话列表（历史/运行中/失败/等待确认）
- 中：对话与执行区（用户消息、Agent 回复、执行计划、工具调用摘要、审批卡片、最终结果摘要）
- 右：工作区（长文档、表格、图表、代码、PDF、可编辑报告、数据分析结果）
- 核心理念："聊天"与"工作"分开——对话负责交流，工作区负责承载复杂产物
1.3 LangGraph Studio（Agent 专用 IDE，LangChain 官方）
- 三栏：左=Threads 列表；中=对话 + 时间轴（Steps）——发送消息后以时间轴列出 Agent 每一步，点任意 Step 可看那一刻的状态；右=Graph 视图（节点/边拓扑图）+ State 视图（实时全局状态字典）
- 图可视化：运行中节点高亮、已完成节点显示耗时、失败节点标注错误类型、条件边可见
- State 快照/diff：每步前后全局状态变化；支持"时间旅行"回退到任意节点重跑、断点、热重载
- 定位差异：这是开发调试向（给工程师看状态内幕），与 C 端用户向展示是两码事——但"State 查看 + 时间旅行"给了 B 端可观测很强的参照
1.4 内容生产工具链（Jasper / Copy.ai / Notion AI / ChatGPT）
- 行业成熟工作流与我们的平台同构：
idea → outline → draft → human edit → SEO/QC → publish，关键共识是人工节点嵌入流程（review 不是可选项）
- 内容工具多为"分步向导 + 单文档编辑"，中间产物（大纲→草稿）以可编辑文档形式逐级呈现，草稿产出后人在编辑器里改——对应 Canvas/Artifacts 的可编辑画布模式
2. 设计模式提炼（四种展示模式）
| 模式 | 展示什么 | 代表 | 适用受众 |
|---|
| 状态层：执行时间线/步骤卡 | 阶段流转、工具调用摘要、✓/●/○ 状态、耗时 | DeepResearch 侧栏、Manus 状态列表、LangGraph Studio Steps | C 端用户、运营 |
| 产物层：阶段产物卡片/工作区 | research 素材、outline、draft、review 结果作为可视化对象呈现，可展开/可编辑 | DeepResearch 交互式文档、三栏工作区、Canvas | C 端用户、运营 |
| 计划层：可编辑执行计划 | 开工前展示计划，用户增删改后放行 | DeepResearch（2026-02） | 所有用户 |
| 内幕层：State/图/时间旅行 | 全局状态字典、图拓扑、节点级输入输出、回放重跑 | LangGraph Studio | 开发者（B 端） |
关键洞察：四层由"展示"到"可操作"递进——优秀的产品不只给用户看状态，还让用户在计划/产物层面介入（改计划、改草稿、确认审批），而"内幕层"永远只给开发者。
3. 对比矩阵
| 维度 | OpenAI DeepResearch | 通用 Agent UI（Manus 类） | LangGraph Studio | 内容工具链（Jasper/Copy.ai） | 我们平台现状 |
|---|
| 执行状态展示 | 活动侧栏（站点+推理轨迹） | 状态列表 ✓/●/○ | 时间轴 Steps | 分步向导 | ✅ 事件流时间线（已有） |
| 阶段产物展示 | 交互式文档（TOC+引用+图表） | 工作区（文档/表格/图表） | State 字典（开发向） | 可编辑文档 | ⚠️ 仅事件 payload，无产物卡片 |
| 计划可编辑 | ✅ 核心卖点 | 部分 | ✅ 状态可操纵 | — | ❌ |
| 产物可编辑回写 | ✅（文档视图） | ✅ | ✅（改 State 重跑） | ✅（编辑器） | ❌ |
| 引用/来源追溯 | ✅ 内联引用侧栏 | 部分 | ✅ 工具结果可见 | — | ⚠️ research 素材有 source 字段，无 UI |
| 状态快照/回放 | 活动日志保留 | 部分 | ✅ 时间旅行 | — | ⚠️ 事件日志可回放，无状态 diff 视图 |
| 审批/HITL 卡片 | 部分（steer） | ✅ 审批卡片 | ✅ interrupt | 人工 review 节点 | ✅ 审批页（已有） |
| 面向人群 | C 端用户 | C 端用户 | 开发者 | 运营 | — |
4. 对我们平台的落地建议（按三层，工作量从低到高）
4.1 现状盘点
- 已有：C 端任务详情页事件流时间线（stage/start、agent/request、tool/call 等，SSE 实时）、审批页（approvals）、B 端 observability（事件流总览 + 任务回放）
- 差距：阶段产物没有被"可视化呈现"——research 素材、outline、draft、review 结果只存在于事件 payload，用户要读 JSON；没有"计划展示"；产物不可编辑回写；无状态快照视图
4.2 C 端（用户向 · P0）
- 阶段产物卡片区（升级任务详情页为两栏）：
- 左：现有事件流时间线（状态层，保留）
- 右：产物工作区——research 素材卡（来源链接可点、引用式）、outline 大纲卡（结构化渲染）、draft 草稿卡（展开/折叠 + 与审核意见对比）、review 结果卡（分数 + 意见 + 是否回写中）
- 执行计划展示：supervisor 节点先产出计划（如 DeepResearch：拟研究哪些维度/产出哪些章节），前端渲染成可读计划卡；M4 演进为可编辑计划（用户确认后开工）
- 审核意见可视化：review 驳回时高亮"哪些意见导致回写"，让用户理解循环在做什么（对"审核循环"信任度至关重要）
4.3 B 端（运营向 · P1）
- 草稿可编辑回写：Canvas 模式——运营在详情页直接改 draft，保存后作为"人工修订稿"写回任务（对应 HITL 的 review_escalation 人工改稿环节，M2 已有人工改稿，补 UI）
- 版本对比：多轮 revision 的 draft 差异视图（v1/v2/v3 对照，配合 revision_count）
4.4 B 端（开发向 · P2，可借鉴 LangGraph Studio）
- 状态快照查看：事件日志已支持回放——补"每阶段状态快照"渲染（task/status + 各 stage/end 时点的状态字段），不必做图拓扑
- 节点耗时/指标：事件时间戳可算 stage 耗时，observability 页补耗时条
4.5 不建议做的（避免过度设计）
- C 端展示完整 State 字典 / 图拓扑（开发向，用户不需要）
- 暴露模型推理轨迹（DeepResearch 的做法对内容平台用户是噪音，我们有 stage/agent 事件足矣）
- 产物实时流式逐字渲染（内容长，展开式阅读体验更佳）
5. 风险与坑
| 风险 | 说明 |
|---|
| 产物与事件分离 | 产物卡片应从事件日志重建（日志即真相），不能另起一套产物存储，否则"模型可见必可重建"被破坏 |
| 计划展示变"假承诺" | 计划卡只是"预期"，执行可能偏离——UI 上要标注"计划 vs 实际"（DeepResearch 也会中途 pivot） |
| 草稿编辑回写的一致性 | 人工改稿后，事件日志要补一条 human/review 记录（改了什么），保持审计完整 |
| 产物体积 | 长草稿/素材进事件 payload 会膨胀——产物外置（文件/对象存储）+ 事件只存引用（架构文档风险表已列，落地时执行） |
附：信息来源
- OpenAI DeepResearch 产品信息（界面/配额/能力）：hivebook.wiki 深度条目（2026-08，含 GPT-5.2 前状态）
- DeepResearch GPT-5.2 升级（可编辑计划/实时干预/交互式文档/方法学）：techcityng.com（2026-02）
- 《从 Chat UI 到 Agent UI：如何设计真正可用的智能体交互界面》（三栏布局/状态化第一原则）：CSDN adg（2025-2026）
- LangGraph Studio 三栏布局/时间轴/State 视图/时间旅行：juejin.cn、cloud.baidu.com、brightbean.xyz、CSDN Dontla（多来源交叉）
- 内容生产工作流共识（idea→outline→draft→edit→publish + 人工节点）：marketingagency.sg、aicreatorworld.net、startupik.com（2026）
- ChatGPT Canvas / Claude Artifacts 可编辑画布模式：常识性认知（单来源，未展开核实）