@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/kb-eval.d.mts

@@ -0,0 +1,22 @@
+import { KbEvalRow } from './kb-core.js';
+import './ai-core.js';
+
+/** 可选 run（下拉项） */
+interface KbEvalRunRef {
+    id: string;
+    label: string;
+}
+/** renderKbEvalCompare 入参模型 */
+interface KbEvalCompareModel {
+    runs: KbEvalRunRef[];
+    rows: KbEvalRow[];
+    /** 指标列名（缺省从 rows 的 scoresA/scoresB 键序并集推导） */
+    metrics?: string[];
+}
+/**
+ * 渲染评估 run 对比（快照：整体替换 el 内容）。返回挂载容器 el。
+ * 头部 runA/runB 下拉切换 → icen:kb-eval-compare { runA, runB }（消费方重取数据重渲）。
+ */
+declare function renderKbEvalCompare(el: HTMLElement, model: KbEvalCompareModel): HTMLElement;
+
+export { type KbEvalCompareModel, type KbEvalRunRef, renderKbEvalCompare };

package/dist/behaviors/kb-eval.mjs

@@ -0,0 +1,408 @@
+// 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 h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+// src/behaviors/kb-core.ts
+var ic = (label, d) => ({ label, icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${d}</svg>` });
+var BUILTIN_SOURCE_TYPES = {
+  doc: ic("\u6587\u6863", '<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"/>'),
+  web: ic("\u7F51\u9875", '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>'),
+  wiki: ic("\u77E5\u8BC6\u5E93", '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>'),
+  sheet: ic("\u8868\u683C", '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>'),
+  db: ic("\u6570\u636E\u5E93", '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/>'),
+  ticket: ic("\u5DE5\u5355", '<path d="M3 9V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 6v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-6z"/><path d="M13 5v14"/>'),
+  code: ic("\u4EE3\u7801", '<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>'),
+  api: ic("\u63A5\u53E3", '<path d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z"/>'),
+  image: ic("\u56FE\u7247", '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-4.6-4.6a2 2 0 0 0-2.8 0L3 21"/>'),
+  mail: ic("\u90AE\u4EF6", '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/>')
+};
+var sourceTypeRegistry = new Map(Object.entries(BUILTIN_SOURCE_TYPES));
+function formatScore(v, digits = 3) {
+  if (v == null || !Number.isFinite(v)) return "\u2014";
+  return v.toFixed(digits).replace(/\.?0+$/, (s) => s.includes(".") ? "" : s);
+}
+function evalGrade(scoreDelta, costDeltaPct, latencyDeltaPct) {
+  if (scoreDelta == null || Math.abs(scoreDelta) < 1e-9) {
+    if (scoreDelta == null) return "tie";
+    const worse = costDeltaPct != null && costDeltaPct > 5 || latencyDeltaPct != null && latencyDeltaPct > 15;
+    return worse ? "tradeoff" : "tie";
+  }
+  if (scoreDelta > 0) {
+    const worse = costDeltaPct != null && costDeltaPct > 5 || latencyDeltaPct != null && latencyDeltaPct > 15;
+    return worse ? "tradeoff" : "improvement";
+  }
+  return "regression";
+}
+function meanScore(scores) {
+  if (!scores) return null;
+  const vals = Object.values(scores).filter((v) => typeof v === "number");
+  return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+}
+function deltaLabel(v, digits = 1) {
+  if (v == null || !Number.isFinite(v)) return "\u2014";
+  const s = v.toFixed(digits);
+  return v > 0 ? `+${s}` : s;
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/kb-eval.ts
+var GRADE_LABELS = {
+  improvement: "\u63D0\u5347",
+  regression: "\u56DE\u5F52",
+  tradeoff: "\u6743\u8861",
+  tie: "\u6301\u5E73"
+};
+function deriveMetrics(rows) {
+  const seen = [];
+  for (const r of rows) {
+    for (const k of Object.keys(r.scoresA ?? {})) if (!seen.includes(k)) seen.push(k);
+    for (const k of Object.keys(r.scoresB ?? {})) if (!seen.includes(k)) seen.push(k);
+  }
+  return seen;
+}
+function overallMean(rows, key) {
+  const vals = rows.map((r) => meanScore(r[key])).filter((v) => v != null);
+  return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+}
+function rowIsRegression(row) {
+  const ma = meanScore(row.scoresA);
+  const mb = meanScore(row.scoresB);
+  if (ma != null && mb != null) return mb < ma;
+  const keys = /* @__PURE__ */ new Set([...Object.keys(row.scoresA ?? {}), ...Object.keys(row.scoresB ?? {})]);
+  for (const k of keys) {
+    const a = row.scoresA?.[k];
+    const b = row.scoresB?.[k];
+    if (typeof a === "number" && typeof b === "number" && b < a) return true;
+  }
+  return false;
+}
+function diffInline(a, b) {
+  const min = Math.min(a.length, b.length);
+  let start = 0;
+  while (start < min && a.charCodeAt(start) === b.charCodeAt(start)) start++;
+  let endA = a.length;
+  let endB = b.length;
+  while (endA > start && endB > start && a.charCodeAt(endA - 1) === b.charCodeAt(endB - 1)) {
+    endA--;
+    endB--;
+  }
+  return { prefix: a.slice(0, start), aMid: a.slice(start, endA), bMid: b.slice(start, endB), suffix: a.slice(endA) };
+}
+function appendDiffText(pre, prefix, mid, midClass, suffix) {
+  if (prefix) pre.append(h("span", void 0, prefix));
+  if (mid) pre.append(h("span", midClass, mid));
+  if (suffix) pre.append(h("span", void 0, suffix));
+}
+function evalGridTemplate(metrics) {
+  const cols = ["minmax(140px, 1.2fr)", "minmax(140px, 1fr)", "minmax(140px, 1fr)", "minmax(80px, 0.7fr)"];
+  for (let i = 0; i < metrics.length; i++) cols.push("44px", "44px", "64px");
+  return cols.join(" ");
+}
+function labelOf(runs, id) {
+  return runs.find((r) => r.id === id)?.label ?? id;
+}
+function buildRunSelect(runs, selected, tag) {
+  const sel = h("select", "kb-eval-run");
+  sel.dataset.run = tag;
+  if (!runs.length) {
+    const o = h("option", void 0, "\u2014");
+    o.value = "";
+    sel.append(o);
+  }
+  for (const r of runs) {
+    const o = h("option", void 0, r.label || r.id);
+    o.value = r.id;
+    sel.append(o);
+  }
+  sel.value = selected;
+  return sel;
+}
+function truncCell(text) {
+  const c = h("span", "kb-eval-cell", text);
+  c.title = text;
+  return c;
+}
+function deltaCell(d, digits) {
+  const cls = d == null ? "" : d > 0 ? " is-up" : d < 0 ? " is-down" : "";
+  return h("span", `kb-num kb-eval-num kb-eval-delta${cls}`, d != null ? deltaLabel(d, digits) : "\u2014");
+}
+function renderKbEvalCompare(el, model) {
+  if (typeof document === "undefined") return el;
+  const metrics = model.metrics && model.metrics.length ? model.metrics.slice() : deriveMetrics(model.rows);
+  const runs = model.runs;
+  const runA = runs[0]?.id ?? "";
+  const runB = runs[1]?.id ?? runs[0]?.id ?? "";
+  el.className = "kb-eval";
+  el.replaceChildren();
+  const bar = h("div", "kb-eval-bar");
+  bar.append(h("span", void 0, "\u5BF9\u6BD4"));
+  const selA = buildRunSelect(runs, runA, "a");
+  const selB = buildRunSelect(runs, runB, "b");
+  const emitCompare = () => {
+    emitIcen(el, "icen:kb-eval-compare", { runA: selA.value, runB: selB.value });
+  };
+  selA.addEventListener("change", emitCompare);
+  selB.addEventListener("change", emitCompare);
+  bar.append(selA, h("span", void 0, "vs"), selB);
+  el.append(bar);
+  if (!model.rows.length) {
+    el.append(h("div", "kb-empty", "\u6CA1\u6709\u5BF9\u6BD4\u6570\u636E"));
+    return el;
+  }
+  const meanA = overallMean(model.rows, "scoresA");
+  const meanB = overallMean(model.rows, "scoresB");
+  const delta = meanA != null && meanB != null ? meanB - meanA : null;
+  const grade = evalGrade(delta);
+  const summary = h("div", "kb-eval-summary");
+  summary.append(h("span", `kb-eval-grade is-${grade}`, GRADE_LABELS[grade]));
+  summary.append(h("span", "kb-num", `A \u5747\u5206 ${formatScore(meanA)}`));
+  summary.append(h("span", "kb-meta", "\u2192"));
+  summary.append(h("span", "kb-num", `B \u5747\u5206 ${formatScore(meanB)}`));
+  const ppCell = deltaCell(delta != null ? delta * 100 : null, 1);
+  if (delta != null) ppCell.append("pp");
+  summary.append(ppCell);
+  summary.append(h("span", "kb-meta", `${model.rows.length} \u884C`));
+  el.append(summary);
+  const wrap = h("div", "kb-eval-tablewrap");
+  const table = h("div", "kb-eval-table");
+  const template = evalGridTemplate(metrics);
+  const head1 = h("div", "kb-eval-grid kb-eval-grid--head");
+  head1.style.gridTemplateColumns = template;
+  head1.append(
+    h("span", "kb-eval-h", "\u8F93\u5165"),
+    h("span", "kb-eval-h", `\u8F93\u51FA ${labelOf(runs, runA)}`),
+    h("span", "kb-eval-h", `\u8F93\u51FA ${labelOf(runs, runB)}`),
+    h("span", "kb-eval-h", "\u671F\u671B")
+  );
+  for (const m of metrics) {
+    const g = h("span", "kb-eval-h kb-eval-h--group", m);
+    g.style.gridColumn = "span 3";
+    head1.append(g);
+  }
+  const head2 = h("div", "kb-eval-grid kb-eval-grid--head");
+  head2.style.gridTemplateColumns = template;
+  for (let i = 0; i < 4; i++) head2.append(h("span", "kb-eval-h"));
+  for (let i = 0; i < metrics.length; i++) {
+    head2.append(
+      h("span", "kb-eval-h kb-eval-h--sub", "A"),
+      h("span", "kb-eval-h kb-eval-h--sub", "B"),
+      h("span", "kb-eval-h kb-eval-h--sub", "\u0394")
+    );
+  }
+  table.append(head1, head2);
+  const items = [];
+  let filterOn = false;
+  let hasRegression = false;
+  for (const row of model.rows) {
+    const regression = rowIsRegression(row);
+    hasRegression = hasRegression || regression;
+    const item = h("div", "kb-eval-item");
+    const line = h("div", "kb-eval-grid kb-eval-rowline");
+    line.style.gridTemplateColumns = template;
+    line.tabIndex = 0;
+    line.setAttribute("role", "button");
+    line.setAttribute("aria-expanded", "false");
+    const inputCell = h("span", "kb-eval-cell kb-eval-cell--input");
+    inputCell.append(h("span", "kb-eval-key", row.key));
+    const inputText = h("span", void 0, row.input);
+    inputText.title = row.input;
+    inputCell.append(inputText);
+    line.append(inputCell, truncCell(row.outputA ?? "\u2014"), truncCell(row.outputB ?? "\u2014"), truncCell(row.expected ?? "\u2014"));
+    for (const m of metrics) {
+      const a = row.scoresA?.[m] ?? null;
+      const b = row.scoresB?.[m] ?? null;
+      line.append(
+        h("span", "kb-num kb-eval-num", formatScore(a)),
+        h("span", "kb-num kb-eval-num", formatScore(b)),
+        deltaCell(typeof a === "number" && typeof b === "number" ? b - a : null, 2)
+      );
+    }
+    const detail = h("div", "kb-eval-detail");
+    detail.hidden = true;
+    const diff = diffInline(row.outputA ?? "", row.outputB ?? "");
+    const colA = h("div", "kb-eval-detail-col");
+    colA.append(h("div", "kb-eval-detail-label", "\u8F93\u51FA A"));
+    const preA = h("pre", "kb-eval-detail-pre");
+    appendDiffText(preA, diff.prefix, diff.aMid, "kb-eval-diff-del", diff.suffix);
+    colA.append(preA);
+    const colB = h("div", "kb-eval-detail-col");
+    colB.append(h("div", "kb-eval-detail-label", "\u8F93\u51FA B"));
+    const preB = h("pre", "kb-eval-detail-pre");
+    appendDiffText(preB, diff.prefix, diff.bMid, "kb-eval-diff-ins", diff.suffix);
+    colB.append(preB);
+    detail.append(colA, colB);
+    if (row.expected) {
+      const exp = h("div", "kb-eval-detail-expected");
+      exp.append(h("span", "kb-eval-detail-label", "\u671F\u671B"));
+      exp.append(h("div", "kb-eval-detail-pre", row.expected));
+      detail.append(exp);
+    }
+    const toggle = () => {
+      const open = line.getAttribute("aria-expanded") !== "true";
+      line.setAttribute("aria-expanded", String(open));
+      detail.hidden = !open;
+    };
+    line.addEventListener("click", toggle);
+    line.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      toggle();
+    });
+    item.append(line, detail);
+    items.push({ item, regression });
+    table.append(item);
+  }
+  wrap.append(table);
+  el.append(wrap);
+  if (hasRegression) {
+    const btn = h("button", "kb-eval-filter", "\u4EC5\u770B\u56DE\u5F52");
+    btn.type = "button";
+    btn.setAttribute("aria-pressed", "false");
+    btn.addEventListener("click", () => {
+      filterOn = !filterOn;
+      btn.setAttribute("aria-pressed", String(filterOn));
+      btn.classList.toggle("is-on", filterOn);
+      for (const it of items) it.item.hidden = filterOn && !it.regression;
+    });
+    bar.append(btn);
+  }
+  return el;
+}
+export {
+  renderKbEvalCompare
+};

package/dist/behaviors/kb-explain.d.mts

@@ -0,0 +1,11 @@
+import { KbExplainFact } from './kb-core.js';
+import './ai-core.js';
+
+/**
+ * 渲染口径解释折叠面板（快照式：重复调用整段重建，默认折叠），返回挂载元素 el
+ * （render* 约定；SSR 原样返回）。展开体：表/列/筛选/聚合四组 .kb-chip（有才渲）
+ * + 指标口径行（name + ref 深链）。切换派 icen:kb-explain-toggle {el, open}。
+ */
+declare function renderKbExplain(el: HTMLElement, fact: KbExplainFact | Partial<KbExplainFact>): HTMLElement;
+
+export { renderKbExplain };