magic-agent 1.0.3 → 1.0.49

package/client-ui/shared/conv/03-chat-message.js

@@ -0,0 +1,1561 @@
+/* ===== 运行态注册表（2026-09-18 重构）=====
+   用户报障：「任务列表点击显示回答生成中 不能切换 为什么呢？肯定可以切换另1个会话去啊」。
+   根因：流式是**增量写 DOM**（qaRenderAnswer / appendText / qaRenderDone 都往画布里写），
+   而画布只有一份 #qa-stream —— 生成中一切换，这一轮的增量就会写进**另一个会话**的画布，
+   所以老代码只能在切换处硬拦（`if(qaRunning) toast("回答生成中，稍候再切换")`）。
+   现在改成「**画布跟着会话走**」：
+     · 一次 run = 一个条目，带自己的渲染句柄 h / 工具卡表 / 委派卡表 / 耗时 / 后台容器 holder；
+     · 切走 = 把这一轮的画布**整份摘到 holder**（节点不销毁，后台增量继续写进它们），
+       切回来 = 再挂回 #qa-stream（内容比快照新，接得上正在跑的那一轮）；
+     · 事件按 rid 路由到对应 run（不再有「全局 qaRid + 全局 _cur」那套单例）。
+   ⚠️ 但「同时只跑一轮」这条**没有变**（用户 2026-09-18 定稿「对话中不允许上一条没结束
+     直接输入下1个」+ 主进程 `desk:ask` 是单会话槽：新请求会先杀掉旧的）。
+     所以撰写区仍然全局锁死，只是**切换与查看不再被拦**。 */
+const qaRuns = new Map();                       // rid → run
+function qaRunOfTask(id){ for(const r of qaRuns.values()) if(r.taskId === id) return r; return null; }
+function qaTaskRunning(id){ return !!qaRunOfTask(id); }
+/** 这一轮该往哪儿落笔：正常 = 可见画布 #qa-stream；被切到后台 = 自己的 holder */
+function qaRunHost(run){ return (run && run.holder) ? run.holder : $("#qa-stream"); }
+/** 摘掉画布里的「生成中」胶囊行（`.qa-run`）—— 一轮跑完 / 被停 / 快照恢复时都要摘。
+ *  为什么必须显式摘：`.qa-run` 是**行**不是状态，它不会自己消失。收尾路径漏一次，
+ *  这枚写着「生成中」的胶囊就永远钉在画布上，下一次发送再长出一枚 →
+ *  用户看到的「两个生成中」（2026-09-18 报障）。收尾统一走 qaRunEnd 收口。 */
+function qaDropRunPills(host){
+  const s = host || $("#qa-stream"); if(!s || !s.querySelectorAll) return;
+  s.querySelectorAll(".qa-run").forEach(el=>el.remove());
+}
+/** 一轮收尾（成功 / 失败 / 被停）的统一收口：关掉流式光标 + 摘掉「生成中」胶囊。
+ *  ⚠️ 六个收尾点（end / turn_end / error / 调用失败 ×2 / 点停止）以前各写一遍
+ *  `h.finish(); h.run.remove()`，**点停止那条漏写** → 胶囊留在画布上（见上）。
+ *  现在只留这一个入口，漏不掉。入参是 qaRenderAnswer 返回的渲染句柄 `h`。 */
+function qaRunEnd(h){
+  if(!h) return;
+  if(typeof h.finish === "function") h.finish();      // 尾部 pending 落盘 + 收掉 ▍光标
+  if(h.run && h.run.parentNode) h.run.remove();       // 摘掉这一轮的「生成中」胶囊行
+}
+/* 正在为「后台 run」写画布（它不在屏幕上）→ 别去滚动可见画布：
+   否则前台那条会话会被后台的增量不停拽到底部（用户会看到「我这条怎么自己跳」）。 */
+let qaPaintBg = false;
+function qaSetChatMode(on){
+  const v = $("#view-chat"); if(v) v.classList.toggle("chat-mode", !!on);
+}
+function qaHasContent(){
+  const s = $("#qa-stream");
+  /* `.qa-hist-note`（2026-09-22）也算「有内容」：历史找不回来时画布上那条**说明**
+     是这条对话唯一的落脚点 —— 不算它就会退回「描述你要做的事」那种新任务引导，
+     看起来像「历史被清空了、这是一条新对话」（用户报障的观感就是这么来的）。 */
+  return !!(s && !s.hidden && s.querySelector(".qa-msg, .qa-hist-note"));
+}
+function qaSyncChatMode(){ qaSetChatMode(qaHasContent()); qaDotsSync(); }
+/* 用户**离开底部**（点圆点跳转 / 自己滚上去看历史）→ 后续流式增量不再把他拽回底部。
+   ⚠️ 2026-10-20 用户：「滚动不了」—— 旧口径只认圆点跳转，手动上滚仍被每条增量拽回底部，
+     长答复流式期间根本没法看上面。现在以「是否贴近底部」为准（见 qaDotsBind 的 scroll 监听）。
+   回到底部 / 发新消息即复位。 */
+let qaUserAway = false;
+function qaNearBottom(s){ return !!s && (s.scrollHeight - s.scrollTop - s.clientHeight) < 24; }
+function qaScrollIntoView(){
+  if(qaPaintBg) return;                          // 后台 run 的增量不许拽动前台画布（见 qaPaintBg）
+  if(qaUserAway) return;                         // 用户跳上去看历史了，别抢他的滚动位置
+  const s = $("#qa-stream"); if(!s) return;
+  s.scrollTop = s.scrollHeight;   // 卡片固定撑满、自身即滚动容器（滚动条已隐藏），永远贴底
+}
+/** 切会话时把「用户离开底部」复位（2026-10-20）：`qaUserAway` 是**画布级**状态，而画布只有一份。
+ *  在 A 里滚上去看历史，再切到 B，若不复位，B 打开时就停在顶部（看的是旧内容中间），
+ *  而不是它最新的那条消息。宿主切换会话时调用（见 qaTaskSwitch）。 */
+function qaScrollReset(){ qaUserAway = false; }
+
+/* ---------- 快速回话跳转（2026-10-12 用户：「增加一个快速跳转回话的功能 用户1个问题1个圆点」）----------
+   对话流左侧一条竖排圆点轨：**一个用户提问一枚圆点** —— 数的就是流里那些 `.qa-msg.qa-mine`
+   （自己说的话），引擎回答 / 机器侧 trace / 收尾行都不算，所以圆点数 = 你问过几轮。
+   点一枚 → 平滑滚到那一轮（那一轮的用户气泡贴到画布顶），并把它点亮；滚动时高亮跟着走。
+   ⚠️ 圆点里存的是**消息节点引用**：快照恢复（`innerHTML = snapshot`）会把节点整份换掉，
+      所以刷新时按节点身份比对，换了就整体重建（见 qaDotsSync）。
+   ⚠️ 只有 1 轮提问不显示（一条圆点没有跳转的意义）。
+   ⚠️ 最多画 10 个标记（2026-10-16 用户：「原点超过10个之后开始省略中间几个 按照最多保留10个
+      显示的方式控制」）：
+        · ≤10 轮：一轮一枚；
+        · 11–19 轮：首 5 + 一根省略线 + 末 5（省略线只是占位，不可点）；
+        · ≥20 轮：等距抽 10 枚（首尾必取，每枚都指向真实轮号）。 */
+const QA_DOTS_MIN = 2;
+const QA_DOTS_MAX = 10;
+const QA_DOTS_STRIDE_FROM = 20;
+/** 选哪些轮画圆点（0 基真实轮号）+ 省略线的插入位（-1 = 没有省略线）。 */
+function qaDotsPick(n){
+  if(n <= QA_DOTS_MAX) return { picks: Array.from({ length: n }, (_, i)=> i), gap: -1 };
+  if(n < QA_DOTS_STRIDE_FROM){
+    const half = QA_DOTS_MAX / 2, picks = [];
+    for(let i = 0; i < half; i++) picks.push(i);
+    for(let i = n - half; i < n; i++) picks.push(i);
+    return { picks, gap: half };                    // 省略线插在首段之后
+  }
+  const picks = [];
+  for(let i = 0; i < QA_DOTS_MAX; i++) picks.push(Math.round(i * (n - 1) / (QA_DOTS_MAX - 1)));
+  return { picks, gap: -1 };
+}
+function qaDotsSync(){
+  const rail = $("#qa-dots"), s = $("#qa-stream");
+  if(!rail || !s) return;
+  const mines = [...s.querySelectorAll(".qa-msg.qa-mine")];
+  if(mines.length < QA_DOTS_MIN){
+    rail.hidden = true; rail.innerHTML = "";
+    rail.__dots = null; rail.__gapEl = null; rail.__gapRange = null; rail.__mines = null;
+    return;
+  }
+  const { picks, gap } = qaDotsPick(mines.length);
+  const dots = rail.__dots;
+  /* 抽到的轮号、节点身份、省略位都一致 → 不重建（重建会让 hover / 焦点在流式期间不停丢） */
+  const same = dots && dots.length === picks.length && rail.__gapAt === gap
+    && dots.every((d, k)=> d.idx === picks[k] && d.msg === mines[picks[k]]);
+  if(!same){
+    rail.innerHTML = "";
+    rail.__mines = mines;
+    rail.__gapAt = gap;
+    rail.__dots = [];
+    rail.__gapEl = null;
+    rail.__gapRange = null;
+    picks.forEach((idx, k)=>{
+      if(k === gap){
+        const from = picks[k - 1] + 1, to = picks[k] - 1;
+        const g = document.createElement("span");
+        g.className = "qa-dotgap";
+        g.title = "中间省略 " + (to - from + 1) + " 轮（第 " + (from + 1) + "–" + (to + 1) + " 轮）";
+        rail.appendChild(g);
+        rail.__gapEl = g;
+        rail.__gapRange = [from, to];
+      }
+      const msg = mines[idx];
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "qa-dot";
+      const t = (msg.querySelector(".qa-t") || {}).textContent || "";
+      b.title = "第 " + (idx + 1) + " 轮 · " + (t.replace(/\s+/g, " ").trim().slice(0, 60) || "（无正文）");
+      b.setAttribute("aria-label", b.title);
+      b.onclick = ()=> qaDotsJump(idx);
+      rail.appendChild(b);
+      rail.__dots.push({ msg, el: b, idx });
+    });
+  }
+  rail.hidden = false;
+  qaDotsMark();
+}
+/** 点亮「当前那一轮」，优先级从高到低：
+ *  ① `rail.__pin` —— 用户**刚点过**的那一轮（他明确选了这个）；手动滚动（滚轮 / 触摸）时清掉；
+ *  ② 贴在底部 → 最新那一轮（在底部看的就是最新内容；末轮很短时靠它兜住，
+ *     否则「顶线那一轮」会判成上一轮）；
+ *  ③ 否则 → 画布顶部落在哪一轮里（该轮气泡已滚过顶线、下一轮还没到）。 */
+function qaDotsMark(){
+  const rail = $("#qa-dots"), s = $("#qa-stream");
+  if(!rail || !s || rail.hidden) return;
+  const dots = rail.__dots || [], mines = rail.__mines || [];
+  if(!dots.length || !mines.length) return;
+  /* cur 恒为**真实轮号**（0 基）：圆点可能只是抽样出来的，不能拿圆点下标当轮号。 */
+  let cur = 0;
+  if(rail.__pin != null && rail.__pin < mines.length){
+    cur = rail.__pin;
+  }else if(qaNearBottom(s)){
+    cur = mines.length - 1;
+  }else{
+    const top = s.getBoundingClientRect().top;
+    mines.forEach((msg, i)=>{ if(msg.isConnected && msg.getBoundingClientRect().top - top <= 20) cur = i; });
+  }
+  /* 当前轮落在省略段里 → 只点亮那根省略线，不硬点某一枚圆点 */
+  const inGap = !!(rail.__gapEl && rail.__gapRange && cur >= rail.__gapRange[0] && cur <= rail.__gapRange[1]);
+  if(rail.__gapEl) rail.__gapEl.classList.toggle("on", inGap);
+  if(inGap){
+    dots.forEach(d=> d.el.classList.remove("on"));
+    return;
+  }
+  /* 抽样轮（≥20 轮）里当前轮可能没有圆点 → 点亮它之前最近的那一枚 */
+  let lit = dots.find(d=> d.idx === cur);
+  if(!lit) for(const d of dots){ if(d.idx <= cur) lit = d; }
+  dots.forEach(d=> d.el.classList.toggle("on", d === lit));
+}
+/** 跳到第 i 轮（0 基）：**瞬时**滚到那一轮的用户气泡贴顶，并闪一下。
+ *  ⚠️ 不用平滑滚动（2026-10-12 用户：「点击原点 现在跳转太慢」）：平滑滚动在长会话里要滚好几屏，
+ *     距离越远动画越久 —— 点一枚圆点却要等近一秒才到位。这里直接 `behavior:"instant"` 落位。
+ *  ⚠️ 落位后给那一轮**闪一下**（见 qaDotsFlash）：跳过去是瞬移，没有过程可看，
+ *     得给一个「到你眼前了」的落点反馈（与左栏需求跳转那枚 `tk-flash` 同一套语言）。
+ *  置 `qaUserAway` —— 这一跳是**用户的意图**，不该被后续流式增量一秒拽回底部。 */
+function qaDotsJump(i){
+  const rail = $("#qa-dots"), s = $("#qa-stream");
+  const msg = rail && rail.__mines && rail.__mines[i];
+  if(!msg || !s || !msg.isConnected) return;
+  qaUserAway = true;
+  rail.__pin = i;                                // 这一枚点住：滚不到位（已是底/内容太短）也照他点的亮
+  const delta = msg.getBoundingClientRect().top - s.getBoundingClientRect().top;
+  s.scrollTo({ top: Math.max(0, s.scrollTop + delta - 10), behavior: "instant" });
+  qaDotsFlash(msg);
+  qaDotsMark();
+}
+/** 让跳过去的那一轮闪一下（1.2s 自动褪去）。连点同一枚也要重播：先摘类、强制回流、再加回去。 */
+let qaDotsFlashTimer = 0;
+function qaDotsFlash(msg){
+  if(!msg) return;
+  msg.classList.remove("qa-jump");
+  void msg.offsetWidth;                          // 强制回流（不读宽度的话浏览器会合并掉这次类变更）
+  msg.classList.add("qa-jump");
+  if(qaDotsFlashTimer) clearTimeout(qaDotsFlashTimer);
+  qaDotsFlashTimer = setTimeout(()=>{ if(msg.isConnected) msg.classList.remove("qa-jump"); }, 1300);
+}
+/** 只绑一次：画布滚动（更新高亮 + 回到底部时复位 qaUserAway）＋ 流内容变化（增删圆点）。
+ *  ⚠️ MutationObserver 只盯 childList（不盯 subtree）：圆点数只跟顶层消息有关，
+ *     正文/工具卡内部怎么长都不影响 —— 少一层回调，流式期间也不至于每笔都刷。 */
+function qaDotsBind(){
+  const s = $("#qa-stream");
+  if(!s || s.dataset.dotsBound === "1") return;
+  s.dataset.dotsBound = "1";
+  let raf = 0;
+  const kick = ()=>{ if(raf) return; raf = requestAnimationFrame(()=>{ raf = 0; qaDotsSync(); }); };
+  s.addEventListener("scroll", ()=>{
+    /* 贴近底部 → 恢复「贴底」跟随；离开底部（手动上滚、点圆点、翻历史）→ 停止跟随，
+       否则流式每个增量都把用户拽回底部（2026-10-20「滚动不了」）。 */
+    qaUserAway = !qaNearBottom(s);
+    qaDotsMark();
+  }, { passive: true });
+  /* 真人滚动手势 → 放掉「刚点过的那一轮」，高亮重新跟着视口走
+     （只认滚轮 / 触摸：平滑滚动的 scroll 事件不算，否则跳转自己就把 pin 冲掉了）。
+     ⚠️ 上滚手势在这里**立刻**置 `qaUserAway`（2026-10-20）：scroll 事件要到下一帧才来，
+        流式增量却可能在这之前就贴底 —— 只靠 scroll 监听仍有「刚滚上去又被拽回」的竞态。 */
+  const unpin = ()=>{ const r = $("#qa-dots"); if(r) r.__pin = null; };
+  s.addEventListener("wheel", (ev)=>{
+    if(ev && ev.deltaY < 0 && !qaNearBottom(s)) qaUserAway = true;
+    unpin(); qaDotsMark();
+  }, { passive: true });
+  s.addEventListener("touchstart", ()=>{ unpin(); qaDotsMark(); }, { passive: true });
+  new MutationObserver(kick).observe(s, { childList: true });
+  window.addEventListener("resize", kick);
+  qaDotsSync();
+}
+/* ── 头像的两个**可覆盖默认值**（2026-10-17）────────────────────────────
+   它们是「内核有默认、宿主可在加载后覆盖」的那种符号，**不是**必须实现品：
+     · QA_BOT_AVATAR_SRC —— bot 头像的图片来源。默认沿用 magic-test 工作台那张应用图标；
+       宿主在自己的适配层里赋空串 = 「我没有这张图」→ 改用中性机器人头（见 qaBotAvatarHtml）。
+     · QA_USER_INITIAL   —— 用户头像那个字。默认空 → 取 `#nu-name` 首字，取不到用「我」。
+   ⚠️ 为什么写成 `var`：这样装配契约（tests/check-conv-shards.mjs）看得见它们由内核声明，
+     不会把它们当成「宿主必须提供」的符号 —— 但**默认值仍可在下游被覆盖**（经典脚本，
+     顶层 var 就是 window 上的属性，宿主适配层晚于内核加载，赋一次就生效）。 */
+var QA_BOT_AVATAR_SRC = 'assets/icon.png';
+var QA_USER_INITIAL = '';
+
+/** 对话头像（用户 2026-09-17：「用户因为没用头像应该显示一个1个超，bot这边应该用现在的
+ *  应用图标大喵标识」）：
+ *    · 用户侧没头像 → 显示 1 个字 = 左下角显示名的首字（「超哥」→「超」，取不到就「超」）；
+ *    · bot 侧 → 当前应用图标 assets/icon.png（大喵）；
+ *    · **审核用户**（2026-09-20 加）→ 一枚「审」字头像（琥珀底），与作者、引擎都区分开 ——
+ *      它代表的是「审查轮的结论说话人」，不是需求作者本人（用户原话：
+ *      「验证不通过的返回建议 再代表审核用户发送到对话中」）。
+ *  实时渲染（qaRenderMine / qaRenderAnswer）与派发快照（qaReqConvMsg）共用这一份标记，
+ *  否则快照里的头像会跟实时那份走形。 */
+function qaUserInitial(){
+  const el = $("#nu-name");
+  const nm = ((el && el.textContent) || "").trim();
+  if(nm) return nm.slice(0, 1);
+  /* 取不到显示名时：宿主可以给 `QA_USER_INITIAL`（**可选**符号，见 shared/conv/README.md）；
+     都没有就退到「我」—— ⚠️ 不要退到工作台那位用户的姓名首字：那是别人，
+     手机上顶着别人的名字会让人以为「这条是我发的 / 这是谁」（2026-10-17）。 */
+  const given = (typeof QA_USER_INITIAL === "string" && QA_USER_INITIAL) ? QA_USER_INITIAL : "";
+  return (given || "我").slice(0, 1);
+}
+/* **数字分身的头像图标**（2026-09-21 用户：「应该使用1个机器人图标头像吧」）：
+   一枚简笔机器人头 —— 天线 + 圆角方脸 + 两只眼 + 一道嘴 + 两侧耳线；`currentColor` 上色，
+   颜色与底由 CSS 给（`.qa-av-sim`，朱砂实底 + 白线）。
+   为什么用机器人图标而不是「分」字：它是**一个引擎在演人**，机器人头一眼说明「这不是真人」；
+   而「分」字第一眼看不出是什么，还得配说明。 */
+const QA_AV_SIM_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+  + '<path d="M12 6.7V4.5"/><circle cx="12" cy="3.3" r="1.15" fill="currentColor" stroke="none"/>'
+  + '<rect x="4.7" y="6.7" width="14.6" height="11.9" rx="3.5"/>'
+  + '<path d="M3.4 11.6v2.6M20.6 11.6v2.6"/>'
+  + '<circle cx="9.4" cy="11.9" r="1.25" fill="currentColor" stroke="none"/>'
+  + '<circle cx="14.6" cy="11.9" r="1.25" fill="currentColor" stroke="none"/>'
+  + '<path d="M9.7 15.6h4.6"/></svg>';
+
+function qaAvatarHtml(role){
+  if(role === "mine") return `<span class="qa-av qa-av-txt" aria-hidden="true">${escHtml(qaUserInitial())}</span>`;
+  if(role === "review") return `<span class="qa-av qa-av-txt qa-av-rev" aria-hidden="true">审</span>`;
+  /* **数字分身**（2026-09-21 用户：「数字分身在右边显示专门的头像即可 不需要标注1个模拟用户的标签」→
+     「应该使用1个机器人图标头像吧」）：它演的是用户，但不是用户本人 —— 所以既不复用用户头像
+     （那会让人以为是我自己发的），也不只挂一枚「模拟用户」小标（标签挡在气泡里，读起来像注释）；
+     给它一枚**自己的**机器人头像（同上 QA_AV_SIM_SVG）。
+     ⚠️ 与「审」同一条做法：头像由这里统一给，别在业务代码里手搓 span。 */
+  if(role === "sim") return `<span class="qa-av qa-av-sim" aria-hidden="true">${QA_AV_SIM_SVG}</span>`;
+  return qaBotAvatarHtml();
+}
+/** bot 一侧的头像：宿主给 `QA_BOT_AVATAR_SRC` 就用它（**可选**符号），没给就退到
+ *  magic-test 工作台那张应用图标 `assets/icon.png`（那边一直是这个路径，不动它）。
+ *  ⚠️ 为什么要有这层：组件两端的资产目录里**没有** `assets/icon.png`（那边只有字体文件），
+ *     于是移动端每条助手消息的左上角都是一枚**裂图**（2026-10-17 用户在截图里看到的就是它）。
+ *     宿主把它给成空串 = 「我没有这张图」→ 走下面的中性机器人头，宁可是简笔图标也别裂着。 */
+const QA_AV_BOT_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"'
+  + ' stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+  + '<path d="M12 6.7V4.5"/><circle cx="12" cy="3.3" r="1.15" fill="currentColor" stroke="none"/>'
+  + '<rect x="4.7" y="6.7" width="14.6" height="11.9" rx="3.5"/>'
+  + '<path d="M3.4 11.6v2.6M20.6 11.6v2.6"/>'
+  + '<circle cx="9.4" cy="11.9" r="1.25" fill="currentColor" stroke="none"/>'
+  + '<circle cx="14.6" cy="11.9" r="1.25" fill="currentColor" stroke="none"/>'
+  + '<path d="M9.7 15.6h4.6"/></svg>';
+function qaBotAvatarHtml(){
+  const src = (typeof QA_BOT_AVATAR_SRC === "string") ? QA_BOT_AVATAR_SRC : "assets/icon.png";
+  if(src) return `<span class="qa-av"><img class="qa-av-img" src="${escHtml(src)}" alt="" draggable="false"></span>`;
+  return `<span class="qa-av qa-av-bot" aria-hidden="true">${QA_AV_BOT_SVG}</span>`;
+}
+/* **引擎名小标**（2026-09-22 用户：「头像旁边显示引擎名字」；同日追加「名字显示的大一点
+   再加上模型显示」→ 文案 = 「引擎 · 模型」，字号见 app.css M8）：左侧消息头像独占一行（见文末 M7）
+   之后，头像那一行右侧空着 —— 把「这一条是哪个引擎、哪个模型说的」挂在头像右边。
+   这里只负责吐节点；**挂不挂、挂哪一档**由渲染层决定（右侧两档不挂：它们靠头像字 / 抬头点明身份，
+   见 app.css 的 `.qa-who` 只认左侧形状；⚠️ 审核引擎那条 2026-09-30 起也在左侧，但它的小标挂在
+   **机器侧那条独立消息**上，报告本体不重复挂 —— 见 13-dispatch-stream 与 qaTraceToLeft）。
+   空引擎名 → 空串：宁可没有，也不写「未知」占位。
+   模型存的是 **id**，显示走 qaModelName（与「生成中」胶囊同一套分工：名字只活在展示层）。
+   ⚠️ `modelOnly`（2026-10-20 用户：「只显示模型即可 不然现在换行了」）：头像那一行上并着
+      「运行中 · 耗时计时」，而这一行是 `flex-flow:row wrap` —— 「引擎 · 模型」整串
+      （引擎名 + 模型显示名，两段都能很长）会把余下宽度吃光，秒数被挤到**换行**，
+      头像那一行于是散成两截。这一档只留模型名（模型为空时退回引擎名，宁可短不可换行）。 */
+function qaWhoLabel(engine, model, modelOnly){
+  const nm = String(engine == null ? "" : engine).trim();
+  if(!nm) return "";
+  const md = String(model == null ? "" : model).trim();
+  const mName = md ? qaModelName(md, nm) : "";
+  if(modelOnly) return mName || nm;
+  return mName ? `${nm} · ${mName}` : nm;
+}
+function qaWhoHtml(engine, model, modelOnly){
+  const lb = qaWhoLabel(engine, model, modelOnly);
+  return lb ? `<span class="qa-who">${escHtml(lb)}</span>` : "";
+}
+/* ===== 消息操作行：复制 / 重试（2026-10-09 用户：「消息要加上复制和重试」）=====
+   每条消息（用户自己那条 + 引擎答复那条）正文之下挂一行操作：
+     · 复制 = 把这条消息的正文原样复制走；
+     · 重试 = 把这一轮**再问一遍**（用户那条用它自己那句话；引擎那条向上找最近的那条
+              用户消息 —— 它当初就是被那句话问出来的），引擎重新作答。
+   ⚠️ 按钮**不带监听**：点击走 #qa-stream 的事件委托（07 的 bindQaStreamDelegation）——
+      快照恢复（`s.innerHTML = snapshot`）会把节点整份重建，直接 addEventListener 会随旧节点
+      一起丢，历史消息上的按钮就成了死的（与工具卡 / 代码面板的复制按钮同一条纪律）。
+   ⚠️ 状态一律落在 class / hidden 上（`.copied`）：它们跟着 HTML 活下来，快照往返后形态不漂。
+   ⚠️ 「要复制的正文」落位**固定 = `.qa-t`**（用户那条与引擎那条都是它，见两个渲染入口）——
+      委托侧按这个约定取文本，所以按钮本身不必带任何 data-*。 */
+function qaMsgActsHtml(){
+  return '<button type="button" class="qa-act qa-act-copy" aria-label="复制" title="复制这条消息">'
+       + '<span class="i-copy">' + QA_V_ICONS.copy + '</span><span class="i-ok">' + QA_V_ICONS.ok + '</span></button>'
+       + '<button type="button" class="qa-act qa-act-retry" aria-label="重试" title="重试这一轮">'
+       + QA_V_ICONS.retry + '</button>';
+}
+/** 造一行操作（返回节点）。引擎那条答复先 `hidden` —— 流式期间正文还只有半句，
+    这时让「复制 / 重试」亮着会让人在半截话上点到；收尾（qaRunEnd → finish）再显形。 */
+function qaMsgActsNode(hidden){
+  const d = document.createElement("div");
+  d.className = "qa-acts";
+  if(hidden) d.hidden = true;
+  d.innerHTML = qaMsgActsHtml();
+  return d;
+}
+/** 一条消息的正文纯文本（复制 / 重试用同一个出口，见上面那段「落位固定」）。 */
+function qaMsgTextOf(msg){
+  const bd = msg && msg.querySelector(".qa-t");
+  return bd ? String(bd.textContent == null ? "" : bd.textContent).trim() : "";
+}
+/** 重试一条消息：向上找「这一轮是从哪句话问出来的」，再走 qaSend 重跑。
+ *  ⚠️ 仍然走 qaSend（followup + echo:false）—— 排队 / 锁 / 附件闸门 / 快照落库
+ *     这些既有约定一条都不用重写：重试与正常发送走的是**同一条链路**。
+ *  ⚠️ echo:false = **不重复画**一条用户气泡：重试是「同一句话再来一次」，
+ *     再长出一条一模一样的用户消息只会让对话看起来被复制了一遍。 */
+function qaMsgRetry(msg){
+  if(!msg) return;
+  let src = msg;
+  if(!msg.classList.contains("qa-mine")){
+    src = null;
+    let p = msg.previousElementSibling;
+    while(p){
+      if(p.classList && p.classList.contains("qa-msg") && p.classList.contains("qa-mine")){ src = p; break; }
+      p = p.previousElementSibling;
+    }
+    /* 引擎那条答复找不到「它是被哪句话问出来的」就**不重试**：把答复本身当提问发回去
+       毫无意义（引擎会去答一条它自己刚说的话）。宁可如实说一句，也不发一条怪消息。 */
+    if(!src){ toast("找不到这条答复对应的提问，没法重试"); return; }
+  }
+  const text = qaMsgTextOf(src);
+  if(!text){ toast("这条消息没有可重试的正文"); return; }
+  /* 一轮没跑完就重试，等于往队列里塞一条「重跑」—— 语义含糊（排队的那条本来就会跑）。
+     如实说、不静默排队，与追加/模式轮的拦截同一口径。 */
+  if(typeof qaTaskRunning === "function" && qaTaskRunning(qaActiveId)){ toast("这条会话还在跑，等它结束再重试"); return; }
+  toast("正在重试 · " + escHtml(text.slice(0, 24)) + (text.length > 24 ? "…" : ""));
+  qaSend(text, { followup: true, echo: false });
+}
+function qaRenderMine(text, atts){
+  const s = $("#qa-stream"); if(!s) return;
+  s.hidden = false;
+  const div = document.createElement("div");
+  div.className = "qa-msg qa-mine";
+  div.innerHTML = `<div class="qa-ico">${qaAvatarHtml("mine")}</div><div class="qa-bd"><div class="qa-t md-body"></div></div>`;
+  // 用户消息按 markdown 渲染：marked + DOMPurify（沿用产品文档同一管线，输入是用户可控，
+  // 但消毒仍保留以防恶意粘贴）。
+  const host = div.querySelector(".qa-t");
+  /* 正文 + 正文里那些截图路径一起落笔：需求正文（`[粘贴的截图]` + 绝对路径）与飞书带图消息
+     （`[图片] <路径>`）的图**走不了附件通道**，只能把路径写进正文 —— 渲染时把它们摘出来
+     画成缩略图，别让用户对着一串 /Users/… 猜自己发了什么（见 19-attachments 的 qaShotsMount）。
+     代码块的高亮补扫也在它里面。 */
+  qaShotsMount(host, text);
+  // 随消息发出的截图（只有图没文字时 host 为空，此时这一行就是气泡的全部内容）。
+  // 用 DOM 拼节点而不是拼 HTML 字符串：缩略图地址来自落盘返回值，
+  // 走 setAttribute 天然免去一次转义，也让「没拿到地址就跳过」这种判断更直白。
+  if(atts && atts.length){
+    const row = document.createElement("div");
+    row.className = "qa-atts";
+    atts.forEach((a)=>{
+      const u = attThumbUrl(a);
+      if(!u) return;
+      row.appendChild(qaThumbNode(u, (a.name || "截图") + " · " + attSize(a.size), a.name || "截图"));
+    });
+    if(row.children.length) host.appendChild(row);
+  }
+  /* 长消息折叠（2026-09-28，对齐 anywhere 的 CollapsibleUserMessage）：用户在这个工作台里
+     最常干的事就是把整份需求/上下文粘进来，一条消息能把画布顶掉两屏 —— anywhere 给用户消息
+     的解法是「超阈值就截断 + 底部渐隐 + 一枚展开全文（内容一个字不删，只改可见高度）」。
+     ⚠️ 必须放在**附件之后**：判据看的是渲染后的 DOM（host 里有没有 `.qa-atts`），
+        带图的消息不折 —— 否则「我特意要你看的图」会被一起折掉（见 29-msg-variants 的 qaFoldMaybe）。
+     ⚠️ 折叠态是个**类**（`.qa-fold`），落在 HTML 上 → 快照恢复后高度不会弹回去。 */
+  qaFoldMaybe(host, text);
+  /* 操作行（复制 / 重试，2026-10-09）：挂在**消息根**上（不是 .qa-bd 里）——
+     用户那条的 .qa-bd 就是气泡本体，操作行落在气泡里会被当成气泡内容；
+     挂在根上则落在气泡**下方**（右侧那两档靠 app.css 的折行把整行推到气泡下沿）。
+     引擎那条（左侧）本身就是纵向的，挂在根上天然就在正文下方。 */
+  div.appendChild(qaMsgActsNode(false));
+  s.appendChild(div);
+  /* ⚠️ 落笔即贴底（2026-09-23 用户报障：「追问问题 但是用户的问题不会触发滚动到最新
+     需要等 agent 回复才会触发」）。
+     根因：**自己这条气泡是唯一不滚的一笔** —— 引擎侧每一笔（appendText / toolCall /
+     setResult / 收尾行，见本文件各处 qaScrollIntoView）与数字分身那枚气泡
+     （24-agent-test 的 atcTwinMsg）落笔后都会贴底，只有这里没有。
+     于是「上一轮答得长、画布停在中间」时，刚发出去的那条整条落在折线以下 —— 用户看不见
+     自己刚问的话，得等引擎吐出第一段正文（09-ask-event 每次事件末尾那次滚动）才被动拽到底。
+     排队那条路径（qaMsgQueue）表现一样：轮到它自动提交时同样只有这条不滚，观感还是
+     「我的问题没滚过去、等回复才滚」。
+     ⚠️ 这一行是**唯一**该滚的地方：qaRenderMine 就是「自己说的话落进画布」的唯一出口，
+     放在这里，实时发送 / 排队提交 / 派发快照三条路径一并贴底；放到调用方（qaSend）去补，
+     下一次多一条调用路径就又会漏。
+     ⚠️ 发送 = **用户的明确意图**：清掉「他正翻着历史」那个标记（qaUserAway），
+        否则他跳上去看历史之后发的那条会落在折线以下、看不见自己刚问的话。 */
+  qaUserAway = false;
+  qaScrollIntoView();
+}
+/** 「引擎 · 模型 · 生成中」= 1 枚胶囊（用户 2026-09-17）：
+ *  转圈 + 文字同装一枚圆角胶囊（.qa-run-pill），实时生成行与派发快照的「生成中」状态行
+ *  共用这一份标记 —— 两处各写一份必然走形（一处改了另一处忘）。
+ *  文字仍走 qaModelName（显示名），`-m` 用的是 id，与全链路的分工一致。 */
+function qaRunPillHtml(text){
+  return `<span class="qa-run-pill"><span class="qa-spinner"></span>`
+       + `<span class="qa-run-t">${escHtml(text)}</span></span>`;
+}
+function qaRenderAnswer(host){
+  // 创建一条 AI 应答消息（思考区 + 工具卡区 + 正文区 + 运行态行），返回操作句柄
+  // host = 这一轮的落笔处（可见画布 #qa-stream，或后台 run 的 holder，见 qaRunHost）——
+  // 绝不能写死 #qa-stream：生成中切到别的会话时，这一轮的增量必须落在**自己**的画布里。
+  const s = host || $("#qa-stream"); if(!s) return null;
+  if(s.hidden) s.hidden = false;
+  const div = document.createElement("div");
+  div.className = "qa-msg";
+  /* ===== 时间轴排版（2026-10-12 用户：「桌面也改成严格按照时间轴」）=====
+     内容区（.qa-bd）是一串**按到达顺序**追加的块，不再预置「思考 / 工具 / 正文」三段：
+       · .qa-think —— 一段连续 thinking = 一块
+       · .qa-tools —— 一段连续工具调用 = 一块（组头 + 组内卡）
+       · .qa-t     —— 一段连续正文 = 一块
+       · .qa-tool / .qa-agent / .qa-mk / .qa-sep —— 各是一笔，直接落进流里
+     规则只有一条：**新的一笔落到队尾**；换块即「封口」（旧的思考块停表、旧的正文段把尾部
+     落成真块），后续同类内容另起一块。
+     改前是 `bd.insertBefore(卡, body)` —— 所有过程项都压在正文之上，于是「写一段 → 跑工具 →
+     再写一段」的时间关系被抹平（工具总在最上面）。现在如实保留先后。 */
+  div.innerHTML = `<div class="qa-ico">${qaAvatarHtml("ai")}</div><div class="qa-bd"></div>`;
+  /* 这一轮的**起点**（墙上时钟）：收尾时给「任务耗时」分组头算时长用（见 finish → wrapTurn）。
+     与收尾行那一段「· 总耗时 X」同一量（它是 `run.t0 → 此刻`，两者相差毫秒级）。 */
+  div.__qaT0 = Date.now();
+  /* 头像右边默认挂**当前引擎 · 当前模型**（用户 2026-09-22：「头像旁边显示引擎名字」+
+     「再加上模型显示」）。模型初值与「生成中」胶囊同源（`qaModel` = 链首 / 任务自定）。
+     ⚠️ 这是默认值：说话人不是当前引擎时由调用方用句柄的 `setWho` 改写
+     （派发轮 = 该需求的引擎 / 模型，见 13-dispatch-stream；被测引擎 = 事件里的 p.engine，见 24-agent-test）；
+     主进程降级换模型时由 `start` 事件改写（09-ask-event，与胶囊同一时机）。
+     ⚠️ 挂上去**不等于看得见**：`.qa-who` 的样式只认左侧形状（见 app.css 的 M8），
+     右侧那两档（我 / 数字分身）本就不该显示它；审核引擎那条走审查轮时会把这枚 `.qa-ico`
+     整个换成「审」头像（小标随之被替换掉，见 13-dispatch-stream）—— 那条虽已贴左（2026-09-30），
+     但它的小标由机器侧那条独立消息承担（`qaTraceToLeft`），报告本体不再重复挂一枚。 */
+  const icoEl = div.querySelector(".qa-ico");
+  if(icoEl) icoEl.insertAdjacentHTML("beforeend", qaWhoHtml(qaEngine, qaModel));
+  /* 操作行（复制 / 重试，2026-10-09）：先藏起来，本轮收尾（finish）再显形 ——
+     流式期间正文只有半句，这时能点「复制 / 重试」只会让人复制到半截话。 */
+  const acts = qaMsgActsNode(true);
+  div.appendChild(acts);
+  s.appendChild(div);
+
+  /* ══════════ 时间轴：内容区与三类「当前块」 ══════════ */
+  const bd = div.querySelector(".qa-bd");
+  /* 机器侧落笔处（审核 / 数字分身那两档）：思考与工具是**机器在动**，要落到前面那条独立
+     消息里（见 qaTraceToLeft）。壳由那一侧建 —— **即使此刻一块都还没有**也要建出来，
+     否则这一轮里后起的机器块会落错地方（旧实现预置了空的思考块/工具组，恰好掩盖了这点）。 */
+  const machineHost = ()=> (div.__traceWrap && div.__traceWrap.querySelector(".qa-bd")) || bd;
+  let curThink = null, curGroup = null, curText = null;   // 当前「打开」的三类块
+  /* 本条消息里**建过的所有**工具组（不只当前那个）——收尾兜底要能封到「被 endToolRun 摘掉
+     引用、之后又被卡片落定重新点亮」的那种组（见 settleGroups 的说明）。 */
+  const groups = [];
+  /* 「本轮已收尾」粘性标记（2026-10-16 修「工具调用中与已完成了同框」：
+     用户报障原话「工具调用中 就已完成了 判断结束是有bug吗」）。
+     为什么需要它：`finish()` 跑完之后，迟到的事件照样能走到 `groupBegin` / `thinkBegin` ——
+     onDone 里等会话产物那段最多 1.5s 的窗口（此刻 `qaRuns` 还没删）、同一 rid 的第二条终态、
+     补到的 tool_result 收编，这几条路都在此列；而这两个 begin 原来**无条件**把块点亮成 live
+     （绿点 + 计时器起跳），此后**没有任何一次收尾**会再来封它 → 画布上永远留着一条
+     「工具调用中」，与下面那行「已完成 · 总耗时」并排。
+     置位后只写**定格态**：内容照常落进块里（不丢），但不再进 live、不起表。
+     ⚠️ 已在 `wrapTurn` 里并进「任务耗时」大组的过程块不会再被拆出来 —— 迟到的那一笔只能
+        停在组外，这是收尾之后才到的代价，好过留一条永远在转的组头。 */
+  let closed = false;
+  let pending = "";                                       // 当前正文块里尚未闭合的尾部
+  const textBlocks = [];                                  // 本回合所有正文块（权威全文覆盖看段数）
+  /* ===== 「段」：过程中就把连续的过程块并成一行（2026-10-12 用户：「最终是要合并
+     但是过程中也需要分段按组合并 被文本消息分割就是多段」）=====
+     · **段 = 一段连续的过程**（思考块 / 工具组）。正文、标记行、分隔条、提问卡一到，
+       这一段就封口（sealSeg）→ 下一次过程另起一段；
+     · 段行与收尾那枚「任务耗时」大组**同一形制**（`.qa-turn`，多一个 `data-seg` 标记）。
+     · ⚠️ **段内随时收，不再铺成一长串**（2026-10-15 用户报障：「怎么没分组合并 又是显示很长的
+       思考和工具调用」）：一段里只留最新 `SEG_KEEP` 笔过程在外面（当前在做什么照旧一眼可见），
+       更早的**每来一笔新过程就收进段行**。改前只在正文到达时才收 —— 而实测那种一轮（dsh：
+       21 段思考 + 24 次工具、正文只在最后一句）从头到尾没有正文打断，于是整屏都是
+       「已深度思考 0.0s / 已调用工具 · 2个 3.3s」，用户要的合并一直不出现。
+     · **运行中只留一行**（2026-10-20 用户报障，移动端：「agent 运行中不需要[分开]，
+       合并到下一行即可」）：`SEG_KEEP` 从 2 收到 **1** —— 新一笔过程一开始（工具组或下一段
+       思考点亮），上一笔就立刻被 `segFold` 收进段行，画布上永远只有「本段进行中的那一笔」。
+       收尾仍由 wrapTurn 并成一枚大组，最终形态不变。
+     · **收尾时这些段再合并成一枚大组**（见 wrapTurn）—— 最终只留一行。
+     `segs` = 已并出的段壳（收尾要拆掉它们、把成员搬进那枚大组）；
+     `segT0` = 当前段第一笔过程块的时间（段行上那个「任务耗时 X」算的是**这一段**花了多久）。 */
+  const segs = [];
+  let segT0 = 0;
+  const SEG_KEEP = 1;                                      // 段内最多留几笔过程在外面
+
+  /* 过程块落在哪些容器里：答复那条，外加**机器侧那条**（审核轮 / 数字分身的思考与工具被
+     qaTraceToLeft 搬进它自己的 `.qa-bd`）—— 两处都要能并，不能只认 bd。 */
+  function segHosts(){
+    const out = [bd];
+    const w = div.__traceWrap && div.__traceWrap.querySelector(".qa-bd");
+    if(w && w !== bd) out.push(w);
+    return out;
+  }
+  const segParts = (host)=> [...host.querySelectorAll(":scope > .qa-think, :scope > .qa-tools")];
+  /* 本段**还没封口**的段壳（封过的那几枚留在画布上，绝不能再被复用 —— 复用会把两段并成一行、
+     正文也跟着挤到一起，实测踩过）。开合两态都留 `data-seg`（收尾要按它把段壳展开成成员）。 */
+  const segShell = (host)=> host.querySelector(":scope > .qa-turn[data-seg]:not([data-seg-done])");
+  function mkSegShell(host, before){
+    const d = document.createElement("details");
+    d.className = "qa-turn";
+    d.dataset.seg = "1";                                   // 「过程中的段」标记（收尾时会被拆掉）
+    d.innerHTML = `<summary class="qa-turn-sum"><span class="qa-turn-t"></span><span class="qa-turn-n"></span></summary><div class="qa-turn-bd"></div>`;
+    host.insertBefore(d, before || null);
+    segs.push(d);
+    return d;
+  }
+  /* 段行上那两个数：耗时算的是**这一段**（segT0 起算），数的是壳里装了几笔 */
+  function segSync(d){
+    if(!d) return;
+    const n = d.querySelector(":scope > .qa-turn-bd").childElementCount;
+    const dur = segT0 ? Date.now() - segT0 : 0;
+    d.querySelector(".qa-turn-t").textContent = "任务耗时" + (dur ? " " + qaDurText(dur) : "");
+    d.querySelector(".qa-turn-n").textContent = n + " 项过程";
+  }
+  /* 本段又多了一笔过程 → 超过 SEG_KEEP 的更早那几笔收进段行（壳懒建，落在第一笔成员的位置上）。
+     ⚠️ 只搬 `.qa-think` / `.qa-tools`（直系子节点）—— **正在跑的工具卡留在外面**
+        （`.qa-tool-alone`，「只有最新的 1 个运行中显示在外面」那条口径）；它落定时自己会收进
+        本段的工具组（见 collapseIntoGroup），那时才跟着进来。
+     ⚠️ 已经被段壳包住的块不再被 `:scope >` 命中 → 天然幂等（重复调用只会把新长出来的那几笔并走）。 */
+  function segFold(){
+    segHosts().forEach((host)=>{
+      const parts = segParts(host);
+      if(parts.length <= SEG_KEEP) return;
+      const d = segShell(host) || mkSegShell(host, parts[0]);
+      const body = d.querySelector(":scope > .qa-turn-bd");
+      parts.slice(0, parts.length - SEG_KEEP).forEach((p)=> body.appendChild(p));   // 搬节点，不重建
+      segSync(d);
+    });
+  }
+  /* 把**当前这一段**剩下的过程并进段行并封口：段落边界 = 正文 / 标记行 / 分隔条 / 提问卡
+   * （见各处的 sealSeg 调用）。壳外还留着的几笔（SEG_KEEP 以内）也一起收进去 —— 段到此为止，
+   * 下一笔过程另起一段（收尾时再由 wrapTurn 把所有段并成一枚大组）。 */
+  function sealSeg(){
+    let out = null;
+    segHosts().forEach((host)=>{
+      const parts = segParts(host);
+      const d = segShell(host) || (parts.length ? mkSegShell(host, parts[0]) : null);
+      if(!d) return;
+      const body = d.querySelector(":scope > .qa-turn-bd");
+      parts.forEach((p)=> body.appendChild(p));
+      segSync(d);
+      d.dataset.segDone = "1";                             // 封口：这一枚不再吸收后面的过程
+      out = out || d;
+    });
+    segT0 = 0;                                             // 下一笔过程算下一段
+    return out;
+  }
+
+  /* 正文块的尾部落成真块（换块 / 收尾共用一处；与旧 finish 的「尾部 pending 解析一次」同源） */
+  function commitTail(){
+    if(!curText){ pending = ""; return; }
+    const old = curText.querySelector(".qa-tail");
+    if(old) old.remove();
+    if(pending){
+      const tmp = document.createElement("div");
+      qaShotsMount(tmp, pending);
+      [...tmp.childNodes].forEach(node=> curText.appendChild(node));
+      highlightIn(curText);
+    }
+    pending = "";
+  }
+  function sealText(){ if(curText) commitTail(); curText = null; pending = ""; }
+  /* 一段工具调用的结束：组定格（下一段工具另起一组） */
+  function endToolRun(){ if(curGroup) groupEnd(curGroup); }
+  /* 横切事件（标记行 / 分隔条 / 未配对提问卡）→ 三类块一起封口 */
+  function sealAll(){ sealThink(); endToolRun(); sealText(); sealSeg(); }
+
+  /* ===== 深度思考块（一段连续 thinking 一块）=====
+     thinkBegin 首次调用即进入 live：朱砂呼吸点 + 「思考中」+ 秒数实时跳动，
+     思考默认收起（live 也只亮指示，不自动展开；用户手动开合过则尊重用户）；
+     thinkEnd 定格为「已深度思考 · X.Xs」并维持收起 —— 之后用户仍可点开回看。
+     ⚠️ 开合点击统一走 #qa-stream 上的**事件委托**（见 bindQaStreamDelegation）：
+        快照恢复（`s.innerHTML = t.snapshot`）会把节点整个重建 —— 直接 addEventListener
+        绑在卡片上的监听随旧节点一起消失，「恢复历史对话后点工具卡/思考条没反应」
+        （2026-09-16 用户报障：WebSearch 点击无法展开）。用户手动开合过 → 记 data-touched。 */
+  function ensureThink(){
+    if(curThink) return curThink;
+    endToolRun(); sealText();                          // 换块：正文与这一段工具到此为止
+    const el = document.createElement("div");
+    el.className = "qa-think";
+    el.hidden = true;
+    el.innerHTML = `<span class="qa-think-toggle"><span class="tt">深度思考</span><span class="qa-think-dur" hidden></span><svg class="chev" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span><div class="qa-think-bd"></div>`;
+    machineHost().appendChild(el);
+    curThink = { el, tt: el.querySelector(".tt"), dur: el.querySelector(".qa-think-dur"),
+                 body: el.querySelector(".qa-think-bd"), start: 0, timer: null,
+                 touched: ()=> el.dataset.touched === "1" };
+    return curThink;
+  }
+  function thinkBegin(c){
+    const t = c || ensureThink();
+    t.el.hidden = false;
+    /* 本轮已收尾（见 closed）：同 groupBegin —— 只写定格态，不进 live */
+    if(closed){
+      t.el.classList.remove("live");
+      t.tt.textContent = "已深度思考";
+      return t;
+    }
+    t.el.classList.add("live");
+    t.tt.textContent = "思考中";
+    /* 机器内部活动首次显形 → 把左边那条「机器侧」消息也显出来（见 qaTraceToLeft）。
+       没做过拆分时 __traceWrap 是 undefined，这一行就是空操作。 */
+    if(div.__traceWrap) div.__traceWrap.hidden = false;
+    if(!t.start) t.start = Date.now();
+    if(!segT0) segT0 = Date.now();                     // 本段的第一笔过程（段行的耗时从这儿算）
+    segFold();                                         // 新的一笔过程 → 本段更早的几笔收进段行
+    if(!t.timer) t.timer = setInterval(()=>{
+      t.dur.hidden = false;
+      t.dur.textContent = ((Date.now() - t.start) / 1000).toFixed(1) + "s";
+    }, 100);
+    return t;
+  }
+  function thinkEnd(c){
+    const t = c || curThink; if(!t) return;
+    if(t.start){                                       // 从未思考过则什么都不显示
+      clearInterval(t.timer); t.timer = null;
+      t.el.classList.remove("live");
+      t.tt.textContent = "已深度思考";
+      t.dur.hidden = false;
+      t.dur.textContent = ((Date.now() - t.start) / 1000).toFixed(1) + "s";
+      if(!t.touched()) t.el.classList.remove("open");   // 用户没手动开过 → 维持收起
+    }
+    if(t === curThink) curThink = null;
+  }
+  const sealThink = ()=> thinkEnd(curThink);
+
+  /* ===== 工具调用组（一段连续工具调用一组）=====
+     折叠条显示「工具调用 · N个 · X.Xs」，点击展开看组里的卡。
+     ⚠️ 组里放**没有 description** 的调用（2026-09-18），外加**超编的**带 description 的独立卡
+     （正文只留最近 5 张，更早的收编进组，见 ALONE_KEEP / groupAdd）；所以这里的 N 数的是
+     「组里实际有几张卡」，与正文里那几张独立卡无关（2026-09-20）。
+     ⚠️ 组头**懒启动**（2026-09-18）：第一张卡到达时才点亮 —— 全是 description 的一段
+        不会留下一个「0个」的空组。
+     groupBegin 首次调用即进入 live：绿点 + 调用数实时跳动，工具默认收起（live 也只亮指示，
+     不自动展开；用户手动开合过则尊重用户）；groupEnd 定格为「已调用工具 · N个 · X.Xs」并维持收起。
+     ⚠️ 组**按需创建**（第一张真正归组的卡到达时才建，位置就是那一笔的队尾）——
+        全是一句话 description 的独立卡时，画布上不会多出一个空的折叠组。 */
+  function ensureGroup(){
+    if(curGroup) return curGroup;
+    sealThink(); sealText();                           // 换块：思考与正文在这一段之前结束
+    const el = document.createElement("div");
+    el.className = "qa-tools";
+    el.hidden = true;
+    el.innerHTML = `<span class="qa-tools-toggle"><span class="tt">工具调用</span><span class="qa-tools-count"></span><span class="qa-tools-dur"></span><svg class="chev" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span><div class="qa-tools-bd"></div>`;
+    machineHost().appendChild(el);
+    if(!segT0) segT0 = Date.now();                     // 同 thinkBegin：工具也是「过程」，算本段起点
+    curGroup = { el, tt: el.querySelector(".tt"), count: el.querySelector(".qa-tools-count"),
+                 dur: el.querySelector(".qa-tools-dur"), body: el.querySelector(".qa-tools-bd"),
+                 start: 0, timer: null, num: 0, touched: ()=> el.dataset.touched === "1" };
+    groups.push(curGroup);
+    return curGroup;
+  }
+  function groupBegin(g){
+    const t = g || ensureGroup();
+    t.el.hidden = false;
+    /* 本轮已收尾（见 closed）：直接写定格态 —— 点亮了也没人会来封它 */
+    if(closed){
+      t.el.classList.remove("live");
+      t.tt.textContent = "已调用工具";
+      return t;
+    }
+    t.el.classList.add("live");
+    t.tt.textContent = "工具调用中";
+    if(div.__traceWrap) div.__traceWrap.hidden = false;   // 同 thinkBegin：显出「机器侧」那条
+    if(!t.start) t.start = Date.now();
+    segFold();                                         // 同 thinkBegin：新的一笔过程 → 收更早的那几笔
+    if(!t.timer) t.timer = setInterval(()=>{
+      t.dur.hidden = false;
+      t.dur.textContent = ((Date.now() - t.start) / 1000).toFixed(1) + "s";
+    }, 100);
+    return t;
+  }
+  function groupEnd(g){
+    const t = g || curGroup; if(!t) return;
+    if(t.start){
+      clearInterval(t.timer); t.timer = null;
+      t.el.classList.remove("live");
+      t.tt.textContent = "已调用工具";
+      t.dur.hidden = false;
+      t.dur.textContent = ((Date.now() - t.start) / 1000).toFixed(1) + "s";
+      if(!t.touched()) t.el.classList.remove("open");
+    }
+    if(t === curGroup) curGroup = null;
+  }
+  /* 收尾兜底（2026-09-18）：这一轮结束时，画布上**还在转圈**的工具卡一律落定。
+     为什么需要它：一条事件里装了多次调用时，tool_result 只带一个 id，只有第一张卡配得上，
+     其余几张（现在都作为独立卡摆在正文流里，转圈格外扎眼）原来会永远转 —— 连同
+     「点停止」那条收尾路径（qaRunEnd 不经过 finishTools）也一起被这里收掉。
+     钩子 `__qaDone` 由 mkCard / agentCall 挂在节点上（委派卡的是带胶囊的那版）；
+     快照恢复出来的历史卡没有钩子，但它们本来就不是 running，扫不到。 */
+  function settleRunningTools(ok){
+    div.querySelectorAll('.qa-tool[data-state="running"]').forEach(el=>{
+      if(typeof el.__qaDone === "function"){ try{ el.__qaDone("", ok); }catch(e){} }
+    });
+  }
+  /* 收尾兜底（2026-10-15，用户报障「冲突 · 调用中又已完成」）：把本条消息里**所有还亮着的**
+     工具组一律定格 —— 不是只封 `curGroup` 那一个。
+     为什么只封 curGroup 会漏（实测出来的那条路，正是截图里「已深度思考 0.0s + 工具调用中 ·
+     2个 · 5.9s + 已完成 · 总耗时 10m 43s」）：
+       · `toolCall` 先 `ensureGroup()` 建组、卡片**还在外面跑** → 组还没点亮（start=0）；
+       · 中途来了一段正文 → `ensureText` → `endToolRun()`：组没 start，`groupEnd` 只把
+         `curGroup` 清成 null，**不 seal**（那个空组的节点还留在 DOM / 段壳里）；
+       · 卡片落定（tool_result 或收尾兜底）→ `collapseIntoGroup → groupAdd → groupBegin`
+         把这个组**重新点亮**（hidden=false、绿点、计时器起跳），而此刻 `curGroup` 早不是它了；
+       · 收尾 `finish()` 里的 `groupEnd()` 封的是 curGroup（另一个组 / 已经是 null）→
+         这个组永远停在「工具调用中」，与下面的「已完成」同框。
+     所以收尾按**登记表**逐个封：`g.timer` 非空 = 还活着（groupBegin 起表、groupEnd 停表），
+     已定格的组跳过 —— 不跳过的话重复 finish（turn_end 之后还有 end）会把秒数越算越长。
+     `settleRunningTools` 必须排在它**前面**：卡片落定会往组里搬卡、还可能点亮那个组。 */
+  function settleGroups(){
+    groups.forEach(g=>{ if(g.start && g.timer) groupEnd(g); });
+    curGroup = null;
+  }
+
+  const run = document.createElement("div");
+  run.className = "qa-run";
+  run.innerHTML = qaRunPillHtml(`${qaEngine}${qaModel ? " · " + qaModelName(qaModel, qaEngine) : ""} · 生成中`);
+  s.appendChild(run);
+  /* ⚠️ 落笔即贴底（2026-09-23，与 qaRenderMine / qaRenderDone 同一约定）。
+     为什么必须在**这一行之后**：这条应答的立身有两块 —— 气泡节点（上面那个 div）+ 这枚
+     「生成中」胶囊行，两块加起来约 96px。它挂在**用户刚发的那条气泡之后**，用户那条贴了底、
+     这一条不贴，画布底下就留着一条空白（实测 slack=96px）→ 用户看到的仍是「没滚到最新」，
+     下一段正文到达时画面还会再往下跳一次。
+     ⚠️ 闸门在 qaScrollIntoView 里（qaPaintBg：后台 run 在画时不拽动前台画布）—— 本函数的
+     `host` 可指向后台画布，但滚动对象始终是可见画布，所以这里不必自己判。 */
+  qaScrollIntoView();
+
+  /* ===== 助手消息：流式段落缓冲（Claude / Codex 风格）=====
+     模型逐 token 推送会撞碎 markdown 标签（** 加粗被切成 3 段）。
+     策略：累积整段纯文本 → 按 \n\n 切块 → 已闭合段落立即走 marked 解析 →
+     落到 DOM 的 <p>/<ul>/<pre> 节点上。**未闭合的尾部段落**用纯文本预览
+     兜底（.qa-tail 类，便于区分"已渲染"vs"打字中"）。
+     ⚠️ 缓冲区 `pending` **只属于当前这一块正文**：换块（工具卡 / 思考块 / 标记行落笔）时
+        先把尾部落成真块（commitTail），再开新块 —— 否则前一段的尾巴会被后一段覆盖。
+     ⚠️ 正文块是**按需新建**的（ensureText）：一段连续正文一块，位置就在队尾。 */
+  function ensureText(){
+    if(curText) return curText;
+    sealThink(); endToolRun();                    // 换块：思考与这一段工具到此为止
+    sealSeg();                                    // ★ 正文一到 = **这一段落幕**（用户：被文本消息分割就是多段）
+    const t = document.createElement("div");
+    t.className = "qa-t streaming md-body";
+    bd.appendChild(t);
+    curText = t; textBlocks.push(t); pending = "";
+    return t;
+  }
+
+  function flushClosed(){
+    // 把累积文本里已闭合的段落(以 \n\n 切分)逐段解析渲染,留尾部未闭合部分在 pending
+    if(!curText || !pending) return;
+    const idx = pending.lastIndexOf("\n\n");
+    if(idx < 0) return;
+    const ready = pending.slice(0, idx);
+    pending = pending.slice(idx + 2);
+    ready.split(/\n{2,}/).forEach(chunk=>{
+      if(!chunk.trim()) return;
+      /* 一段落成：走**统一落笔处**（19-attachments::qaShotsMount）而不是直接 mdToHtmlOnly ——
+         bot 回复里带着**它看到的引用 / 它自己截的图**时，那些 /Users/…png 要变成缩略图，
+         不能当文字念（2026-09-20 用户：「用户的截图显示对了 bot回复中显示图片还不对」）。
+         没有截图路径时 qaShotsMount 内部就是 mdToHtmlOnly，语义与原来逐字相同。 */
+      const tmp = document.createElement("div");
+      qaShotsMount(tmp, chunk);
+      // 把 tmp 下的每个块级节点追加到当前正文块（而不是覆盖它，因为已存在历史段落）
+      [...tmp.childNodes].forEach(node=>{
+        // 去掉 streaming 类的 cursor,实际只加在最后一个未闭合段落
+        if(node.classList) node.classList.remove("streaming");
+        curText.appendChild(node);
+      });
+    });
+    // 重新上色本轮新加的代码块（避免重复:marked 已产出 .hljs,highlightIn 会检查 dataset.hl）
+    highlightIn(curText);
+    // 同步给 streaming 类（光标）只在最后一个未闭合 tail 上
+    const tail = curText.querySelector(".qa-tail");
+    if(tail) tail.classList.add("streaming");
+  }
+  function renderTail(){
+    // 渲染尾部未闭合段落：纯文本预览（div 块级容器,避免被 inline 上下文挤压）
+    if(!curText) return;
+    const old = curText.querySelector(".qa-tail");
+    if(old) old.remove();
+    if(!pending) return;
+    const d = document.createElement("div");
+    d.className = "qa-tail streaming";
+    d.textContent = pending;
+    curText.appendChild(d);
+  }
+  function rerenderAll(text){
+    /* result / turn_end 带的是**这一轮的权威全文**（引擎 result 行），此前用它整体覆盖正文，
+       为的是「流式增量可能丢字符」时能纠正（主进程还会在这里剥掉拼在末尾的限流通告）。
+       ⚠️ 时间轴下的新口径（2026-10-12）：**只有一个正文块时才覆盖** ——
+          有 ≥2 块 = 正文被工具/思考打断过，权威全文没法按块还原（它不是分段的），
+          强行覆盖只会把几段挤成一段、或把后段内容复制到前段。那种情况下保留流式分段，
+          并留一条 console 记录（宁可少一次纠错，也不能画错）。
+       写回的是**原来那一块**（位置不动）—— 权威全文不重排时间轴。 */
+    if(textBlocks.length > 1){
+      console.warn("[qaRenderAnswer] 正文被过程项打断（" + textBlocks.length + " 段），跳过权威全文覆盖");
+      return;
+    }
+    const body = curText || textBlocks[0] || ensureText();
+    if(curText === body) pending = "";
+    // 一次性解析（此时已知完整 markdown,无未闭合）；走统一落笔处：正文里的截图路径一并变缩略图
+    body.innerHTML = "";
+    qaShotsMount(body, text);
+    highlightIn(body);
+    pending = "";
+  }
+
+  /* ===== 工具调用卡（Codex 体验）=====
+     toolCall(name, argsPreview, argsFull) → { done(resultText, ok), state }
+     · 运行中：实线卡片、spinner、秒数跳动，默认收起（点头部展开看输入/输出）
+     · done()：状态切勾/叉、秒数定格、维持收起降调为静默单行（用户点开过则保持）
+     · 卡片**落在队尾**（按到达顺序）—— 时间轴下不再插到正文之前；正文在此封口，
+       之后的正文另起一块（见 ensureText）。
+     2026-09-17 重构：卡片本体抽成 mkCard（只造不插）—— toolCall（插主流）、
+     agentCall（委派卡）、subTool（嵌套进父委派卡）共用同一份结构，两处各写一份必然走形。
+     2026-09-18：toolCall 按 description 分流 —— 带 description 的独立显示、不带 description 的归组
+     （用户：「调用工具有 description 时要独立出来显示，没有的才在一起一个组显示」）。 */
+  /* 卡片到达序号（2026-09-20）：折叠组里的卡片按**到达顺序**排 —— 独立卡超编被收编进组时
+     要插回它该在的位置（组里还夹着无 description 的卡，直接 append 会把它排到整组之后）。 */
+  let toolSeq = 0;
+  /* isDesc：摘要是不是「人话」（description / command）—— 是则换正文字体渲染（见 .qa-tool-args.qa-desc）。
+     传布尔而不是靠调用方自己加类：mkCard 是唯一一处写这份标记的地方（委派卡/子工具卡都复用）。 */
+  function mkCard(name, argsPreview, argsFull, isDesc, meta){
+    const card = document.createElement("div");
+    card.className = "qa-tool";
+    card.dataset.state = "running";
+    card.dataset.seq = String(++toolSeq);
+    const started = Date.now();
+    /* 明细段统一成「代码面板帧」的形制（label 行 + 复制按钮 + 代码体，见 29-msg-variants
+       的 qaCodeFrameNode 注释）：这里原来是裸 `<pre>` 加一枚 9px 小标题 —— 没有复制、
+       也不横向滚动，长输出只能靠拖选，与 anywhere 的 CodePanelFrame 差一档。
+       ⚠️ 复制按钮**不带监听**：点击走 #qa-stream 事件委托（07 的 bindQaStreamDelegation），
+          否则快照恢复（`innerHTML = snapshot`）之后按钮就成了死的。 */
+    card.innerHTML = `
+      <div class="qa-tool-head">
+        <span class="qa-tool-ico">${QA_ICONS.tool}</span>
+        <span class="qa-tool-name"></span>
+        <span class="qa-tool-args"></span>
+        <span class="qa-tool-meta">
+          <span class="qa-tool-dur">0.0s</span>
+          <span class="qa-tool-st">
+            <svg class="i-ok" viewBox="0 0 24 24"><path d="M4 12.5l5 5L20 6.5"/></svg>
+            <svg class="i-err" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
+          </span>
+          <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
+        </span>
+      </div>
+      <div class="qa-tool-bd">
+        <div class="qa-tool-sec v-in-sec">
+          <div class="qa-sec-hd"><span class="k">输入</span>${QA_COPY_BTN}</div>
+          <pre class="v-in"></pre>
+        </div>
+        <div class="qa-tool-sec v-sec" hidden>
+          <div class="qa-sec-hd"><span class="k">输出</span>${QA_COPY_BTN}</div>
+          <pre class="v-out"></pre>
+        </div>
+      </div>`;
+    /* 人话标题（2026-09-28，对齐 anywhere 的 timelineToolTitle）：调用方给了 meta.title 时
+       行里不再顶「内部工具名 + 参数 JSON」，而是写一句人话（「运行了 ls -la」「编辑 a.ts」）；
+       原始名与参数降级进 title 属性（悬停可见）与明细的「输入」段（排障照旧拿得到）。
+       ⚠️ 没给 meta 的老调用方（委派卡 / 子代理卡 / 未配对结果）行为逐字不变 —— 这是新增的
+         可选形参，不是替换。 */
+    const nameEl = card.querySelector(".qa-tool-name");
+    const argsEl = card.querySelector(".qa-tool-args");
+    if(meta && meta.title){
+      nameEl.textContent = "";
+      nameEl.hidden = true;
+      argsEl.textContent = String(meta.title);
+      argsEl.classList.add("qa-desc");
+      argsEl.title = String(name || "tool")
+        + (argsPreview || argsFull ? " · " + String(argsPreview || argsFull).slice(0, 300) : "");
+      const kind = String((meta && meta.kind) || "tool").replace(/[^a-z_]/gi, "") || "tool";
+      card.classList.add("qa-kind-" + kind);
+      card.querySelector(".qa-tool-ico").innerHTML = qaToolIconFor(kind);
+    }else{
+      nameEl.textContent = String(name || "tool");
+      argsEl.textContent = String(argsPreview || argsFull || "");
+      if(isDesc) argsEl.classList.add("qa-desc");
+    }
+    const vInText = String(argsFull || argsPreview || "");
+    if(vInText) card.querySelector(".v-in").textContent = vInText;
+    else card.querySelector(".v-in-sec").hidden = true;
+    const durEl = card.querySelector(".qa-tool-dur");
+    const timer = setInterval(()=>{
+      durEl.textContent = ((Date.now() - started) / 1000).toFixed(1) + "s";
+    }, 100);
+    // 开合点击走 #qa-stream 委托（见 bindQaStreamDelegation），此处不直接绑监听：
+    // 直接绑的监听在快照恢复（innerHTML 重建）后会丢，卡片就点不开了。
+    const api = {
+      card,
+      /* 追加一个明细段（文件变更行走这条，见 09 的 tool_use 分支）。
+         插在「输出」段之前 → 段落顺序与 anywhere 的 ToolDetailPanel 一致：输入 / 变更 / 输出。 */
+      addSection(node){
+        if(!node) return null;
+        const bdEl = card.querySelector(".qa-tool-bd");
+        bdEl.insertBefore(node, card.querySelector(".v-sec"));
+        card.classList.remove("qa-tool-bare");
+        qaScrollIntoView();
+        return node;
+      },
+      done(resultText, ok = true){
+        clearInterval(timer);
+        card.dataset.state = ok ? "ok" : "err";
+        durEl.textContent = ((Date.now() - started) / 1000).toFixed(1) + "s";
+        if(resultText != null && String(resultText).length){
+          const outSec = card.querySelector(".v-sec");
+          const outPre = card.querySelector(".v-out");
+          const rt = String(resultText);
+          outSec.hidden = false;
+          /* 结果本身是 unified diff 时走 **Diff 面板**（2026-09-28）。
+             引擎回执里常见「改完了 + 一段 diff 原文」；当普通文本摊开的话，
+             +/- 混在正文里既看不出增删也不好读。对齐 anywhere：diff 一律走 DiffPanel
+             （四列栅格 + 增删配色）。
+             ⚠️ 只在**确实像** diff 时才替换：判定要同时有 `@@` 与 `---`/`+++`（见 qaLooksLikeDiff），
+                否则普通输出里以减号开头的行会被误判成一整块 diff。
+             ⚠️ 原文仍留在 pre 里（只是 hidden）：复制按钮取的就是 `.qa-tool-sec pre` 的文本，
+                挪走它复制按钮就瞎了。 */
+          outPre.textContent = rt;
+          const asDiff = typeof qaLooksLikeDiff === "function" && qaLooksLikeDiff(rt) && !outSec.querySelector(".qa-diff");
+          if(asDiff){
+            outPre.hidden = true;
+            const d = document.createElement("div");
+            d.className = "qa-diff";
+            d.innerHTML = qaDiffRowsHtml(qaDiffTextToRows(rt), true);
+            outSec.appendChild(d);
+          }
+          /* 工具产物缩略图（2026-10-14 用户：「工具生成了图片 应该显示缩略图」）：
+             输出里带着**落盘产物**路径时（job_output 的 `MEDIA: /Users/…/x.png`、
+             成片 / 文档路径），光看一串路径不知道它到底产出了什么 —— 在输出段里把它们
+             画成产物卡（图 → 缩略图，点开看原图；视频 / 音频 / 其它文件各就其位）。
+             ⚠️ 复用对话产物那条链（19-attachments::qaArtMount，与正文里的产物同一个口径）：
+                只**挑**不摘 —— 输出原文（pre）一个字不动，复制按钮照旧取得到全文；
+                存在性由主进程探针判，预览态没有桥 → 一张不画，绝不会画出一枚必然裂掉的图。
+             ⚠️ 不跟 diff 抢：结果本身是 diff 时（outPre 已藏）没有产物可挑。
+             ⚠️ 已挂过就不再挂：收尾兜底（settleRunningTools）会在结果之后再来一次 done。 */
+          if(!asDiff && !outSec.querySelector(".qa-arts") && typeof qaArtMount === "function"){
+            qaArtMount(outSec, qaArtCollect(rt));
+          }
+        }
+        /* 「无明细」退化形态（对齐 anywhere：工具没有 command/output/changes 时退化成一条
+           单行 marker，不带边框与底纹）。
+           判据取**实际渲染后**的段内容而不是入参：多段拼装（文件变更行、追加段）之后，
+           只有这时候才知道这条到底有没有东西可看。class 落在 HTML 上 → 快照可还原。 */
+        const secs = card.querySelectorAll(".qa-tool-bd > .qa-tool-sec");
+        let hasDetail = false;
+        for(const s of secs){
+          if(s.hidden) continue;
+          const pre = s.querySelector("pre");
+          if(pre ? pre.textContent.trim().length > 0 : s.childElementCount > 0){ hasDetail = true; break; }
+        }
+        card.classList.toggle("qa-tool-bare", !hasDetail);
+        if(card.dataset.touched !== "1") card.classList.remove("open");
+        /* 落定即收进本段的「已调用工具 · N个」折叠组（2026-10-12 用户：「历史的都应该显示在
+           已调用里，只有最新的 1 个运行中显示在外面」）—— 外面只留还在跑的那张。
+           ⚠️ 放在最后：收编会把它移进组容器，之后再动卡上的节点（找 `.v-sec` 之类）会越过组。
+           agentCall 也走这条（它的 done 会 ref 到同一张卡，见那里的说明）。 */
+        collapseIntoGroup(card);
+        qaScrollIntoView();
+      },
+      get state(){ return card.dataset.state; },
+    };
+    /* 落定钩子挂在**节点**上（2026-09-18）：流收尾要能把「配不到 tool_result id 的追加卡」
+       也一起收掉 —— 一条事件装多次调用时，只有第一张挂得上 id，其余原来会永远转圈
+       （卡片从折叠组挪成独立卡后更显眼，所以这里补上）。挂 DOM 而不是闭包数组，
+       是因为收尾那一侧只有节点可拿；快照恢复出来的历史卡没有钩子 → 收尾自然跳过
+       （它们本来就不是 running，扫不到）。 */
+    card.__qaDone = api.done;
+    return api;
+  }
+  /* 每调一次 = 一次调用（「调用了多少个工具」= 画了几张卡；一条事件里装了多次调用时，
+     调用方会按 description 切成多个单元逐个调进来，见 qaToolUnits）。
+     ===== 显示口径（2026-10-12 用户：「历史的都应该显示在已调用里，只有最新的 1 个运行中显示在外面」）=====
+     · **正在跑的那张留在外面**（.qa-tool-alone，卡片本体一眼可见，能看实时秒数）；
+     · **一落定就收进「已调用工具 · N个」折叠组**（见 mkCard.done → collapseIntoGroup）——
+       于是画布上任何时刻最多只剩一张「在跑」的卡，历史调用全部压成一条折叠行。
+     ⚠️ 这取代了 2026-09-18 的「带 description 的独立显示 / 其余的归组」分流与
+        2026-09-20 的「正文只留最近 5 张」配额（ALONE_KEEP）：那两条的判据都是
+        **引擎写没写 description**，而用户要的是**按运行状态**收放，与文案无关。
+     ⚠️ 组头懒点亮：第一张**收进组**的卡到达时才点亮（全在跑的段落不会留下一个 0个 的空组）。 */
+  /* 进组：按到达序号插回该在的位置（组里夹着先跑完的卡，append 会打乱先后），
+     顺手计数 +1；组头若还没点亮（本段第一张落定的卡）则点亮 —— 已经定格过的组
+     保持「已调用工具」不变（晚到的收编不该把它翻回「工具调用中」）。 */
+  function groupAdd(card, g){
+    const t = g || ensureGroup();
+    const seq = Number(card.dataset.seq || 0);
+    const sib = [...t.body.children].find(el=> Number(el.dataset.seq || 0) > seq);
+    if(sib) t.body.insertBefore(card, sib); else t.body.appendChild(card);
+    if(!t.start) groupBegin(t);                             // 首次有成员 → 点亮这一段统计行
+    t.num += 1;
+    t.count.textContent = " · " + t.num + "个";             // 实时更新计数
+    return t;
+  }
+  /** 落定即收进本段的折叠组：只认 toolCall / agentCall 落在**流里**的那些卡
+   *  （子代理内部卡 subTool 挂在父卡体内，不在流里）。幂等。
+   *  ⚠️ 归属组记在**节点属性**上（`__qaGroup`）：这一笔跑完时 `curGroup` 可能早已换段清空，
+   *     靠它才能回到**本段**那个组，而不是现建一个新组（那会把这张卡甩到整条流的末尾）。 */
+  function collapseIntoGroup(card){
+    if(!card || !card.__qaFlow || card.__qaCollapsed) return;
+    card.__qaCollapsed = true;
+    card.classList.remove("qa-tool-alone");       // 左细条是「在外面」的标记，进组就摘掉
+    groupAdd(card, card.__qaGroup);
+  }
+  function toolCall(name, argsPreview, argsFull, isDesc, meta){
+    const t = mkCard(name, argsPreview, argsFull, isDesc, meta);
+    /* 先在外面（运行中），落定后由 mkCard.done → collapseIntoGroup 收进组。 */
+    const g = ensureGroup();                      // 本段工具组（组头等第一张落定的卡才点亮）
+    sealThink(); sealText();                      // 这一笔之后，正文/思考另起块
+    t.card.classList.add("qa-tool-alone");
+    t.card.__qaFlow = true;
+    t.card.__qaGroup = g;
+    bd.appendChild(t.card);
+    qaScrollIntoView();
+    return t;
+  }
+  /* ===== ⑤ 提问卡（AskUserQuestion）=====
+     2026-09-18 用户：「返回了 askuserquestion，需要 ui 在对话框中增加选择显示 而不是显示这个 json」。
+     引擎问「你想执行哪个操作」时，原来只落成一张普通工具卡：questions/options 的 JSON 摊在
+     「输入」里，用户得自己读 JSON 再手打答案。这里换成**可点选的卡**：
+       · **答满即走**（2026-10-10 用户：「回答完应该自动关闭并提交答案继续对话」）：
+         每一问都有选择 → 卡自己把答案发出去（随后自动撤下），**不必再点「提交」**
+         —— 全选中的卡立即发，带可多选那一问的卡停手 1.5s 发（见 06-ask-answer.js::qaAskAutoArm）；
+       · 「其他」行 → 想选不在清单里的答案就直接写，回车/点确认即答。
+     参数 JSON 原样留在卡的 title 上（要排障时鼠标停一下就能看到），但不再摊在卡面上。
+     解析失败时调用方不会走到这里（回落普通工具卡），所以这里 qs 至少有 1 问。
+     ⚠️ 2026-09-30（用户：「确认框不应该显示在消息中 需要显示在对话框上」）：这张卡**不再插进
+        对话流**，改挂到输入框正上方的停靠位 `#qa-askdock`（见 06-ask-answer.js 的「提问卡停靠位」）。
+        卡上因此多了一枚 ×（把它从停靠位撤下 = 不回答，卡不该永远占着输入框上方那块地方）。 */
+  /* qs  = 归一化后的问题数组。两种来源共用这一种结构：
+           · tool_use 参数 → qaAskParse（要猜三种不稳定形状，老版 CLI 只有这条路）
+           · 统一 ask 事件 → qaAskFromEvent（magic-agent 2026-09-18 起归一化过的稳定形状）
+     opts = { title, sid, rid }：title 是排障用的原始载荷；sid / rid = **答案要回到哪条会话**
+          （追加通道的寻址信息，落 dataset，见下）。 */
+  function askCard(name, qs, opts){
+    const list = Array.isArray(qs) ? qs : [];
+    const o = opts || {};
+    const multi = list.length > 1 || list.some(q=>q.multiSelect);
+    /* 收笔那枚「提交」钮**只在卡里有可多选的问时才画**（2026-10-10）：单选是明确的落笔，
+       答满即走（见 06-ask-answer.js::qaAskAutoArm），摆一枚用不上的钮只会让人以为还差一步；
+       而「勾了几项算完」没有别的信号 —— 那一问必须由用户点一下收笔（卡上那行提示照实说）。 */
+    const needSubmit = list.some(q=>q.multiSelect);
+    const card = document.createElement("div");
+    card.className = "qa-ask";
+    card.title = String(o.title || "").slice(0, 600);
+    /* 答案要回到哪条会话 —— 落在 **dataset** 上而不是闭包里：
+       快照恢复走 `innerHTML = snapshot`，闭包随旧节点一起丢，dataset 跟着 HTML 活下来，
+       所以恢复出来的历史提问卡照样答得回去（REQ-22 锁的就是「已答态随快照恢复」）。 */
+    if(o.sid) card.dataset.sid = String(o.sid);
+    if(o.rid != null && o.rid !== "") card.dataset.rid = String(o.rid);
+    card.innerHTML = `
+      <div class="qa-ask-hd">
+        <span class="qa-ask-ico">${QA_ICONS.ask}</span>
+        <span class="qa-ask-tag"></span>
+        <span class="qa-ask-ttl">提问 · 待回答</span>
+        <button type="button" class="qa-ask-x" title="收起这个确认框（不回答）" aria-label="收起这个确认框">×</button>
+      </div>
+      <div class="qa-ask-list"></div>
+      <div class="qa-ask-other">
+        <input type="text" placeholder="其他：不在上面选项里就直接写，回车确认">
+        <button type="button" class="qa-ask-go">确认</button>
+      </div>
+      <div class="qa-ask-ft"${multi ? "" : " hidden"}>
+        ${needSubmit ? '<button type="button" class="qa-ask-sub" disabled>提交</button>' : ""}
+        <span class="qa-ask-hint">${needSubmit
+          ? (list.length > 1 ? "共 " + list.length + " 问 · 可多选，勾完自动提交（也可点提交）" : "可多选，勾完自动提交（也可点提交）")
+          : "共 " + list.length + " 问，都选完自动提交"}</span>
+      </div>
+      <div class="qa-ask-ans" hidden><span class="k">你的回答</span><span class="v"></span></div>`;
+    /* ⚠️ 2026-09-22 审美修订：这枚标签原来**直接把引擎的工具名画在卡头上**
+       （`AskUserQuestion`，9px 等宽 + 蓝框）—— 用户看到的是英文实现细节，
+       读不出「这张卡是在等我回答」。现在标签写人话「需要你确认」，
+       工具名降级进 title（排障时鼠标一悬停仍能看到是哪个工具）。 */
+    const tagEl = card.querySelector(".qa-ask-tag");
+    if(tagEl){
+      tagEl.textContent = "需要你确认";
+      tagEl.title = "引擎提问工具：" + String(name || "AskUserQuestion");
+    }
+    const listEl = card.querySelector(".qa-ask-list");
+    list.forEach((q, qi)=>{
+      const qb = document.createElement("div");
+      qb.className = "qa-ask-qb";
+      qb.dataset.qi = String(qi);
+      qb.dataset.multi = q.multiSelect ? "1" : "0";
+      qb.dataset.q = q.question;
+      const head = document.createElement("div");
+      head.className = "qa-ask-q";
+      if(q.header){
+        const chip = document.createElement("span");
+        chip.className = "qa-ask-chip";
+        chip.textContent = q.header;
+        head.appendChild(chip);
+      }
+      head.appendChild(document.createTextNode(q.question));
+      qb.appendChild(head);
+      const opts = document.createElement("div");
+      opts.className = "qa-ask-opts";
+      q.options.forEach((o)=>{
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "qa-ask-opt";
+        b.dataset.label = o.label;
+        b.setAttribute("role", q.multiSelect ? "checkbox" : "radio");
+        b.setAttribute("aria-checked", "false");
+        b.innerHTML = `<span class="mk"><svg viewBox="0 0 24 24"><path d="M4 12.5l5 5L20 6.5"/></svg></span>
+          <span class="tx"><span class="lb"></span><span class="ds"></span></span>`;
+        b.querySelector(".lb").textContent = o.label;
+        b.querySelector(".ds").textContent = o.description;
+        if(!o.description) b.querySelector(".ds").remove();
+        opts.appendChild(b);
+      });
+      qb.appendChild(opts);
+      listEl.appendChild(qb);
+    });
+    /* 2026-09-30：卡**不进对话流**，改挂输入框上方的停靠位（见 06-ask-answer.js「提问卡停靠位」）——
+       用户：「确认框不应该显示在消息中 需要显示在对话框上」。
+       归属会话由**渲染宿主**反推：可见画布 s 就是当前这条；后台 run 的 holder 由 qaAskDockTaskOf 认领
+       （这条会话切到前台时，卡会跟着搬回停靠位，不会落进对话流）。 */
+    if(typeof qaAskDockAdd === "function") qaAskDockAdd(card, qaAskDockTaskOf(s));
+    else { sealAll(); bd.appendChild(card); }    // 兜底：停靠位没加载时才落进对话流（队尾）
+    let settled = false;                      // 这一问是否已被引擎收尾（见 done）
+    return {
+      card,
+      /* 引擎这一问的收尾（tool_result / 流结束兜底）。**卡不会因此失效**：
+         多数引擎在非交互模式下收不到回答就自己结束了，此时用户点选项仍然是把答案
+         作为追问发回去 —— 那正是这张卡存在的意义，所以这里只更新标题、不禁用。 */
+      done(){
+        if(!qaAskAnswered(card)){
+          const ttl = card.querySelector(".qa-ask-ttl");
+          if(ttl) ttl.textContent = "提问 · 待回答";
+        }
+        settled = true;
+      qaScrollIntoView();
+    },
+    /* 统一 ask 事件后到（magic-agent 会为同一问先发 tool_use、再发 ask）→ 不重画第二张卡，
+       只把「答回去要用的东西」补到这张已有的卡上（sid/rid，见 qaStreamApplyOne 的 ask 分支）。 */
+    bindAsk(o2){
+      const s2 = (o2 && o2.sid) || "";
+      if(s2) card.dataset.sid = String(s2);
+      if(o2 && o2.rid != null && o2.rid !== "") card.dataset.rid = String(o2.rid);
+    },
+    get state(){ return settled ? "ok" : "running"; },
+    };
+  }
+  /* ① 子代理委派卡（.qa-tool.qa-agent）：工具卡变体 + 状态胶囊 + 嵌套活动区。
+     生命周期由 ② 的 system 事件驱动（start/progress/notify 只改胶囊）；
+     最终结果仍按 tool_use id 配对写进「输出」（done）—— 没等到 task_notification
+     就收账时，胶囊在 done 里一并落定，不会留下常驻转圈。 */
+  function agentCall(name, argsPreview, argsFull, promptText){
+    // 委派卡的摘要本来就是 description（见调用处的 desc 取值）→ 按人话渲染
+    const t = mkCard(name, argsPreview, argsFull, true);
+    const card = t.card;
+    card.classList.add("qa-agent");
+    card.querySelector(".qa-tool-ico").innerHTML = QA_ICONS.agent;
+    const chip = document.createElement("span");
+    chip.className = "qa-agent-chip";
+    chip.textContent = "等待启动";
+    card.querySelector(".qa-tool-meta").prepend(chip);
+    const bdEl = card.querySelector(".qa-tool-bd");
+    if(promptText != null && String(promptText).length){
+      const sec = document.createElement("div");
+      sec.className = "qa-tool-sec";
+      /* 段头与「输入 / 输出」同一形制（label + 复制按钮）：任务词是这条委派里最该被复制走的
+         东西（用户常要拿它去别处复用），而它原来连复制入口都没有。 */
+      sec.innerHTML = `<div class="qa-sec-hd"><span class="k">任务词</span>${QA_COPY_BTN}</div><pre></pre>`;
+      sec.querySelector("pre").textContent = String(promptText);
+      bdEl.insertBefore(sec, bdEl.firstChild);    // 任务词置顶（比原始参数 JSON 更可读）
+    }
+    const sub = document.createElement("div");
+    sub.className = "qa-sub";
+    sub.innerHTML = `<div class="qa-sub-h">子代理活动</div>`;
+    bdEl.appendChild(sub);
+    /* 委派卡是里程碑：正文/思考在这一笔处封口，但**不封工具段** —— 它仍属于这一段的
+       「内部活动」，与前后的工具卡同处一段。**运行中留在外面**（卡里挂着子代理的实时活动，
+       藏进折叠组等于把正在跑的委派藏起来）；**落定后同样收进「已调用工具 · N个」**
+       （2026-10-12 口径：历史都进组，外面只留还在跑的那张 —— 见 collapseIntoGroup）。 */
+    const g = ensureGroup();
+    sealThink(); sealText();
+    card.__qaFlow = true;
+    card.__qaGroup = g;
+    bd.appendChild(card);
+    qaScrollIntoView();
+    const api = {
+      done(resultText, ok = true){
+        t.done(resultText, ok);
+        if(chip.classList.contains("run")){       // 通知缺失时兜底落定（完成 → jade 绿）
+          chip.classList.remove("run");
+          if(ok) chip.classList.add("ok");
+          chip.textContent = ok ? "完成" : "未完成";
+        }
+      },
+      get state(){ return t.state; },
+      start(){ chip.textContent = "运行中"; chip.classList.add("run"); },
+      progress(label){ if(chip.classList.contains("run")) chip.textContent = String(label || "进行中"); },
+      notify(label, ok = true){
+        chip.classList.remove("run");
+        if(ok) chip.classList.add("ok");
+        chip.textContent = String(label || (ok ? "完成" : "已结束"));
+      },
+      subTool(nm, pv, full, isDesc){              // ③ 子代理内部工具 → 嵌套卡（样式更紧凑）
+        const st = mkCard(nm, pv, full, isDesc);
+        st.card.classList.add("qa-tool-sub");
+        sub.appendChild(st.card);
+        qaScrollIntoView();
+        return st;
+      },
+      subText(txt){                               // ③ 子代理正文 → 嵌套区文本行
+        const el = document.createElement("div");
+        el.className = "qa-sub-t";
+        el.textContent = String(txt || "");
+        sub.appendChild(el);
+        qaScrollIntoView();
+      },
+      subNote(txt){                               // ③ 子代理思考/回执 → 嵌套区注脚
+        const el = document.createElement("div");
+        el.className = "qa-sub-n";
+        el.textContent = String(txt || "");
+        sub.appendChild(el);
+        qaScrollIntoView();
+      },
+      subImage(uri){                              // ③ 子代理产出的图 → 嵌套区图片
+        const img = document.createElement("img");
+        img.className = "qa-img";
+        img.src = String(uri || "");
+        img.alt = "图片";
+        sub.appendChild(img);
+        qaScrollIntoView();
+      },
+    };
+    /* 委派卡也要能被流收尾兜底落定（胶囊 + 卡状态一起）→ 覆盖 mkCard 挂的那个钩子 */
+    card.__qaDone = api.done;
+    return api;
+  }
+  /* ② 无主系统事件的降级行（父委派卡缺席时）。
+     2026-09-28 起改走**单行标记行**（29-msg-variants 的 qaMarkerNode）：原来只是一行 10px
+     灰字（`.qa-note`），事件里带的 JSON 与状态**全丢**；现在同一格既能给纯文本注脚，
+     也能给「图标 + 标题 + 状态徽章 + 可展开明细」的完整形态（对齐 anywhere 的 Marker/JsonMarker）。
+     ⚠️ 保留 note(text) 这个出口且签名不变：13-dispatch-stream / 24-agent-test 等旧调用方还在用，
+        它们自动升格成标记行（信息只多不少）。 */
+  function markerNode(opts){
+    const n = qaMarkerNode(opts);
+    sealAll();                                  // 标记行是横切事件：三类块一起封口
+    bd.appendChild(n);
+    qaScrollIntoView();
+    return n;
+  }
+  function note(text, opts){
+    return markerNode(Object.assign({ title: String(text || "") }, opts || {}));
+  }
+  /* ④ 分隔条（横切整条会话的事件，如上下文压缩边界） */
+  function sepNode(text, opts){
+    const n = qaSepNode(text, opts);
+    sealAll();
+    bd.appendChild(n);
+    qaScrollIntoView();
+    return n;
+  }
+  /* ⑥ 任务列表（todo-row）：**一条应答里只有一块**，反复调用原地更新。
+     为什么合并：TodoWrite / update_plan 每推进一小步就把**整份清单**重发一次 ——
+     一次调用一张工具卡，会让同一份清单在画布上重复出现 N 次（实测 5 次调用 = 5 份清单），
+     而用户要看的是「现在做到第几步」。合成一块之后，每次调用换的都是这块的内容。
+     落位：当前正文块之前（与「深度思考 / 工具调用 / 任务列表 / 正文」同一列序）；
+     默认展开，点标题栏那枚箭头收起。
+     ⚠️ 节点只建一个（`div.querySelector` 取回已有的那块），第二次起只换内容不新建。
+     ⚠️ 这里**不绑监听**：开合态由 qaTodoFill 落类（29-msg-variants）、点击走
+        #qa-stream 上的事件委托（宿主侧的 bindQaStreamDelegation）——
+        直接用 addEventListener 绑在这块上，画布快照恢复（innerHTML 重建）后就点不动了。
+     ⚠️ 它不是「过程块」：`.qa-todo-panel` 不进段壳、也不进收尾那枚「任务耗时」大组
+        （segFold / wrapTurnIn 只认 `.qa-think` / `.qa-tools`），所以跑完仍看得见。 */
+  function todoList(rows){
+    let host = div.querySelector(".qa-todo-panel");
+    /* 空清单（引擎显式清空 / 这一版参数里没有可解析的条目）：已有那块**如实摘掉**，
+       不留着上一份的残影 —— 「清单空了」与「还停在上一步」是两回事。 */
+    if(!rows || !rows.length){
+      if(host && host.parentNode) host.parentNode.removeChild(host);
+      return null;
+    }
+    if(!host){
+      host = qaTodoNode(rows, { title: "任务列表" });
+      host.classList.add("open");                 // 默认展开
+      bd.insertBefore(host, curText || ensureText());
+    }else{
+      qaTodoFill(host, rows, { title: "任务列表" });
+    }
+    qaScrollIntoView();
+    return host;
+  }
+
+  /* ===== 「任务耗时」分组：一轮收尾时，把这一轮的**历史过程**并进一枚折叠组 =====
+     （2026-10-12 用户：「历史的思考和工具最终又合并在一个任务总耗时的分组里」，形制对齐 TraeWork）
+     · 收的是**思考块 + 工具组**（`.qa-think` / `.qa-tools`），正文留在外面 —— 那是结论，过程才是历史；
+     · **默认收起**（TraeWork 的形态：跑完只留一条「任务耗时 X」，要回看再点开）；
+     · 组落在**第一条过程块原来的位置**上，正文的相对次序因此不变；
+     · 用原生 `<details>`：零脚本、键盘可达，开合态天然写进 HTML（快照往返不丢）。
+     · ⚠️ 时长取**墙上时钟**（消息创建 → 收尾），与收尾行那段「· 总耗时 X」同一量；
+       回放的轮次（`__qaReplay`）用它自己的 `__qaMs`（会话日志的事件自带 `at` 墙钟，
+       回放按「本轮首条事件 → 收尾」算真实间隔；拿不到就不写时间，见 27-conv-log 的 qaSessionReplay），
+       **不编 0.0s**。
+     · 一条过程块都没有的轮（纯问答）不建这个组，免得凭空多一行。
+     ⚠️ 按**容器**各并一枚（2026-10-15）：思考 / 工具落在答复那条的 `.qa-bd`，而**机器侧那条**
+        的（审核轮 / 数字分身，被 qaTraceToLeft 搬进它自己的 `.qa-bd`）原来一枚都并不到 ——
+        那两档的历史里就永远是一长串「已深度思考 / 已调用工具」（与用户这次的报障同形）。 */
+  function wrapTurnIn(host){
+    if(!host || host.__qaTurn) return host ? host.__qaTurn : null;   // 幂等：收尾可能被调用多次
+    /* 合并 = 把**所有段**与没被段包住的散块（兜底）搬进一枚大组，成员**按 DOM 先后**排
+       （段壳按位置展开成它的成员），于是组里仍是真实的时间顺序。 */
+    const members = [], shells = [];
+    [...host.children].forEach((n)=>{
+      if(n.classList.contains("qa-turn")){                 // 段壳 → 展开
+        members.push(...n.querySelectorAll(":scope > .qa-turn-bd > *"));
+        shells.push(n);
+      }else if(n.classList.contains("qa-think") || n.classList.contains("qa-tools")){
+        members.push(n);
+        shells.push(n);
+      }
+    });
+    if(!members.length) return null;
+    const dur = qaDurText(div.__qaReplay ? div.__qaMs : (Date.now() - (div.__qaT0 || Date.now())));
+    const d = document.createElement("details");
+    d.className = "qa-turn";
+    d.innerHTML = `<summary class="qa-turn-sum"><span class="qa-turn-t"></span><span class="qa-turn-n"></span></summary><div class="qa-turn-bd"></div>`;
+    d.querySelector(".qa-turn-t").textContent = "任务耗时" + (dur ? " " + dur : "");
+    /* ⚠️ 数的是「过程项」而不是「工具调用数」：思考块 + 工具组各算一项，与组里那行
+       「已调用工具 · N个」不是一回事（那个数是卡）。这里只给一个「收了几块」的量。 */
+    d.querySelector(".qa-turn-n").textContent = members.length + " 项过程";
+    const body = d.querySelector(".qa-turn-bd");
+    host.insertBefore(d, shells[0]);                       // 落在**第一条过程**的位置（正文的相对次序不变）
+    members.forEach((p)=> body.appendChild(p));            // 搬节点，不重建（计时器 / 计数引用都还在）
+    shells.forEach((n)=>{ if(n.classList.contains("qa-turn")) n.remove(); });   // 段壳已空 → 撤掉
+    host.__qaTurn = d;
+    return d;
+  }
+  function wrapTurn(){
+    sealSeg();                                             // 尾段（还没有正文来打断的那一段）先并
+    const a = wrapTurnIn(bd);
+    const b = wrapTurnIn(segHosts()[1] || null);            // 机器侧那条（有才并）
+    segs.length = 0; segT0 = 0;
+    div.__qaTurn = a || b;
+    return a || b;
+  }
+
+  return {
+    el: div,                                   // 这条消息的根节点（消费方要给整条消息加形态时用：
+                                               //   审查轮那条「审核引擎的回复」= 加个 qa-engine（换「审」头像 + 抬头），见 13-dispatch-stream）
+    /* ⚠️ `think` / `body` 都是**取当前那一块**（时间轴下每段各一块，见文件头的块说明）：
+       `body` 取不到时会按需新建一块正文（24-agent-test 的卡片就靠它写整块内容）。 */
+    get think(){ return curThink ? curThink.el : null; },
+    get body(){ return curText || ensureText(); },
+    beginThinking(){ thinkBegin(); },
+    endThinking(){ thinkEnd(); },
+    beginTools(){ groupBegin(); },
+    endTools(){ groupEnd(); },
+    appendThinking(t){ const c = thinkBegin(); c.body.textContent += t; },
+    appendText(t){
+      ensureText();                            // 没有当前正文块就按到达顺序新起一块
+      pending += t;
+      flushClosed();
+      renderTail();
+    },
+    /** 图片块：KindImage / 原生 image 块 → data URI 直接上正文区。
+     *  图算**正文的一部分**（不是过程块）：归到当前正文块、插在打字预览（.qa-tail）之前 ——
+     *  与流式正文同一位置约定「已渲染段落之后、光标之前」，图后到的文字自然排在图下。
+     *  ⚠️ 与快照/权威全文同命运：只有一个正文块时 rerenderAll 会整体覆盖这一块，图随之一并重来
+     *     （权威全文里本来就带 base64 块，见宿主侧的事件归一）。 */
+    appendImage(uri){
+      if(!uri) return;
+      ensureText();
+      const fig = document.createElement("figure");
+      fig.className = "qa-img";
+      const img = document.createElement("img");
+      img.src = String(uri);
+      img.alt = "生成的图片";
+      fig.appendChild(img);
+      const tail = curText.querySelector(".qa-tail");
+      if(tail) curText.insertBefore(fig, tail); else curText.appendChild(fig);
+      qaScrollIntoView();
+    },
+    setResult(text){ rerenderAll(text); },
+    toolCall,
+    agentCall,
+    askCard,                                   // ⑤ 提问卡（AskUserQuestion → 可点选项）
+    todoList,                                  // ⑥ 任务列表（TodoWrite / update_plan → 一条应答只有一块，原地更新）
+    note,
+    marker: markerNode,                        // ② 单行标记行（图标 + 人话标题 + 状态 + 可展开明细）
+    sep: sepNode,                              // ④ 分隔条（横切整条会话的事件）
+    finish(){
+      // 流式结束:把尾部 pending 也按 markdown 解析一次（行内标记如 ** / ` / []() 此时闭合完整）
+      /* 先兜底落定还在转圈的卡 → 它们会就地收编进本段的折叠组；
+         再定格组头/思考块 —— 顺序反了的话，收编会往一个已经「已调用工具」定格的组里加卡
+         （组头的秒数也就停早了）。 */
+      settleRunningTools(true);                // 还在转圈的卡一律落定（配不到回执的追加卡 / 点停止那条路）
+      settleGroups();                          // 收**所有**还亮着的工具组统计行（不只 curGroup，见 settleGroups）
+      thinkEnd();                              // 收思考块（停表 + 定格）
+      sealText();                              // 尾部落成真块（与旧 finish 同一条落笔处）
+      /* 光标/尾部收干净：每块都摘掉 streaming 与残留的 .qa-tail
+         （换过块时旧的 tail 已在 commitTail 里清掉，这里是兜底）。 */
+      textBlocks.forEach(b=>{
+        b.classList.remove("streaming");
+        const tl = b.querySelector(".qa-tail"); if(tl) tl.remove();
+      });
+      /* 操作行显形（2026-10-09，与上面那两行同一时机 = 「这一轮的正文定型了」）：
+         无论走的是正常收尾 / 出错 / 点停止，只要 finish 被调到，复制与重试就该可用。
+         ⚠️ 六个收尾路径统一走 qaRunEnd → h.finish()，所以放在这里一处即全覆盖。 */
+      acts.hidden = false;
+      /* 最后一步：把这一轮的**历史过程**（思考块 + 工具组）并进一枚「任务耗时 X」折叠组
+         （2026-10-12 用户：「历史的思考和工具最终又合并在一个任务总耗时的分组里」）。
+         ⚠️ 必须放在所有过程块都定格之后：收编（collapseIntoGroup）也往工具组里搬卡，
+            先包就把后面落定的卡挡在组外了。 */
+      wrapTurn();
+      /* 最后一步：收尾一落闸就**粘住**（见 closed）—— 这一轮之后再到的事件（onDone 里等会话产物
+         那段最多 1.5s 的窗口、迟到的 tool_result 收编等）一律按定格态落笔，别再点亮出新的
+         「工具调用中」。放在最后是刻意的：上面的落定与封组仍按原路走，秒数照旧算得准。 */
+      closed = true;
+    },
+    run,
+    /** 改「生成中」胶囊上的文字。
+     *  为什么要它（2026-09-21）：胶囊初值是渲染层按**链首**拼的（`qaModel`，见 04-task-list.js），
+     *  而这一轮真正用哪个模型是**主进程**按配置界面的降级链定的 —— 前一个没额度就换下一个重试
+     *  （同一个 rid 会再推一条 `start`，带上实际模型）。没有这个出口，界面就会写着 A、实际跑的是 B。
+     *  ⚠️ 只动胶囊文字，不重建节点（重建会打断 `.qa-run` 的转圈与裙边，见 verify-dark-chat 的断言）。 */
+    setRunLabel(t){
+      const el = run.querySelector(".qa-run-t");
+      if(el) el.textContent = String(t || "");
+    },
+    /** 改头像右边的**引擎 · 模型小标**（默认是渲染时按当前引擎挂的，见 qaRenderAnswer）。
+     *  说话人不是当前引擎时用（派发轮 = 该需求的引擎 / 模型；被测引擎 = 事件里的引擎）。
+     *  引擎传空串 = 摘掉小标（宁可没有，不写「未知」）；模型空 = 只显示引擎名。
+     *  ⚠️ `modelOnly`（2026-10-20）：头像那一行并着「运行中 · 耗时计时」，
+     *     「引擎 · 模型」整串太长会把秒数挤到换行（见 qaWhoLabel 的 modelOnly）。 */
+    setWho(engine, model, modelOnly){
+      const ico = div.querySelector(".qa-ico"); if(!ico) return;
+      const lb = qaWhoLabel(engine, model, modelOnly);
+      let w = ico.querySelector(".qa-who");
+      if(!lb){ if(w) w.remove(); return; }
+      if(!w){ w = document.createElement("span"); w.className = "qa-who"; ico.appendChild(w); }
+      w.textContent = lb;
+    },
+  };
+}
+/** 把「机器内部活动」搬到**前面那条独立消息**里 —— 审核引擎与数字分身的「深度思考 / 工具调用」。
+ *
+ *  用户 2026-09-22 原话：「审核和数字分身自己的思考和工具调用要显示在左边 但是代表用户身份追问的
+ *  消息要显示在右边」。上一版只在**答复那条消息内部**把这两块靠到左边（`app.css` 的 M4），
+ *  用户看过后仍要「显示在左边」—— 所以这里升级成**真的搬到一条独立消息**：那条的语义是
+ *  「机器在动」（与 bot 答复同一条左边线、头像也在左），另一条才是「它说了什么」。
+ *
+ *  ⚠️ **搬节点，不重建**：思考块 / 工具组（`.qa-think` / `.qa-tools`）都是**带着句柄引用**的
+ *     （计时器、计数、展开体），重建会让流式期间的「思考中 · X.Xs」「工具调用 · N个」全部失联
+ *     （表现为数字不再跳）。搬完引用依旧有效 —— 这正是「思考 / 工具」能跟着引擎实时更新、
+ *     而外层换了个容器也不受影响的原因。
+ *  ⚠️ 时间轴下**每段各一块**（2026-10-12）：这里搬的可能是**多块**（全部 querySelectorAll），
+ *     且**即使当前一块都没有也要把壳建出来** —— 之后新起的机器块由 qaRenderAnswer 的
+ *     machineHost() 直接落进这条（旧实现预置了空的思考块/工具组，恰好掩盖了「没壳就落错地方」）。
+ *  ⚠️ 新消息**先 hidden**：这两块在首条思考 / 首次工具调用之前是隐藏的，空着的一条消息会白占高度。
+ *     显形由 `thinkBegin` / `groupBegin` 里那两行 `__traceWrap.hidden = false` 负责（同文件上方）。
+ *  ⚠️ 头像与答复那条**同一个**（`分` / `审`）：机器的活动属于**它自己**；
+ *     两枚头像的样式都是自包含的（`.qa-av.qa-av-sim` / `.qa-av-txt.qa-av-rev` 自带底色与字色），
+ *     所以直接拷 ico 的 innerHTML 就与答复那条长得一模一样。
+ *  ⚠️ **2026-09-30 之后这条搬移只剩「机器 / 说话人」这一层意义**：审核引擎的回复也改到左边了
+ *     （用户：「审核消息应该显示在左边 左对齐不是右对齐」），不再靠左右分「审核 / 执行者」；
+ *     数字分身的卡片那条仍在右（它代表用户身份那一侧，见 `atcCardStart`），搬移对它照旧是「机器在左」。
+ *  ⚠️ **历史快照**里这两块仍在原消息里（存的是当时的 HTML）—— 那条路由 `app.css` 的 M4（`:has()`）
+ *     兜住：数字分身卡片那路仍生效；审核那两档已整条在左边，本就无需兜底。 */
+function qaTraceToLeft(h, engine, model){
+  const el = h && h.el;
+  if(!el || !el.parentNode) return null;
+  if(el.__traceWrap) return el.__traceWrap;        // 幂等：同一轮里重复调用只建一次
+  const wrap = document.createElement("div");
+  wrap.className = "qa-msg qa-trace";
+  wrap.hidden = true;                              // 机器块都还藏着 → 整条不占位
+  wrap.innerHTML = `<div class="qa-ico"></div><div class="qa-bd"></div>`;
+  const tico = wrap.querySelector(".qa-ico");
+  const ico = el.querySelector(".qa-ico");
+  if(ico) tico.innerHTML = ico.innerHTML;
+  /* 头像右边挂**机器侧自己的引擎 · 模型**：先摘掉从答复那条拷来的旧 `.qa-who`
+     （答复那条若是左侧形状会自带一枚，那是说话人的，不是这台机器的），再按 engine/model 重挂。 */
+  const oldWho = tico.querySelector(".qa-who"); if(oldWho) oldWho.remove();
+  tico.insertAdjacentHTML("beforeend", qaWhoHtml(engine, model));
+  const tbd = wrap.querySelector(".qa-bd");
+  /* 已经长出来的机器块搬过去（每段一块，可能不止一块）；之后新起的由 machineHost() 直接落这边。
+     ⚠️ 过程中并出的**段壳**（`.qa-turn[data-seg]`）整只搬走 —— 只挑 `.qa-think` / `.qa-tools`
+        会把段里的成员留在答复那条里（它们已经不是 `.qa-bd` 的直系子节点了，见 sealSeg）。 */
+  [...el.querySelectorAll(".qa-bd > .qa-think, .qa-bd > .qa-tools, .qa-bd > .qa-turn")].forEach((p) => tbd.appendChild(p));
+  el.parentNode.insertBefore(wrap, el);            // 排在答复那条**之前** = 机器先说「我在动」、再是「我说了什么」
+  el.__traceWrap = wrap;                           // 显形由 thinkBegin / groupBegin 摘 hidden；machineHost() 也认它
+  return wrap;
+}
+/** 总耗时文案（用户 2026-10-10：「对话也在结束时显示一下总耗时」；形制对齐 TraeWork 的
+ *  「任务耗时 7m 14s」）：<60s 给一位小数的秒（与旧收尾行那个「12.3s」同一形制）；
+ *  ≥60s 给「7m 14s」；≥1h 给「1h 2m」。**拿不到耗时**（没给起点 / 负数 / 非数）回 ''，
+ *  调用方据此不拼这一段（宁可不写，也不编一个 0s）。 */
+function qaDurText(ms){
+  /* null / undefined / 空串 = **没给起点**（不是「零秒」）→ 不编：`Number(null)` 是 0，
+     不先拦一道的话收尾行会冒出「总耗时 0.0s」这种假数（实测踩过）。 */
+  if(ms == null || ms === "") return "";
+  const n = Number(ms);
+  if(!Number.isFinite(n) || n < 0) return "";
+  const sec = Math.round(n / 1000);
+  if(sec < 60) return (n / 1000).toFixed(1) + "s";
+  const m = Math.floor(sec / 60);
+  if(m < 60) return `${m}m ${sec % 60}s`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+/** 收尾行 —— 对话里所有「这一轮结束了」的落笔处（普通对话 / 需求派发 / 模拟测试共用）。
+ *  `elapsedMs`（2026-10-10 加）＝ 这一轮的**总耗时**（墙上时钟：从发出去到收尾）：
+ *  给了就在状态语后面拼一段「· 总耗时 7m 14s」；不给（拿不到起点 / 老调用方）只写状态语。
+ *  ⚠️ 与引擎自报的 `latency_ms` 不是一回事：那个只算引擎自己那一跑，不含排队与冷启动，
+ *     而且引擎不给就没有 —— 收尾行要的是「这一轮一共花了多久」，所以用墙上时钟自己算。 */
+function qaRenderDone(ok, label, host, elapsedMs){
+  // host = 这一轮的落笔处（见 qaRunHost）：后台跑的收尾行要落进它自己的画布，
+  // 不能写死 #qa-stream —— 否则「切走那条跑完了」会在**当前显示的**会话里凭空多出一行收尾。
+  const s = host || $("#qa-stream"); if(!s) return;
+  const t = qaDurText(elapsedMs);
+  const d = document.createElement("div");
+  d.className = "qa-done" + (ok ? "" : " err") + " qa-pin";
+  d.innerHTML = `<span class="d"></span><span></span>`;
+  d.querySelector("span:last-child").textContent = String(label || "") + (t ? ` · 总耗时 ${t}` : "");
+  s.appendChild(d);
+  qaScrollIntoView();
+}