niceeval 0.6.0 → 0.6.2

package/src/report/react/enhance.js

@@ -1,5 +1,5 @@
 // niceeval 报告的渐进增强 runtime:纯 vanilla JS、零依赖、IIFE、幂等。
-// 只作用于 .nre DOM 与 data-nre-* 属性;三个行为——表格排序、行过滤、SVG 点 tooltip。
+// 只作用于 .nre DOM 与 data-nre-* 属性;四个行为——实验组切换、表格排序、行过滤、SVG 点 tooltip。
 // 静态 HTML 无 JS 时内容完整可读是硬约束:排序有数据侧预排、tooltip 退化为原生
 // <title>、过滤输入框静默无功能。全部经 document 级事件委托绑定,重复注入本文件
 // 只在首次生效(window.__nreEnhanced 守卫),DOM 被搬动(如 view 把 <template> 内容
@@ -14,6 +14,38 @@
     return target && target.closest ? target.closest(selector) : null;
   }
 
+  // ───────────────────────── 实验组:[data-nre-experiment-group-select] ─────────────────────────
+  // 数据侧已经把每组的摘要、散点和列表分别算好；这里仅在同一报告节点内切换 <details>，
+  // 不重新请求、不重算，也不触碰 Runs / Traces / Attempt 证据室。
+
+  function selectExperimentGroup(control) {
+    var root = control.closest("[data-nre-experiment-groups]");
+    if (!root) return;
+    var selected = control.getAttribute("data-nre-experiment-group-select");
+    var controls = root.querySelectorAll("[data-nre-experiment-group-select]");
+    var panels = root.querySelectorAll("[data-nre-experiment-group-panel]");
+    for (var i = 0; i < controls.length; i++) {
+      var active = controls[i].getAttribute("data-nre-experiment-group-select") === selected;
+      controls[i].setAttribute("aria-selected", active ? "true" : "false");
+      controls[i].tabIndex = active ? 0 : -1;
+    }
+    for (var j = 0; j < panels.length; j++) {
+      panels[j].open = panels[j].getAttribute("data-nre-experiment-group-panel") === selected;
+    }
+  }
+
+  document.addEventListener("click", function (e) {
+    var control = closest(e.target, "[data-nre-experiment-group-select]");
+    if (control) selectExperimentGroup(control);
+  });
+
+  document.addEventListener("keydown", function (e) {
+    var control = closest(e.target, "[data-nre-experiment-group-select]");
+    if (!control || (e.key !== "Enter" && e.key !== " ")) return;
+    e.preventDefault();
+    selectExperimentGroup(control);
+  });
+
   // ───────────────────────── 排序:th[data-nre-sort] ─────────────────────────
   // 点击按该列排序 tbody 行(td/th 的 data-sort-value,数值优先、退回字符串;
   // 空值恒沉底),再点反向;方向指示由 th 上的 nre-sort-asc / nre-sort-desc 类驱动。
@@ -73,6 +105,45 @@
     }
   });
 
+  // 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> 原样生效。

package/src/report/react/fixtures.ts

@@ -21,7 +21,7 @@ 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 passRateColumn: MetricColumn = { key: "task-pass-rate", label: "pass rate", unit: "%", better: "higher" };
 export const codeLinesColumn: MetricColumn = { key: "code-lines", label: "code lines", unit: "lines", better: "lower" };
 export const costColumn: MetricColumn = { key: "cost", label: "cost", unit: "$", better: "lower" };
 
@@ -73,7 +73,7 @@ export const groupSummaryData: GroupSummaryData = {
   lastRunAt: "2026-07-01T11:30:00Z",
 };
 
