niceeval 0.5.4 → 0.6.1

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) => (

package/src/report/react/Scoreboard.tsx

@@ -1,18 +1,21 @@
 // Scoreboard:考试成绩单——总分 + 分科小计。
 // 固定分母的口径不藏:没跑的题挣 0 分但留在分母里,科目行如实报 missing;
-// weights 是「实际生效的权重表」,渲染出来让成绩单可审计(docs/reports.md scoreboard 公式一节)。
+// weights 是「实际生效的权重表」,渲染出来让成绩单可审计(docs/feature/reports/library.md「Scoreboard」)。
 
 import type { ReactElement } from "react";
 import type { ScoreboardData } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, type ReportLocale } from "../locale.ts";
 import { colorClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
 
 export function Scoreboard({
   data,
   className,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   data: ScoreboardData;
   className?: string;
+  locale?: ReportLocale;
 }): ReactElement {
   // 科目列 = 各行 subjects 的并集,按首次出现顺序;固定分母下各行本应一致,这里防御性合并
   const subjectKeys: string[] = [];
@@ -31,7 +34,8 @@ export function Scoreboard({
               {data.dimension}
             </th>
             <th scope="col" className="nre-total-col">
-              Total<span className="nre-full-marks">/ {data.fullMarks}</span>
+              {localeText(locale, "scoreboard.total")}
+              <span className="nre-full-marks">/ {data.fullMarks}</span>
             </th>
             {subjectKeys.map((key) => (
               <th scope="col" key={key} className="nre-subject-col">
@@ -55,13 +59,17 @@ export function Scoreboard({
                   <td key={key} className="nre-subject">
                     <span
                       className="nre-subject-score"
-                      title={`${subject.evals} evals, weighted ${subject.earned} of ${subject.possible}`}
+                      title={localeText(locale, "scoreboard.subjectTitle", {
+                        evals: subject.evals,
+                        earned: subject.earned,
+                        possible: subject.possible,
+                      })}
                     >
                       {subject.earned}/{subject.possible}
                     </span>
                     {/* 固定分母的如实注脚:没跑、按 0 计的题数 */}
                     {subject.missing > 0 && (
-                      <span className="nre-subject-missing">{subject.missing} {subject.missing === 1 ? "eval" : "evals"} missing, scored 0</span>
+                      <span className="nre-subject-missing">{countText(locale, "scoreboard.missing", subject.missing)}</span>
                     )}
                   </td>
                 );
@@ -72,15 +80,15 @@ export function Scoreboard({
       </table>
       {/* 实际生效的权重表:成绩单可审计 */}
       <p className="nre-weights">
-        weights:{" "}
+        {localeText(locale, "scoreboard.weights")}{" "}
         {data.weights.length === 0
-          ? "all evals ×1"
+          ? localeText(locale, "scoreboard.allWeights")
           : data.weights.map((w) => (
               <span key={w.prefix} className="nre-weight">
                 {w.prefix} ×{w.weight}
               </span>
             ))}
-        {data.weights.length > 0 && <span className="nre-weight-rest">others ×1</span>}
+        {data.weights.length > 0 && <span className="nre-weight-rest">{localeText(locale, "scoreboard.othersWeight")}</span>}
       </p>
     </section>
   );

package/src/report/react/cell.tsx

@@ -3,42 +3,51 @@
 // 纯渲染、零 hooks;交互只有普通 <a>(下钻由使用者的 attemptHref 决定去处)。
 
 import type { ReactElement } from "react";
-import type { AttemptRef, MetricCell } from "../types.ts";
-import { MISSING_TEXT } from "./format.ts";
+import type { MetricCell } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
 
 export function MetricCellView({
   cell,
   attemptHref,
+  locale = DEFAULT_REPORT_LOCALE,
 }: {
   cell: MetricCell;
-  attemptHref?: (ref: AttemptRef) => string;
+  attemptHref?: (locator: AttemptLocator) => string;
+  locale?: ReportLocale;
 }): ReactElement {
   // 全 null(没有任何有效样本)→ 缺数据文案,绝不画 0;total 仍如实入 title
   if (cell.value === null) {
     return (
       <span className="nre-cell nre-cell-missing">
-        <span className="nre-missing" title={`0/${cell.total} attempts measurable`}>
-          {MISSING_TEXT}
+        <span className="nre-missing" title={localeText(locale, "cell.noneMeasurableTitle", { total: cell.total })}>
+          {localeText(locale, "cell.missing")}
         </span>
       </span>
     );
   }
   return (
     <span className="nre-cell">
-      <span className="nre-value" title={`${cell.samples}/${cell.total} attempts measured`}>
+      <span
+        className="nre-value"
+        title={localeText(locale, "cell.measuredTitle", { samples: cell.samples, total: cell.total })}
+      >
         {cell.display}
       </span>
       {/* samples < total:有 attempt 测不了这个指标,覆盖率角标如实标出 */}
       {cell.samples < cell.total && (
-        <sup className="nre-coverage" title={`coverage ${cell.samples}/${cell.total}: this metric is null for the remaining attempts`}>
+        <sup
+          className="nre-coverage"
+          title={localeText(locale, "cell.coverageTitle", { samples: cell.samples, total: cell.total })}
+        >
           {cell.samples}/{cell.total}
         </sup>
       )}
       {/* refs + attemptHref:格子可点,「给我看那次 attempt」就在手边 */}
       {attemptHref && cell.refs && cell.refs.length > 0 && (
         <span className="nre-refs">
-          {cell.refs.map((ref, i) => (
-            <a key={`${ref.run}:${ref.result}`} className="nre-ref" href={attemptHref(ref)}>
+          {cell.refs.map((locator, i) => (
+            <a key={locator} className="nre-ref" href={attemptHref(locator)}>
               #{i + 1}
             </a>
           ))}

package/src/{view/app/lib/chart.ts → report/react/chart-math.ts}

@@ -1,4 +1,5 @@
-// 通用图表数值工具:round-number 刻度生成,无第三方依赖(遵循 view/ 不引图表库的现状)。
+// 通用图表数值工具:round-number 刻度生成与标签防撞布局,零依赖纯函数。
+// 从 src/view/app/lib/chart.ts 迁来(view 侧从这里 re-export),报告组件与 view 共用同一份。
 
 function niceNumber(range: number, round: boolean): number {
   if (range <= 0) return 1;
@@ -34,11 +35,6 @@ export function niceTicks(min: number, max: number, count = 5): number[] {
   return ticks;
 }
 
-/** 六色分类色板之外的第 7+ 个系列一律回退到中性色,避免同色误导身份(见 dataviz 分类色板规则)。 */
-export function seriesColor(index: number): string {
-  return index < 6 ? `var(--series-${index + 1})` : "var(--muted)";
-}
-
 export interface LabelInput {
   cx: number;
   cy: number;

package/src/report/react/colors.ts

@@ -1,21 +1,22 @@
-// 跨块配色一致(docs/reports.md 四条跨组件契约之二):
+// 跨块配色一致(docs/feature/reports/architecture.md「静态网页」):
 // 系列/维度键 → 固定调色板下标,用稳定散列而不是「按出现顺序分配」。
 // 这样同一个 agent 在 scatter 的线、DeltaTable 的行、matrix 的列头永远同色,
 // 不需要 Provider、不需要手工配置,甚至不需要两个组件见过同一份数据。
-// 调色板的十六进制值以这里为准:SVG(scatter 的线和点)直接内联 hex,
-// 保证漏加载 styles.css 时图形仍然分得清系列;styles.css 里的 --nre-c0..c7
-// 是同一组值的拷贝(供 .nre-cN 文本类用),改色时两边一起改。
+//
+// 色板与 view 统一:六色 CVD 校验色板(src/view/styles.css 的 --series-1..6),
+// 顺序不要重排。深浅两套值都住在 styles.css 的 --nre-c0..c5(light-dark()),
+// 「CSS 与 colors.ts 逐个对应」契约:NRE_PALETTE 是浅色主题那套值的拷贝,
+// 渲染面优先挂类名(nre-cN 上文字色、nre-series-cN 上图形系列色)由 CSS 上色,
+// 深色主题才能跟随;colorHexForKey 只留给「不经 CSS」的消费方。改色时两边一起改。
 
-/** 固定调色板;下标即 nre-cN 的 N,与 styles.css 的 --nre-cN 逐个对应。 */
+/** 固定调色板(浅色主题值);下标即 nre-cN / nre-series-cN 的 N,与 styles.css 的 --nre-cN 逐个对应。 */
 export const NRE_PALETTE = [
-  "#2563eb", // c0 蓝
-  "#db2777", // c1 玫红
-  "#059669", // c2 绿
-  "#d97706", // c3 橙
-  "#7c3aed", // c4 紫
-  "#0891b2", // c5 青
-  "#dc2626", // c6 红
-  "#65a30d", // c7 橄榄
+  "#2a78d6", // c0 蓝(dark: #3987e5)
+  "#1baf7a", // c1 绿(dark: #199e70)
+  "#eda100", // c2 琥珀(dark: #c98500)
+  "#008300", // c3 深绿(dark: #008300)
+  "#e34948", // c4 红(dark: #e66767)
+  "#eb6834", // c5 橙(dark: #d95926)
 ] as const;
 
 export const NRE_PALETTE_SIZE = NRE_PALETTE.length;
@@ -31,12 +32,20 @@ export function colorIndexForKey(key: string): number {
   return hash % NRE_PALETTE_SIZE;
 }
 
-/** 键对应的稳定 class 名("nre-c3"),配 styles.css 的 .nre-cN 上色。 */
+/** 键对应的稳定 class 名("nre-c3"),配 styles.css 的 .nre-cN 上文字色。 */
 export function colorClassForKey(key: string): string {
   return `nre-c${colorIndexForKey(key)}`;
 }
 
-/** 键对应的十六进制颜色,给 SVG 内联 stroke/fill 用(不依赖 CSS 加载)。 */
+/**
+ * 键对应的系列 class 名("nre-series-c3"):挂在 SVG 图形元素(线/点/柱/系列名)上,
+ * styles.css 用它设置 --nre-series,fill/stroke 走 var —— 深色主题下图表随之切换。
+ */
+export function seriesClassForKey(key: string): string {
+  return `nre-series-c${colorIndexForKey(key)}`;
+}
+
+/** 键对应的十六进制颜色(浅色主题值);渲染面优先类名,这里只留给不经 CSS 的消费方。 */
 export function colorHexForKey(key: string): string {
   return NRE_PALETTE[colorIndexForKey(key)];
 }