niceeval 0.8.1 → 0.9.1

package/src/report/dual-render.test.tsx

@@ -31,19 +31,23 @@ import {
 import { renderReportToStaticHtml } from "./web.ts";
 import {
   AttemptList,
+  CopyFixPrompt,
   ExperimentComparison,
   ExperimentList,
   FailureList,
+  Hero,
   MetricBars,
   MetricMatrix,
   MetricScatter,
   MetricTable,
   ScopeSummary,
+  ScopeWarnings,
+  TraceWaterfall,
 } from "./components.tsx";
 import { Col, Row, Section, Style, Tab, Table, Tabs, Text } from "./primitives.tsx";
 import { attemptListData, metricScatterData } from "./compute.ts";
 import { costUSD, defineMetric, endToEndPassRate } from "./metrics.ts";
-import builtInReport from "./built-in/index.tsx";
+import builtInReport, { standard } from "./built-in/index.tsx";
 
 // ───────────────────────── fake 数据 ─────────────────────────
 
@@ -437,7 +441,7 @@ describe("ReportNode 形状与非法节点", () => {
 // ───────────────────────── 双面同源 ─────────────────────────
 
 describe("text/web 双面同源", () => {
-  it("双面显示同一份解析终值、覆盖率与 warning;宿主在报告树外统一显示 warning", async () => {
+  it("双面显示同一份解析终值、覆盖率与 warning;警告的呈现件是页内 ScopeWarnings 组件,宿主无树外通道", async () => {
     const s = snap({ experimentId: "dual/a", results: [res("q1", "passed"), res("q2", "skipped")] });
     const warning: ScopeWarning = {
       kind: "unfinished-snapshot",
@@ -448,7 +452,12 @@ describe("text/web 双面同源", () => {
       command: "niceeval exp dual/a",
     };
     const scope = scopeOf([s], [warning]);
-    const definition = defineReport(<ScopeSummary />);
+    const definition = defineReport(
+      <Col>
+        <ScopeWarnings />
+        <ScopeSummary />
+      </Col>,
+    );
     const ctx = { scope, results: resultsOf([s]) };
     const text = await renderReportToText(definition, ctx);
     const html = await renderReportToStaticHtml(definition, ctx);
@@ -460,6 +469,10 @@ describe("text/web 双面同源", () => {
     // web 面把警告的 command 渲染为可复制命令
     expect(html).toContain("niceeval exp dual/a");
     expect(html).toContain("nre-warning-command");
+    // 宿主不再前置树外警告块:没有 ScopeWarnings 的树两面都不出现警告
+    const bare = defineReport(<ScopeSummary />);
+    expect(await renderReportToText(bare, ctx)).not.toContain("snapshot is incomplete");
+    expect(await renderReportToStaticHtml(bare, ctx)).not.toContain("nre-warning");
   });
 
   it("web 排序/过滤只改变浏览状态:有无 filter prop 数值与行集合相同", async () => {
@@ -505,6 +518,9 @@ describe("text/web 双面同源", () => {
   });
 });
 
+// ScopeWarnings 的聚合、排序、折叠与下一步行为在 site-components.test.tsx(组件版单源);
+// 宿主不再有树外警告前置块,这里不重复宿主版。
+
 // ───────────────────────── FailureList ─────────────────────────
 
 describe("FailureList", () => {
@@ -710,9 +726,11 @@ describe("defineReport 装载规范化", () => {
     expect(fromTree.pages[0]!.title).toEqual(fromContent.pages[0]!.title);
   });
 
-  it("content 与 pages 同时声明或都省略,装载报错且文案含 <ExperimentComparison /> 下一步", () => {
-    expect(() => defineReport({ content: <ScopeSummary />, pages: [] } as never)).toThrow(/both "content" and "pages"/);
-    expect(() => defineReport({ title: "X" } as never)).toThrow(/<ExperimentComparison \/>/);
+  it("content 与 pages 同时声明或都省略,装载报错且文案给出 extends: standard 下一步", () => {
+    expect(() => defineReport({ content: <ScopeSummary />, pages: [] } as never)).toThrow(
+      /"content" and "pages" — declare exactly one/,
+    );
+    expect(() => defineReport({ title: "X" } as never)).toThrow(/niceeval\/report\/built-in/);
   });
 
   it("defineReport 产物不是 ReportNode:页里放产物装载报错;树校验同样拒绝", () => {
@@ -805,20 +823,72 @@ describe("defineReport 装载规范化", () => {
 // ───────────────────────── 内建报告 ─────────────────────────
 
 describe("内建报告", () => {
-  it("niceeval/report/built-in 默认导出是普通 defineReport 产物,与用户写的 defineReport(<ExperimentComparison />) 等价", async () => {
+  it("三页普通 defineReport:页 id、页名与逐页组件构成和 built-in.md 全文一致", () => {
     expect(builtInReport.kind).toBe("report");
-    expect(builtInReport.pages).toHaveLength(1);
+    expect(builtInReport.pages.map((p) => p.id)).toEqual(["report", "attempts", "traces"]);
+    expect(builtInReport.pages.map((p) => p.title)).toEqual([
+      { en: "Report", "zh-CN": "报告" },
+      "Attempts",
+      { en: "Traces", "zh-CN": "追踪" },
+    ]);
+    // 逐页组件构成:每页一个 Col,children 按 built-in.md 全文的声明序,全部是公开组件。
+    const childTypes = (content: unknown) => {
+      const col = content as { type: unknown; props: { children: Array<{ type: unknown; props: Record<string, unknown> }> } };
+      expect(col.type).toBe(Col);
+      return col.props.children;
+    };
+    const [reportPage, attemptsPage, tracesPage] = builtInReport.pages;
+    expect(childTypes(reportPage!.content).map((c) => c.type)).toEqual([
+      Hero,
+      ScopeWarnings,
+      CopyFixPrompt,
+      ExperimentComparison,
+    ]);
+    const attemptsChildren = childTypes(attemptsPage!.content);
+    expect(attemptsChildren.map((c) => c.type)).toEqual([Hero, ScopeWarnings, AttemptList]);
+    expect(attemptsChildren[2]!.props.filter).toBe(true);
+    expect(childTypes(tracesPage!.content).map((c) => c.type)).toEqual([Hero, ScopeWarnings, TraceWaterfall]);
+  });
 
+  it("与 --report 同内容文件完全等价:同一棵页树经同一条管线渲染出逐字节相同的两面", async () => {
     const s1 = snap({ experimentId: "compare/a", agent: "bub", results: [res("q", "passed")] });
     const s2 = snap({ experimentId: "compare/b", agent: "codex", results: [res("q", "failed")] });
     const scope = scopeOf([s1, s2]);
     const ctx = { scope, results: resultsOf([s1, s2]) };
-    const builtin = await renderReportToText(builtInReport, ctx, { width: 120 });
-    const user = await renderReportToText(defineReport(<ExperimentComparison />), ctx, { width: 120 });
-    expect(builtin).toBe(user);
+    // 用户按 built-in.md 全文自己写同内容的 defineReport(不 import 内建入口)。
+    const user = defineReport({
+      pages: [
+        {
+          id: "report",
+          title: { en: "Report", "zh-CN": "报告" },
+          content: (
+            <Col>
+              <Hero />
+              <ScopeWarnings />
+              <CopyFixPrompt />
+              <ExperimentComparison />
+            </Col>
+          ),
+        },
+        { id: "attempts", title: "Attempts", content: <Col><Hero /><ScopeWarnings /><AttemptList filter /></Col> },
+        {
+          id: "traces",
+          title: { en: "Traces", "zh-CN": "追踪" },
+          content: <Col><Hero /><ScopeWarnings /><TraceWaterfall /></Col>,
+        },
+      ],
+    });
+    for (const pageId of ["report", "attempts", "traces"]) {
+      expect(await renderReportToText(builtInReport, ctx, { width: 120, pageId })).toBe(
+        await renderReportToText(user, ctx, { width: 120, pageId }),
+      );
+      expect(await renderReportToStaticHtml(builtInReport, ctx, { pageId })).toBe(
+        await renderReportToStaticHtml(user, ctx, { pageId }),
+      );
+    }
   });
 
-  it("text 面多组时只输出组索引与单组查看命令;单组时输出散点与实验列表", async () => {
+  it("首页 text 面多组时只输出组索引与单组查看命令;单组时输出散点与实验列表;页首是 Hero 的标题与 meta 行", async () => {
     const g1 = snap({ experimentId: "compare/a", results: [res("q", "passed")] });
     const g2 = snap({ experimentId: "dev/b", results: [res("q", "failed")] });
     const multi = await renderReportToText(
@@ -826,8 +896,11 @@ describe("内建报告", () => {
       { scope: scopeOf([g1, g2]), results: resultsOf([g1, g2]) },
       { width: 120 },
     );
-    expect(multi).toContain("niceeval show --experiment compare");
-    expect(multi).toContain("niceeval show --experiment dev");
+    // Hero text 面:标题行(回退链终点)+ 最后运行 meta 行在页首
+    expect(multi.split("\n")[0]).toBe("Eval Results");
+    expect(multi).toContain("Last run");
+    expect(multi).toContain("niceeval show --exp compare");
+    expect(multi).toContain("niceeval show --exp dev");
     expect(multi).not.toContain("Eval / Attempt"); // 不倾倒组内 experiment 明细
 
     const priced = snap({
@@ -844,3 +917,57 @@ describe("内建报告", () => {
     expect(single).toContain("better → upper right");
   });
 });
+
+// ───────────────────────── extends 与内建视图集合 ─────────────────────────
+
+describe("extends 与内建视图集合", () => {
+  it("内建入口是视图集合:默认导出与具名导出 standard 同引用", () => {
+    expect(builtInReport).toBe(standard);
+  });
+
+  it("extends 叠外壳:页列表与 base 逐项同引用,声明整字段覆盖、未声明沿用 base", () => {
+    const branded = defineReport({
+      extends: standard,
+      title: "Memory Evals",
+      links: [{ label: "GitHub", href: "https://github.com/you/repo" }],
+    });
+    branded.pages.forEach((page, i) => expect(page).toBe(standard.pages[i]));
+    expect(branded.title).toBe("Memory Evals");
+    expect(branded.links).toEqual([{ label: "GitHub", href: "https://github.com/you/repo" }]);
+    expect(branded.head).toEqual([...standard.head]); // 未声明沿用 base
+
+    // 二级 extends 链:上一次折叠的产物就是下一次的 base
+    const chained = defineReport({ extends: branded, links: [] });
+    chained.pages.forEach((page, i) => expect(page).toBe(standard.pages[i]));
+    expect(chained.title).toBe("Memory Evals"); // 未声明沿用最近声明
+    expect(chained.links).toEqual([]); // 声明即整字段覆盖,不拼接
+
+    // ctx.report.title 取 extends 上声明的 title
+    const s = snap({ experimentId: "compare/a", results: [res("q", "passed")] });
+    expect(buildReportMeta(branded, scopeOf([s]), "report").title).toBe("Memory Evals");
+  });
+
+  it("无外壳字段的 extends 与内建逐页两面渲染逐字节相同", async () => {
+    const s1 = snap({ experimentId: "compare/a", agent: "bub", results: [res("q", "passed")] });
+    const s2 = snap({ experimentId: "compare/b", agent: "codex", results: [res("q", "failed")] });
+    const ctx = { scope: scopeOf([s1, s2]), results: resultsOf([s1, s2]) };
+    const alias = defineReport({ extends: standard });
+    for (const pageId of ["report", "attempts", "traces"]) {
+      expect(await renderReportToText(alias, ctx, { width: 120, pageId })).toBe(
+        await renderReportToText(builtInReport, ctx, { width: 120, pageId }),
+      );
+      expect(await renderReportToStaticHtml(alias, ctx, { pageId })).toBe(
+        await renderReportToStaticHtml(builtInReport, ctx, { pageId }),
+      );
+    }
+  });
+
+  it("extends 只收 defineReport 产物;与 content/pages 多选或全省略按完整用户反馈报错", () => {
+    // @ts-expect-error 非 defineReport 产物,类型层已拒绝;这里模拟无类型 JS 输入
+    expect(() => defineReport({ extends: {} })).toThrow(/must be a defineReport\(\.\.\.\) product/);
+    // @ts-expect-error extends 与 pages 互斥
+    expect(() => defineReport({ extends: standard, pages: standard.pages })).toThrow(/declare exactly one/);
+    // @ts-expect-error content / pages / extends 至少声明一个
+    expect(() => defineReport({ title: "x" })).toThrow(/niceeval\/report\/built-in/);
+  });
+});

package/src/report/index.ts

@@ -99,29 +99,39 @@ export { DEFAULT_REPORT_LOCALE, localizedTextEquals, resolveLocalizedText, resol
 export type { LocalizedText, ReportLocale } from "./locale.ts";
 
 // 官方双面组件(spec / data 双形态;配套 *Data 计算函数在下面成对导出)
+// 与站点组件(Hero / HeroCard / PoweredBy / ScopeWarnings / CopyFixPrompt / TraceWaterfall)
 export {
   AttemptList,
+  CopyFixPrompt,
   DeltaTable,
   EvalList,
   ExperimentComparison,
   ExperimentList,
   FailureList,
+  Hero,
+  HeroCard,
   MetricBars,
   MetricLine,
   MetricMatrix,
   MetricScatter,
   MetricTable,
+  PoweredBy,
   Scoreboard,
   ScopeSummary,
+  ScopeWarnings,
+  TraceWaterfall,
 } from "./components.tsx";
 export type {
   AttemptListProps,
+  CopyFixPromptProps,
   DataProps,
   DeltaTableProps,
   EvalListProps,
   ExperimentComparisonProps,
   ExperimentListProps,
   FailureListProps,
+  HeroCardProps,
+  HeroProps,
   MetricBarsProps,
   MetricLineProps,
   MetricMatrixProps,
@@ -129,23 +139,29 @@ export type {
   MetricTableProps,
   ScoreboardProps,
   ScopeSummaryProps,
+  ScopeWarningsProps,
+  TraceWaterfallProps,
 } from "./components.tsx";
 
 // 计算函数(组件解析面的具名形式,与组件成对;spec 形态下由管线代调,data 形态与
 // 嵌入场景下由作者手工调)
 export {
   attemptListData,
+  copyFixPromptData,
   deltaTableData,
   evalListData,
   experimentComparisonData,
   experimentListData,
+  heroData,
   metricLineData,
   metricMatrixData,
   metricScatterData,
   metricTableData,
   pairsByFlag,
   scopeSummaryData,
+  scopeWarningsData,
   scoreboardData,
+  traceWaterfallData,
 } from "./compute.ts";
 export type {
   DeltaTableOptions,
@@ -162,6 +178,7 @@ export type {
   AttemptListItem,
   AttemptLocator,
   BuiltInDimension,
+  CopyFixPromptData,
   CustomDimension,
   DeltaData,
   DeltaPair,
@@ -174,6 +191,7 @@ export type {
   ExperimentListEvalRow,
   ExperimentListItem,
   FlagPairs,
+  HeroData,
   LineData,
   MatrixData,
   Metric,
@@ -190,6 +208,8 @@ export type {
   ScopeWarning,
   ScoreboardData,
   TableData,
+  TraceSpanSummary,
+  TraceWaterfallRow,
   VerdictTally,
 } from "./types.ts";
 

package/src/report/locale.ts

@@ -146,6 +146,49 @@ const en = {
   "delta.pairHeader": "pair (A → B)",
   "delta.empty": "{experiments} experiments, 0 comparable pairs",
 
+  /** ScopeWarnings 聚合层的 chrome:汇总行、kind 徽标、组头与明细折叠标签;message 本体不经字典。 */
+  "warnings.summary.experiments.one": "{n} experiment flagged",
+  "warnings.summary.experiments.other": "{n} experiments flagged",
+  "warnings.group.unreadableSnapshot.one": "{n} snapshot skipped",
+  "warnings.group.unreadableSnapshot.other": "{n} snapshots skipped",
+  "warnings.details.one": "{n} warning",
+  "warnings.details.other": "{n} warnings",
+  "warnings.badge.partialCoverage": "coverage {covered}/{total}",
+  "warnings.badge.staleSnapshot": "{gap} behind",
+  "warnings.badge.unfinishedSnapshot": "unfinished",
+  "warnings.gap.second.one": "{n} second",
+  "warnings.gap.second.other": "{n} seconds",
+  "warnings.gap.minute.one": "{n} minute",
+  "warnings.gap.minute.other": "{n} minutes",
+  "warnings.gap.hour.one": "{n} hour",
+  "warnings.gap.hour.other": "{n} hours",
+  "warnings.gap.day.one": "{n} day",
+  "warnings.gap.day.other": "{n} days",
+
+  /** Hero / HeroCard 的运行 meta(hero.noRuns 是 latestStartedAt 为 null 时的内置文案)。 */
+  "hero.lastRun": "Last run {time}",
+  "hero.noRuns": "No runs yet",
+  /** web 面的合成来源标注(仅 snapshots > 1 时显示)。 */
+  "hero.composedRuns": "composed from {n} runs",
+  /** text 面的合成来源标注(show 页首 meta 行,仅 snapshots > 1 时显示)。 */
+  "hero.composedSnapshots": "composed from {n} snapshots",
+
+  /** CopyFixPrompt 的 web 面 chrome(prompt 本身面向 agent、固定英文,不经词典)。 */
+  "copyFixPrompt.summary.one": "Fix prompt · {n} failure",
+  "copyFixPrompt.summary.other": "Fix prompt · {n} failures",
+  "copyFixPrompt.copy": "Copy fix prompt",
+
+  /** TraceWaterfall 的 chrome。 */
+  "traceWaterfall.empty": "No attempts",
+  "traceWaterfall.noTrace": "no trace",
+  "traceWaterfall.spans.one": "{n} span",
+  "traceWaterfall.spans.other": "{n} spans",
+  "traceWaterfall.failedSpans.one": "{n} failed",
+  "traceWaterfall.failedSpans.other": "{n} failed",
+
+  /** AttemptList 的 web 面过滤框占位符(filter 渐进增强)。 */
+  "attemptList.filterPlaceholder": "Filter attempts…",
+
   "tabs.tab": "Tab",
 } as const;
 
@@ -245,6 +288,42 @@ const zhCN: Record<ReportMessageKey, string> = {
   "delta.pairHeader": "对比 (A → B)",
   "delta.empty": "{experiments} 个实验、0 个可配对",
 
+  "warnings.summary.experiments.one": "{n} 个实验的数字带警告",
+  "warnings.summary.experiments.other": "{n} 个实验的数字带警告",
+  "warnings.group.unreadableSnapshot.one": "{n} 个快照被跳过",
+  "warnings.group.unreadableSnapshot.other": "{n} 个快照被跳过",
+  "warnings.details.one": "{n} 条原始警告",
+  "warnings.details.other": "{n} 条原始警告",
+  "warnings.badge.partialCoverage": "覆盖 {covered}/{total}",
+  "warnings.badge.staleSnapshot": "落后 {gap}",
+  "warnings.badge.unfinishedSnapshot": "未收尾",
+  "warnings.gap.second.one": "{n} 秒",
+  "warnings.gap.second.other": "{n} 秒",
+  "warnings.gap.minute.one": "{n} 分钟",
+  "warnings.gap.minute.other": "{n} 分钟",
+  "warnings.gap.hour.one": "{n} 小时",
+  "warnings.gap.hour.other": "{n} 小时",
+  "warnings.gap.day.one": "{n} 天",
+  "warnings.gap.day.other": "{n} 天",
+
+  "hero.lastRun": "最后运行 {time}",
+  "hero.noRuns": "暂无运行",
+  "hero.composedRuns": "由 {n} 次运行合成",
+  "hero.composedSnapshots": "由 {n} 份快照合成",
+
+  "copyFixPrompt.summary.one": "修复 prompt · {n} 个失败",
+  "copyFixPrompt.summary.other": "修复 prompt · {n} 个失败",
+  "copyFixPrompt.copy": "复制修复 prompt",
+
+  "traceWaterfall.empty": "没有 attempt",
+  "traceWaterfall.noTrace": "无 trace",
+  "traceWaterfall.spans.one": "{n} 个 span",
+  "traceWaterfall.spans.other": "{n} 个 span",
+  "traceWaterfall.failedSpans.one": "{n} 个失败",
+  "traceWaterfall.failedSpans.other": "{n} 个失败",
+
+  "attemptList.filterPlaceholder": "筛选 attempt…",
+
   "tabs.tab": "Tab",
 };
 
@@ -276,7 +355,10 @@ export function countText(
     | "scoreboard.unscorable"
     | "scoreboard.ignored"
     | "entityList.moreFailures"
-    | "table.columnsHidden",
+    | "table.columnsHidden"
+    | "copyFixPrompt.summary"
+    | "traceWaterfall.spans"
+    | "traceWaterfall.failedSpans",
   n: number,
 ): string {
   return localeText(locale, `${base}.${n === 1 ? "one" : "other"}` as ReportMessageKey, { n });

package/src/report/react/AttemptList.tsx

@@ -53,7 +53,8 @@ export function AttemptRow({
 }): ReactElement {
   const reason = failureSummaryText(item, locale);
   return (
-    <li className={cx("nre-attempt", `nre-attempt-${item.verdict}`)}>
+    // data-nre-verdict:filter 增强按 verdict 词收窄行的匹配源(✓/✗ 判定符不含词面)
+    <li className={cx("nre-attempt", `nre-attempt-${item.verdict}`)} data-nre-verdict={item.verdict}>
       <div className="nre-attempt-head">
         <AttemptLocatorBadge item={item} attemptHref={attemptHref} />
         <span className="nre-attempt-eval">{item.evalId}</span>
@@ -72,6 +73,7 @@ export function AttemptRow({
 export function AttemptList({
   data,
   total,
+  filter = false,
   attemptHref = DEFAULT_ATTEMPT_HREF,
   className,
   locale = DEFAULT_REPORT_LOCALE,
@@ -79,6 +81,8 @@ export function AttemptList({
   data: readonly AttemptListItem[];
   /** data 被 slice 时的原始数量;如实显示还剩多少条没展示。 */
   total?: number;
+  /** web 面加过滤输入框(按 experiment、eval、agent、verdict 或摘要文本收窄行);渐进增强,不改变数据。 */
+  filter?: boolean;
   attemptHref?: (locator: AttemptLocator) => string;
   className?: string;
   locale?: ReportLocale;
@@ -86,6 +90,14 @@ export function AttemptList({
   const remaining = (total ?? data.length) - data.length;
   return (
     <section className={cx("nre", "nre-attempt-list", className)}>
+      {filter && (
+        <input
+          className="nre-filter"
+          data-nre-attempt-filter=""
+          type="search"
+          placeholder={localeText(locale, "attemptList.filterPlaceholder")}
+        />
+      )}
       {data.length === 0 && <p className="nre-attempt-list-empty">{localeText(locale, "attemptList.empty")}</p>}
       <ul className="nre-attempts">
         {data.map((item) => (

package/src/report/react/CopyFixPrompt.tsx

@@ -0,0 +1,37 @@
+// CopyFixPrompt:批量修复 prompt 的 web 面。prompt 在 resolve 阶段算好、烘进静态 HTML;
+// 无 JS 时 prompt 全文在原生 <details> 折叠块里完整可读,「复制到剪贴板」是 enhance.js 的
+// 增强行为(data-nre-copy),增强只加浏览行为、不改内容。failures 为 0 时零输出
+// (docs/feature/reports/library/site-components.md「CopyFixPrompt」)。
+
+import type { ReactElement } from "react";
+import type { CopyFixPromptData } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, type ReportLocale } from "../locale.ts";
+import { cx } from "./format.ts";
+
+/**
+ * 批量修复 prompt(纯 web 渲染面):折叠块内完整 prompt 文本 + 复制按钮(增强层)。
+ * 嵌入自有 React 页面时配合 `copyFixPromptData()` 使用;failures 为 0 返回 null。
+ */
+export function CopyFixPrompt({
+  data,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: CopyFixPromptData;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement | null {
+  if (data.failures === 0) return null;
+  return (
+    <details className={cx("nre", "nre-copy-fix-prompt", className)}>
+      <summary className="nre-copy-fix-prompt-summary">
+        {countText(locale, "copyFixPrompt.summary", data.failures)}
+      </summary>
+      {/* 无 JS 时按钮静默无功能(与过滤框同一约定);prompt 文本本身始终完整可读 */}
+      <button type="button" className="nre-copy-fix-prompt-copy" data-nre-copy={data.prompt}>
+        {localeText(locale, "copyFixPrompt.copy")}
+      </button>
+      <pre className="nre-copy-fix-prompt-text">{data.prompt}</pre>
+    </details>
+  );
+}

package/src/report/react/HeroCard.tsx

@@ -0,0 +1,59 @@
+// HeroCard:站点标题区的 web 面——hero 标题(h1)、运行 meta(最后运行时间按渲染 locale
+// 格式化;latestStartedAt 为 null 时内置「暂无运行」文案;snapshots > 1 时标注合成来源)
+// 与品牌行(等同 PoweredBy,恒含、无拆除 prop)。标题输入是站点声明与 Scope 的合成物,
+// 组件只收 data 形态(docs/feature/reports/library/site-components.md「HeroCard」)。
+
+import type { ReactElement } from "react";
+import type { HeroData } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveLocalizedText, type LocalizedText, type ReportLocale } from "../locale.ts";
+import { cx } from "./format.ts";
+import { PoweredBy } from "./PoweredBy.tsx";
+
+/** ISO 时间 → 按 locale 的「最后运行」显示(年月日 时:分);不可解析原样返回。 */
+function formatLastRun(iso: string, locale: ReportLocale): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.valueOf())) return iso;
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(date);
+  } catch {
+    return iso;
+  }
+}
+
+/**
+ * 站点标题区(纯 web 渲染面):`<h1>` 标题 + meta 行 + 品牌行。
+ * 嵌入自有 React 页面时配合 `heroData()` 使用。
+ */
+export function HeroCard({
+  title,
+  data,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  title: LocalizedText;
+  data: HeroData;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  const meta =
+    data.latestStartedAt === null
+      ? localeText(locale, "hero.noRuns")
+      : [
+          localeText(locale, "hero.lastRun", { time: formatLastRun(data.latestStartedAt, locale) }),
+          ...(data.snapshots > 1 ? [localeText(locale, "hero.composedRuns", { n: data.snapshots })] : []),
+        ].join(" · ");
+  return (
+    <header className={cx("nre", "nre-hero", className)}>
+      <h1 className="nre-hero-title">{resolveLocalizedText(title, locale)}</h1>
+      <p className="nre-hero-meta">{meta}</p>
+      {/* 品牌行与 PoweredBy 同一渲染:品牌跟着组件走,不区分官方宿主与嵌入页面 */}
+      <PoweredBy />
+    </header>
+  );
+}

package/src/report/react/PoweredBy.tsx

@@ -0,0 +1,20 @@
+// PoweredBy:唯一的品牌件的 web 面。品牌契约是「提供一个组件,不给开关」——无 props、
+// 无关闭配置;不想要品牌 = 不用它(docs/feature/reports/library/site-components.md「PoweredBy」)。
+// rel 只声明 noopener 以保留 Referer(默认策略只发 origin):官网统计由此得知点击来自哪个
+// 报告站点;静态导出在构建期不知道自己托管在哪个域名,来源不进 URL 参数。
+
+import type { ReactElement } from "react";
+
+/** 品牌行的固定去处:niceeval 官网,utm 标记「来自报告的品牌行」。 */
+export const POWERED_BY_HREF = "https://niceeval.com/?utm_source=report&utm_medium=powered-by";
+
+/** 一行品牌色小字 `Powered by NiceEval`,链接官网;HeroCard 的品牌行与它同一渲染。 */
+export function PoweredBy(): ReactElement {
+  return (
+    <p className="nre nre-powered-by">
+      <a href={POWERED_BY_HREF} target="_blank" rel="noopener">
+        Powered by NiceEval
+      </a>
+    </p>
+  );
+}

package/src/report/react/ScopeWarnings.tsx

@@ -0,0 +1,74 @@
+// ScopeWarnings:选择警告区的 web 面。按「下一步动作」聚合(../scope-warnings.ts,
+// 与 text 面共用同一聚合层):整个警告区是默认折叠的原生 <details>,<summary> 是
+// 分类计数汇总行(恒可见);展开后每组组头 = 标题 + kind 徽标 + 去重后恰一条的
+// 可复制命令,逐条原始 message 收进第二层 <details>(总条数 ≤ 3 默认展开)。
+// 空警告集零输出,不渲染空容器
+// (docs/feature/reports/library/site-components.md「ScopeWarnings」)。
+
+import type { ReactElement } from "react";
+import type { ScopeWarning } from "../types.ts";
+import { DEFAULT_REPORT_LOCALE, type ReportLocale } from "../locale.ts";
+import { groupScopeWarnings, warningDetailsLabel } from "../scope-warnings.ts";
+import { cx } from "./format.ts";
+
+/** 命令的可复制块:无 JS 时点击全选(user-select: all),enhance.js 在场时点击复制。 */
+function CommandBlock({ command }: { command: string }): ReactElement {
+  return (
+    <code className="nre-warning-command" data-nre-copy={command}>
+      {command}
+    </code>
+  );
+}
+
+/**
+ * 选择警告区(纯 web 渲染面):按动作聚合的警告组。嵌入自有 React 页面时传
+ * `data={scope.warnings}`;空集返回 null,不渲染空容器。
+ */
+export function ScopeWarnings({
+  data,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: readonly ScopeWarning[];
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement | null {
+  if (data.length === 0) return null;
+  const { summary, groups, detailsOpen } = groupScopeWarnings(data, locale);
+  return (
+    <div className={cx("nre", "nre-scope-warnings", className)}>
+      <details className="nre-warnings">
+        <summary className="nre-warnings-summary">{summary}</summary>
+        <ul className="nre-warning-groups">
+          {groups.map((group, i) => (
+            <li key={i} className="nre-warning-group" data-category={group.category}>
+              <div className="nre-warning-head">
+                <span className="nre-warning-title">{group.title}</span>
+                {group.badges.map((badge, j) => (
+                  <span key={j} className="nre-warning-badge" data-kind={badge.kind}>
+                    {badge.text}
+                  </span>
+                ))}
+                {group.headCommand !== null && <CommandBlock command={group.headCommand} />}
+              </div>
+              <details className="nre-warning-details" open={detailsOpen || undefined}>
+                <summary>{warningDetailsLabel(locale, group.warnings.length)}</summary>
+                <ul>
+                  {group.warnings.map((w, j) => (
+                    <li key={j} className="nre-warning" data-kind={w.kind}>
+                      {w.message}
+                      {/* 组头命令的含义是「复制即推进整组」;去重后多于一条时命令随明细逐条走 */}
+                      {group.headCommand === null && "command" in w && w.command !== undefined && (
+                        <CommandBlock command={w.command} />
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </details>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </div>
+  );
+}