@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/ai-branch.mjs

@@ -0,0 +1,217 @@
+// src/behaviors/ai-core.ts
+var svg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+var ICON_TERMINAL = svg('<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>');
+var ICON_FILE = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>'
+);
+var ICON_FILE_PEN = svg(
+  '<path d="M12.5 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8l5 5v3.5"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M19 6.5 16.5 4"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/>'
+);
+var ICON_FILE_PLUS = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 12v6"/>'
+);
+var ICON_TRASH = svg(
+  '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/>'
+);
+var ICON_SEARCH = svg('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>');
+var ICON_FOLDER_SEARCH = svg(
+  '<path d="M11 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4"/><circle cx="17" cy="17" r="3"/><path d="m21 21-1.9-1.9"/>'
+);
+var ICON_SCAN_SEARCH = svg(
+  '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/>'
+);
+var ICON_GLOBE = svg(
+  '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>'
+);
+var ICON_DOWNLOAD = svg(
+  '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>'
+);
+var ICON_BLOCKS = svg(
+  '<rect width="7" height="7" x="4" y="4" rx="1"/><rect width="7" height="7" x="13" y="4" rx="1"/><rect width="7" height="7" x="4" y="13" rx="1"/><rect width="7" height="7" x="13" y="13" rx="1"/>'
+);
+var ICON_ZAP = svg(
+  '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>'
+);
+var ICON_LIST = svg(
+  '<path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M3 6h.01"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M8 6h13"/>'
+);
+var ICON_LIST_CHECKS = svg(
+  '<path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>'
+);
+var ICON_BOT = svg(
+  '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>'
+);
+var ICON_CHART = svg(
+  '<path d="M3 3v18h18"/><path d="M7 15l4-6 3 4 5-8"/>'
+);
+var ICON_FILE_TEXT = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>'
+);
+function isObj(v) {
+  return typeof v === "object" && v !== null;
+}
+function pickStr(input, keys) {
+  if (!isObj(input)) return void 0;
+  for (const k of keys) {
+    const v = input[k];
+    if (typeof v === "string" && v) return v;
+  }
+  return void 0;
+}
+function pickNum(src, keys) {
+  if (!isObj(src)) return void 0;
+  for (const k of keys) {
+    const v = src[k];
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+  }
+  return void 0;
+}
+function firstLine(s, max = 80) {
+  const line = s.split("\n", 1)[0]?.trim() ?? "";
+  return line.length > max ? `${line.slice(0, max)}\u2026` : line;
+}
+function filePathOf(input) {
+  return pickStr(input, ["file_path", "path", "file", "filename"]);
+}
+var summarizePath = (input) => filePathOf(input);
+function summarizeRead(input) {
+  const p = filePathOf(input);
+  if (!p) return void 0;
+  const offset = pickNum(input, ["offset", "start_line"]);
+  if (offset == null) return p;
+  const limit = pickNum(input, ["limit", "end_line"]);
+  return limit != null ? `${p}:${offset}-${offset + limit}` : `${p}:${offset}`;
+}
+function summarizeShell(input) {
+  const cmd = typeof input === "string" ? input : pickStr(input, ["command", "cmd", "script"]);
+  return cmd ? firstLine(cmd) : void 0;
+}
+function summarizeGrep(input) {
+  const pattern = pickStr(input, ["pattern", "regex", "query"]);
+  const p = filePathOf(input);
+  if (pattern) return p ? `${firstLine(pattern, 40)} \xB7 ${p}` : firstLine(pattern);
+  return p;
+}
+var sum = (fn) => {
+  return (input) => fn(input) ?? "";
+};
+var BUILTIN_KINDS = {
+  shell: { label: "\u547D\u4EE4", icon: ICON_TERMINAL, tint: "accent", summarize: sum(summarizeShell) },
+  read: { label: "\u8BFB\u53D6", icon: ICON_FILE, tint: "info", summarize: sum(summarizeRead) },
+  edit: { label: "\u7F16\u8F91", icon: ICON_FILE_PEN, tint: "warning", summarize: sum(summarizePath) },
+  write: { label: "\u5199\u5165", icon: ICON_FILE_PLUS, tint: "warning", summarize: sum(summarizePath) },
+  rm: { label: "\u5220\u9664", icon: ICON_TRASH, tint: "error", summarize: sum(summarizePath) },
+  grep: { label: "\u641C\u7D22", icon: ICON_SEARCH, tint: "info", summarize: sum(summarizeGrep) },
+  glob: { label: "\u5339\u914D", icon: ICON_FOLDER_SEARCH, tint: "info", summarize: sum((i) => pickStr(i, ["pattern", "glob", "path"])) },
+  browser: { label: "\u6D4F\u89C8", icon: ICON_GLOBE, tint: "accent", summarize: sum((i) => pickStr(i, ["url", "uri", "target"])) },
+  search: { label: "\u68C0\u7D22", icon: ICON_SCAN_SEARCH, tint: "accent", summarize: sum((i) => pickStr(i, ["query", "q", "pattern"])) },
+  fetch: { label: "\u8BF7\u6C42", icon: ICON_DOWNLOAD, tint: "info", summarize: sum((i) => pickStr(i, ["url", "uri", "endpoint"])) },
+  mcp: { label: "MCP", icon: ICON_BLOCKS, tint: "muted", summarize: sum((i) => pickStr(i, ["tool", "method", "name"])) },
+  skill: { label: "\u6280\u80FD", icon: ICON_ZAP, tint: "accent", summarize: sum((i) => pickStr(i, ["skill", "name", "command"])) },
+  todo: {
+    label: "\u5F85\u529E",
+    icon: ICON_LIST,
+    tint: "info",
+    summarize: sum((input) => {
+      const items = input && typeof input === "object" && Array.isArray(input.items) ? input.items : Array.isArray(input) ? input : [];
+      const done = items.filter((it) => it?.status === "done").length;
+      return items.length > 0 ? `${done}/${items.length} \u5B8C\u6210` : "";
+    })
+  },
+  plan: { label: "\u8BA1\u5212", icon: ICON_LIST_CHECKS, tint: "info" },
+  subagent: { label: "\u5B50\u4EE3\u7406", icon: ICON_BOT, tint: "accent", summarize: sum((i) => pickStr(i, ["task", "description", "prompt", "message", "subagent_type"])) },
+  note: { label: "\u7B14\u8BB0", icon: ICON_FILE_TEXT, tint: "muted" },
+  chart: { label: "\u56FE\u8868", icon: ICON_CHART, tint: "info", summarize: sum((i) => pickStr(i, ["title", "name"])) }
+};
+var kindRegistry = new Map(Object.entries(BUILTIN_KINDS));
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/ai-branch.ts
+function clampIndex(index, count) {
+  if (!Number.isFinite(index) || index < 0) return 0;
+  if (index > count - 1) return count - 1;
+  return Math.floor(index);
+}
+function renderAiBranch(el, model) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const count = Number.isFinite(model.count) ? Math.floor(model.count) : 0;
+  if (count <= 1) {
+    el.hidden = true;
+    el.setAttribute("aria-hidden", "true");
+    return el;
+  }
+  el.hidden = false;
+  el.removeAttribute("aria-hidden");
+  const index = clampIndex(model.index, count);
+  const root = h("div", "ai-branch");
+  root.dataset.index = String(index);
+  root.dataset.count = String(count);
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", "\u5206\u652F\u7248\u672C");
+  const prev = h("button", "ai-branch-prev", "\u2039");
+  prev.type = "button";
+  prev.setAttribute("aria-label", "\u4E0A\u4E00\u7248\u672C");
+  prev.disabled = index <= 0;
+  root.appendChild(prev);
+  root.appendChild(h("span", "ai-branch-page", `${index + 1}/${count}`));
+  const next = h("button", "ai-branch-next", "\u203A");
+  next.type = "button";
+  next.setAttribute("aria-label", "\u4E0B\u4E00\u7248\u672C");
+  next.disabled = index >= count - 1;
+  root.appendChild(next);
+  el.appendChild(root);
+  return el;
+}
+function initAiBranch(root) {
+  if (typeof document === "undefined") return () => void 0;
+  const scope = root ?? document;
+  const marked = scope;
+  if (marked.__icenAiBranchInit) return () => void 0;
+  marked.__icenAiBranchInit = true;
+  const target = scope;
+  const step = (branch, delta) => {
+    const count = Number(branch.dataset.count ?? "");
+    if (!Number.isFinite(count) || count <= 1) return;
+    const current = clampIndex(Number(branch.dataset.index ?? "0"), count);
+    const index = clampIndex(current + delta, count);
+    if (index === current) return;
+    branch.dataset.index = String(index);
+    const page = branch.querySelector(".ai-branch-page");
+    if (page) page.textContent = `${index + 1}/${count}`;
+    const prev = branch.querySelector(".ai-branch-prev");
+    if (prev) prev.disabled = index <= 0;
+    const next = branch.querySelector(".ai-branch-next");
+    if (next) next.disabled = index >= count - 1;
+    emitIcen(branch, "icen:ai-branch-change", { index, count });
+  };
+  const onClick = (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    if (!t) return;
+    const branch = t.closest(".ai-branch");
+    if (!branch) return;
+    if (t.closest(".ai-branch-prev")) step(branch, -1);
+    else if (t.closest(".ai-branch-next")) step(branch, 1);
+  };
+  target.addEventListener("click", onClick);
+  return () => {
+    target.removeEventListener("click", onClick);
+    marked.__icenAiBranchInit = false;
+  };
+}
+export {
+  initAiBranch,
+  renderAiBranch
+};

