niceeval 0.6.2 → 0.7.1

package/src/report/primitives.tsx

@@ -1,19 +1,19 @@
-// 排版原语 Row / Col / Section / Text / Style / Table:六个内置双面组件,没有特殊机制。
-// web 面是普通 React 渲染;text 面用 ctx.render(child, 子宽) 显式传宽,
-// Row 分栏、宽度不足降级纵向。Style 给自定义组件带样式:web 面吐 <style> 标签,
-// text 面渲染为空 —— 静态导出不打包用户代码,className 引用的 CSS 靠它随树走。
-// Table 是自定义表的标准件,官方表状组件的 text 面也建在它上面(见 ./text/table.ts)。
+// 排版原语 Row / Col / Section / Text / Style / Tabs / Tab / Table:八个内置双面组件,
+// 没有特殊机制(docs/feature/reports/library/layout.md)。web 面是普通 React 渲染;
+// text 面用 ctx.render(child, 子宽) 显式传宽。Style 注入页级全局 CSS(树位置只决定声明
+// 顺序),text 面渲染为空。Table 是自定义表的标准件,官方表状组件的 text 面也建在它上面。
 
 import type { ReactNode } from "react";
 import type { AttemptLocator } from "../results/locator.ts";
-import { defineComponent, type ReportNode } from "./tree.ts";
-import { localeText, type ReportLocale } from "./locale.ts";
-import { indentBlock, joinColumns, wrapDisplay, type ColumnAlign } from "./text/layout.ts";
+import { COMPONENT_RAW_CHILDREN, COMPONENT_ROLE, defineComponent, type ReportNode } from "./tree.ts";
+import { localeText, resolveLocalizedText, type LocalizedText, type ReportLocale } from "./locale.ts";
+import { indentBlock, joinColumns, stringWidth, wrapDisplay } from "./text/layout.ts";
+import type { ColumnAlign } from "./text/layout.ts";
 import { renderTableText } from "./text/table.ts";
 
 function childArray(children: ReportNode): ReportNode[] {
   if (children === null || children === undefined || typeof children === "boolean") return [];
-  return Array.isArray(children) ? children : [children];
+  return Array.isArray(children) ? [...children] : [children];
 }
 
 function cx(...parts: (string | undefined)[]): string {
@@ -25,8 +25,11 @@ export interface LayoutProps {
   className?: string;
 }
 
-/** 纵向依次排列:网页是块级堆叠,终端是逐块输出(块间空一行)。 */
-export const Col = defineComponent<LayoutProps>({
+export type RowProps = LayoutProps;
+export type ColProps = LayoutProps;
+
+/** 纵向依次排列:网页是块级堆叠,终端是逐块输出(块间空一行)。两面都按声明序。 */
+export const Col = defineComponent<ColProps>({
   web({ children, className }) {
     return <div className={cx("nre", "nre-col", className)}>{children as ReactNode}</div>;
   },
@@ -39,12 +42,18 @@ export const Col = defineComponent<LayoutProps>({
 });
 Col.displayName = "Col";
 
-// Row 的每栏至少留这个宽度,不硬挤;不够就降级纵向
-const MIN_COLUMN_WIDTH = 24;
 const COLUMN_SEPARATOR = " │ ";
 
-/** 并排:网页横向排布,终端字符分栏;终端宽度不够时自动降级为纵向。 */
-export const Row = defineComponent<LayoutProps>({
+/** 一段已渲染文本的自然显示宽度(最长一行)。 */
+function blockWidth(block: string): number {
+  return Math.max(...block.split("\n").map((line) => stringWidth(line)), 0);
+}
+
+/**
+ * 并排:web 面横排;text 面在可用宽度装得下全部子块时按显示宽度并排(与 `columns` 工具
+ * 同一把尺),装不下时整块退化为纵向堆叠——不截断、不隐藏任何子块。
+ */
+export const Row = defineComponent<RowProps>({
   web({ children, className }) {
     return <div className={cx("nre", "nre-row", className)}>{children as ReactNode}</div>;
   },
@@ -54,62 +63,70 @@ export const Row = defineComponent<LayoutProps>({
     );
     if (blocks.length === 0) return "";
     if (blocks.length === 1) return ctx.render(blocks[0]);
-    const columnWidth = Math.floor(
-      (ctx.width - COLUMN_SEPARATOR.length * (blocks.length - 1)) / blocks.length,
-    );
-    if (columnWidth < MIN_COLUMN_WIDTH) {
-      // 宽度不足:降级纵向,与 Col 同一形态
-      return blocks
-        .map((child) => ctx.render(child))
-        .filter((block) => block.length > 0)
-        .join("\n\n");
+    const rendered = blocks.map((child) => ctx.render(child)).filter((block) => block.length > 0);
+    if (rendered.length === 0) return "";
+    const widths = rendered.map(blockWidth);
+    const total = widths.reduce((sum, w) => sum + w, 0) + COLUMN_SEPARATOR.length * (rendered.length - 1);
+    if (total > ctx.width) {
+      // 装不下:整块退化为纵向堆叠,与 Col 同一形态
+      return rendered.join("\n\n");
     }
-    const rendered = blocks.map((child) => ctx.render(child, columnWidth));
-    return joinColumns(rendered, rendered.map(() => columnWidth), COLUMN_SEPARATOR);
+    return joinColumns(rendered, widths, COLUMN_SEPARATOR);
   },
 });
 Row.displayName = "Row";
 
 export interface SectionProps extends LayoutProps {
-  title: string;
+  title: LocalizedText;
 }
 
 /** 带标题的块:网页是标题层级,终端是标题行加缩进。 */
 export const Section = defineComponent<SectionProps>({
-  web({ title, children, className }) {
+  web({ title, children, className }, ctx) {
     return (
       <section className={cx("nre", "nre-section", className)}>
-        <h2 className="nre-section-title">{title}</h2>
+        <h2 className="nre-section-title">{resolveLocalizedText(title, ctx.locale)}</h2>
         {children as ReactNode}
       </section>
     );
   },
   text({ title, children }, ctx) {
+    const heading = resolveLocalizedText(title, ctx.locale);
     const body = childArray(children)
       .map((child) => ctx.render(child, ctx.width - 2))
       .filter((block) => block.length > 0)
       .join("\n\n");
-    return body.length > 0 ? `${title}\n${indentBlock(body, "  ")}` : title;
+    return body.length > 0 ? `${heading}\n${indentBlock(body, "  ")}` : heading;
   },
 });
 Section.displayName = "Section";
 
-/** 说明文字:网页是段落,终端是折行文本。 */
-export const Text = defineComponent<LayoutProps>({
+export interface TextProps {
+  /** 自由正文原样渲染,不随 locale 自动翻译。 */
+  children: string | number;
+  className?: string;
+}
+
+/** 自由文本的显式载体:web 面负责转义,text 面按显示宽度折行。 */
+export const Text = defineComponent<TextProps>({
   web({ children, className }) {
-    return <p className={cx("nre", "nre-text", className)}>{children as ReactNode}</p>;
+    return <p className={cx("nre", "nre-text", className)}>{children}</p>;
   },
   text({ children }, ctx) {
-    return wrapDisplay(ctx.render(children), ctx.width).join("\n");
+    return wrapDisplay(String(children), ctx.width).join("\n");
   },
 });
 Text.displayName = "Text";
+Text[COMPONENT_RAW_CHILDREN] = true;
 
 export interface StyleProps {
-  children?: string;
+  children: string;
 }
 
-/** 自定义组件的样式随树带走:web 面吐 <style> 标签,text 面渲染为空。 */
+/**
+ * 注入页级全局 CSS:树位置只决定声明顺序,不限定作用域;text 面零输出。
+ * 配置对象形态的报告要全站样式优先用外壳 styles,两条通道注入同一增强层。
+ */
 export const Style = defineComponent<StyleProps>({
   web({ children }) {
     return <style>{children}</style>;
@@ -119,13 +136,108 @@ export const Style = defineComponent<StyleProps>({
   },
 });
 Style.displayName = "Style";
+Style[COMPONENT_RAW_CHILDREN] = true;
+
+// ───────────────────────── Tabs / Tab ─────────────────────────
+
+export interface TabsProps extends LayoutProps {}
+
+export interface TabProps extends LayoutProps {
+  title: LocalizedText;
+}
+
+interface TabEntry {
+  title: LocalizedText;
+  children: ReportNode;
+  className?: string;
+}
+
+/** Tabs 的直接 Tab 子项(数组 / Fragment 已展平;结构合法性由树校验保证)。 */
+function tabEntries(children: ReportNode): TabEntry[] {
+  const out: TabEntry[] = [];
+  const visit = (node: ReportNode): void => {
+    if (node === null || node === undefined || typeof node === "boolean") return;
+    if (Array.isArray(node)) {
+      for (const child of node) visit(child);
+      return;
+    }
+    if (typeof node === "object" && node !== null && "props" in node) {
+      const element = node as { type: unknown; props: Record<string, unknown> };
+      if (element.type === Symbol.for("react.fragment")) {
+        visit(element.props.children as ReportNode);
+        return;
+      }
+      out.push({
+        title: (element.props.title as LocalizedText) ?? "",
+        children: element.props.children as ReportNode,
+        className: element.props.className as string | undefined,
+      });
+    }
+  };
+  visit(children);
+  return out;
+}
+
+/**
+ * 页内并列视图的可切换块。tab 是页内浏览状态,不是数据边界,也不是宿主寻址单位——
+ * 两个渲染面都输出全部 tab 的完整内容:web 静态 HTML 每 tab 一个 <details>(首个默认展开,
+ * 渐进增强升级成单选 tab 条,切换不改变数据);text 面按声明序输出带标题分节,不折成索引
+ * 也不省略(tab 没有选择器,索引只能是死路)。
+ */
+export const Tabs = defineComponent<TabsProps>({
+  web({ children, className }, ctx) {
+    const tabs = tabEntries(children);
+    return (
+      <div className={cx("nre", "nre-tabs", className)} data-nre-tabs>
+        {tabs.map((tab, i) => (
+          <details key={i} className={cx("nre-tab", tab.className)} open={i === 0}>
+            <summary className="nre-tab-title">{resolveLocalizedText(tab.title, ctx.locale)}</summary>
+            <div className="nre-tab-body">{tab.children as ReactNode}</div>
+          </details>
+        ))}
+      </div>
+    );
+  },
+  text({ children }, ctx) {
+    const tabs = tabEntries(children);
+    return tabs
+      .map((tab) => {
+        const heading = resolveLocalizedText(tab.title, ctx.locale);
+        const body = childArray(tab.children)
+          .map((child) => ctx.render(child, ctx.width - 2))
+          .filter((block) => block.length > 0)
+          .join("\n\n");
+        return body.length > 0 ? `${heading}\n${indentBlock(body, "  ")}` : heading;
+      })
+      .join("\n\n");
+  },
+});
+Tabs.displayName = "Tabs";
+Tabs[COMPONENT_ROLE] = "tabs";
+
+/** 只能直接放在 <Tabs> 下;除通用 children / className 外只有 title。不参与路由,没有 id。 */
+export const Tab = defineComponent<TabProps>({
+  web({ children, className }) {
+    return <div className={cx("nre", "nre-tab-body", className)}>{children as ReactNode}</div>;
+  },
+  text({ children }, ctx) {
+    return childArray(children)
+      .map((child) => ctx.render(child))
+      .filter((block) => block.length > 0)
+      .join("\n\n");
+  },
+});
+Tab.displayName = "Tab";
+Tab[COMPONENT_ROLE] = "tab";
+
+// ───────────────────────── Table ─────────────────────────
 
 /** 一列的定义:取哪个 cells 键、表头写什么、往哪边对齐。 */
 export interface TableColumn {
   /** 取 `row.cells[key]` 的键。 */
   key: string;
-  /** 表头文案,两个面都原样渲染。 */
-  header: string;
+  /** 表头文案,按渲染 locale 选择。 */
+  header: LocalizedText;
   /** 对齐方向,默认 `"left"`;`"right"` 按显示宽度右对齐,数字列用。 */
   align?: ColumnAlign;
   /**
@@ -141,16 +253,16 @@ export interface TableRow {
   /** 行身份。 */
   key: string;
   /** 已格式化的显示值;`null`(或缺这个键)渲染成 `—`,不补 0。 */
-  cells: Record<string, string | null>;
+  cells: Readonly<Record<string, string | null>>;
   /** 带上就多一列 attempt:web 面链到证据室,text 面列出 locator。 */
   locator?: AttemptLocator;
 }
 
 export interface TableProps {
-  /** 列定义;数组顺序即渲染顺序。 */
-  columns: TableColumn[];
+  /** 非空列定义;数组顺序即渲染顺序。 */
+  columns: readonly [TableColumn, ...TableColumn[]];
   /** 行数据;数组顺序即渲染顺序,组件不重排也不过滤。 */
-  rows: TableRow[];
+  rows: readonly TableRow[];
   /** 组件自带文案(attempt 表头、丢列提示)的语言;省略时随宿主。 */
   locale?: ReportLocale;
   /** web 面挂到 `<table>` 上。 */
@@ -159,6 +271,34 @@ export interface TableProps {
 
 const MISSING_MARK = "—";
 
+/** 列 key 唯一、行 cells 不携带未声明 key、空列拒绝——无类型 JS 输入在渲染前同样校验。 */
+function validateTableProps(props: TableProps): void {
+  if (!Array.isArray(props.columns) || props.columns.length === 0) {
+    throw new Error("Table needs at least one column: pass columns: [{ key, header }] — an empty column list renders nothing readable.");
+  }
+  const keys = new Set<string>();
+  for (const column of props.columns) {
+    if (keys.has(column.key)) {
+      throw new Error(`Table column key "${column.key}" is declared twice — column keys address row.cells and must be unique. Rename one column.`);
+    }
+    keys.add(column.key);
+  }
+  const rowKeys = new Set<string>();
+  for (const row of props.rows) {
+    if (rowKeys.has(row.key)) {
+      throw new Error(`Table row key "${row.key}" is declared twice — row keys are the row identity and must be unique.`);
+    }
+    rowKeys.add(row.key);
+    for (const cellKey of Object.keys(row.cells)) {
+      if (!keys.has(cellKey)) {
+        throw new Error(
+          `Table row "${row.key}" has a cell "${cellKey}" that no column declares. Declare the column in columns, or drop the stray cell.`,
+        );
+      }
+    }
+  }
+}
+
 /**
  * 自定义表的标准件:列由报告作者定,格子是算好的显示值,两个面各自排整齐。
  *
@@ -171,7 +311,9 @@ const MISSING_MARK = "—";
  * 这个组件上:自定义表和官方表用同一把尺子。
  */
 export const Table = defineComponent<TableProps>({
-  web({ columns, rows, locale, className }, ctx) {
+  web(props, ctx) {
+    validateTableProps(props);
+    const { columns, rows, locale, className } = props;
     const chrome = locale ?? ctx.locale;
     const hasLocator = rows.some((row) => row.locator !== undefined);
     const alignClass = (align?: ColumnAlign) => (align === "right" ? "nre-align-right" : undefined);
@@ -181,7 +323,7 @@ export const Table = defineComponent<TableProps>({
           <tr>
             {columns.map((column) => (
               <th key={column.key} scope="col" className={alignClass(column.align)}>
-                {column.header}
+                {resolveLocalizedText(column.header, chrome)}
               </th>
             ))}
             {hasLocator ? <th scope="col">{localeText(chrome, "table.attempt")}</th> : null}
@@ -216,6 +358,9 @@ export const Table = defineComponent<TableProps>({
       </table>
     );
   },
-  text: renderTableText,
+  text(props, ctx) {
+    validateTableProps(props);
+    return renderTableText(props, ctx);
+  },
 });
 Table.displayName = "Table";

package/src/report/react/AttemptList.tsx

@@ -1,24 +1,26 @@
-// AttemptList:实体列表的叶子层——每项一个 Attempt,固定展示判定、一条主失败摘要或 error
-// 摘要与证据引用(locator)。完整 assertions / evidence 只经 locator 下钻。它不预设只看失败,
-// 报告作者过滤 items、用 .slice() 限量,total 让渲染面如实报告剩余数量,不静默截断。
+// AttemptList:实体列表的叶子层——每项一个 Attempt,固定展示判定、算好的单行结果摘要
+// (failureSummary)与证据引用(locator)。完整 assertions / evidence 只经 locator 下钻;
+// 渲染面只做宽度截断,不重算摘要。它不预设只看失败,报告作者过滤 data、用 .slice() 限量,
+// total 让渲染面如实报告剩余数量,不静默截断。
 // ExperimentList / EvalList 的下钻数组是同一个 AttemptListItem[],这里的渲染逻辑因此
 // 也是它们展开区里"逐条 attempt"那一层的唯一实现(通过 AttemptRow 导出复用,不重写一遍)。
 
 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 { DEFAULT_REPORT_LOCALE, countText, localeText, type ReportLocale } from "../locale.ts";
 import { colorClassForKey } from "./colors.ts";
 import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
 
+const DEFAULT_ATTEMPT_HREF = (locator: AttemptLocator): string => `#/attempt/${locator}`;
+
 /** locator + 判定符的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
 export function AttemptLocatorBadge({
   item,
-  attemptHref,
+  attemptHref = DEFAULT_ATTEMPT_HREF,
 }: {
   item: Pick<AttemptListItem, "locator" | "verdict">;
-  attemptHref: (locator: AttemptLocator) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
 }): ReactElement {
   return (
     <a
@@ -31,16 +33,25 @@ export function AttemptLocatorBadge({
   );
 }
 
-/** 一条 Attempt 的比较卡片；完整 assertions 通过 locator 下钻，不在列表内展开。 */
+/** failureSummary + moreFailures 的展示形态:摘要原样,+N 计数由 moreFailures 驱动。 */
+export function failureSummaryText(item: Pick<AttemptListItem, "failureSummary" | "moreFailures">, locale: ReportLocale): string | null {
+  if (item.failureSummary === null) return null;
+  return item.moreFailures > 0
+    ? `${item.failureSummary} · ${countText(locale, "entityList.moreFailures", item.moreFailures)}`
+    : item.failureSummary;
+}
+
+/** 一条 Attempt 的比较卡片;完整 assertions 通过 locator 下钻,不在列表内展开。 */
 export function AttemptRow({
   item,
-  attemptHref,
+  attemptHref = DEFAULT_ATTEMPT_HREF,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   item: AttemptListItem;
-  attemptHref: (locator: AttemptLocator) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
   locale?: ReportLocale;
 }): ReactElement {
-  const reason = attemptItemReason(item);
+  const reason = failureSummaryText(item, locale);
   return (
     <li className={cx("nre-attempt", `nre-attempt-${item.verdict}`)}>
       <div className="nre-attempt-head">
@@ -50,7 +61,8 @@ export function AttemptRow({
         {/* agent 键:稳定散列上色,与其它块(MetricMatrix 列头、DeltaTable 行…)同键同色 */}
         <span className={cx("nre-attempt-agent", "nre-key", colorClassForKey(item.agent))}>{item.agent}</span>
         <span className="nre-attempt-duration">{formatDurationMs(item.durationMs)}</span>
-        {item.costUSD !== undefined && <span className="nre-attempt-cost">{formatUSD(item.costUSD)}</span>}
+        {/* costUSD 缺失一律 null(测不了),不显示也不伪造 0 */}
+        {item.costUSD !== null && <span className="nre-attempt-cost">{formatUSD(item.costUSD)}</span>}
       </div>
       {reason && <p className="nre-attempt-result">{reason}</p>}
     </li>
@@ -58,25 +70,25 @@ export function AttemptRow({
 }
 
 export function AttemptList({
-  items,
+  data,
   total,
-  attemptHref,
+  attemptHref = DEFAULT_ATTEMPT_HREF,
   className,
   locale = DEFAULT_REPORT_LOCALE,
 }: {
-  items: AttemptListItem[];
-  /** items 被 slice 时的原始数量;如实显示还剩多少条没展示。 */
+  data: readonly AttemptListItem[];
+  /** data 被 slice 时的原始数量;如实显示还剩多少条没展示。 */
   total?: number;
-  attemptHref: (locator: AttemptLocator) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
   className?: string;
   locale?: ReportLocale;
 }): ReactElement {
-  const remaining = (total ?? items.length) - items.length;
+  const remaining = (total ?? data.length) - data.length;
   return (
     <section className={cx("nre", "nre-attempt-list", className)}>
-      {items.length === 0 && <p className="nre-attempt-list-empty">{localeText(locale, "attemptList.empty")}</p>}
+      {data.length === 0 && <p className="nre-attempt-list-empty">{localeText(locale, "attemptList.empty")}</p>}
       <ul className="nre-attempts">
-        {items.map((item) => (
+        {data.map((item) => (
           <AttemptRow key={item.locator} item={item} attemptHref={attemptHref} locale={locale} />
         ))}
       </ul>

package/src/report/react/DeltaTable.tsx

@@ -1,22 +1,21 @@
 // DeltaTable:成对对比(B 相对 A)。每格三个值:A、B、Δ;
-// Δ 的涨跌好坏由指标的 better 判定并配色(涨不一定是好——成本涨了是坏);
-// 任一侧缺数据时 Δ 显示为缺,不硬算(数据侧已给 delta: null,这里只如实渲染)。
+// Δ 的涨跌好坏由数据侧算好的 outcome 驱动配色(涨不一定是好——成本涨了是坏);
+// 任一侧缺数据时 Δ 显示为缺,不硬算(数据侧已给 delta: null / outcome: "unavailable")。
+// 0 对不是错误:派生形态(pairsByFlag)配不出对时显示明确空态并报告配对域实验数。
 
 import type { ReactElement } from "react";
-import type { DeltaData, MetricColumn } from "../types.ts";
-import { DEFAULT_REPORT_LOCALE, localeText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
+import type { DeltaData } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveLocalizedText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
 import { MetricCellView } from "./cell.tsx";
 import { colorClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
 
-/** Δ 的语义配色 class:好/坏由 better 方向判定,不看正负号本身。 */
-function deltaToneClass(delta: number | null, better: MetricColumn["better"]): string {
-  if (delta === null) return "nre-delta-missing";
-  if (delta === 0) return "nre-delta-flat";
-  if (!better) return "nre-delta-neutral"; // 指标没表态方向,只显示不评判
-  const improved = better === "higher" ? delta > 0 : delta < 0;
-  return improved ? "nre-delta-good" : "nre-delta-bad";
-}
+const OUTCOME_CLASS: Record<string, string> = {
+  improved: "nre-delta-good",
+  regressed: "nre-delta-bad",
+  unchanged: "nre-delta-flat",
+  unavailable: "nre-delta-missing",
+};
 
 export function DeltaTable({
   data,
@@ -27,6 +26,15 @@ export function DeltaTable({
   className?: string;
   locale?: ReportLocale;
 }): ReactElement {
+  if (data.rows.length === 0) {
+    return (
+      <div className={cx("nre", "nre-delta-table-empty", className)}>
+        <p className="nre-missing">
+          {localeText(locale, "delta.empty", { experiments: data.experiments ?? 0 })}
+        </p>
+      </div>
+    );
+  }
   return (
     <table className={cx("nre", "nre-delta-table", className)}>
       <thead>
@@ -43,39 +51,49 @@ export function DeltaTable({
         </tr>
       </thead>
       <tbody>
-        {data.rows.map((row) => (
-          <tr key={row.key}>
-            <th scope="row" className="nre-pair">
-              {/* pair 的 label(如 agent 名):稳定散列上色,与 scatter 的线同色 */}
-              <span className={cx("nre-row-key", "nre-key", colorClassForKey(row.key))}>{row.key}</span>
-              <span className="nre-pair-ids">
-                {row.a.experimentId} → {row.b.experimentId}
-              </span>
-            </th>
-            {data.columns.map((col) => {
-              const cell = row.cells[col.key];
-              if (!cell) return <td key={col.key} className="nre-td-empty" />;
-              return (
-                <td key={col.key} className="nre-delta-cell">
-                  {/* A/B 走统一的 MetricCellView:缺数据文案与覆盖率角标同一套 */}
-                  <span className="nre-delta-side nre-delta-a">
-                    <span className="nre-delta-tag">A</span>
-                    <MetricCellView cell={cell.a} locale={locale} />
-                  </span>
-                  <span className="nre-delta-side nre-delta-b">
-                    <span className="nre-delta-tag">B</span>
-                    <MetricCellView cell={cell.b} locale={locale} />
-                  </span>
-                  <span className={cx("nre-delta-side", "nre-delta-d", deltaToneClass(cell.delta, col.better))}>
-                    <span className="nre-delta-tag">Δ</span>
-                    {/* 任一侧 null → delta null:显示缺,不硬算 */}
-                    {cell.delta === null ? <span className="nre-missing">{localeText(locale, "cell.missing")}</span> : cell.display}
-                  </span>
-                </td>
-              );
-            })}
-          </tr>
-        ))}
+        {data.rows.map((row) => {
+          const label = resolveLocalizedText(row.label, locale);
+          return (
+            <tr key={row.key}>
+              <th scope="row" className="nre-pair">
+                {/* pair 的 label:作者声明(或派生规则生成)原样透传;稳定散列上色 */}
+                <span className={cx("nre-row-key", "nre-key", colorClassForKey(label))}>{label}</span>
+                <span className="nre-pair-ids">
+                  {row.a.key} → {row.b.key}
+                </span>
+              </th>
+              {data.columns.map((col) => {
+                const cell = row.cells[col.key];
+                if (!cell) return <td key={col.key} className="nre-td-empty" />;
+                return (
+                  <td key={col.key} className="nre-delta-cell">
+                    {/* A/B 走统一的 MetricCellView:缺数据文案与覆盖率角标同一套 */}
+                    <span className="nre-delta-side nre-delta-a">
+                      <span className="nre-delta-tag">A</span>
+                      <MetricCellView cell={cell.a} locale={locale} />
+                    </span>
+                    <span className="nre-delta-side nre-delta-b">
+                      <span className="nre-delta-tag">B</span>
+                      <MetricCellView cell={cell.b} locale={locale} />
+                    </span>
+                    <span
+                      className={cx("nre-delta-side", "nre-delta-d", OUTCOME_CLASS[cell.outcome])}
+                      data-outcome={cell.outcome}
+                    >
+                      <span className="nre-delta-tag">Δ</span>
+                      {/* 任一侧 null → delta null:显示缺,不硬算 */}
+                      {cell.delta === null ? (
+                        <span className="nre-missing">{localeText(locale, "cell.missing")}</span>
+                      ) : (
+                        resolveLocalizedText(cell.display, locale)
+                      )}
+                    </span>
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
       </tbody>
     </table>
   );

package/src/report/react/ExperimentComparison.tsx

@@ -1,21 +1,26 @@
-// ExperimentComparison 的 web 面：完整持有所有可比组，组选择只切换已经独立计算好的 panel。
-// 静态 HTML 用原生 <details> 保留每组完整内容；enhance.js 再把上方摘要卡变成单选切换。
+// ExperimentComparison 的 web 面:完整持有所有可比组,组选择只切换已经独立计算好的 panel。
+// 静态 HTML 用原生 <details> 保留每组完整内容(第一组默认展开、无 JS 完整可读);
+// enhance.js 再把上方摘要卡变成单选切换。切组是纯浏览状态,不重新计算任何数字。
 
 import type { ReactElement } from "react";
-import type { ExperimentComparisonData } from "../built-ins/experiment-comparison.tsx";
+import type { ExperimentComparisonData } from "../types.ts";
 import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
-import { ExperimentList, MetricScatter } from "../components.tsx";
-import { GroupSummary } from "./GroupSummary.tsx";
+import { ScopeSummary } from "./ScopeSummary.tsx";
+import { MetricScatter } from "./MetricScatter.tsx";
+import { ExperimentList } from "./ExperimentList.tsx";
+import type { AttemptLocator } from "../../results/locator.ts";
 import { cx } from "./format.ts";
 
 export function ExperimentComparisonView({
   data,
   className,
   locale = DEFAULT_REPORT_LOCALE,
+  attemptHref,
 }: {
   data: ExperimentComparisonData;
   className?: string;
   locale?: ReportLocale;
+  attemptHref?: (locator: AttemptLocator) => string;
 }): ReactElement {
   if (data.groups.length === 0) {
     return (
@@ -43,7 +48,7 @@ export function ExperimentComparisonView({
             data-nre-experiment-group-select={index}
           >
             <strong className="nre-experiment-group-name">{group.key}</strong>
-            <GroupSummary data={group.summary} locale={locale} />
+            <ScopeSummary data={group.summary} locale={locale} />
           </div>
         ))}
       </div>
@@ -59,7 +64,7 @@ export function ExperimentComparisonView({
           >
             <summary>{group.key}</summary>
             <MetricScatter data={group.scatter} locale={locale} />
-            <ExperimentList items={group.experiments} filter locale={locale} relativeTo={group.key} />
+            <ExperimentList data={group.experiments} filter locale={locale} relativeTo={group.key} attemptHref={attemptHref} />
           </details>
         ))}
       </div>