niceeval 0.6.1 → 0.7.0

package/src/report/react/MetricTable.tsx

@@ -1,43 +1,20 @@
 // MetricTable:行维度 × 指标列。没有实体下钻——要展开到 experiment 的 Eval 或 Eval 的
 // Attempt,用 ExperimentList / EvalList,这个组件只表达任意维度 × 任意指标。
-// 行按传入顺序渲染——排序发生在计算侧(tableData 的 sort 参数),组件不重排;
+// 行按传入顺序渲染——排序发生在计算侧(metricTableData 的 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 { TableData, TableRowMeta } from "../types.ts";
+import type { TableData } 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,
@@ -51,27 +28,13 @@ export function MetricTable({
   className?: string;
   locale?: ReportLocale;
 }): ReactElement {
-  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" data-nre-sort="">
-            {data.dimension}
+            {data.rowDimension}
           </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" data-nre-sort="">
               {resolveMetricLabel(col.label, locale, col.key)}
@@ -87,11 +50,6 @@ export function MetricTable({
               )}
             </th>
           ))}
-          {hasVerdicts && (
-            <th scope="col" className="nre-verdicts-col" data-nre-sort="">
-              {localeText(locale, "table.verdicts")}
-            </th>
-          )}
         </tr>
       </thead>
       <tbody>
@@ -104,28 +62,7 @@ export function MetricTable({
               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 (
@@ -133,21 +70,12 @@ export function MetricTable({
                   {cell ? (
                     <MetricCellView cell={cell} attemptHref={attemptHref} locale={locale} />
                   ) : (
-                    // 数据侧没给这个格子(理论上 tableData 不会缺列)——按空处理,不编数
+                    // 数据侧没给这个格子(理论上 metricTableData 不会缺列)——按空处理,不编数
                     <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>

package/src/report/react/ScopeSummary.tsx

@@ -0,0 +1,86 @@
+// ScopeSummary:一个范围的摘要卡——快照时间窗、experiment / eval / attempt 数、判定计票、
+// 端到端成功率与总成本。data 恒携带 eval 级与 attempt 级两份计票;呈现 prop `votes`
+// 只选择显示哪一级(默认 "eval"),不改变 data。成功率与总成本只渲染算好的 MetricCell,
+// 不现场重算(docs/feature/reports/library/summaries.md「ScopeSummary」)。
+
+import type { ReactElement } from "react";
+import type { ScopeSummaryData, VerdictTally } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { MetricCellView } from "./cell.tsx";
+import { cx } from "./format.ts";
+
+function VerdictTallyView({ tally, locale }: { tally: VerdictTally; locale: ReportLocale }): ReactElement {
+  const kinds = (["passed", "failed", "errored", "skipped"] as const).filter((k) => tally[k] > 0);
+  return (
+    <span className="nre-verdict-tally">
+      {kinds.map((kind) => (
+        <span key={kind} className={cx("nre-verdict-pill", `nre-verdict-${kind}`)}>
+          {tally[kind]} {localeText(locale, `verdict.${kind}`)}
+        </span>
+      ))}
+      {kinds.length === 0 && <span className="nre-missing">—</span>}
+    </span>
+  );
+}
+
+export function ScopeSummary({
+  data,
+  votes = "eval",
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: ScopeSummaryData;
+  /** 显示哪一级计票;默认 "eval"。data 恒携带两级,votes 只选择呈现。 */
+  votes?: "eval" | "attempt";
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const tally = votes === "attempt" ? data.attemptVerdicts : data.evalVerdicts;
+  return (
+    <div className={cx("nre", "nre-scope-summary", className)} data-votes={votes}>
+      <dl className="nre-scope-kpis">
+        <div className="nre-scope-kpi nre-scope-kpi-rate">
+          <dt>{localeText(locale, "scopeSummary.passRate")}</dt>
+          <dd>
+            <MetricCellView cell={data.endToEndPassRate} locale={locale} />
+          </dd>
+        </div>
+        <div className="nre-scope-kpi">
+          <dt>{localeText(locale, "scopeSummary.experiments")}</dt>
+          <dd>{data.experiments}</dd>
+        </div>
+        <div className="nre-scope-kpi">
+          <dt>{localeText(locale, "scopeSummary.evals")}</dt>
+          <dd>{data.evals}</dd>
+        </div>
+        <div className="nre-scope-kpi">
+          <dt>{localeText(locale, "scopeSummary.attempts")}</dt>
+          <dd>{data.attempts}</dd>
+        </div>
+        <div className="nre-scope-kpi nre-scope-kpi-verdicts">
+          <dt>{localeText(locale, votes === "attempt" ? "scopeSummary.votesAttempt" : "scopeSummary.votesEval")}</dt>
+          <dd>
+            <VerdictTallyView tally={tally} locale={locale} />
+          </dd>
+        </div>
+        <div className="nre-scope-kpi">
+          <dt>{localeText(locale, "scopeSummary.totalCost")}</dt>
+          <dd>
+            <MetricCellView cell={data.totalCostUSD} locale={locale} />
+          </dd>
+        </div>
+      </dl>
+      {/* 时间窗:贡献当前数据的快照 startedAt 范围;空范围不编造当前时间 */}
+      {data.range.latestStartedAt !== null && (
+        <p className="nre-scope-summary-range">
+          {data.range.earliestStartedAt !== null && data.range.earliestStartedAt !== data.range.latestStartedAt
+            ? localeText(locale, "scopeSummary.range", {
+                from: data.range.earliestStartedAt,
+                to: data.range.latestStartedAt,
+              })
+            : data.range.latestStartedAt}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/report/react/Scoreboard.tsx

@@ -1,10 +1,11 @@
 // Scoreboard:考试成绩单——总分 + 分科小计。
-// 固定分母的口径不藏:没跑的题挣 0 分但留在分母里,科目行如实报 missing;
-// weights 是「实际生效的权重表」,渲染出来让成绩单可审计(docs/feature/reports/library.md「Scoreboard」)。
+// 固定分母的口径不藏:没跑的题挣 0 分但留在分母里(notRun),跑了但测不了的题同样按 0 分
+// (unscorable),两个计数分开显示,连同 refs 一起,不合并成一个笼统的缺失数;
+// weights 是「实际生效的权重表」,渲染出来让成绩单可审计;题集之外被忽略的 eval 数在注脚。
 
 import type { ReactElement } from "react";
 import type { ScoreboardData } from "../types.ts";
-import { DEFAULT_REPORT_LOCALE, countText, localeText, type ReportLocale } from "../locale.ts";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, resolveLocalizedText, type ReportLocale } from "../locale.ts";
 import { colorClassForKey } from "./colors.ts";
 import { cx } from "./format.ts";
 
@@ -31,7 +32,7 @@ export function Scoreboard({
         <thead>
           <tr>
             <th scope="col" className="nre-dimension">
-              {data.dimension}
+              {data.rowDimension}
             </th>
             <th scope="col" className="nre-total-col">
               {localeText(locale, "scoreboard.total")}
@@ -51,7 +52,16 @@ export function Scoreboard({
               <th scope="row" className={cx("nre-row-key", "nre-key", colorClassForKey(row.key))}>
                 {row.key}
               </th>
-              <td className="nre-total">{row.total.display}</td>
+              <td className="nre-total">
+                {resolveLocalizedText(row.total.display, locale)}
+                {/* 两种 0 分分开注脚:没去考(notRun)与考了判不了(unscorable) */}
+                {row.total.notRun > 0 && (
+                  <span className="nre-total-not-run">{countText(locale, "scoreboard.notRun", row.total.notRun)}</span>
+                )}
+                {row.total.unscorable > 0 && (
+                  <span className="nre-total-unscorable">{countText(locale, "scoreboard.unscorable", row.total.unscorable)}</span>
+                )}
+              </td>
               {subjectKeys.map((key) => {
                 const subject = row.subjects.find((s) => s.key === key);
                 if (!subject) return <td key={key} className="nre-td-empty" />;
@@ -60,16 +70,20 @@ export function Scoreboard({
                     <span
                       className="nre-subject-score"
                       title={localeText(locale, "scoreboard.subjectTitle", {
-                        evals: subject.evals,
+                        questions: subject.questions,
                         earned: subject.earned,
                         possible: subject.possible,
                       })}
                     >
-                      {subject.earned}/{subject.possible}
+                      {resolveLocalizedText(subject.display, locale)}
                     </span>
-                    {/* 固定分母的如实注脚:没跑、按 0 计的题数 */}
-                    {subject.missing > 0 && (
-                      <span className="nre-subject-missing">{countText(locale, "scoreboard.missing", subject.missing)}</span>
+                    {subject.notRun > 0 && (
+                      <span className="nre-subject-not-run">{localeText(locale, "scoreboard.notRunText", { n: subject.notRun })}</span>
+                    )}
+                    {subject.unscorable > 0 && (
+                      <span className="nre-subject-unscorable">
+                        {localeText(locale, "scoreboard.unscorableText", { n: subject.unscorable })}
+                      </span>
                     )}
                   </td>
                 );
@@ -90,6 +104,10 @@ export function Scoreboard({
             ))}
         {data.weights.length > 0 && <span className="nre-weight-rest">{localeText(locale, "scoreboard.othersWeight")}</span>}
       </p>
+      {/* 题集之外的 eval:忽略但如实报数 */}
+      {data.ignoredEvals > 0 && (
+        <p className="nre-scoreboard-ignored">{countText(locale, "scoreboard.ignored", data.ignoredEvals)}</p>
+      )}
     </section>
   );
 }

package/src/report/react/cell.tsx

@@ -5,7 +5,7 @@
 import type { ReactElement } from "react";
 import type { MetricCell } from "../types.ts";
 import type { AttemptLocator } from "../../results/locator.ts";
-import { DEFAULT_REPORT_LOCALE, localeText, type ReportLocale } from "../locale.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveLocalizedText, type ReportLocale } from "../locale.ts";
 
 export function MetricCellView({
   cell,
@@ -32,7 +32,7 @@ export function MetricCellView({
         className="nre-value"
         title={localeText(locale, "cell.measuredTitle", { samples: cell.samples, total: cell.total })}
       >
-        {cell.display}
+        {resolveLocalizedText(cell.display, locale)}
       </span>
       {/* samples < total:有 attempt 测不了这个指标,覆盖率角标如实标出 */}
       {cell.samples < cell.total && (

package/src/report/react/chart-math.test.ts

@@ -0,0 +1,85 @@
+// cases: docs/engineering/unit-tests/reports/cases.md
+// 分区「MetricScatter 点标签布局(web 面)」:对 placePointLabels 直接断言标签框与点框的几何关系,不经 HTML。
+
+import { describe, expect, it } from "vitest";
+import { placePointLabels, type LabelBounds, type PlacedPointLabel, type PointLabelInput } from "./chart-math.ts";
+
+const BOUNDS: LabelBounds = { x0: 2, y0: 2, x1: 638, y1: 358 };
+const WIDTH = 90;
+
+interface Box {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+
+// 与契约声明的标签框一致:基线上方 10px、下方 2px,锚向决定水平延伸方向
+function labelBox(l: PlacedPointLabel, width: number): Box {
+  const x0 = l.anchor === "start" ? l.x : l.anchor === "end" ? l.x - width : l.x - width / 2;
+  return { x0, y0: l.y - 10, x1: x0 + width, y1: l.y + 2 };
+}
+
+function dotBox(p: PointLabelInput): Box {
+  return { x0: p.cx - 6, y0: p.cy - 6, x1: p.cx + 6, y1: p.cy + 6 };
+}
+
+function overlaps(a: Box, b: Box): boolean {
+  return a.x0 < b.x1 && a.x1 > b.x0 && a.y0 < b.y1 && a.y1 > b.y0;
+}
+
+describe("placePointLabels", () => {
+  it("近重合点簇:标签框两两不叠、不压任何数据点(只向下推的级联会把第三个标签推到下方点上)", () => {
+    // 三点近重合 + 右下方另一点:down-only 布局把第三个标签推到 y∈[122,134]、x≥310,
+    // 正好压住 (330,128) 的点框;候选位择优必须避开
+    const points: PointLabelInput[] = [
+      { cx: 300, cy: 100, width: WIDTH },
+      { cx: 303, cy: 102, width: WIDTH },
+      { cx: 298, cy: 104, width: WIDTH },
+      { cx: 330, cy: 128, width: WIDTH },
+    ];
+    const labels = placePointLabels(points, BOUNDS);
+    const boxes = labels.map((l) => labelBox(l, WIDTH));
+
+    for (let i = 0; i < boxes.length; i++) {
+      for (let j = i + 1; j < boxes.length; j++) {
+        expect(overlaps(boxes[i], boxes[j]), `标签 ${i} 与标签 ${j} 重叠`).toBe(false);
+      }
+      for (let j = 0; j < points.length; j++) {
+        expect(overlaps(boxes[i], dotBox(points[j])), `标签 ${i} 压住点 ${j}`).toBe(false);
+      }
+    }
+    // 离开左右紧邻位的标签必须带 leader 标记,渲染层据此连回原点
+    for (let i = 0; i < labels.length; i++) {
+      const adjacent =
+        labels[i].y === points[i].cy + 4 &&
+        ((labels[i].anchor === "start" && labels[i].x === points[i].cx + 10) ||
+          (labels[i].anchor === "end" && labels[i].x === points[i].cx - 10));
+      expect(labels[i].leader, `标签 ${i} 的 leader 标记与位置不符`).toBe(!adjacent);
+    }
+  });
+
+  it("无冲突取右侧紧邻位不带 leader;右缘点锚到左侧紧邻位且标签框不越出画布", () => {
+    const sparse = placePointLabels(
+      [
+        { cx: 100, cy: 100, width: WIDTH },
+        { cx: 400, cy: 250, width: WIDTH },
+      ],
+      BOUNDS,
+    );
+    for (const [i, l] of sparse.entries()) {
+      expect(l.anchor).toBe("start");
+      expect(l.x).toBe([100, 400][i] + 10);
+      expect(l.leader).toBe(false);
+    }
+
+    const [edge] = placePointLabels([{ cx: 630, cy: 200, width: WIDTH }], BOUNDS);
+    const box = labelBox(edge, WIDTH);
+    expect(edge.anchor).toBe("end");
+    expect(edge.leader).toBe(false);
+    expect(box.x0).toBeGreaterThanOrEqual(BOUNDS.x0);
+    expect(box.x1).toBeLessThanOrEqual(BOUNDS.x1);
+    expect(box.y0).toBeGreaterThanOrEqual(BOUNDS.y0);
+    expect(box.y1).toBeLessThanOrEqual(BOUNDS.y1);
+  });
+});

package/src/report/react/chart-math.ts

@@ -1,5 +1,4 @@
-// 通用图表数值工具:round-number 刻度生成与标签防撞布局,零依赖纯函数。
-// 从 src/view/app/lib/chart.ts 迁来(view 侧从这里 re-export),报告组件与 view 共用同一份。
+// 通用图表数值工具:round-number 刻度生成与点标签布局,零依赖纯函数。
 
 function niceNumber(range: number, round: boolean): number {
   if (range <= 0) return 1;
@@ -35,34 +34,114 @@ export function niceTicks(min: number, max: number, count = 5): number[] {
   return ticks;
 }
 
-export interface LabelInput {
+export interface PointLabelInput {
   cx: number;
   cy: number;
+  /** 标签文本的估算宽度(px)。 */
   width: number;
-  /** true = 文字锚在点左侧(text-anchor: end),false = 锚在右侧(text-anchor: start)。 */
-  anchorLeft: boolean;
+}
+
+/** 标签允许占用的画布范围(含坐标轴边距,标签可以借用空白边距)。 */
+export interface LabelBounds {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+
+export interface PlacedPointLabel {
+  /** <text> 的锚点坐标(y 为文字基线)。 */
+  x: number;
+  y: number;
+  anchor: "start" | "end" | "middle";
+  /** 标签不在点左右紧邻位:渲染层补 leader line 连回原点。 */
+  leader: boolean;
+}
+
+/** 标签框高度(基线上方 10px、下方 2px,对应 11px 字号)。 */
+const LABEL_ASCENT = 10;
+const LABEL_DESCENT = 2;
+/** 数据点视为边长 2×DOT_R 的方形障碍(点半径 4.5 + 命中余量)。 */
+const DOT_R = 6;
+/** 紧邻位与点的水平间距;候选环按它逐环外扩。 */
+const NEAR = 10;
+const RINGS = [NEAR, NEAR + 12, NEAR + 26];
+
+interface Box {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+
+function labelBoxAt(x: number, y: number, anchor: PlacedPointLabel["anchor"], width: number): Box {
+  const x0 = anchor === "start" ? x : anchor === "end" ? x - width : x - width / 2;
+  return { x0, y0: y - LABEL_ASCENT, x1: x0 + width, y1: y + LABEL_DESCENT };
+}
+
+function overlapArea(a: Box, b: Box): number {
+  const w = Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0);
+  const h = Math.min(a.y1, b.y1) - Math.max(a.y0, b.y0);
+  return w > 0 && h > 0 ? w * h : 0;
+}
+
+function outOfBoundsArea(box: Box, bounds: LabelBounds): number {
+  const total = (box.x1 - box.x0) * (box.y1 - box.y0);
+  const w = Math.min(box.x1, bounds.x1) - Math.max(box.x0, bounds.x0);
+  const h = Math.min(box.y1, bounds.y1) - Math.max(box.y0, bounds.y0);
+  const inside = w > 0 && h > 0 ? w * h : 0;
+  return total - inside;
+}
+
+/** 一个点在距离 d 的候选环:左右紧邻、四个斜角、正上正下。顺序即同代价时的偏好序。 */
+function ringCandidates(p: PointLabelInput, d: number): Omit<PlacedPointLabel, "leader">[] {
+  const diag = d * 0.75;
+  return [
+    { x: p.cx + d, y: p.cy + 4, anchor: "start" },
+    { x: p.cx - d, y: p.cy + 4, anchor: "end" },
+    { x: p.cx + diag, y: p.cy - diag - 2, anchor: "start" },
+    { x: p.cx - diag, y: p.cy - diag - 2, anchor: "end" },
+    { x: p.cx, y: p.cy - d - LABEL_DESCENT - 2, anchor: "middle" },
+    { x: p.cx + diag, y: p.cy + diag + LABEL_ASCENT, anchor: "start" },
+    { x: p.cx - diag, y: p.cy + diag + LABEL_ASCENT, anchor: "end" },
+    { x: p.cx, y: p.cy + d + LABEL_ASCENT + 2, anchor: "middle" },
+  ];
 }
 
 /**
- * 贪心地把互相重叠的直接标签往下推开(按 y 排序、逐个查重叠再下移),点本身位置不变。
- * 散点常见同分不同价的聚簇,这一步避免标签叠成一团糊字。
+ * 散点直接标签的候选位择优布局(docs/feature/reports/library.md「MetricScatter」):
+ * 每个标签在点四周由近及远的候选环上打分——与已放置标签的重叠、与任何数据点的重叠、
+ * 越出画布的面积、离点距离逐项累加,取代价最小的候选。存在无冲突候选时标签必不遮点、
+ * 不叠标签、不越界;全候选冲突时取重叠最小者,绝不丢标签。重合点簇因此向不同方向散开,
+ * 而不是单向堆叠压到下方的数据点上。
  */
-export function layoutLabelOffsets(items: LabelInput[], lineHeight = 14, padX = 4): number[] {
-  const offsets = new Array(items.length).fill(0);
-  const order = [...items.keys()].sort((a, b) => items[a].cy - items[b].cy || items[a].cx - items[b].cx);
-  const placed: { x0: number; x1: number; y: number }[] = [];
+export function placePointLabels(points: PointLabelInput[], bounds: LabelBounds): PlacedPointLabel[] {
+  const dots: Box[] = points.map((p) => ({ x0: p.cx - DOT_R, y0: p.cy - DOT_R, x1: p.cx + DOT_R, y1: p.cy + DOT_R }));
+  const placedBoxes: Box[] = [];
+  const result: PlacedPointLabel[] = new Array(points.length);
+  // 由上到下、由左到右逐个放置,布局确定可复现
+  const order = [...points.keys()].sort((a, b) => points[a].cy - points[b].cy || points[a].cx - points[b].cx);
+
   for (const i of order) {
-    const it = items[i];
-    const x0 = it.anchorLeft ? it.cx - it.width : it.cx;
-    const x1 = it.anchorLeft ? it.cx : it.cx + it.width;
-    let y = it.cy;
-    let guard = 0;
-    while (guard < 40 && placed.some((p) => x0 < p.x1 + padX && x1 > p.x0 - padX && Math.abs(y - p.y) < lineHeight)) {
-      y += lineHeight;
-      guard++;
+    const p = points[i];
+    let best: { candidate: Omit<PlacedPointLabel, "leader">; box: Box; cost: number; leader: boolean } | null = null;
+    for (let ring = 0; ring < RINGS.length; ring++) {
+      const candidates = ringCandidates(p, RINGS[ring]);
+      for (let c = 0; c < candidates.length; c++) {
+        const candidate = candidates[c];
+        const box = labelBoxAt(candidate.x, candidate.y, candidate.anchor, p.width);
+        let cost = 0;
+        for (const placed of placedBoxes) cost += overlapArea(box, placed) * 4;
+        for (const dot of dots) cost += overlapArea(box, dot) * 3;
+        cost += outOfBoundsArea(box, bounds) * 6;
+        cost += ring * 8 + c * 0.5; // 近环、偏好序靠前者优先,只作同冲突程度下的排序
+        if (best === null || cost < best.cost) {
+          best = { candidate, box, cost, leader: !(ring === 0 && c <= 1) };
+        }
+      }
     }
-    placed.push({ x0, x1, y });
-    offsets[i] = y - it.cy;
+    placedBoxes.push(best!.box);
+    result[i] = { ...best!.candidate, leader: best!.leader };
   }
-  return offsets;
+  return result;
 }

package/src/report/react/enhance.js

@@ -1,19 +1,103 @@
 // niceeval 报告的渐进增强 runtime:纯 vanilla JS、零依赖、IIFE、幂等。
-// 只作用于 .nre DOM 与 data-nre-* 属性;三个行为——表格排序、行过滤、SVG 点 tooltip。
-// 静态 HTML 无 JS 时内容完整可读是硬约束:排序有数据侧预排、tooltip 退化为原生
-// <title>、过滤输入框静默无功能。全部经 document 级事件委托绑定,重复注入本文件
-// 只在首次生效(window.__nreEnhanced 守卫),DOM 被搬动(如 view 把 <template> 内容
-// 摆进报告槽)也无需重新绑定。
+// 只作用于 .nre DOM 与 data-nre-* 属性;六个行为——实验组切换、Tabs 单选切换、表格排序、
+// 行过滤、SVG 点 tooltip、警告命令复制。全部只改浏览状态,不改数据、指标口径或初始 HTML 数值。
+// 静态 HTML 无 JS 时内容完整可读是硬约束:排序有数据侧预排、tooltip 退化为原生 <title>、
+// 过滤输入框静默无功能、Tabs 退化为原生 <details> 手风琴、命令块退化为点击全选。
+// 全部经 document 级事件委托绑定,重复注入本文件只在首次生效(window.__nreEnhanced 守卫),
+// DOM 被搬动(如 view 把 <template> 内容摆进报告槽)也无需重新绑定。
 
 (function () {
   "use strict";
   if (typeof window === "undefined" || window.__nreEnhanced) return;
   window.__nreEnhanced = true;
 
+  // 根类 nre-js:styles.css 用它把仅增强态的布局(单选 tab 条、复制指针)限定在 JS 在场时。
+  // 挂在 documentElement 上与报告块位置无关,块之后被搬进槽位也不需要补标记。
+  document.documentElement.classList.add("nre-js");
+
   function closest(target, selector) {
     return target && target.closest ? target.closest(selector) : null;
   }
 
+  // ───────────────────────── 实验组:[data-nre-experiment-group-select] ─────────────────────────
+  // 数据侧已经把每组的摘要、散点和列表分别算好；这里仅在同一报告节点内切换 <details>，
+  // 不重新请求、不重算，也不触碰 Runs / Traces / Attempt 证据室。
+
+  function selectExperimentGroup(control) {
+    var root = control.closest("[data-nre-experiment-groups]");
+    if (!root) return;
+    var selected = control.getAttribute("data-nre-experiment-group-select");
+    var controls = root.querySelectorAll("[data-nre-experiment-group-select]");
+    var panels = root.querySelectorAll("[data-nre-experiment-group-panel]");
+    for (var i = 0; i < controls.length; i++) {
+      var active = controls[i].getAttribute("data-nre-experiment-group-select") === selected;
+      controls[i].setAttribute("aria-selected", active ? "true" : "false");
+      controls[i].tabIndex = active ? 0 : -1;
+    }
+    for (var j = 0; j < panels.length; j++) {
+      panels[j].open = panels[j].getAttribute("data-nre-experiment-group-panel") === selected;
+    }
+  }
+
+  document.addEventListener("click", function (e) {
+    var control = closest(e.target, "[data-nre-experiment-group-select]");
+    if (control) selectExperimentGroup(control);
+  });
+
+  document.addEventListener("keydown", function (e) {
+    var control = closest(e.target, "[data-nre-experiment-group-select]");
+    if (!control || (e.key !== "Enter" && e.key !== " ")) return;
+    e.preventDefault();
+    selectExperimentGroup(control);
+  });
+
+  // ───────────────────────── Tabs:[data-nre-tabs] 单选切换 ─────────────────────────
+  // 静态 HTML 每 tab 一个 <details> 且仅首个 open;点击 summary 时接管原生 toggle:
+  // 打开所点 tab、收起同组其余,点已开的 tab 保持打开(单选语义,恒有一个面板可见)。
+  // 只切换 open 状态,不触碰 tab 内任何数据;键盘 Enter/Space 走 summary 的原生激活(即 click)。
+
+  document.addEventListener("click", function (e) {
+    var title = closest(e.target, "[data-nre-tabs] > details > summary");
+    if (!title) return;
+    e.preventDefault();
+    var tab = title.parentNode;
+    var group = tab.parentNode;
+    for (var i = 0; i < group.children.length; i++) {
+      var child = group.children[i];
+      if (child.tagName === "DETAILS") child.open = child === tab;
+    }
+  });
+
+  // ───────────────────────── 复制:[data-nre-copy](宿主警告块的命令) ─────────────────────────
+  // 点击把 data-nre-copy 携带的完整命令写进剪贴板,成功后短暂打上 data-nre-copied
+  // (styles.css 显示 ✓);剪贴板不可用时退化为全选该块文本,用户手动复制。
+  // 块内文本与属性值恒不变,复制的是数据侧已写好的命令原文。
+
+  document.addEventListener("click", function (e) {
+    var block = closest(e.target, "[data-nre-copy]");
+    if (!block) return;
+    var command = block.getAttribute("data-nre-copy") || "";
+    function mark() {
+      block.setAttribute("data-nre-copied", "");
+      setTimeout(function () {
+        block.removeAttribute("data-nre-copied");
+      }, 1500);
+    }
+    function selectFallback() {
+      var selection = window.getSelection();
+      if (!selection) return;
+      var range = document.createRange();
+      range.selectNodeContents(block);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(command).then(mark, selectFallback);
+    } else {
+      selectFallback();
+    }
+  });
+
   // ───────────────────────── 排序:th[data-nre-sort] ─────────────────────────
   // 点击按该列排序 tbody 行(td/th 的 data-sort-value,数值优先、退回字符串;
   // 空值恒沉底),再点反向;方向指示由 th 上的 nre-sort-asc / nre-sort-desc 类驱动。