@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/ai-panel.mjs

@@ -0,0 +1,1012 @@
+// src/behaviors/ai-core.ts
+function aiStatusLabel(s) {
+  const labels = {
+    pending: "\u7B49\u5F85",
+    running: "\u6267\u884C\u4E2D",
+    streaming: "\u6D41\u5F0F\u4E2D",
+    approval: "\u5F85\u786E\u8BA4",
+    done: "\u5B8C\u6210",
+    error: "\u5931\u8D25",
+    cancelled: "\u5DF2\u53D6\u6D88"
+  };
+  return labels[s] ?? s;
+}
+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 normalizeUsage(raw) {
+  if (!isObj(raw)) return {};
+  const usage = {};
+  const input = pickNum(raw, ["input"]) ?? pickNum(raw, ["prompt_tokens"]) ?? pickNum(raw, ["promptTokenCount"]) ?? pickNum(raw, ["input_tokens"]);
+  const output = pickNum(raw, ["output"]) ?? pickNum(raw, ["completion_tokens"]) ?? pickNum(raw, ["candidatesTokenCount"]) ?? pickNum(raw, ["output_tokens"]);
+  const cacheRead = pickNum(raw, ["cacheRead", "cache_read"]) ?? pickNum(raw, ["cache_read_input_tokens"]) ?? pickNum(raw, ["prompt_cache_hit_tokens"]) ?? pickNum(raw, ["cached_tokens"]) ?? pickNum(raw, ["cachedContentTokenCount"]) ?? (isObj(raw.prompt_tokens_details) ? pickNum(raw.prompt_tokens_details, ["cached_tokens"]) : void 0);
+  const cacheWrite = pickNum(raw, ["cacheWrite", "cache_write"]) ?? pickNum(raw, ["cache_creation_input_tokens"]) ?? pickNum(raw, ["cacheCreationTokenCount"]) ?? (isObj(raw.prompt_tokens_details) ? pickNum(raw.prompt_tokens_details, ["cache_write_tokens"]) : void 0);
+  const reasoning = pickNum(raw, ["reasoning"]) ?? pickNum(raw, ["thoughtsTokenCount"]) ?? (isObj(raw.completion_tokens_details) ? pickNum(raw.completion_tokens_details, ["reasoning_tokens"]) : void 0);
+  const total = pickNum(raw, ["total"]) ?? pickNum(raw, ["total_tokens"]) ?? pickNum(raw, ["totalTokenCount"]) ?? (input != null || output != null || cacheRead != null || cacheWrite != null || reasoning != null ? (input ?? 0) + (output ?? 0) + (cacheRead ?? 0) + (cacheWrite ?? 0) + (reasoning ?? 0) : void 0);
+  if (input != null) usage.input = input;
+  if (output != null) usage.output = output;
+  if (cacheRead != null) usage.cacheRead = cacheRead;
+  if (cacheWrite != null) usage.cacheWrite = cacheWrite;
+  if (reasoning != null) usage.reasoning = reasoning;
+  if (total != null) usage.total = total;
+  return usage;
+}
+function trim1(v) {
+  const s = (Math.round(v * 10) / 10).toFixed(1);
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+function formatTokens(n) {
+  if (!Number.isFinite(n)) return "0";
+  const abs = Math.abs(n);
+  if (abs < 1e3) return String(Math.round(n));
+  if (abs < 1e6) return `${trim1(n / 1e3)}k`;
+  return `${trim1(n / 1e6)}M`;
+}
+function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return "0ms";
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  if (ms < 6e4) return `${trim1(ms / 1e3)}s`;
+  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 rm = Math.round(ms % 36e5 / 6e4);
+  return rm > 0 ? `${h}h${rm}m` : `${h}h`;
+}
+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 = (el2) => {
+    for (const attr of Array.from(el2.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el2.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el2.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el2.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/popover.ts
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 420;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_MAX_HEIGHT = 420;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function chooseSide(preferredSide, availableTop, availableBottom, desiredHeight) {
+  const preferredSpace = preferredSide === "top" ? availableTop : availableBottom;
+  const oppositeSpace = preferredSide === "top" ? availableBottom : availableTop;
+  if (preferredSpace >= desiredHeight) return preferredSide;
+  if (oppositeSpace >= desiredHeight) return preferredSide === "top" ? "bottom" : "top";
+  if (preferredSpace >= oppositeSpace) return preferredSide;
+  return preferredSide === "top" ? "bottom" : "top";
+}
+function horizontalAnchor(anchor, width, align) {
+  if (align === "center") return anchor.left + anchor.width / 2 - width / 2;
+  if (align === "end") return anchor.right - width;
+  return anchor.left;
+}
+function computePopoverLayout(anchor, viewport, opts = {}) {
+  const margin = opts.margin ?? 12;
+  const offset = opts.offset ?? 8;
+  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);
+  const minHeight = Math.min(Math.max(80, opts.minHeight ?? DEFAULT_MIN_HEIGHT), availableHeight);
+  const requestedMaxHeight = Math.max(minHeight, opts.maxHeight ?? DEFAULT_MAX_HEIGHT);
+  const fallbackHeight = Math.min(260, requestedMaxHeight);
+  const contentHeight = Math.max(opts.contentHeightHint ?? 0, fallbackHeight);
+  const desiredHeight = clamp(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
+  const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
+  const sideSpace = side === "top" ? availableTop : availableBottom;
+  const maxHeight = Math.min(
+    requestedMaxHeight,
+    Math.max(80, sideSpace || Math.max(availableTop, availableBottom)),
+    availableHeight
+  );
+  const positionedHeight = clamp(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp(desiredTop, margin, viewport.height - margin - positionedHeight);
+  return { side, left, top, width, maxHeight };
+}
+var openPanels = /* @__PURE__ */ new Map();
+function rectFromElement(el2) {
+  const r = el2.getBoundingClientRect();
+  return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
+}
+function resolveAnchor(state) {
+  if (state.anchor instanceof Element) {
+    if (!state.anchor.isConnected) return null;
+    return rectFromElement(state.anchor);
+  }
+  return state.anchor;
+}
+function relayout(state) {
+  const anchor = resolveAnchor(state);
+  if (!anchor) {
+    closePopover(state.panel);
+    return;
+  }
+  const layout = computePopoverLayout(
+    anchor,
+    { width: window.innerWidth, height: window.innerHeight },
+    state.opts
+  );
+  const { panel } = state;
+  panel.style.left = `${layout.left}px`;
+  panel.style.top = `${layout.top}px`;
+  panel.style.width = `${layout.width}px`;
+  panel.style.maxHeight = `${layout.maxHeight}px`;
+  panel.dataset.side = layout.side;
+  panel.style.visibility = state.prevVisibility;
+}
+function onWindowChange() {
+  openPanels.forEach(relayout);
+}
+function onOutsidePointerDown(e) {
+  const target = e.target;
+  if (!(target instanceof Node)) return;
+  openPanels.forEach((state) => {
+    if (state.panel.contains(target)) return;
+    if (state.anchor instanceof Element && state.anchor.contains(target)) return;
+    closePopover(state.panel);
+  });
+}
+function onKeyDown(e) {
+  if (e.key !== "Escape") return;
+  const states = Array.from(openPanels.values());
+  const top = states[states.length - 1];
+  if (top) {
+    e.preventDefault();
+    closePopover(top.panel);
+  }
+}
+function openPopover(panel, options) {
+  if (typeof document === "undefined") return;
+  if (openPanels.has(panel)) closePopover(panel);
+  const { anchor, onClose, ...layoutOpts } = options;
+  const placeholder = document.createComment("popover-anchor");
+  panel.parentNode?.insertBefore(placeholder, panel);
+  const wasHidden = panel.hidden;
+  const prevVisibility = panel.style.visibility;
+  const state = {
+    panel,
+    anchor,
+    opts: layoutOpts,
+    onClose,
+    placeholder,
+    wasHidden,
+    prevVisibility
+  };
+  openPanels.set(panel, state);
+  document.body.appendChild(panel);
+  panel.hidden = false;
+  panel.style.visibility = "hidden";
+  relayout(state);
+  if (openPanels.size === 1) {
+    window.addEventListener("resize", onWindowChange);
+    window.addEventListener("scroll", onWindowChange, true);
+    document.addEventListener("pointerdown", onOutsidePointerDown, true);
+    window.addEventListener("keydown", onKeyDown);
+  }
+}
+function closePopover(panel) {
+  if (typeof document === "undefined") return;
+  const state = openPanels.get(panel);
+  if (!state) return;
+  openPanels.delete(panel);
+  panel.style.visibility = state.prevVisibility;
+  if (typeof state.wasHidden === "string") panel.setAttribute("hidden", state.wasHidden);
+  else panel.hidden = state.wasHidden;
+  panel.style.left = "";
+  panel.style.top = "";
+  panel.style.width = "";
+  panel.style.maxHeight = "";
+  delete panel.dataset.side;
+  if (state.placeholder.parentNode) {
+    state.placeholder.parentNode.insertBefore(panel, state.placeholder);
+    state.placeholder.remove();
+  }
+  if (openPanels.size === 0) {
+    window.removeEventListener("resize", onWindowChange);
+    window.removeEventListener("scroll", onWindowChange, true);
+    document.removeEventListener("pointerdown", onOutsidePointerDown, true);
+    window.removeEventListener("keydown", onKeyDown);
+  }
+  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;
+}
+function dispatch(node, name, detail) {
+  node.dispatchEvent(new CustomEvent(name, { bubbles: true, 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}`);
+}
+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");
+  bar.setAttribute("role", "progressbar");
+  bar.setAttribute("aria-valuemin", "0");
+  bar.setAttribute("aria-valuemax", String(total));
+  bar.setAttribute("aria-valuenow", String(done));
+  bar.setAttribute("aria-label", "\u4EFB\u52A1\u8FDB\u5EA6");
+  const fill = document.createElement("i");
+  fill.style.width = total > 0 ? `${Math.round(done / total * 100)}%` : "0%";
+  bar.appendChild(fill);
+  head.appendChild(bar);
+  return head;
+}
+function buildTodoItem(item, index) {
+  const row = el("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));
+  return row;
+}
+function renderAiTodo(elm, items) {
+  if (typeof document === "undefined") return;
+  elm.textContent = "";
+  const root = el("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);
+}
+var TODO_NEXT = {
+  pending: "running",
+  running: "done",
+  done: "pending"
+};
+function todoItemStatus(item) {
+  for (const s of STATUS_CLASSES) {
+    if (item.classList.contains(`is-${s}`)) return s;
+  }
+  return "pending";
+}
+function refreshTodoProgress(todo) {
+  const items = Array.from(todo.querySelectorAll(".ai-todo-item"));
+  const done = items.filter((i) => i.classList.contains("is-done")).length;
+  const total = items.length;
+  const progress = todo.querySelector(".ai-todo-progress");
+  if (progress) progress.textContent = `${done}/${total}`;
+  const bar = todo.querySelector(".ai-todo-bar");
+  if (bar) {
+    bar.setAttribute("aria-valuemax", String(total));
+    bar.setAttribute("aria-valuenow", String(done));
+    const fill = bar.querySelector("i");
+    if (fill) fill.style.width = total > 0 ? `${Math.round(done / total * 100)}%` : "0%";
+  }
+  todo.classList.toggle("is-complete", total > 0 && done === total);
+}
+function toggleTodoItem(item) {
+  const todo = item.closest("[data-ai-todo-interactive]");
+  if (!todo || !todo.hasAttribute("data-ai-todo-interactive")) return;
+  const index = Array.from(
+    todo.querySelectorAll(".ai-todo-item")
+  ).indexOf(item);
+  const next = TODO_NEXT[todoItemStatus(item)] ?? "pending";
+  stripStatusClasses(item);
+  item.classList.add(`is-${next}`);
+  if (next === "running") {
+    const active = item.querySelector(".ai-todo-active");
+    if (active && item.dataset.activeForm) {
+      active.textContent = item.dataset.activeForm;
+    }
+  }
+  const text = item.querySelector(".ai-todo-text")?.textContent ?? "";
+  if (!item.hasAttribute("aria-label")) {
+    item.setAttribute("aria-label", `${text}\uFF0C\u72B6\u6001\uFF1A${aiStatusLabel(next)}`);
+  }
+  refreshTodoProgress(todo);
+  dispatch(item, "icen:ai-todo-toggle", { index, status: next });
+}
+function initAiTodo(root) {
+  if (typeof document === "undefined") return () => void 0;
+  const scope = root ?? document;
+  const marked = scope;
+  if (marked.__icenAiTodoInit) return () => void 0;
+  marked.__icenAiTodoInit = true;
+  const target = scope;
+  scope.querySelectorAll(
+    "[data-ai-todo-interactive] > .ai-todo-item"
+  ).forEach((item) => {
+    if (item.getAttribute("role") === "button") return;
+    item.setAttribute("role", "button");
+    item.tabIndex = 0;
+    const text = item.querySelector(".ai-todo-text")?.textContent ?? "";
+    item.setAttribute("aria-label", `${text}\uFF0C\u72B6\u6001\uFF1A${aiStatusLabel(todoItemStatus(item))}`);
+  });
+  const onClick = (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    const item = t?.closest(".ai-todo-item");
+    if (!item || !(item.closest("[data-ai-todo-interactive]") instanceof HTMLElement)) return;
+    toggleTodoItem(item);
+  };
+  const onKeydown = (e) => {
+    const ke = e;
+    if (ke.key !== "Enter" && ke.key !== " ") return;
+    const t = ke.target instanceof Element ? ke.target : null;
+    const item = t?.closest(".ai-todo-item");
+    if (!item || !(item.closest("[data-ai-todo-interactive]") instanceof HTMLElement)) return;
+    ke.preventDefault();
+    toggleTodoItem(item);
+  };
+  target.addEventListener("click", onClick);
+  target.addEventListener("keydown", onKeydown);
+  return () => {
+    target.removeEventListener("click", onClick);
+    target.removeEventListener("keydown", onKeydown);
+    marked.__icenAiTodoInit = false;
+  };
+}
+function renderAiUsage(elm, usage, opts = {}) {
+  if (typeof document === "undefined") return;
+  const u = normalizeUsage(usage);
+  const segs = [
+    { key: "input", className: "ai-usage-seg--input", label: "\u8F93\u5165", value: u.input ?? 0 },
+    { key: "output", className: "ai-usage-seg--output", label: "\u8F93\u51FA", value: u.output ?? 0 },
+    { key: "cacheRead", className: "ai-usage-seg--cache-read", label: "\u7F13\u5B58\u8BFB", value: u.cacheRead ?? 0 },
+    { key: "cacheWrite", className: "ai-usage-seg--cache-write", label: "\u7F13\u5B58\u5199", value: u.cacheWrite ?? 0 },
+    { key: "reasoning", className: "ai-usage-seg--reasoning", label: "\u63A8\u7406", value: u.reasoning ?? 0 }
+  ];
+  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");
+  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}`);
+  for (const s of activeSegs) {
+    const seg = document.createElement("i");
+    seg.className = `ai-usage-seg ${s.className}`;
+    seg.style.width = sum2 > 0 ? `${s.value / sum2 * 100}%` : "0%";
+    bar.appendChild(seg);
+  }
+  root.appendChild(bar);
+  if (activeSegs.length > 0) {
+    const legend = el("div", "ai-usage-legend");
+    for (const s of activeSegs) {
+      const item = el("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)));
+      legend.appendChild(item);
+    }
+    root.appendChild(legend);
+  }
+  const totalParts = [formatTokens(total)];
+  if (typeof opts.total === "number" && opts.total > 0) {
+    const pct = Math.min(100, Math.round(total / opts.total * 100));
+    totalParts.push(` / ${formatTokens(opts.total)} \xB7 ${pct}%`);
+  }
+  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);
+}
+function renderAiUsageRing(elm, usage, opts = {}) {
+  if (typeof document === "undefined") return;
+  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");
+  btn.type = "button";
+  btn.classList.add(pct >= 85 ? "is-hot" : pct >= 60 ? "is-warn" : "is-ok");
+  btn.setAttribute("aria-haspopup", "true");
+  btn.setAttribute(
+    "aria-label",
+    hasLimit ? `\u4E0A\u4E0B\u6587\u7A97\u53E3\u5360\u7528 ${pct}%\uFF0C\u70B9\u51FB\u67E5\u770B\u8BE6\u60C5` : `\u5DF2\u7528 ${formatTokens(used)}\uFF0C\u70B9\u51FB\u67E5\u770B\u8BE6\u60C5`
+  );
+  const NS = "http://www.w3.org/2000/svg";
+  const svg2 = document.createElementNS(NS, "svg");
+  svg2.setAttribute("viewBox", "0 0 36 36");
+  svg2.setAttribute("aria-hidden", "true");
+  const track = document.createElementNS(NS, "circle");
+  track.setAttribute("class", "ai-usage-ring-track");
+  const fill = document.createElementNS(NS, "circle");
+  fill.setAttribute("class", "ai-usage-ring-fill");
+  fill.setAttribute("stroke-dasharray", `${pct} 100`);
+  for (const c of [track, fill]) {
+    c.setAttribute("cx", "18");
+    c.setAttribute("cy", "18");
+    c.setAttribute("r", "15.9155");
+    svg2.appendChild(c);
+  }
+  btn.appendChild(svg2);
+  btn.appendChild(el("span", "ai-usage-ring-pct", hasLimit ? `${pct}%` : formatTokens(used)));
+  let panel = null;
+  const closePanel = () => {
+    if (!panel) return;
+    const p = panel;
+    panel = null;
+    closePopover(p);
+    p.remove();
+  };
+  btn.addEventListener("click", () => {
+    if (panel) {
+      closePanel();
+      return;
+    }
+    const p = el("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");
+    renderAiUsage(body, usage, opts);
+    p.appendChild(body);
+    openPopover(p, {
+      anchor: btn,
+      side: "bottom",
+      align: "end",
+      onClose: () => {
+        p.remove();
+        if (panel === p) panel = null;
+      }
+    });
+    panel = p;
+  });
+  elm.appendChild(btn);
+}
+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"/>';
+var ICON_FILE2 = svgWrap(FILE_OUTLINE);
+var ICON_FILE_CODE = svgWrap(`${FILE_OUTLINE}<path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/>`);
+var ICON_BRACES = svgWrap(
+  '<path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"/>'
+);
+var ICON_FILE_TEXT2 = svgWrap(`${FILE_OUTLINE}<path d="M16 13H8"/><path d="M16 17H8"/>`);
+var ICON_IMAGE = svgWrap(
+  '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>'
+);
+var ICON_SERVER = svgWrap(
+  '<rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 6h.01"/><path d="M6 18h.01"/>'
+);
+var ICON_SPARKLES = svgWrap(
+  '<path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/>'
+);
+function fileKind(path) {
+  const m = /\.([a-z0-9]+)$/i.exec(path);
+  const ext = m ? m[1].toLowerCase() : "";
+  if (["ts", "tsx", "mts", "cts"].includes(ext)) return "ts";
+  if (["js", "jsx", "mjs", "cjs"].includes(ext)) return "js";
+  if (["css", "scss", "less"].includes(ext)) return "css";
+  if (ext === "json") return "json";
+  if (["md", "markdown"].includes(ext)) return "md";
+  if (["png", "jpg", "jpeg", "gif", "webp", "svg", "ico", "avif"].includes(ext)) return "img";
+  return "other";
+}
+function fileKindIcon(kind) {
+  switch (kind) {
+    case "ts":
+    case "js":
+      return ICON_FILE_CODE;
+    case "css":
+    case "json":
+      return ICON_BRACES;
+    case "md":
+      return ICON_FILE_TEXT2;
+    case "img":
+      return ICON_IMAGE;
+    default:
+      return ICON_FILE2;
+  }
+}
+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 svg2 = svgIcon(fileKindIcon(kind));
+  if (svg2) icon.appendChild(svg2);
+  chip.appendChild(icon);
+  chip.appendChild(document.createTextNode(file.path));
+  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");
+  section.appendChild(body);
+  return { section, body };
+}
+function renderAiContext(elm, model) {
+  if (typeof document === "undefined") return;
+  elm.textContent = "";
+  const m = model ?? {};
+  const aside = el("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");
+  closeBtn.type = "button";
+  closeBtn.setAttribute("data-ai-context-close", "");
+  closeBtn.setAttribute("aria-label", "\u5173\u95ED");
+  head.appendChild(closeBtn);
+  aside.appendChild(head);
+  if (m.usage) {
+    const { section, body } = renderSection("\u7528\u91CF");
+    renderAiUsage(body, m.usage, { total: m.usageTotal, cost: m.usageCost });
+    aside.appendChild(section);
+  }
+  const auditEntries = auditEntriesOf(m.audit);
+  if (auditEntries.length > 0) {
+    const { section, body } = renderSection("\u5BA1\u8BA1");
+    buildAuditBody(body, auditEntries, { limit: 5, compact: true });
+    aside.appendChild(section);
+  }
+  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");
+    for (const f of files) chips.appendChild(renderFileChip(f));
+    body.appendChild(chips);
+    aside.appendChild(section);
+  }
+  const servers = Array.isArray(m.mcpServers) ? m.mcpServers : [];
+  if (servers.length > 0) {
+    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 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));
+      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` : ""));
+      row.appendChild(side);
+      body.appendChild(row);
+    }
+    aside.appendChild(section);
+  }
+  const skills = Array.isArray(m.skills) ? m.skills : [];
+  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 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));
+      row.appendChild(main);
+      body.appendChild(row);
+    }
+    aside.appendChild(section);
+  }
+  elm.appendChild(aside);
+}
+function isInline(drawer) {
+  return drawer.classList.contains("ai-context--inline");
+}
+function initAiContext(root) {
+  if (typeof document === "undefined") return () => void 0;
+  const scope = root ?? document;
+  const marked = scope;
+  if (marked.__icenAiContextInit) return () => void 0;
+  marked.__icenAiContextInit = true;
+  const target = scope;
+  scope.querySelectorAll("[data-ai-context-open]").forEach((t) => {
+    if (!t.hasAttribute("aria-expanded")) t.setAttribute("aria-expanded", "false");
+  });
+  let lastTrigger = null;
+  const drawers = () => Array.from(scope.querySelectorAll(".ai-context")).filter((d) => !isInline(d));
+  function resolveDrawer(trigger) {
+    const sel = trigger.getAttribute("data-ai-context-open");
+    if (sel) {
+      const found = scope.querySelector(sel);
+      if (found && found.classList.contains("ai-context") && !isInline(found)) return found;
+    }
+    return drawers()[0] ?? null;
+  }
+  function syncTriggers(drawer, open) {
+    scope.querySelectorAll("[data-ai-context-open]").forEach((t) => {
+      if (!drawer || resolveDrawer(t) === drawer) {
+        t.setAttribute("aria-expanded", String(open));
+      }
+    });
+  }
+  function openDrawer(drawer, trigger) {
+    drawers().forEach((d) => {
+      if (d !== drawer && !d.hidden) closeDrawer(d, false);
+    });
+    lastTrigger = trigger;
+    if (!drawer.hasAttribute("role")) {
+      drawer.setAttribute("role", "dialog");
+      drawer.setAttribute("aria-modal", "false");
+      if (!drawer.hasAttribute("aria-label")) drawer.setAttribute("aria-label", "\u4E0A\u4E0B\u6587");
+    }
+    drawer.hidden = false;
+    void drawer.offsetWidth;
+    drawer.classList.add("is-open");
+    syncTriggers(drawer, true);
+    const closeBtn = drawer.querySelector("[data-ai-context-close]");
+    (closeBtn ?? drawer).focus?.();
+  }
+  function closeDrawer(drawer, restoreFocus) {
+    if (drawer.hidden && !drawer.classList.contains("is-open")) return;
+    drawer.classList.remove("is-open");
+    syncTriggers(drawer, false);
+    const finish = () => {
+      drawer.hidden = true;
+      if (restoreFocus && lastTrigger && document.contains(lastTrigger)) {
+        lastTrigger.focus();
+      }
+      lastTrigger = null;
+    };
+    let done = false;
+    const onEnd = () => {
+      if (done) return;
+      done = true;
+      drawer.removeEventListener("transitionend", onEnd);
+      finish();
+    };
+    drawer.addEventListener("transitionend", onEnd);
+    setTimeout(onEnd, 300);
+  }
+  function trapFocus(drawer, ke) {
+    const focusables = Array.from(
+      drawer.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((n) => !n.hidden && n.getAttribute("aria-hidden") !== "true");
+    if (focusables.length === 0) {
+      ke.preventDefault();
+      drawer.focus?.();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (ke.shiftKey) {
+      if (active === first || !drawer.contains(active)) {
+        ke.preventDefault();
+        last.focus();
+      }
+    } else if (active === last || !drawer.contains(active)) {
+      ke.preventDefault();
+      first.focus();
+    }
+  }
+  const onClick = (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    if (!t) return;
+    const closeBtn = t.closest("[data-ai-context-close]");
+    if (closeBtn) {
+      const drawer = closeBtn.closest(".ai-context");
+      if (drawer instanceof HTMLElement && !isInline(drawer)) closeDrawer(drawer, true);
+      return;
+    }
+    const trigger = t.closest("[data-ai-context-open]");
+    if (trigger) {
+      const drawer = resolveDrawer(trigger);
+      if (!drawer) return;
+      if (drawer.hidden || !drawer.classList.contains("is-open")) {
+        openDrawer(drawer, trigger);
+      } else {
+        closeDrawer(drawer, true);
+      }
+      return;
+    }
+    if (!t.closest(".ai-context")) {
+      drawers().forEach((d) => {
+        if (d.classList.contains("is-open")) closeDrawer(d, true);
+      });
+    }
+  };
+  const onKeydown = (e) => {
+    const ke = e;
+    if (ke.key === "Escape") {
+      drawers().forEach((d) => {
+        if (d.classList.contains("is-open")) closeDrawer(d, true);
+      });
+      return;
+    }
+    if (ke.key === "Tab") {
+      const open = drawers().find((d) => d.classList.contains("is-open") && !d.hidden);
+      if (open) trapFocus(open, ke);
+      return;
+    }
+    if (ke.key === "Enter" || ke.key === " ") {
+      const t = ke.target instanceof Element ? ke.target : null;
+      const trigger = t?.closest("[data-ai-context-open]");
+      if (!trigger || trigger.tagName === "BUTTON") return;
+      ke.preventDefault();
+      trigger.click();
+    }
+  };
+  target.addEventListener("click", onClick);
+  target.addEventListener("keydown", onKeydown);
+  return () => {
+    target.removeEventListener("click", onClick);
+    target.removeEventListener("keydown", onKeydown);
+    marked.__icenAiContextInit = false;
+  };
+}
+function auditEntriesOf(source) {
+  if (!source) return [];
+  return Array.isArray(source) ? source.slice() : source.list();
+}
+function timeOf(ts) {
+  try {
+    return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return "";
+  }
+}
+function buildAuditBody(body, entries, opts = {}) {
+  const limit = opts.limit ?? 10;
+  let tokens = 0;
+  let cost = 0;
+  let errors = 0;
+  let ttftSum = 0;
+  let ttftN = 0;
+  const groups = /* @__PURE__ */ new Map();
+  for (const e of entries) {
+    const t = e.usage?.total ?? 0;
+    tokens += t;
+    if (typeof e.cost === "number") cost += e.cost;
+    if (e.status === "error") errors++;
+    if (typeof e.ttftMs === "number") {
+      ttftSum += e.ttftMs;
+      ttftN++;
+    }
+    const key = `${e.provider}/${e.model}`;
+    const g = groups.get(key) ?? { key, tokens: 0, cost: 0, requests: 0 };
+    g.tokens += t;
+    if (typeof e.cost === "number") g.cost += e.cost;
+    g.requests++;
+    groups.set(key, g);
+  }
+  const totals = el("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 ")));
+  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");
+    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)}` : ""}`));
+      list2.appendChild(row);
+    }
+    body.appendChild(list2);
+  }
+  const recent = entries.slice(-limit).reverse();
+  const list = el("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 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 ")));
+    item.appendChild(main);
+    if (e.error) item.appendChild(el("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");
+  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;
+  }
+  buildAuditBody(root, entries, { limit: opts.limit });
+  if (opts.clearButton !== false) {
+    const clear = el("button", "btn btn-sm ai-audit-clear", "\u6E05\u9664\u5BA1\u8BA1");
+    clear.type = "button";
+    clear.addEventListener("click", () => {
+      if (opts.onClear) opts.onClear();
+      else dispatch(root, "icen:ai-audit-clear", {});
+    });
+    root.appendChild(clear);
+  }
+  elm.appendChild(root);
+}
+export {
+  initAiContext,
+  initAiTodo,
+  renderAiAudit,
+  renderAiContext,
+  renderAiTodo,
+  renderAiUsage,
+  renderAiUsageRing
+};