@icen.ai/ui 0.5.0 → 0.8.0

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

@@ -0,0 +1,53 @@
+type AiDiffFileStatus = 'added' | 'modified' | 'deleted' | 'renamed';
+interface AiDiffLine {
+    /** ctx = 上下文 / add = 新增 / del = 删除 / hunk = hunk 头 */
+    type: 'ctx' | 'add' | 'del' | 'hunk';
+    /** 旧文件行号（add/hunk 行为 null） */
+    oldNo: number | null;
+    /** 新文件行号（del/hunk 行为 null） */
+    newNo: number | null;
+    /** 行内容（不含行首 + / - / 空格前缀与 hunk 头） */
+    text: string;
+}
+interface AiDiffHunk {
+    oldStart: number;
+    oldCount: number;
+    newStart: number;
+    newCount: number;
+    /** 原始 hunk 头文本（@@ -10,6 +10,8 @@ …） */
+    header: string;
+    lines: AiDiffLine[];
+}
+interface AiDiffFile {
+    /** 新路径（重命名时为 rename to 目标） */
+    path: string;
+    /** 重命名前的旧路径 */
+    oldPath?: string;
+    status: AiDiffFileStatus;
+    hunks: AiDiffHunk[];
+    addCount: number;
+    delCount: number;
+    /** 二进制文件（无文本 hunks） */
+    binary?: boolean;
+}
+interface AiDiffModel {
+    files: AiDiffFile[];
+}
+/**
+ * 解析标准 unified diff 文本（支持多文件 `diff --git`、纯 `---/+++` 单文件、
+ * hunk `@@` 行号追踪、rename/new/deleted mode、Binary files）。
+ * 无法解析的行被安全忽略；SSR 安全（不触碰 DOM）。
+ */
+declare function parseUnifiedDiff(text: string): AiDiffFile[];
+/**
+ * 渲染 diff 审阅卡（DOM API，全 textContent）。
+ * 接受 parseUnifiedDiff 的产物；重复调用会替换 el 内容。
+ */
+declare function renderAiDiff(elm: HTMLElement, model: AiDiffModel): void;
+/**
+ * 委托初始化：展开/折叠 + 接受/拒绝。重复调用安全；
+ * 返回销毁函数（移除监听并复位标记，可重新 init）。
+ */
+declare function initAiDiff(root?: ParentNode): () => void;
+
+export { type AiDiffFile, type AiDiffFileStatus, type AiDiffHunk, type AiDiffLine, type AiDiffModel, initAiDiff, parseUnifiedDiff, renderAiDiff };

package/dist/behaviors/ai-diff.mjs

