niceeval 0.5.4 → 0.6.0

package/src/report/react/MetricScatter.tsx

@@ -1,54 +1,68 @@
-// MetricScatter:质量 × 成本 frontier 的积木,内联 SVG、零图表库。
+// MetricScatter:质量 × 成本 frontier 的积木,内联 SVG、零图表库、零 hooks。
 // 轴向随 better:"lower" 的轴反向画,「好」的角落恒在右上(成本轴 $20 → $0 就是这么来的);
-// 同系列的点按 x 值排序连线,系列名标在线旁;x 或 y 为 null 的点不画,
-// 底部注脚如实报「n 个点缺数据」;hover 信息退化为 SVG <title>,不 hydrate 也在。
+// niceTicks 刻度 + 网格线;每个点直接标注(防撞布局,被挤开时补 leader line);
+// 同系列的点按 x 值排序连线,系列图例列在图下。x 或 y 为 null 的点不画,
+// 底部注脚如实报「n 个点缺数据」;hover 信息退化为 SVG <title>,不 hydrate 也在
+// (enhance.js 在场时升级为样式化 tooltip)。配色走类名(nre-series-cN)由 CSS 上色,
+// 深色主题下图表随令牌切换,不留内联 hex。
 
 import type { ReactElement } from "react";
 import type { MetricColumn, ScatterData } from "../types.ts";
-import { colorHexForKey } from "./colors.ts";
-import { MISSING_TEXT, cx } from "./format.ts";
+import { formatMetricValue } from "../format.ts";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
+import { layoutLabelOffsets, niceTicks } from "./chart-math.ts";
+import { colorClassForKey, seriesClassForKey } from "./colors.ts";
+import { cx } from "./format.ts";
 
-// 画布与边距:右侧留白给系列名,底部给 x 轴标签
 const WIDTH = 640;
-const HEIGHT = 400;
-const PLOT = { left: 64, right: WIDTH - 140, top: 24, bottom: HEIGHT - 56 };
+const HEIGHT = 360;
+const MARGIN = { top: 26, right: 24, bottom: 46, left: 62 };
+const PLOT_W = WIDTH - MARGIN.left - MARGIN.right;
+const PLOT_H = HEIGHT - MARGIN.top - MARGIN.bottom;
 
 /** 可画的点:x/y 都有值。组件内部的整理结果,不改数据。 */
 interface DrawablePoint {
   key: string;
   series?: string;
+  label: string;
   xValue: number;
   yValue: number;
-  xDisplay: string;
-  yDisplay: string;
   title: string;
   px: number;
   py: number;
 }
 
