niceeval 0.5.4 → 0.6.1

package/src/report/react/enhance.js

@@ -0,0 +1,168 @@
+// niceeval 报告的渐进增强 runtime:纯 vanilla JS、零依赖、IIFE、幂等。
+// 只作用于 .nre DOM 与 data-nre-* 属性;三个行为——表格排序、行过滤、SVG 点 tooltip。
+// 静态 HTML 无 JS 时内容完整可读是硬约束:排序有数据侧预排、tooltip 退化为原生
+// <title>、过滤输入框静默无功能。全部经 document 级事件委托绑定,重复注入本文件
+// 只在首次生效(window.__nreEnhanced 守卫),DOM 被搬动(如 view 把 <template> 内容
+// 摆进报告槽)也无需重新绑定。
+
+(function () {
+  "use strict";
+  if (typeof window === "undefined" || window.__nreEnhanced) return;
+  window.__nreEnhanced = true;
+
+  function closest(target, selector) {
+    return target && target.closest ? target.closest(selector) : null;
+  }
+
+  // ───────────────────────── 排序:th[data-nre-sort] ─────────────────────────
+  // 点击按该列排序 tbody 行(td/th 的 data-sort-value,数值优先、退回字符串;
+  // 空值恒沉底),再点反向;方向指示由 th 上的 nre-sort-asc / nre-sort-desc 类驱动。
+
+  function sortValue(row, index) {
+    var cell = row.cells[index];
+    if (!cell) return "";
+    var v = cell.getAttribute("data-sort-value");
+    return v !== null ? v : cell.textContent.trim();
+  }
+
+  document.addEventListener("click", function (e) {
+    var th = closest(e.target, ".nre table th[data-nre-sort]");
+    if (!th) return;
+    var table = th.closest("table");
+    var tbody = table && table.tBodies[0];
+    if (!tbody) return;
+    var index = Array.prototype.indexOf.call(th.parentNode.children, th);
+    var dir = th.classList.contains("nre-sort-asc") ? "desc" : "asc";
+    var siblings = th.parentNode.querySelectorAll("th[data-nre-sort]");
+    for (var i = 0; i < siblings.length; i++) siblings[i].classList.remove("nre-sort-asc", "nre-sort-desc");
+    th.classList.add(dir === "asc" ? "nre-sort-asc" : "nre-sort-desc");
+
+    var rows = Array.prototype.slice.call(tbody.rows);
+    rows.sort(function (a, b) {
+      var va = sortValue(a, index);
+      var vb = sortValue(b, index);
+      // 空值 = 缺数据:恒沉底,与「缺数据不编 0」同一姿势
+      if (va === "" && vb === "") return 0;
+      if (va === "") return 1;
+      if (vb === "") return -1;
+      var na = Number(va);
+      var nb = Number(vb);
+      var out;
+      if (!isNaN(na) && !isNaN(nb)) out = na - nb;
+      else out = String(va).localeCompare(String(vb));
+      return dir === "asc" ? out : -out;
+    });
+    for (var u = 0; u < rows.length; u++) tbody.appendChild(rows[u]);
+  });
+
+  // ───────────────────────── 过滤:input[data-nre-filter] ─────────────────────────
+  // 对同容器内的表格行做 textContent 匹配,不匹配者加隐藏类(样式在 styles.css)。
+
+  document.addEventListener("input", function (e) {
+    var input = closest(e.target, "input[data-nre-filter]");
+    if (!input) return;
+    var scope = input.parentElement;
+    var table = scope ? scope.querySelector("table") : null;
+    if (!table || !table.tBodies[0]) return;
+    var query = input.value.trim().toLowerCase();
+    var rows = table.tBodies[0].rows;
+    for (var i = 0; i < rows.length; i++) {
+      var row = rows[i];
+      var hide = query !== "" && row.textContent.toLowerCase().indexOf(query) === -1;
+      row.classList.toggle("nre-row-hidden", hide);
+    }
+  });
+
+  // ExperimentList 的 web 面以原生 details 表达「八列主行 + 展开明细」，不是 table/tbody。
+  // 单独按 summary 的列排序、按整条 details 文本过滤；无 JS 时保持数据侧成功率降序。
+  document.addEventListener("click", function (e) {
+    var control = closest(e.target, "[data-nre-experiment-sort]");
+    if (!control) return;
+    var board = control.closest(".nre-experiment-table");
+    if (!board) return;
+    var index = Number(control.getAttribute("data-nre-experiment-sort"));
+    var dir = control.classList.contains("nre-sort-asc") ? "desc" : "asc";
+    var controls = board.querySelectorAll("[data-nre-experiment-sort]");
+    for (var i = 0; i < controls.length; i++) controls[i].classList.remove("nre-sort-asc", "nre-sort-desc");
+    control.classList.add(dir === "asc" ? "nre-sort-asc" : "nre-sort-desc");
+    var entries = Array.prototype.slice.call(board.querySelectorAll(":scope > .nre-experiment-entry"));
+    entries.sort(function (a, b) {
+      var ac = a.querySelector(".nre-experiment-summary").children[index];
+      var bc = b.querySelector(".nre-experiment-summary").children[index];
+      var av = ac ? ac.getAttribute("data-sort-value") || ac.textContent.trim() : "";
+      var bv = bc ? bc.getAttribute("data-sort-value") || bc.textContent.trim() : "";
+      if (av === "" && bv === "") return 0;
+      if (av === "") return 1;
+      if (bv === "") return -1;
+      var an = Number(av), bn = Number(bv);
+      var out = !isNaN(an) && !isNaN(bn) ? an - bn : String(av).localeCompare(String(bv));
+      return dir === "asc" ? out : -out;
+    });
+    for (var j = 0; j < entries.length; j++) board.appendChild(entries[j]);
+  });
+
+  document.addEventListener("input", function (e) {
+    var input = closest(e.target, "input[data-nre-experiment-filter]");
+    if (!input) return;
+    var scope = input.parentElement;
+    var entries = scope ? scope.querySelectorAll(".nre-experiment-entry") : [];
+    var query = input.value.trim().toLowerCase();
+    for (var i = 0; i < entries.length; i++) {
+      entries[i].classList.toggle("nre-row-hidden", query !== "" && entries[i].textContent.toLowerCase().indexOf(query) === -1);
+    }
+  });
+
+  // ───────────────────────── tooltip:.nre-scatter-point / .nre-line-point ─────────────────────────
+  // 首次 hover 时把点内 <title> 的内容搬进 data-nre-title(避免与原生 tooltip 重影),
+  // 渲染样式化 tooltip div(定位在点上方,挂在所属 figure 里)。无 JS 时 <title> 原样生效。
+
+  var tooltip = null;
+
+  function hideTooltip() {
+    if (tooltip && tooltip.parentNode) tooltip.parentNode.removeChild(tooltip);
+    tooltip = null;
+  }
+
+  function tooltipText(point) {
+    var text = point.getAttribute("data-nre-title");
+    if (text === null) {
+      var title = point.querySelector("title");
+      text = title ? title.textContent : "";
+      if (title && title.parentNode) title.parentNode.removeChild(title);
+      point.setAttribute("data-nre-title", text);
+    }
+    return text;
+  }
+
+  document.addEventListener("mouseover", function (e) {
+    var point = closest(e.target, ".nre-scatter-point, .nre-line-point");
+    if (!point) return;
+    var text = tooltipText(point);
+    if (!text) return;
+    var figure = point.closest("figure") || document.body;
+    hideTooltip();
+    tooltip = document.createElement("div");
+    tooltip.className = "nre-tooltip";
+    var lines = text.split("\n");
+    for (var i = 0; i < lines.length; i++) {
+      var line = document.createElement(i === 0 ? "b" : "div");
+      if (i > 0) line.className = "nre-tooltip-meta";
+      line.textContent = lines[i];
+      tooltip.appendChild(line);
+    }
+    if (getComputedStyle(figure).position === "static") figure.style.position = "relative";
+    figure.appendChild(tooltip);
+    var pointBox = point.getBoundingClientRect();
+    var figureBox = figure.getBoundingClientRect();
+    tooltip.style.left = pointBox.left + pointBox.width / 2 - figureBox.left + "px";
+    tooltip.style.top = pointBox.top - figureBox.top + "px";
+  });
+
+  document.addEventListener("mouseout", function (e) {
+    var point = closest(e.target, ".nre-scatter-point, .nre-line-point");
+    if (!point) return;
+    // 移入 tooltip 自身不算离开(pointer-events: none 下 relatedTarget 不会是它,防御性判断)
+    if (e.relatedTarget && point.contains(e.relatedTarget)) return;
+    hideTooltip();
+  });
+})();