package/dist/behaviors/ai-chat.d.mts

@@ -8,17 +8,19 @@ declare function initAiChat(root?: ParentNode): () => void;
 interface AiStreamHandle {
     /** textContent 级追加一段文本（不解析 HTML） */
     append(text: string): void;
-    /** 流正常结束：移除 .is-streaming / aria-busy；reasoning 自动折叠 + 回填耗时 */
+    /** 流正常结束：移除 .is-streaming / aria-busy；reasoning 回填「思考 Ns」并延迟 1s 自动收起一次（§5.27） */
     done(): void;
-    /** 流被取消：同 done，但不折叠 reasoning、不计耗时 */
+    /** 流被取消：保留已生成内容，补「继续生成」槽；不折叠 reasoning、不计耗时（aborted ≠ error） */
     cancel(): void;
-    /** 流失败：终止追加并给宿主挂 .is-error（错误文本展示由消费方/renderAiMessage.setError 负责） */
+    /** 流失败：终止追加并挂 .is-error（错误文本展示由消费方/renderAiMessage.setError 负责）；reasoning 同 done 收起 + 补「继续生成」槽 */
     fail(): void;
 }
 /**
- * 创建流式追加句柄：追加期间宿主挂 .is-streaming（aria-busy=true），
- * 完成/取消移除。宿主在 .ai-reasoning 内时同步驱动 reasoning 状态：
- * 流式中根挂 .is-streaming（CSS shimmer），done() 自动折叠并显示耗时。
+ * 创建流式追加句柄：追加期间宿主挂 .is-streaming（aria-busy=true），完成/取消移除。
+ * 宿主在 .ai-reasoning 内时同步驱动 reasoning 折叠契约（§5.27）：流式态默认展开；
+ * done/fail 移除 .is-streaming、回填「思考 Ns」（自折叠头 data-reasoning-start 起算）并
+ * 延迟 1s 自动收起一次（用户手动 toggle 过则永不自动收）；fail/cancel 保留已生成内容
+ * 并在消息尾补 .ai-msg-continue「继续生成」槽（cancel 不显示错误——aborted ≠ error）。
  */
 declare function createAiStream(el: HTMLElement): AiStreamHandle;
 interface AiMessageModel {
@@ -45,7 +47,9 @@ interface AiMessageHandle {
     stream(): AiStreamHandle;
 }
 /** 单个内容部件 → DOM 节点（文本一律 textContent；媒体 src 走 aiContentUrl 归一）。
- *  导出供 ai-tool 的 IO 区复用（MCP 多模态回执；类名 .ai-msg-* 语义即「消息部件」，全局生效）。 */
+ *  导出供 ai-tool 的 IO 区复用（MCP 多模态回执；类名 .ai-msg-* 语义即「消息部件」，全局生效）。
+ *  前置条件：浏览器环境——本函数无 SSR 守卫，SSR 由调用方守卫覆盖（renderAiMessage /
+ *  renderAiToolCall 头部守卫后才会触达此处）。 */
 declare function renderAiContentPart(part: AiContentPart): HTMLElement | undefined;
 /**
  * DOM API 渲染一条消息（append 到容器末尾）：多角色变体 + 多模态部件 + copy/retry

package/dist/behaviors/ai-chat.mjs

@@ -135,9 +135,9 @@ function formatDuration(ms) {
   const m = Math.floor(ms / 6e4);
   const s = Math.round(ms % 6e4 / 1e3);
   if (ms < 36e5) return s > 0 ? `${m}m${s}s` : `${m}m`;
-  const h = Math.floor(ms / 36e5);
+  const h2 = Math.floor(ms / 36e5);
   const rm = Math.round(ms % 36e5 / 6e4);
-  return rm > 0 ? `${h}h${rm}m` : `${h}h`;
+  return rm > 0 ? `${h2}h${rm}m` : `${h2}h`;
 }
 function aiContentUrl(part) {
   if (part.type === "text" || part.type === "resource-link") return void 0;
@@ -147,6 +147,12 @@ function aiContentUrl(part) {
   }
   return void 0;
 }
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
 function svgIcon(svg2) {
   if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
   let parsed;
@@ -159,15 +165,15 @@ function svgIcon(svg2) {
   if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) {
     return null;
   }
-  const sanitize = (el2) => {
-    for (const attr of Array.from(el2.attributes)) {
+  const sanitize = (el) => {
+    for (const attr of Array.from(el.attributes)) {
       const name = attr.name.toLowerCase();
-      if (name.startsWith("on")) el2.removeAttribute(attr.name);
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
       if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
-        el2.removeAttribute(attr.name);
+        el.removeAttribute(attr.name);
       }
     }
-    for (const child of Array.from(el2.children)) {
+    for (const child of Array.from(el.children)) {
       const tag = child.tagName.toLowerCase();
       if (tag === "script" || tag === "foreignobject") {
         child.remove();
@@ -180,6 +186,13 @@ function svgIcon(svg2) {
   return document.importNode(root, true);
 }
 
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/ai-chat.ts
 var ICON_COPY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>';
 var ICON_RETRY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>';
@@ -191,7 +204,7 @@ function prefersReducedMotion() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function emit(target, name, detail) {
-  target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  emitIcen(target, name, detail);
 }
 function fallbackCopy(text) {
   const ta = document.createElement("textarea");
@@ -214,9 +227,9 @@ function copyText(text) {
   }
 }
 function setupChat(chat) {
-  const el2 = chat;
-  if (el2.__icenAiChatInit) return void 0;
-  el2.__icenAiChatInit = true;
+  const el = chat;
+  if (el.__icenAiChatInit) return void 0;
+  el.__icenAiChatInit = true;
   const scrollEl = chat.querySelector(".ai-chat-scroll");
   let jump = chat.querySelector(".ai-chat-jump") ?? null;
   let pinned = true;
@@ -253,7 +266,7 @@ function setupChat(chat) {
       } else {
         unread = 0;
       }
-      lastMsgCount = Math.max(lastMsgCount, count);
+      lastMsgCount = count;
       updateJump();
     }
   };
@@ -289,7 +302,14 @@ function setupChat(chat) {
       if (!msg) return;
       const action = actionBtn.dataset.aiMsgAction;
       if (action === "copy") {
-        copyText(msg.querySelector(".ai-msg-body")?.textContent ?? "");
+        const bodyEl = msg.querySelector(".ai-msg-body");
+        const clone = bodyEl?.cloneNode(true);
+        if (clone instanceof HTMLElement) {
+          clone.querySelectorAll(".ai-msg-model").forEach((chip) => chip.remove());
+          copyText(clone.textContent ?? "");
+        } else {
+          copyText("");
+        }
         emit(msg, "icen:ai-copy", { el: msg });
       } else if (action === "retry") {
         emit(msg, "icen:ai-retry", { el: msg });
@@ -305,6 +325,7 @@ function setupChat(chat) {
       head.setAttribute("aria-expanded", String(open));
       reasoning.classList.toggle("is-open", open);
       if (body) body.hidden = !open;
+      reasoning.__icenReasonUserTouched = true;
       emit(reasoning, "icen:ai-toggle", { el: reasoning, open });
     }
   };
@@ -353,7 +374,7 @@ function setupChat(chat) {
   disposers.push(() => chat.removeEventListener("click", onClick));
   return () => {
     for (const dispose of disposers) dispose();
-    el2.__icenAiChatInit = false;
+    el.__icenAiChatInit = false;
   };
 }
 function initAiChat(root) {
@@ -375,46 +396,105 @@ function initAiChat(root) {
     cleanups.length = 0;
   };
 }
-function createAiStream(el2) {
-  const reasoning = el2.closest(".ai-reasoning");
+var REASONING_AUTO_CLOSE_MS = 1e3;
+function setReasoningOpen(reasoning, open) {
+  const head = reasoning.querySelector(".ai-reasoning-head");
+  const body = reasoning.querySelector(".ai-reasoning-body");
+  head?.setAttribute("aria-expanded", String(open));
+  reasoning.classList.toggle("is-open", open);
+  if (body) body.hidden = !open;
+}
+function clearContinueSlot(scope) {
+  scope?.querySelectorAll(".ai-msg-continue").forEach((n) => n.remove());
+}
+function createAiStream(el) {
+  const reasoning = el.closest(".ai-reasoning");
+  const msgBody = el.closest(".ai-msg-body");
+  const msg = el.closest(".ai-msg");
   const startedAt = Date.now();
   let state = "streaming";
-  el2.classList.add("is-streaming");
-  el2.setAttribute("aria-busy", "true");
-  reasoning?.classList.add("is-streaming");
+  el.classList.add("is-streaming");
+  el.setAttribute("aria-busy", "true");
+  if (reasoning) {
+    reasoning.classList.add("is-streaming");
+    setReasoningOpen(reasoning, true);
+    const head = reasoning.querySelector(".ai-reasoning-head");
+    if (head && head.dataset.reasoningStart == null) head.dataset.reasoningStart = String(startedAt);
+  }
+  clearContinueSlot(msg ?? msgBody ?? el);
+  const fillReasoningTime = () => {
+    if (!reasoning) return;
+    const time = reasoning.querySelector(".ai-reasoning-time");
+    if (!time) return;
+    const head = reasoning.querySelector(".ai-reasoning-head");
+    const raw = Number(head?.dataset.reasoningStart ?? "");
+    const t0 = Number.isFinite(raw) && raw > 0 ? raw : startedAt;
+    time.textContent = `\u601D\u8003 ${formatDuration(Math.max(0, Date.now() - t0))}`;
+  };
+  const scheduleReasoningAutoClose = () => {
+    if (!reasoning) return;
+    const r = reasoning;
+    if (r.__icenReasonUserTouched || r.__icenReasonAutoClosed) return;
+    const close = () => {
+      if (r.__icenReasonUserTouched || r.__icenReasonAutoClosed) return;
+      r.__icenReasonAutoClosed = true;
+      setReasoningOpen(r, false);
+    };
+    if (typeof window === "undefined") {
+      close();
+      return;
+    }
+    window.setTimeout(close, REASONING_AUTO_CLOSE_MS);
+  };
+  const appendContinueSlot = () => {
+    if (typeof document === "undefined") return;
+    const mount = msgBody ?? msg ?? (el.parentElement instanceof HTMLElement ? el.parentElement : null);
+    if (!mount || mount.querySelector(":scope > .ai-msg-continue")) return;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ai-msg-continue";
+    btn.textContent = "\u7EE7\u7EED\u751F\u6210";
+    btn.addEventListener("click", () => {
+      const target = msg ?? btn;
+      emit(target, "icen:ai-retry", { el: target });
+    });
+    mount.appendChild(btn);
+  };
   const settle = (finished) => {
     if (state !== "streaming") return;
     state = finished ? "done" : "cancelled";
-    el2.classList.remove("is-streaming");
-    el2.removeAttribute("aria-busy");
+    el.classList.remove("is-streaming");
+    el.removeAttribute("aria-busy");
     if (!reasoning) return;
     reasoning.classList.remove("is-streaming");
     if (!finished) return;
-    const head = reasoning.querySelector(".ai-reasoning-head");
-    const body = reasoning.querySelector(".ai-reasoning-body");
-    head?.setAttribute("aria-expanded", "false");
-    if (body) body.hidden = true;
-    const time = reasoning.querySelector(".ai-reasoning-time");
-    if (time) time.textContent = formatDuration(Date.now() - startedAt);
+    fillReasoningTime();
+    scheduleReasoningAutoClose();
   };
   return {
     append(text) {
       if (state !== "streaming" || !text) return;
-      el2.textContent += text;
+      el.textContent += text;
     },
     done() {
       settle(true);
     },
     cancel() {
       settle(false);
+      appendContinueSlot();
     },
     fail() {
       if (state !== "streaming") return;
       state = "error";
-      el2.classList.remove("is-streaming");
-      el2.removeAttribute("aria-busy");
-      el2.classList.add("is-error");
-      reasoning?.classList.remove("is-streaming");
+      el.classList.remove("is-streaming");
+      el.removeAttribute("aria-busy");
+      el.classList.add("is-error");
+      if (reasoning) {
+        reasoning.classList.remove("is-streaming");
+        fillReasoningTime();
+        scheduleReasoningAutoClose();
+      }
+      appendContinueSlot();
     }
   };
 }
@@ -429,15 +509,9 @@ function safeHref(uri) {
   if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
   return uri;
 }
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text != null) node.textContent = text;
-  return node;
-}
 function renderAiContentPart(part) {
   if (part.type === "text") {
-    const span = el("span", "ai-msg-text");
+    const span = h("span", "ai-msg-text");
     span.textContent = part.text;
     if (part.state === "streaming") span.classList.add("is-streaming");
     return span;
@@ -472,8 +546,8 @@ function renderAiContentPart(part) {
     return video;
   }
   if (part.type === "file") {
-    const chip = el("span", "ai-msg-file");
-    chip.appendChild(el("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
+    const chip = h("span", "ai-msg-file");
+    chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
     const href2 = part.url ? safeHref(part.url) : void 0;
     if (href2 && /^(https?:|data:)/i.test(href2)) {
       const a2 = document.createElement("a");
@@ -494,9 +568,18 @@ function renderAiContentPart(part) {
   return a;
 }
 function renderAiMessage(scrollEl, model) {
-  const row = el("div", `ai-msg ai-msg--${model.role}`);
-  const avatar = el("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
-  const body = el("div", "ai-msg-body");
+  if (typeof document === "undefined") {
+    return {
+      el: scrollEl,
+      body: scrollEl,
+      setMeta: () => void 0,
+      setError: () => void 0,
+      stream: () => createAiStream(scrollEl)
+    };
+  }
+  const row = h("div", `ai-msg ai-msg--${model.role}`);
+  const avatar = h("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
+  const body = h("div", "ai-msg-body");
   row.appendChild(avatar);
   row.appendChild(body);
   const parts = typeof model.content === "string" ? [{ type: "text", text: model.content }] : model.content;
@@ -504,18 +587,18 @@ function renderAiMessage(scrollEl, model) {
     const node = renderAiContentPart(part);
     if (node) body.appendChild(node);
   }
-  if (model.model) body.appendChild(el("span", "ai-msg-model", model.model));
-  const metaEl = el("div", "ai-msg-meta");
+  if (model.model) body.appendChild(h("span", "ai-msg-model", model.model));
+  const metaEl = h("div", "ai-msg-meta");
   if (model.meta != null) metaEl.textContent = model.meta;
   row.appendChild(metaEl);
-  const actions = el("div", "ai-msg-actions");
-  const copyBtn = el("button", "ai-msg-action");
+  const actions = h("div", "ai-msg-actions");
+  const copyBtn = h("button", "ai-msg-action");
   copyBtn.type = "button";
   copyBtn.setAttribute("data-ai-msg-action", "copy");
   copyBtn.setAttribute("aria-label", "\u590D\u5236");
   const copyIcon = svgIcon(ICON_COPY);
   if (copyIcon) copyBtn.appendChild(copyIcon);
-  const retryBtn = el("button", "ai-msg-action");
+  const retryBtn = h("button", "ai-msg-action");
   retryBtn.type = "button";
   retryBtn.setAttribute("data-ai-msg-action", "retry");
   retryBtn.setAttribute("aria-label", "\u91CD\u8BD5");
@@ -533,13 +616,13 @@ function renderAiMessage(scrollEl, model) {
       row.classList.add("ai-msg--error");
       let errEl = row.querySelector(".ai-msg-error-text");
       if (!errEl) {
-        errEl = el("div", "ai-msg-error-text");
+        errEl = h("div", "ai-msg-error-text");
         body.appendChild(errEl);
       }
       errEl.textContent = message;
     },
     stream() {
-      const span = el("span", "ai-msg-stream-text");
+      const span = h("span", "ai-msg-stream-text");
       body.appendChild(span);
       return createAiStream(span);
     }

package/dist/behaviors/ai-composer.d.mts

@@ -1,4 +1,5 @@
 import { AiUsage } from './ai-core.js';
+import { PanelSizing } from './popover.js';
 import { AiTodoItem, AiUsageRingOpts } from './ai-panel.js';
 import { AiClient, AiAuditor } from './ai-provider.js';
 
@@ -25,13 +26,29 @@ interface AiComposerCommand {
     /** 参数提示（如 "<path>"），弹层命令行右侧灰色展示 */
     argsHint?: string;
 }