-/** 一根轴的线性映射:值 → 像素;better:"lower" 时反向,好的一端固定在右/上。 */
+/** 点的直接标签:experiment id 的末段(完整 id 在 <title> 里)。 */
+function pointLabel(key: string): string {
+  return key.split("/").filter(Boolean).at(-1) ?? key;
+}
+
+/**
+ * 一根轴:niceTicks 撑出整齐的值域,值 → 像素做线性映射;
+ * better: "lower" 时反向,好的一端固定在右 / 上。
+ */
 function axisScale(values: number[], better: MetricColumn["better"], pixelLo: number, pixelHi: number) {
-  const lo = Math.min(...values);
-  const hi = Math.max(...values);
-  // 单值域:铺 ±1 让唯一的点落在正中,而不是除零
-  const span = hi - lo || 2;
-  const padded = { lo: lo - (hi - lo ? span * 0.08 : 1), hi: hi + (hi - lo ? span * 0.08 : 1) };
+  const ticks = niceTicks(Math.min(...values), Math.max(...values), 5);
+  const lo = ticks[0];
+  const hi = ticks[ticks.length - 1];
   const scale = (v: number) => {
-    let t = (v - padded.lo) / (padded.hi - padded.lo);
+    let t = (v - lo) / (hi - lo || 1);
     if (better === "lower") t = 1 - t; // 反向:值越低越靠「好」的一端
     return pixelLo + t * (pixelHi - pixelLo);
   };
-  return { lo, hi, scale };
+  return { ticks, scale };
 }
 
 export function MetricScatter({
   data,
   pointHref,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: ScatterData;
   pointHref?: (row: ScatterData["rows"][number]) => string;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   const missing = data.rows.filter((r) => r.x.value === null || r.y.value === null);
   const drawableRows = data.rows.filter((r) => r.x.value !== null && r.y.value !== null);
@@ -56,23 +70,39 @@ export function MetricScatter({
   const missingNote =
     missing.length > 0 ? (
       <p className="nre-scatter-missing" title={missing.map((r) => r.key).join(", ")}>
-        {missing.length} {missing.length === 1 ? "point" : "points"} missing data
+        {countText(locale, "pointsMissing", missing.length)}
       </p>
     ) : null;
 
-  // 一张全缺的图不画空坐标系:缺数据文案 + 注脚,与表格的「绝不画 0」同一态度
+  const xLabel = resolveMetricLabel(data.x.label, locale, data.x.key);
+  const yLabel = resolveMetricLabel(data.y.label, locale, data.y.key);
+
+  // 0 个可画点:x/y 指标没有可用数据 —— 明确说缺哪两个指标,不画一张空坐标系
+  // (与表格的「绝不画 0」同态度)。
   if (drawableRows.length === 0) {
     return (
       <figure className={cx("nre", "nre-metric-scatter", className)}>
-        <p className="nre-missing">{MISSING_TEXT}</p>
+        <p className="nre-scatter-empty nre-missing">{localeText(locale, "scatter.noData", { x: xLabel, y: yLabel })}</p>
+        {missingNote}
+      </figure>
+    );
+  }
+
+  // 恰好 1 个可画点:成本 × 通过率的对比至少要两个实验,单点不成图 —— 显式说清而不是画个孤点。
+  if (drawableRows.length === 1) {
+    return (
+      <figure className={cx("nre", "nre-metric-scatter", className)}>
+        <p className="nre-scatter-empty">{localeText(locale, "scatter.needTwo", { x: xLabel, y: yLabel })}</p>
         {missingNote}
       </figure>
     );
   }
 
-  const xScale = axisScale(drawableRows.map((r) => r.x.value as number), data.x.better, PLOT.left, PLOT.right);
+  const axisLabel = (label: string, col: MetricColumn) => `${label}${col.unit ? `(${col.unit})` : ""}`;
+
+  const xScale = axisScale(drawableRows.map((r) => r.x.value as number), data.x.better, MARGIN.left, MARGIN.left + PLOT_W);
   // y 像素轴向下增长:better:"higher" 高值在上 → 映射到 [bottom, top];"lower" 由 axisScale 反向后同样落到上方
-  const yScale = axisScale(drawableRows.map((r) => r.y.value as number), data.y.better, PLOT.bottom, PLOT.top);
+  const yScale = axisScale(drawableRows.map((r) => r.y.value as number), data.y.better, MARGIN.top + PLOT_H, MARGIN.top);
 
   const points: DrawablePoint[] = drawableRows.map((r) => {
     const xValue = r.x.value as number;
@@ -80,12 +110,12 @@ export function MetricScatter({
     return {
       key: r.key,
       series: r.series,
+      label: pointLabel(r.key),
       xValue,
       yValue,
-      xDisplay: r.x.display,
-      yDisplay: r.y.display,
-      // hover 内容:display 与 samples/total(docs/reports.md 行为清单)
-      title: `${r.key}\n${data.x.label}: ${r.x.display}(${r.x.samples}/${r.x.total})\n${data.y.label}: ${r.y.display}(${r.y.samples}/${r.y.total})`,
+      // hover 内容:experiment(点键)+ 系列(series,CostPassRateComparison 传的是 agent 维度,
+      // 有则加一行;无系列的散点没有这行)+ 两轴 display 与 samples/total(docs/feature/reports/library.md「MetricScatter」行为清单)
+      title: `${r.key}${r.series !== undefined ? `\n${r.series}` : ""}\n${xLabel}: ${r.x.display}(${r.x.samples}/${r.x.total})\n${yLabel}: ${r.y.display}(${r.y.samples}/${r.y.total})`,
       px: xScale.scale(xValue),
       py: yScale.scale(yValue),
     };
@@ -104,14 +134,12 @@ export function MetricScatter({
   }
   for (const list of bySeries.values()) list.sort((a, b) => a.xValue - b.xValue);
 
-  // 轴端刻度打在真实极值点的位置上(值域有 padding,角落不等于极值)
-  const xTicks = xScale.lo === xScale.hi ? [xScale.lo] : [xScale.lo, xScale.hi];
-  const yTicks = yScale.lo === yScale.hi ? [yScale.lo] : [yScale.lo, yScale.hi];
-  const displayFor = (axis: "x" | "y", value: number) =>
-    points.find((p) => (axis === "x" ? p.xValue : p.yValue) === value)?.[axis === "x" ? "xDisplay" : "yDisplay"] ??
-    String(value);
-
-  const axisLabel = (col: MetricColumn) => `${col.label}${col.unit ? `(${col.unit})` : ""}`;
+  // 直接标签的防撞布局:靠右的点把标签锚到左侧,重叠的往下推、补 leader line
+  const positions = points.map((p) => {
+    const anchorLeft = p.px >= MARGIN.left + PLOT_W * 0.72;
+    return { cx: p.px, cy: p.py, anchorLeft, width: p.label.length * 6.4 + 10 };
+  });
+  const labelOffsets = layoutLabelOffsets(positions);
 
   return (
     <figure className={cx("nre", "nre-metric-scatter", className)}>
@@ -119,98 +147,110 @@ export function MetricScatter({
         className="nre-scatter-svg"
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
         role="img"
-        aria-label={`${axisLabel(data.x)} × ${axisLabel(data.y)}`}
+        aria-label={`${axisLabel(xLabel, data.x)} × ${axisLabel(yLabel, data.y)}`}
       >
-        {/* 坐标框 */}
-        <rect
-          className="nre-scatter-plot"
-          x={PLOT.left}
-          y={PLOT.top}
-          width={PLOT.right - PLOT.left}
-          height={PLOT.bottom - PLOT.top}
-          fill="none"
-          stroke="#d4d4d4"
-        />
+        {/* 网格:niceTicks 的整齐刻度线,颜色走 CSS(var(--line)) */}
+        <g className="nre-scatter-grid">
+          {yScale.ticks.map((tick) => (
+            <line key={`gy${tick}`} x1={MARGIN.left} x2={MARGIN.left + PLOT_W} y1={yScale.scale(tick)} y2={yScale.scale(tick)} />
+          ))}
+          {xScale.ticks.map((tick) => (
+            <line key={`gx${tick}`} y1={MARGIN.top} y2={MARGIN.top + PLOT_H} x1={xScale.scale(tick)} x2={xScale.scale(tick)} />
+          ))}
+        </g>
+
         {/* 「好」的角落恒在右上:轴向已按 better 反转,这里只是把这句契约写在图上 */}
-        <text className="nre-scatter-better-hint" x={PLOT.right - 6} y={PLOT.top + 14} textAnchor="end" fontSize={11} fill="#9ca3af">
-          better ↗
+        <text className="nre-scatter-better-hint" x={MARGIN.left + PLOT_W - 6} y={MARGIN.top + 14} textAnchor="end">
+          {localeText(locale, "scatter.betterHint")}
         </text>
 
+        {/* 刻度:已格式化的整齐值(formatMetricValue 与计算侧同一套) */}
+        <g className="nre-scatter-axis nre-scatter-axis-y">
+          {yScale.ticks.map((tick) => (
+            <text key={`ay${tick}`} className="nre-scatter-tick" x={MARGIN.left - 8} y={yScale.scale(tick) + 3} textAnchor="end">
+              {formatMetricValue(tick, data.y.unit)}
+            </text>
+          ))}
+        </g>
+        <g className="nre-scatter-axis nre-scatter-axis-x">
+          {xScale.ticks.map((tick) => (
+            <text key={`ax${tick}`} className="nre-scatter-tick" x={xScale.scale(tick)} y={MARGIN.top + PLOT_H + 16} textAnchor="middle">
+              {formatMetricValue(tick, data.x.unit)}
+            </text>
+          ))}
+        </g>
+
         {/* 轴标签 */}
-        <text className="nre-scatter-xlabel" x={(PLOT.left + PLOT.right) / 2} y={HEIGHT - 8} textAnchor="middle" fontSize={12} fill="#525252">
-          {axisLabel(data.x)}
+        <text className="nre-scatter-xlabel" x={MARGIN.left + PLOT_W / 2} y={HEIGHT - 8} textAnchor="middle">
+          {axisLabel(xLabel, data.x)}
         </text>
         <text
           className="nre-scatter-ylabel"
-          x={16}
-          y={(PLOT.top + PLOT.bottom) / 2}
+          x={14}
+          y={MARGIN.top + PLOT_H / 2}
           textAnchor="middle"
-          fontSize={12}
-          fill="#525252"
-          transform={`rotate(-90 16 ${(PLOT.top + PLOT.bottom) / 2})`}
+          transform={`rotate(-90 14 ${MARGIN.top + PLOT_H / 2})`}
         >
-          {axisLabel(data.y)}
+          {axisLabel(yLabel, data.y)}
         </text>
 
-        {/* 轴端刻度:标在真实极值的位置上,文案用该点已格式化的 display */}
-        {xTicks.map((v) => (
-          <text key={`x${v}`} className="nre-scatter-tick" x={xScale.scale(v)} y={PLOT.bottom + 16} textAnchor="middle" fontSize={11} fill="#737373">
-            {displayFor("x", v)}
-          </text>
-        ))}
-        {yTicks.map((v) => (
-          <text key={`y${v}`} className="nre-scatter-tick" x={PLOT.left - 6} y={yScale.scale(v) + 4} textAnchor="end" fontSize={11} fill="#737373">
-            {displayFor("y", v)}
-          </text>
-        ))}
-
-        {/* 系列连线 + 线旁的系列名(标在视觉上最靠右的点旁) */}
+        {/* 系列连线:类名上色(nre-series-cN),深色主题跟随 */}
         {seriesOrder.map((series) => {
           const list = bySeries.get(series)!;
-          const color = colorHexForKey(series);
-          const labelAt = list.reduce((a, b) => (b.px > a.px ? b : a));
+          if (list.length < 2) return null;
           return (
-            <g key={series} className="nre-scatter-series" data-series={series}>
-              {list.length > 1 && (
-                <polyline
-                  className="nre-scatter-line"
-                  points={list.map((p) => `${p.px},${p.py}`).join(" ")}
-                  fill="none"
-                  stroke={color}
-                  strokeWidth={1.5}
-                />
-              )}
-              <text className="nre-scatter-series-label" x={labelAt.px + 8} y={labelAt.py + 4} fontSize={12} fill={color}>
-                {series}
-              </text>
-            </g>
+            <polyline
+              key={series}
+              className={cx("nre-scatter-line", seriesClassForKey(series))}
+              data-series={series}
+              points={list.map((p) => `${p.px},${p.py}`).join(" ")}
+              fill="none"
+            />
           );
         })}
 
-        {/* 点(带 <title> 的 hover;pointHref 时包普通 <a>,静态导出也能下钻) */}
+        {/* 点:g 内带 <title>(无 JS 的原生 hover)、直接标签与 leader line;
+            pointHref 时包普通 <a>,静态导出也能下钻 */}
         {points.map((p, i) => {
-          const circle = (
-            <circle
-              className="nre-scatter-point"
+          const { anchorLeft } = positions[i];
+          const labelX = p.px + (anchorLeft ? -10 : 10);
+          const labelY = p.py + 4 + labelOffsets[i];
+          const group = (
+            <g
+              className={cx("nre-scatter-point", p.series !== undefined ? seriesClassForKey(p.series) : "nre-series-none")}
               data-key={p.key}
-              cx={p.px}
-              cy={p.py}
-              r={4.5}
-              fill={p.series !== undefined ? colorHexForKey(p.series) : "#525252"}
             >
               <title>{p.title}</title>
-            </circle>
+              {/* 标签被挤开时补一条 leader line,避免脱离原点看不出对应关系 */}
+              {labelOffsets[i] !== 0 && <line className="nre-leader" x1={p.px} y1={p.py} x2={labelX} y2={labelY - 4} />}
+              <circle className="nre-scatter-hit" cx={p.px} cy={p.py} r={12} />
+              <circle className="nre-scatter-dot" cx={p.px} cy={p.py} r={4.5} />
+              <text className="nre-scatter-point-label" x={labelX} y={labelY} textAnchor={anchorLeft ? "end" : "start"}>
+                {p.label}
+              </text>
+            </g>
           );
           const row = drawableRows[i];
           return pointHref ? (
             <a key={p.key} className="nre-scatter-point-link" href={pointHref(row)}>
-              {circle}
+              {group}
             </a>
           ) : (
-            <g key={p.key}>{circle}</g>
+            <g key={p.key}>{group}</g>
           );
         })}
       </svg>
+
+      {/* 系列图例:同键同色(与其它块的稳定散列一致) */}
+      {seriesOrder.length > 0 && (
+        <figcaption className="nre-scatter-legend">
+          {seriesOrder.map((series) => (
+            <span key={series} className={cx("nre-legend-key", "nre-key", colorClassForKey(series))}>
+              {series}
+            </span>
+          ))}
+        </figcaption>
+      )}
       {missingNote}
     </figure>
   );

package/src/report/react/MetricTable.tsx

@@ -1,71 +1,171 @@
-// MetricTable:行维度 × 指标列。
-// 行按传入顺序渲染——排序发生在计算侧(table() 的 sort 参数),组件不重排;
-// 「点列头重排」是后续的渐进增强,不 hydrate 时以数据侧预排的顺序呈现即完整。
+// MetricTable:行维度 × 指标列。没有实体下钻——要展开到 experiment 的 Eval 或 Eval 的
+// Attempt,用 ExperimentList / EvalList,这个组件只表达任意维度 × 任意指标。
+// 行按传入顺序渲染——排序发生在计算侧(tableData 的 sort 参数),组件不重排;
+// 静态 HTML 以数据侧预排的顺序呈现即完整。web 面额外输出渐进增强的 data 属性:
+// 所有表头带 data-nre-sort、格子带 data-sort-value,enhance.js 在场时点表头
+// 可就地重排(纯展示态交互,不改口径);filter 开时在表格前渲染过滤输入框。
+// meta 在场(rows: "experiment")时补 Model / Agent / Verdicts 列,列序对齐 view
+// 原生榜单:experiment、model、agent、指标列…、verdicts。
 // 列头以箭头标注 better 方向;samples < total 的格子带覆盖率角标;
 // 一组全 null 渲染成「缺数据」,绝不画 0(逻辑在 MetricCellView)。
 
 import type { ReactElement } from "react";
-import type { AttemptRef, TableData } from "../types.ts";
+import type { TableData, TableRowMeta } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
 import { MetricCellView } from "./cell.tsx";
 import { colorClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
 
+/** verdict 计票 pill(「3 passed / 1 failed」):非零判定各一枚,全零如实空。 */
+function VerdictTally({
+  verdicts,
+  locale,
+}: {
+  verdicts: NonNullable<TableRowMeta["verdicts"]>;
+  locale: ReportLocale;
+}): ReactElement {
+  const kinds = (["passed", "failed", "errored", "skipped"] as const).filter((k) => verdicts[k] > 0);
+  return (
+    <span className="nre-verdict-tally">
+      {kinds.map((kind) => (
+        <span key={kind} className={cx("nre-verdict-pill", `nre-verdict-${kind}`)}>
+          {verdicts[kind]} {localeText(locale, `verdict.${kind}`)}
+        </span>
+      ))}
+      {kinds.length === 0 && <span className="nre-missing">—</span>}
+    </span>
+  );
+}
+
 export function MetricTable({
   data,
   attemptHref,
+  filter,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: TableData;
-  attemptHref?: (ref: AttemptRef) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
+  filter?: boolean;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
-  return (
-    <table className={cx("nre", "nre-metric-table", className)}>
+  const hasMeta = data.rows.some((row) => row.meta !== undefined);
+  const hasModel = data.rows.some((row) => row.meta?.model !== undefined);
+  const hasVerdicts = data.rows.some((row) => row.meta?.verdicts !== undefined);
+
+  const table = (
+    <table className={cx("nre", "nre-metric-table", !filter && className)}>
       <thead>
         <tr>
-          <th scope="col" className="nre-dimension">
+          <th scope="col" className="nre-dimension" data-nre-sort="">
             {data.dimension}
           </th>
+          {hasMeta && hasModel && (
+            <th scope="col" className="nre-meta-col" data-nre-sort="">
+              {localeText(locale, "table.model")}
+            </th>
+          )}
+          {hasMeta && (
+            <th scope="col" className="nre-meta-col" data-nre-sort="">
+              {localeText(locale, "table.agent")}
+            </th>
+          )}
           {data.columns.map((col) => (
-            <th scope="col" key={col.key} className="nre-metric-col">
-              {col.label}
+            <th scope="col" key={col.key} className="nre-metric-col" data-nre-sort="">
+              {resolveMetricLabel(col.label, locale, col.key)}
               {col.unit && <span className="nre-unit">({col.unit})</span>}
               {/* better 方向提示:↑ 越高越好 / ↓ 越低越好 */}
               {col.better && (
                 <span
                   className="nre-better"
-                  title={col.better === "higher" ? "higher is better" : "lower is better"}
+                  title={localeText(locale, col.better === "higher" ? "table.higherBetter" : "table.lowerBetter")}
                 >
                   {col.better === "higher" ? "↑" : "↓"}
                 </span>
               )}
             </th>
           ))}
+          {hasVerdicts && (
+            <th scope="col" className="nre-verdicts-col" data-nre-sort="">
+              {localeText(locale, "table.verdicts")}
+            </th>
+          )}
         </tr>
       </thead>
       <tbody>
         {data.rows.map((row) => (
           <tr key={row.key}>
             {/* 行键 = 维度键(如 agent):稳定散列上色,跨块同键同色 */}
-            <th scope="row" className={cx("nre-row-key", "nre-key", colorClassForKey(row.key))}>
+            <th
+              scope="row"
+              className={cx("nre-row-key", "nre-key", colorClassForKey(row.key))}
+              data-sort-value={row.key}
+            >
               {row.key}
+              {/* rows: "experiment" 专属:eval/attempt 数 + 最后运行时间,行键下的一行紧凑摘要
+                  (旧 ExperimentRow 的 "N eval results · N runs · 最后运行时间") */}
+              {row.meta?.evals !== undefined && (
+                <div className="nre-row-meta-sub">
+                  {localeText(locale, "overview.evalsCount", { n: row.meta.evals })}
+                  {row.meta.attempts !== undefined && row.meta.attempts > row.meta.evals
+                    ? ` · ${localeText(locale, "overview.attemptsCount", { n: row.meta.attempts })}`
+                    : ""}
+                  {row.meta.lastRunAt ? ` · ${localeText(locale, "latestRun", { run: row.meta.lastRunAt })}` : ""}
+                </div>
+              )}
             </th>
+            {hasMeta && hasModel && (
+              <td className="nre-td nre-meta-cell" data-sort-value={row.meta?.model ?? ""}>
+                {row.meta?.model ?? <span className="nre-missing">—</span>}
+              </td>
+            )}
+            {hasMeta && (
+              <td className="nre-td nre-meta-cell" data-sort-value={row.meta?.agent ?? ""}>
+                {row.meta?.agent ?? <span className="nre-missing">—</span>}
+              </td>
+            )}
             {data.columns.map((col) => {
               const cell = row.cells[col.key];
               return (
-                <td key={col.key} className="nre-td">
+                <td key={col.key} className="nre-td" data-sort-value={cell?.value ?? ""}>
                   {cell ? (
-                    <MetricCellView cell={cell} attemptHref={attemptHref} />
+                    <MetricCellView cell={cell} attemptHref={attemptHref} locale={locale} />
                   ) : (
-                    // 数据侧没给这个格子(理论上 table() 不会缺列)——按空处理,不编数
+                    // 数据侧没给这个格子(理论上 tableData 不会缺列)——按空处理,不编数
                     <span className="nre-empty" />
                   )}
                 </td>
               );
             })}
+            {hasVerdicts && (
+              <td className="nre-td nre-verdicts-cell" data-sort-value={row.meta?.verdicts?.passed ?? ""}>
+                {row.meta?.verdicts ? (
+                  <VerdictTally verdicts={row.meta.verdicts} locale={locale} />
+                ) : (
+                  <span className="nre-missing">—</span>
+                )}
+              </td>
+            )}
           </tr>
         ))}
       </tbody>
     </table>
   );
+
+  if (!filter) return table;
+  // 过滤输入框渲染在表格前(同一个 wrap 里),enhance.js 经 data-nre-filter 接管;
+  // 无 JS 时静默无功能,表格内容依旧完整。
+  return (
+    <div className={cx("nre", "nre-metric-table-wrap", className)}>
+      <input
+        className="nre-filter"
+        data-nre-filter=""
+        type="search"
+        placeholder={localeText(locale, "table.filterPlaceholder")}
+      />
+      {table}
+    </div>
+  );
 }

package/src/report/react/RunOverview.tsx

@@ -1,69 +1,91 @@
 // RunOverview:页头 KPI 条——「这批数据是什么」。
 // 数字下面标注数据来源(几个快照、何时跑的);warnings 有内容时直接显示在条内,
-// 诚实不靠使用者记得渲染(docs/reports.md「第一档」行为清单)。
+// 诚实不靠使用者记得渲染(docs/feature/reports/library.md「RunOverview」行为清单)。
 
 import type { ReactElement } from "react";
 import type { OverviewData } from "../types.ts";
-import { MISSING_TEXT, cx, formatDurationMs, formatPercent, formatUSD } from "./format.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { cx, formatDurationMs, formatUSD } from "./format.ts";
 
 export function RunOverview({
   data,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: OverviewData;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   const { totals } = data;
-  // 通过率口径与内置 passRate 指标一致:skipped → null 不进分母,errored/failed 计 0
-  const judged = totals.passed + totals.failed + totals.errored;
-  const passRate = judged > 0 ? formatPercent(totals.passed / judged) : null;
+  const missing = <span className="nre-missing">{localeText(locale, "cell.missing")}</span>;
+  // 通过率只渲染 computeCell 算好的 MetricCell,不现场重算——覆盖率角标复用
+  // MetricCellView 的缺数据/coverage 语义(缺数据 = 显式文案,绝不画 0%)
+  const { passRate } = totals;
+  const passRateNode =
+    passRate.value === null ? (
+      missing
+    ) : (
+      <>
+        {passRate.display}
+        {passRate.samples < passRate.total && (
+          <sup
+            className="nre-coverage"
+            title={localeText(locale, "cell.coverageTitle", { samples: passRate.samples, total: passRate.total })}
+          >
+            {passRate.samples}/{passRate.total}
+          </sup>
+        )}
+      </>
+    );
 
   return (
     <header className={cx("nre", "nre-overview", className)}>
       <dl className="nre-kpis">
         <div className="nre-kpi">
-          <dt>Snapshots</dt>
+          <dt>{localeText(locale, "overview.snapshots")}</dt>
           <dd>{data.snapshots.length}</dd>
         </div>
         <div className="nre-kpi">
-          <dt>Evals</dt>
+          <dt>{localeText(locale, "overview.evals")}</dt>
           <dd>{totals.evals}</dd>
         </div>
         <div className="nre-kpi">
-          <dt>attempts</dt>
+          <dt>{localeText(locale, "overview.attempts")}</dt>
           <dd>{totals.attempts}</dd>
         </div>
         <div className="nre-kpi">
-          <dt>Pass rate</dt>
-          <dd>{passRate ?? <span className="nre-missing">{MISSING_TEXT}</span>}</dd>
+          <dt>{localeText(locale, "overview.passRate")}</dt>
+          <dd>{passRateNode}</dd>
         </div>
         <div className="nre-kpi">
-          <dt>Total cost</dt>
+          <dt>{localeText(locale, "overview.totalCost")}</dt>
           {/* costUSD 全缺 = null:显示缺数据,不编 $0 */}
-          <dd>
-            {totals.costUSD === null ? (
-              <span className="nre-missing">{MISSING_TEXT}</span>
-            ) : (
-              formatUSD(totals.costUSD)
-            )}
-          </dd>
+          <dd>{totals.costUSD === null ? missing : formatUSD(totals.costUSD)}</dd>
         </div>
         <div className="nre-kpi">
-          <dt>Total duration</dt>
+          <dt>{localeText(locale, "overview.totalDuration")}</dt>
           <dd>{formatDurationMs(totals.durationMs)}</dd>
         </div>
       </dl>
 
-      <p className="nre-outcomes">
-        <span className="nre-outcome nre-outcome-passed">passed {totals.passed}</span>
-        <span className="nre-outcome nre-outcome-failed">failed {totals.failed}</span>
-        <span className="nre-outcome nre-outcome-errored">errored {totals.errored}</span>
-        <span className="nre-outcome nre-outcome-skipped">skipped {totals.skipped}</span>
+      <p className="nre-verdicts">
+        <span className="nre-verdict nre-verdict-passed">
+          {localeText(locale, "verdict.passed")} {totals.passed}
+        </span>
+        <span className="nre-verdict nre-verdict-failed">
+          {localeText(locale, "verdict.failed")} {totals.failed}
+        </span>
+        <span className="nre-verdict nre-verdict-errored">
+          {localeText(locale, "verdict.errored")} {totals.errored}
+        </span>
+        <span className="nre-verdict nre-verdict-skipped">
+          {localeText(locale, "verdict.skipped")} {totals.skipped}
+        </span>
       </p>
 
       {/* 数据来源:哪些快照、何时跑的——报告的数字都从这里来 */}
       <p className="nre-source">
-        Source: {data.snapshots.length} snapshots
+        {localeText(locale, "overview.source", { n: data.snapshots.length })}
         {data.snapshots.map((s) => (
           <span key={`${s.experimentId}@${s.startedAt}`} className="nre-source-snapshot">
             {s.experimentId}({s.agent}
@@ -72,7 +94,7 @@ export function RunOverview({
         ))}
       </p>
 
-      {/* 选集的警告(残缺快照等)直接渲染在条内,不静默;结构化字段供程序判断,这里打 message */}
+      {/* Selection 的警告(残缺快照等)直接渲染在条内,不静默;结构化字段供程序判断,这里打 message */}
       {data.warnings.length > 0 && (
         <ul className="nre-warnings">
           {data.warnings.map((w, i) => (