niceeval 0.8.1 → 0.9.0

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>
+  );
+}

package/src/report/react/TraceWaterfall.tsx

@@ -0,0 +1,78 @@
+// TraceWaterfall:执行时间瀑布的 web 面——每个 attempt 一行,静态渲染顶层 span 分解条
+// (定位按 startOffsetMs / durationMs 百分比;失败 span 带失败标记),行链接 attempt 详情。
+// trace 缺失的行照常出现并如实显示缺失;排序、缩放是渐进增强,静态 HTML 无 JS 完整可读
+// (docs/feature/reports/library/site-components.md「TraceWaterfall」)。
+
+import type { ReactElement } from "react";
+import type { TraceWaterfallRow } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, type ReportLocale } from "../locale.ts";
+import { cx, formatDurationMs } from "./format.ts";
+
+const DEFAULT_ATTEMPT_HREF = (locator: AttemptLocator): string => `#/attempt/${locator}`;
+
+function pct(part: number, total: number): string {
+  if (total <= 0) return "0%";
+  return `${Math.min(100, Math.max(0, (part / total) * 100)).toFixed(2)}%`;
+}
+
+/**
+ * 执行时间瀑布(纯 web 渲染面):嵌入自有 React 页面时配合 `traceWaterfallData()` 使用。
+ * 只画被测 agent 的原始 span;runner 生命周期节点不在 data 里,组合视图归 attempt 详情。
+ */
+export function TraceWaterfall({
+  data,
+  attemptHref = DEFAULT_ATTEMPT_HREF,
+  className,
+  locale = DEFAULT_REPORT_LOCALE,
+}: {
+  data: readonly TraceWaterfallRow[];
+  attemptHref?: (locator: AttemptLocator) => string;
+  className?: string;
+  locale?: ReportLocale;
+}): ReactElement {
+  return (
+    <section className={cx("nre", "nre-trace-waterfall", className)}>
+      {data.length === 0 && <p className="nre-waterfall-empty">{localeText(locale, "traceWaterfall.empty")}</p>}
+      <ul className="nre-waterfall">
+        {data.map((row) => {
+          const failedSpans = row.spans.filter((span) => span.failed).length;
+          return (
+            <li key={row.locator} className="nre-waterfall-row">
+              <div className="nre-waterfall-head">
+                <a className="nre-locator" href={attemptHref(row.locator)}>
+                  {row.locator}
+                </a>
+                <span className="nre-waterfall-eval">{row.evalId}</span>
+                <span className="nre-waterfall-experiment">{row.experimentId}</span>
+                {/* trace 缺失如实显示缺失,不猜值、不藏行 */}
+                <span className="nre-waterfall-duration">
+                  {row.durationMs === null ? localeText(locale, "traceWaterfall.noTrace") : formatDurationMs(row.durationMs)}
+                </span>
+                <span className="nre-waterfall-count">{countText(locale, "traceWaterfall.spans", row.spans.length)}</span>
+                {failedSpans > 0 && (
+                  <span className="nre-waterfall-failed">✗ {countText(locale, "traceWaterfall.failedSpans", failedSpans)}</span>
+                )}
+              </div>
+              {row.durationMs !== null && row.spans.length > 0 && (
+                <div className="nre-waterfall-track">
+                  {row.spans.map((span, i) => (
+                    <span
+                      key={i}
+                      className={cx("nre-waterfall-span", `nre-span-${span.kind}`, span.failed && "nre-span-failed")}
+                      style={{
+                        left: pct(span.startOffsetMs, row.durationMs!),
+                        width: `max(${pct(span.durationMs, row.durationMs!)}, 0.5%)`,
+                      }}
+                      title={`${span.name} · ${formatDurationMs(span.durationMs)}${span.failed ? " · ✗" : ""}`}
+                    />
+                  ))}
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/src/report/react/enhance.js

@@ -196,6 +196,20 @@
     }
   });
 
+  // AttemptList 的过滤(<AttemptList filter />):按条目全文 + data-nre-verdict(verdict 词
+  // 不在可见文本里,判定符是 ✓/✗)收窄 .nre-attempt 行。只改浏览状态,不改数据与初始 HTML。
+  document.addEventListener("input", function (e) {
+    var input = closest(e.target, "input[data-nre-attempt-filter]");
+    if (!input) return;
+    var scope = input.parentElement;
+    var rows = scope ? scope.querySelectorAll(".nre-attempt") : [];
+    var query = input.value.trim().toLowerCase();
+    for (var i = 0; i < rows.length; i++) {
+      var haystack = rows[i].textContent + " " + (rows[i].getAttribute("data-nre-verdict") || "");
+      rows[i].classList.toggle("nre-row-hidden", query !== "" && haystack.toLowerCase().indexOf(query) === -1);
+    }
+  });
+
   // ───────────────────────── tooltip:.nre-scatter-point / .nre-line-point ─────────────────────────
   // 首次 hover 时把点内 <title> 的内容搬进 data-nre-title(避免与原生 tooltip 重影),
   // 渲染样式化 tooltip div(定位在点上方,挂在所属 figure 里)。无 JS 时 <title> 原样生效。

package/src/report/react/index.tsx

@@ -21,16 +21,25 @@ export { MetricLine } from "./MetricLine.tsx";
 export { DeltaTable } from "./DeltaTable.tsx";
 export { Scoreboard } from "./Scoreboard.tsx";
 
+// 站点组件的纯 web 面(data 形态;Hero 是组合组件,只住 niceeval/report)
+export { HeroCard } from "./HeroCard.tsx";
+export { PoweredBy } from "./PoweredBy.tsx";
+export { ScopeWarnings } from "./ScopeWarnings.tsx";
+export { CopyFixPrompt } from "./CopyFixPrompt.tsx";
+export { TraceWaterfall } from "./TraceWaterfall.tsx";
+
 // 数据契约类型(家在 ../types.ts,「算」与「画」两侧共用同一份)
 export type {
   AttemptListItem,
   AttemptLocator,
+  CopyFixPromptData,
   DeltaData,
   EvalListItem,
   ExperimentComparisonData,
   ExperimentComparisonGroupData,
   ExperimentListEvalRow,
   ExperimentListItem,
+  HeroData,
   LineData,
   MatrixData,
   MetricCell,
@@ -40,6 +49,8 @@ export type {
   ScopeWarning,
   ScoreboardData,
   TableData,
+  TraceSpanSummary,
+  TraceWaterfallRow,
   VerdictTally,
 } from "../types.ts";
 

package/src/report/react/styles.css

@@ -436,18 +436,63 @@ table.nre,
   margin: 0.25rem 0 0;
 }
 
-/* ---- 宿主警告块:.nre-report-warnings 外壳 + ul.nre-warnings + li.nre-warning[data-kind] ---- */
+/* ---- 宿主警告块:.nre-warnings 是默认折叠的 <details>,<summary> 汇总行恒可见。
+   不占框:无边框、无底色、不缩进,警示色只落在汇总行文字与徽标上。 ---- */
 .nre .nre-warnings {
-  list-style: none;
   margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in oklch, var(--warn), var(--line) 45%);
-  border-left: 3px solid var(--warn);
-  border-radius: 8px;
-  background: color-mix(in oklch, var(--warn), var(--panel) 92%);
   color: var(--text);
   font-size: 13px;
 }
+/* 外层 <details> 的 <summary>:分类计数汇总行,原生无 JS 可展开。 */
+.nre .nre-warnings > .nre-warnings-summary {
+  font-weight: 650;
+  color: var(--warn);
+  cursor: pointer;
+}
+.nre .nre-warning-groups {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+.nre .nre-warning-group + .nre-warning-group {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+.nre .nre-warning-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
+.nre .nre-warning-title { font-weight: 650; }
+.nre .nre-warning-badge {
+  padding: 1px 8px;
+  border: 1px solid color-mix(in oklch, var(--warn), var(--line) 35%);
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--warn), var(--panel) 84%);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+/* freshness 组(数字对但可能过期)视觉降一档,integrity 保持警示底色。 */
+.nre .nre-warning-group[data-category="freshness"] .nre-warning-badge {
+  border-color: var(--line);
+  background: var(--panel);
+  color: var(--soft);
+}
+.nre .nre-warning-details { margin: 4px 0 0; }
+/* <details> 原生无 JS 可展开,cursor 不经 .nre-js 门控。 */
+.nre .nre-warning-details > summary {
+  color: var(--soft);
+  font-size: 0.9em;
+  cursor: pointer;
+}
+.nre .nre-warning-details > ul {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0 0 0 12px;
+  border-left: 2px solid var(--line);
+}
 .nre .nre-warning + .nre-warning { margin-top: 8px; }
 /* 警告携带的下一步命令:等宽块,无 JS 时点击即全选;enhance.js 在场时点击复制 */
 .nre .nre-warning-command {
@@ -470,6 +515,141 @@ table.nre,
   color: var(--good);
 }
 
+/* ---- Hero / PoweredBy(站点标题区与品牌行) ---- */
+.nre-hero { margin: 0 0 18px; }
+.nre-hero .nre-hero-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.nre-hero .nre-hero-meta {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+.nre-powered-by {
+  margin: 6px 0 0;
+  font-size: 12px;
+}
+.nre-powered-by a {
+  color: var(--soft);
+  text-decoration: none;
+}
+.nre-powered-by a:hover { color: var(--text); text-decoration: underline; }
+
+/* ---- CopyFixPrompt(批量修复 prompt:折叠块 + 增强层复制) ---- */
+.nre-copy-fix-prompt {
+  margin: 0 0 16px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  padding: 8px 12px;
+}
+.nre-copy-fix-prompt > summary {
+  cursor: pointer;
+  font-weight: 620;
+  font-size: 13px;
+}
+.nre-copy-fix-prompt .nre-copy-fix-prompt-copy {
+  margin: 8px 0 0;
+  padding: 4px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+}
+:root.nre-js .nre-copy-fix-prompt .nre-copy-fix-prompt-copy { cursor: copy; }
+.nre-copy-fix-prompt .nre-copy-fix-prompt-copy[data-nre-copied]::after {
+  content: "✓";
+  margin-left: 0.6em;
+  color: var(--good);
+}
+.nre-copy-fix-prompt .nre-copy-fix-prompt-text {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--bg, transparent);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- TraceWaterfall(每 attempt 一行的静态时间瀑布) ---- */
+.nre-trace-waterfall .nre-waterfall {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.nre-trace-waterfall .nre-waterfall-row {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  background: var(--panel);
+}
+.nre-trace-waterfall .nre-waterfall-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75em;
+  align-items: baseline;
+}
+.nre-trace-waterfall .nre-waterfall-eval { font-weight: 620; }
+.nre-trace-waterfall .nre-waterfall-experiment,
+.nre-trace-waterfall .nre-waterfall-duration,
+.nre-trace-waterfall .nre-waterfall-count {
+  color: var(--muted);
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+.nre-trace-waterfall .nre-waterfall-failed { color: var(--bad); font-size: 0.9em; }
+/* 分解条:span 按 startOffsetMs / durationMs 百分比静态定位,失败 span 换警示色 */
+.nre-trace-waterfall .nre-waterfall-track {
+  position: relative;
+  height: 14px;
+  margin-top: 8px;
+  border-radius: 4px;
+  background: color-mix(in oklch, var(--line), var(--panel) 60%);
+  overflow: hidden;
+}
+.nre-trace-waterfall .nre-waterfall-span {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  border-radius: 2px;
+  background: var(--line-strong);
+}
+.nre-trace-waterfall .nre-span-agent { background: color-mix(in oklch, var(--good), var(--line-strong) 40%); }
+.nre-trace-waterfall .nre-span-model { background: color-mix(in oklch, var(--warn), var(--line-strong) 40%); }
+.nre-trace-waterfall .nre-span-tool { background: color-mix(in oklch, var(--line-strong), var(--text) 25%); }
+.nre-trace-waterfall .nre-span-failed { background: var(--bad); }
+.nre-trace-waterfall .nre-waterfall-empty {
+  border: 1px dashed var(--line-strong);
+  border-radius: 8px;
+  padding: 18px;
+  color: var(--muted);
+  text-align: center;
+  background: var(--panel);
+}
+
+/* ---- AttemptList 的过滤框(<AttemptList filter />,渐进增强) ---- */
+.nre-attempt-list > .nre-filter {
+  height: 34px;
+  min-width: 260px;
+  margin-bottom: 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 0 11px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+}
+
 /* ---- MetricMatrix ---- */
 .nre-metric-matrix .nre-matrix-caption {
   caption-side: top;