@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/ai-chat.mjs

@@ -0,0 +1,557 @@
+// 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 trim1(v) {
+  const s = (Math.round(v * 10) / 10).toFixed(1);
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+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 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/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 isBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function emit(target, name, detail) {
+  target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+}
+function fallbackCopy(text) {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+  } catch {
+  }
+  ta.remove();
+}
+function copyText(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
+  } else {
+    fallbackCopy(text);
+  }
+}
+function setupChat(chat) {
+  const el2 = chat;
+  if (el2.__icenAiChatInit) return void 0;
+  el2.__icenAiChatInit = true;
+  const scrollEl = chat.querySelector(".ai-chat-scroll");
+  let jump = chat.querySelector(".ai-chat-jump") ?? null;
+  let pinned = true;
+  let unread = 0;
+  let lastMsgCount = 0;
+  let suppressUntil = 0;
+  let rafPending = false;
+  const NEAR_BOTTOM_PX = 32;
+  const isAtBottom = () => scrollEl ? scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < NEAR_BOTTOM_PX : true;
+  const updateJump = () => {
+    if (!jump) return;
+    if (pinned) {
+      jump.hidden = true;
+      return;
+    }
+    jump.textContent = unread > 0 ? `\u56DE\u5230\u5E95\u90E8 \xB7 ${unread} \u6761\u65B0\u6D88\u606F` : "\u56DE\u5230\u5E95\u90E8";
+    jump.hidden = false;
+  };
+  const scrollToBottom = (smooth) => {
+    if (!scrollEl) return;
+    const behavior = smooth && !prefersReducedMotion() ? "smooth" : "auto";
+    suppressUntil = Date.now() + (behavior === "smooth" ? 600 : 100);
+    scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior });
+  };
+  const onContentChange = () => {
+    rafPending = false;
+    if (!scrollEl) return;
+    if (pinned) {
+      scrollToBottom(false);
+    } else {
+      const count = scrollEl.querySelectorAll(".ai-msg").length;
+      if (count >= lastMsgCount) {
+        unread += count - lastMsgCount;
+      } else {
+        unread = 0;
+      }
+      lastMsgCount = Math.max(lastMsgCount, count);
+      updateJump();
+    }
+  };
+  const scheduleContentCheck = () => {
+    if (rafPending) return;
+    rafPending = true;
+    window.requestAnimationFrame(onContentChange);
+  };
+  const onScroll = () => {
+    if (Date.now() < suppressUntil) return;
+    const atBottom = isAtBottom();
+    if (atBottom && !pinned) {
+      pinned = true;
+      unread = 0;
+      updateJump();
+    } else if (!atBottom && pinned) {
+      pinned = false;
+      updateJump();
+    }
+  };
+  const onJumpClick = () => {
+    pinned = true;
+    unread = 0;
+    updateJump();
+    scrollToBottom(true);
+  };
+  const onClick = (e) => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const actionBtn = target.closest("[data-ai-msg-action]");
+    if (actionBtn) {
+      const msg = actionBtn.closest(".ai-msg");
+      if (!msg) return;
+      const action = actionBtn.dataset.aiMsgAction;
+      if (action === "copy") {
+        copyText(msg.querySelector(".ai-msg-body")?.textContent ?? "");
+        emit(msg, "icen:ai-copy", { el: msg });
+      } else if (action === "retry") {
+        emit(msg, "icen:ai-retry", { el: msg });
+      }
+      return;
+    }
+    const head = target.closest(".ai-reasoning-head");
+    if (head) {
+      const reasoning = head.closest(".ai-reasoning");
+      if (!reasoning) return;
+      const body = reasoning.querySelector(".ai-reasoning-body");
+      const open = head.getAttribute("aria-expanded") !== "true";
+      head.setAttribute("aria-expanded", String(open));
+      reasoning.classList.toggle("is-open", open);
+      if (body) body.hidden = !open;
+      emit(reasoning, "icen:ai-toggle", { el: reasoning, open });
+    }
+  };
+  const disposers = [];
+  let resizeObs;
+  let mutationObs;
+  if (scrollEl) {
+    if (!jump) {
+      jump = document.createElement("button");
+      jump.type = "button";
+      jump.className = "ai-chat-jump";
+      jump.hidden = true;
+      chat.appendChild(jump);
+    }
+    lastMsgCount = scrollEl.querySelectorAll(".ai-msg").length;
+    scrollEl.addEventListener("scroll", onScroll, { passive: true });
+    jump.addEventListener("click", onJumpClick);
+    const jumpBtn = jump;
+    disposers.push(() => {
+      scrollEl.removeEventListener("scroll", onScroll);
+      jumpBtn.removeEventListener("click", onJumpClick);
+    });
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObs = new ResizeObserver(scheduleContentCheck);
+      resizeObs.observe(scrollEl);
+      for (const child of Array.from(scrollEl.children)) resizeObs.observe(child);
+      disposers.push(() => resizeObs?.disconnect());
+    }
+    if (typeof MutationObserver !== "undefined") {
+      mutationObs = new MutationObserver((records) => {
+        if (resizeObs) {
+          for (const rec of records) {
+            for (const node of Array.from(rec.addedNodes)) {
+              if (node instanceof Element) resizeObs.observe(node);
+            }
+          }
+        }
+        scheduleContentCheck();
+      });
+      mutationObs.observe(scrollEl, { childList: true, subtree: true, characterData: true });
+      disposers.push(() => mutationObs?.disconnect());
+    }
+    scrollToBottom(false);
+  }
+  chat.addEventListener("click", onClick);
+  disposers.push(() => chat.removeEventListener("click", onClick));
+  return () => {
+    for (const dispose of disposers) dispose();
+    el2.__icenAiChatInit = false;
+  };
+}
+function initAiChat(root) {
+  const cleanups = [];
+  if (isBrowser()) {
+    const scope = root ?? document;
+    const candidates = [];
+    if (scope instanceof Element && scope.matches(".ai-chat")) {
+      candidates.push(scope);
+    }
+    candidates.push(...Array.from(scope.querySelectorAll(".ai-chat")));
+    for (const chat of candidates) {
+      const cleanup = setupChat(chat);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
+}
+function createAiStream(el2) {
+  const reasoning = el2.closest(".ai-reasoning");
+  const startedAt = Date.now();
+  let state = "streaming";
+  el2.classList.add("is-streaming");
+  el2.setAttribute("aria-busy", "true");
+  reasoning?.classList.add("is-streaming");
+  const settle = (finished) => {
+    if (state !== "streaming") return;
+    state = finished ? "done" : "cancelled";
+    el2.classList.remove("is-streaming");
+    el2.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;
+      el2.textContent += text;
+    },
+    done() {
+      settle(true);
+    },
+    cancel() {
+      settle(false);
+    },
+    fail() {
+      if (state !== "streaming") return;
+      state = "error";
+      el2.classList.remove("is-streaming");
+      el2.removeAttribute("aria-busy");
+      el2.classList.add("is-error");
+      reasoning?.classList.remove("is-streaming");
+    }
+  };
+}
+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 el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function renderAiContentPart(part) {
+  if (part.type === "text") {
+    const span = el("span", "ai-msg-text");
+    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 = el("span", "ai-msg-file");
+    chip.appendChild(el("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 = el("div", `ai-msg ai-msg--${model.role}`);
+  const avatar = el("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
+  const body = el("div", "ai-msg-body");
+  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(el("span", "ai-msg-model", model.model));
+  const metaEl = el("div", "ai-msg-meta");
+  if (model.meta != null) metaEl.textContent = model.meta;
+  row.appendChild(metaEl);
+  const actions = el("div", "ai-msg-actions");
+  const copyBtn = el("button", "ai-msg-action");
+  copyBtn.type = "button";
+  copyBtn.setAttribute("data-ai-msg-action", "copy");
+  copyBtn.setAttribute("aria-label", "\u590D\u5236");
+  const copyIcon = svgIcon(ICON_COPY);
+  if (copyIcon) copyBtn.appendChild(copyIcon);
+  const retryBtn = el("button", "ai-msg-action");
+  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 = el("div", "ai-msg-error-text");
+        body.appendChild(errEl);
+      }
+      errEl.textContent = message;
+    },
+    stream() {
+      const span = el("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;
+}
+export {
+  createAiStream,
+  initAiChat,
+  renderAiContentPart,
+  renderAiMessage
+};

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

@@ -0,0 +1,112 @@
+import { AiUsage } from './ai-core.js';
+import { AiTodoItem, AiUsageRingOpts } from './ai-panel.js';
+import { AiClient, AiAuditor } from './ai-provider.js';
+
+interface AiProviderModelOption {
+    id: string;
+    label: string;
+    /** 上下文窗口 token 数（如 1_000_000 → 弹层显示 1M） */
+    context?: number;
+}
+interface AiProviderOption {
+    id: string;
+    label: string;
+    /** 单色 SVG 字符串（经 svgIcon 消毒）；缺失时用首字母圆形章（token 色） */
+    icon?: string;
+    models: AiProviderModelOption[];
+}
+interface AiComposerCurrentModel {
+    provider: string;
+    model: string;
+}
+interface AiComposerCommand {
+    name: string;
+    description?: string;
+    /** 参数提示（如 "<path>"），弹层命令行右侧灰色展示 */
+    argsHint?: string;
+}
+type AiComposerRefKind = 'file' | 'folder' | 'doc' | 'agent';
+interface AiComposerRefSource {
+    kind: AiComposerRefKind;
+    id: string;
+    label: string;
+    sub?: string;
+}
+/**
+ * 运行态切换（spec §4.3）：
+ * el 传 composer 容器或其内部任意元素（含发送钮自身），就近解析 [data-ai-composer]。
+ */
+declare function setComposerRunning(el: HTMLElement, running: boolean): void;
+/**
+ * 初始化 root 下的全部 [data-ai-composer]（root 自身匹配时包含自身）。
+ * 幂等；返回销毁函数（复刻 initBackTop 约定）。
+ */
+declare function initAiComposer(root?: ParentNode): () => void;
+/**
+ * 配置模型切换（§8）：工具条出现模型钮，弹层按 provider 分组 + 搜索过滤 + 当前勾选。
+ * current 缺省取第一个 provider 的第一个模型（静默选中，不派事件）。
+ * 选择派 icen:ai-model-change {provider, model, label, context}；
+ * 选中模型的 context 自动成为 setComposerUsage 的 total 默认值（显式 opts.total 优先）。
+ * providers 传空数组 = 清除配置（移除 JS 自动创建的模型钮）。
+ */
+declare function setComposerModels(el: HTMLElement, providers: AiProviderOption[], current?: AiComposerCurrentModel): void;
+/**
+ * 配置斜杠命令（§8）：输入开头 `/` 触发命令弹层（随输入过滤，↑↓/Enter/Tab/Esc）。
+ * 选中派 icen:ai-command {name, args} 并清空输入（命令被拦截执行、不进消息流）。
+ * commands 传空数组 = 清除配置。
+ */
+declare function setComposerCommands(el: HTMLElement, commands: AiComposerCommand[]): void;
+/**
+ * 配置 @ 引用源（§8）：任意位置 token 起点 `@` 触发引用弹层（按 kind 分组：file/folder/doc/agent）。
+ * 选中后文本插入 `@label ` + refs chip +1，派 icen:ai-ref {action:'add', ref}；
+ * chip × 移除 chip 并删文本里首个 `@label`，派 {action:'remove', ref}。
+ */
+declare function setComposerRefs(el: HTMLElement, sources: AiComposerRefSource[]): void;
+/**
+ * 配置用量环（§8）：工具条右侧挂 renderAiUsageRing（点击环弹出完整分段分解）。
+ * total 缺省时用选中模型的 context（setComposerModels 闭环）；显式 opts.total 优先。
+ * usage 传 null = 清除配置（移除 JS 自动创建的挂载点）。
+ */
+declare function setComposerUsage(el: HTMLElement, usage: AiUsage | null, opts?: AiUsageRingOpts): void;
+/**
+ * 输入框旁的实时待办（业界模式：plan/todo 是工具调用，实时状态挂在输入区而非对话流）：
+ * chip = 图标 + x/y，状态色随进度（进行中 accent / 全部完成 success / 有失败 warning）；
+ * 点击弹出完整清单（popover + renderAiTodo，只读）。传 null 清除。
+ */
+declare function setComposerTodo(el: HTMLElement, items: AiTodoItem[] | null): void;
+interface AiComposerBindOpts {
+    /**
+     * 传入即托管对话（client 模式）：icen:ai-send → renderAiMessage 用户消息 + running +
+     * client.stream → assistant 消息 + createAiStream 逐 chunk 追加 → done 收尾（meta 自动填
+     * token/成本）；错误 → setError + fail；stop → session.cancel()；排队消息每轮完成自动发送。
+     * 需要 messages 容器。history 由绑定层维护（system 消息可先经 client 直接对话时自带）。
+     */
+    client?: AiClient;
+    /** 消息挂载容器（.ai-chat-scroll 或任意元素；client 模式必填） */
+    messages?: HTMLElement;
+    /**
+     * 用量环自动更新（监听 document 的 icen:ai-done）：
+     * 'context'（默认）= 上下文估算口径（ai-core contextEstimate——环语义正确）；
+     * 'billing' = 请求用量累加（计费视角）；传 AiAuditor 实例 = auditor.summary()。
+     * total 缺省沿用 setComposerModels 的模型 context 闭环。
+     */
+    usage?: {
+        from: 'context' | 'billing' | AiAuditor;
+        total?: number;
+    };
+    /** 运行态自动管理（默认 true）：icen:ai-send → running；icen:ai-done → 解除 */
+    running?: boolean;
+}
+interface AiComposerBinding {
+    /** 解绑全部监听并中止进行中的托管会话（composer 本身的 init 不受影响） */
+    unbind(): void;
+}
+/**
+ * composer ↔ 消息区 ↔ client ↔ 用量环的闭环绑定（事件驱动，传输会话所有权仍归消费方）。
+ * 不传 client 时为纯状态绑定（send→running、done→解除、环更新），渐进采用。
+ * 注意：running 自动管理依赖 client 派发的 icen:ai-done；无 client 的纯事件用法需
+ * 自行派发该事件或传 running:false。
+ */
+declare function bindComposer(el: HTMLElement, opts?: AiComposerBindOpts): AiComposerBinding;
+
+export { type AiComposerBindOpts, type AiComposerBinding, type AiComposerCommand, type AiComposerCurrentModel, type AiComposerRefKind, type AiComposerRefSource, type AiProviderModelOption, type AiProviderOption, bindComposer, initAiComposer, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage };