模块 6Agent UX 与生成式 UI

Streaming UI

流式 UI 消费事件，不是拼接一个字符串

  • Run、Message、Content、Tool、Approval 和 Artifact 事件分型
  • 稳定 ID 关联生命周期
  • Delta 与 Snapshot 不可混用
  • 未知事件保留兼容性和诊断信息

Reducer 从事件推导可预测状态

状态集合

连接状态

  • idle、connecting 与 reconnecting
  • 网络状态不等于 Run 终态

运行状态

  • streaming、waiting-tool 与 waiting-approval
  • completed、failed 与 cancelled

终态不可被晚到 Delta 改写

  • 同一事件幂等
  • Tool 与消息状态独立
  • UI 只渲染状态，不在组件中散落协议判断

SSE、Fetch Stream 与 WebSocket 的选择

  • 单向服务事件、双向实时控制与基础设施约束
  • 心跳、代理缓冲和连接上限
  • 断线重连携带 Last Event ID 或游标
  • 恢复失败时回拉服务器快照

渲染节奏与 Token 节奏解耦

  • 按 animation frame 或时间窗口批量刷新
  • Markdown 增量解析与未闭合结构
  • 长列表虚拟化和 Artifact 懒加载
  • 自动滚动尊重用户已离开底部

取消和重试必须表达真实后端状态

  • 立即更新交互状态并发送取消信号
  • 区分“停止展示”与“服务端已停止”
  • 已执行 Tool 副作用不能随重试重复
  • 重试从哪个检查点开始由服务端状态决定

动态内容也要可访问

  • 避免每个 Token 触发 Screen Reader
  • 状态变化用适度 live region
  • 键盘可操作暂停、取消和跳转
  • Reduced Motion、焦点保持和错误说明

用确定性事件回放测试概率 UI

  • 正常文本、并行 Tool、审批和 Artifact
  • 重复、乱序、晚到、截断和未知事件
  • 断线恢复与服务器快照对账
  • 性能、内存和 DOM 增长