niceeval 0.6.0 → 0.6.2

package/src/report/format.ts

@@ -2,8 +2,22 @@
 //   "%" → 87%    "ms" → 1.2s    "$" → $0.31    其余 → 1.2k 缩写(带 unit 后缀)
 // metric.display 可整体覆盖;这里只负责默认。
 
-import type { AttemptEvidenceCapabilities } from "../results/attempt-evidence.ts";
 import type { AssertionResult, Verdict } from "../types.ts";
+import { compactAssertionSummary, fitCompactAssertionSummary, primaryAssertionSummary } from "../scoring/display.ts";
+
+/**
+ * experiment 行的显示名：给了父路径 `relativeTo` 且它确是前缀，就去掉 `relativeTo + "/"`，
+ * 只留 id 末段——用在已经以组为标题的上下文（如默认 `ExperimentComparison` 的每组面板）里，
+ * 避免每行重复文件夹名。组键就是 experiment id 的父目录，因此这里的末段与 `MetricScatter`
+ * 点标签取的末段同源。不给 `relativeTo`、或它不是前缀（如根目录单例组）时原样返回完整 id。
+ * 完整 id 仍是排序 / 着色 / 折叠的键，调用方不要拿这个显示名当身份用。
+ */
+export function experimentDisplayName(experimentId: string, relativeTo?: string): string {
+  if (relativeTo && experimentId.startsWith(`${relativeTo}/`)) {
+    return experimentId.slice(relativeTo.length + 1);
+  }
+  return experimentId;
+}
 
 /** 一位小数、去掉无意义的 ".0" 尾巴。 */
 function trimmed(n: number): string {
@@ -78,8 +92,7 @@ export function formatPercent(ratio: number): string {
   return `${Math.round(ratio * 100)}%`;
 }
 
-// ── 实体列表(ExperimentList / EvalList / AttemptList)共用的判定符与证据能力位 ──
-// web / text 两面对同一个 AttemptListItem 给出同一个标记(docs-site「终端输出形成反馈闭环」)。
+// ── 实体列表(ExperimentList / EvalList / AttemptList)共用的判定符 ──
 
 /** passed / failed / errored / skipped 的判定符。 */
 export function verdictMark(verdict: Verdict): string {
@@ -96,29 +109,25 @@ export function verdictMark(verdict: Verdict): string {
 }
 
 /**
- * 证据能力标记:`[E,X,⏱]` 式方括号列表,固定顺序 eval → execution → timing → diff,
- * 缺哪个不列哪个;四位全无时返回空串(没有证据可看,不画空 `[]`)。
+ * Attempt 比较项的一层结果摘要；完整 assertions 只在 locator 详情里展开。
+ * maxChars(可选)是渲染面的宽度收口预算(如两行单元格 = 2 × 列宽):断言摘要按
+ * fitCompactAssertionSummary 的优先级让位,error 摘要折单行后尾截。
  */
-export function capabilityBadge(capabilities: AttemptEvidenceCapabilities): string {
-  const marks: string[] = [];
-  if (capabilities.eval) marks.push("E");
-  if (capabilities.execution) marks.push("X");
-  if (capabilities.timing) marks.push("⏱");
-  if (capabilities.diff) marks.push("D");
-  return marks.length > 0 ? `[${marks.join(",")}]` : "";
-}
-
-/**
- * 一个 AttemptListItem 的失败原因摘要,按优先级取第一个在场的:`error` → 未通过的 gate 断言
- * (原始声明顺序,`name`,detail 在场则 `"name: detail"`,多条用「, 」连接)→ 缺席。与
- * compute.ts 的 `reasonFor(EvalResult)` 同一口径,只是输入换成瘦身后的 AttemptListItem——
- * 没有 `skipReason` 字段(AttemptListItem 不携带),skipped 的 attempt 因此没有原因摘要,
- * 这与它们本来就不该出现在「为什么失败」列表里的事实一致。EvalList / ExperimentList 的
- * 逐 attempt 徽标行用它给每个 attempt 自己的原因(而不是复用整道题的代表原因)。
- */
-export function attemptItemReason(item: { error?: string; assertions: AssertionResult[] }): string | undefined {
-  if (item.error !== undefined) return item.error;
-  const gates = item.assertions.filter((a) => !a.passed && a.severity === "gate");
-  if (gates.length === 0) return undefined;
-  return gates.map((a) => (a.detail ? `${a.name}: ${a.detail}` : a.name)).join(", ");
+export function attemptItemReason(
+  item: {
+    verdict: Verdict;
+    error?: { message: string };
+    assertions: AssertionResult[];
+  },
+  maxChars?: number,
+): string | undefined {
+  if (item.error !== undefined) {
+    const message = item.error.message.replace(/\s+/g, " ").trim();
+    return maxChars !== undefined && message.length > maxChars
+      ? `${message.slice(0, Math.max(0, maxChars - 1))}…`
+      : message;
+  }
+  const summary = primaryAssertionSummary(item.assertions, item.verdict);
+  if (summary === undefined) return undefined;
+  return maxChars === undefined ? compactAssertionSummary(summary) : fitCompactAssertionSummary(summary, maxChars);
 }

package/src/report/index.ts

@@ -8,9 +8,19 @@
 // ./web.ts,只有那一侧 import react-dom。写报告文件的项目要装 react(.tsx 编译产物
 // import react/jsx-runtime)。
 
-// 指标与 flag
-export { defineMetric, passRate, examScore, durationMs, tokens, costUSD, turns } from "./metrics.ts";
-export { flag } from "./flag.ts";
+// 指标与维度读取器(flag / config)
+export {
+  defineMetric,
+  taskPassRate,
+  executionReliability,
+  endToEndPassRate,
+  examScore,
+  durationMs,
+  tokens,
+  costUSD,
+  turns,
+} from "./metrics.ts";
+export { flag, config } from "./flag.ts";
 
 // 报告基座与双面组件基座
 export { defineReport, isReportDefinition, renderReportToText } from "./report.ts";
@@ -44,8 +54,14 @@ export {
 } from "./text/layout.ts";
 export type { ColumnAlign } from "./text/layout.ts";
 
-// 内置报告(show / view 裸跑时报告槽的出厂填充,一份普通 ReportDefinition,无 renderer 特权)
-export { CostPassRateComparison } from "./built-ins/index.ts";
+// 内置报告兼组合件(show / view 裸跑时报告槽的出厂填充;也可作组件整体引用,
+// `<ExperimentComparison data={await ExperimentComparison.data(selection)} />`),无 renderer 特权
+export { ExperimentComparison } from "./built-ins/index.ts";
+export type {
+  ExperimentComparisonData,
+  ExperimentComparisonGroupData,
+  ExperimentComparisonProps,
+} from "./built-ins/index.ts";
 
 // locale:官方组件 chrome 文案的语言(en / zh-CN);指标 label 可按 locale 给字典
 export { DEFAULT_REPORT_LOCALE, resolveMetricLabel } from "./locale.ts";
@@ -95,9 +111,10 @@ export type {
 // 数据契约(组件的 data props)
 export type {
   Aggregator,
-  AttemptEvidenceCapabilities,
   AttemptListItem,
   AttemptLocator,
+  AxisInput,
+  ConfigRef,
   DeltaData,
   Dimension,
   DimensionInput,

package/src/report/locale.ts

@@ -2,7 +2,7 @@
 // 只覆盖组件自带的固定文案(verdict 词、缺数据、覆盖率角标、注脚、占位符等);
 // 数据本身(display、维度键、warnings 的 message)不经这里。
 // 刻意不 import src/i18n/(CLI 专用字典,locale 来源与 key 面完全不同);
-// zh-CN 译法与 src/view/app/i18n.ts 现有词保持一致(成功率/平均耗时/预估成本…)。
+// zh-CN 译法与默认 Reports 契约保持一致(端到端成功率/平均耗时/预估成本…)。
 
 /** 报告渲染的 locale;默认 "en"(text 面缺省即 en,`niceeval show` 输出不变)。 */
 export type ReportLocale = "en" | "zh-CN";
@@ -32,6 +32,20 @@ const en = {
   "table.viewBreakdown": "Per-eval breakdown",
   /** <Table> 的 locator 列表头(行带 locator 时自动追加)。 */
   "table.attempt": "attempt",
+  "experimentList.experiment": "Experiment",
+  "experimentList.avgDuration": "Avg duration",
+  "experimentList.passRate": "End-to-end pass rate",
+  "experimentList.tokens": "Tokens",
+  "experimentList.estimatedCost": "Est. cost",
+  "experimentList.result": "Result",
+  "experimentList.status": "Status",
+  "experimentList.evalAttempt": "Eval / Attempt",
+  "experimentList.duration": "Duration",
+  "experimentList.cost": "Cost",
+  "experimentList.filterPlaceholder": "Filter experiments…",
+  "experimentList.defaultModel": "default",
+  "experimentList.flags": "Flags",
+  "entityList.average": "{value} avg",
   /** <Table> 压到下限仍放不下时,从右侧丢列并如实报数。 */
   "table.columnsHidden.one": "({n} more column not shown)",
   "table.columnsHidden.other": "({n} more columns not shown)",
@@ -39,7 +53,7 @@ const en = {
   "overview.snapshots": "Snapshots",
   "overview.evals": "Evals",
   "overview.attempts": "attempts",
-  "overview.passRate": "Pass rate",
+  "overview.passRate": "End-to-end pass rate",
   "overview.totalCost": "Total cost",
   "overview.totalDuration": "Total duration",
   "overview.source": "Source: {n} snapshots",
@@ -51,6 +65,14 @@ const en = {
   /** GroupSummary 的 KPI dt 标签(其余字段复用 verdict.* / overview.* 已有 key)。 */
   "groupSummary.experiments": "Experiments",
 
+  "experimentComparison.groups": "Experiment groups",
+  "experimentComparison.group": "Experiment group",
+  "experimentComparison.results": "Results",
+  "experimentComparison.lastRun": "Last run",
+  "experimentComparison.selectGroup": "Select experiment group {group}",
+  "experimentComparison.command": "Details: {command}",
+  "experimentComparison.empty": "No experiment groups",
+
   "composedFrom.one": "composed from {n} run",
   "composedFrom.other": "composed from {n} runs",
   "latestRun": "latest {run}",
@@ -60,8 +82,6 @@ const en = {
   "scatter.axisReversed": "(axis reversed: right = better)",
   /** 0 个可画点:x/y 指标没有可用数据。 */
   "scatter.noData": "No data to plot {x} × {y}",
-  /** 恰好 1 个可画点:比较至少要两个实验。 */
-  "scatter.needTwo": "At least 2 experiments needed to compare {x} × {y}",
   "pointsMissing.one": "{n} point missing data",
   "pointsMissing.other": "{n} points missing data",
 
@@ -69,6 +89,7 @@ const en = {
   "attemptList.truncated": "and {n} more not shown",
   "attemptList.truncatedText": "({n} more not shown)",
   "attemptList.score": "score {score}",
+  "attemptList.unavailable": "unavailable",
   "attemptList.details": "details",
 
   "scoreboard.total": "Total",
@@ -110,13 +131,27 @@ const zhCN: Record<ReportMessageKey, string> = {
   "table.reason": "原因",
   "table.viewBreakdown": "逐题明细",
   "table.attempt": "Attempt",
+  "experimentList.experiment": "实验",
+  "experimentList.avgDuration": "平均耗时",
+  "experimentList.passRate": "端到端成功率",
+  "experimentList.tokens": "Tokens",
+  "experimentList.estimatedCost": "预估成本",
+  "experimentList.result": "结果",
+  "experimentList.status": "状态",
+  "experimentList.evalAttempt": "题目 / Attempt",
+  "experimentList.duration": "耗时",
+  "experimentList.cost": "成本",
+  "experimentList.filterPlaceholder": "筛选实验…",
+  "experimentList.defaultModel": "默认",
+  "experimentList.flags": "Flags",
+  "entityList.average": "平均 {value}",
   "table.columnsHidden.one": "(还有 {n} 列未列出)",
   "table.columnsHidden.other": "(还有 {n} 列未列出)",
 
   "overview.snapshots": "快照",
   "overview.evals": "题目",
   "overview.attempts": "尝试",
-  "overview.passRate": "通过率",
+  "overview.passRate": "端到端成功率",
   "overview.totalCost": "总成本",
   "overview.totalDuration": "总耗时",
   "overview.source": "数据来源:{n} 个快照",
@@ -127,6 +162,14 @@ const zhCN: Record<ReportMessageKey, string> = {
 
   "groupSummary.experiments": "实验数",
 
+  "experimentComparison.groups": "实验组",
+  "experimentComparison.group": "实验组",
+  "experimentComparison.results": "结果",
+  "experimentComparison.lastRun": "最后运行",
+  "experimentComparison.selectGroup": "选择实验组 {group}",
+  "experimentComparison.command": "查看：{command}",
+  "experimentComparison.empty": "没有实验组",
+
   "composedFrom.one": "合成自 {n} 个 run",
   "composedFrom.other": "合成自 {n} 个 run",
   "latestRun": "最新 {run}",
@@ -135,7 +178,6 @@ const zhCN: Record<ReportMessageKey, string> = {
   "scatter.betterUpperRight": "更好 → 右上",
   "scatter.axisReversed": "(轴反向:右 = 更好)",
   "scatter.noData": "{x} × {y} 没有可绘制的数据",
-  "scatter.needTwo": "至少需要 2 个实验才能比较 {x} × {y}",
   "pointsMissing.one": "{n} 个点缺数据",
   "pointsMissing.other": "{n} 个点缺数据",
 
@@ -143,6 +185,7 @@ const zhCN: Record<ReportMessageKey, string> = {
   "attemptList.truncated": "还有 {n} 条未列出",
   "attemptList.truncatedText": "(还有 {n} 条未列出)",
   "attemptList.score": "得分 {score}",
+  "attemptList.unavailable": "评不了",
   "attemptList.details": "详情",
 
   "scoreboard.total": "总分",

package/src/report/metrics.ts

@@ -1,19 +1,22 @@
 // defineMetric 与内置指标。
 //
 // null ≠ 0:null = 此 attempt 测不了这个指标(不进聚合);0 = 测了,结果是零(照常进)。
-// 哪个 verdict 落哪边必须显式表态,内置指标按 docs/feature/reports/library.md「内置指标」的表格:
+// 哪个 verdict 落哪边必须显式表态,内置指标按 docs/feature/reports/library.md「内置指标」的表格。
+// 三个通过率指标把「Agent 答错」与「基建没跑起来」拆开,不互相伪装:
 //
-//   指标(name)             skipped  errored          failed  passed        better
-//   passRate(pass-rate)     null     0                0       1             higher
-//   examScore(exam-score)   null     0                0       soft 均分      higher
-//   durationMs(duration)    null     实测             实测     实测          lower
-//   tokens(tokens)          null     实测;无 usage→null 同左   同左          lower
-//   costUSD(cost)           null     同上             同左     同左          lower
-//   turns(turns)             null     实测;o11y 缺失→null 同左  同左          lower
+//   指标(name)                                    skipped  errored          failed  passed        better
+//   taskPassRate(task-pass-rate)                   null     null             0       1             higher
+//   executionReliability(execution-reliability)    null     0                1       1             higher
+//   endToEndPassRate(end-to-end-pass-rate)         null     0                0       1             higher
+//   examScore(exam-score)                          null     0                0       soft 均分      higher
+//   durationMs(duration)                           null     实测             实测     实测          lower
+//   tokens(tokens)                                 null     实测;无 usage→null 同左   同左          lower
+//   costUSD(cost)                                  null     同上             同左     同左          lower
+//   turns(turns)                                   null     实测;o11y 缺失→null 同左  同左          lower
 //
 // 两档指标(docs/feature/reports/library.md「内置指标」):以上除 turns 外全部只读 attempt.result
 // 的瘦身字段——任何 producer、任何 copySnapshots artifacts 选择都算得出,内置报告
-// CostPassRateComparison 只用这一档。turns 读 attempt.o11y()(懒加载 artifact),发布时若
+// ExperimentComparison 只用这一档。turns 读 attempt.o11y()(懒加载 artifact),发布时若
 // o11y 没随行就诚实渲染缺数据「—」,不算 0——报告作者自己摆时心里要有这根弦,内置报告不用它。
 
 import type { EvalResult } from "../types.ts";
@@ -39,10 +42,58 @@ export function attemptCostUSD(result: EvalResult): number | null {
   return result.usage?.costUSD ?? result.estimatedCostUSD ?? null;
 }
 
-export const passRate = defineMetric({
-  name: "pass-rate",
-  label: { en: "Pass rate", "zh-CN": "成功率" },
-  description: "Share of evals that passed (skipped attempts excluded).",
+/**
+ * 条件答题质量:passed = 1,failed = 0,errored 记 null 不进分母。
+ * 这是「已形成可信判定」条件下的诊断指标,不能简称默认成功率
+ * (docs/feature/reports/library.md「内置指标」)。
+ */
+export const taskPassRate = defineMetric({
+  name: "task-pass-rate",
+  label: { en: "Task pass rate", "zh-CN": "可判定任务通过率" },
+  description: "Conditional task quality among attempts that formed a trustworthy verdict: passed = 1, failed = 0; errored is null.",
+  better: "higher",
+  unit: "%",
+  value(a) {
+    switch (a.result.verdict) {
+      case "passed":
+        return 1;
+      case "failed":
+        return 0;
+      default:
+        // errored = 没形成可信判定 → null 不进这个条件指标;skipped 同为 null。
+        return null;
+    }
+  },
+});
+
+/** 执行可靠性:跑到可判定(passed / failed)= 1,errored = 0;skipped → null。 */
+export const executionReliability = defineMetric({
+  name: "execution-reliability",
+  label: { en: "Execution reliability", "zh-CN": "执行可靠性" },
+  description: "Execution reliability: reached a trustworthy verdict (passed / failed) = 1, errored = 0.",
+  better: "higher",
+  unit: "%",
+  value(a) {
+    switch (a.result.verdict) {
+      case "passed":
+      case "failed":
+        return 1;
+      case "errored":
+        return 0;
+      default:
+        return null; // skipped
+    }
+  },
+});
+
+/**
+ * 端到端合成:passed = 1,failed / errored = 0;哪边拖累用
+ * taskPassRate / executionReliability 拆开看。
+ */
+export const endToEndPassRate = defineMetric({
+  name: "end-to-end-pass-rate",
+  label: { en: "End-to-end pass rate", "zh-CN": "端到端成功率" },
+  description: "End-to-end composite: passed = 1, failed / errored = 0. Split blame with taskPassRate and executionReliability.",
   better: "higher",
   unit: "%",
   value: (a) =>
@@ -62,9 +113,11 @@ export const examScore = defineMetric({
     // 字面实现会让条件空真成立、崩溃反而得满分 —— 交白卷是 0 分,不是缺数据,更不是满分。
     // failed 同理得 0:--strict 下被翻成 failed 的哪怕 soft 分不低也是 0(报告不重新判卷)。
     if (verdict !== "passed") return 0;
-    const soft = assertions.filter((x) => x.severity === "soft");
+    // unavailable 没有分数:不计入均分分母(评不了 ≠ 0 分;非 optional 的 unavailable
+    // 早已把 verdict 拖成 errored,走不到这个分支)。
+    const soft = assertions.filter((x) => x.severity === "soft" && x.outcome !== "unavailable");
     if (soft.length === 0) return 1;
-    return soft.reduce((sum, x) => sum + x.score, 0) / soft.length;
+    return soft.reduce((sum, x) => sum + (x.outcome === "unavailable" ? 0 : x.score), 0) / soft.length;
   },
 });
 

package/src/report/primitives.tsx

@@ -128,6 +128,12 @@ export interface TableColumn {
   header: string;
   /** 对齐方向,默认 `"left"`;`"right"` 按显示宽度右对齐,数字列用。 */
   align?: ColumnAlign;
+  /**
+   * text 面:单元格折行后的最大物理行数,放不下的部分以 `…` 收口;省略则不限行数。
+   * 摘要类列(如比较列表的 Result)用它保证「格子是可扫读的预览」;完整值在下钻面。
+   * web 面不消费——网页的高度约束是组件自己的 CSS 决定。
+   */
+  maxLines?: number;
 }
 
 /** 一行的数据:身份键、已格式化的格子、可选的 attempt locator。 */

package/src/report/react/AttemptList.tsx

@@ -1,5 +1,5 @@
-// AttemptList:实体列表的叶子层——每项一个 Attempt,固定展示判定、断言、error、Judge 评语
-// (assertions 的 detail/evidence)与证据引用(locator + 证据能力标记)。它不预设只看失败,
+// AttemptList:实体列表的叶子层——每项一个 Attempt,固定展示判定、一条主失败摘要或 error
+// 摘要与证据引用(locator)。完整 assertions / evidence 只经 locator 下钻。它不预设只看失败,
 // 报告作者过滤 items、用 .slice() 限量,total 让渲染面如实报告剩余数量,不静默截断。
 // ExperimentList / EvalList 的下钻数组是同一个 AttemptListItem[],这里的渲染逻辑因此
 // 也是它们展开区里"逐条 attempt"那一层的唯一实现(通过 AttemptRow 导出复用,不重写一遍)。
@@ -8,18 +8,18 @@ import type { ReactElement } from "react";
 import type { AttemptListItem } from "../types.ts";
 import type { AttemptLocator } from "../../results/locator.ts";
 import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { attemptItemReason } from "../format.ts";
 import { colorClassForKey } from "./colors.ts";
-import { capabilityBadge, cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
 
-/** locator + 判定符 + 证据能力标记的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
+/** locator + 判定符的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
 export function AttemptLocatorBadge({
   item,
   attemptHref,
 }: {
-  item: Pick<AttemptListItem, "locator" | "verdict" | "capabilities">;
+  item: Pick<AttemptListItem, "locator" | "verdict">;
   attemptHref: (locator: AttemptLocator) => string;
 }): ReactElement {
-  const caps = capabilityBadge(item.capabilities);
   return (
     <a
       className={cx("nre-locator", `nre-verdict-${item.verdict}`)}
@@ -27,40 +27,20 @@ export function AttemptLocatorBadge({
     >
       {item.locator}
       <span className="nre-locator-mark">{verdictMark(item.verdict)}</span>
-      {caps && <span className="nre-locator-caps">{caps}</span>}
     </a>
   );
 }
 
-function AssertionRow({ assertion, locale }: { assertion: AttemptListItem["assertions"][number]; locale: ReportLocale }): ReactElement {
-  return (
-    <li className={cx("nre-assertion", `nre-assertion-${assertion.severity}`, !assertion.passed && "nre-assertion-failed")}>
-      <span className="nre-assertion-severity">{assertion.severity}</span>
-      <span className="nre-assertion-name">{assertion.name}</span>
-      <span className="nre-assertion-score">
-        {localeText(locale, "attemptList.score", { score: assertion.score })}
-      </span>
-      {(assertion.detail || assertion.evidence) && (
-        <details className="nre-assertion-more">
-          <summary>{localeText(locale, "attemptList.details")}</summary>
-          {assertion.detail && <p className="nre-assertion-detail">{assertion.detail}</p>}
-          {assertion.evidence && <blockquote className="nre-assertion-evidence">{assertion.evidence}</blockquote>}
-        </details>
-      )}
-    </li>
-  );
-}
-
-/** 一条 Attempt 的完整卡片:AttemptList 自己的一项,也是 EvalList 展开区里的一行。 */
+/** 一条 Attempt 的比较卡片；完整 assertions 通过 locator 下钻，不在列表内展开。 */
 export function AttemptRow({
   item,
   attemptHref,
-  locale = DEFAULT_REPORT_LOCALE,
 }: {
   item: AttemptListItem;
   attemptHref: (locator: AttemptLocator) => string;
   locale?: ReportLocale;
 }): ReactElement {
+  const reason = attemptItemReason(item);
   return (
     <li className={cx("nre-attempt", `nre-attempt-${item.verdict}`)}>
       <div className="nre-attempt-head">
@@ -72,14 +52,7 @@ export function AttemptRow({
         <span className="nre-attempt-duration">{formatDurationMs(item.durationMs)}</span>
         {item.costUSD !== undefined && <span className="nre-attempt-cost">{formatUSD(item.costUSD)}</span>}
       </div>
-      {item.error && <p className="nre-attempt-error">{item.error}</p>}
-      {item.assertions.length > 0 && (
-        <ul className="nre-assertions">
-          {item.assertions.map((a, i) => (
-            <AssertionRow key={i} assertion={a} locale={locale} />
-          ))}
-        </ul>
-      )}
+      {reason && <p className="nre-attempt-result">{reason}</p>}
     </li>
   );
 }

package/src/report/react/ExperimentComparison.tsx

@@ -0,0 +1,68 @@
+// ExperimentComparison 的 web 面：完整持有所有可比组，组选择只切换已经独立计算好的 panel。
+// 静态 HTML 用原生 <details> 保留每组完整内容；enhance.js 再把上方摘要卡变成单选切换。
+
+import type { ReactElement } from "react";
+import type { ExperimentComparisonData } from "../built-ins/experiment-comparison.tsx";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { ExperimentList, MetricScatter } from "../components.tsx";
+import { GroupSummary } from "./GroupSummary.tsx";
+import { cx } from "./format.ts";
+
+export function ExperimentComparisonView({
+  data,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: ExperimentComparisonData;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  if (data.groups.length === 0) {
+    return (
+      <div className={cx("nre", "nre-experiment-comparison", className)}>
+        <p className="nre-experiment-groups-empty">{localeText(locale, "experimentComparison.empty")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx("nre", "nre-experiment-comparison", className)} data-nre-experiment-groups>
+      <div
+        className="nre-experiment-group-tabs"
+        role="tablist"
+        aria-label={localeText(locale, "experimentComparison.groups")}
+      >
+        {data.groups.map((group, index) => (
+          <div
+            key={group.key}
+            className="nre-experiment-group-tab"
+            role="tab"
+            tabIndex={index === 0 ? 0 : -1}
+            aria-selected={index === 0 ? "true" : "false"}
+            aria-label={localeText(locale, "experimentComparison.selectGroup", { group: group.key })}
+            data-nre-experiment-group-select={index}
+          >
+            <strong className="nre-experiment-group-name">{group.key}</strong>
+            <GroupSummary data={group.summary} locale={locale} />
+          </div>
+        ))}
+      </div>
+
+      <div className="nre-experiment-group-panels">
+        {data.groups.map((group, index) => (
+          <details
+            key={group.key}
+            className="nre-experiment-group-panel"
+            data-nre-experiment-group-panel={index}
+            role="tabpanel"
+            open={index === 0}
+          >
+            <summary>{group.key}</summary>
+            <MetricScatter data={group.scatter} locale={locale} />
+            <ExperimentList items={group.experiments} filter locale={locale} relativeTo={group.key} />
+          </details>
+        ))}
+      </div>
+    </div>
+  );
+}