@icen.ai/ui 0.8.0 → 0.8.1

package/dist/behaviors/ai-panel.mjs

@@ -1,4 +1,13 @@
 // src/behaviors/ai-core.ts
+var AI_STATUSES = [
+  "pending",
+  "running",
+  "streaming",
+  "approval",
+  "done",
+  "error",
+  "cancelled"
+];
 function aiStatusLabel(s) {
   const labels = {
     pending: "\u7B49\u5F85",
@@ -171,9 +180,15 @@ 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 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;
@@ -187,15 +202,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();
@@ -209,6 +224,44 @@ function svgIcon(svg2) {
 }
 
 // src/behaviors/popover.ts
+var PANEL_SIZING_ATTRS = {
+  width: "data-panel-width",
+  minWidth: "data-panel-min",
+  maxWidth: "data-panel-max",
+  minHeight: "data-panel-min-height",
+  maxHeight: "data-panel-max-height"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function resolvePanelSizing(el, overrides) {
+  const base = readPanelSizing(el);
+  if (!overrides) return base;
+  for (const key of Object.keys(overrides)) {
+    const v = overrides[key];
+    if (typeof v === "number" && Number.isFinite(v) && v > 0) base[key] = v;
+  }
+  return base;
+}
+function sizingToLayout(sizing, opts) {
+  const out = { ...opts };
+  if (sizing.minWidth != null) out.minWidth = sizing.minWidth;
+  if (sizing.maxWidth != null) out.maxWidth = sizing.maxWidth;
+  if (sizing.width != null) {
+    out.minWidth = sizing.width;
+    out.maxWidth = sizing.width;
+  }
+  if (sizing.maxHeight != null) out.maxHeight = sizing.maxHeight;
+  return out;
+}
 var DEFAULT_MIN_WIDTH = 220;
 var DEFAULT_MAX_WIDTH = 420;
 var DEFAULT_MIN_HEIGHT = 120;
@@ -233,13 +286,35 @@ function horizontalAnchor(anchor, width, align) {
 function computePopoverLayout(anchor, viewport, opts = {}) {
   const margin = opts.margin ?? 12;
   const offset = opts.offset ?? 8;
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    const availableLeft = Math.max(0, anchor.left - margin - offset);
+    const availableRight = Math.max(0, viewport.width - anchor.right - margin - offset);
+    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= DEFAULT_MIN_WIDTH ? preferredSide : preferredSide === "left" ? "right" : "left";
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    const maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
   const availableWidth = Math.max(80, viewport.width - margin * 2);
   const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
   const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
   const maxWidth = Math.min(requestedMaxWidth, availableWidth);
   const minWidth = Math.min(requestedMinWidth, maxWidth);
-  const preferredSide = opts.side ?? "top";
-  const align = opts.align ?? "start";
   const availableTop = Math.max(0, anchor.top - margin - offset);
   const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
   const availableHeight = Math.max(80, viewport.height - margin * 2);
@@ -263,8 +338,8 @@ function computePopoverLayout(anchor, viewport, opts = {}) {
   return { side, left, top, width, maxHeight };
 }
 var openPanels = /* @__PURE__ */ new Map();
-function rectFromElement(el2) {
-  const r = el2.getBoundingClientRect();
+function rectFromElement(el) {
+  const r = el.getBoundingClientRect();
   return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
 }
 function resolveAnchor(state) {
@@ -317,7 +392,8 @@ function onKeyDown(e) {
 function openPopover(panel, options) {
   if (typeof document === "undefined") return;
   if (openPanels.has(panel)) closePopover(panel);
-  const { anchor, onClose, ...layoutOpts } = options;
+  const { anchor, onClose, sizing, ...rest } = options;
+  const layoutOpts = sizingToLayout(resolvePanelSizing(panel, sizing), rest);
   const placeholder = document.createComment("popover-anchor");
   panel.parentNode?.insertBefore(placeholder, panel);
   const wasHidden = panel.hidden;
@@ -369,32 +445,24 @@ function closePopover(panel) {
   state.onClose?.();
 }
 
-// src/behaviors/ai-panel.ts
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text !== void 0) 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-panel.ts
 function dispatch(node, name, detail) {
-  node.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+  emitIcen(node, name, detail);
 }
-var STATUS_CLASSES = [
-  "pending",
-  "running",
-  "streaming",
-  "approval",
-  "done",
-  "error",
-  "cancelled"
-];
 function stripStatusClasses(node) {
-  for (const s of STATUS_CLASSES) node.classList.remove(`is-${s}`);
+  for (const s of AI_STATUSES) node.classList.remove(`is-${s}`);
 }
 function buildTodoHead(done, total) {
-  const head = el("div", "ai-todo-head");
-  head.appendChild(el("span", "ai-todo-progress", `${done}/${total}`));
-  const bar = el("div", "ai-todo-bar");
+  const head = h("div", "ai-todo-head");
+  head.appendChild(h("span", "ai-todo-progress", `${done}/${total}`));
+  const bar = h("div", "ai-todo-bar");
   bar.setAttribute("role", "progressbar");
   bar.setAttribute("aria-valuemin", "0");
   bar.setAttribute("aria-valuemax", String(total));
@@ -407,23 +475,24 @@ function buildTodoHead(done, total) {
   return head;
 }
 function buildTodoItem(item, index) {
-  const row = el("div", `ai-todo-item is-${item.status}`);
+  const row = h("div", `ai-todo-item is-${item.status}`);
   row.dataset.index = String(index);
-  row.appendChild(el("span", "ai-item-status"));
-  row.appendChild(el("span", "ai-todo-text", item.content));
-  row.appendChild(el("span", "ai-todo-active", item.activeForm ?? item.content));
+  row.appendChild(h("span", "ai-item-status"));
+  row.appendChild(h("span", "ai-todo-text", item.content));
+  row.appendChild(h("span", "ai-todo-active", item.activeForm ?? item.content));
   return row;
 }
-function renderAiTodo(elm, items) {
-  if (typeof document === "undefined") return;
-  elm.textContent = "";
-  const root = el("div", "ai-todo");
+function renderAiTodo(el, items) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const root = h("div", "ai-todo");
   const list = Array.isArray(items) ? items : [];
   const done = list.filter((i) => i.status === "done").length;
   root.appendChild(buildTodoHead(done, list.length));
   list.forEach((item, i) => root.appendChild(buildTodoItem(item, i)));
   if (list.length > 0 && done === list.length) root.classList.add("is-complete");
-  elm.appendChild(root);
+  el.appendChild(root);
+  return el;
 }
 var TODO_NEXT = {
   pending: "running",
@@ -431,7 +500,7 @@ var TODO_NEXT = {
   done: "pending"
 };
 function todoItemStatus(item) {
-  for (const s of STATUS_CLASSES) {
+  for (const s of AI_STATUSES) {
     if (item.classList.contains(`is-${s}`)) return s;
   }
   return "pending";
@@ -512,8 +581,8 @@ function initAiTodo(root) {
     marked.__icenAiTodoInit = false;
   };
 }
-function renderAiUsage(elm, usage, opts = {}) {
-  if (typeof document === "undefined") return;
+function renderAiUsage(el, usage, opts = {}) {
+  if (typeof document === "undefined") return el;
   const u = normalizeUsage(usage);
   const segs = [
     { key: "input", className: "ai-usage-seg--input", label: "\u8F93\u5165", value: u.input ?? 0 },
@@ -525,9 +594,9 @@ function renderAiUsage(elm, usage, opts = {}) {
   const activeSegs = segs.filter((s) => s.value > 0);
   const sum2 = activeSegs.reduce((acc, s) => acc + s.value, 0);
   const total = u.total ?? sum2;
-  elm.textContent = "";
-  const root = el("div", "ai-usage");
-  const bar = el("div", "ai-usage-bar");
+  el.textContent = "";
+  const root = h("div", "ai-usage");
+  const bar = h("div", "ai-usage-bar");
   const summary = activeSegs.length > 0 ? activeSegs.map((s) => `${s.label} ${formatTokens(s.value)}`).join("\uFF0C") : "\u6682\u65E0\u7528\u91CF";
   bar.setAttribute("role", "img");
   bar.setAttribute("aria-label", `\u7528\u91CF\uFF1A${summary}`);
@@ -539,15 +608,15 @@ function renderAiUsage(elm, usage, opts = {}) {
   }
   root.appendChild(bar);
   if (activeSegs.length > 0) {
-    const legend = el("div", "ai-usage-legend");
+    const legend = h("div", "ai-usage-legend");
     for (const s of activeSegs) {
-      const item = el("span", "ai-usage-legend-item");
+      const item = h("span", "ai-usage-legend-item");
       const dot = document.createElement("i");
       dot.className = `ai-usage-dot ${s.className}`;
       dot.setAttribute("aria-hidden", "true");
       item.appendChild(dot);
-      item.appendChild(el("span", "ai-usage-legend-label", s.label));
-      item.appendChild(el("span", "ai-usage-legend-value", formatTokens(s.value)));
+      item.appendChild(h("span", "ai-usage-legend-label", s.label));
+      item.appendChild(h("span", "ai-usage-legend-value", formatTokens(s.value)));
       legend.appendChild(item);
     }
     root.appendChild(legend);
@@ -560,17 +629,18 @@ function renderAiUsage(elm, usage, opts = {}) {
   if (typeof opts.cost === "number" && Number.isFinite(opts.cost)) {
     totalParts.push(` \xB7 $${opts.cost.toFixed(4)}`);
   }
-  root.appendChild(el("div", "ai-usage-total", totalParts.join("")));
-  elm.appendChild(root);
+  root.appendChild(h("div", "ai-usage-total", totalParts.join("")));
+  el.appendChild(root);
+  return el;
 }
-function renderAiUsageRing(elm, usage, opts = {}) {
-  if (typeof document === "undefined") return;
+function renderAiUsageRing(el, usage, opts = {}) {
+  if (typeof document === "undefined") return el;
   const u = normalizeUsage(usage);
   const used = u.total ?? (u.input ?? 0) + (u.output ?? 0) + (u.cacheRead ?? 0) + (u.cacheWrite ?? 0) + (u.reasoning ?? 0);
   const hasLimit = typeof opts.total === "number" && opts.total > 0;
   const pct = hasLimit ? Math.min(100, Math.max(0, Math.round(used / opts.total * 100))) : 0;
-  elm.textContent = "";
-  const btn = el("button", "ai-usage-ring");
+  el.textContent = "";
+  const btn = h("button", "ai-usage-ring");
   btn.type = "button";
   btn.classList.add(pct >= 85 ? "is-hot" : pct >= 60 ? "is-warn" : "is-ok");
   btn.setAttribute("aria-haspopup", "true");
@@ -594,7 +664,7 @@ function renderAiUsageRing(elm, usage, opts = {}) {
     svg2.appendChild(c);
   }
   btn.appendChild(svg2);
-  btn.appendChild(el("span", "ai-usage-ring-pct", hasLimit ? `${pct}%` : formatTokens(used)));
+  btn.appendChild(h("span", "ai-usage-ring-pct", hasLimit ? `${pct}%` : formatTokens(used)));
   let panel = null;
   const closePanel = () => {
     if (!panel) return;
@@ -608,10 +678,10 @@ function renderAiUsageRing(elm, usage, opts = {}) {
       closePanel();
       return;
     }
-    const p = el("div", "popover ai-usage-popover");
+    const p = h("div", "popover ai-usage-popover");
     p.hidden = true;
-    p.appendChild(el("div", "ai-usage-popover-title", opts.title ?? "\u4E0A\u4E0B\u6587\u7A97\u53E3"));
-    const body = el("div", "ai-usage-popover-body");
+    p.appendChild(h("div", "ai-usage-popover-title", opts.title ?? "\u4E0A\u4E0B\u6587\u7A97\u53E3"));
+    const body = h("div", "ai-usage-popover-body");
     renderAiUsage(body, usage, opts);
     p.appendChild(body);
     openPopover(p, {
@@ -625,7 +695,8 @@ function renderAiUsageRing(elm, usage, opts = {}) {
     });
     panel = p;
   });
-  elm.appendChild(btn);
+  el.appendChild(btn);
+  return el;
 }
 var svgWrap = (inner) => `<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">${inner}</svg>`;
 var FILE_OUTLINE = '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>';
@@ -673,8 +744,8 @@ function fileKindIcon(kind) {
 }
 function renderFileChip(file) {
   const kind = fileKind(file.path);
-  const chip = el("span", `ai-file-chip ai-file-chip--${kind} is-${file.status ?? "modified"}`);
-  const icon = el("span", "ai-file-icon");
+  const chip = h("span", `ai-file-chip ai-file-chip--${kind} is-${file.status ?? "modified"}`);
+  const icon = h("span", "ai-file-icon");
   const svg2 = svgIcon(fileKindIcon(kind));
   if (svg2) icon.appendChild(svg2);
   chip.appendChild(icon);
@@ -682,21 +753,21 @@ function renderFileChip(file) {
   return chip;
 }
 function renderSection(title) {
-  const section = el("section", "ai-context-section");
-  section.appendChild(el("h3", "", title));
-  const body = el("div", "ai-context-section-body");
+  const section = h("section", "ai-context-section");
+  section.appendChild(h("h3", "", title));
+  const body = h("div", "ai-context-section-body");
   section.appendChild(body);
   return { section, body };
 }
-function renderAiContext(elm, model) {
-  if (typeof document === "undefined") return;
-  elm.textContent = "";
+function renderAiContext(el, model) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
   const m = model ?? {};
-  const aside = el("aside", "ai-context");
+  const aside = h("aside", "ai-context");
   aside.hidden = true;
-  const head = el("div", "ai-context-head");
-  head.appendChild(el("span", "", "\u4E0A\u4E0B\u6587"));
-  const closeBtn = el("button", "", "\xD7");
+  const head = h("div", "ai-context-head");
+  head.appendChild(h("span", "", "\u4E0A\u4E0B\u6587"));
+  const closeBtn = h("button", "", "\xD7");
   closeBtn.type = "button";
   closeBtn.setAttribute("data-ai-context-close", "");
   closeBtn.setAttribute("aria-label", "\u5173\u95ED");
@@ -716,7 +787,7 @@ function renderAiContext(elm, model) {
   const files = Array.isArray(m.files) ? m.files : [];
   if (files.length > 0) {
     const { section, body } = renderSection(`\u6587\u4EF6 (${files.length})`);
-    const chips = el("div", "ai-files");
+    const chips = h("div", "ai-files");
     for (const f of files) chips.appendChild(renderFileChip(f));
     body.appendChild(chips);
     aside.appendChild(section);
@@ -726,17 +797,17 @@ function renderAiContext(elm, model) {
     const { section, body } = renderSection(`MCP (${servers.length})`);
     for (const s of servers) {
       const ok = s.status !== "disconnected";
-      const row = el("div", `ai-item is-${ok ? "done" : "error"}`);
-      const icon = el("span", "ai-item-icon");
+      const row = h("div", `ai-item is-${ok ? "done" : "error"}`);
+      const icon = h("span", "ai-item-icon");
       const svg2 = svgIcon(ICON_SERVER);
       if (svg2) icon.appendChild(svg2);
       row.appendChild(icon);
-      const main = el("span", "ai-item-main");
-      main.appendChild(el("span", "ai-item-title", s.name));
+      const main = h("span", "ai-item-main");
+      main.appendChild(h("span", "ai-item-title", s.name));
       row.appendChild(main);
-      const side = el("span", "ai-item-side");
-      side.appendChild(el("span", "ai-item-status"));
-      side.appendChild(el("span", "ai-item-meta", typeof s.tools === "number" ? `${s.tools} \u5DE5\u5177` : ""));
+      const side = h("span", "ai-item-side");
+      side.appendChild(h("span", "ai-item-status"));
+      side.appendChild(h("span", "ai-item-meta", typeof s.tools === "number" ? `${s.tools} \u5DE5\u5177` : ""));
       row.appendChild(side);
       body.appendChild(row);
     }
@@ -746,20 +817,21 @@ function renderAiContext(elm, model) {
   if (skills.length > 0) {
     const { section, body } = renderSection("Skills");
     for (const s of skills) {
-      const row = el("div", "ai-item");
-      const icon = el("span", "ai-item-icon");
+      const row = h("div", "ai-item");
+      const icon = h("span", "ai-item-icon");
       const svg2 = svgIcon(ICON_SPARKLES);
       if (svg2) icon.appendChild(svg2);
       row.appendChild(icon);
-      const main = el("span", "ai-item-main");
-      main.appendChild(el("span", "ai-item-title", s.name));
-      if (s.description) main.appendChild(el("span", "ai-item-sub", s.description));
+      const main = h("span", "ai-item-main");
+      main.appendChild(h("span", "ai-item-title", s.name));
+      if (s.description) main.appendChild(h("span", "ai-item-sub", s.description));
       row.appendChild(main);
       body.appendChild(row);
     }
     aside.appendChild(section);
   }
-  elm.appendChild(aside);
+  el.appendChild(aside);
+  return el;
 }
 function isInline(drawer) {
   return drawer.classList.contains("ai-context--inline");
@@ -805,6 +877,7 @@ function initAiContext(root) {
     void drawer.offsetWidth;
     drawer.classList.add("is-open");
     syncTriggers(drawer, true);
+    dispatch(drawer, "icen:ai-context-open", {});
     const closeBtn = drawer.querySelector("[data-ai-context-close]");
     (closeBtn ?? drawer).focus?.();
   }
@@ -812,6 +885,7 @@ function initAiContext(root) {
     if (drawer.hidden && !drawer.classList.contains("is-open")) return;
     drawer.classList.remove("is-open");
     syncTriggers(drawer, false);
+    dispatch(drawer, "icen:ai-context-close", {});
     const finish = () => {
       drawer.hidden = true;
       if (restoreFocus && lastTrigger && document.contains(lastTrigger)) {
@@ -943,55 +1017,55 @@ function buildAuditBody(body, entries, opts = {}) {
     g.requests++;
     groups.set(key, g);
   }
-  const totals = el("div", "ai-audit-totals");
+  const totals = h("div", "ai-audit-totals");
   const bits = [`${entries.length} \u6B21\u8BF7\u6C42`];
   if (errors > 0) bits.push(`${errors} \u5931\u8D25`);
   bits.push(`${formatTokens(tokens)} tok`);
   if (cost > 0) bits.push(`$${(Math.round(cost * 1e6) / 1e6).toFixed(4)}`);
   if (ttftN > 0) bits.push(`TTFT ${formatDuration(Math.round(ttftSum / ttftN))}`);
-  totals.appendChild(el("span", "ai-audit-totals-text", bits.join(" \xB7 ")));
+  totals.appendChild(h("span", "ai-audit-totals-text", bits.join(" \xB7 ")));
   body.appendChild(totals);
   const sorted = Array.from(groups.values()).sort((a, b) => b.tokens - a.tokens);
   if (sorted.length > 0) {
-    const list2 = el("div", "ai-audit-models");
+    const list2 = h("div", "ai-audit-models");
     for (const g of sorted) {
-      const row = el("div", "ai-audit-model-row");
-      row.appendChild(el("span", "ai-audit-model-name", g.key));
-      row.appendChild(el("span", "ai-audit-model-meta", `${g.requests} \u6B21 \xB7 ${formatTokens(g.tokens)} tok${g.cost > 0 ? ` \xB7 $${g.cost.toFixed(4)}` : ""}`));
+      const row = h("div", "ai-audit-model-row");
+      row.appendChild(h("span", "ai-audit-model-name", g.key));
+      row.appendChild(h("span", "ai-audit-model-meta", `${g.requests} \u6B21 \xB7 ${formatTokens(g.tokens)} tok${g.cost > 0 ? ` \xB7 $${g.cost.toFixed(4)}` : ""}`));
       list2.appendChild(row);
     }
     body.appendChild(list2);
   }
   const recent = entries.slice(-limit).reverse();
-  const list = el("div", "ai-audit-list");
+  const list = h("div", "ai-audit-list");
   for (const e of recent) {
-    const item = el("div", `ai-audit-item is-${e.status === "ok" ? "done" : "error"}`);
-    item.appendChild(el("span", "ai-audit-dot"));
-    const main = el("span", "ai-audit-item-main");
-    main.appendChild(el("span", "ai-audit-item-model", `${e.provider} \xB7 ${e.model}`));
+    const item = h("div", `ai-audit-item is-${e.status === "ok" ? "done" : "error"}`);
+    item.appendChild(h("span", "ai-audit-dot"));
+    const main = h("span", "ai-audit-item-main");
+    main.appendChild(h("span", "ai-audit-item-model", `${e.provider} \xB7 ${e.model}`));
     const metaBits = [timeOf(e.ts), formatDuration(e.durationMs)];
     if (typeof e.ttftMs === "number") metaBits.push(`TTFT ${formatDuration(e.ttftMs)}`);
     if ((e.usage?.total ?? 0) > 0) metaBits.push(`${formatTokens(e.usage?.total ?? 0)} tok`);
-    main.appendChild(el("span", "ai-audit-item-meta", metaBits.filter(Boolean).join(" \xB7 ")));
+    main.appendChild(h("span", "ai-audit-item-meta", metaBits.filter(Boolean).join(" \xB7 ")));
     item.appendChild(main);
-    if (e.error) item.appendChild(el("span", "ai-audit-item-error", e.error));
+    if (e.error) item.appendChild(h("span", "ai-audit-item-error", e.error));
     list.appendChild(item);
   }
   body.appendChild(list);
 }
-function renderAiAudit(elm, source, opts = {}) {
-  if (typeof document === "undefined") return;
-  elm.textContent = "";
-  const root = el("div", "ai-audit");
+function renderAiAudit(el, source, opts = {}) {
+  if (typeof document === "undefined") return el;
+  el.textContent = "";
+  const root = h("div", "ai-audit");
   const entries = auditEntriesOf(source);
   if (entries.length === 0) {
-    root.appendChild(el("div", "ai-audit-empty", "\u6682\u65E0\u5BA1\u8BA1\u8BB0\u5F55"));
-    elm.appendChild(root);
-    return;
+    root.appendChild(h("div", "ai-audit-empty", "\u6682\u65E0\u5BA1\u8BA1\u8BB0\u5F55"));
+    el.appendChild(root);
+    return el;
   }
   buildAuditBody(root, entries, { limit: opts.limit });
   if (opts.clearButton !== false) {
-    const clear = el("button", "btn btn-sm ai-audit-clear", "\u6E05\u9664\u5BA1\u8BA1");
+    const clear = h("button", "btn btn-sm ai-audit-clear", "\u6E05\u9664\u5BA1\u8BA1");
     clear.type = "button";
     clear.addEventListener("click", () => {
       if (opts.onClear) opts.onClear();
@@ -999,7 +1073,8 @@ function renderAiAudit(elm, source, opts = {}) {
     });
     root.appendChild(clear);
   }
-  elm.appendChild(root);
+  el.appendChild(root);
+  return el;
 }
 export {
   initAiContext,