-type AiComposerRefKind = 'file' | 'folder' | 'doc' | 'agent';
+/** 引用 kind：内置 4 种 + 开放注册；`string & {}` 保自动补全同时放行 registerRefKind 注册的任意 kind（照 charts.ts ChartTone 手法） */
+type AiComposerRefKind = 'file' | 'folder' | 'doc' | 'agent' | (string & {});
 interface AiComposerRefSource {
     kind: AiComposerRefKind;
     id: string;
     label: string;
     sub?: string;
 }
+/** 引用 kind 定义（registerRefKind 的注册面）。 */
+interface AiComposerRefDef {
+    /** 分组标题（弹层 group label；未知 kind 兜底为 kind 原文） */
+    label: string;
+    /** 单色 SVG 字符串（经 svgIcon 消毒）；缺省用通用文档图标 */
+    icon?: string;
+    /** 分组排序权重（小者在前）；缺省排在已知 kind 之后（最后） */
+    order?: number;
+}
+/**
+ * 注册（或覆盖）一个引用 kind（第三方扩展入口，照 registerAiKind 的 Map + 兜底模式）。
+ * 注册后弹层分组标题/图标/排序取注册表值；未注册的未知 kind 不再静默丢弃——
+ * 标题用 kind 原文、图标用通用文档图标、排序排最后。
+ */
+declare function registerRefKind(kind: string, def: AiComposerRefDef): void;
 /**
  * 运行态切换（spec §4.3）：
  * el 传 composer 容器或其内部任意元素（含发送钮自身），就近解析 [data-ai-composer]。
@@ -57,7 +74,9 @@ declare function setComposerModels(el: HTMLElement, providers: AiProviderOption[
  */
 declare function setComposerCommands(el: HTMLElement, commands: AiComposerCommand[]): void;
 /**
- * 配置 @ 引用源（§8）：任意位置 token 起点 `@` 触发引用弹层（按 kind 分组：file/folder/doc/agent）。
+ * 配置 @ 引用源（§8）：任意位置 token 起点 `@` 触发引用弹层（按 kind 分组：内置
+ * file/folder/doc/agent，可经 registerRefKind 扩展/覆盖；未知 kind 不丢弃——通用文档
+ * 图标 + kind 原文兜底，排序缺省排最后）。
  * 选中后文本插入 `@label ` + refs chip +1，派 icen:ai-ref {action:'add', ref}；
  * chip × 移除 chip 并删文本里首个 `@label`，派 {action:'remove', ref}。
  */
