前端优化：对话、调试与流式体验

状态：implemented 类型：simplification Owner：web/src/components/AgentChatComponent.vue

问题

对话页面的样式、组件和状态反馈缺少一致性：调试信息重复且难以对照时间，消息与过程摘要的耗时口径不同，请求派发前后的调试选择不连续，侧栏状态遮挡长标题，成批到达的正文出现跳跃。相关调整围绕同一个前端体验主题维护，局部样式和组件修正随主题更新。

决策

对话导航复用现有主题变量和固定操作位。项目状态从已加载线程派生，运行优先于未读；折叠项目显示聚合运行状态，展开后由线程展示。快捷新建只预选项目，首次发送时才创建线程。长标题、状态遮罩、hover/focus 操作及触屏入口保持可用。分组由 projectConversationGroups.js 拥有，路由交接由 AppLayout.vue 与 AgentView.vue 拥有。

调试面板采用统一记录列表和可调整尺寸的详情检查器，宽屏左右分栏、窄屏上下分栏。Run、User、Model、Tool 共享选择交互，原始数据与 Run 时延明细按需查看，列表删除重复 ID、角色文字、状态徽标和行内 JSON。时间概览按 Run 顺序累计执行窗口，压缩提问间空闲；选中记录与时间条联动，隐藏概览时重置筛选。时间位置只使用持久绝对时间，缺失记录保留未知时间上下文。MessageDebugPanel.vue 和 messageDebug.js 拥有展示；Run 状态始终来自 AgentRun。

History 独立返回 thread、全部轻量 runs 与 history，包括无消息 Run；消息通过 run_id 关联，删除消息上的 Run 时间副本。Repository 拥有查询，conversation_service 拥有鉴权后的装配；读取与显式已读写操作分开。审计接口仍独立按需读取，审计与 Run 窗口分别限制为最新 500 条并报告截断。完整接口与隔离规则由线程阅读数据维护。

消息底部与折叠过程通过 runTiming.js 格式化同一 timing.total_latency_ms，缺失时保持未知。五段时延只在调试 Run 详情展示；浏览器即时计时用于生成反馈，历史事实由 PostgreSQL 与统一 serializer 拥有，详见并发容量与时延观测。Run 创建前以 request_id 区分请求，明确关联到达后原地补齐，保持消息、选择与发送时间连续。

流式正文由 useStreamSmoother 统一缓冲和播放：起始缓冲 180 ms，按经过时间、到达速率与积压量渐进调速，以 600 ms 为追赶目标，按完整字素边界切片。每条消息只有一个帧任务，按线程与消息隔离；工具参数先交付对应文本再即时透传，减少动态效果模式直接显示，终态、错误和审批 flush 及时交付尾部，reset 清除对应待播内容。

替代方案

• 保留原有分散入口和消息内 Run 时间：改动较小，但诊断重复、耗时不一致，且无消息 Run 无法完整表达。采用独立 Run 投影和统一检查器。
• 使用绝对会话时间轴或逐 Run 切换：前者被用户空闲挤压，后者增加选择状态。采用累计执行时间轴，不根据序号或浏览器时间补造时间。
• 提前创建 Run 或空线程、持久化项目聚合状态：会扩大生命周期与同步成本。复用现有 Request 身份、首次发送流程和已加载线程状态。
• 全量即时显示或固定逐字速度：分别导致突发跳跃或长期积压。采用适度缓冲与渐进调速；Markdown 分块与滚动架构仅在实际性能证据需要时调整。

后果

前后端需同步发布；仓库外 History 消费者需改为按 run_id 查找 runs。History 仍无分页，未来分页必须一起定义消息与 Run 范围；多个 SQL 读取不承诺原子快照，运行中事实通过 SSE 与持久化重读收敛。项目聚合仅覆盖已加载线程。

正文首段增加少量显示延迟；600 ms 是追赶目标，不能保证任意输入的最大延迟，也无法掩盖长时间上游断流。同步 flush 可以一次显示尾部。此处优化阅读节奏，不保证消除长 Markdown 重绘成本。

验证

旧能力不存在：消息中的 run_timing、run_started_at、run_finished_at 副本与消费路径、第二个时延入口、逐 Run 时间栏切换及行内 JSON 展开被移除。

重新引入条件：出现独立的消息级时间语义或必须并列诊断的新实体时再扩展对应 Owner；同主题的局部样式和组件调整继续更新本记录。

前端 unit 覆盖耗时缺失、跨 Run 分组、零消息 Run、请求派发前后稳定身份、导航状态优先级及流式播放的字素、刷新率、flush/reset 和线程隔离。后端 unit、真实 HTTP integration 与 Agent 异步 E2E 验证 History 的完整 Run 投影、权限隔离、读取不改变已读标记，以及 API、worker、SSE、结果与 History 的关联。

提交时执行 Web lint、unit、build、后端 unit、相关 HTTP integration/E2E、工程契约检查及其单测、文档构建和差异检查；实际命令、结果与未覆盖范围在提交说明中记录。浏览器需检查调试选择、时间筛选、分栏、项目预选和流式正文，并覆盖浅深色与窄屏；合成回放只证明前端展示，不替代真实 worker 链路。