-export const tableData: TableData<"pass-rate" | "code-lines"> = {
+export const tableData: TableData<"task-pass-rate" | "code-lines"> = {
   dimension: "agent",
   // 行顺序故意不按 passRate 排:组件必须按传入顺序渲染,不重排
   columns: [passRateColumn, codeLinesColumn],
@@ -81,7 +81,7 @@ export const tableData: TableData<"pass-rate" | "code-lines"> = {
     {
       key: "codex",
       cells: {
-        "pass-rate": { value: 0.5, display: "50%", samples: 6, total: 6, refs: [] },
+        "task-pass-rate": { value: 0.5, display: "50%", samples: 6, total: 6, refs: [] },
         // 全 null:一个有效样本都没有 → 缺数据文案,绝不画 0
         "code-lines": { value: null, display: "—", samples: 0, total: 6, refs: [] },
       },
@@ -89,7 +89,7 @@ export const tableData: TableData<"pass-rate" | "code-lines"> = {
     {
       key: "bub",
       cells: {
-        "pass-rate": {
+        "task-pass-rate": {
           value: 0.87,
           display: "87%",
           samples: 6,
@@ -104,13 +104,13 @@ export const tableData: TableData<"pass-rate" | "code-lines"> = {
 };
 
 /** rows: "experiment" 的榜单形态:行携带 agent/model 元信息与 eval 级折叠计票。 */
-export const tableDataWithMeta: TableData<"pass-rate"> = {
+export const tableDataWithMeta: TableData<"task-pass-rate"> = {
   dimension: "experiment",
   columns: [passRateColumn],
   rows: [
     {
       key: "compare/bub",
-      cells: { "pass-rate": { value: 0.5, display: "50%", samples: 2, total: 2, refs: [] } },
+      cells: { "task-pass-rate": { value: 0.5, display: "50%", samples: 2, total: 2, refs: [] } },
       meta: {
         agent: "bub",
         model: "gpt-5.4",
@@ -119,7 +119,7 @@ export const tableDataWithMeta: TableData<"pass-rate"> = {
     },
     {
       key: "compare/codex",
-      cells: { "pass-rate": { value: 1, display: "100%", samples: 2, total: 2, refs: [] } },
+      cells: { "task-pass-rate": { value: 1, display: "100%", samples: 2, total: 2, refs: [] } },
       meta: {
         agent: "codex",
         verdicts: { passed: 2, failed: 0, errored: 0, skipped: 0 },
@@ -261,7 +261,7 @@ export const lineData: LineData = {
   ],
 };
 
-export const deltaData: DeltaData<"pass-rate" | "cost"> = {
+export const deltaData: DeltaData<"task-pass-rate" | "cost"> = {
   columns: [passRateColumn, costColumn],
   rows: [
     {
@@ -270,7 +270,7 @@ export const deltaData: DeltaData<"pass-rate" | "cost"> = {
       b: { experimentId: "compare/bub--agents-md" },
       cells: {
         // 通过率 +12pp:better higher → 好(绿)
-        "pass-rate": {
+        "task-pass-rate": {
           a: { value: 0.5, display: "50%", samples: 6, total: 6, refs: [] },
           b: { value: 0.62, display: "62%", samples: 6, total: 6, refs: [] },
           delta: 0.12,
@@ -290,7 +290,7 @@ export const deltaData: DeltaData<"pass-rate" | "cost"> = {
       a: { experimentId: "compare/codex" },
       b: { experimentId: "compare/codex--agents-md" },
       cells: {
-        "pass-rate": {
+        "task-pass-rate": {
           a: { value: 0.4, display: "40%", samples: 6, total: 6, refs: [] },
           b: { value: 0.4, display: "40%", samples: 6, total: 6, refs: [] },
           delta: 0,
@@ -322,15 +322,15 @@ const failedAttempt: AttemptListItem = {
       name: "roots-correct",
       severity: "gate",
       score: 0,
-      passed: false,
-      detail: "expected x=2, got x=3",
+      outcome: "failed" as const,
+      expected: "x=2",
+      received: "x=3",
       evidence: "judge: sign flipped when substituting into the quadratic formula",
     },
   ],
   durationMs: 32_000,
   costUSD: 0.12,
   locator: locator("@1a4a4a4"),
-  capabilities: { eval: true, execution: true, timing: true, diff: false },
 };
 
 const erroredAttempt: AttemptListItem = {
@@ -339,11 +339,27 @@ const erroredAttempt: AttemptListItem = {
   attempt: 0,
   agent: "codex",
   verdict: "errored",
-  error: "TypeError: cannot read properties of undefined (reading 'foo')",
+  // 结构化 error:列表只渲染 message 一层摘要;cause/stack 与 diagnostics 是下钻详情,随数据携带
+  error: {
+    code: "unexpected-error",
+    message: "TypeError: cannot read properties of undefined (reading 'foo')",
+    phase: "eval.run",
+    stack: "TypeError: cannot read properties of undefined (reading 'foo')\n    at run (adapter.ts:42:7)",
+    cause: { name: "TypeError", message: "cannot read properties of undefined (reading 'foo')" },
+  },
+  diagnostics: [
+    { code: "sandbox-teardown-failed", level: "warning", message: "sandbox teardown timed out", phase: "sandbox.teardown" },
+  ],
   assertions: [],
   durationMs: 4_500,
   locator: locator("@1c1c1c1"),
-  capabilities: { eval: false, execution: true, timing: false, diff: false },
+};
+
+const failedRetryAttempt: AttemptListItem = {
+  ...failedAttempt,
+  attempt: 4,
+  durationMs: 35_000,
+  locator: locator("@1b5b5b5"),
 };
 
 export const attemptListItems: AttemptListItem[] = [failedAttempt, erroredAttempt];
@@ -353,7 +369,6 @@ 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] },
@@ -363,7 +378,6 @@ export const evalListItems: EvalListItem[] = [
     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: [] },
@@ -376,22 +390,22 @@ 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: 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],
+        attempts: [failedAttempt, failedRetryAttempt],
       },
       {
         evalId: "algebra/simple",
@@ -417,7 +431,6 @@ export const experimentListItems: ExperimentListItem[] = [
       {
         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, capabilityBadge, formatDurationMs, formatPercent, formatUSD, verdictMark } 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

@@ -38,7 +38,6 @@ export type {
 
 // 数据契约类型(家在 ../types.ts,「算」与「画」两侧共用同一份)
 export type {
-  AttemptEvidenceCapabilities,
   AttemptListItem,
   AttemptLocator,
   DeltaData,

package/src/report/react/render.test.tsx

@@ -1,11 +1,9 @@
+// cases: docs/engineering/unit-tests/reports/cases.md
 // 「不 hydrate 也完整」的验收测试:每个组件过 renderToStaticMarkup,
 // 断言纯静态 HTML 里就有全部关键内容——数字、覆盖率角标、缺数据文案、
 // 散点的 SVG 与系列名、truncated 行、attemptHref 链接。
-// 另外锁两条契约:源码零 hooks;维度键跨组件同色。
+// 另外锁一条契约:维度键跨组件同色。
 
-import { readFileSync, readdirSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 import type { AttemptLocator } from "../../results/locator.ts";
@@ -72,12 +70,6 @@ describe("RunOverview", () => {
 describe("MetricTable", () => {
   const html = renderToStaticMarkup(<MetricTable data={tableData} attemptHref={attemptHref} />);
 
-  it("按传入顺序渲染行,不重排(排序在数据侧)", () => {
-    // fixture 里 codex(50%)在 bub(87%)前面,输出必须保持
-    expect(html.indexOf(">codex<")).toBeGreaterThan(-1);
-    expect(html.indexOf(">codex<")).toBeLessThan(html.indexOf(">bub<"));
-  });
-
   it("列头带 label、unit 与 better 方向", () => {
     expect(html).toContain("pass rate");
     expect(html).toContain("(%)");
@@ -157,21 +149,12 @@ describe("MetricMatrix", () => {
     expect(html).toContain("eval × agent");
   });
 
-  it("稀疏格子:没有样本的格子空着(恰好一个)", () => {
-    expect(html.match(/nre-td-empty/g)).toHaveLength(1);
-  });
-
   it("格子数字与 refs 下钻链接", () => {
     expect(html).toContain("100%");
     expect(html).toContain("0%");
     expect(html).toContain('href="/attempts/@1b3b3b3"');
     expect(html).toContain('href="/attempts/@1b7b7b7"');
   });
-
-  it("列头(维度键)带稳定散列配色 class", () => {
-    expect(html).toContain(colorClassForKey("bub"));
-    expect(html).toContain(colorClassForKey("codex"));
-  });
 });
 
 describe("Scoreboard", () => {
@@ -243,11 +226,6 @@ describe("MetricScatter", () => {
     expect(html).toContain(">codex-mid</text>");
   });
 
-  it("null 点不画,底部注脚如实报数", () => {
-    expect(html).not.toContain('data-key="compare/codex-broken"');
-    expect(html).toContain("1 point missing data");
-  });
-
   it("hover 退化为 <title>:display 与 samples/total", () => {
     expect(html).toContain("<title>");
     expect(html).toContain("50%(6/6)");
@@ -271,7 +249,7 @@ describe("MetricScatter", () => {
     expect(empty).toContain("4 points missing data");
   });
 
-  it("恰好 1 个可画点:比较至少要两个实验,不画孤点图", () => {
+  it("恰好 1 个可画点:照常画出单点", () => {
     const single = renderToStaticMarkup(
       <MetricScatter
         data={{
@@ -281,8 +259,8 @@ describe("MetricScatter", () => {
         }}
       />,
     );
-    expect(single).not.toContain("<svg");
-    expect(single).toContain("At least 2 experiments needed to compare");
+    expect(single).toContain("<svg");
+    expect(single).toContain("nre-scatter-point");
   });
 });
 
@@ -304,11 +282,6 @@ describe("DeltaTable", () => {
     expect(html).toContain("nre-delta-flat");
   });
 
-  it("任一侧缺数据:Δ 显示为缺,不硬算", () => {
-    expect(html).toContain("nre-delta-missing");
-    expect(html).toContain("no data");
-  });
-
   it("每行标出 A → B 的 experimentId", () => {
     expect(html).toContain("compare/bub → compare/bub--agents-md");
   });
@@ -322,14 +295,11 @@ describe("DeltaTable", () => {
 describe("AttemptList", () => {
   const html = renderToStaticMarkup(<AttemptList items={attemptListItems} />);
 
-  it("逐条断言:name、score、detail、evidence", () => {
+  it("只显示一条主失败摘要，不内联完整 evidence", () => {
     expect(html).toContain("roots-correct");
-    expect(html).toContain("expected x=2, got x=3");
-    expect(html).toContain("judge: sign flipped when substituting into the quadratic formula");
-  });
-
-  it("errored 的 error 摘要", () => {
-    expect(html).toContain("TypeError: cannot read properties of undefined");
+    expect(html).toContain("expected x=2");
+    expect(html).toContain("received x=3");
+    expect(html).not.toContain("judge: sign flipped when substituting into the quadratic formula");
   });
 
   it("total > items.length 时如实报「还有 n 条没列」", () => {
@@ -339,28 +309,14 @@ describe("AttemptList", () => {
     expect(html).not.toContain("more not shown");
   });
 
-  it("每条 attempt 带 locator + 默认证据室深链 + 证据能力标记", () => {
-    expect(html).toContain('href="#/attempt/@1a4a4a4"');
-    expect(html).toContain('href="#/attempt/@1c1c1c1"');
-    expect(html).toContain("[E,X,⏱]"); // failedAttempt: eval + execution + timing
-  });
-
-  it("长文本(evidence)收进 <details>,零 JS 可展开", () => {
-    expect(html).toContain("<details");
-    expect(html).toContain("<summary>");
+  it("AttemptList 自身不展开断言详情", () => {
+    expect(html).not.toContain("<details");
   });
 });
 
 describe("EvalList", () => {
   const html = renderToStaticMarkup(<EvalList items={evalListItems} />);
 
-  it("每项一个 experimentId + evalId,判定与分数在场", () => {
-    expect(html).toContain("algebra/quadratic");
-    expect(html).toContain("geometry/angles");
-    expect(html).toContain("compare/bub");
-    expect(html).toContain("compare/codex");
-  });
-
   it("展开到这道题的 Attempt(与 AttemptList 同一套 AttemptRow 渲染)", () => {
     expect(html).toContain('href="#/attempt/@1a4a4a4"');
     expect(html).toContain("roots-correct");
@@ -373,18 +329,34 @@ describe("EvalList", () => {
 });
 
 describe("ExperimentList", () => {
-  const html = renderToStaticMarkup(<ExperimentList items={experimentListItems} />);
+  const html = renderToStaticMarkup(<ExperimentList items={experimentListItems} filter />);
+
+  it("web 面是带过滤框与八个固定列头的 experiment 比较表", () => {
+    expect(html).toContain('data-nre-experiment-filter=""');
+    for (const header of ["Experiment", "Model", "Agent", "Avg duration", "End-to-end pass rate", "Tokens", "Est. cost", "Result"]) {
+      expect(html).toContain(`>${header}</button>`);
+    }
+    expect(html).toContain('data-nre-experiment-sort="4" class="nre-sort-desc"');
+  });
 
-  it("主行:身份、agent/model、官方两级聚合指标", () => {
+  it("主行:身份、agent/model、官方两级聚合指标与判定构成", () => {
     expect(html).toContain("compare/bub");
     expect(html).toContain("compare/codex");
     expect(html).toContain("gpt-5.4");
     expect(html).toContain("50%"); // passRate.display
+    expect(html).toContain("1 passed / 1 failed");
+    expect(html).toContain("memory=true");
   });
 
-  it("展开到 Eval:判定符 + 该题 Attempt 的 locator 徽标内联", () => {
+  it("展开到 Eval:同一道题的全部 Attempt 逐条显示", () => {
     expect(html).toContain("algebra/quadratic");
     expect(html).toContain('href="#/attempt/@1a4a4a4"');
+    expect(html).toContain('href="#/attempt/@1b5b5b5"');
+    expect(html.match(/algebra\/quadratic/g)).toHaveLength(1);
+    expect(html).toContain("nre-experiment-eval-header");
+    expect(html.match(/nre-experiment-attempt-row/g)).toHaveLength(3);
+    expect(html).toContain("├─");
+    expect(html).toContain("└─");
   });
 
   it("零 JS 靠原生 <details>,无 <script>", () => {
@@ -422,15 +394,4 @@ describe("跨组件契约", () => {
     ].join("");
     expect(all).not.toContain("<script");
   });
-
-  it("组件源码零 hooks(本实验的「不 hydrate 也完整」用最笨的方式保证)", () => {
-    const dir = dirname(fileURLToPath(import.meta.url));
-    const sources = readdirSync(dir)
-      .filter((f) => (f.endsWith(".tsx") || f.endsWith(".ts")) && !f.includes(".test."))
-      .map((f) => readFileSync(join(dir, f), "utf8"));
-    expect(sources.length).toBeGreaterThanOrEqual(12);
-    for (const src of sources) {
-      expect(src).not.toMatch(/\buse[A-Z][A-Za-z]*\s*\(/);
-    }
-  });
 });

package/src/report/react/styles.css

@@ -42,7 +42,7 @@
   margin: 1rem 0;
 }
 
-/* ---- 判定符与证据能力徽标:AttemptList / EvalList / ExperimentList 共用的最小单元 ---- */
+/* ---- locator 与判定符:AttemptList / EvalList / ExperimentList 共用的最小单元 ---- */
 .nre .nre-locator { display:inline-flex; align-items:center; gap:4px; color:var(--nre-c0); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
 .nre .nre-locator:hover { text-decoration:underline; }
 .nre .nre-locator-mark { font-weight:700; }
@@ -50,7 +50,6 @@
 .nre .nre-locator.nre-verdict-failed .nre-locator-mark,
 .nre .nre-locator.nre-verdict-errored .nre-locator-mark { color:var(--bad); }
 .nre .nre-locator.nre-verdict-skipped .nre-locator-mark { color:var(--soft); }
-.nre .nre-locator-caps { color:var(--muted); font-size:.85em; }
 
 /* ---- AttemptList:实体列表的叶子层,一条卡片一个 Attempt ---- */
 .nre-attempt-list .nre-attempts { list-style:none; margin:0; padding:0; }
@@ -62,6 +61,7 @@
 .nre-attempt-list .nre-attempt-experiment,
 .nre-attempt-list .nre-attempt-duration,
 .nre-attempt-list .nre-attempt-cost { color:var(--muted); font-size:.9em; font-variant-numeric:tabular-nums; }
+.nre-attempt-list .nre-attempt-result { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:.4rem 0 0; color:color-mix(in oklch,var(--muted),var(--text) 12%); overflow-wrap:anywhere; }
 .nre-attempt-list .nre-attempt-error { margin:.4rem 0 0; padding:6px 10px; border:1px solid color-mix(in oklch,var(--bad),var(--line) 50%); border-radius:7px; background:color-mix(in oklch,var(--bad),var(--panel) 92%); color:var(--bad); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; white-space:pre-wrap; word-break:break-word; }
 .nre-attempt-list .nre-assertions { list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:6px; }
 .nre-attempt-list .nre-assertion { padding-left:.25rem; }
@@ -76,6 +76,77 @@
 .nre-attempt-list .nre-truncated { color:var(--warn); font-size:.9em; }
 .nre-attempt-list .nre-attempt-list-empty { border:1px dashed var(--line-strong); border-radius:8px; padding:18px; color:var(--muted); text-align:center; background:var(--panel); }
 
+/* ---- ExperimentComparison:完整组索引 + 当前组独立 panel ---- */
+.nre-experiment-comparison .nre-experiment-group-tabs {
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
+  gap:12px;
+  margin-bottom:20px;
+}
+.nre-experiment-comparison .nre-experiment-group-tab {
+  min-width:0;
+  border:1px solid var(--line);
+  border-radius:9px;
+  padding:14px 16px 8px;
+  background:var(--panel);
+  cursor:pointer;
+  transition:border-color .12s,background .12s;
+}
+.nre-experiment-comparison .nre-experiment-group-tab:hover {
+  border-color:var(--line-strong);
+  background:color-mix(in oklch,var(--panel-2),var(--panel) 35%);
+}
+.nre-experiment-comparison .nre-experiment-group-tab:focus-visible {
+  outline:2px solid var(--nre-c0);
+  outline-offset:2px;
+}
+.nre-experiment-comparison .nre-experiment-group-tab[aria-selected="true"] {
+  border-color:var(--nre-c0);
+  box-shadow:inset 3px 0 0 var(--nre-c0);
+}
+.nre-experiment-comparison .nre-experiment-group-name {
+  display:block;
+  margin-bottom:10px;
+  color:var(--text);
+  font-size:15px;
+  overflow-wrap:anywhere;
+}
+.nre-experiment-comparison .nre-experiment-group-tab .nre-group-kpis {
+  column-gap:16px;
+}
+.nre-experiment-comparison .nre-experiment-group-tab .nre-group-kpi {
+  min-width:58px;
+}
+.nre-experiment-comparison .nre-experiment-group-panel {
+  border:1px solid var(--line);
+  border-radius:9px;
+  padding:16px;
+  background:var(--panel);
+}
+.nre-experiment-comparison .nre-experiment-group-panel > summary {
+  cursor:pointer;
+  font-size:16px;
+  font-weight:700;
+  overflow-wrap:anywhere;
+}
+.nre-experiment-comparison .nre-experiment-group-panel[open] > summary {
+  margin-bottom:16px;
+}
+.nre-experiment-comparison .nre-experiment-group-panel > .nre {
+  margin:0 0 18px;
+}
+.nre-experiment-comparison .nre-experiment-group-panel > .nre:last-child {
+  margin-bottom:0;
+}
+.nre-experiment-comparison .nre-experiment-groups-empty {
+  border:1px dashed var(--line-strong);
+  border-radius:8px;
+  padding:18px;
+  color:var(--muted);
+  text-align:center;
+  background:var(--panel);
+}
+
 /* ---- EvalList:实体列表的第二级,一条 <details> 一个 experimentId × evalId ---- */
 .nre-eval-list .nre-evals { list-style:none; margin:0; padding:0; }
 .nre-eval-list .nre-eval { border-bottom:1px solid var(--line); }
@@ -89,29 +160,56 @@
 .nre-eval-list .nre-eval-attempts-count,
 .nre-eval-list .nre-eval-duration,
 .nre-eval-list .nre-eval-cost { color:var(--muted); font-size:.9em; font-variant-numeric:tabular-nums; }
-.nre-eval-list .nre-eval-reason { color:color-mix(in oklch,var(--muted),var(--text) 6%); }
 .nre-eval-list .nre-attempts { list-style:none; margin:0 0 12px; padding:0 0 0 20px; border-left:2px solid color-mix(in oklch,var(--nre-c0),transparent 55%); }
 .nre-eval-list .nre-eval-list-empty { border:1px dashed var(--line-strong); border-radius:8px; padding:18px; color:var(--muted); text-align:center; background:var(--panel); }
 
-/* ---- ExperimentList:实体列表的第一级,一条 <details> 一个 experiment ---- */
-.nre-experiment-list .nre-experiments { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel); }
+/* ---- ExperimentList:web 面固定八列比较表,一条 <details> 一个 experiment ---- */
+.nre-experiment-table { border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel); }
+.nre-experiment-head,
+.nre-experiment-summary { display:grid; grid-template-columns:minmax(220px,1.25fr) minmax(120px,.8fr) minmax(90px,.6fr) minmax(100px,.65fr) minmax(90px,.55fr) minmax(110px,.7fr) minmax(90px,.6fr) minmax(160px,.9fr); column-gap:16px; align-items:center; }
+.nre-experiment-head { padding:12px 20px; color:var(--muted); font-size:12px; font-weight:560; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
+.nre-experiment-head button { appearance:none; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; text-align:left; cursor:pointer; }
+.nre-experiment-head button::after { content:"↕"; margin-left:6px; color:var(--soft); font-size:11px; }
+.nre-experiment-head button.nre-sort-asc::after { content:"↑"; color:var(--text); }
+.nre-experiment-head button.nre-sort-desc::after { content:"↓"; color:var(--text); }
+.nre-experiment-table-wrap > .nre-filter { height:34px; min-width:260px; margin-bottom:16px; border:1px solid var(--line); border-radius:7px; padding:0 11px; background:var(--panel); color:var(--text); font:inherit; }
 .nre-experiment-list .nre-experiment-entry { border-bottom:1px solid var(--line); }
 .nre-experiment-list .nre-experiment-entry:last-child { border-bottom:0; }
-.nre-experiment-list .nre-experiment-summary { display:flex; flex-wrap:wrap; gap:.9em; align-items:baseline; padding:13px 20px; cursor:pointer; list-style:none; }
+.nre-experiment-list .nre-experiment-summary { padding:13px 20px; cursor:pointer; list-style:none; transition:background .12s; }
 .nre-experiment-list .nre-experiment-summary::-webkit-details-marker { display:none; }
 .nre-experiment-list .nre-experiment-summary:hover { background:color-mix(in oklch,var(--panel-2),var(--panel) 25%); }
-.nre-experiment-list .nre-experiment-id { font-weight:650; overflow-wrap:anywhere; }
-.nre-experiment-list .nre-experiment-agent,
-.nre-experiment-list .nre-experiment-model { color:var(--muted); font-size:.9em; }
-.nre-experiment-list .nre-experiment-cell { font-variant-numeric:tabular-nums; }
-.nre-experiment-list .nre-experiment-meta-sub { flex-basis:100%; color:var(--soft); font-size:12px; }
-.nre-experiment-list .nre-experiment-evals { list-style:none; margin:0; padding:8px 20px 16px; display:grid; gap:6px; background:color-mix(in oklch,var(--panel-2),var(--panel) 24%); }
-.nre-experiment-list .nre-experiment-eval-row { display:flex; flex-wrap:wrap; gap:.6em; align-items:baseline; font-size:13px; }
+.nre-experiment-list .nre-experiment-summary > span { min-width:0; }
+.nre-experiment-list .nre-experiment-name { position:relative; padding-left:30px; }
+.nre-experiment-list .nre-experiment-name::before { content:""; position:absolute; left:5px; top:6px; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); transition:transform .15s; }
+.nre-experiment-list .nre-experiment-entry[open] .nre-experiment-name::before { transform:rotate(45deg); }
+.nre-experiment-list .nre-experiment-id { display:block; overflow-wrap:anywhere; font-weight:650; }
+.nre-experiment-list .nre-experiment-name small { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:400; }
+.nre-experiment-list .nre-num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; white-space:nowrap; }
+.nre-experiment-list .nre-good { color:var(--good); }
+.nre-experiment-list .nre-warn { color:var(--warn); }
+.nre-experiment-list .nre-bad { color:var(--bad); }
+.nre-experiment-list .nre-experiment-pill { display:inline-flex; min-height:22px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:0 8px; color:var(--muted); font-size:12px; white-space:nowrap; }
+.nre-experiment-list .nre-experiment-detail { padding:18px 30px 22px; background:color-mix(in oklch,var(--panel-2),var(--panel) 24%); border-top:1px solid var(--line); }
+.nre-experiment-list .nre-experiment-flags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; color:var(--soft); font-size:12px; }
+.nre-experiment-list .nre-experiment-flags b { border:1px solid color-mix(in oklch,var(--line),transparent 16%); border-radius:999px; padding:3px 8px; color:var(--text); font-weight:560; }
+.nre-experiment-list .nre-experiment-evals { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
+.nre-experiment-list .nre-experiment-eval,
+.nre-experiment-list .nre-experiment-attempts { list-style:none; margin:0; padding:0; }
+.nre-experiment-list .nre-experiment-eval { padding:4px 0 9px; border-bottom:1px solid color-mix(in oklch,var(--line),transparent 28%); }
+.nre-experiment-list .nre-experiment-eval:last-child { border-bottom:0; }
+.nre-experiment-list .nre-experiment-eval-header,
+.nre-experiment-list .nre-experiment-attempt-row { display:grid; grid-template-columns:20px minmax(220px,1fr) minmax(150px,.7fr) minmax(260px,1fr); column-gap:12px; align-items:baseline; font-size:13px; }
+.nre-experiment-list .nre-experiment-eval-header { padding:7px 0 5px; }
+.nre-experiment-list .nre-experiment-attempt-row { padding:5px 0 5px 20px; color:var(--muted); }
 .nre-experiment-list .nre-eval-id { font-weight:560; overflow-wrap:anywhere; }
+.nre-experiment-list .nre-eval-attempt-count { color:var(--soft); font-size:12px; }
+.nre-experiment-list .nre-eval-rollup { color:var(--muted); font-size:.92em; overflow-wrap:anywhere; }
+.nre-experiment-list .nre-attempt-branch { color:var(--line-strong); font-variant-numeric:tabular-nums; }
 .nre-experiment-list .nre-eval-attempt-badges { display:inline-flex; flex-wrap:wrap; gap:.6em; }
-.nre-experiment-list .nre-eval-avg,
+.nre-experiment-list .nre-eval-attempt-metrics,
 .nre-experiment-list .nre-eval-reason { color:var(--muted); font-size:.92em; }
 .nre-experiment-list .nre-experiment-list-empty { border:1px dashed var(--line-strong); border-radius:8px; padding:18px; color:var(--muted); text-align:center; background:var(--panel); }
+@media(max-width:1000px){.nre-experiment-table{overflow-x:auto}.nre-experiment-head,.nre-experiment-summary{min-width:1040px}.nre-experiment-detail{min-width:1040px}}
 
 /* ---- verdict 判定色(AttemptList/EvalList/ExperimentList 的 verdict 文字与判定符共用) ---- */
 .nre .nre-verdict-passed { color:var(--good); }