@icen.ai/ui 0.8.1 → 0.9.0

package/dist/behaviors/ai-composer.mjs

@@ -468,10 +468,16 @@ function buildTodoHead(done, total) {
   head.appendChild(bar);
   return head;
 }
+var ICON_TODO_CHECK = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m3.5 12.5 5 5L20.5 6" pathLength="1"/></svg>';
 function buildTodoItem(item, index) {
   const row = h("div", `ai-todo-item is-${item.status}`);
   row.dataset.index = String(index);
   row.appendChild(h("span", "ai-item-status"));
+  const check = h("span", "ai-todo-check is-anim");
+  check.setAttribute("aria-hidden", "true");
+  const checkSvg = svgIcon(ICON_TODO_CHECK);
+  if (checkSvg) check.appendChild(checkSvg);
+  row.appendChild(check);
   row.appendChild(h("span", "ai-todo-text", item.content));
   row.appendChild(h("span", "ai-todo-active", item.activeForm ?? item.content));
   return row;
@@ -488,6 +494,18 @@ function renderAiTodo(el, items) {
   el.appendChild(root);
   return el;
 }
+function metricField(src, key) {
+  return typeof src === "object" && src !== null ? src[key] : void 0;
+}
+function metricNum(v) {
+  return typeof v === "number" && Number.isFinite(v) ? v : void 0;
+}
+function metricStr(v) {
+  return typeof v === "string" && v ? v : void 0;
+}
+function trimNum(v) {
+  return String(Math.round(v * 10) / 10);
+}
 function renderAiUsage(el, usage, opts = {}) {
   if (typeof document === "undefined") return el;
   const u = normalizeUsage(usage);
@@ -528,6 +546,14 @@ function renderAiUsage(el, usage, opts = {}) {
     }
     root.appendChild(legend);
   }
+  const ttft = metricNum(opts.metrics?.ttftMs) ?? metricNum(metricField(usage, "ttftMs"));
+  const tps = metricNum(opts.metrics?.tokensPerSec) ?? metricNum(metricField(usage, "tokensPerSec"));
+  const finish = metricStr(opts.metrics?.finishReason) ?? metricStr(metricField(usage, "finishReason"));
+  const metricBits = [];
+  if (ttft != null) metricBits.push(`TTFT ${formatDuration(ttft)}`);
+  if (tps != null && tps > 0) metricBits.push(`${trimNum(tps)} tok/s`);
+  if (finish) metricBits.push(`finish: ${finish}`);
+  if (metricBits.length > 0) root.appendChild(h("div", "ai-usage-metrics", metricBits.join(" \xB7 ")));
   const totalParts = [formatTokens(total)];
   if (typeof opts.total === "number" && opts.total > 0) {
     const pct = Math.min(100, Math.round(total / opts.total * 100));
@@ -626,13 +652,73 @@ var ICON_SPARKLES = svgWrap(
 // 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>';
+function emit(target, name, detail) {
+  emitIcen(target, name, detail);
+}
+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";
   el.classList.add("is-streaming");
   el.setAttribute("aria-busy", "true");
-  reasoning?.classList.add("is-streaming");
+  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";
@@ -641,12 +727,8 @@ function createAiStream(el) {
     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) {
@@ -658,6 +740,7 @@ function createAiStream(el) {
     },
     cancel() {
       settle(false);
+      appendContinueSlot();
     },
     fail() {
       if (state !== "streaming") return;
@@ -665,7 +748,12 @@ function createAiStream(el) {
       el.classList.remove("is-streaming");
       el.removeAttribute("aria-busy");
       el.classList.add("is-error");
-      reasoning?.classList.remove("is-streaming");
+      if (reasoning) {
+        reasoning.classList.remove("is-streaming");
+        fillReasoningTime();
+        scheduleReasoningAutoClose();
+      }
+      appendContinueSlot();
     }
   };
 }
@@ -872,7 +960,7 @@ var POPUP_SIZING = /* @__PURE__ */ new WeakMap();
 function isBrowser() {
   return typeof document !== "undefined" && typeof window !== "undefined";
 }
-function emit(target, name, detail) {
+function emit2(target, name, detail) {
   emitIcen(target, name, detail);
 }
 function resolveComposer(el) {
@@ -1242,7 +1330,7 @@ function openModelPopup(composer) {
         MODEL_CTX.delete(composer);
       }
       updateModelButton(composer);
-      emit(composer, "icen:ai-model-change", { provider, model, label, context });
+      emit2(composer, "icen:ai-model-change", { provider, model, label, context });
       refreshUsageRing(composer);
       closePopup(composer);
     },
@@ -1350,7 +1438,7 @@ function openCommandPopup(composer, token) {
         ta.value = "";
         autosizeTa(ta);
       }
-      emit(composer, "icen:ai-command", { name, args });
+      emit2(composer, "icen:ai-command", { name, args });
       closePopup(composer);
     },
     build: (s) => {
@@ -1553,7 +1641,7 @@ function addActiveRef(composer, source) {
   actives.push(source);
   ACTIVE_REFS.set(composer, actives);
   renderRefs(composer);
-  emit(composer, "icen:ai-ref", { action: "add", ref: source });
+  emit2(composer, "icen:ai-ref", { action: "add", ref: source });
 }
 function removeActiveRef(composer, source) {
   const actives = ACTIVE_REFS.get(composer) ?? [];
@@ -1573,7 +1661,7 @@ function removeActiveRef(composer, source) {
       autosizeTa(ta);
     }
   }
-  emit(composer, "icen:ai-ref", { action: "remove", ref: source });
+  emit2(composer, "icen:ai-ref", { action: "remove", ref: source });
 }
 function pushHistory(composer, text) {
   const h2 = HISTORIES.get(composer) ?? { items: [], index: -1 };
@@ -1614,10 +1702,10 @@ function setupComposer(composer) {
     autosizeTa(ta);
     if (isRunning()) {
       enqueue(text);
-      emit(composer, "icen:ai-queue", { text });
+      emit2(composer, "icen:ai-queue", { text });
     } else {
       pushHistory(composer, text);
-      emit(composer, "icen:ai-send", { text });
+      emit2(composer, "icen:ai-send", { text });
     }
   };
   SUBMITS.set(composer, submit);
@@ -1630,7 +1718,7 @@ function setupComposer(composer) {
     renderQueue();
     ta.value = text;
     autosizeTa(ta);
-    emit(composer, "icen:ai-dequeue", { index });
+    emit2(composer, "icen:ai-dequeue", { index });
   };
   const browseHistory = (delta) => {
     const h2 = HISTORIES.get(composer);
@@ -1709,7 +1797,7 @@ function setupComposer(composer) {
   };
   const onSendClick = () => {
     if (isRunning()) {
-      emit(composer, "icen:ai-stop", {});
+      emit2(composer, "icen:ai-stop", {});
     } else {
       submit();
     }
@@ -1723,7 +1811,7 @@ function setupComposer(composer) {
       queue.splice(index, 1);
       QUEUES.set(composer, queue);
       renderQueue();
-      emit(composer, "icen:ai-dequeue", { index });
+      emit2(composer, "icen:ai-dequeue", { index });
     }
   };
   const onRefsClick = (e) => {
@@ -1752,7 +1840,7 @@ function setupComposer(composer) {
       }
       attachEl.hidden = false;
     }
-    emit(composer, "icen:ai-attach", { files });
+    emit2(composer, "icen:ai-attach", { files });
   };
   const onFileChange = () => {
     const files = Array.from(fileInput.files ?? []);
@@ -2059,7 +2147,7 @@ function bindComposer(el, opts = {}) {
           const next = queue.shift() ?? "";
           QUEUES.set(composer, queue);
           renderQueueChips(composer);
-          emit(composer, "icen:ai-dequeue", { index: 0 });
+          emit2(composer, "icen:ai-dequeue", { index: 0 });
           send(next);
         }
       })();

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

@@ -0,0 +1,26 @@
+/** 反馈事件 detail（与 IcenEventMap['icen:ai-feedback'] 同构；el 为 .ai-feedback 根） */
+interface AiFeedbackDetail {
+    value: 1 | -1 | 0;
+    reason?: string;
+    el?: HTMLElement;
+}
+interface AiFeedbackOpts {
+    /** 踩因枚举（默认五项） */
+    reasons?: string[];
+    /** 反馈回调（与 icen:ai-feedback 事件双通道） */
+    onFeedback?: (detail: AiFeedbackDetail) => void;
+}
+/**
+ * 渲染 👍/👎 双钮 + 踩因 chips + 提交/已提交态（快照渲染，全 textContent）。
+ * 交互由 initAiFeedback 委托驱动；opts.onFeedback 与 icen:ai-feedback 事件双通道。
+ * 返回挂载容器 el（render* 返回挂载元素约定，SSR 下原样返回）。
+ */
+declare function renderAiFeedback(el: HTMLElement, opts?: AiFeedbackOpts): HTMLElement;
+/**
+ * 反馈委托初始化：vote 切换/取消、chip 单选、提交进入 .is-done 终态。
+ * 幂等（scope 挂 __icenAiFeedbackInit）；返回销毁函数（解绑监听 + 复位标记，可重新 init）。
+ * SSR 下为 no-op。按钮为原生 button，键盘 Enter/Space 走原生 click，无需键盘委托。
+ */
+declare function initAiFeedback(root?: ParentNode): () => void;
+
+export { type AiFeedbackDetail, type AiFeedbackOpts, initAiFeedback, renderAiFeedback };

package/dist/behaviors/ai-feedback.mjs

@@ -0,0 +1,303 @@
+// 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;
+}
+function svgIcon(svg2) {
+  if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
+  let parsed;
+  try {
+    parsed = new DOMParser().parseFromString(svg2, "image/svg+xml");
+  } catch {
+    return null;
+  }
+  const root = parsed.documentElement;
+  if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) {
+    return null;
+  }
+  const sanitize = (el) => {
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el.children)) {
+      const tag = child.tagName.toLowerCase();
+      if (tag === "script" || tag === "foreignobject") {
+        child.remove();
+        continue;
+      }
+      sanitize(child);
+    }
+  };
+  sanitize(root);
+  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-feedback.ts
+var DEFAULT_REASONS = ["\u7B54\u6848\u6709\u8BEF", "\u5F15\u7528\u4E0D\u7B26", "\u5185\u5BB9\u8FC7\u65F6", "\u65E0\u5F15\u7528\u4F9D\u636E", "\u8D8A\u6743\u4FE1\u606F"];
+var ICON_THUMB_UP = '<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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>';
+var ICON_THUMB_DOWN = '<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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/></svg>';
+var feedbackCallbacks = /* @__PURE__ */ new WeakMap();
+function renderAiFeedback(el, opts = {}) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const root = h("div", "ai-feedback");
+  const votes = h("div", "ai-feedback-votes");
+  for (const dir of ["is-up", "is-down"]) {
+    const btn = h("button", `ai-feedback-vote ${dir}`);
+    btn.type = "button";
+    btn.setAttribute("aria-pressed", "false");
+    btn.setAttribute("aria-label", dir === "is-up" ? "\u6709\u5E2E\u52A9" : "\u65E0\u5E2E\u52A9");
+    const icon = svgIcon(dir === "is-up" ? ICON_THUMB_UP : ICON_THUMB_DOWN);
+    if (icon) btn.appendChild(icon);
+    votes.appendChild(btn);
+  }
+  root.appendChild(votes);
+  const reasons = h("div", "ai-feedback-reasons");
+  reasons.hidden = true;
+  const chips = (opts.reasons && opts.reasons.length > 0 ? opts.reasons : Array.from(DEFAULT_REASONS)).filter((r) => typeof r === "string" && r.trim() !== "");
+  for (const r of chips) {
+    const chip = h("button", "ai-feedback-chip", r);
+    chip.type = "button";
+    chip.setAttribute("aria-pressed", "false");
+    reasons.appendChild(chip);
+  }
+  const submit = h("button", "ai-feedback-submit", "\u63D0\u4EA4");
+  submit.type = "button";
+  reasons.appendChild(submit);
+  root.appendChild(reasons);
+  const done = h("div", "ai-feedback-done", "\u611F\u8C22\u53CD\u9988\uFF0C\u5DF2\u5173\u8054\u5230\u8BE5\u6761\u56DE\u7B54\u7684\u8FFD\u8E2A\u8BB0\u5F55");
+  done.hidden = true;
+  root.appendChild(done);
+  if (opts.onFeedback) feedbackCallbacks.set(root, opts.onFeedback);
+  el.appendChild(root);
+  return el;
+}
+function notify(root, detail) {
+  emitIcen(root, "icen:ai-feedback", { value: detail.value, reason: detail.reason, el: root });
+  const cb = feedbackCallbacks.get(root);
+  if (cb) cb({ value: detail.value, reason: detail.reason, el: root });
+}
+function voteOf(btn) {
+  if (btn.classList.contains("is-up")) return 1;
+  if (btn.classList.contains("is-down")) return -1;
+  return void 0;
+}
+function resetVotes(root) {
+  for (const btn of Array.from(root.querySelectorAll(".ai-feedback-vote"))) {
+    btn.classList.remove("is-picked");
+    btn.disabled = false;
+    btn.setAttribute("aria-pressed", "false");
+  }
+  const reasons = root.querySelector(".ai-feedback-reasons");
+  if (reasons) reasons.hidden = true;
+}
+function pickVote(root, btn, value) {
+  for (const other of Array.from(root.querySelectorAll(".ai-feedback-vote"))) {
+    if (other === btn) {
+      other.classList.add("is-picked");
+      other.disabled = false;
+      other.setAttribute("aria-pressed", "true");
+    } else {
+      other.classList.remove("is-picked");
+      other.disabled = true;
+      other.setAttribute("aria-pressed", "false");
+    }
+  }
+  const reasons = root.querySelector(".ai-feedback-reasons");
+  if (reasons) reasons.hidden = value !== -1;
+}
+function initAiFeedback(root) {
+  if (typeof document === "undefined") return () => void 0;
+  const scope = root ?? document;
+  const marked = scope;
+  if (marked.__icenAiFeedbackInit) return () => void 0;
+  marked.__icenAiFeedbackInit = true;
+  const target = scope;
+  const onClick = (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    if (!t) return;
+    const rootEl = t.closest(".ai-feedback");
+    if (!rootEl || rootEl.classList.contains("is-done")) return;
+    const chip = t.closest(".ai-feedback-chip");
+    if (chip) {
+      const picked = chip.classList.contains("is-picked");
+      for (const c of Array.from(rootEl.querySelectorAll(".ai-feedback-chip"))) {
+        c.classList.remove("is-picked");
+        c.setAttribute("aria-pressed", "false");
+      }
+      if (!picked) {
+        chip.classList.add("is-picked");
+        chip.setAttribute("aria-pressed", "true");
+      }
+      return;
+    }
+    if (t.closest(".ai-feedback-submit")) {
+      const reason = rootEl.querySelector(".ai-feedback-chip.is-picked")?.textContent ?? void 0;
+      rootEl.classList.add("is-done");
+      const done = rootEl.querySelector(".ai-feedback-done");
+      if (done) done.hidden = false;
+      const reasons = rootEl.querySelector(".ai-feedback-reasons");
+      if (reasons) reasons.hidden = true;
+      notify(rootEl, { value: -1, reason: reason || void 0 });
+      return;
+    }
+    const voteBtn = t.closest(".ai-feedback-vote");
+    if (!voteBtn || voteBtn.disabled) return;
+    const value = voteOf(voteBtn);
+    if (value === void 0) return;
+    if (voteBtn.classList.contains("is-picked")) {
+      resetVotes(rootEl);
+      notify(rootEl, { value: 0 });
+    } else {
+      pickVote(rootEl, voteBtn, value);
+      notify(rootEl, { value });
+    }
+  };
+  target.addEventListener("click", onClick);
+  return () => {
+    target.removeEventListener("click", onClick);
+    marked.__icenAiFeedbackInit = false;
+  };
+}
+export {
+  initAiFeedback,
+  renderAiFeedback
+};

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