@@ -96,6 +115,12 @@ interface AiComposerBindOpts {
     };
     /** 运行态自动管理（默认 true）：icen:ai-send → running；icen:ai-done → 解除 */
     running?: boolean;
+    /**
+     * 三弹层（模型/命令/引用）尺寸的整体程序覆盖（PanelSizing 契约）：
+     * 优先于 composer 根上的 data-panel-*（三弹层共用的用户覆盖面）与各弹层内置默认，
+     * 一次设置对三个弹层同时生效。
+     */
+    popoverSizing?: PanelSizing;
 }
 interface AiComposerBinding {
     /** 解绑全部监听并中止进行中的托管会话（composer 本身的 init 不受影响） */
@@ -109,4 +134,4 @@ interface AiComposerBinding {
  */
 declare function bindComposer(el: HTMLElement, opts?: AiComposerBindOpts): AiComposerBinding;
 
-export { type AiComposerBindOpts, type AiComposerBinding, type AiComposerCommand, type AiComposerCurrentModel, type AiComposerRefKind, type AiComposerRefSource, type AiProviderModelOption, type AiProviderOption, bindComposer, initAiComposer, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage };
+export { type AiComposerBindOpts, type AiComposerBinding, type AiComposerCommand, type AiComposerCurrentModel, type AiComposerRefDef, type AiComposerRefKind, type AiComposerRefSource, type AiProviderModelOption, type AiProviderOption, bindComposer, initAiComposer, registerRefKind, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage };