magic-agent 2.6.0 → 2.6.3

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

@@ -336,6 +336,142 @@ function qaErrorCardNode(opts){
   return wrap;
 }
 
+/* ---------- 额度 / 限流提示卡（2026-10-25）----------
+   用户报障原话：「没额度了，设计一个提示卡」—— 截图里那一轮引擎把供应商的 429 通告
+   **当正文**发了回来，气泡里铺着一大段英文原文，上下还挂着「任务耗时 1m 26s」与复制/重试
+   图标行，整体观感像「这一轮正常完成了」。这比普通报错糟得多：用户既看不出没跑成，
+   也不知道该等还是该换模型。
+
+   ⚠️ **界面不解析通告原文**（判据只在 core：`internal/agent/limitnotice.go` 分类 + 取恢复时刻，
+       事件上带 `error_kind` / `error_code` / `reset_at`）。这里只做展示：认不出 kind 就退回
+       普通失败卡 —— 把「工具报错」画成「额度不足」比不画更糟。
+   ⚠️ 与 qaErrorCardNode 的关系：同一骨架（`.qa-errcard` / `.qa-ec-hd` / `.qa-ec-bd`），
+       只换色与信息层次（加一行「什么时候恢复」+ 一行建议）。所以 `.qa-done` 收尾行契约、
+       `.qa-mk` 展开委托两条都照旧成立，不必为这张卡单独加逻辑。 */
+const QA_QUOTA_KINDS = {
+  quota: {
+    title: "额度用尽", badge: "额度不足",
+    lead: "引擎账号的额度已用尽，这一轮没有跑完。",
+    hint: "建议：等额度恢复后再试，或切换到其它模型继续。",
+  },
+  rate_limit: {
+    title: "请求太频繁", badge: "已被限流",
+    lead: "请求过于频繁，引擎暂时拒绝了这一轮。",
+    hint: "建议：隔几分钟再试；这不是配置问题，不必改设置。",
+  },
+};
+
+/* 恢复时刻的展示文案：{clock:"15:07", rel:"约 2 小时后", past:false}；取不到回 null。
+   ⚠️ 只用 `new Date()` 解 core 给的 **RFC3339**（带偏移的确定形状），不做宽松解析 ——
+      V8 会把 `CST` 当美国中部时间（偏 14 小时，实测过），所以含糊的拼法在 core 侧就挡掉了。 */
+function qaQuotaReset(at){
+  const s = String(at || "").trim();
+  if(!s) return null;
+  const t = new Date(s);
+  if(isNaN(t.getTime())) return null;
+  const now = new Date();
+  const pad = (n)=> (n < 10 ? "0" : "") + n;
+  const sameDay = t.getFullYear() === now.getFullYear() && t.getMonth() === now.getMonth()
+    && t.getDate() === now.getDate();
+  const clock = (sameDay ? "" : (t.getMonth() + 1) + "月" + t.getDate() + "日 ")
+    + pad(t.getHours()) + ":" + pad(t.getMinutes());
+  const diff = t.getTime() - now.getTime();
+  if(diff <= 0) return { clock: clock, rel: "", past: true };
+  /* 相对时间只做「大致」参考，**不跨档乱除**：超过一天就说天（额度按 5 小时一档重置，
+     真通告基本都落在「几分钟 / 几小时」这一档；算出「约 639910 小时后」是捅了马蜂窝的写法）。 */
+  const min = Math.round(diff / 60000);
+  const rel = min < 1 ? "不到 1 分钟"
+    : min < 60 ? "约 " + min + " 分钟后"
+    : min < 60 * 24 ? "约 " + Math.round(min / 60) + " 小时后"
+    : "约 " + Math.round(min / 60 / 24) + " 天后";
+  return { clock: clock, rel: rel, past: false };
+}
+
+/* 事件信封 → 额度卡要的全部文案；**不是**额度/限流就回 null（调用方退回普通失败卡）。
+   纯函数（不碰 DOM）：单测与「这张卡该不该出现」的判定都只看它。 */
+function qaQuotaInfo(det){
+  if(!det || typeof det !== "object") return null;
+  const kind = String(det.error_kind || "").trim();
+  const k = QA_QUOTA_KINDS[kind];
+  if(!k) return null;
+  return {
+    kind: kind, code: String(det.error_code || "").trim(),
+    raw: String(det.reason || det.error || "").trim(),
+    title: k.title, badge: k.badge, lead: k.lead, hint: k.hint,
+    reset: qaQuotaReset(det.reset_at),
+  };
+}
+
+function qaQuotaCardNode(opts){
+  const o = opts || {};
+  const q = o.info || qaQuotaInfo(o.detail);
+  if(!q) return qaErrorCardNode(opts);            // 兜底：形状一样，只是不出额度卡
+
+  const wrap = document.createElement("div");
+  wrap.className = "qa-done err qa-errcard qa-quota";
+
+  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>'
+    + '<span class="qa-qc-badge"></span>';
+  hd.querySelector(".qa-ec-tt").textContent = q.title;
+  hd.querySelector(".qa-qc-badge").textContent = q.badge;
+  wrap.appendChild(hd);
+
+  const bd = document.createElement("div");
+  bd.className = "qa-ec-bd";
+  const lead = document.createElement("p");
+  lead.className = "qa-ec-reason";
+  lead.textContent = q.lead;
+  bd.appendChild(lead);
+
+  /* 恢复时刻：时刻本身加粗（用户此刻只想知道「几点能再用」），相对时间跟在后面；
+     已经过了恢复时刻就说「可以重试」—— 这时候再写「将于…恢复」就是假话。 */
+  if(q.reset){
+    const rp = document.createElement("p");
+    rp.className = "qa-qc-reset";
+    const b = document.createElement("b");
+    b.textContent = q.reset.clock;
+    if(q.reset.past){
+      rp.appendChild(document.createTextNode("已过恢复时刻（"));
+      rp.appendChild(b);
+      rp.appendChild(document.createTextNode("），可以重试。"));
+    }else{
+      rp.appendChild(document.createTextNode("将于 "));
+      rp.appendChild(b);
+      rp.appendChild(document.createTextNode(" 恢复" + (q.reset.rel ? "（" + q.reset.rel + "）" : "")));
+    }
+    bd.appendChild(rp);
+  }
+
+  const hint = document.createElement("p");
+  hint.className = "qa-qc-hint";
+  hint.textContent = q.hint;
+  bd.appendChild(hint);
+
+  /* 原文：留一条可展开的明细（排障要它 —— 谁限流的、request id 是多少）。
+     复用 `.qa-mk` 词汇 → 点击走 #qa-stream 委托，快照重建后照样能展开。 */
+  if(q.raw){
+    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";
+    mkbd.appendChild(qaCodeFrameNode(q.code ? "HTTP " + q.code : "原文", q.raw));
+    mk.appendChild(mkbd);
+    bd.appendChild(mk);
+  }
+  wrap.appendChild(bd);
+  return wrap;
+}
+
 /* ---------- ④ 分隔条（anywhere Marker variant="separator"）----------
    用在「横切整条会话」的事件上 —— anywhere 那边是**会话压缩**（`MarkerContentKind="compact"`，
    进行中/已完成两种文案）。分隔条不是谁说的话，形状本身就在说「这里是一条分界」。