package/src/report/react/fixtures.ts

@@ -4,8 +4,11 @@
 // 稀疏矩阵、缺数据的散点、delta 的 null 不硬算、truncated 计数。
 
 import type {
-  CaseListData,
+  AttemptListItem,
   DeltaData,
+  EvalListItem,
+  ExperimentListItem,
+  GroupSummaryData,
   LineData,
   MatrixData,
   MetricColumn,
@@ -14,6 +17,9 @@ import type {
   ScoreboardData,
   TableData,
 } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+
+const locator = (s: string): AttemptLocator => s as AttemptLocator;
 
 export const passRateColumn: MetricColumn = { key: "pass-rate", label: "pass rate", unit: "%", better: "higher" };
 export const codeLinesColumn: MetricColumn = { key: "code-lines", label: "code lines", unit: "lines", better: "lower" };
@@ -31,6 +37,9 @@ export const overviewData: OverviewData = {
     failed: 8,
     errored: 2,
     skipped: 2,
+    // 两级聚合口径(computeCell)刻意不等于 36/(36+8+2)≈78% 的 attempt 原始占比:
+    // 组件必须原样渲染这个字段,不得从上面四个 verdict 计票现场重算。
+    passRate: { value: 0.7, display: "70%", samples: 46, total: 48, refs: [] },
     costUSD: null, // 全部 attempt 都没报成本:null,组件必须显示缺数据而不是 $0
     durationMs: 261_000,
   },
@@ -51,6 +60,19 @@ export const overviewWithCost: OverviewData = {
   warnings: [],
 };
 
+/** GroupSummary.data 的产物形态:eval 级折叠计票 + 旧 GroupSelector 口径的通过率(包成 MetricCell)。 */
+export const groupSummaryData: GroupSummaryData = {
+  experiments: 2,
+  // evals = 全部 verdicts 之和(3+1+1+1=6);passRate 分母只数非 skipped 的 5 道
+  evals: 6,
+  attempts: 9,
+  verdicts: { passed: 3, failed: 1, errored: 1, skipped: 1 },
+  // 3 passed / (3 + 1 + 1) = 60%;samples=ran=5 < total=evals=6:1 道 skipped 未计入分母的覆盖率角标
+  passRate: { value: 0.6, display: "60%", samples: 5, total: 6, refs: [] },
+  totalCostUSD: 1.5,
+  lastRunAt: "2026-07-01T11:30:00Z",
+};
+
 export const tableData: TableData<"pass-rate" | "code-lines"> = {
   dimension: "agent",
   // 行顺序故意不按 passRate 排:组件必须按传入顺序渲染,不重排
@@ -72,7 +94,7 @@ export const tableData: TableData<"pass-rate" | "code-lines"> = {
           display: "87%",
           samples: 6,
           total: 6,
-          refs: [{ run: "run-a", result: 0 }],
+          refs: [locator("@1a0a0a0")],
         },
         // samples < total:有 attempt 测不了 → 覆盖率角标 5/6
         "code-lines": { value: 120, display: "120 lines", samples: 5, total: 6, refs: [] },
@@ -81,6 +103,31 @@ export const tableData: TableData<"pass-rate" | "code-lines"> = {
   ],
 };
 
+/** rows: "experiment" 的榜单形态:行携带 agent/model 元信息与 eval 级折叠计票。 */
+export const tableDataWithMeta: TableData<"pass-rate"> = {
+  dimension: "experiment",
+  columns: [passRateColumn],
+  rows: [
+    {
+      key: "compare/bub",
+      cells: { "pass-rate": { value: 0.5, display: "50%", samples: 2, total: 2, refs: [] } },
+      meta: {
+        agent: "bub",
+        model: "gpt-5.4",
+        verdicts: { passed: 1, failed: 1, errored: 0, skipped: 0 },
+      },
+    },
+    {
+      key: "compare/codex",
+      cells: { "pass-rate": { value: 1, display: "100%", samples: 2, total: 2, refs: [] } },
+      meta: {
+        agent: "codex",
+        verdicts: { passed: 2, failed: 0, errored: 0, skipped: 0 },
+      },
+    },
+  ],
+};
+
 export const matrixData: MatrixData = {
   rows: "eval",
   columns: "agent",
@@ -95,10 +142,7 @@ export const matrixData: MatrixData = {
         display: "100%",
         samples: 2,
         total: 2,
-        refs: [
-          { run: "run-b", result: 3 },
-          { run: "run-b", result: 7 },
-        ],
+        refs: [locator("@1b3b3b3"), locator("@1b7b7b7")],
       },
     },
     {
@@ -264,35 +308,126 @@ export const deltaData: DeltaData<"pass-rate" | "cost"> = {
   ],
 };
 
-export const caseListData: CaseListData = {
-  rows: [
-    {
-      eval: "algebra/quadratic",
-      experimentId: "compare/bub",
-      agent: "bub",
-      outcome: "failed",
-      failedAssertions: [
-        {
-          name: "roots-correct",
-          score: 0,
-          detail: "expected x=2, got x=3",
-          evidence: "judge: sign flipped when substituting into the quadratic formula",
-        },
-      ],
-      durationMs: 32_000,
-      costUSD: 0.12,
-      ref: { run: "run-a", result: 4 },
-    },
+// ───────────────────────── 实体列表(ExperimentList / EvalList / AttemptList)─────────────────────────
+
+/** algebra/quadratic 在 compare/bub 上失败的那次 attempt——两条子失败夹具共用同一条。 */
+const failedAttempt: AttemptListItem = {
+  evalId: "algebra/quadratic",
+  experimentId: "compare/bub",
+  attempt: 3,
+  agent: "bub",
+  verdict: "failed",
+  assertions: [
     {
-      eval: "geometry/angles",
-      experimentId: "compare/codex",
-      agent: "codex",
-      outcome: "errored",
-      error: "TypeError: cannot read properties of undefined (reading 'foo')",
-      failedAssertions: [],
-      durationMs: 4_500,
-      ref: { run: "run-c", result: 1 },
+      name: "roots-correct",
+      severity: "gate",
+      score: 0,
+      passed: false,
+      detail: "expected x=2, got x=3",
+      evidence: "judge: sign flipped when substituting into the quadratic formula",
     },
   ],
-  truncated: 2,
+  durationMs: 32_000,
+  costUSD: 0.12,
+  locator: locator("@1a4a4a4"),
+};
+
+const erroredAttempt: AttemptListItem = {
+  evalId: "geometry/angles",
+  experimentId: "compare/codex",
+  attempt: 0,
+  agent: "codex",
+  verdict: "errored",
+  error: "TypeError: cannot read properties of undefined (reading 'foo')",
+  assertions: [],
+  durationMs: 4_500,
+  locator: locator("@1c1c1c1"),
 };
+
+const failedRetryAttempt: AttemptListItem = {
+  ...failedAttempt,
+  attempt: 4,
+  durationMs: 35_000,
+  locator: locator("@1b5b5b5"),
+};
+
+export const attemptListItems: AttemptListItem[] = [failedAttempt, erroredAttempt];
+
+export const evalListItems: EvalListItem[] = [
+  {
+    evalId: "algebra/quadratic",
+    experimentId: "compare/bub",
+    verdict: "failed",
+    reason: "roots-correct: expected x=2, got x=3",
+    score: { value: 0, display: "0%", samples: 1, total: 1, refs: [failedAttempt.locator] },
+    duration: { value: 32_000, display: "32.0s", samples: 1, total: 1, refs: [failedAttempt.locator] },
+    cost: { value: 0.12, display: "$0.12", samples: 1, total: 1, refs: [failedAttempt.locator] },
+    attempts: [failedAttempt],
+  },
+  {
+    evalId: "geometry/angles",
+    experimentId: "compare/codex",
+    verdict: "errored",
+    reason: erroredAttempt.error,
+    score: { value: 0, display: "0%", samples: 1, total: 1, refs: [erroredAttempt.locator] },
+    duration: { value: 4_500, display: "4.5s", samples: 1, total: 1, refs: [erroredAttempt.locator] },
+    cost: { value: null, display: "—", samples: 0, total: 1, refs: [] },
+    attempts: [erroredAttempt],
+  },
+];
+
+export const experimentListItems: ExperimentListItem[] = [
+  {
+    experimentId: "compare/bub",
+    agent: "bub",
+    model: "gpt-5.4",
+    flags: { memory: true },
+    verdicts: { passed: 1, failed: 1, errored: 0, skipped: 0 },
+    passRate: { value: 0.5, display: "50%", samples: 2, total: 2, refs: [] },
+    cost: { value: 0.12, display: "$0.12", samples: 1, total: 2, refs: [failedAttempt.locator] },
+    duration: { value: 32_000, display: "32.0s", samples: 2, total: 2, refs: [] },
+    tokens: { value: null, display: "—", samples: 0, total: 2, refs: [] },
+    evals: 2,
+    attempts: 3,
+    lastRunAt: "2026-07-01T10:00:00Z",
+    evalRows: [
+      {
+        evalId: "algebra/quadratic",
+        verdict: "failed",
+        reason: "roots-correct: expected x=2, got x=3",
+        duration: { value: 32_000, display: "32.0s", samples: 1, total: 1, refs: [failedAttempt.locator] },
+        cost: { value: 0.12, display: "$0.12", samples: 1, total: 1, refs: [failedAttempt.locator] },
+        attempts: [failedAttempt, failedRetryAttempt],
+      },
+      {
+        evalId: "algebra/simple",
+        verdict: "passed",
+        duration: { value: 5_000, display: "5.0s", samples: 1, total: 1, refs: [] },
+        cost: { value: 0.02, display: "$0.02", samples: 1, total: 1, refs: [] },
+        attempts: [],
+      },
+    ],
+  },
+  {
+    experimentId: "compare/codex",
+    agent: "codex",
+    verdicts: { passed: 0, failed: 0, errored: 1, skipped: 0 },
+    passRate: { value: 0, display: "0%", samples: 1, total: 1, refs: [] },
+    cost: { value: null, display: "—", samples: 0, total: 1, refs: [] },
+    duration: { value: 4_500, display: "4.5s", samples: 1, total: 1, refs: [] },
+    tokens: { value: null, display: "—", samples: 0, total: 1, refs: [] },
+    evals: 1,
+    attempts: 1,
+    lastRunAt: "2026-07-01T11:30:00Z",
+    evalRows: [
+      {
+        evalId: "geometry/angles",
+        verdict: "errored",
+        reason: erroredAttempt.error,
+        duration: { value: 4_500, display: "4.5s", samples: 1, total: 1, refs: [erroredAttempt.locator] },
+        cost: { value: null, display: "—", samples: 0, total: 1, refs: [] },
+        attempts: [erroredAttempt],
+      },
+    ],
+  },
+];

package/src/report/react/format.ts

@@ -1,7 +1,7 @@
 // web 面的小工具:展示格式化统一住在计算侧的 ../format.ts(两个渲染面同一份),
 // 这里 re-export 并补 class 名拼接。MetricCell 一律自带 display,组件不重算。
 
-export { MISSING_TEXT, formatDurationMs, formatPercent, formatUSD } from "../format.ts";
+export { MISSING_TEXT, formatDurationMs, formatPercent, formatUSD, verdictMark } from "../format.ts";
 
 /** 拼 class 名:过滤空值,末尾接使用者透传的 className。 */
 export function cx(...parts: (string | undefined | false)[]): string {

package/src/report/react/index.tsx

@@ -9,8 +9,11 @@
 //   - 跨块配色一致:维度键 → 稳定散列 → 固定调色板下标(colors.ts)。
 
 export {
-  CaseList,
+  AttemptList,
   DeltaTable,
+  EvalList,
+  ExperimentList,
+  GroupSummary,
   MetricBars,
   MetricLine,
   MetricMatrix,
@@ -20,8 +23,11 @@ export {
   Scoreboard,
 } from "../components.tsx";
 export type {
-  CaseListProps,
+  AttemptListProps,
   DeltaTableProps,
+  EvalListProps,
+  ExperimentListProps,
+  GroupSummaryProps,
   MetricLineProps,
   MetricMatrixProps,
   MetricScatterProps,
@@ -32,9 +38,13 @@ export type {
 
 // 数据契约类型(家在 ../types.ts,「算」与「画」两侧共用同一份)
 export type {
-  AttemptRef,
-  CaseListData,
+  AttemptListItem,
+  AttemptLocator,
   DeltaData,
+  EvalListItem,
+  ExperimentListEvalRow,
+  ExperimentListItem,
+  GroupSummaryData,
   LineAxis,
   LineData,
   MatrixData,
@@ -45,7 +55,12 @@ export type {
   ScoreboardData,
   SelectionWarning,
   TableData,
+  TableRowMeta,
 } from "../types.ts";
 
-// 稳定配色(自定义组件想与官方组件同键同色时用)
-export { NRE_PALETTE, colorClassForKey, colorHexForKey, colorIndexForKey } from "./colors.ts";
+// locale(官方组件 chrome 文案;指标 label 的按 locale 字典也用它解析)
+export { DEFAULT_REPORT_LOCALE, resolveMetricLabel } from "../locale.ts";
+export type { LocalizedLabel, ReportLocale } from "../locale.ts";
+
+// 稳定配色(自定义组件想与官方组件同键同色时用;seriesClassForKey 配 CSS 的 --nre-series)
+export { NRE_PALETTE, colorClassForKey, colorHexForKey, colorIndexForKey, seriesClassForKey } from "./colors.ts";