@@ -9,6 +9,7 @@ interface AiTodoItem {
 }
 /**
  * 渲染 todo 列表（DOM API，全 textContent）。全部完成时容器加 .is-complete。
+ * 每项附 .ai-todo-check 描边勾（§5.27：done 时 CSS 显隐 + 480ms 描边动画，一次不循环）。
  * 返回挂载容器 el（render* 返回挂载元素约定，SSR 下原样返回）。
  */
 declare function renderAiTodo(el: HTMLElement, items: AiTodoItem[]): HTMLElement;
@@ -17,15 +18,28 @@ declare function renderAiTodo(el: HTMLElement, items: AiTodoItem[]): HTMLElement
  * 只读列表不挂交互。重复调用安全；返回销毁函数。
  */
 declare function initAiTodo(root?: ParentNode): () => void;
+/** 用量派生指标（§5.27）：opts.metrics 给出，或直接挂在 usage 对象同级字段上 */
+interface AiUsageMetrics {
+    /** 首 token 延迟（毫秒） */
+    ttftMs?: number;
+    /** 生成吞吐（tokens/秒） */
+    tokensPerSec?: number;
+    /** finish reason（stop / length / tool_calls…） */
+    finishReason?: string;
+}
 interface AiUsageRenderOpts {
     /** 上下文上限（如 200k）：给出时 total 行显示 82k / 200k · 41% */
     total?: number;
     /** 成本（USD）：给出时追加到 total 行 */
     cost?: number;
+    /** 派生指标（§5.27）：任一字段给出时图例下补一行 mono 明细（TTFT 0.8s · 42 tok/s · finish: stop） */
+    metrics?: AiUsageMetrics;
 }
 /**
  * 渲染用量分段条 + 图例 + 占比。返回挂载容器 el（render* 返回挂载元素约定）。
  * 配色契约：input=accent / output=success / cacheRead=info / cacheWrite=warning / reasoning=faint。
+ * opts.metrics（或 usage 同级 ttftMs/tokensPerSec/finishReason）存在时图例下补一行
+ * .ai-usage-metrics mono 明细（§5.27）。
  */
 declare function renderAiUsage(el: HTMLElement, usage: AiUsage, opts?: AiUsageRenderOpts): HTMLElement;
 interface AiUsageRingOpts extends AiUsageRenderOpts {
@@ -98,4 +112,4 @@ interface AiAuditRenderOpts {
  */
 declare function renderAiAudit(el: HTMLElement, source: AiAuditor | AiAuditEntry[], opts?: AiAuditRenderOpts): HTMLElement;
 
-export { type AiAuditRenderOpts, type AiContextFile, type AiContextMcpServer, type AiContextModel, type AiContextSkill, type AiTodoItem, type AiUsageRenderOpts, type AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing };
+export { type AiAuditRenderOpts, type AiContextFile, type AiContextMcpServer, type AiContextModel, type AiContextSkill, type AiTodoItem, type AiUsageMetrics, type AiUsageRenderOpts, type AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing };