magic-agent 2.4.3 → 2.6.0

package/client-ui/shared/conv/19-attachments.js

@@ -62,6 +62,52 @@ function attErrText(err){
 /** 缩略图地址：落盘后用真实 URL，落盘途中用本地 objectURL */
 function attThumbUrl(a){ return a.remoteUrl || a.objectUrl || ""; }
 
+/* ── 历史附件（2026-10-25 用户报障：「点击历史会话时发送的参考图没了」）──────────
+   根因：core 落盘的附件只有 **path + mime** 两个字段（internal/agent/attachments.go 的
+   Attachment），既没有 remoteUrl 也没有 objectUrl —— attThumbUrl 对它恒回空，
+   qaRenderMine 里「拿不到地址就跳过」的分支把整排缩略图全吞了。
+   这里给历史那档一条**独立的取址链**，与实时附件互不干扰：
+     ① 实时字段（remoteUrl / objectUrl）优先 —— 两档同形时行为不变；
+     ② 宿主回读通道（desk.fileUrl / desk.mediaUrl。组件宿主在 installDeskProbe 里把
+        mediaUrl 挂成 transport.fileUrl = /desk/media?path=…，按绝对路径回读，上传目录
+        内外的本机媒体文件都通）；
+     ③ qaShotSrc（file:// 壳内直接拼 file://；产物库路径走内置后端）；
+     ④ 都没有 → 空串，上层跳过 —— 宁可没有图，也不画一个必然裂的框（与 qaShotSrc
+        预览态的口径一致）。 */
+/** 附件显示名：实时那档有 name；历史附件只有 path → 取 basename，并去掉上传时
+ *  服务端加的 <UnixNano>- 前缀，还原成用户上传时的文件名（与组件宿主 attNode 同一口径）。 */
+function attHistName(a){
+  const n = a && a.name ? String(a.name) : "";
+  if(n) return n;
+  const p = String((a && a.path) || "");
+  const base = p.split(/[\\/]/).pop() || "";
+  return base.replace(/^\d{13,}-/, "") || "截图";
+}
+/** 这条附件是不是图（历史附件只有 mime/path；QA_IMG_EXT 与缩略图同一份后缀表）。 */
+function attHistIsImage(a){
+  if(!a) return false;
+  const mime = String(a.mime || "");
+  if(mime) return /^image\//i.test(mime);
+  return QA_IMG_EXT.test(attHistName(a));
+}
+/** 历史附件 → 可显示地址（取址链见上）。实时附件请继续走 attThumbUrl。 */
+function attHistUrl(a){
+  if(!a) return "";
+  if(a.remoteUrl) return a.remoteUrl;
+  if(a.objectUrl) return a.objectUrl;
+  const p = String(a.path || "").trim();
+  if(!p) return "";
+  const via = (name)=>{
+    const f = qaDeskFn(name);
+    if(typeof f !== "function") return "";
+    try{ return f(p) || ""; }catch(e){ return ""; }
+  };
+  const u = via("fileUrl") || via("mediaUrl");
+  if(u) return u;
+  if(typeof qaShotSrc === "function"){ try{ return qaShotSrc(p) || ""; }catch(e){} }
+  return "";
+}
+
 /** 落盘返回的 url → 浏览器可直接用的绝对地址。
  *  壳内与预览态都拿得到 prdBackendBase（同一个内置后端）；
  *  file:// 直开且后端未就绪时返回空 —— 那种情况继续用 objectURL，
@@ -393,6 +439,9 @@ function qaArtKind(p){
   if(QA_IMG_EXT.test(s)) return "image";
   if(/\.(mp4|mov|m4v|webm|mkv|avi)$/i.test(s)) return "video";
   if(/\.(mp3|wav|m4a|aac|ogg|flac)$/i.test(s)) return "audio";
+  if(/\.(?:html?|xhtml)$/i.test(s)) return "html";      // HTML 产物：产物卡里嵌 iframe 预览
+                                                        //（是否「自包含可预览」由 qaHtmlStandalone
+                                                        //  按内容判，见 qaArtMount 的换卡逻辑）
   if(QA_ART_EXT.test(s)) return "file";
   return "";
 }
@@ -608,10 +657,34 @@ function qaArtCollect(text){
   return out.slice(0, 12);                                  // 一次最多画 12 张（多了就不是「产物」了）
 }
 
-/** 一张产物卡（按类型分流：图 / 视频 / 音频 / 其它文件）。 */
-function qaArtNode(it){
-  const kind = qaArtKind(it.abs) || "file";
-  const name = String((it.abs || "").split("/").pop() || "文件");
+/** HTML 产物是否「自包含、可独立预览」（2026-10-24 用户：「index.html这种非静态页面要排除
+ *  不需要预览」「按文件名区分不行」→ 改**内容**判据）：
+ *  读文件头（`/desk/path-read`，512KB 上限）扫 `<script src>` / `<link href>` ——
+ *  引用了**外部 js / css**（相对 / 绝对路径，非 data: / 远端）的就是应用入口或页面壳，
+ *  单塞一个 iframe 里预览出来是白板或半个页面 → 返 false，退回普通文件卡。
+ *  ⚠️ 通道拿不到 / 读失败 / 太大读不了 → 返 true（宁可照画，不凭猜把卡降级）。 */
+function qaHtmlStandalone(p){
+  const rd = qaDeskFn("pathRead");
+  if(!rd) return Promise.resolve(true);
+  return Promise.resolve(rd({ path: String(p), base: qaArtBase() })).then((r)=>{
+    if(!r || !r.ok || typeof r.text !== "string") return false;   // tooBig / 读不到：多半是应用入口
+    const t = r.text.slice(0, 65536).toLowerCase();
+    const re = /(?:src|href)\s*=\s*["']([^"']+)["']/g;
+    let m;
+    while((m = re.exec(t))){
+      const u = m[1].trim();
+      if(!u || /^(?:data:|https?:|\/\/|#|mailto:)/i.test(u)) continue;
+      if(/\.(?:m?js|css)(?:[?#]|$)/i.test(u)) return false;       // 引了外部脚本 / 样式 → 不自包含
+    }
+    return true;
+  }).catch(()=> true);
+}
+
+/** 一张产物卡（按类型分流：图 / 视频 / 音频 / HTML / 其它文件）。
+ *  `force`（2026-10-24）＝ 强制按这一档画（HTML 换卡逻辑用：入口页降级成普通文件卡）。 */
+function qaArtNode(it, force){
+  const kind = force || qaArtKind(it.abs) || "file";
+  const name = String((it.abs || "").split(/[\\/]/).pop() || "文件");
   const card = document.createElement("div");
   card.className = "qa-art qa-art-" + kind;
   card.dataset.path = it.abs || "";
@@ -627,6 +700,15 @@ function qaArtNode(it){
     if(kind === "video") m.playsInline = true;
     card.appendChild(m);
   }
+  if(kind === "html"){                                      // HTML：iframe 就地预览（2026-10-24 用户：
+    const f = document.createElement("iframe");             // 「会话产物如果有html 现在没显示预览效果」）
+    f.src = qaArtUrl(it.abs);
+    f.title = name;
+    f.setAttribute("sandbox", "allow-scripts allow-same-origin allow-popups allow-forms");
+    f.setAttribute("loading", "lazy");
+    f.setAttribute("draggable", "false");
+    card.appendChild(f);
+  }
   const cap = document.createElement("div");
   cap.className = "qa-art-cap";
   if(kind === "file"){                                      // 其它文件：后缀徽标 + 名字 + 大小
@@ -726,7 +808,7 @@ function qaArtMount(host, paths, opts){
       if(!buckets.has(k)) buckets.set(k, []);
       buckets.get(k).push(x);
     });
-    ["image", "video", "audio", "file"].forEach((k)=>{
+    ["image", "video", "audio", "html", "file"].forEach((k)=>{
       const arr = buckets.get(k);
       if(!arr || !arr.length) return;
       const row = document.createElement("div");
@@ -734,6 +816,22 @@ function qaArtMount(host, paths, opts){
       arr.forEach((x)=> row.appendChild(qaArtNode(x)));
       host.appendChild(row);
     });
+    /* HTML 产物卡是**异步定形**的：先按 html 画（iframe 预览），随后读文件头判「自包含」，
+       引用了外部 js / css 的（index.html 这类应用入口）降级成普通文件卡 —— 内容判据，
+       不按文件名（2026-10-24 用户：「index.html这种非静态页面要排除」「按文件名区分不行」）。 */
+    hit.forEach((x)=>{
+      if(qaArtKind(x.abs) !== "html") return;
+      qaHtmlStandalone(x.abs).then((ok)=>{
+        if(ok) return;
+        const cards = host.querySelectorAll(".qa-art-html");
+        for(const c of cards){
+          if(qaArtCanon(c.dataset.path) === qaArtCanon(x.abs)){
+            c.parentNode.replaceChild(qaArtNode(x, "file"), c);
+            break;
+          }
+        }
+      }).catch(()=>{ /* 换不了就保持原样 */ });
+    });
     return hit.length;
   }).catch(()=> 0);                                           // 探针失败 = 当作「都不是产物」，正文照旧
 }
@@ -803,6 +901,59 @@ function qaArtDrop(card){
   }, true);
 })();
 
+/* ── HTML 产物 · 点击打开（2026-10-24 用户：「预览是缩略效果了 要支持点击查看」
+   → 「现在有内置浏览器啊 点击跳转打开啊」）────────────────────────────────
+   点卡片：宿主有内置浏览器（`MagicHost.openBrowser`，移动端已挂）就**跳内置浏览器**；
+   没有的宿主退回**内核自画的全屏预览层**（不依赖宿主能力，PC / magic-test 通吃），
+   Esc / 关闭按钮退出。
+   ⚠️ 缩略 iframe 设 `pointer-events:none`（CSS）：iframe 内部的点击不会冒泡到卡片，
+      不设的话「点卡片」只有边条能点中；代价是缩略态不能滚里面内容 —— 反正要看就点开。
+   ⚠️ 页面级一次性挂载，与上面 error 收尾同一个形制。 */
+(function(){
+  if(typeof document === "undefined" || window.__qaArtHtmlPeek) return;
+  window.__qaArtHtmlPeek = true;
+  let layer = null;
+  const close = ()=>{
+    if(layer){ layer.parentNode && layer.parentNode.removeChild(layer); layer = null; }
+    document.removeEventListener("keydown", onKey);
+  };
+  function onKey(e){ if(e && e.key === "Escape") close(); }
+  function openPeek(p, u){
+    close();
+    layer = document.createElement("div");
+    layer.className = "qa-art-html-peek";
+    const bar = document.createElement("div");
+    bar.className = "qa-art-html-peek-bar";
+    const t = document.createElement("span");
+    t.className = "qa-art-html-peek-t";
+    t.textContent = String(p).split(/[\\/]/).pop() || p;
+    const x = document.createElement("button");
+    x.type = "button"; x.className = "qa-art-html-peek-x"; x.textContent = "关闭";
+    x.addEventListener("click", close);
+    bar.appendChild(t); bar.appendChild(x);
+    const f = document.createElement("iframe");
+    f.src = u; f.title = t.textContent;
+    f.setAttribute("sandbox", "allow-scripts allow-same-origin allow-popups allow-forms");
+    layer.appendChild(bar); layer.appendChild(f);
+    document.body.appendChild(layer);
+    document.addEventListener("keydown", onKey);
+  }
+  document.addEventListener("click", function(e){
+    const card = e.target && e.target.closest ? e.target.closest(".qa-art-html") : null;
+    if(!card || layer) return;
+    const p = String(card.dataset.path || "").trim();
+    if(!p || typeof qaArtUrl !== "function") return;
+    const u = qaArtUrl(p);
+    if(!u) return;                                          // 拼不出地址（预览态）→ 不动
+    e.preventDefault();
+    try{
+      const ob = (typeof window !== "undefined" && window.MagicHost) ? window.MagicHost.openBrowser : null;
+      if(typeof ob === "function"){ ob(u); return; }        // 有内置浏览器 → 跳浏览器
+    }catch(err){ /* 宿主通道不通 → 退全屏层 */ }
+    openPeek(p, u);
+  }, false);
+})();
+
 /* ── 会话产物 · 消息末尾的「本轮产物」（2026-10-15）─────────────────────────
    用户原话：「会话有新的图片、视频文件产生 应该在消息结束时附加在末尾作为会话产物显示预览」。
    正文里写出来的产物路径早就有渲染（qaShotsMount / qaArtMount：图变缩略图、视频变就地播放器），
@@ -819,7 +970,7 @@ function qaArtDrop(card){
    ⚠️ 与正文里已经画过的**不重复**（按绝对路径与文件名双判）：用户要的是「正文没提的也看得见」，
       正文里已经有的再画一遍就成了同一张图出现两次。
    ⚠️ 只**收**不摘、只**补**不改：正文与工具输出原文一个字都不动。 */
-const QA_TURN_ART_KIND = /^(?:image|video|file)$/;
+const QA_TURN_ART_KIND = /^(?:image|video|file|html)$/;
 /** 记一条候选路径进**这一轮**的产物集（去重；留图 / 视频 / 文件三档）。 */
 function qaTurnArtsNote(run, p){
   const s = String(p == null ? "" : p).trim();

package/client-ui/shared/conv/27-conv-ledger.js

@@ -313,7 +313,10 @@ function qaSessionPlayer(){
         }catch(e){ /* 收尾失败不影响回放 */ }
         h = null;
       }else if(arts){ arts.flush(null); }        // 没有答复卡的一轮：清掉残留，别串到下一轮
-      qaRenderMine(String(ev.text || ""), [], { hosted: !!ev.hosted });
+      /* 历史附件（参考图）随 user 事件落盘（{path, mime}）：透传给内核的 attHistUrl
+         按路径换回读地址 —— 与 93-rail 同一口径（2026-10-25 用户报障修复）。 */
+      qaRenderMine(String(ev.text || ""),
+        Array.isArray(ev.attachments) ? ev.attachments : [], { hosted: !!ev.hosted });
       t0 = atMs(ev);
       continue;
     }
@@ -349,7 +352,7 @@ function qaSessionPlayer(){
       qaRenderDone(!failed && !stopped,
         failed ? "调用失败 · " + String(ev.reason || ev.error || "未知错误").slice(0, 200)
           : stopped ? "已停止" : "已完成",
-        null, turnMs || null);
+        null, turnMs || null, failed ? ev : null);
       if(arts) arts.flush(h);                   // 终态之后这一轮的产物补在消息末尾（与实时 onDone 同位）
       t0 = 0;                                   // 这一轮收尾了：下一轮（若没有 user 事件）重新起算
       /* ⚠️ 句柄必须一起置空（2026-10-21 用户：「同一轮对话 显示成了两个」）：

package/client-ui/shared/conv/29-msg-variants.js

@@ -255,6 +255,87 @@ function qaMarkerNode(opts){
   return wrap;
 }
 
+/* ---------- 错误显示卡（终态失败的统一落笔）----------
+   用户 2026-10-23：「没有设计错误显示卡 现在是普通的 json 文本」—— 失败那一轮原来只落一行
+   `.qa-done.err` 等宽灰字（「调用失败 · <reason>」），没有卡片形态。这里补一张**真正的卡**：
+   朱砂描边 + 淡红底的卡片面，抬头是告警图标 + 「调用失败」标题 + 「失败」状态徽章，
+   主体是**根因**（reason，没被截断，人话那一句），底部可展开「错误详情」（完整错误链 /
+   JSON，走 qaCodeFrameNode，可复制）。
+
+   ⚠️ 与标记行（qaMarkerNode）的分工：control_error / command / notice 那种**过程性**的失败
+       仍落标记行（它们不是这一轮的终态，只是过程里的一次失败通知）；这张卡只给**这一轮真的
+       以失败收场**的终态（error / turn_failed / 桥不可用 / 回放失败）。两条形态不重叠。
+   ⚠️ 快照重建安全：整张卡的状态（开合）都靠 class / data-*，点击走 #qa-stream 事件委托
+       （见 07-stream-delegation 的 `.qa-mk-row` 分支）—— 展开详情那块直接复用 `.qa-mk`
+       那套词汇，所以委托不用为这张卡单独加逻辑，快照恢复出来的卡照样能点开。
+   ⚠️ 根节点**保留 `.qa-done` 类**：收尾行契约（`tests/check-conv-shared-host.mjs` 数 `.qa-done`）
+       只认这个类，改类名会让那条断言失守。卡片形态靠 `.qa-errcard` 额外类实现。 */
+function qaErrorCardNode(opts){
+  const o = opts || {};
+  const t = o.elapsedMs || "";
+  const det = o.detail;
+  let reason = "";
+  let chain = null;
+  /* 优先从结构化错误信封取根因与完整链（reason 是最内层原因、error 是带引擎包装的整条链）；
+     没有信封（桥异常 / 抛错）就退回 label 里那段，再不行给「未知错误」。 */
+  if(det && typeof det === "object"){
+    reason = String(det.reason || "").trim();
+    chain = det.error != null && String(det.error).trim() ? det.error
+          : det.message != null && String(det.message).trim() ? det.message
+          : null;
+  }
+  if(!reason && typeof o.label === "string"){
+    reason = String(o.label)
+      .replace(/^调用失败\s*·\s*/, "")
+      .replace(/\s*·\s*总耗时[\s\S]*$/, "")
+      .trim();
+  }
+  if(!reason) reason = "未知错误";
+
+  const wrap = document.createElement("div");
+  wrap.className = "qa-done err qa-errcard";
+
+  const hd = document.createElement("div");
+  hd.className = "qa-ec-hd";
+  hd.innerHTML =
+    '<span class="qa-ec-ico">' + (QA_V_ICONS.alert || "") + '</span>'
+    + '<span class="qa-ec-tt">调用失败</span>'
+    + qaStatusBadgeHtml("failed");
+  wrap.appendChild(hd);
+
+  const bd = document.createElement("div");
+  bd.className = "qa-ec-bd";
+  const rp = document.createElement("p");
+  rp.className = "qa-ec-reason";
+  rp.textContent = reason;
+  bd.appendChild(rp);
+  if(t){
+    const mt = document.createElement("div");
+    mt.className = "qa-ec-meta";
+    mt.textContent = "总耗时 " + t;
+    bd.appendChild(mt);
+  }
+  /* 完整错误链：复用 `.qa-mk` 词汇（行 + 明细），点击开合走委托，快照安全 */
+  if(chain != null && String(chain).trim()){
+    const mk = document.createElement("div");
+    mk.className = "qa-mk";
+    const row = document.createElement("div");
+    row.className = "qa-mk-row";
+    row.dataset.tog = "1";
+    row.innerHTML = '<span class="qa-mk-chev">' + (QA_V_ICONS.chev || "") + '</span>'
+                  + '<span class="qa-mk-tt">错误详情</span>';
+    mk.appendChild(row);
+    const mkbd = document.createElement("div");
+    mkbd.className = "qa-mk-bd";
+    const isStr = typeof chain === "string";
+    mkbd.appendChild(qaCodeFrameNode("error", isStr ? String(chain) : JSON.stringify(chain, null, 2)));
+    mk.appendChild(mkbd);
+    bd.appendChild(mk);
+  }
+  wrap.appendChild(bd);
+  return wrap;
+}
+
 /* ---------- ④ 分隔条（anywhere Marker variant="separator"）----------
    用在「横切整条会话」的事件上 —— anywhere 那边是**会话压缩**（`MarkerContentKind="compact"`，
    进行中/已完成两种文案）。分隔条不是谁说的话，形状本身就在说「这里是一条分界」。

package/client-ui/shared/conv/conv.css

@@ -465,12 +465,12 @@
    气泡照常可读（用户要能确认自己写的是什么），只把底色压淡 + 虚线边 + 底下补一行
    「排队中 · 上一轮结束后自动发送」—— **不隐藏、不挪走**，否则就是这次报障的
    「追问没在对话区显示」。虚线边框同时说明它不是「已送达」那种实心状态。 */
-.qa-msg.qa-mine.is-queued .qa-bd{border-style:dashed;border-color:var(--queued,#8B5CF6);
+.qa-msg.qa-mine.is-queued .qa-bd{border-style:dashed;border-color:var(--queued);
   background:linear-gradient(180deg,#FAF7FF,#F3EEFF)}
 .qa-msg.qa-mine.is-queued .qa-bd::after{content:"排队中 · 上一轮结束后自动发送";
-  display:block;margin-top:6px;font-size:11.5px;line-height:15px;color:var(--queued,#8B5CF6)}
+  display:block;margin-top:6px;font-size:11.5px;line-height:15px;color:var(--queued)}
 [data-theme="dark"] .qa-msg.qa-mine.is-queued .qa-bd{background:#241E33;border-color:#7C5CE0}
-[data-theme="dark"] .qa-msg.qa-mine.is-queued .qa-bd::after{color:#A98CF5}
+[data-theme="dark"] .qa-msg.qa-mine.is-queued .qa-bd::after{color:var(--queued)}
 /* 排队期间被取消（`is-cancelled`）：气泡留着当回执，但明确说它不会被执行。
    用灰色虚线而不是红色 —— 用户自己撤的，不是失败，别用报错的颜色吓人。 */
 .qa-msg.qa-mine.is-cancelled .qa-bd{border-style:dashed;border-color:var(--line);
@@ -549,6 +549,33 @@
 
 .qa-art-video video{display:block;max-width:280px;max-height:190px;background:#000}
 
+/* HTML 产物卡：iframe 就地预览（2026-10-24）—— 固定尺寸与视频同一档，可滚动看整页。
+   缩略 iframe 关掉指针事件（点击不冒泡出 iframe，关了才能「点卡片看大图」），光标用放大镜。 */
+.qa-art-html{cursor:zoom-in}
+
+.qa-art-html iframe{display:block;width:280px;height:190px;border:0;background:#fff;pointer-events:none}
+
+.qa-arts-html{display:grid;grid-template-columns:repeat(auto-fill,280px);gap:8px}
+
+.qa-arts-html .qa-art-html{width:280px}
+
+.qa-arts-html .qa-art-cap{max-width:none}
+
+/* HTML 产物全屏预览层（点击卡片弹出，内核自画，见 19-attachments 的 __qaArtHtmlPeek）：
+   深蒙层 + 顶条（文件名 / 关闭）+ 撑满余下的 iframe。 */
+.qa-art-html-peek{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
+  gap:8px;padding:20px;background:rgba(28,25,23,.62)}
+
+.qa-art-html-peek-bar{display:flex;align-items:center;gap:10px}
+
+.qa-art-html-peek-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-family:var(--mono);font-size:12px;color:#F5F4F3}
+
+.qa-art-html-peek-x{flex:0 0 auto;padding:3px 12px;border-radius:8px;border:1px solid rgba(245,244,243,.35);
+  background:transparent;color:#F5F4F3;font-size:12px;cursor:pointer}
+
+.qa-art-html-peek iframe{flex:1 1 auto;width:100%;border:0;border-radius:10px;background:#fff}
+
 .qa-art audio{display:block;width:260px;margin:8px}
 
 .qa-art-cap{display:flex;align-items:center;gap:7px;padding:6px 9px;max-width:280px;
@@ -864,7 +891,7 @@
   stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 
 .qa-ask-tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:1.5px 7px;
-  border-radius:99px;border:1px solid rgba(79,70,229,.28);color:var(--indigo);background:var(--halo-indigo)}
+  border-radius:99px;border:1px solid color-mix(in srgb, var(--indigo) 28%, transparent);color:var(--indigo);background:var(--halo-indigo)}
 
 .qa-ask-ttl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--paper-mute);margin-left:auto}
 
@@ -883,7 +910,7 @@
   padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;
   cursor:pointer;transition:border-color .18s,background .18s}
 
-.qa-ask-opt:hover{border-color:rgba(79,70,229,.45);background:var(--halo-indigo)}
+.qa-ask-opt:hover{border-color:color-mix(in srgb, var(--indigo) 45%, transparent);background:var(--halo-indigo)}
 
 .qa-ask-opt .mk{width:15px;height:15px;flex:none;margin-top:1px;border-radius:5px;
   border:1.5px solid var(--line);display:grid;place-items:center;color:var(--paper-mute)}
@@ -910,18 +937,18 @@
 .qa-ask-other input{flex:1;min-width:0;padding:6px 9px;border:1px solid var(--line);
   border-radius:8px;background:#fff;font-family:var(--serif);font-size:12px;color:var(--paper)}
 
-.qa-ask-other input:focus{outline:none;border-color:rgba(79,70,229,.5)}
+.qa-ask-other input:focus{outline:none;border-color:color-mix(in srgb, var(--indigo) 50%, transparent)}
 
 .qa-ask-other button{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:8px;
   background:#fff;font-family:var(--serif);font-size:12px;color:var(--paper-dim);cursor:pointer}
 
-.qa-ask-other button:hover{border-color:rgba(79,70,229,.45);color:var(--indigo)}
+.qa-ask-other button:hover{border-color:color-mix(in srgb, var(--indigo) 45%, transparent);color:var(--indigo)}
 
 .qa-ask-ft{display:flex;align-items:center;gap:8px;margin-top:8px}
 
 .qa-ask-ft[hidden],.qa-ask-ans[hidden]{display:none}
 
-.qa-ask-sub{flex:none;padding:5px 14px;border:1px solid rgba(79,70,229,.4);border-radius:99px;
+.qa-ask-sub{flex:none;padding:5px 14px;border:1px solid color-mix(in srgb, var(--indigo) 40%, transparent);border-radius:99px;
   background:var(--halo-indigo);font-family:var(--serif);font-size:12px;color:var(--indigo);cursor:pointer}
 
 .qa-ask-sub:disabled{opacity:.4;cursor:default;border-color:var(--line);background:transparent;
@@ -988,6 +1015,39 @@
 
 .qa-done.err{color:var(--cinnabar-hi)}
 
+/* 错误显示卡（终态失败）：朱砂描边 + 淡红底的卡片面（见 29-msg-variants 的 qaErrorCardNode）。
+   ⚠️ 根节点带 `.qa-done` 类（收尾行契约要数它），这里把它从「等宽灰字行」翻成「块级卡片」：
+      display:block 盖掉 `.qa-done` 的 flex 行布局；颜色交给子元素，根只留卡片面。 */
+.qa-errcard{display:block;margin:8px 0 4px;padding:10px 12px;
+  border:1px solid rgba(214,64,42,.38);border-radius:var(--r-md);background:rgba(214,64,42,.06)}
+
+.qa-errcard + .qa-errcard{margin-top:0}
+
+.qa-ec-hd{display:flex;align-items:center;gap:8px}
+
+.qa-ec-ico{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--cinnabar-hi)}
+
+.qa-ec-ico svg{width:15px;height:15px;display:block;stroke:currentColor;fill:none;
+  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+
+.qa-ec-tt{flex:1;min-width:0;font-family:var(--font);font-size:13px;font-weight:600;color:var(--cinnabar-hi)}
+
+.qa-ec-bd{margin-top:8px}
+
+.qa-ec-reason{margin:0;font-size:12.5px;line-height:1.6;color:var(--paper-dim);
+  white-space:pre-wrap;word-break:break-word}
+
+.qa-ec-meta{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--paper-mute)}
+
+/* 卡片里的可展开详情（复用 .qa-mk 词汇）；把它的左缩进让出来，贴着卡片内边距更顺 */
+.qa-errcard .qa-mk{margin:8px 0 0}
+
+.qa-errcard .qa-mk-bd{padding-left:2px}
+
+[data-theme="dark"] .qa-errcard{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.42)}
+
+[data-theme="dark"] .qa-ec-reason{color:#E7E5E4}
+
 .qa-reqacts{display:flex;flex-wrap:wrap;gap:8px;padding:10px 2px 2px;justify-content:flex-start}
 
 .qa-reqacts button{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:5px 12px;
@@ -1104,7 +1164,7 @@
 
 [data-theme="dark"] .qa-ask-hd{color:#E5E5E5}
 
-[data-theme="dark"] .qa-ask-tag{color:#818CF8;border-color:rgba(129,140,248,.4);background:rgba(129,140,248,.1)}
+[data-theme="dark"] .qa-ask-tag{color:var(--indigo);border-color:color-mix(in srgb, var(--indigo) 40%, transparent);background:color-mix(in srgb, var(--indigo) 10%, transparent)}
 
 [data-theme="dark"] .qa-ask-ttl{color:#525252}
 
@@ -1114,7 +1174,7 @@
 
 [data-theme="dark"] .qa-ask-opt{border-color:#3B3835;background:transparent}
 
-[data-theme="dark"] .qa-ask-opt:hover{border-color:rgba(129,140,248,.45);background:rgba(129,140,248,.08)}
+[data-theme="dark"] .qa-ask-opt:hover{border-color:color-mix(in srgb, var(--indigo) 45%, transparent);background:color-mix(in srgb, var(--indigo) 8%, transparent)}
 
 [data-theme="dark"] .qa-ask-opt .lb{color:#E5E5E5}
 
@@ -1122,7 +1182,7 @@
 
 [data-theme="dark"] .qa-ask-opt .mk{border-color:#525252;background:transparent}
 
-[data-theme="dark"] .qa-ask-opt.sel{border-color:#6366F1;background:rgba(99,102,241,.1)}
+[data-theme="dark"] .qa-ask-opt.sel{border-color:var(--indigo);background:color-mix(in srgb, var(--indigo) 10%, transparent)}
 
 [data-theme="dark"] .qa-ask-opt.sel .lb{color:#F5F4F3}
 
@@ -1130,9 +1190,9 @@
 
 [data-theme="dark"] .qa-ask-other button{background:#1C1C1E;border-color:#3B3835;color:#A8A29E}
 
-[data-theme="dark"] .qa-ask-sub{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.4);color:#818CF8}
+[data-theme="dark"] .qa-ask-sub{background:color-mix(in srgb, var(--indigo) 10%, transparent);border-color:color-mix(in srgb, var(--indigo) 40%, transparent);color:var(--indigo)}
 
-[data-theme="dark"] .qa-ask-sub:hover:not(:disabled){background:rgba(99,102,241,.18)}
+[data-theme="dark"] .qa-ask-sub:hover:not(:disabled){background:color-mix(in srgb, var(--indigo) 18%, transparent)}
 
 [data-theme="dark"] .qa-ask-hint{color:#525252}
 
@@ -1154,7 +1214,7 @@
 
 [data-theme="dark"] .qa-run::after{background:#1C1C1E}
 
-[data-theme="dark"] .qa-spinner{border-color:#3B3835;border-top-color:#818CF8}
+[data-theme="dark"] .qa-spinner{border-color:#3B3835;border-top-color:var(--indigo)}
 
 [data-theme="dark"] .qa-run-pill{background:rgba(245,244,243,.05);border-color:#3B3835}
 
@@ -1515,7 +1575,7 @@
 
 .qa-diff-row.del .s{color:#9E3120}
 
-.qa-diff-row.hunk{background:rgba(79,70,229,.07);color:#4338CA}
+.qa-diff-row.hunk{background:color-mix(in srgb, var(--indigo) 7%, transparent);color:var(--indigo)}
 
 .qa-diff-row.file{background:rgba(28,25,23,.035);color:var(--paper-mute)}
 
@@ -1596,7 +1656,7 @@
 
 [data-theme="dark"] .qa-diff-row.del .s{color:#FCA5A5}
 
-[data-theme="dark"] .qa-diff-row.hunk{background:rgba(129,140,248,.12);color:#A5B4FC}
+[data-theme="dark"] .qa-diff-row.hunk{background:color-mix(in srgb, var(--indigo) 12%, transparent);color:var(--indigo)}
 
 [data-theme="dark"] .qa-diff-row.file{background:rgba(245,244,243,.045);color:#A8A29E}
 
@@ -1624,9 +1684,9 @@
 /* 排队气泡上的「取消排队」：这里要的是**文字**按钮（用户得看懂点它会发生什么），
    所以不复用上面 22×22 的图标尺寸，单开一档。 */
 .qa-msg.qa-mine .qa-acts .qa-act--cancel{width:auto;height:22px;padding:0 8px;border-radius:var(--r-full);
-  font-size:11.5px;line-height:22px;color:var(--queued,#8B5CF6);white-space:nowrap}
-.qa-msg.qa-mine .qa-acts .qa-act--cancel:hover{background:rgba(139,92,246,.12);color:var(--queued,#8B5CF6)}
-[data-theme="dark"] .qa-msg.qa-mine .qa-acts .qa-act--cancel{color:#A98CF5}
+  font-size:11.5px;line-height:22px;color:var(--queued);white-space:nowrap}
+.qa-msg.qa-mine .qa-acts .qa-act--cancel:hover{background:color-mix(in srgb, var(--queued) 12%, transparent);color:var(--queued)}
+[data-theme="dark"] .qa-msg.qa-mine .qa-acts .qa-act--cancel{color:var(--queued)}
 
 .qa-act svg{width:13px;height:13px;display:block;stroke:currentColor;fill:none;
   stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

package/client-ui/shared/conv/dom-map.md

@@ -130,6 +130,7 @@ setWho  setRunLabel  setResult                     // 角色标识 / 轮次标
 | `command`（斜杠命令生命周期） | 以前走 default | **已补**：`case "command"` → 标记行（图标 terminal + 进行中/已完成/失败 + 可展开原始载荷） |
 | `control_error` | 以前走 default（话说反了） | **已补**：`case "control_error"` → 「控制失败 · …」失败标记行 |
 | `notice` | 已有 `case "notice"` ✓ | 无需动 |
+| `fallback`（主备降级，2026-10-26） | 以前没有这条 kind（core 也不发） | **已补**：`case "fallback"` → 标记行「已由备用引擎「…」接上」（icon sep + 可展开的 from/to 载荷） |
 | `answered` / `answer_queued` | 在内核的**刻意忽略**清单里 ✓（画面由收尾那条表达） | 无需动 |
 | `user`（历史里用户那条） | 不在内核：宿主在回放时调 `qaRenderMine`（magic-test 就是这么做的） | 归宿主 |
 | `interrupted` / `stopped` | 不在内核：收尾那条 `onDone({stopped:true})` → `qaRenderDone(…, "已停止")` | 归宿主 |

package/client-ui/shared/conversation.css

@@ -484,15 +484,21 @@
 .pick__cols{display:flex;gap:0;height:min(56vh,56dvh,440px);border:1px solid var(--border);
   border-radius:var(--r);overflow:hidden}
 
-.pick__col{flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px}
+/* 引擎列窄、模型列宽：引擎名短（codebuddy-ai 已是极值），模型名长得多
+   （deepseek-v4.1-flash-1017 + 倍率），均分会让右列全被省略号截掉
+   （2026-10-24 用户：「减少引擎宽度增加模型宽度 让模型显示全」）。 */
+.pick__col{flex:0 0 36%;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px}
 
-.pick__col--r{flex:1.5;border-left:1px solid var(--border)}
+.pick__col--r{flex:1 1 auto;border-left:1px solid var(--border)}
 
 .pick__citem{display:flex;flex-direction:column;gap:1px;width:100%;padding:9px 10px;
   border-radius:var(--r);text-align:left}
 
 .pick__citem.is-on{background:var(--activity)}
 
+/* 历史会话锁：引擎项置灰不可点（模型列不受影响） */
+.pick__citem[disabled]{opacity:.55;cursor:not-allowed}
+
 .pick__cl{font-size:14px;line-height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 
 .pick__citem.is-on .pick__cl{font-weight:600}
@@ -509,6 +515,11 @@
   font-variant-numeric:tabular-nums;white-space:nowrap}
 
 .pick__cd{font-size:11px;line-height:15px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* 账号剩余积分（codebuddy 系，--engines 的 credit_left）：单独一行、用强调色，
+   与「N 个模型」区分开 —— 它会随对话消耗变化，是选择引擎时的第二个判据。 */
+.pick__cd--credit{color:var(--accent)}
+/* 「领取每日积分」：不是导航项，点它只领积分（阻止冒泡到引擎按钮）。 */
+.pick__claim{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
 
 @keyframes pick-fade{from{opacity:0}to{opacity:1}}