niceeval 0.5.3 → 0.6.0

package/src/report/react/AttemptList.tsx

@@ -0,0 +1,115 @@
+// AttemptList:实体列表的叶子层——每项一个 Attempt,固定展示判定、断言、error、Judge 评语
+// (assertions 的 detail/evidence)与证据引用(locator + 证据能力标记)。它不预设只看失败,
+// 报告作者过滤 items、用 .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 { colorClassForKey } from "./colors.ts";
+import { capabilityBadge, cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
+
+/** locator + 判定符 + 证据能力标记的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
+export function AttemptLocatorBadge({
+  item,
+  attemptHref,
+}: {
+  item: Pick<AttemptListItem, "locator" | "verdict" | "capabilities">;
+  attemptHref: (locator: AttemptLocator) => string;
+}): ReactElement {
+  const caps = capabilityBadge(item.capabilities);
+  return (
+    <a
+      className={cx("nre-locator", `nre-verdict-${item.verdict}`)}
+      href={attemptHref(item.locator)}
+    >
+      {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 展开区里的一行。 */
+export function AttemptRow({
+  item,
+  attemptHref,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  item: AttemptListItem;
+  attemptHref: (locator: AttemptLocator) => string;
+  locale?: ReportLocale;
+}): ReactElement {
+  return (
+    <li className={cx("nre-attempt", `nre-attempt-${item.verdict}`)}>
+      <div className="nre-attempt-head">
+        <AttemptLocatorBadge item={item} attemptHref={attemptHref} />
+        <span className="nre-attempt-eval">{item.evalId}</span>
+        <span className="nre-attempt-experiment">{item.experimentId}</span>
+        {/* 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>}
+      </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>
+      )}
+    </li>
+  );
+}
+
+export function AttemptList({
+  items,
+  total,
+  attemptHref,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  items: AttemptListItem[];
+  /** items 被 slice 时的原始数量;如实显示还剩多少条没展示。 */
+  total?: number;
+  attemptHref: (locator: AttemptLocator) => string;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const remaining = (total ?? items.length) - items.length;
+  return (
+    <section className={cx("nre", "nre-attempt-list", className)}>
+      {items.length === 0 && <p className="nre-attempt-list-empty">{localeText(locale, "attemptList.empty")}</p>}
+      <ul className="nre-attempts">
+        {items.map((item) => (
+          <AttemptRow key={item.locator} item={item} attemptHref={attemptHref} locale={locale} />
+        ))}
+      </ul>
+      {remaining > 0 && (
+        <p className="nre-truncated">{localeText(locale, "attemptList.truncated", { n: remaining })}</p>
+      )}
+    </section>
+  );
+}

package/src/report/react/DeltaTable.tsx

@@ -4,9 +4,10 @@
 
 import type { ReactElement } from "react";
 import type { DeltaData, MetricColumn } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
 import { MetricCellView } from "./cell.tsx";
 import { colorClassForKey } from "./colors.ts";
-import { MISSING_TEXT, cx } from "./format.ts";
+import { cx } from "./format.ts";
 
 /** Δ 的语义配色 class:好/坏由 better 方向判定,不看正负号本身。 */
 function deltaToneClass(delta: number | null, better: MetricColumn["better"]): string {
@@ -20,20 +21,22 @@ function deltaToneClass(delta: number | null, better: MetricColumn["better"]): s
 export function DeltaTable({
   data,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: DeltaData;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   return (
     <table className={cx("nre", "nre-delta-table", className)}>
       <thead>
         <tr>
           <th scope="col" className="nre-dimension">
-            pair (A → B)
+            {localeText(locale, "delta.pairHeader")}
           </th>
           {data.columns.map((col) => (
             <th scope="col" key={col.key} className="nre-metric-col">
-              {col.label}
+              {resolveMetricLabel(col.label, locale, col.key)}
               {col.unit && <span className="nre-unit">({col.unit})</span>}
             </th>
           ))}
@@ -57,16 +60,16 @@ export function DeltaTable({
                   {/* A/B 走统一的 MetricCellView:缺数据文案与覆盖率角标同一套 */}
                   <span className="nre-delta-side nre-delta-a">
                     <span className="nre-delta-tag">A</span>
-                    <MetricCellView cell={cell.a} />
+                    <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} />
+                    <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">{MISSING_TEXT}</span> : cell.display}
+                    {cell.delta === null ? <span className="nre-missing">{localeText(locale, "cell.missing")}</span> : cell.display}
                   </span>
                 </td>
               );

package/src/report/react/ExperimentList.tsx

@@ -0,0 +1,108 @@
+// ExperimentList:实体列表的第一级——每项固定代表一个 experiment,主行是身份(experiment id /
+// agent / model / flags)、Eval 判定构成与官方两级聚合汇总指标(passRate/cost/duration/tokens,
+// 复用 MetricCellView 与其它指标图形同一份渲染)。零 JS 用原生 <details> 展开到这个 experiment
+// 的 Eval:每道题一行,判定符 + 该题全部 Attempt 的 locator 徽标(内联,不用再点开一层)+
+// 通过时的平均耗时/成本、失败/出错时的原因摘要。
+
+import type { ReactElement } from "react";
+import type { ExperimentListEvalRow, ExperimentListItem } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { MetricCellView } from "./cell.tsx";
+import { AttemptLocatorBadge } from "./AttemptList.tsx";
+import { colorClassForKey } from "./colors.ts";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.ts";
+
+function EvalRow({
+  row,
+  attemptHref,
+}: {
+  row: ExperimentListEvalRow;
+  attemptHref: (locator: AttemptLocator) => string;
+}): ReactElement {
+  return (
+    <li className={cx("nre-experiment-eval-row", `nre-eval-${row.verdict}`)}>
+      <span className={cx("nre-eval-verdict", `nre-verdict-${row.verdict}`)}>{verdictMark(row.verdict)}</span>
+      <span className="nre-eval-id">{row.evalId}</span>
+      <span className="nre-eval-attempt-badges">
+        {row.attempts.map((attempt) => (
+          <AttemptLocatorBadge key={attempt.locator} item={attempt} attemptHref={attemptHref} />
+        ))}
+      </span>
+      {row.verdict === "passed" ? (
+        <span className="nre-eval-avg">
+          {formatDurationMs(row.duration.value ?? 0)}
+          {row.cost.value !== null && <> · {formatUSD(row.cost.value)}</>}
+        </span>
+      ) : (
+        <span className="nre-eval-reason">{row.reason}</span>
+      )}
+    </li>
+  );
+}
+
+function ExperimentCard({
+  item,
+  attemptHref,
+  locale,
+}: {
+  item: ExperimentListItem;
+  attemptHref: (locator: AttemptLocator) => string;
+  locale: ReportLocale;
+}): ReactElement {
+  return (
+    <li className="nre-experiment-entry">
+      <details className="nre-experiment-details">
+        <summary className="nre-experiment-summary">
+          <span className={cx("nre-experiment-id", "nre-key", colorClassForKey(item.experimentId))}>
+            {item.experimentId}
+          </span>
+          <span className="nre-experiment-agent">{item.agent}</span>
+          {item.model && <span className="nre-experiment-model">{item.model}</span>}
+          <span className="nre-experiment-cell">
+            <MetricCellView cell={item.passRate} attemptHref={attemptHref} locale={locale} />
+          </span>
+          <span className="nre-experiment-cell">
+            <MetricCellView cell={item.cost} attemptHref={attemptHref} locale={locale} />
+          </span>
+          <span className="nre-experiment-cell">
+            <MetricCellView cell={item.duration} attemptHref={attemptHref} locale={locale} />
+          </span>
+          <span className="nre-experiment-meta-sub">
+            {localeText(locale, "overview.evalsCount", { n: item.evals })}
+            {item.attempts > item.evals ? ` · ${localeText(locale, "overview.attemptsCount", { n: item.attempts })}` : ""}
+            {` · ${localeText(locale, "latestRun", { run: item.lastRunAt })}`}
+          </span>
+        </summary>
+        <ul className="nre-experiment-evals">
+          {item.evalRows.map((row) => (
+            <EvalRow key={row.evalId} row={row} attemptHref={attemptHref} />
+          ))}
+        </ul>
+      </details>
+    </li>
+  );
+}
+
+export function ExperimentList({
+  items,
+  attemptHref,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  items: ExperimentListItem[];
+  attemptHref: (locator: AttemptLocator) => string;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  return (
+    <div className={cx("nre", "nre-experiment-list", className)}>
+      {items.length === 0 && <p className="nre-experiment-list-empty">{localeText(locale, "attemptList.empty")}</p>}
+      <ul className="nre-experiments">
+        {items.map((item) => (
+          <ExperimentCard key={item.experimentId} item={item} attemptHref={attemptHref} locale={locale} />
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/report/react/GroupSummary.tsx

@@ -0,0 +1,66 @@
+// GroupSummary:一组 experiment(如自定义报告里同一 <Section> 内的全部 experiment)的
+// 紧凑摘要块——恢复旧 GroupSelector 卡片的信息密度(通过率、experiment/eval 数、failed、
+// errored、总成本、最后运行时间),但只渲染 GroupSummaryData 算好的 MetricCell / 计数,
+// 不现场重算比例(docs/feature/reports/library.md「GroupSummary」)。errored 为 0 时省略该片段(旧卡片同一姿态),
+// 但这只是渲染取舍——数据侧 verdicts.errored 字段本身永不省略。
+
+import type { ReactElement } from "react";
+import type { GroupSummaryData } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { MetricCellView } from "./cell.tsx";
+import { cx, formatUSD } from "./format.ts";
+
+export function GroupSummary({
+  data,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: GroupSummaryData;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const missing = <span className="nre-missing">{localeText(locale, "cell.missing")}</span>;
+  return (
+    <div className={cx("nre", "nre-group-summary", className)}>
+      <dl className="nre-group-kpis">
+        <div className="nre-group-kpi nre-group-kpi-rate">
+          <dt>{localeText(locale, "overview.passRate")}</dt>
+          <dd>
+            <MetricCellView cell={data.passRate} locale={locale} />
+          </dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "groupSummary.experiments")}</dt>
+          <dd>{data.experiments}</dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "overview.evals")}</dt>
+          <dd>{data.evals}</dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "overview.attempts")}</dt>
+          <dd>{data.attempts}</dd>
+        </div>
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "verdict.failed")}</dt>
+          <dd className="nre-verdict-failed">{data.verdicts.failed}</dd>
+        </div>
+        {/* errored 为 0 省略这一片段(旧 GroupSelector 卡片同一姿态);数据字段本身不受影响 */}
+        {data.verdicts.errored > 0 && (
+          <div className="nre-group-kpi">
+            <dt>{localeText(locale, "verdict.errored")}</dt>
+            <dd className="nre-verdict-errored">{data.verdicts.errored}</dd>
+          </div>
+        )}
+        <div className="nre-group-kpi">
+          <dt>{localeText(locale, "overview.totalCost")}</dt>
+          {/* totalCostUSD 全缺 = null:显示缺数据,不编 $0 */}
+          <dd>{data.totalCostUSD === null ? missing : formatUSD(data.totalCostUSD)}</dd>
+        </div>
+      </dl>
+      {data.lastRunAt && (
+        <p className="nre-group-summary-time">{localeText(locale, "latestRun", { run: data.lastRunAt })}</p>
+      )}
+    </div>
+  );
+}

package/src/report/react/MetricBars.tsx

@@ -1,11 +1,13 @@
 // MetricBars:分组条形——同一份矩阵数据的另一种摆法(MetricBars.data = MetricMatrix.data)。
 // 组维度一组条、系列维度一根条、条长是指标值;竖向分组柱,柱顶标数值,系列颜色与
-// 其它组件的稳定配色一致,图例自动生成。组内按值排序,方向随 better;
-// 缺数据的系列不画柱、不编 0(与 text 面的 — 同口径)。
+// 其它组件的稳定配色一致(类名 nre-series-cN 由 CSS 上色,深色主题跟随),图例自动生成。
+// 组内按值排序,方向随 better;缺数据的系列不画柱、不编 0(与 text 面的 — 同口径)。
 
 import type { ReactElement } from "react";
-import type { AttemptRef, MatrixData, MetricCell } from "../types.ts";
-import { colorHexForKey, colorClassForKey } from "./colors.ts";
+import type { MatrixData, MetricCell } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, resolveMetricLabel, type ReportLocale } from "../locale.ts";
+import { colorClassForKey, seriesClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
 
 const WIDTH = 640;
@@ -16,10 +18,12 @@ export function MetricBars({
   data,
   attemptHref,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: MatrixData;
-  attemptHref?: (ref: AttemptRef) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   // 稀疏 cells → 首次出现顺序的组/系列键 + 查找表
   const groupKeys: string[] = [];
@@ -31,6 +35,7 @@ export function MetricBars({
     byPosition.set(JSON.stringify([entry.row, entry.column]), entry.cell);
   }
 
+  const metricLabel = resolveMetricLabel(data.metric.label, locale, data.metric.key);
   const better = data.metric.better ?? "higher";
   const values = data.cells.map((c) => c.cell.value).filter((v): v is number => v !== null);
   const maxValue = values.length > 0 ? Math.max(...values) : 0;
@@ -47,7 +52,7 @@ export function MetricBars({
         className="nre-bars-svg"
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
         role="img"
-        aria-label={`${data.metric.label} by ${data.rows} × ${data.columns}`}
+        aria-label={`${metricLabel} by ${data.rows} × ${data.columns}`}
       >
         {groupKeys.map((group, gi) => {
           const x0 = PLOT.left + gi * groupWidth;
@@ -68,34 +73,40 @@ export function MetricBars({
                 const y = PLOT.bottom - h;
                 const title = `${group} · ${series}: ${cell.display}(${cell.samples}/${cell.total})`;
                 const rect = (
-                  <rect className="nre-bar" x={x + 2} y={y} width={barWidth - 4} height={h} fill={colorHexForKey(series)}>
+                  <rect
+                    className={cx("nre-bar", seriesClassForKey(series))}
+                    x={x + 2}
+                    y={y}
+                    width={barWidth - 4}
+                    height={h}
+                  >
                     <title>{title}</title>
                   </rect>
                 );
-                const ref = cell.refs[0];
+                const locator = cell.refs[0];
                 return (
                   <g key={series}>
-                    {attemptHref && ref ? <a href={attemptHref(ref)}>{rect}</a> : rect}
+                    {attemptHref && locator ? <a href={attemptHref(locator)}>{rect}</a> : rect}
                     {/* 柱顶标数值;覆盖不全时把 samples/total 一并标出,不藏 */}
-                    <text className="nre-bar-value" x={x + barWidth / 2} y={y - 4} textAnchor="middle" fontSize={10} fill="#525252">
+                    <text className="nre-bar-value" x={x + barWidth / 2} y={y - 4} textAnchor="middle">
                       {cell.samples < cell.total ? `${cell.display} ${cell.samples}/${cell.total}` : cell.display}
                     </text>
                   </g>
                 );
               })}
-              <text className="nre-bars-group-label" x={x0 + groupWidth / 2} y={HEIGHT - 20} textAnchor="middle" fontSize={12} fill="#525252">
+              <text className="nre-bars-group-label" x={x0 + groupWidth / 2} y={HEIGHT - 20} textAnchor="middle">
                 {group}
               </text>
             </g>
           );
         })}
         {/* 基线 */}
-        <line x1={PLOT.left} y1={PLOT.bottom} x2={PLOT.right} y2={PLOT.bottom} stroke="#d4d4d4" />
+        <line className="nre-bars-baseline" x1={PLOT.left} y1={PLOT.bottom} x2={PLOT.right} y2={PLOT.bottom} />
       </svg>
       {/* 图例:系列 → 稳定配色,跨块同键同色 */}
       <figcaption className="nre-bars-legend">
         <span className="nre-bars-metric">
-          {data.metric.label}
+          {metricLabel}
           {data.metric.unit && <span className="nre-unit">({data.metric.unit})</span>}
         </span>
         {seriesKeys.map((series) => (

package/src/report/react/MetricLine.tsx

@@ -1,12 +1,15 @@
 // MetricLine:趋势线——x 是 experiment 声明的 flag(有序变量),每个系列一条线。
 // 与 MetricScatter 的分工:scatter 的两轴都是测出来的指标(找 frontier),
 // line 的 x 是你配置的变量(看趋势)。x 轴正常升序;y 轴向随 better;
-// x 或 y 缺数据的点不画,注脚如实报数;每个点带 <title> hover,可经 pointHref 下钻。
+// x 或 y 缺数据的点不画,注脚如实报数;每个点带 <title> hover(enhance.js 在场时
+// 升级为样式化 tooltip),可经 pointHref 下钻。配色走类名(nre-series-cN)由 CSS
+// 上色,深色主题跟随,不留内联 hex。
 
 import type { ReactElement } from "react";
 import type { LineData } from "../types.ts";
-import { colorHexForKey } from "./colors.ts";
-import { MISSING_TEXT, cx } from "./format.ts";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, resolveMetricLabel, type ReportLocale } from "../locale.ts";
+import { seriesClassForKey } from "./colors.ts";
+import { cx } from "./format.ts";
 
 const WIDTH = 640;
 const HEIGHT = 360;
@@ -39,25 +42,28 @@ export function MetricLine({
   data,
   pointHref,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: LineData;
   pointHref?: (row: LineData["rows"][number]) => string;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   const missing = data.rows.filter((r) => r.x === null || r.y.value === null);
   const drawableRows = data.rows.filter((r) => r.x !== null && r.y.value !== null);
+  const yLabel = resolveMetricLabel(data.y.label, locale, data.y.key);
 
   const missingNote =
     missing.length > 0 ? (
       <p className="nre-line-missing" title={missing.map((r) => r.key).join(", ")}>
-        {missing.length} {missing.length === 1 ? "point" : "points"} missing data
+        {countText(locale, "pointsMissing", missing.length)}
       </p>
     ) : null;
 
   if (drawableRows.length === 0) {
     return (
       <figure className={cx("nre", "nre-metric-line", className)}>
-        <p className="nre-missing">{MISSING_TEXT}</p>
+        <p className="nre-missing">{localeText(locale, "cell.missing")}</p>
         {missingNote}
       </figure>
     );
@@ -77,7 +83,7 @@ export function MetricLine({
     series: r.series,
     xValue: r.x as number,
     yValue: r.y.value as number,
-    title: `${r.key}\n${data.x.label}: ${r.xDisplay}\n${data.y.label}: ${r.y.display}(${r.y.samples}/${r.y.total})`,
+    title: `${r.key}\n${data.x.label}: ${r.xDisplay}\n${yLabel}: ${r.y.display}(${r.y.samples}/${r.y.total})`,
     px: xScale.scale(r.x as number),
     py: yScale.scale(r.y.value as number),
   }));
@@ -108,7 +114,7 @@ export function MetricLine({
         className="nre-line-svg"
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
         role="img"
-        aria-label={`${data.y.label} by ${data.x.label}`}
+        aria-label={`${yLabel} by ${data.x.label}`}
       >
         <rect
           className="nre-line-plot"
@@ -117,9 +123,8 @@ export function MetricLine({
           width={PLOT.right - PLOT.left}
           height={PLOT.bottom - PLOT.top}
           fill="none"
-          stroke="#d4d4d4"
         />
-        <text className="nre-line-xlabel" x={(PLOT.left + PLOT.right) / 2} y={HEIGHT - 8} textAnchor="middle" fontSize={12} fill="#525252">
+        <text className="nre-line-xlabel" x={(PLOT.left + PLOT.right) / 2} y={HEIGHT - 8} textAnchor="middle">
           {data.x.label}
           {data.x.unit ? `(${data.x.unit})` : ""}
         </text>
@@ -128,42 +133,38 @@ export function MetricLine({
           x={16}
           y={(PLOT.top + PLOT.bottom) / 2}
           textAnchor="middle"
-          fontSize={12}
-          fill="#525252"
           transform={`rotate(-90 16 ${(PLOT.top + PLOT.bottom) / 2})`}
         >
-          {data.y.label}
+          {yLabel}
           {data.y.unit ? `(${data.y.unit})` : ""}
         </text>
 
         {xTicks.map((v) => (
-          <text key={`x${v}`} className="nre-line-tick" x={xScale.scale(v)} y={PLOT.bottom + 16} textAnchor="middle" fontSize={11} fill="#737373">
+          <text key={`x${v}`} className="nre-line-tick" x={xScale.scale(v)} y={PLOT.bottom + 16} textAnchor="middle">
             {xDisplayFor(v)}
           </text>
         ))}
         {yTicks.map((v) => (
-          <text key={`y${v}`} className="nre-line-tick" x={PLOT.left - 6} y={yScale.scale(v) + 4} textAnchor="end" fontSize={11} fill="#737373">
+          <text key={`y${v}`} className="nre-line-tick" x={PLOT.left - 6} y={yScale.scale(v) + 4} textAnchor="end">
             {yDisplayFor(v)}
           </text>
         ))}
 
         {seriesOrder.map((series) => {
           const list = bySeries.get(series)!;
-          const color = series === "" ? "#525252" : colorHexForKey(series);
+          const seriesClass = series === "" ? "nre-series-none" : seriesClassForKey(series);
           const labelAt = list.reduce((a, b) => (b.px > a.px ? b : a));
           return (
-            <g key={series || "(single)"} className="nre-line-series" data-series={series || undefined}>
+            <g key={series || "(single)"} className={cx("nre-line-series", seriesClass)} data-series={series || undefined}>
               {list.length > 1 && (
                 <polyline
                   className="nre-line-path"
                   points={list.map((p) => `${p.px},${p.py}`).join(" ")}
                   fill="none"
-                  stroke={color}
-                  strokeWidth={1.5}
                 />
               )}
               {series !== "" && (
-                <text className="nre-line-series-label" x={labelAt.px + 8} y={labelAt.py + 4} fontSize={12} fill={color}>
+                <text className="nre-line-series-label" x={labelAt.px + 8} y={labelAt.py + 4}>
                   {series}
                 </text>
               )}
@@ -174,12 +175,11 @@ export function MetricLine({
         {points.map((p, i) => {
           const circle = (
             <circle
-              className="nre-line-point"
+              className={cx("nre-line-point", p.series !== undefined ? seriesClassForKey(p.series) : "nre-series-none")}
               data-key={p.key}
               cx={p.px}
               cy={p.py}
               r={4}
-              fill={p.series !== undefined ? colorHexForKey(p.series) : "#525252"}
             >
               <title>{p.title}</title>
             </circle>

package/src/report/react/MetricMatrix.tsx

@@ -5,7 +5,9 @@
 // 是格子里的普通 <a>,不 hydrate 也能点。
 
 import type { ReactElement } from "react";
-import type { AttemptRef, MatrixData } from "../types.ts";
+import type { MatrixData } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, resolveMetricLabel, type ReportLocale } from "../locale.ts";
 import { MetricCellView } from "./cell.tsx";
 import { colorClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
@@ -14,10 +16,12 @@ export function MetricMatrix({
   data,
   attemptHref,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: MatrixData;
-  attemptHref?: (ref: AttemptRef) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   // 稀疏 cells → 首次出现顺序的行/列键 + 查找表;组件只整理形状,不碰数值
   const rowKeys: string[] = [];
@@ -33,7 +37,7 @@ export function MetricMatrix({
   return (
     <table className={cx("nre", "nre-metric-matrix", className)}>
       <caption className="nre-matrix-caption">
-        {data.metric.label}
+        {resolveMetricLabel(data.metric.label, locale, data.metric.key)}
         {data.metric.unit && <span className="nre-unit">({data.metric.unit})</span>}
         <span className="nre-matrix-axes">
           {data.rows} × {data.columns}
@@ -63,7 +67,7 @@ export function MetricMatrix({
               return (
                 <td key={column} className={cx("nre-td", !cell && "nre-td-empty")}>
                   {/* 稀疏格子:没有样本就空着(数据里不存在),不是 0 也不是缺数据文案 */}
-                  {cell ? <MetricCellView cell={cell} attemptHref={attemptHref} /> : null}
+                  {cell ? <MetricCellView cell={cell} attemptHref={attemptHref} locale={locale} /> : null}
                 </td>
               );
             })}