@@ -0,0 +1,282 @@
+// src/behaviors/ai-diff.ts
+var RE_HUNK = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/;
+var RE_OLD_FILE = /^--- (.*)$/;
+var RE_NEW_FILE_LINE = /^\+\+\+ (.*)$/;
+var RE_NEW_MODE = /^new file mode /;
+var RE_DEL_MODE = /^deleted file mode /;
+var RE_RENAME_FROM = /^rename from (.*)$/;
+var RE_RENAME_TO = /^rename to (.*)$/;
+var RE_BINARY = /^Binary files .* differ$/;
+function parseDiffPath(token) {
+  let p = token.split("	")[0].trim();
+  if (p.length >= 2 && p.startsWith('"') && p.endsWith('"')) p = p.slice(1, -1);
+  if (p !== "/dev/null" && (p.startsWith("a/") || p.startsWith("b/"))) p = p.slice(2);
+  return p;
+}
+function parseGitHeader(line) {
+  const m = /^diff --git\s+(\S+)\s+(.+)$/.exec(line);
+  if (!m) return null;
+  return { oldPath: parseDiffPath(m[1]), newPath: parseDiffPath(m[2]) };
+}
+function emptyFile(path) {
+  return { path, status: "modified", hunks: [], addCount: 0, delCount: 0 };
+}
+function parseUnifiedDiff(text) {
+  const files = [];
+  if (typeof text !== "string" || text.length === 0) return files;
+  let cur = null;
+  let hunk = null;
+  let oldNo = 0;
+  let newNo = 0;
+  const lines = text.split("\n");
+  for (const raw of lines) {
+    const line = raw.endsWith("\r") ? raw.slice(0, -1) : raw;
+    const git = parseGitHeader(line);
+    if (git) {
+      cur = emptyFile(git.newPath);
+      cur.oldPath = git.oldPath;
+      files.push(cur);
+      hunk = null;
+      continue;
+    }
+    if (!cur && RE_OLD_FILE.test(line)) {
+      cur = emptyFile("");
+      files.push(cur);
+      hunk = null;
+    }
+    if (!cur) continue;
+    if (RE_NEW_MODE.test(line)) {
+      cur.status = "added";
+      continue;
+    }
+    if (RE_DEL_MODE.test(line)) {
+      cur.status = "deleted";
+      continue;
+    }
+    const renameFrom = RE_RENAME_FROM.exec(line);
+    if (renameFrom) {
+      cur.oldPath = parseDiffPath(renameFrom[1]);
+      cur.status = "renamed";
+      continue;
+    }
+    const renameTo = RE_RENAME_TO.exec(line);
+    if (renameTo) {
+      cur.path = parseDiffPath(renameTo[1]);
+      cur.status = "renamed";
+      continue;
+    }
+    const oldLine = RE_OLD_FILE.exec(line);
+    if (oldLine) {
+      const p = parseDiffPath(oldLine[1]);
+      if (p === "/dev/null") cur.status = "added";
+      else if (!cur.oldPath) cur.oldPath = p;
+      continue;
+    }
+    const newLine = RE_NEW_FILE_LINE.exec(line);
+    if (newLine) {
+      const p = parseDiffPath(newLine[1]);
+      if (p === "/dev/null") cur.status = "deleted";
+      else if (p) cur.path = p;
+      continue;
+    }
+    if (RE_BINARY.test(line)) {
+      cur.binary = true;
+      hunk = null;
+      continue;
+    }
+    const hm = RE_HUNK.exec(line);
+    if (hm) {
+      hunk = {
+        oldStart: Number(hm[1]),
+        oldCount: hm[2] ? Number(hm[2]) : 1,
+        newStart: Number(hm[3]),
+        newCount: hm[4] ? Number(hm[4]) : 1,
+        header: line,
+        lines: []
+      };
+      cur.hunks.push(hunk);
+      oldNo = hunk.oldStart;
+      newNo = hunk.newStart;
+      continue;
+    }
+    if (!hunk) continue;
+    if (line.startsWith("\\")) continue;
+    if (line.startsWith("+")) {
+      hunk.lines.push({ type: "add", oldNo: null, newNo: newNo++, text: line.slice(1) });
+      cur.addCount++;
+    } else if (line.startsWith("-")) {
+      hunk.lines.push({ type: "del", oldNo: oldNo++, newNo: null, text: line.slice(1) });
+      cur.delCount++;
+    } else {
+      const body = line.startsWith(" ") ? line.slice(1) : line;
+      hunk.lines.push({ type: "ctx", oldNo: oldNo++, newNo: newNo++, text: body });
+    }
+  }
+  return files;
+}
+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 renderLineRow(line) {
+  const tr = document.createElement("tr");
+  tr.className = `ai-diff-line--${line.type}`;
+  if (line.type === "hunk") {
+    const td = el("td", "", line.text);
+    td.colSpan = 3;
+    tr.appendChild(td);
+    return tr;
+  }
+  const oldTd = el("td", "ai-diff-ln", line.oldNo === null ? "" : String(line.oldNo));
+  oldTd.setAttribute("aria-hidden", "true");
+  const newTd = el("td", "ai-diff-ln", line.newNo === null ? "" : String(line.newNo));
+  newTd.setAttribute("aria-hidden", "true");
+  tr.appendChild(oldTd);
+  tr.appendChild(newTd);
+  tr.appendChild(el("td", "ai-diff-code", line.text));
+  return tr;
+}
+function renderFile(file) {
+  const root = el("div", `ai-diff-file is-${file.status}`);
+  root.dataset.path = file.path;
+  const head = el("div", "ai-diff-head");
+  head.setAttribute("role", "button");
+  head.tabIndex = 0;
+  head.setAttribute("aria-expanded", "false");
+  const pathText = file.status === "renamed" && file.oldPath ? `${file.oldPath} \u2192 ${file.path}` : file.path;
+  head.appendChild(el("span", "ai-diff-path", pathText));
+  const stat = el("span", "ai-diff-stat");
+  if (file.addCount > 0) stat.appendChild(el("b", "ai-diff-add", `+${file.addCount}`));
+  if (file.delCount > 0) stat.appendChild(el("b", "ai-diff-del", `\u2212${file.delCount}`));
+  if (stat.children.length > 0) head.appendChild(stat);
+  const actions = el("span", "ai-diff-actions");
+  actions.appendChild(el("button", "", "\u63A5\u53D7")).setAttribute("data-ai-diff-accept", "");
+  const rejectBtn = el("button", "", "\u62D2\u7EDD");
+  rejectBtn.setAttribute("data-ai-diff-reject", "");
+  actions.appendChild(rejectBtn);
+  head.appendChild(actions);
+  const verdict = el("span", "ai-diff-verdict");
+  verdict.hidden = true;
+  head.appendChild(verdict);
+  root.appendChild(head);
+  const body = el("div", "ai-diff-body");
+  body.hidden = true;
+  const table = el("table", "ai-diff-table");
+  if (file.hunks.length === 0) {
+    const tr = document.createElement("tr");
+    tr.className = "ai-diff-line--ctx";
+    const td = el("td", "", file.binary ? "\u4E8C\u8FDB\u5236\u6587\u4EF6\uFF0C\u65E0\u6CD5\u663E\u793A\u6587\u672C\u5DEE\u5F02" : "\u65E0\u5DEE\u5F02\u5185\u5BB9");
+    td.colSpan = 3;
+    tr.appendChild(td);
+    table.appendChild(tr);
+  } else {
+    for (const hunk of file.hunks) {
+      table.appendChild(renderLineRow({ type: "hunk", oldNo: null, newNo: null, text: hunk.header }));
+      for (const line of hunk.lines) table.appendChild(renderLineRow(line));
+    }
+  }
+  body.appendChild(table);
+  root.appendChild(body);
+  return root;
+}
+function renderAiDiff(elm, model) {
+  if (typeof document === "undefined") return;
+  elm.textContent = "";
+  const root = el("div", "ai-diff");
+  const files = Array.isArray(model?.files) ? model.files : [];
+  for (const file of files) root.appendChild(renderFile(file));
+  elm.appendChild(root);
+}
+var noopDestroy = () => void 0;
+function closestFile(node) {
+  const file = node?.closest(".ai-diff-file");
+  return file instanceof HTMLElement ? file : null;
+}
+function filePath(file) {
+  if (file.dataset.path) return file.dataset.path;
+  return file.querySelector(".ai-diff-path")?.textContent ?? "";
+}
+function toggleFile(head) {
+  const file = closestFile(head);
+  if (!file) return;
+  const body = file.querySelector(".ai-diff-body");
+  if (!body) return;
+  const open = body.hidden;
+  body.hidden = !open;
+  head.setAttribute("aria-expanded", String(open));
+  file.dispatchEvent(new CustomEvent("icen:ai-toggle", {
+    bubbles: true,
+    detail: { el: file, open }
+  }));
+}
+function decide(btn, accepted) {
+  const file = closestFile(btn);
+  if (!file) return;
+  if (file.classList.contains("is-accepted") || file.classList.contains("is-rejected")) return;
+  file.classList.add(accepted ? "is-accepted" : "is-rejected");
+  let verdict = file.querySelector(".ai-diff-verdict");
+  if (!verdict) {
+    verdict = el("span", "ai-diff-verdict");
+    file.querySelector(".ai-diff-head")?.appendChild(verdict);
+  }
+  verdict.textContent = accepted ? "\u5DF2\u63A5\u53D7" : "\u5DF2\u62D2\u7EDD";
+  verdict.hidden = false;
+  file.querySelectorAll(
+    "[data-ai-diff-accept], [data-ai-diff-reject]"
+  ).forEach((b) => {
+    b.hidden = true;
+    b.disabled = true;
+  });
+  file.dispatchEvent(new CustomEvent(accepted ? "icen:ai-diff-accept" : "icen:ai-diff-reject", {
+    bubbles: true,
+    detail: { path: filePath(file) }
+  }));
+}
+function initAiDiff(root) {
+  if (typeof document === "undefined") return noopDestroy;
+  const scope = root ?? document;
+  const marked = scope;
+  if (marked.__icenAiDiffInit) return noopDestroy;
+  marked.__icenAiDiffInit = true;
+  const target = scope;
+  const onClick = (e) => {
+    const t = e.target instanceof Element ? e.target : null;
+    if (!t) return;
+    if (t.closest("[data-ai-diff-accept]")) {
+      e.stopPropagation();
+      decide(t.closest("[data-ai-diff-accept]"), true);
+      return;
+    }
+    if (t.closest("[data-ai-diff-reject]")) {
+      e.stopPropagation();
+      decide(t.closest("[data-ai-diff-reject]"), false);
+      return;
+    }
+    const head = t.closest(".ai-diff-head");
+    if (head) toggleFile(head);
+  };
+  const onKeydown = (e) => {
+    const ke = e;
+    if (ke.key !== "Enter" && ke.key !== " ") return;
+    const t = ke.target instanceof Element ? ke.target : null;
+    if (!t || t.closest("button, a, input, textarea, select")) return;
+    const head = t.closest(".ai-diff-head");
+    if (!head) return;
+    ke.preventDefault();
+    toggleFile(head);
+  };
+  target.addEventListener("click", onClick);
+  target.addEventListener("keydown", onKeydown);
+  return () => {
+    target.removeEventListener("click", onClick);
+    target.removeEventListener("keydown", onKeydown);
+    marked.__icenAiDiffInit = false;
+  };
+}
+export {
+  initAiDiff,
+  parseUnifiedDiff,
+  renderAiDiff
+};

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

@@ -0,0 +1,98 @@
+import { AiStatus, AiUsage } from './ai-core.js';
+import { AiAuditor, AiAuditEntry } from './ai-provider.js';
+
+interface AiTodoItem {
+    content: string;
+    status: AiStatus;
+    /** Claude Code 模式：running 时的替换文案 */
+    activeForm?: string;
+}
+/**
+ * 渲染 todo 列表（DOM API，全 textContent）。全部完成时容器加 .is-complete。
+ */
+declare function renderAiTodo(elm: HTMLElement, items: AiTodoItem[]): void;
+/**
+ * todo 委托初始化：仅 data-ai-todo-interactive 容器可点击循环状态（pending→running→done），
+ * 只读列表不挂交互。重复调用安全；返回销毁函数。
+ */
+declare function initAiTodo(root?: ParentNode): () => void;
+interface AiUsageRenderOpts {
+    /** 上下文上限（如 200k）：给出时 total 行显示 82k / 200k · 41% */
+    total?: number;
+    /** 成本（USD）：给出时追加到 total 行 */
+    cost?: number;
+}
+/**
+ * 渲染用量分段条 + 图例 + 占比。
+ * 配色契约：input=accent / output=success / cacheRead=info / cacheWrite=warning / reasoning=faint。
+ */
+declare function renderAiUsage(elm: HTMLElement, usage: AiUsage, opts?: AiUsageRenderOpts): void;
+interface AiUsageRingOpts extends AiUsageRenderOpts {
+    /** 弹层标题（默认「上下文窗口」） */
+    title?: string;
+}
+/**
+ * 上下文窗口环形指示器（Claude Desktop 模式）：紧凑圆环显示占用比，
+ * 点击弹出完整分段分解（复用 popover 浮层 + renderAiUsage）。
+ * opts.total 给上下文窗口上限（如 200000）——环填充比 = 已用 / total；
+ * 缺省 total 时环不填充、中心显示已用量。
+ * 状态档：<60% is-ok（accent）/ 60–85% is-warn / >85% is-hot（error）。
+ * 重复调用重渲染；打开中的弹层会被关闭重建。
+ */
+declare function renderAiUsageRing(elm: HTMLElement, usage: AiUsage, opts?: AiUsageRingOpts): void;
+interface AiContextFile {
+    path: string;
+    status?: 'added' | 'modified' | 'deleted';
+}
+interface AiContextMcpServer {
+    name: string;
+    tools?: number;
+    /** connected（默认）→ .is-done；disconnected → .is-error */
+    status?: 'connected' | 'disconnected';
+}
+interface AiContextSkill {
+    name: string;
+    description?: string;
+}
+interface AiContextModel {
+    usage?: AiUsage;
+    /** 传 renderAiUsage 的 opts（上限/成本），可选扩展 */
+    usageTotal?: number;
+    usageCost?: number;
+    files?: AiContextFile[];
+    mcpServers?: AiContextMcpServer[];
+    skills?: AiContextSkill[];
+    /** 审计源（auditor 实例或条目数组）：抽屉自动出现「审计」节（§12.2，紧凑形态无清除钮） */
+    audit?: AiAuditor | AiAuditEntry[];
+}
+/**
+ * 组合渲染上下文抽屉：usage → renderAiUsage；files → ai-file-chip；
+ * mcpServers / skills → .ai-item 行。aside 默认 hidden，由 initAiContext 开合。
+ */
+declare function renderAiContext(elm: HTMLElement, model: AiContextModel): void;
+/**
+ * 触发器 [data-ai-context-open] 委托开合：
+ *   - 属性值为 #id / 选择器时定位对应抽屉，空值取 scope 内第一个非 inline 抽屉
+ *   - 打开：去 hidden → reflow → .is-open 滑入（CSS transition），焦点移入 close 钮
+ *   - 关闭：[data-ai-context-close] / Esc / 外点；.is-open 移除 → transition 结束（或兜底计时）
+ *     后恢复 hidden，焦点还原触发器；Tab/Shift+Tab 焦点圈禁
+ *   - .ai-context--inline 为页面流内嵌变体：不参与开合、不做 fixed
+ */
+declare function initAiContext(root?: ParentNode): () => void;
+interface AiAuditRenderOpts {
+    /** 最近请求条数（默认 10；抽屉紧凑形态 5） */
+    limit?: number;
+    /** 显示清除钮（默认 true）；点击派 icen:ai-audit-clear（bubbles） */
+    clearButton?: boolean;
+    /** 替代事件回调（与 clearButton 二选一，都给时回调优先） */
+    onClear?: () => void;
+}
+/**
+ * 渲染审计面板：totals（请求数/失败/累计 tokens/累计成本/平均 TTFT）+ byModel 分组 +
+ * 最近请求条目（默认 10 条，最新在前）。source 为 auditor 实例或条目数组（快照渲染，
+ * 数据更新后重调）。清除钮派 icen:ai-audit-clear { }（消费方调 auditor.clear() 后重渲染），
+ * opts.onClear 给了则走回调。
+ */
+declare function renderAiAudit(elm: HTMLElement, source: AiAuditor | AiAuditEntry[], opts?: AiAuditRenderOpts): void;
+
+export { type AiAuditRenderOpts, type AiContextFile, type AiContextMcpServer, type AiContextModel, type AiContextSkill, type AiTodoItem, type AiUsageRenderOpts, type AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing };