@icen.ai/ui 0.5.0 → 0.8.0

package/dist/behaviors/ai-composer.mjs

@@ -0,0 +1,2032 @@
+// 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 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 aiContentUrl(part) {
+  if (part.type === "text" || part.type === "resource-link") return void 0;
+  if (typeof part.url === "string" && part.url) return part.url;
+  if (typeof part.data === "string" && part.data && typeof part.mimeType === "string") {
+    return `data:${part.mimeType};base64,${part.data}`;
+  }
+  return void 0;
+}
+function contextEstimate(usage) {
+  const u = normalizeUsage(usage);
+  return (u.input ?? 0) + (u.cacheRead ?? 0) + (u.cacheWrite ?? 0) + (u.output ?? 0) + (u.reasoning ?? 0);
+}
+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 = (el3) => {
+    for (const attr of Array.from(el3.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el3.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el3.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el3.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(el3) {
+  const r = el3.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 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);
+}
+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"/>'
+);
+
+// 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 createAiStream(el3) {
+  const reasoning = el3.closest(".ai-reasoning");
+  const startedAt = Date.now();
+  let state = "streaming";
+  el3.classList.add("is-streaming");
+  el3.setAttribute("aria-busy", "true");
+  reasoning?.classList.add("is-streaming");
+  const settle = (finished) => {
+    if (state !== "streaming") return;
+    state = finished ? "done" : "cancelled";
+    el3.classList.remove("is-streaming");
+    el3.removeAttribute("aria-busy");
+    if (!reasoning) return;
+    reasoning.classList.remove("is-streaming");
+    if (!finished) return;
+    const head = reasoning.querySelector(".ai-reasoning-head");
+    const body = reasoning.querySelector(".ai-reasoning-body");
+    head?.setAttribute("aria-expanded", "false");
+    if (body) body.hidden = true;
+    const time = reasoning.querySelector(".ai-reasoning-time");
+    if (time) time.textContent = formatDuration(Date.now() - startedAt);
+  };
+  return {
+    append(text) {
+      if (state !== "streaming" || !text) return;
+      el3.textContent += text;
+    },
+    done() {
+      settle(true);
+    },
+    cancel() {
+      settle(false);
+    },
+    fail() {
+      if (state !== "streaming") return;
+      state = "error";
+      el3.classList.remove("is-streaming");
+      el3.removeAttribute("aria-busy");
+      el3.classList.add("is-error");
+      reasoning?.classList.remove("is-streaming");
+    }
+  };
+}
+var ROLE_AVATAR = {
+  user: "\u6211",
+  assistant: "AI",
+  system: "\u7CFB",
+  tool: "\u5DE5"
+};
+function safeHref(uri) {
+  const s = uri.trim().toLowerCase();
+  if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
+  return uri;
+}
+function el2(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function renderAiContentPart(part) {
+  if (part.type === "text") {
+    const span = el2("span", "ai-msg-text");
+    span.textContent = part.text;
+    if (part.state === "streaming") span.classList.add("is-streaming");
+    return span;
+  }
+  if (part.type === "image") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const img = document.createElement("img");
+    img.className = "ai-msg-media ai-msg-media--image";
+    img.alt = part.alt ?? "";
+    img.setAttribute("loading", "lazy");
+    img.setAttribute("src", src);
+    return img;
+  }
+  if (part.type === "audio") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const audio = document.createElement("audio");
+    audio.className = "ai-msg-media ai-msg-media--audio";
+    audio.controls = true;
+    audio.setAttribute("src", src);
+    return audio;
+  }
+  if (part.type === "video") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const video = document.createElement("video");
+    video.className = "ai-msg-media ai-msg-media--video";
+    video.controls = true;
+    video.setAttribute("playsinline", "");
+    video.setAttribute("src", src);
+    return video;
+  }
+  if (part.type === "file") {
+    const chip = el2("span", "ai-msg-file");
+    chip.appendChild(el2("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
+    const href2 = part.url ? safeHref(part.url) : void 0;
+    if (href2 && /^(https?:|data:)/i.test(href2)) {
+      const a2 = document.createElement("a");
+      a2.className = "ai-msg-file-link";
+      a2.href = href2;
+      a2.download = part.filename ?? "";
+      a2.textContent = "\u4E0B\u8F7D";
+      chip.appendChild(a2);
+    }
+    return chip;
+  }
+  const a = document.createElement("a");
+  a.className = "ai-msg-link";
+  const href = safeHref(part.uri);
+  if (href) a.href = href;
+  a.textContent = part.name ?? part.uri;
+  a.title = part.uri;
+  return a;
+}
+function renderAiMessage(scrollEl, model) {
+  const row = el2("div", `ai-msg ai-msg--${model.role}`);
+  const avatar = el2("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
+  const body = el2("div", "ai-msg-body");
+  row.appendChild(avatar);
+  row.appendChild(body);
+  const parts = typeof model.content === "string" ? [{ type: "text", text: model.content }] : model.content;
+  for (const part of parts) {
+    const node = renderAiContentPart(part);
+    if (node) body.appendChild(node);
+  }
+  if (model.model) body.appendChild(el2("span", "ai-msg-model", model.model));
+  const metaEl = el2("div", "ai-msg-meta");
+  if (model.meta != null) metaEl.textContent = model.meta;
+  row.appendChild(metaEl);
+  const actions = el2("div", "ai-msg-actions");
+  const copyBtn = el2("button", "ai-msg-action");
+  copyBtn.type = "button";
+  copyBtn.setAttribute("data-ai-msg-action", "copy");
+  copyBtn.setAttribute("aria-label", "\u590D\u5236");
+  const copyIcon = svgIcon(ICON_COPY);
+  if (copyIcon) copyBtn.appendChild(copyIcon);
+  const retryBtn = el2("button", "ai-msg-action");
+  retryBtn.type = "button";
+  retryBtn.setAttribute("data-ai-msg-action", "retry");
+  retryBtn.setAttribute("aria-label", "\u91CD\u8BD5");
+  const retryIcon = svgIcon(ICON_RETRY);
+  if (retryIcon) retryBtn.appendChild(retryIcon);
+  actions.append(copyBtn, retryBtn);
+  row.appendChild(actions);
+  const handle = {
+    el: row,
+    body,
+    setMeta(meta) {
+      metaEl.textContent = meta;
+    },
+    setError(message) {
+      row.classList.add("ai-msg--error");
+      let errEl = row.querySelector(".ai-msg-error-text");
+      if (!errEl) {
+        errEl = el2("div", "ai-msg-error-text");
+        body.appendChild(errEl);
+      }
+      errEl.textContent = message;
+    },
+    stream() {
+      const span = el2("span", "ai-msg-stream-text");
+      body.appendChild(span);
+      return createAiStream(span);
+    }
+  };
+  if (model.error != null) handle.setError(model.error);
+  if (model.streaming) row.classList.add("is-streaming");
+  scrollEl.appendChild(row);
+  return handle;
+}
+
+// src/behaviors/ai-composer.ts
+var MAX_ROWS_DEFAULT = 8;
+var HISTORY_LIMIT = 50;
+var CACHE_WARN_RATIO = 0.4;
+var SEND_ICON = '<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="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>';
+var STOP_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>';
+var ATTACH_ICON = '<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="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
+var svgWrap2 = (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_CHEVRON = svgWrap2('<path d="m6 9 6 6 6-6"/>');
+var ICON_CHECK = svgWrap2('<path d="M20 6 9 17l-5-5"/>');
+var ICON_INFO = svgWrap2('<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>');
+var ICON_FILE3 = svgWrap2(
+  '<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_FOLDER = svgWrap2(
+  '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>'
+);
+var ICON_DOC = svgWrap2(
+  '<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="M16 13H8"/><path d="M16 17H8"/>'
+);
+var ICON_BOT2 = svgWrap2(
+  '<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 REF_KIND_LABEL = {
+  file: "\u6587\u4EF6",
+  folder: "\u6587\u4EF6\u5939",
+  doc: "\u6587\u6863",
+  agent: "\u4EE3\u7406"
+};
+var REF_KIND_ICON = {
+  file: ICON_FILE3,
+  folder: ICON_FOLDER,
+  doc: ICON_DOC,
+  agent: ICON_BOT2
+};
+var REF_KIND_ORDER = ["file", "folder", "doc", "agent"];
+var RUNNING = /* @__PURE__ */ new WeakMap();
+var QUEUES = /* @__PURE__ */ new WeakMap();
+var MODELS = /* @__PURE__ */ new WeakMap();
+var MODEL_CTX = /* @__PURE__ */ new WeakMap();
+var COMMANDS = /* @__PURE__ */ new WeakMap();
+var REF_SOURCES = /* @__PURE__ */ new WeakMap();
+var ACTIVE_REFS = /* @__PURE__ */ new WeakMap();
+var USAGE = /* @__PURE__ */ new WeakMap();
+var TODO = /* @__PURE__ */ new WeakMap();
+var HISTORIES = /* @__PURE__ */ new WeakMap();
+var POPUP = /* @__PURE__ */ new WeakMap();
+var SUBMITS = /* @__PURE__ */ new WeakMap();
+function isBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function emit(target, name, detail) {
+  target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+}
+function resolveComposer(el3) {
+  return el3.closest("[data-ai-composer]");
+}
+function getTextarea(composer) {
+  return composer.querySelector(".ai-composer-input");
+}
+function autosizeTa(ta) {
+  const composer = ta.closest("[data-ai-composer]");
+  const maxRows = Number(composer?.getAttribute("data-max-rows")) || MAX_ROWS_DEFAULT;
+  const cs = window.getComputedStyle(ta);
+  const lineHeight = parseFloat(cs.lineHeight) || 20;
+  const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+  const minRows = Number(ta.getAttribute("rows")) || 1;
+  ta.style.height = "auto";
+  const minH = minRows * lineHeight + padY;
+  const maxH = maxRows * lineHeight + padY;
+  ta.style.height = `${Math.max(minH, Math.min(ta.scrollHeight, maxH))}px`;
+}
+function ensureIcons(composer) {
+  const sendBtn = composer.querySelector("[data-ai-send]");
+  if (sendBtn && !sendBtn.hasChildNodes()) {
+    const sendWrap = document.createElement("span");
+    sendWrap.className = "ai-composer-send-icon";
+    sendWrap.dataset.aiSendIcon = "send";
+    const stopWrap = document.createElement("span");
+    stopWrap.className = "ai-composer-send-icon";
+    stopWrap.dataset.aiSendIcon = "stop";
+    const sendSvg = svgIcon(SEND_ICON);
+    const stopSvg = svgIcon(STOP_ICON);
+    if (sendSvg) sendWrap.appendChild(sendSvg);
+    if (stopSvg) stopWrap.appendChild(stopSvg);
+    sendBtn.append(sendWrap, stopWrap);
+  }
+  const attachBtn = composer.querySelector("[data-ai-attach]");
+  if (attachBtn && !attachBtn.hasChildNodes()) {
+    const icon = svgIcon(ATTACH_ICON);
+    if (icon) attachBtn.appendChild(icon);
+  }
+  const sendIcon = sendBtn?.querySelector('[data-ai-send-icon="send"]') ?? null;
+  const stopIcon = sendBtn?.querySelector('[data-ai-send-icon="stop"]') ?? null;
+  return { sendBtn, sendIcon, stopIcon };
+}
+function makeChip(text, removable, ariaLabel) {
+  const chip = document.createElement("span");
+  chip.className = "ai-composer-chip";
+  const label = document.createElement("span");
+  label.className = "ai-composer-chip-text";
+  label.textContent = text;
+  chip.appendChild(label);
+  if (removable) {
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "ai-composer-chip-remove";
+    remove.setAttribute("aria-label", ariaLabel);
+    remove.textContent = "\xD7";
+    chip.appendChild(remove);
+  }
+  return chip;
+}
+function renderQueueChips(composer) {
+  const queueEl = composer.querySelector(".ai-composer-queue");
+  if (!queueEl) return;
+  const queue = QUEUES.get(composer) ?? [];
+  queueEl.replaceChildren(...queue.map((text, i) => makeChip(text, true, `\u79FB\u9664\u6392\u961F\u6D88\u606F ${i + 1}`)));
+  queueEl.hidden = queue.length === 0;
+}
+function setComposerRunning(el3, running) {
+  const composer = resolveComposer(el3);
+  if (!composer) return;
+  RUNNING.set(composer, running);
+  composer.classList.toggle("is-running", running);
+  if (running) {
+    composer.setAttribute("aria-busy", "true");
+  } else {
+    composer.removeAttribute("aria-busy");
+  }
+  const sendBtn = composer.querySelector("[data-ai-send]");
+  if (!sendBtn) return;
+  sendBtn.classList.toggle("is-stop", running);
+  sendBtn.setAttribute("aria-label", running ? "\u505C\u6B62\u751F\u6210" : "\u53D1\u9001");
+  const sendIcon = sendBtn.querySelector('[data-ai-send-icon="send"]');
+  const stopIcon = sendBtn.querySelector('[data-ai-send-icon="stop"]');
+  if (sendIcon) sendIcon.hidden = running;
+  if (stopIcon) stopIcon.hidden = !running;
+}
+function providerMark(provider, badgeClass) {
+  const slot = document.createElement("span");
+  slot.className = badgeClass;
+  const svg2 = provider.icon ? svgIcon(provider.icon) : null;
+  if (svg2) {
+    slot.appendChild(svg2);
+  } else {
+    const badge = document.createElement("span");
+    badge.className = "ai-composer-model-badge";
+    badge.textContent = (provider.label.trim()[0] ?? "?").toUpperCase();
+    slot.appendChild(badge);
+  }
+  return slot;
+}
+function buildModelButton(composer) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "ai-composer-model";
+  btn.setAttribute("data-ai-model-open", "");
+  btn.setAttribute("aria-haspopup", "listbox");
+  btn.setAttribute("aria-expanded", "false");
+  btn.addEventListener("click", () => {
+    if (POPUP.get(composer)) closePopup(composer, false);
+    else openModelPopup(composer);
+  });
+  return btn;
+}
+function updateModelButton(composer) {
+  const cfg = MODELS.get(composer);
+  const btn = composer.querySelector("[data-ai-model-open]");
+  if (!cfg || !btn) return;
+  const provider = cfg.providers.find((p) => p.id === cfg.current.provider) ?? cfg.providers[0];
+  if (!provider) return;
+  const model = provider.models.find((m) => m.id === cfg.current.model) ?? provider.models[0];
+  if (!model) return;
+  const iconSlot = btn.querySelector(".ai-composer-model-icon") ?? (() => {
+    const slot = document.createElement("span");
+    slot.className = "ai-composer-model-icon";
+    btn.prepend(slot);
+    return slot;
+  })();
+  iconSlot.replaceChildren(providerMark(provider, "ai-composer-model-provider-icon"));
+  let name = btn.querySelector(".ai-composer-model-name");
+  if (!name) {
+    name = document.createElement("span");
+    name.className = "ai-composer-model-name";
+    btn.insertBefore(name, btn.querySelector(".ai-composer-model-chevron"));
+  }
+  name.textContent = model.label;
+  btn.setAttribute("aria-label", `\u6A21\u578B ${model.label}\uFF08${provider.label}\uFF09`);
+  if (!btn.querySelector(".ai-composer-model-chevron")) {
+    const chev = svgIcon(ICON_CHEVRON);
+    if (chev) {
+      const wrap = document.createElement("span");
+      wrap.className = "ai-composer-model-chevron";
+      wrap.appendChild(chev);
+      btn.appendChild(wrap);
+    }
+  }
+}
+function syncToolbar(composer) {
+  const box = composer.querySelector(".ai-composer-box");
+  if (!box || !getTextarea(composer)) return;
+  const modelsCfg = MODELS.get(composer);
+  const usageCfg = USAGE.get(composer);
+  if (!modelsCfg && !usageCfg) return;
+  let bar = composer.querySelector(".ai-composer-toolbar");
+  let modelBtn = composer.querySelector("[data-ai-model-open]");
+  if (modelsCfg && !modelBtn) {
+    modelBtn = buildModelButton(composer);
+    modelBtn.dataset.aiModelOpen = "auto";
+    updateModelButton(composer);
+  }
+  if (!modelsCfg && modelBtn?.dataset.aiModelOpen === "auto") {
+    modelBtn.remove();
+    modelBtn = null;
+  }
+  let usageMount = composer.querySelector(".ai-composer-usage");
+  if (usageCfg && !usageMount) {
+    usageMount = document.createElement("span");
+    usageMount.className = "ai-composer-usage";
+    usageMount.dataset.aiUsage = "auto";
+  }
+  if (!usageCfg && usageMount?.dataset.aiUsage === "auto") {
+    usageMount.remove();
+    usageMount = null;
+  }
+  const attach = composer.querySelector("[data-ai-attach]");
+  const send = composer.querySelector("[data-ai-send]");
+  if (bar) {
+    if (modelBtn && modelBtn.parentElement !== bar) bar.insertBefore(modelBtn, bar.firstChild);
+    if (usageMount && usageMount.parentElement !== bar) {
+      bar.insertBefore(usageMount, attach && attach.parentElement === bar ? attach : null);
+    }
+  } else {
+    bar = document.createElement("div");
+    bar.className = "ai-composer-toolbar";
+    bar.appendChild(modelBtn ?? document.createComment("model"));
+    const spacer = document.createElement("span");
+    spacer.className = "ai-composer-spacer";
+    bar.appendChild(spacer);
+    if (usageMount) bar.appendChild(usageMount);
+    if (attach) bar.appendChild(attach);
+    if (send) bar.appendChild(send);
+    box.appendChild(bar);
+  }
+  const legacy = composer.querySelector(".ai-composer-actions");
+  if (legacy && legacy.childElementCount === 0 && !(legacy.textContent ?? "").trim()) {
+    legacy.remove();
+  }
+}
+function refreshUsageRing(composer) {
+  const cfg = USAGE.get(composer);
+  const mount = composer.querySelector(".ai-composer-usage");
+  if (!cfg || !mount) return;
+  const explicit = typeof cfg.opts.total === "number" && cfg.opts.total > 0;
+  renderAiUsageRing(mount, cfg.usage, {
+    ...cfg.opts,
+    total: explicit ? cfg.opts.total : MODEL_CTX.get(composer)
+  });
+}
+var visibleOptions = (s) => s.options.filter((o) => !o.hidden);
+function setPopupFocus(s, idx) {
+  const vis = visibleOptions(s);
+  s.options.forEach((o) => o.classList.remove("is-focused"));
+  if (vis.length === 0) {
+    s.focused = -1;
+    return;
+  }
+  s.focused = Math.max(0, Math.min(idx, vis.length - 1));
+  const cur = vis[s.focused];
+  cur.classList.add("is-focused");
+  cur.scrollIntoView({ block: "nearest" });
+}
+function movePopupFocus(s, delta) {
+  const vis = visibleOptions(s);
+  if (vis.length === 0) return;
+  setPopupFocus(s, (s.focused + delta + vis.length) % vis.length);
+}
+function settlePopup(s) {
+  for (const g of s.groups) {
+    g.hidden = !Array.from(g.querySelectorAll(".ai-composer-popup-option")).some((o) => !o.hidden);
+  }
+  s.emptyEl.hidden = visibleOptions(s).length > 0;
+  setPopupFocus(s, 0);
+}
+function popupKeydown(composer, s, e) {
+  if (e.isComposing) return;
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      movePopupFocus(s, 1);
+      return;
+    case "ArrowUp":
+      e.preventDefault();
+      movePopupFocus(s, -1);
+      return;
+    case "Enter":
+    case "Tab": {
+      e.preventDefault();
+      const vis = visibleOptions(s);
+      const opt = vis[s.focused] ?? vis[0];
+      if (opt) {
+        s.pick(opt);
+        return;
+      }
+      closePopup(composer, false);
+      if (e.key === "Enter") SUBMITS.get(composer)?.();
+      return;
+    }
+    case "Escape":
+      e.preventDefault();
+      closePopup(composer);
+      return;
+  }
+}
+function closePopup(composer, restoreFocus = true) {
+  const s = POPUP.get(composer);
+  if (!s) return;
+  POPUP.delete(composer);
+  if (s.searchInput && s.keydownHandler) {
+    s.searchInput.removeEventListener("keydown", s.keydownHandler);
+  }
+  if (s.mode === "model") {
+    composer.querySelector("[data-ai-model-open]")?.setAttribute("aria-expanded", "false");
+  }
+  if (s.mode !== "model") {
+    getTextarea(composer)?.setAttribute("aria-expanded", "false");
+  }
+  closePopover(s.panel);
+  if (restoreFocus && s.returnFocus && s.returnFocus.isConnected) s.returnFocus.focus();
+}
+function mountPopup(composer, init) {
+  closePopup(composer, false);
+  const panel = document.createElement("div");
+  panel.className = "ai-composer-popup";
+  panel.hidden = true;
+  const session = {
+    mode: init.mode,
+    panel,
+    groups: [],
+    options: [],
+    emptyEl: document.createElement("div"),
+    focused: -1,
+    searchInput: null,
+    refRange: init.refRange ?? null,
+    returnFocus: init.returnFocus,
+    keydownHandler: null,
+    pick: init.pick
+  };
+  init.build(session);
+  openPopover(panel, {
+    anchor: init.anchor,
+    side: "top",
+    align: "start",
+    offset: 8,
+    minWidth: init.minWidth,
+    maxWidth: init.maxWidth,
+    maxHeight: init.maxHeight,
+    onClose: () => {
+      if (POPUP.get(composer) === session) POPUP.delete(composer);
+      panel.remove();
+    }
+  });
+  POPUP.set(composer, session);
+  panel.addEventListener("click", (e) => {
+    const t = e.target;
+    if (!(t instanceof Element)) return;
+    const opt = t.closest(".ai-composer-popup-option");
+    if (opt && panel.contains(opt) && !opt.hidden) session.pick(opt);
+  });
+  panel.addEventListener("mouseover", (e) => {
+    const t = e.target;
+    if (!(t instanceof Element)) return;
+    const opt = t.closest(".ai-composer-popup-option");
+    if (!opt || opt.hidden) return;
+    const idx = visibleOptions(session).indexOf(opt);
+    if (idx >= 0) setPopupFocus(session, idx);
+  });
+  return session;
+}
+function openModelPopup(composer) {
+  const cfg = MODELS.get(composer);
+  if (!cfg) return;
+  const btn = composer.querySelector("[data-ai-model-open]");
+  const anchor = btn ?? composer.querySelector(".ai-composer-box") ?? composer;
+  const ta = getTextarea(composer);
+  const session = mountPopup(composer, {
+    mode: "model",
+    anchor,
+    minWidth: 220,
+    maxWidth: 320,
+    maxHeight: 340,
+    returnFocus: btn ?? ta,
+    pick: (opt) => {
+      const provider = opt.dataset.provider ?? "";
+      const model = opt.dataset.model ?? "";
+      const label = opt.dataset.label ?? model;
+      const context = typeof opt.dataset.context === "string" ? Number(opt.dataset.context) : void 0;
+      MODELS.set(composer, { providers: cfg.providers, current: { provider, model } });
+      if (typeof context === "number" && Number.isFinite(context) && context > 0) {
+        MODEL_CTX.set(composer, context);
+      } else {
+        MODEL_CTX.delete(composer);
+      }
+      updateModelButton(composer);
+      emit(composer, "icen:ai-model-change", { provider, model, label, context });
+      refreshUsageRing(composer);
+      closePopup(composer);
+    },
+    build: (s) => {
+      const search = document.createElement("div");
+      search.className = "ai-composer-popup-search";
+      const input = document.createElement("input");
+      input.type = "search";
+      input.className = "ai-composer-popup-search-input";
+      input.placeholder = "\u641C\u7D22\u6A21\u578B";
+      input.setAttribute("aria-label", "\u641C\u7D22\u6A21\u578B");
+      search.appendChild(input);
+      s.panel.appendChild(search);
+      s.searchInput = input;
+      const list = document.createElement("div");
+      list.className = "ai-composer-popup-list";
+      list.setAttribute("role", "listbox");
+      list.setAttribute("aria-label", "\u9009\u62E9\u6A21\u578B");
+      for (const p of cfg.providers) {
+        const group = document.createElement("div");
+        group.className = "ai-composer-popup-group";
+        const glabel = document.createElement("div");
+        glabel.className = "ai-composer-popup-group-label";
+        glabel.appendChild(providerMark(p, "ai-composer-popup-group-icon"));
+        const gtext = document.createElement("span");
+        gtext.textContent = p.label;
+        glabel.appendChild(gtext);
+        group.appendChild(glabel);
+        for (const m of p.models) {
+          const opt = document.createElement("button");
+          opt.type = "button";
+          opt.className = "ai-composer-popup-option";
+          opt.setAttribute("role", "option");
+          opt.dataset.provider = p.id;
+          opt.dataset.providerLabel = p.label;
+          opt.dataset.model = m.id;
+          opt.dataset.label = m.label;
+          if (typeof m.context === "number") opt.dataset.context = String(m.context);
+          const selected = cfg.current.provider === p.id && cfg.current.model === m.id;
+          opt.setAttribute("aria-selected", String(selected));
+          const icon = document.createElement("span");
+          icon.className = "ai-composer-popup-option-icon";
+          icon.appendChild(providerMark(p, "ai-composer-popup-option-provider-icon"));
+          const label = document.createElement("span");
+          label.className = "ai-composer-popup-option-label";
+          label.textContent = m.label;
+          const meta = document.createElement("span");
+          meta.className = "ai-composer-popup-option-meta";
+          meta.textContent = typeof m.context === "number" ? formatTokens(m.context) : "";
+          const check = document.createElement("span");
+          check.className = "ai-composer-popup-option-check";
+          const checkSvg = svgIcon(ICON_CHECK);
+          if (checkSvg) check.appendChild(checkSvg);
+          opt.append(icon, label, meta, check);
+          group.appendChild(opt);
+          s.options.push(opt);
+        }
+        list.appendChild(group);
+        s.groups.push(group);
+      }
+      s.panel.appendChild(list);
+      s.emptyEl.className = "ai-composer-popup-empty";
+      s.emptyEl.textContent = "\u65E0\u5339\u914D\u6A21\u578B";
+      s.emptyEl.hidden = true;
+      s.panel.appendChild(s.emptyEl);
+      const foot = document.createElement("div");
+      foot.className = "ai-composer-popup-foot";
+      const usageCfg = USAGE.get(composer);
+      if (usageCfg) {
+        const u = usageCfg.usage;
+        const used = (u.input ?? 0) + (u.output ?? 0) + (u.cacheRead ?? 0) + (u.cacheWrite ?? 0) + (u.reasoning ?? 0);
+        if (used > 0 && (u.cacheRead ?? 0) / used >= CACHE_WARN_RATIO) {
+          foot.classList.add("is-warn");
+        }
+      }
+      const info = svgIcon(ICON_INFO);
+      if (info) foot.appendChild(info);
+      const footText = document.createElement("span");
+      footText.textContent = "\u5207\u6362\u6A21\u578B\u4F1A\u4F7F prompt \u7F13\u5B58\u5931\u6548";
+      foot.appendChild(footText);
+      s.panel.appendChild(foot);
+      s.keydownHandler = (e) => popupKeydown(composer, s, e);
+      input.addEventListener("keydown", s.keydownHandler);
+      input.addEventListener("input", () => {
+        const q = input.value.trim().toLowerCase();
+        for (const opt of s.options) {
+          const hay = `${opt.dataset.label ?? ""} ${opt.dataset.providerLabel ?? ""}`.toLowerCase();
+          opt.hidden = q !== "" && !hay.includes(q);
+        }
+        settlePopup(s);
+      });
+    }
+  });
+  btn?.setAttribute("aria-expanded", "true");
+  session.searchInput?.focus();
+}
+function openCommandPopup(composer, token) {
+  const commands = COMMANDS.get(composer);
+  if (!commands || commands.length === 0) return;
+  const box = composer.querySelector(".ai-composer-box") ?? composer;
+  const ta = getTextarea(composer);
+  const boxRect = box.getBoundingClientRect();
+  const session = mountPopup(composer, {
+    mode: "command",
+    anchor: box,
+    minWidth: Math.min(Math.max(boxRect.width, 200), 320),
+    maxWidth: 360,
+    maxHeight: 320,
+    returnFocus: ta,
+    pick: (opt) => {
+      const name = opt.dataset.name ?? "";
+      const m = /^\/\S*\s+([\s\S]*)$/.exec(ta?.value ?? "");
+      const args = m ? m[1] : "";
+      if (ta) {
+        ta.value = "";
+        autosizeTa(ta);
+      }
+      emit(composer, "icen:ai-command", { name, args });
+      closePopup(composer);
+    },
+    build: (s) => {
+      const list = document.createElement("div");
+      list.className = "ai-composer-popup-list";
+      list.setAttribute("role", "listbox");
+      list.setAttribute("aria-label", "\u547D\u4EE4");
+      const group = document.createElement("div");
+      group.className = "ai-composer-popup-group";
+      for (const c of commands) {
+        const opt = document.createElement("button");
+        opt.type = "button";
+        opt.className = "ai-composer-popup-option ai-composer-popup-cmd";
+        opt.setAttribute("role", "option");
+        opt.dataset.name = c.name;
+        opt.dataset.hay = `${c.name} ${c.description ?? ""}`.toLowerCase();
+        const line = document.createElement("span");
+        line.className = "ai-composer-popup-cmd-line";
+        const nameEl = document.createElement("span");
+        nameEl.className = "ai-composer-popup-cmd-name";
+        nameEl.textContent = `/${c.name}`;
+        line.appendChild(nameEl);
+        if (c.argsHint) {
+          const argsEl = document.createElement("span");
+          argsEl.className = "ai-composer-popup-cmd-args";
+          argsEl.textContent = c.argsHint;
+          line.appendChild(argsEl);
+        }
+        opt.appendChild(line);
+        if (c.description) {
+          opt.appendChild(Object.assign(document.createElement("span"), {
+            className: "ai-composer-popup-cmd-desc",
+            textContent: c.description
+          }));
+        }
+        group.appendChild(opt);
+        s.options.push(opt);
+      }
+      list.appendChild(group);
+      s.groups.push(group);
+      s.panel.appendChild(list);
+      s.emptyEl.className = "ai-composer-popup-empty";
+      s.emptyEl.textContent = "\u65E0\u5339\u914D\u547D\u4EE4";
+      s.emptyEl.hidden = true;
+      s.panel.appendChild(s.emptyEl);
+    }
+  });
+  ta?.setAttribute("aria-expanded", "true");
+  filterCommandOptions(session, token);
+}
+function commandToken(value) {
+  return value.slice(1).split(/\s/, 1)[0] ?? "";
+}
+function filterCommandOptions(s, token) {
+  const q = token.trim().toLowerCase();
+  for (const opt of s.options) {
+    opt.hidden = q !== "" && !(opt.dataset.hay ?? "").includes(q);
+  }
+  settlePopup(s);
+}
+function updateCommandPopup(composer, s) {
+  const ta = getTextarea(composer);
+  const value = ta?.value ?? "";
+  if (!value.startsWith("/")) {
+    closePopup(composer, false);
+    maybeOpenTriggerPopups(composer);
+    return;
+  }
+  filterCommandOptions(s, commandToken(value));
+}
+function openRefPopup(composer, range, filter) {
+  const sources = REF_SOURCES.get(composer);
+  if (!sources || sources.length === 0) return;
+  const box = composer.querySelector(".ai-composer-box") ?? composer;
+  const ta = getTextarea(composer);
+  const boxRect = box.getBoundingClientRect();
+  const session = mountPopup(composer, {
+    mode: "ref",
+    anchor: box,
+    minWidth: Math.min(Math.max(boxRect.width, 200), 320),
+    maxWidth: 360,
+    maxHeight: 320,
+    returnFocus: ta,
+    refRange: range,
+    pick: (opt) => {
+      const source = (REF_SOURCES.get(composer) ?? []).find((r2) => r2.id === opt.dataset.refId);
+      const cur = POPUP.get(composer);
+      const r = cur?.refRange ?? (ta ? findRefToken(ta) : null);
+      if (source && ta && r) {
+        const before = ta.value.slice(0, r.start + 1);
+        const after = ta.value.slice(r.end);
+        ta.value = before + source.label + " " + after;
+        const caret = before.length + source.label.length + 1;
+        ta.setSelectionRange(caret, caret);
+        autosizeTa(ta);
+        addActiveRef(composer, source);
+      }
+      closePopup(composer);
+    },
+    build: (s) => {
+      const list = document.createElement("div");
+      list.className = "ai-composer-popup-list";
+      list.setAttribute("role", "listbox");
+      list.setAttribute("aria-label", "\u5F15\u7528");
+      for (const kind of REF_KIND_ORDER) {
+        const items = sources.filter((r) => r.kind === kind);
+        if (items.length === 0) continue;
+        const group = document.createElement("div");
+        group.className = "ai-composer-popup-group";
+        group.dataset.kind = kind;
+        group.appendChild(Object.assign(document.createElement("div"), {
+          className: "ai-composer-popup-group-label",
+          textContent: REF_KIND_LABEL[kind]
+        }));
+        for (const r of items) {
+          const opt = document.createElement("button");
+          opt.type = "button";
+          opt.className = "ai-composer-popup-option";
+          opt.setAttribute("role", "option");
+          opt.dataset.refId = r.id;
+          opt.dataset.hay = `${r.label} ${r.sub ?? ""}`.toLowerCase();
+          const icon = document.createElement("span");
+          icon.className = "ai-composer-popup-option-icon";
+          const svg2 = svgIcon(REF_KIND_ICON[kind]);
+          if (svg2) icon.appendChild(svg2);
+          const label = document.createElement("span");
+          label.className = "ai-composer-popup-option-label";
+          label.textContent = r.label;
+          if (r.sub) {
+            const sub = document.createElement("span");
+            sub.className = "ai-composer-popup-option-sub";
+            sub.textContent = r.sub;
+            label.appendChild(sub);
+          }
+          opt.append(icon, label);
+          group.appendChild(opt);
+          s.options.push(opt);
+        }
+        list.appendChild(group);
+        s.groups.push(group);
+      }
+      s.panel.appendChild(list);
+      s.emptyEl.className = "ai-composer-popup-empty";
+      s.emptyEl.textContent = "\u65E0\u5339\u914D\u5F15\u7528";
+      s.emptyEl.hidden = true;
+      s.panel.appendChild(s.emptyEl);
+    }
+  });
+  ta?.setAttribute("aria-expanded", "true");
+  filterRefOptions(session, filter);
+}
+function filterRefOptions(s, filter) {
+  const q = filter.trim().toLowerCase();
+  for (const opt of s.options) {
+    opt.hidden = q !== "" && !(opt.dataset.hay ?? "").includes(q);
+  }
+  settlePopup(s);
+}
+function updateRefPopup(composer, s) {
+  const ta = getTextarea(composer);
+  const t = ta ? findRefToken(ta) : null;
+  if (!t) {
+    closePopup(composer, false);
+    maybeOpenTriggerPopups(composer);
+    return;
+  }
+  s.refRange = { start: t.start, end: t.end };
+  filterRefOptions(s, t.filter);
+}
+function findRefToken(ta) {
+  const value = ta.value;
+  const end = ta.selectionStart ?? value.length;
+  const at = value.lastIndexOf("@", end - 1);
+  if (at === -1) return null;
+  if (at > 0 && !/\s/.test(value[at - 1] ?? "")) return null;
+  const filter = value.slice(at + 1, end);
+  if (/\s/.test(filter)) return null;
+  return { start: at, end, filter };
+}
+function maybeOpenTriggerPopups(composer) {
+  const ta = getTextarea(composer);
+  if (!ta) return;
+  const commands = COMMANDS.get(composer);
+  if (commands && commands.length > 0 && ta.value.startsWith("/")) {
+    openCommandPopup(composer, commandToken(ta.value));
+    return;
+  }
+  const sources = REF_SOURCES.get(composer);
+  if (sources && sources.length > 0) {
+    const t = findRefToken(ta);
+    if (t) openRefPopup(composer, { start: t.start, end: t.end }, t.filter);
+  }
+}
+function ensureRefsRow(composer) {
+  const existing = composer.querySelector(".ai-composer-refs");
+  if (existing) return existing;
+  const row = document.createElement("div");
+  row.className = "ai-composer-refs";
+  row.dataset.aiRefs = "auto";
+  row.hidden = true;
+  const attach = composer.querySelector(".ai-composer-attach");
+  const box = composer.querySelector(".ai-composer-box");
+  composer.insertBefore(row, attach ?? box ?? null);
+  return row;
+}
+function renderRefs(composer) {
+  const row = composer.querySelector(".ai-composer-refs");
+  const actives = ACTIVE_REFS.get(composer) ?? [];
+  if (!row) return;
+  row.replaceChildren(
+    ...actives.map((src) => {
+      const chip = makeChip(src.label, true, `\u79FB\u9664\u5F15\u7528 ${src.label}`);
+      chip.dataset.refId = src.id;
+      return chip;
+    })
+  );
+  row.hidden = actives.length === 0;
+}
+function addActiveRef(composer, source) {
+  const actives = ACTIVE_REFS.get(composer) ?? [];
+  if (actives.some((r) => r.id === source.id)) return;
+  actives.push(source);
+  ACTIVE_REFS.set(composer, actives);
+  renderRefs(composer);
+  emit(composer, "icen:ai-ref", { action: "add", ref: source });
+}
+function removeActiveRef(composer, source) {
+  const actives = ACTIVE_REFS.get(composer) ?? [];
+  const idx = actives.findIndex((r) => r.id === source.id);
+  if (idx === -1) return;
+  actives.splice(idx, 1);
+  ACTIVE_REFS.set(composer, actives);
+  renderRefs(composer);
+  const ta = getTextarea(composer);
+  if (ta) {
+    const needle = `@${source.label}`;
+    const at = ta.value.indexOf(needle);
+    if (at !== -1) {
+      let endIdx = at + needle.length;
+      if (ta.value[endIdx] === " ") endIdx += 1;
+      ta.value = ta.value.slice(0, at) + ta.value.slice(endIdx);
+      autosizeTa(ta);
+    }
+  }
+  emit(composer, "icen:ai-ref", { action: "remove", ref: source });
+}
+function pushHistory(composer, text) {
+  const h = HISTORIES.get(composer) ?? { items: [], index: -1 };
+  if (h.items[h.items.length - 1] !== text) {
+    h.items.push(text);
+    if (h.items.length > HISTORY_LIMIT) h.items.shift();
+  }
+  h.index = -1;
+  HISTORIES.set(composer, h);
+}
+function setupComposer(composer) {
+  const el3 = composer;
+  if (el3.__icenAiComposerInit) return void 0;
+  el3.__icenAiComposerInit = true;
+  const ta = getTextarea(composer);
+  if (!ta) {
+    el3.__icenAiComposerInit = false;
+    return void 0;
+  }
+  const queueEl = composer.querySelector(".ai-composer-queue");
+  const attachEl = composer.querySelector(".ai-composer-attach");
+  const { sendBtn, sendIcon, stopIcon } = ensureIcons(composer);
+  if (!ta.hasAttribute("placeholder")) {
+    ta.setAttribute("placeholder", "\u8F93\u5165\u6D88\u606F\uFF0C/ \u547D\u4EE4 \xB7 @ \u5F15\u7528 \xB7 Enter \u53D1\u9001");
+  }
+  const renderQueue = () => renderQueueChips(composer);
+  const enqueue = (text) => {
+    const queue = QUEUES.get(composer) ?? [];
+    queue.push(text);
+    QUEUES.set(composer, queue);
+    renderQueue();
+  };
+  const isRunning = () => RUNNING.get(composer) ?? false;
+  const submit = () => {
+    const text = ta.value;
+    if (!text.trim()) return;
+    ta.value = "";
+    autosizeTa(ta);
+    if (isRunning()) {
+      enqueue(text);
+      emit(composer, "icen:ai-queue", { text });
+    } else {
+      pushHistory(composer, text);
+      emit(composer, "icen:ai-send", { text });
+    }
+  };
+  SUBMITS.set(composer, submit);
+  const takeBackLastQueued = () => {
+    const queue = QUEUES.get(composer) ?? [];
+    if (queue.length === 0) return;
+    const index = queue.length - 1;
+    const text = queue.pop();
+    QUEUES.set(composer, queue);
+    renderQueue();
+    ta.value = text;
+    autosizeTa(ta);
+    emit(composer, "icen:ai-dequeue", { index });
+  };
+  const browseHistory = (delta) => {
+    const h = HISTORIES.get(composer);
+    if (!h || h.items.length === 0) return;
+    if (delta === -1) {
+      h.index = h.index === -1 ? h.items.length - 1 : Math.max(0, h.index - 1);
+    } else {
+      h.index += 1;
+      if (h.index >= h.items.length) {
+        h.index = -1;
+        ta.value = "";
+        autosizeTa(ta);
+        return;
+      }
+    }
+    ta.value = h.items[h.index];
+    autosizeTa(ta);
+  };
+  const onKeydown = (e) => {
+    if (composing || e.isComposing) return;
+    const session = POPUP.get(composer);
+    if (session) {
+      popupKeydown(composer, session, e);
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      const h = HISTORIES.get(composer);
+      const browsing = (h?.index ?? -1) >= 0;
+      if (ta.value === "") {
+        if (isRunning() && (QUEUES.get(composer) ?? []).length > 0) {
+          e.preventDefault();
+          takeBackLastQueued();
+          return;
+        }
+        if (h && h.items.length > 0) {
+          e.preventDefault();
+          browseHistory(-1);
+        }
+      } else if (browsing) {
+        e.preventDefault();
+        browseHistory(-1);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      const h = HISTORIES.get(composer);
+      if (h && h.index >= 0) {
+        e.preventDefault();
+        browseHistory(1);
+      }
+    }
+  };
+  const onInput = () => {
+    autosizeTa(ta);
+    const h = HISTORIES.get(composer);
+    if (h && h.index >= 0 && ta.value !== h.items[h.index]) h.index = -1;
+    const session = POPUP.get(composer);
+    if (session) {
+      if (session.mode === "command") updateCommandPopup(composer, session);
+      else if (session.mode === "ref") updateRefPopup(composer, session);
+    } else {
+      maybeOpenTriggerPopups(composer);
+    }
+  };
+  let composing = false;
+  const onCompositionStart = () => {
+    composing = true;
+  };
+  const onCompositionEnd = () => {
+    composing = false;
+  };
+  const onSendClick = () => {
+    if (isRunning()) {
+      emit(composer, "icen:ai-stop", {});
+    } else {
+      submit();
+    }
+  };
+  const onQueueClick = (e) => {
+    const btn = e.target instanceof Element ? e.target.closest(".ai-composer-chip-remove") : null;
+    if (!btn) return;
+    const index = Array.from(queueEl?.querySelectorAll(".ai-composer-chip-remove") ?? []).indexOf(btn);
+    const queue = QUEUES.get(composer) ?? [];
+    if (index >= 0 && index < queue.length) {
+      queue.splice(index, 1);
+      QUEUES.set(composer, queue);
+      renderQueue();
+      emit(composer, "icen:ai-dequeue", { index });
+    }
+  };
+  const onRefsClick = (e) => {
+    const btn = e.target instanceof Element ? e.target.closest(".ai-composer-chip-remove") : null;
+    if (!btn || !btn.closest(".ai-composer-refs")) return;
+    const id = btn.closest(".ai-composer-chip")?.dataset.refId;
+    const source = (ACTIVE_REFS.get(composer) ?? []).find((r) => r.id === id);
+    if (source) removeActiveRef(composer, source);
+  };
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.hidden = true;
+  fileInput.multiple = true;
+  composer.appendChild(fileInput);
+  const onAttachClick = () => {
+    fileInput.click();
+  };
+  const addFiles = (files) => {
+    if (files.length === 0) return;
+    if (attachEl) {
+      for (const f of files) {
+        const chip = makeChip(f.name, true, `\u79FB\u9664\u9644\u4EF6 ${f.name}`);
+        const remove = chip.querySelector(".ai-composer-chip-remove");
+        remove?.addEventListener("click", () => chip.remove(), { once: true });
+        attachEl.appendChild(chip);
+      }
+      attachEl.hidden = false;
+    }
+    emit(composer, "icen:ai-attach", { files });
+  };
+  const onFileChange = () => {
+    const files = Array.from(fileInput.files ?? []);
+    fileInput.value = "";
+    addFiles(files);
+  };
+  const onPaste = (e) => {
+    const files = Array.from(e.clipboardData?.files ?? []);
+    if (files.length === 0) return;
+    e.preventDefault();
+    addFiles(files);
+  };
+  const boxEl = composer.querySelector(".ai-composer-box");
+  const onDragOver = (e) => {
+    if (!e.dataTransfer?.types.includes("Files")) return;
+    e.preventDefault();
+    boxEl?.classList.add("is-dragover");
+  };
+  const onDragLeave = () => {
+    boxEl?.classList.remove("is-dragover");
+  };
+  const onDrop = (e) => {
+    boxEl?.classList.remove("is-dragover");
+    const files = Array.from(e.dataTransfer?.files ?? []);
+    if (files.length === 0) return;
+    e.preventDefault();
+    addFiles(files);
+  };
+  ta.addEventListener("keydown", onKeydown);
+  ta.addEventListener("input", onInput);
+  ta.addEventListener("compositionstart", onCompositionStart);
+  ta.addEventListener("compositionend", onCompositionEnd);
+  ta.addEventListener("paste", onPaste);
+  boxEl?.addEventListener("dragover", onDragOver);
+  boxEl?.addEventListener("dragleave", onDragLeave);
+  boxEl?.addEventListener("drop", onDrop);
+  sendBtn?.addEventListener("click", onSendClick);
+  queueEl?.addEventListener("click", onQueueClick);
+  composer.addEventListener("click", onRefsClick);
+  composer.querySelector("[data-ai-attach]")?.addEventListener("click", onAttachClick);
+  fileInput.addEventListener("change", onFileChange);
+  const initialRunning = RUNNING.get(composer) ?? composer.classList.contains("is-running");
+  if (initialRunning) setComposerRunning(composer, true);
+  else {
+    if (sendIcon) sendIcon.hidden = false;
+    if (stopIcon) stopIcon.hidden = true;
+  }
+  autosizeTa(ta);
+  renderQueue();
+  renderRefs(composer);
+  return () => {
+    closePopup(composer, false);
+    ta.removeEventListener("keydown", onKeydown);
+    ta.removeEventListener("input", onInput);
+    ta.removeEventListener("compositionstart", onCompositionStart);
+    ta.removeEventListener("compositionend", onCompositionEnd);
+    ta.removeEventListener("paste", onPaste);
+    boxEl?.removeEventListener("dragover", onDragOver);
+    boxEl?.removeEventListener("dragleave", onDragLeave);
+    boxEl?.removeEventListener("drop", onDrop);
+    sendBtn?.removeEventListener("click", onSendClick);
+    queueEl?.removeEventListener("click", onQueueClick);
+    composer.removeEventListener("click", onRefsClick);
+    composer.querySelector("[data-ai-attach]")?.removeEventListener("click", onAttachClick);
+    fileInput.removeEventListener("change", onFileChange);
+    fileInput.remove();
+    el3.__icenAiComposerInit = false;
+  };
+}
+function initAiComposer(root) {
+  const cleanups = [];
+  if (isBrowser()) {
+    const scope = root ?? document;
+    const candidates = [];
+    if (scope instanceof Element && scope.matches("[data-ai-composer]")) {
+      candidates.push(scope);
+    }
+    candidates.push(...Array.from(scope.querySelectorAll("[data-ai-composer]")));
+    for (const composer of candidates) {
+      const cleanup = setupComposer(composer);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
+}
+function setComposerModels(el3, providers, current) {
+  if (!isBrowser()) return;
+  const composer = resolveComposer(el3);
+  if (!composer) return;
+  const list = (Array.isArray(providers) ? providers : []).filter(
+    (p) => p && Array.isArray(p.models) && p.models.length > 0
+  );
+  if (list.length === 0) {
+    MODELS.delete(composer);
+    MODEL_CTX.delete(composer);
+    const btn = composer.querySelector("[data-ai-model-open]");
+    if (btn?.dataset.aiModelOpen === "auto") btn.remove();
+    syncToolbar(composer);
+    refreshUsageRing(composer);
+    return;
+  }
+  const cur = current ?? { provider: list[0].id, model: list[0].models[0].id };
+  MODELS.set(composer, { providers: list, current: cur });
+  const provider = list.find((p) => p.id === cur.provider) ?? list[0];
+  const model = provider.models.find((m) => m.id === cur.model) ?? provider.models[0];
+  if (typeof model.context === "number" && model.context > 0) {
+    MODEL_CTX.set(composer, model.context);
+  } else {
+    MODEL_CTX.delete(composer);
+  }
+  syncToolbar(composer);
+  updateModelButton(composer);
+  refreshUsageRing(composer);
+}
+function setComposerCommands(el3, commands) {
+  if (!isBrowser()) return;
+  const composer = resolveComposer(el3);
+  if (!composer) return;
+  const list = (Array.isArray(commands) ? commands : []).filter((c) => c && typeof c.name === "string" && c.name);
+  if (list.length === 0) {
+    COMMANDS.delete(composer);
+    const session = POPUP.get(composer);
+    if (session?.mode === "command") closePopup(composer);
+    return;
+  }
+  COMMANDS.set(composer, list);
+}
+function setComposerRefs(el3, sources) {
+  if (!isBrowser()) return;
+  const composer = resolveComposer(el3);
+  if (!composer) return;
+  const list = (Array.isArray(sources) ? sources : []).filter((s) => s && typeof s.label === "string" && s.label);
+  REF_SOURCES.set(composer, list);
+  if (list.length === 0) {
+    const session = POPUP.get(composer);
+    if (session?.mode === "ref") closePopup(composer);
+  }
+  ensureRefsRow(composer);
+  renderRefs(composer);
+}
+function setComposerUsage(el3, usage, opts = {}) {
+  if (!isBrowser()) return;
+  const composer = resolveComposer(el3);
+  if (!composer) return;
+  if (!usage) {
+    USAGE.delete(composer);
+    const mount = composer.querySelector(".ai-composer-usage");
+    if (mount?.dataset.aiUsage === "auto") mount.remove();
+    syncToolbar(composer);
+    return;
+  }
+  USAGE.set(composer, { usage, opts });
+  syncToolbar(composer);
+  refreshUsageRing(composer);
+}
+function setComposerTodo(el3, items) {
+  if (!isBrowser()) return;
+  const composer = resolveComposer(el3);
+  if (!composer) return;
+  let chip = composer.querySelector(".ai-composer-todo");
+  if (!items || items.length === 0) {
+    TODO.delete(composer);
+    chip?.remove();
+    return;
+  }
+  TODO.set(composer, items);
+  if (!chip) {
+    chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "ai-composer-todo";
+    chip.setAttribute("aria-haspopup", "true");
+    chip.addEventListener("click", () => {
+      const cur = TODO.get(composer);
+      if (!cur) return;
+      const p = document.createElement("div");
+      p.className = "popover ai-composer-todo-pop";
+      p.hidden = true;
+      const title = document.createElement("div");
+      title.className = "ai-usage-popover-title";
+      title.textContent = "\u5F53\u524D\u5F85\u529E";
+      const body = document.createElement("div");
+      body.className = "ai-usage-popover-body";
+      renderAiTodo(body, cur);
+      p.append(title, body);
+      openPopover(p, {
+        anchor: chip,
+        side: "top",
+        align: "end",
+        onClose: () => p.remove()
+      });
+    });
+    const icon = svgIcon(
+      '<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 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"/></svg>'
+    );
+    if (icon) chip.appendChild(icon);
+    chip.appendChild(document.createElement("span")).className = "ai-composer-todo-label";
+    const toolbar = composer.querySelector(".ai-composer-toolbar");
+    const usage = composer.querySelector(".ai-composer-usage");
+    if (toolbar) toolbar.insertBefore(chip, usage ?? null);
+    else {
+      const box = composer.querySelector(".ai-composer-box");
+      box?.before(chip);
+    }
+  }
+  const done = items.filter((t) => t.status === "done").length;
+  const failed = items.some((t) => t.status === "error" || t.status === "cancelled");
+  chip.classList.toggle("is-done", done === items.length && !failed);
+  chip.classList.toggle("is-error", failed);
+  chip.setAttribute("aria-label", `\u5F53\u524D\u5F85\u529E ${done}/${items.length}${failed ? "\uFF08\u6709\u5931\u8D25\u9879\uFF09" : ""}`);
+  const label = chip.querySelector(".ai-composer-todo-label");
+  if (label) label.textContent = `${done}/${items.length}`;
+}
+var BOUND = /* @__PURE__ */ new WeakSet();
+var USAGE_KEYS = ["input", "output", "cacheRead", "cacheWrite", "reasoning", "total"];
+function accumulateUsage(acc, add) {
+  if (!add) return;
+  for (const k of USAGE_KEYS) {
+    const v = add[k];
+    if (typeof v === "number" && Number.isFinite(v)) acc[k] = (acc[k] ?? 0) + v;
+  }
+}
+function bindComposer(el3, opts = {}) {
+  const noop = () => void 0;
+  if (!isBrowser()) return { unbind: noop };
+  const composer = resolveComposer(el3);
+  if (!composer) return { unbind: noop };
+  if (BOUND.has(composer)) return { unbind: noop };
+  BOUND.add(composer);
+  const disposers = [];
+  const usageCfg = opts.usage;
+  const manageRunning = opts.running ?? true;
+  if (usageCfg) {
+    let cost = 0;
+    let billing = {};
+    const onDone = (e) => {
+      const detail = e.detail;
+      if (!detail?.usage) return;
+      if (typeof detail.cost === "number") cost += detail.cost;
+      let usage;
+      if (usageCfg.from === "context") {
+        const u = detail.usage;
+        usage = {
+          input: u.input,
+          cacheRead: u.cacheRead,
+          cacheWrite: u.cacheWrite,
+          output: u.output,
+          reasoning: u.reasoning,
+          total: contextEstimate(u)
+        };
+      } else if (usageCfg.from === "billing") {
+        accumulateUsage(billing, detail.usage);
+        usage = billing;
+      } else {
+        usage = usageCfg.from.summary();
+      }
+      setComposerUsage(composer, usage, {
+        total: usageCfg.total,
+        cost: cost > 0 ? Math.round(cost * 1e6) / 1e6 : void 0
+      });
+    };
+    document.addEventListener("icen:ai-done", onDone);
+    disposers.push(() => document.removeEventListener("icen:ai-done", onDone));
+  }
+  if (opts.client && opts.messages) {
+    const client = opts.client;
+    const messages = opts.messages;
+    const history = [];
+    let session = null;
+    const metaOf = (r) => {
+      const tok = r.usage.total ?? 0;
+      const parts = [tok > 0 ? `${formatTokens(tok)} tok` : "\u5B8C\u6210"];
+      if (typeof r.cost === "number") parts.push(`$${r.cost.toFixed(4)}`);
+      return `\u521A\u521A \xB7 ${parts.join(" \xB7 ")}`;
+    };
+    const startTurn = () => {
+      const assistant = renderAiMessage(messages, {
+        role: "assistant",
+        content: "",
+        streaming: true,
+        model: client.config.model
+      });
+      const streamH = assistant.stream();
+      setComposerRunning(composer, true);
+      const s = client.stream({ messages: [...history] });
+      session = s;
+      let failed = false;
+      void (async () => {
+        for await (const chunk of s) {
+          if (chunk.type === "text") streamH.append(chunk.delta);
+          else if (chunk.type === "error") {
+            failed = true;
+            streamH.fail();
+            assistant.setError(chunk.message);
+          }
+        }
+        const result = await s.done;
+        session = null;
+        if (!failed) streamH.done();
+        assistant.setMeta(metaOf(result));
+        if (result.text) history.push({ role: "assistant", content: result.text });
+        setComposerRunning(composer, false);
+        const queue = QUEUES.get(composer) ?? [];
+        if (queue.length > 0) {
+          const next = queue.shift();
+          QUEUES.set(composer, queue);
+          renderQueueChips(composer);
+          emit(composer, "icen:ai-dequeue", { index: 0 });
+          send(next);
+        }
+      })();
+    };
+    const send = (text) => {
+      renderAiMessage(messages, { role: "user", content: text });
+      history.push({ role: "user", content: text });
+      startTurn();
+    };
+    const onSend = (e) => {
+      const text = e.detail?.text;
+      if (typeof text === "string" && text) send(text);
+    };
+    const onStop = () => {
+      session?.cancel();
+    };
+    composer.addEventListener("icen:ai-send", onSend);
+    composer.addEventListener("icen:ai-stop", onStop);
+    disposers.push(() => {
+      composer.removeEventListener("icen:ai-send", onSend);
+      composer.removeEventListener("icen:ai-stop", onStop);
+      session?.cancel();
+    });
+  } else if (manageRunning) {
+    const onSend = () => setComposerRunning(composer, true);
+    const onDone = () => setComposerRunning(composer, false);
+    composer.addEventListener("icen:ai-send", onSend);
+    document.addEventListener("icen:ai-done", onDone);
+    disposers.push(() => {
+      composer.removeEventListener("icen:ai-send", onSend);
+      document.removeEventListener("icen:ai-done", onDone);
+    });
+  }
+  return {
+    unbind() {
+      for (const dispose of disposers) dispose();
+      disposers.length = 0;
+      BOUND.delete(composer);
+    }
+  };
+}
+export {
+  bindComposer,
+  initAiComposer,
+  setComposerCommands,
+  setComposerModels,
+  setComposerRefs,
+  setComposerRunning,
+  setComposerTodo,
+  setComposerUsage
+};