@bolloon/bolloon-agent 0.3.9 → 0.3.11

package/dist/web/ui/message-renderer.js

@@ -1,433 +1,572 @@
-import {
-  mountStepTimeline,
-  pushStepToTimeline,
-  migrateStepTimeline,
-  getStepTimeline
-} from "./step-timeline.js";
-import { segmentChatReply } from "../../agents/chat-segmenter.js";
+/**
+ * message-renderer.ts — 对话显示 UI (2026-06-15 从 client.js 拆出, .js → .ts)
+ *
+ * 职责 (单一):
+ *   - 把 user / AI 内容渲染成 DOM 气泡 (含 marked.parse 渲染)
+ *   - 处理流式 token 累积 (textNode 增量, O(1), 不重排)
+ *   - finalize 流式消息为正式 AI 气泡
+ *   - 折叠 think / environment_details 块
+ *   - 复制 / 重新回答 / 蒸馏为判断 按钮
+ *   - 挂载 step-timeline (2026-06-15) 步骤状态条到每条 AI 消息内
+ *
+ * 状态 (本模块私有):
+ *   - streamingMessageEl / streamingTextNode / streamingText
+ *   - lastUserCommand / lastAiContent  (去重)
+ *
+ * 依赖 (import):
+ *   - 浏览器 API (document, marked, fetch, navigator)
+ *   - ./step-timeline (4 状态步骤条模块)
+ *
+ * 不依赖 (零业务 import, 防循环):
+ *   - 不 import client.js
+ *   - 不 import 任何业务模块
+ *
+ * 输入 (从 client.js 调用):
+ *   - addMessage(content, type, save, container, usedIds, ctx)
+ *   - handleStreamTokenEvent({ streamType, content }, ctx)
+ *   - finalizeTimelineAsMessage(ctx)
+ *   - handleStepEvent({ type: 'step_start'|'step_done'|'step_error', ... }, ctx)
+ *   - escapeHtml(s)
+ *   - getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl)
+ *
+ * 输出 (DOM):
+ *   - .message / .bubble / .think-container / .env-container
+ *   - .message-streaming (流式期间, finalize 时移除)
+ *   - .message-actions (复制/重新回答/蒸馏按钮)
+ *   - .used-judgments-link (P0.5 反向引用)
+ *   - .step-timeline (气泡内步骤状态条, 由 ./step-timeline 渲染)
+ */
+// ---------------------------------------------------------------------------
+// 类型定义
+// ---------------------------------------------------------------------------
+import { mountStepTimeline, pushStepToTimeline, migrateStepTimeline, getStepTimeline, } from './step-timeline.js';
+// 2026-07-01 (v0.2.6): 共享后端切 LLM 输出. 消除 <invoke>/<function_calls>/<tool_call>
+//   等各种 LLM 格式在前端气泡里出现的 bug.
+import { segmentChatReply } from '../../agents/chat-segmenter.js';
+// ---------------------------------------------------------------------------
+// 模块私有状态
+// ---------------------------------------------------------------------------
 let streamingMessageEl = null;
 let streamingTextNode = null;
-let streamingText = "";
-let lastUserCommand = "";
-let lastAiContent = "";
-const stepEventBuffer = /* @__PURE__ */ new Map();
-function hasStreamingText() {
-  return streamingText.length > 0;
+let streamingText = '';
+let lastUserCommand = '';
+let lastAiContent = '';
+// 2026-07-20: Bug 1 — 非流式模式 step 事件缓冲, 按 channelId 分组
+const stepEventBuffer = new Map();
+/**
+ * 2026-06-17: 流式状态查询 — 客户端用它在收到 server `ai` 事件时判断是否需要跳过 addMessage,
+ *   避免和后续 `done` → finalizeTimelineAsMessage 产生双气泡.
+ *   流式过程中 (streamingText > 0) server 推 `ai(content=fullResponse)` 时跳过,
+ *   真正渲染走 `done` 触发的 finalizeTimelineAsMessage.
+ */
+export function hasStreamingText() {
+    return streamingText.length > 0;
 }
-function replaceStreamingText(fullContent) {
-  if (!streamingTextNode || !streamingMessageEl) {
-    return;
-  }
-  streamingTextNode.nodeValue = String(fullContent || "");
-  streamingText = String(fullContent || "");
+// 2026-07-06: SSE 重连恢复用 — 把 streamingText 替换成 server 给的 fullContent
+//   然后 caller 调 finalizeTimelineAsMessage 把它落定为正式气泡
+export function replaceStreamingText(fullContent) {
+    if (!streamingTextNode || !streamingMessageEl) {
+        // 还没启动流式元素 — 不动, 让 caller 自己 addMessage
+        return;
+    }
+    streamingTextNode.nodeValue = String(fullContent || '');
+    streamingText = String(fullContent || '');
 }
-function injectRecoveredText(partialText, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
-  if (streamingMessageEl && streamingTextNode) {
-    streamingTextNode.nodeValue = String(partialText || "");
-    streamingText = String(partialText || "");
-    return;
-  }
-  handleStreamTokenEvent(
-    {
-      type: "token",
-      streamType: "token",
-      content: String(partialText || ""),
-      delta: String(partialText || "")
-    },
-    ctx
-  );
+// 2026-07-06: SSE 重连时 server 说"还在生成", 把现有的 streamingMessageEl 填上 partialText
+//   让用户看到 AI 在生成中的状态, 不会卡死
+export function injectRecoveredText(partialText, ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
+    if (streamingMessageEl && streamingTextNode) {
+        streamingTextNode.nodeValue = String(partialText || '');
+        streamingText = String(partialText || '');
+        return;
+    }
+    // 还没流式元素 — 创建一个空流式容器, 然后把 partialText 灌进去, 用户看到"AI 在思考"
+    handleStreamTokenEvent({
+        type: 'token',
+        streamType: 'token',
+        content: String(partialText || ''),
+        delta: String(partialText || ''),
+    }, ctx);
 }
+// 滚动限频 (60ms 16fps, 减 reflow)
 let scrollToBottomTimer = null;
 function scheduleScrollToBottom(container) {
-  if (!container) return;
-  if (scrollToBottomTimer) return;
-  scrollToBottomTimer = setTimeout(() => {
-    container.scrollTop = container.scrollHeight;
-    scrollToBottomTimer = null;
-  }, 60);
+    if (!container)
+        return;
+    if (scrollToBottomTimer)
+        return;
+    scrollToBottomTimer = setTimeout(() => {
+        container.scrollTop = container.scrollHeight;
+        scrollToBottomTimer = null;
+    }, 60);
 }
-function getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl) {
-  if (currentChannelId && messagesContainers.get(currentChannelId)) {
-    return messagesContainers.get(currentChannelId) || null;
-  }
-  return messagesEl;
+// ---------------------------------------------------------------------------
+// 容器选择 (主入口或 per-channel 容器)
+// ---------------------------------------------------------------------------
+export function getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl) {
+    if (currentChannelId && messagesContainers.get(currentChannelId)) {
+        return messagesContainers.get(currentChannelId) || null;
+    }
+    return messagesEl;
 }
-function escapeHtml(s) {
-  return String(s ?? "").replace(/[&<>"']/g, (c) => ({
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#39;"
-  })[c]);
+// ---------------------------------------------------------------------------
+// HTML escape (供 think / env 折叠块用)
+// ---------------------------------------------------------------------------
+export function escapeHtml(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+    }[c]));
 }
-function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }, timestamp) {
-  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
-  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
-  const currentChannelId = ctx.currentChannelId;
-  const msgContainer = container || getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-  if (!save && msgContainer && msgContainer.children.length > 200) {
-    const toRemove = msgContainer.children.length - 200;
-    for (let i = 0; i < toRemove; i++) {
-      const first = msgContainer.firstElementChild;
-      if (first) msgContainer.removeChild(first);
+// ---------------------------------------------------------------------------
+// 主入口: 渲染一条消息气泡 (user / ai / system)
+// ---------------------------------------------------------------------------
+export function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }, 
+// 2026-07-15 修 Bug 2: 历史消息恢复时传历史 timestamp, 不传 = 用"现在" (新消息默认值, 防破坏 LLM 流式事件链).
+timestamp) {
+    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
+    const messagesContainers = ctx.messagesContainers || new Map();
+    const currentChannelId = ctx.currentChannelId;
+    const msgContainer = container || getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+    // 内存保护: 单个 channel 容器超过 200 条, 旧会话加载时淘汰最旧
+    if (!save && msgContainer && msgContainer.children.length > 200) {
+        const toRemove = msgContainer.children.length - 200;
+        for (let i = 0; i < toRemove; i++) {
+            const first = msgContainer.firstElementChild;
+            if (first)
+                msgContainer.removeChild(first);
+        }
     }
-  }
-  if (save) {
-    const lastContent = type === "user" ? lastUserCommand : lastAiContent;
-    if (lastContent && content === lastContent) {
-      console.log(`[addMessage] \u8DF3\u8FC7\u91CD\u590D\u7684 ${type} \u6D88\u606F`);
-      return;
+    // 去重 (save=true 时)
+    if (save) {
+        const lastContent = type === 'user' ? lastUserCommand : lastAiContent;
+        if (lastContent && content === lastContent) {
+            console.log(`[addMessage] 跳过重复的 ${type} 消息`);
+            return;
+        }
+        if (type === 'user')
+            lastUserCommand = content;
+        else
+            lastAiContent = content;
     }
-    if (type === "user") lastUserCommand = content;
-    else lastAiContent = content;
-  }
-  const div = document.createElement("div");
-  div.className = `message message-${type}`;
-  let cleanContent = content;
-  if (type === "ai") {
-    cleanContent = cleanContent.replace(/<think>[\s\S]*?<\/think>/g, "");
-    const finalGenIdx = cleanContent.indexOf("<final gen>");
-    if (finalGenIdx >= 0) {
-      cleanContent = cleanContent.substring(0, finalGenIdx).trim();
+    const div = document.createElement('div');
+    div.className = `message message-${type}`;
+    // 2026-07-06: 非流式模式 — AI 完整响应含 <think>...</think> + 实际回复 + <final gen>
+    //   统一清洗: 去 think 块 (LLM 思考过程不渲染), 取 <final gen> 之前内容作为实际回复
+    let cleanContent = content;
+    if (type === 'ai') {
+        cleanContent = cleanContent.replace(/<think>[\s\S]*?<\/think>/g, '');
+        const finalGenIdx = cleanContent.indexOf('<final gen>');
+        if (finalGenIdx >= 0) {
+            cleanContent = cleanContent.substring(0, finalGenIdx).trim();
+        }
     }
-  }
-  const knownToolNames = ctx && ctx.knownToolNames || /* @__PURE__ */ new Set();
-  const segments = segmentChatReply(cleanContent, { knownToolNames });
-  if (segments.length === 0) {
-    return;
-  }
-  let thinkContainer = null;
-  let renderedAny = false;
-  for (const seg of segments) {
-    if (seg.type === "think" && seg.content) {
-      thinkContainer = buildThinkContainer(seg.content);
-      div.appendChild(thinkContainer);
-      renderedAny = true;
-    } else if (seg.type === "env_details" && seg.content) {
-      div.appendChild(buildEnvContainer(seg.content));
-      renderedAny = true;
-    } else if (seg.type === "text" && seg.content) {
-      if (thinkContainer) div.appendChild(thinkContainer);
-      thinkContainer = null;
-      div.appendChild(buildBubble(seg.content, type));
-      renderedAny = true;
-    } else if (seg.type === "final" && seg.content) {
-      if (thinkContainer) div.appendChild(thinkContainer);
-      thinkContainer = null;
-      const finalEl = buildBubble(seg.content, type);
-      finalEl.classList.add("bubble-final");
-      div.appendChild(finalEl);
-      renderedAny = true;
-    } else if (seg.type === "tool_call" && seg.tool) {
-      if (ctx && ctx.toolCallCallback) {
-        ctx.toolCallCallback(seg.tool, div);
-      }
-      renderedAny = true;
+    // 2026-07-01 (v0.2.6 前后端分离): 改用 chat-segmenter 纯函数切 LLM 输出.
+    //   之前 8 行正则漏 minimax <invoke> / Qwen function_calls / <tool_call> / {tool:..}.
+    //   单一来源: src/agents/chat-segmenter.ts (server + client 共享).
+    //   knownToolNames: 用 ctx 传入的注册表, fallback 空集 (不识别 tool_call 就 strip 不显示).
+    const knownToolNames = (ctx && ctx.knownToolNames) || new Set();
+    const segments = segmentChatReply(cleanContent, { knownToolNames });
+    // 没有可显示的 segment, 不上屏
+    if (segments.length === 0) {
+        return;
     }
-  }
-  if (!renderedAny) {
-    return;
-  }
-  const rawContent = segments.filter((s) => s.type === "text" || s.type === "final").map((s) => s.content || "").join("\n");
-  let timeLabel = "";
-  try {
-    if (timestamp !== void 0 && timestamp !== null) {
-      const d = timestamp instanceof Date ? timestamp : new Date(timestamp);
-      if (!isNaN(d.getTime())) {
-        timeLabel = d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
-      }
+    // 渲染各 segment (按 type 走不同容器)
+    let thinkContainer = null;
+    let renderedAny = false;
+    for (const seg of segments) {
+        if (seg.type === 'think' && seg.content) {
+            thinkContainer = buildThinkContainer(seg.content);
+            div.appendChild(thinkContainer);
+            renderedAny = true;
+        }
+        else if (seg.type === 'env_details' && seg.content) {
+            div.appendChild(buildEnvContainer(seg.content));
+            renderedAny = true;
+        }
+        else if (seg.type === 'text' && seg.content) {
+            if (thinkContainer)
+                div.appendChild(thinkContainer);
+            thinkContainer = null;
+            div.appendChild(buildBubble(seg.content, type));
+            renderedAny = true;
+        }
+        else if (seg.type === 'final' && seg.content) {
+            if (thinkContainer)
+                div.appendChild(thinkContainer);
+            thinkContainer = null;
+            // final 段渲染为特殊气泡 (顶部有标记, 表示 LLM 显式终止)
+            const finalEl = buildBubble(seg.content, type);
+            finalEl.classList.add('bubble-final');
+            div.appendChild(finalEl);
+            renderedAny = true;
+        }
+        else if (seg.type === 'tool_call' && seg.tool) {
+            // tool_call segment 不渲染文字 — 走 step-timeline (步骤状态条)
+            //   这里只记录到 ctx 让外层在 addMessage 后挂到 timeline
+            if (ctx && ctx.toolCallCallback) {
+                ctx.toolCallCallback(seg.tool, div);
+            }
+            renderedAny = true; // 即使没文字, tool_call 也算"有意义"
+        }
+    }
+    if (!renderedAny) {
+        return; // 没有渲染任何东西, 不上屏
+    }
+    // 纯文本用于复制按钮 — 现在从 segments 拼, 不再依赖 cleanContent 变量
+    const rawContent = segments
+        .filter(s => s.type === 'text' || s.type === 'final')
+        .map(s => s.content || '')
+        .join('\n');
+    // 时间 — 2026-07-15 修 Bug 2: 历史消息恢复时用历史 timestamp, 不传则用"现在"
+    let timeLabel = '';
+    try {
+        if (timestamp !== undefined && timestamp !== null) {
+            const d = timestamp instanceof Date ? timestamp : new Date(timestamp);
+            if (!isNaN(d.getTime())) {
+                timeLabel = d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+            }
+        }
+    }
+    catch { /* fallback below */ }
+    if (!timeLabel)
+        timeLabel = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+    const time = document.createElement('div');
+    time.className = 'time';
+    time.textContent = timeLabel;
+    // AI 消息操作按钮
+    if (type === 'ai') {
+        div.appendChild(buildMessageActions(div, rawContent, ctx));
+    }
+    // P0.5 反向引用
+    if (type === 'ai' && Array.isArray(usedJudgmentIds) && usedJudgmentIds.length > 0) {
+        const link = document.createElement('a');
+        link.className = 'used-judgments-link';
+        link.textContent = `📎 参考 ${usedJudgmentIds.length} 条原则`;
+        link.onclick = (e) => {
+            e.preventDefault();
+            if (typeof ctx.openJudgmentsModalWithFilter === 'function') {
+                ctx.openJudgmentsModalWithFilter(usedJudgmentIds);
+            }
+        };
+        div.appendChild(link);
+    }
+    // 2026-06-15: 每条 AI 消息挂一个空 step-timeline 占位 (用户决策)
+    //   后续 step_start/step_done 事件会通过 handleStepEvent 推入
+    if (type === 'ai' && msgContainer) {
+        mountStepTimeline(div, currentChannelId);
+        // 2026-07-20 Bug 1: AI 消息创建后回放此前缓冲的 step 事件
+        flushStepEventBuffer(currentChannelId, ctx);
+    }
+    div.appendChild(time);
+    if (msgContainer) {
+        msgContainer.appendChild(div);
+        scheduleScrollToBottom(msgContainer);
     }
-  } catch {
-  }
-  if (!timeLabel) timeLabel = (/* @__PURE__ */ new Date()).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
-  const time = document.createElement("div");
-  time.className = "time";
-  time.textContent = timeLabel;
-  if (type === "ai") {
-    div.appendChild(buildMessageActions(div, rawContent, ctx));
-  }
-  if (type === "ai" && Array.isArray(usedJudgmentIds) && usedJudgmentIds.length > 0) {
-    const link = document.createElement("a");
-    link.className = "used-judgments-link";
-    link.textContent = `\u{1F4CE} \u53C2\u8003 ${usedJudgmentIds.length} \u6761\u539F\u5219`;
-    link.onclick = (e) => {
-      e.preventDefault();
-      if (typeof ctx.openJudgmentsModalWithFilter === "function") {
-        ctx.openJudgmentsModalWithFilter(usedJudgmentIds);
-      }
-    };
-    div.appendChild(link);
-  }
-  if (type === "ai" && msgContainer) {
-    mountStepTimeline(div, currentChannelId);
-    flushStepEventBuffer(currentChannelId, ctx);
-  }
-  div.appendChild(time);
-  if (msgContainer) {
-    msgContainer.appendChild(div);
-    scheduleScrollToBottom(msgContainer);
-  }
 }
+// ---------------------------------------------------------------------------
+// 私有: think 折叠块
+// ---------------------------------------------------------------------------
 function buildThinkContainer(thinkContent) {
-  const container = document.createElement("div");
-  container.className = "think-container";
-  const toggle = document.createElement("div");
-  toggle.className = "think-toggle";
-  toggle.innerHTML = '\u{1F4AD} \u601D\u8003\u8FC7\u7A0B <span class="think-arrow">\u25B8</span>';
-  toggle.onclick = function() {
-    const details = container.querySelector(".think-content");
-    const arrow = toggle.querySelector(".think-arrow");
-    if (!details || !arrow) return;
-    if (details.style.display === "none") {
-      details.style.display = "block";
-      arrow.textContent = "\u25BE";
-    } else {
-      details.style.display = "none";
-      arrow.textContent = "\u25B8";
-    }
-  };
-  const content = document.createElement("div");
-  content.className = "think-content";
-  content.style.display = "none";
-  content.innerHTML = `<pre>${escapeHtml(thinkContent)}</pre>`;
-  container.appendChild(toggle);
-  container.appendChild(content);
-  return container;
+    const container = document.createElement('div');
+    container.className = 'think-container';
+    const toggle = document.createElement('div');
+    toggle.className = 'think-toggle';
+    toggle.innerHTML = '💭 思考过程 <span class="think-arrow">▸</span>';
+    toggle.onclick = function () {
+        const details = container.querySelector('.think-content');
+        const arrow = toggle.querySelector('.think-arrow');
+        if (!details || !arrow)
+            return;
+        if (details.style.display === 'none') {
+            details.style.display = 'block';
+            arrow.textContent = '▾';
+        }
+        else {
+            details.style.display = 'none';
+            arrow.textContent = '▸';
+        }
+    };
+    const content = document.createElement('div');
+    content.className = 'think-content';
+    content.style.display = 'none';
+    content.innerHTML = `<pre>${escapeHtml(thinkContent)}</pre>`;
+    container.appendChild(toggle);
+    container.appendChild(content);
+    return container;
 }
+// ---------------------------------------------------------------------------
+// 私有: environment_details 折叠块
+// ---------------------------------------------------------------------------
 function buildEnvContainer(envDetails) {
-  const container = document.createElement("div");
-  container.className = "env-container";
-  const toggle = document.createElement("div");
-  toggle.className = "env-toggle";
-  toggle.innerHTML = '\u2699\uFE0F \u73AF\u5883\u4FE1\u606F <span class="env-arrow">\u25B8</span>';
-  toggle.onclick = function() {
-    const details = container.querySelector(".environment-details");
-    const arrow = toggle.querySelector(".env-arrow");
-    if (!details || !arrow) return;
-    if (details.style.display === "none") {
-      details.style.display = "block";
-      arrow.textContent = "\u25BE";
-    } else {
-      details.style.display = "none";
-      arrow.textContent = "\u25B8";
-    }
-  };
-  const content = document.createElement("div");
-  content.className = "environment-details";
-  content.style.display = "none";
-  content.innerHTML = `<pre>${escapeHtml(envDetails)}</pre>`;
-  container.appendChild(toggle);
-  container.appendChild(content);
-  return container;
+    const container = document.createElement('div');
+    container.className = 'env-container';
+    const toggle = document.createElement('div');
+    toggle.className = 'env-toggle';
+    toggle.innerHTML = '⚙️ 环境信息 <span class="env-arrow">▸</span>';
+    toggle.onclick = function () {
+        const details = container.querySelector('.environment-details');
+        const arrow = toggle.querySelector('.env-arrow');
+        if (!details || !arrow)
+            return;
+        if (details.style.display === 'none') {
+            details.style.display = 'block';
+            arrow.textContent = '▾';
+        }
+        else {
+            details.style.display = 'none';
+            arrow.textContent = '▸';
+        }
+    };
+    const content = document.createElement('div');
+    content.className = 'environment-details';
+    content.style.display = 'none';
+    content.innerHTML = `<pre>${escapeHtml(envDetails)}</pre>`;
+    container.appendChild(toggle);
+    container.appendChild(content);
+    return container;
 }
+// ---------------------------------------------------------------------------
+// 私有: 气泡 (marked.parse 渲染)
+// ---------------------------------------------------------------------------
 function buildBubble(text, type) {
-  const bubble = document.createElement("div");
-  bubble.className = `bubble bubble-${type}`;
-  const marked = window.marked;
-  bubble.innerHTML = marked ? marked.parse(text) : escapeHtml(text);
-  return bubble;
+    const bubble = document.createElement('div');
+    bubble.className = `bubble bubble-${type}`;
+    // 安全降级: CDN 加载失败时 marked 是 escape 版本, 这里不需要二次 escape
+    // window.marked 在 ts 类型上不一定有, 用 any 兜底
+    const marked = window.marked;
+    bubble.innerHTML = marked ? marked.parse(text) : escapeHtml(text);
+    return bubble;
 }
+// ---------------------------------------------------------------------------
+// 私有: 消息操作按钮 (复制 / 重新回答 / 蒸馏为判断)
+// ---------------------------------------------------------------------------
 function buildMessageActions(div, rawContent, ctx) {
-  const actions = document.createElement("div");
-  actions.className = "message-actions";
-  const copyBtn = document.createElement("button");
-  copyBtn.className = "action-btn copy-btn";
-  copyBtn.innerHTML = copyIcon() + " \u590D\u5236";
-  copyBtn.title = "\u590D\u5236\u6D88\u606F";
-  copyBtn.onclick = () => {
-    navigator.clipboard.writeText(rawContent).then(() => {
-      copyBtn.innerHTML = checkIcon() + " \u5DF2\u590D\u5236";
-      setTimeout(() => {
-        copyBtn.innerHTML = copyIcon() + " \u590D\u5236";
-      }, 2e3);
-    });
-  };
-  actions.appendChild(copyBtn);
-  const saveJudgmentBtn = document.createElement("button");
-  saveJudgmentBtn.className = "action-btn save-as-judgment";
-  saveJudgmentBtn.title = "AI \u84B8\u998F\u4E3A 30-80 \u5B57\u5224\u65AD\u529B + \u81EA\u52A8\u6F14\u5316\u5BF9\u9F50";
-  saveJudgmentBtn.setAttribute("data-decision", rawContent.substring(0, 800));
-  if (ctx.currentChannelId) saveJudgmentBtn.setAttribute("data-channel-id", ctx.currentChannelId);
-  saveJudgmentBtn.innerHTML = shieldIcon() + " \u84B8\u998F\u4E3A\u5224\u65AD";
-  actions.appendChild(saveJudgmentBtn);
-  const regenBtn = document.createElement("button");
-  regenBtn.className = "action-btn regenerate-btn";
-  regenBtn.innerHTML = refreshIcon(false) + " \u91CD\u65B0\u56DE\u7B54";
-  regenBtn.title = "\u91CD\u65B0\u751F\u6210\u56DE\u590D";
-  regenBtn.onclick = () => {
-    regenBtn.innerHTML = refreshIcon(true) + " \u751F\u6210\u4E2D...";
-    regenBtn.disabled = true;
-    const messages = div.parentElement?.querySelectorAll(".message") || [];
-    let lastUserMsg = "";
-    for (let i = messages.length - 1; i >= 0; i--) {
-      const msg = messages[i];
-      if (msg.classList.contains("message-user")) {
-        const bubble = msg.querySelector(".bubble");
-        if (bubble) {
-          lastUserMsg = bubble.textContent || bubble.innerText || "";
-          break;
+    const actions = document.createElement('div');
+    actions.className = 'message-actions';
+    // 复制
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'action-btn copy-btn';
+    copyBtn.innerHTML = copyIcon() + ' 复制';
+    copyBtn.title = '复制消息';
+    copyBtn.onclick = () => {
+        navigator.clipboard.writeText(rawContent).then(() => {
+            copyBtn.innerHTML = checkIcon() + ' 已复制';
+            setTimeout(() => { copyBtn.innerHTML = copyIcon() + ' 复制'; }, 2000);
+        });
+    };
+    actions.appendChild(copyBtn);
+    // 蒸馏为判断
+    const saveJudgmentBtn = document.createElement('button');
+    saveJudgmentBtn.className = 'action-btn save-as-judgment';
+    saveJudgmentBtn.title = 'AI 蒸馏为 30-80 字判断力 + 自动演化对齐';
+    saveJudgmentBtn.setAttribute('data-decision', rawContent.substring(0, 800));
+    if (ctx.currentChannelId)
+        saveJudgmentBtn.setAttribute('data-channel-id', ctx.currentChannelId);
+    saveJudgmentBtn.innerHTML = shieldIcon() + ' 蒸馏为判断';
+    actions.appendChild(saveJudgmentBtn);
+    // 重新回答
+    const regenBtn = document.createElement('button');
+    regenBtn.className = 'action-btn regenerate-btn';
+    regenBtn.innerHTML = refreshIcon(false) + ' 重新回答';
+    regenBtn.title = '重新生成回复';
+    regenBtn.onclick = () => {
+        regenBtn.innerHTML = refreshIcon(true) + ' 生成中...';
+        regenBtn.disabled = true;
+        const messages = div.parentElement?.querySelectorAll('.message') || [];
+        let lastUserMsg = '';
+        for (let i = messages.length - 1; i >= 0; i--) {
+            const msg = messages[i];
+            if (msg.classList.contains('message-user')) {
+                const bubble = msg.querySelector('.bubble');
+                if (bubble) {
+                    lastUserMsg = bubble.textContent || bubble.innerText || '';
+                    break;
+                }
+            }
         }
-      }
-    }
-    fetch("/regenerate", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ channelId: ctx.currentChannelId, userMessage: lastUserMsg })
-    }).then((res) => {
-      if (!res.ok) throw new Error("regenerate failed");
-    }).catch((err) => {
-      console.error("\u91CD\u65B0\u751F\u6210\u5931\u8D25:", err);
-      regenBtn.innerHTML = refreshIcon(false) + " \u5931\u8D25";
-      setTimeout(() => {
-        regenBtn.innerHTML = refreshIcon(false) + " \u91CD\u65B0\u56DE\u7B54";
-        regenBtn.disabled = false;
-      }, 2e3);
-    });
-  };
-  actions.appendChild(regenBtn);
-  return actions;
-}
-function copyIcon() {
-  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
-}
-function checkIcon() {
-  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
-}
-function shieldIcon() {
-  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg>';
-}
-function refreshIcon(spin = false) {
-  const cls = spin ? ' class="spin"' : "";
-  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"${cls}><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>`;
+        fetch('/regenerate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ channelId: ctx.currentChannelId, userMessage: lastUserMsg })
+        }).then(res => {
+            if (!res.ok)
+                throw new Error('regenerate failed');
+        }).catch(err => {
+            console.error('重新生成失败:', err);
+            regenBtn.innerHTML = refreshIcon(false) + ' 失败';
+            setTimeout(() => {
+                regenBtn.innerHTML = refreshIcon(false) + ' 重新回答';
+                regenBtn.disabled = false;
+            }, 2000);
+        });
+    };
+    actions.appendChild(regenBtn);
+    return actions;
 }
-function handleStreamTokenEvent(data, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
-  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
-  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
-  const currentChannelId = ctx.currentChannelId;
-  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-  if (!container) return;
-  const delta = data.content || "";
-  if (!delta) return;
-  if (!streamingMessageEl || !streamingMessageEl.isConnected) {
-    streamingMessageEl = document.createElement("div");
-    streamingMessageEl.className = "message message-ai message-streaming";
-    streamingTextNode = document.createTextNode("");
-    streamingMessageEl.appendChild(streamingTextNode);
-    streamingText = "";
-    mountStepTimeline(streamingMessageEl, currentChannelId);
-    container.appendChild(streamingMessageEl);
-    flushStepEventBuffer(currentChannelId, ctx);
-    if (typeof ctx.setTimelineState === "function") {
-      ctx.setTimelineState("streaming");
+function copyIcon() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>'; }
+function checkIcon() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>'; }
+function shieldIcon() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg>'; }
+function refreshIcon(spin = false) { const cls = spin ? ' class="spin"' : ''; return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"${cls}><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>`; }
+// ---------------------------------------------------------------------------
+// 流式 token 处理 (textNode 增量, 不重排)
+// ---------------------------------------------------------------------------
+export function handleStreamTokenEvent(data, ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
+    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
+    const messagesContainers = ctx.messagesContainers || new Map();
+    const currentChannelId = ctx.currentChannelId;
+    const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+    if (!container)
+        return;
+    const delta = data.content || '';
+    if (!delta)
+        return;
+    if (!streamingMessageEl || !streamingMessageEl.isConnected) {
+        // 新建流式消息
+        streamingMessageEl = document.createElement('div');
+        streamingMessageEl.className = 'message message-ai message-streaming';
+        streamingTextNode = document.createTextNode('');
+        streamingMessageEl.appendChild(streamingTextNode);
+        streamingText = '';
+        // 2026-06-15: 流式期间也挂一个空 step-timeline 占位 — step_start/done/error 事件
+        //   走 handleStepEvent, getStepTimeline 找到这个流式元素内的 timeline 推入
+        mountStepTimeline(streamingMessageEl, currentChannelId);
+        container.appendChild(streamingMessageEl);
+        // 2026-07-21: 流式元素创建后立即回放缓冲的 step 事件, 让用户尽早看到 tool call 状态
+        //   必须先 appendChild 让元素 isConnected=true, 否则 flushStepEventBuffer → handleStepEvent
+        //   会因 streamingMessageEl.isConnected===false 而丢弃缓冲中的 step.
+        flushStepEventBuffer(currentChannelId, ctx);
+        // B-3: 首个 token 来时切状态到 streaming (蓝徽), 提示用户 panel 在工作
+        if (typeof ctx.setTimelineState === 'function') {
+            ctx.setTimelineState('streaming');
+        }
+        scheduleScrollToBottom(container);
+    }
+    // 2026-07-06: pivot loop 现在用 stream: false, 每次 emit type='token' + content=reply.substring(0, 100)
+    //   也就是说每个 token event 实际是"LLM 这一轮回复的前 100 字符", 不是真正的 token 增量.
+    //   多次 emit 会让 streamingText 累积成 "片段1 + 片段2 + ..." 而不是最终回复.
+    //   改成 "replace last segment" 语义: streamingText 始终是 LLM 最新一轮的回执的前缀.
+    //   这样 finalize 出来的 ai message bubble 就是当前最完整的那一轮 (通常是最新的, pivot loop 最后一次 reply),
+    //   用户看到的就是 LLM 真正的最终回答, 不是堆叠的中间产物.
+    if (data.streamType === 'token') {
+        // 把 streamingText 用 nodeValue 整体替换, 不累加
+        if (streamingTextNode)
+            streamingTextNode.nodeValue = delta;
+        streamingText = delta;
+    }
+    else {
+        // thinking 类的保持原本的 append 语义 (罕见, 留个口子)
+        if (streamingTextNode)
+            streamingTextNode.appendData(delta);
+        streamingText += delta;
     }
     scheduleScrollToBottom(container);
-  }
-  if (data.streamType === "token") {
-    if (streamingTextNode) streamingTextNode.nodeValue = delta;
-    streamingText = delta;
-  } else {
-    if (streamingTextNode) streamingTextNode.appendData(delta);
-    streamingText += delta;
-  }
-  scheduleScrollToBottom(container);
 }
-function finalizeTimelineAsMessage(ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
-  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
-  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
-  const currentChannelId = ctx.currentChannelId;
-  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-  if (streamingText.trim().length > 0) {
-    const oldStreamingEl = streamingMessageEl;
-    if (oldStreamingEl && oldStreamingEl.parentNode) {
-      oldStreamingEl.parentNode.removeChild(oldStreamingEl);
+// ---------------------------------------------------------------------------
+// 流式消息 finalize (done 事件): 移除流式元素, 走 addMessage 走 marked.parse
+// ---------------------------------------------------------------------------
+export function finalizeTimelineAsMessage(ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
+    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
+    const messagesContainers = ctx.messagesContainers || new Map();
+    const currentChannelId = ctx.currentChannelId;
+    const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+    if (streamingText.trim().length > 0) {
+        // 2026-06-15: finalize 时把 streaming 内的 step-timeline 整体搬到新建的正式 AI message 内
+        //   addMessage 会建一个新 timeline 占位, 先记下 streaming 的引用, addMessage 后再迁移
+        //   避免节点从 0 重渲 (10+ 步的任务, 重渲闪烁会很厉害)
+        const oldStreamingEl = streamingMessageEl;
+        if (oldStreamingEl && oldStreamingEl.parentNode) {
+            oldStreamingEl.parentNode.removeChild(oldStreamingEl);
+        }
+        addMessage(streamingText, 'ai', true, container, ctx.lastUsedJudgmentIds || [], ctx);
+        if (oldStreamingEl && container) {
+            // 找刚 addMessage 创建的最后一条 ai message
+            const newAiMsg = container.querySelector('.message-ai:last-of-type');
+            if (newAiMsg && newAiMsg !== oldStreamingEl) {
+                migrateStepTimeline(oldStreamingEl, newAiMsg);
+            }
+        }
     }
-    addMessage(streamingText, "ai", true, container, ctx.lastUsedJudgmentIds || [], ctx);
-    if (oldStreamingEl && container) {
-      const newAiMsg = container.querySelector(".message-ai:last-of-type");
-      if (newAiMsg && newAiMsg !== oldStreamingEl) {
-        migrateStepTimeline(oldStreamingEl, newAiMsg);
-      }
+    // 重置流式状态
+    streamingMessageEl = null;
+    streamingTextNode = null;
+    streamingText = '';
+    // B-3: finalize 时切 done 状态 (绿徽), hide 延迟由 client.js 的 hideTimelinePanel 统一管
+    if (typeof ctx.setTimelineState === 'function') {
+        ctx.setTimelineState('done');
     }
-  }
-  streamingMessageEl = null;
-  streamingTextNode = null;
-  streamingText = "";
-  if (typeof ctx.setTimelineState === "function") {
-    ctx.setTimelineState("done");
-  }
 }
-function handleStepEvent(data, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
-  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
-  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
-  const currentChannelId = ctx.currentChannelId;
-  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-  if (!container) return;
-  if (!data || !data.type) return;
-  let target = streamingMessageEl && streamingMessageEl.isConnected ? streamingMessageEl : null;
-  if (!target) {
-    if (currentChannelId) {
-      const buf = stepEventBuffer.get(currentChannelId) || [];
-      buf.push(data);
-      stepEventBuffer.set(currentChannelId, buf);
+export function handleStepEvent(data, ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
+    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
+    const messagesContainers = ctx.messagesContainers || new Map();
+    const currentChannelId = ctx.currentChannelId;
+    const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+    if (!container)
+        return;
+    if (!data || !data.type)
+        return;
+    // 1. 优先用正在流式的元素 (流式期间能即时看到)
+    let target = streamingMessageEl && streamingMessageEl.isConnected
+        ? streamingMessageEl
+        : null;
+    // 2. 无流式元素 → 缓冲等待 stream token 或 addMessage 后回放
+    //    (2026-07-21: 不再回退到 welcome 等旧 AI 消息, 避免 step 贴错 message)
+    if (!target) {
+        if (currentChannelId) {
+            const buf = stepEventBuffer.get(currentChannelId) || [];
+            buf.push(data);
+            stepEventBuffer.set(currentChannelId, buf);
+        }
+        return;
     }
-    return;
-  }
-  if (!target) return;
-  const timeline = getStepTimeline(target);
-  if (!timeline) return;
-  pushStepToTimeline(timeline, data.type, {
-    tool: data.tool || "unknown",
-    args: data.args,
-    success: data.success,
-    output: data.output,
-    error: data.error
-  });
+    if (!target)
+        return;
+    const timeline = getStepTimeline(target);
+    if (!timeline)
+        return;
+    pushStepToTimeline(timeline, data.type, {
+        tool: data.tool || 'unknown',
+        args: data.args,
+        success: data.success,
+        output: data.output,
+        error: data.error,
+    });
 }
-function flushStepEventBuffer(channelId, ctx) {
-  if (!channelId) return;
-  const buf = stepEventBuffer.get(channelId);
-  if (!buf || buf.length === 0) return;
-  stepEventBuffer.delete(channelId);
-  for (const evt of buf) {
-    handleStepEvent(evt, ctx);
-  }
+// 2026-07-20 Bug 1: 回放缓冲的 step 事件到刚创建的 AI 消息
+export function flushStepEventBuffer(channelId, ctx) {
+    if (!channelId)
+        return;
+    const buf = stepEventBuffer.get(channelId);
+    if (!buf || buf.length === 0)
+        return;
+    stepEventBuffer.delete(channelId);
+    for (const evt of buf) {
+        handleStepEvent(evt, ctx);
+    }
 }
-function resetRendererState() {
-  streamingMessageEl = null;
-  streamingTextNode = null;
-  streamingText = "";
-  lastUserCommand = "";
-  lastAiContent = "";
-  if (scrollToBottomTimer) {
-    clearTimeout(scrollToBottomTimer);
-    scrollToBottomTimer = null;
-  }
+// ---------------------------------------------------------------------------
+// 重置模块状态 (切频道时调用)
+// ---------------------------------------------------------------------------
+export function resetRendererState() {
+    streamingMessageEl = null;
+    streamingTextNode = null;
+    streamingText = '';
+    lastUserCommand = '';
+    lastAiContent = '';
+    if (scrollToBottomTimer) {
+        clearTimeout(scrollToBottomTimer);
+        scrollToBottomTimer = null;
+    }
 }
-const MessageRenderer = {
-  addMessage,
-  handleStreamTokenEvent,
-  finalizeTimelineAsMessage,
-  handleStepEvent,
-  flushStepEventBuffer,
-  escapeHtml,
-  getMessagesContainerForCurrent,
-  resetRendererState
+export const MessageRenderer = {
+    addMessage,
+    handleStreamTokenEvent,
+    finalizeTimelineAsMessage,
+    handleStepEvent,
+    flushStepEventBuffer,
+    escapeHtml,
+    getMessagesContainerForCurrent,
+    resetRendererState,
 };
-if (typeof window !== "undefined") {
-  window.MR = MessageRenderer;
+if (typeof window !== 'undefined') {
+    window.MR = MessageRenderer;
 }
-export {
-  MessageRenderer,
-  addMessage,
-  escapeHtml,
-  finalizeTimelineAsMessage,
-  flushStepEventBuffer,
-  getMessagesContainerForCurrent,
-  handleStepEvent,
-  handleStreamTokenEvent,
-  hasStreamingText,
-  injectRecoveredText,
-  replaceStreamingText,
-  resetRendererState
-};