niceeval 0.5.4 → 0.6.1

package/dist/report/primitives.d.ts

@@ -0,0 +1,64 @@
+import type { AttemptLocator } from "../results/locator.ts";
+import { type ReportNode } from "./tree.ts";
+import { type ReportLocale } from "./locale.ts";
+import { type ColumnAlign } from "./text/layout.ts";
+export interface LayoutProps {
+    children?: ReportNode;
+    className?: string;
+}
+/** 纵向依次排列:网页是块级堆叠,终端是逐块输出(块间空一行)。 */
+export declare const Col: import("./tree.ts").ReportComponent<LayoutProps>;
+/** 并排:网页横向排布,终端字符分栏;终端宽度不够时自动降级为纵向。 */
+export declare const Row: import("./tree.ts").ReportComponent<LayoutProps>;
+export interface SectionProps extends LayoutProps {
+    title: string;
+}
+/** 带标题的块:网页是标题层级,终端是标题行加缩进。 */
+export declare const Section: import("./tree.ts").ReportComponent<SectionProps>;
+/** 说明文字:网页是段落,终端是折行文本。 */
+export declare const Text: import("./tree.ts").ReportComponent<LayoutProps>;
+export interface StyleProps {
+    children?: string;
+}
+/** 自定义组件的样式随树带走:web 面吐 <style> 标签,text 面渲染为空。 */
+export declare const Style: import("./tree.ts").ReportComponent<StyleProps>;
+/** 一列的定义:取哪个 cells 键、表头写什么、往哪边对齐。 */
+export interface TableColumn {
+    /** 取 `row.cells[key]` 的键。 */
+    key: string;
+    /** 表头文案,两个面都原样渲染。 */
+    header: string;
+    /** 对齐方向,默认 `"left"`;`"right"` 按显示宽度右对齐,数字列用。 */
+    align?: ColumnAlign;
+}
+/** 一行的数据:身份键、已格式化的格子、可选的 attempt locator。 */
+export interface TableRow {
+    /** 行身份。 */
+    key: string;
+    /** 已格式化的显示值;`null`(或缺这个键)渲染成 `—`,不补 0。 */
+    cells: Record<string, string | null>;
+    /** 带上就多一列 attempt:web 面链到证据室,text 面列出 locator。 */
+    locator?: AttemptLocator;
+}
+export interface TableProps {
+    /** 列定义;数组顺序即渲染顺序。 */
+    columns: TableColumn[];
+    /** 行数据;数组顺序即渲染顺序,组件不重排也不过滤。 */
+    rows: TableRow[];
+    /** 组件自带文案(attempt 表头、丢列提示)的语言;省略时随宿主。 */
+    locale?: ReportLocale;
+    /** web 面挂到 `<table>` 上。 */
+    className?: string;
+}
+/**
+ * 自定义表的标准件:列由报告作者定,格子是算好的显示值,两个面各自排整齐。
+ *
+ * text 面列宽按**显示宽度**算(CJK / 全角记 2 列),所以中文列不会撕歪;总宽超过
+ * `ctx.width` 时先折最宽的左对齐列(右对齐列是数字,折行读不了),压到下限仍放不下
+ * 就从右侧丢列并在表下如实报丢了几列。web 面是 `<table>` + `<thead>` / `<tbody>`,
+ * 右对齐落成 `nre-align-right` 类,不用内联样式。
+ *
+ * 官方的 `MetricTable` / `MetricMatrix` / `Scoreboard` / `DeltaTable` 的 text 面就建在
+ * 这个组件上:自定义表和官方表用同一把尺子。
+ */
+export declare const Table: import("./tree.ts").ReportComponent<TableProps>;

package/dist/report/primitives.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineComponent } from "./tree.js";
+import { localeText } from "./locale.js";
+import { indentBlock, joinColumns, wrapDisplay } from "./text/layout.js";
+import { renderTableText } from "./text/table.js";
+function childArray(children) {
+    if (children === null || children === undefined || typeof children === "boolean")
+        return [];
+    return Array.isArray(children) ? children : [children];
+}
+function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/** 纵向依次排列:网页是块级堆叠,终端是逐块输出(块间空一行)。 */
+export const Col = defineComponent({
+    web({ children, className }) {
+        return _jsx("div", { className: cx("nre", "nre-col", className), children: children });
+    },
+    text({ children }, ctx) {
+        return childArray(children)
+            .map((child) => ctx.render(child))
+            .filter((block) => block.length > 0)
+            .join("\n\n");
+    },
+});
+Col.displayName = "Col";
+// Row 的每栏至少留这个宽度,不硬挤;不够就降级纵向
+const MIN_COLUMN_WIDTH = 24;
+const COLUMN_SEPARATOR = " │ ";
+/** 并排:网页横向排布,终端字符分栏;终端宽度不够时自动降级为纵向。 */
+export const Row = defineComponent({
+    web({ children, className }) {
+        return _jsx("div", { className: cx("nre", "nre-row", className), children: children });
+    },
+    text({ children }, ctx) {
+        const blocks = childArray(children).filter((child) => child !== null && child !== undefined && typeof child !== "boolean");
+        if (blocks.length === 0)
+            return "";
+        if (blocks.length === 1)
+            return ctx.render(blocks[0]);
+        const columnWidth = Math.floor((ctx.width - COLUMN_SEPARATOR.length * (blocks.length - 1)) / blocks.length);
+        if (columnWidth < MIN_COLUMN_WIDTH) {
+            // 宽度不足:降级纵向,与 Col 同一形态
+            return blocks
+                .map((child) => ctx.render(child))
+                .filter((block) => block.length > 0)
+                .join("\n\n");
+        }
+        const rendered = blocks.map((child) => ctx.render(child, columnWidth));
+        return joinColumns(rendered, rendered.map(() => columnWidth), COLUMN_SEPARATOR);
+    },
+});
+Row.displayName = "Row";
+/** 带标题的块:网页是标题层级,终端是标题行加缩进。 */
+export const Section = defineComponent({
+    web({ title, children, className }) {
+        return (_jsxs("section", { className: cx("nre", "nre-section", className), children: [_jsx("h2", { className: "nre-section-title", children: title }), children] }));
+    },
+    text({ title, children }, ctx) {
+        const body = childArray(children)
+            .map((child) => ctx.render(child, ctx.width - 2))
+            .filter((block) => block.length > 0)
+            .join("\n\n");
+        return body.length > 0 ? `${title}\n${indentBlock(body, "  ")}` : title;
+    },
+});
+Section.displayName = "Section";
+/** 说明文字:网页是段落,终端是折行文本。 */
+export const Text = defineComponent({
+    web({ children, className }) {
+        return _jsx("p", { className: cx("nre", "nre-text", className), children: children });
+    },
+    text({ children }, ctx) {
+        return wrapDisplay(ctx.render(children), ctx.width).join("\n");
+    },
+});
+Text.displayName = "Text";
+/** 自定义组件的样式随树带走:web 面吐 <style> 标签,text 面渲染为空。 */
+export const Style = defineComponent({
+    web({ children }) {
+        return _jsx("style", { children: children });
+    },
+    text() {
+        return "";
+    },
+});
+Style.displayName = "Style";
+const MISSING_MARK = "—";
+/**
+ * 自定义表的标准件:列由报告作者定,格子是算好的显示值,两个面各自排整齐。
+ *
+ * text 面列宽按**显示宽度**算(CJK / 全角记 2 列),所以中文列不会撕歪;总宽超过
+ * `ctx.width` 时先折最宽的左对齐列(右对齐列是数字,折行读不了),压到下限仍放不下
+ * 就从右侧丢列并在表下如实报丢了几列。web 面是 `<table>` + `<thead>` / `<tbody>`,
+ * 右对齐落成 `nre-align-right` 类,不用内联样式。
+ *
+ * 官方的 `MetricTable` / `MetricMatrix` / `Scoreboard` / `DeltaTable` 的 text 面就建在
+ * 这个组件上:自定义表和官方表用同一把尺子。
+ */
+export const Table = defineComponent({
+    web({ columns, rows, locale, className }, ctx) {
+        const chrome = locale ?? ctx.locale;
+        const hasLocator = rows.some((row) => row.locator !== undefined);
+        const alignClass = (align) => (align === "right" ? "nre-align-right" : undefined);
+        return (_jsxs("table", { className: cx("nre", "nre-table", className), children: [_jsx("thead", { children: _jsxs("tr", { children: [columns.map((column) => (_jsx("th", { scope: "col", className: alignClass(column.align), children: column.header }, column.key))), hasLocator ? _jsx("th", { scope: "col", children: localeText(chrome, "table.attempt") }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [columns.map((column) => {
+                                const value = row.cells[column.key];
+                                const missing = value === null || value === undefined;
+                                return (_jsx("td", { className: alignClass(column.align), children: missing ? _jsx("span", { className: "nre-missing", children: MISSING_MARK }) : value }, column.key));
+                            }), hasLocator ? (_jsx("td", { children: row.locator ? (_jsx("a", { className: "nre-locator", href: ctx.attemptHref(row.locator), children: row.locator })) : (_jsx("span", { className: "nre-missing", children: MISSING_MARK })) })) : null] }, row.key))) })] }));
+    },
+    text: renderTableText,
+});
+Table.displayName = "Table";

package/dist/report/react/AttemptList.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import type { AttemptListItem } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { type ReportLocale } from "../locale.ts";
+/** locator + 判定符的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
+export declare function AttemptLocatorBadge({ item, attemptHref, }: {
+    item: Pick<AttemptListItem, "locator" | "verdict">;
+    attemptHref: (locator: AttemptLocator) => string;
+}): ReactElement;
+/** 一条 Attempt 的完整卡片:AttemptList 自己的一项,也是 EvalList 展开区里的一行。 */
+export declare function AttemptRow({ item, attemptHref, locale, }: {
+    item: AttemptListItem;
+    attemptHref: (locator: AttemptLocator) => string;
+    locale?: ReportLocale;
+}): ReactElement;
+export declare function AttemptList({ items, total, attemptHref, className, locale, }: {
+    items: AttemptListItem[];
+    /** items 被 slice 时的原始数量;如实显示还剩多少条没展示。 */
+    total?: number;
+    attemptHref: (locator: AttemptLocator) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/AttemptList.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, localeText } from "../locale.js";
+import { colorClassForKey } from "./colors.js";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.js";
+/** locator + 判定符的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
+export function AttemptLocatorBadge({ item, attemptHref, }) {
+    return (_jsxs("a", { className: cx("nre-locator", `nre-verdict-${item.verdict}`), href: attemptHref(item.locator), children: [item.locator, _jsx("span", { className: "nre-locator-mark", children: verdictMark(item.verdict) })] }));
+}
+function AssertionRow({ assertion, locale }) {
+    return (_jsxs("li", { className: cx("nre-assertion", `nre-assertion-${assertion.severity}`, !assertion.passed && "nre-assertion-failed"), children: [_jsx("span", { className: "nre-assertion-severity", children: assertion.severity }), _jsx("span", { className: "nre-assertion-name", children: assertion.name }), _jsx("span", { className: "nre-assertion-score", children: localeText(locale, "attemptList.score", { score: assertion.score }) }), (assertion.detail || assertion.evidence) && (_jsxs("details", { className: "nre-assertion-more", children: [_jsx("summary", { children: localeText(locale, "attemptList.details") }), assertion.detail && _jsx("p", { className: "nre-assertion-detail", children: assertion.detail }), assertion.evidence && _jsx("blockquote", { className: "nre-assertion-evidence", children: assertion.evidence })] }))] }));
+}
+/** 一条 Attempt 的完整卡片:AttemptList 自己的一项,也是 EvalList 展开区里的一行。 */
+export function AttemptRow({ item, attemptHref, locale = DEFAULT_REPORT_LOCALE, }) {
+    return (_jsxs("li", { className: cx("nre-attempt", `nre-attempt-${item.verdict}`), children: [_jsxs("div", { className: "nre-attempt-head", children: [_jsx(AttemptLocatorBadge, { item: item, attemptHref: attemptHref }), _jsx("span", { className: "nre-attempt-eval", children: item.evalId }), _jsx("span", { className: "nre-attempt-experiment", children: item.experimentId }), _jsx("span", { className: cx("nre-attempt-agent", "nre-key", colorClassForKey(item.agent)), children: item.agent }), _jsx("span", { className: "nre-attempt-duration", children: formatDurationMs(item.durationMs) }), item.costUSD !== undefined && _jsx("span", { className: "nre-attempt-cost", children: formatUSD(item.costUSD) })] }), item.error && _jsx("p", { className: "nre-attempt-error", children: item.error }), item.assertions.length > 0 && (_jsx("ul", { className: "nre-assertions", children: item.assertions.map((a, i) => (_jsx(AssertionRow, { assertion: a, locale: locale }, i))) }))] }));
+}
+export function AttemptList({ items, total, attemptHref, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    const remaining = (total ?? items.length) - items.length;
+    return (_jsxs("section", { className: cx("nre", "nre-attempt-list", className), children: [items.length === 0 && _jsx("p", { className: "nre-attempt-list-empty", children: localeText(locale, "attemptList.empty") }), _jsx("ul", { className: "nre-attempts", children: items.map((item) => (_jsx(AttemptRow, { item: item, attemptHref: attemptHref, locale: locale }, item.locator))) }), remaining > 0 && (_jsx("p", { className: "nre-truncated", children: localeText(locale, "attemptList.truncated", { n: remaining }) }))] }));
+}

package/dist/report/react/DeltaTable.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { DeltaData } from "../types.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function DeltaTable({ data, className, locale, }: {
+    data: DeltaData;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/DeltaTable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, localeText, resolveMetricLabel } from "../locale.js";
+import { MetricCellView } from "./cell.js";
+import { colorClassForKey } from "./colors.js";
+import { cx } from "./format.js";
+/** Δ 的语义配色 class:好/坏由 better 方向判定,不看正负号本身。 */
+function deltaToneClass(delta, better) {
+    if (delta === null)
+        return "nre-delta-missing";
+    if (delta === 0)
+        return "nre-delta-flat";
+    if (!better)
+        return "nre-delta-neutral"; // 指标没表态方向,只显示不评判
+    const improved = better === "higher" ? delta > 0 : delta < 0;
+    return improved ? "nre-delta-good" : "nre-delta-bad";
+}
+export function DeltaTable({ data, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    return (_jsxs("table", { className: cx("nre", "nre-delta-table", className), children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "nre-dimension", children: localeText(locale, "delta.pairHeader") }), data.columns.map((col) => (_jsxs("th", { scope: "col", className: "nre-metric-col", children: [resolveMetricLabel(col.label, locale, col.key), col.unit && _jsxs("span", { className: "nre-unit", children: ["(", col.unit, ")"] })] }, col.key)))] }) }), _jsx("tbody", { children: data.rows.map((row) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", className: "nre-pair", children: [_jsx("span", { className: cx("nre-row-key", "nre-key", colorClassForKey(row.key)), children: row.key }), _jsxs("span", { className: "nre-pair-ids", children: [row.a.experimentId, " \u2192 ", row.b.experimentId] })] }), data.columns.map((col) => {
+                            const cell = row.cells[col.key];
+                            if (!cell)
+                                return _jsx("td", { className: "nre-td-empty" }, col.key);
+                            return (_jsxs("td", { className: "nre-delta-cell", children: [_jsxs("span", { className: "nre-delta-side nre-delta-a", children: [_jsx("span", { className: "nre-delta-tag", children: "A" }), _jsx(MetricCellView, { cell: cell.a, locale: locale })] }), _jsxs("span", { className: "nre-delta-side nre-delta-b", children: [_jsx("span", { className: "nre-delta-tag", children: "B" }), _jsx(MetricCellView, { cell: cell.b, locale: locale })] }), _jsxs("span", { className: cx("nre-delta-side", "nre-delta-d", deltaToneClass(cell.delta, col.better)), children: [_jsx("span", { className: "nre-delta-tag", children: "\u0394" }), cell.delta === null ? _jsx("span", { className: "nre-missing", children: localeText(locale, "cell.missing") }) : cell.display] })] }, col.key));
+                        })] }, row.key))) })] }));
+}

package/dist/report/react/EvalList.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { EvalListItem } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function EvalList({ items, attemptHref, className, locale, }: {
+    items: EvalListItem[];
+    attemptHref: (locator: AttemptLocator) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/ExperimentList.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import type { AttemptLocator } from "../../results/locator.ts";
+import type { ExperimentListItem } from "../types.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function ExperimentList({ items, attemptHref, filter, className, locale, }: {
+    items: ExperimentListItem[];
+    attemptHref: (locator: AttemptLocator) => string;
+    filter?: boolean;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/ExperimentList.js

@@ -0,0 +1,67 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { attemptItemReason } from "../format.js";
+import { DEFAULT_REPORT_LOCALE, localeText } from "../locale.js";
+import { AttemptLocatorBadge } from "./AttemptList.js";
+import { MetricCellView } from "./cell.js";
+import { colorClassForKey } from "./colors.js";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.js";
+const verdictOrder = ["passed", "failed", "errored", "skipped"];
+function passRateTone(value) {
+    if (value === null)
+        return undefined;
+    if (value >= 0.8)
+        return "nre-good";
+    if (value >= 0.5)
+        return "nre-warn";
+    return "nre-bad";
+}
+function formatDate(value, locale) {
+    const date = new Date(value);
+    if (Number.isNaN(date.valueOf()))
+        return value;
+    return new Intl.DateTimeFormat(locale === "zh-CN" ? "zh-CN" : "en", {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date);
+}
+function VerdictSummary({ item, locale }) {
+    const parts = verdictOrder
+        .filter((verdict) => item.verdicts[verdict] > 0)
+        .map((verdict) => `${item.verdicts[verdict]} ${localeText(locale, `verdict.${verdict}`)}`);
+    return _jsx("span", { className: "nre-experiment-pill", children: parts.join(" / ") || "—" });
+}
+function ExperimentAttemptRow({ attempt, last, attemptHref, }) {
+    const reason = attemptItemReason(attempt);
+    return (_jsxs("li", { className: cx("nre-experiment-attempt-row", `nre-eval-${attempt.verdict}`), children: [_jsx("span", { className: "nre-attempt-branch", "aria-hidden": "true", children: last ? "└─" : "├─" }), _jsx("span", { className: "nre-eval-attempt-badges", children: _jsx(AttemptLocatorBadge, { item: attempt, attemptHref: attemptHref }) }), _jsxs("span", { className: "nre-eval-attempt-metrics", children: [formatDurationMs(attempt.durationMs), attempt.costUSD !== undefined && _jsxs(_Fragment, { children: [" \u00B7 ", formatUSD(attempt.costUSD)] })] }), _jsx("span", { className: "nre-eval-reason", children: reason ?? "—" })] }));
+}
+function EvalAttempts({ row, attemptHref, locale, }) {
+    return (_jsxs("li", { className: "nre-experiment-eval", children: [_jsxs("div", { className: cx("nre-experiment-eval-header", `nre-eval-${row.verdict}`), children: [_jsx("span", { className: cx("nre-eval-verdict", `nre-verdict-${row.verdict}`), children: verdictMark(row.verdict) }), _jsx("span", { className: "nre-eval-id", children: row.evalId }), _jsx("span", { className: "nre-eval-attempt-count", children: localeText(locale, "overview.attemptsCount", { n: row.attempts.length }) }), _jsx("span", { className: "nre-eval-summary", children: row.verdict === "passed"
+                            ? [formatDurationMs(row.duration.value ?? 0), row.cost.value === null ? undefined : formatUSD(row.cost.value)]
+                                .filter((value) => value !== undefined)
+                                .join(" · ")
+                            : row.reason })] }), _jsx("ul", { className: "nre-experiment-attempts", children: row.attempts.map((attempt, index) => (_jsx(ExperimentAttemptRow, { attempt: attempt, last: index === row.attempts.length - 1, attemptHref: attemptHref }, attempt.locator))) })] }));
+}
+function Flags({ flags, locale }) {
+    if (!flags || Object.keys(flags).length === 0)
+        return null;
+    return (_jsxs("div", { className: "nre-experiment-flags", children: [_jsx("span", { children: localeText(locale, "experimentList.flags") }), Object.entries(flags).map(([key, value]) => (_jsxs("b", { children: [key, "=", String(value)] }, key)))] }));
+}
+function ExperimentRow({ item, attemptHref, locale, }) {
+    return (_jsxs("details", { className: "nre-experiment-entry", children: [_jsxs("summary", { className: "nre-experiment-summary", children: [_jsxs("span", { className: "nre-experiment-name", "data-sort-value": item.experimentId, children: [_jsx("b", { className: cx("nre-experiment-id", "nre-key", colorClassForKey(item.experimentId)), children: item.experimentId }), _jsxs("small", { children: [localeText(locale, "overview.evalsCount", { n: item.evals }), item.attempts > item.evals ? ` · ${localeText(locale, "overview.attemptsCount", { n: item.attempts })}` : "", ` · ${formatDate(item.lastRunAt, locale)}`] })] }), _jsx("span", { "data-sort-value": item.model ?? "", children: item.model ?? localeText(locale, "experimentList.defaultModel") }), _jsx("span", { "data-sort-value": item.agent, children: item.agent }), _jsx("span", { className: "nre-num", "data-sort-value": item.duration.value ?? "", children: _jsx(MetricCellView, { cell: item.duration, locale: locale }) }), _jsx("span", { className: cx("nre-num", passRateTone(item.passRate.value)), "data-sort-value": item.passRate.value ?? "", children: _jsx(MetricCellView, { cell: item.passRate, locale: locale }) }), _jsx("span", { className: "nre-num", "data-sort-value": item.tokens.value ?? "", children: _jsx(MetricCellView, { cell: item.tokens, locale: locale }) }), _jsx("span", { className: "nre-num", "data-sort-value": item.cost.value ?? "", children: _jsx(MetricCellView, { cell: item.cost, locale: locale }) }), _jsx("span", { "data-sort-value": item.verdicts.passed, children: _jsx(VerdictSummary, { item: item, locale: locale }) })] }), _jsxs("div", { className: "nre-experiment-detail", children: [_jsx(Flags, { flags: item.flags, locale: locale }), _jsx("ul", { className: "nre-experiment-evals", children: item.evalRows.map((row) => (_jsx(EvalAttempts, { row: row, attemptHref: attemptHref, locale: locale }, row.evalId))) })] })] }));
+}
+export function ExperimentList({ items, attemptHref, filter = false, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    const labels = [
+        localeText(locale, "experimentList.experiment"),
+        localeText(locale, "table.model"),
+        localeText(locale, "table.agent"),
+        localeText(locale, "experimentList.avgDuration"),
+        localeText(locale, "experimentList.passRate"),
+        localeText(locale, "experimentList.tokens"),
+        localeText(locale, "experimentList.estimatedCost"),
+        localeText(locale, "experimentList.result"),
+    ];
+    const board = (_jsxs("div", { className: "nre-experiment-table", children: [_jsx("div", { className: "nre-experiment-head", children: labels.map((label, index) => (_jsx("button", { type: "button", "data-nre-experiment-sort": index, className: index === 4 ? "nre-sort-desc" : undefined, children: label }, label))) }), items.length === 0 && _jsx("p", { className: "nre-experiment-list-empty", children: localeText(locale, "attemptList.empty") }), items.map((item) => (_jsx(ExperimentRow, { item: item, attemptHref: attemptHref, locale: locale }, item.experimentId)))] }));
+    return (_jsxs("div", { className: cx("nre", "nre-experiment-list", filter && "nre-experiment-table-wrap", className), children: [filter && (_jsx("input", { className: "nre-filter", "data-nre-experiment-filter": "", type: "search", placeholder: localeText(locale, "experimentList.filterPlaceholder") })), board] }));
+}

package/dist/report/react/GroupSummary.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { GroupSummaryData } from "../types.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function GroupSummary({ data, className, locale, }: {
+    data: GroupSummaryData;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/GroupSummary.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, localeText } from "../locale.js";
+import { MetricCellView } from "./cell.js";
+import { cx, formatUSD } from "./format.js";
+export function GroupSummary({ data, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    const missing = _jsx("span", { className: "nre-missing", children: localeText(locale, "cell.missing") });
+    return (_jsxs("div", { className: cx("nre", "nre-group-summary", className), children: [_jsxs("dl", { className: "nre-group-kpis", children: [_jsxs("div", { className: "nre-group-kpi nre-group-kpi-rate", children: [_jsx("dt", { children: localeText(locale, "overview.passRate") }), _jsx("dd", { children: _jsx(MetricCellView, { cell: data.passRate, locale: locale }) })] }), _jsxs("div", { className: "nre-group-kpi", children: [_jsx("dt", { children: localeText(locale, "groupSummary.experiments") }), _jsx("dd", { children: data.experiments })] }), _jsxs("div", { className: "nre-group-kpi", children: [_jsx("dt", { children: localeText(locale, "overview.evals") }), _jsx("dd", { children: data.evals })] }), _jsxs("div", { className: "nre-group-kpi", children: [_jsx("dt", { children: localeText(locale, "overview.attempts") }), _jsx("dd", { children: data.attempts })] }), _jsxs("div", { className: "nre-group-kpi", children: [_jsx("dt", { children: localeText(locale, "verdict.failed") }), _jsx("dd", { className: "nre-verdict-failed", children: data.verdicts.failed })] }), data.verdicts.errored > 0 && (_jsxs("div", { className: "nre-group-kpi", children: [_jsx("dt", { children: localeText(locale, "verdict.errored") }), _jsx("dd", { className: "nre-verdict-errored", children: data.verdicts.errored })] })), _jsxs("div", { className: "nre-group-kpi", children: [_jsx("dt", { children: localeText(locale, "overview.totalCost") }), _jsx("dd", { children: data.totalCostUSD === null ? missing : formatUSD(data.totalCostUSD) })] })] }), data.lastRunAt && (_jsx("p", { className: "nre-group-summary-time", children: localeText(locale, "latestRun", { run: data.lastRunAt }) }))] }));
+}

package/dist/report/react/MetricBars.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { MatrixData } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function MetricBars({ data, attemptHref, className, locale, }: {
+    data: MatrixData;
+    attemptHref?: (locator: AttemptLocator) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/MetricBars.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, resolveMetricLabel } from "../locale.js";
+import { colorClassForKey, seriesClassForKey } from "./colors.js";
+import { cx } from "./format.js";
+const WIDTH = 640;
+const HEIGHT = 320;
+const PLOT = { left: 16, right: WIDTH - 16, top: 28, bottom: HEIGHT - 40 };
+export function MetricBars({ data, attemptHref, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    // 稀疏 cells → 首次出现顺序的组/系列键 + 查找表
+    const groupKeys = [];
+    const seriesKeys = [];
+    const byPosition = new Map();
+    for (const entry of data.cells) {
+        if (!groupKeys.includes(entry.row))
+            groupKeys.push(entry.row);
+        if (!seriesKeys.includes(entry.column))
+            seriesKeys.push(entry.column);
+        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 !== null);
+    const maxValue = values.length > 0 ? Math.max(...values) : 0;
+    // 条高刻度:% 的天然域是 [0,1],其余以全图最大值为满条
+    const ratioOf = (value) => (data.metric.unit === "%" ? Math.min(1, Math.max(0, value)) : maxValue === 0 ? 0 : value / maxValue);
+    const groupWidth = (PLOT.right - PLOT.left) / Math.max(1, groupKeys.length);
+    const barWidth = Math.min(36, (groupWidth - 16) / Math.max(1, seriesKeys.length));
+    const plotHeight = PLOT.bottom - PLOT.top;
+    return (_jsxs("figure", { className: cx("nre", "nre-metric-bars", className), children: [_jsxs("svg", { className: "nre-bars-svg", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, role: "img", "aria-label": `${metricLabel} by ${data.rows} × ${data.columns}`, children: [groupKeys.map((group, gi) => {
+                        const x0 = PLOT.left + gi * groupWidth;
+                        // 组内按值排序,方向随 better(缺数据的系列不画柱)
+                        const entries = seriesKeys
+                            .map((series) => ({ series, cell: byPosition.get(JSON.stringify([group, series])) }))
+                            .filter((e) => e.cell !== undefined && e.cell.value !== null)
+                            .sort((a, b) => better === "lower" ? a.cell.value - b.cell.value : b.cell.value - a.cell.value);
+                        const innerWidth = entries.length * barWidth;
+                        const startX = x0 + (groupWidth - innerWidth) / 2;
+                        return (_jsxs("g", { className: "nre-bars-group", "data-group": group, children: [entries.map(({ series, cell }, si) => {
+                                    const h = Math.max(1, ratioOf(cell.value) * plotHeight);
+                                    const x = startX + si * barWidth;
+                                    const y = PLOT.bottom - h;
+                                    const title = `${group} · ${series}: ${cell.display}(${cell.samples}/${cell.total})`;
+                                    const rect = (_jsx("rect", { className: cx("nre-bar", seriesClassForKey(series)), x: x + 2, y: y, width: barWidth - 4, height: h, children: _jsx("title", { children: title }) }));
+                                    const locator = cell.refs[0];
+                                    return (_jsxs("g", { children: [attemptHref && locator ? _jsx("a", { href: attemptHref(locator), children: rect }) : rect, _jsx("text", { className: "nre-bar-value", x: x + barWidth / 2, y: y - 4, textAnchor: "middle", children: cell.samples < cell.total ? `${cell.display} ${cell.samples}/${cell.total}` : cell.display })] }, series));
+                                }), _jsx("text", { className: "nre-bars-group-label", x: x0 + groupWidth / 2, y: HEIGHT - 20, textAnchor: "middle", children: group })] }, group));
+                    }), _jsx("line", { className: "nre-bars-baseline", x1: PLOT.left, y1: PLOT.bottom, x2: PLOT.right, y2: PLOT.bottom })] }), _jsxs("figcaption", { className: "nre-bars-legend", children: [_jsxs("span", { className: "nre-bars-metric", children: [metricLabel, data.metric.unit && _jsxs("span", { className: "nre-unit", children: ["(", data.metric.unit, ")"] })] }), seriesKeys.map((series) => (_jsx("span", { className: cx("nre-legend-key", "nre-key", colorClassForKey(series)), children: series }, series)))] })] }));
+}

package/dist/report/react/MetricLine.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from "react";
+import type { LineData } from "../types.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function MetricLine({ data, pointHref, className, locale, }: {
+    data: LineData;
+    pointHref?: (row: LineData["rows"][number]) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/MetricLine.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, countText, localeText, resolveMetricLabel } from "../locale.js";
+import { seriesClassForKey } from "./colors.js";
+import { cx } from "./format.js";
+const WIDTH = 640;
+const HEIGHT = 360;
+const PLOT = { left: 64, right: WIDTH - 140, top: 24, bottom: HEIGHT - 56 };
+function linearScale(values, pixelLo, pixelHi, invert) {
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    const span = hi - lo || 2;
+    const padded = { lo: lo - (hi - lo ? span * 0.08 : 1), hi: hi + (hi - lo ? span * 0.08 : 1) };
+    const scale = (v) => {
+        let t = (v - padded.lo) / (padded.hi - padded.lo);
+        if (invert)
+            t = 1 - t;
+        return pixelLo + t * (pixelHi - pixelLo);
+    };
+    return { lo, hi, scale };
+}
+export function MetricLine({ data, pointHref, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    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 ? (_jsx("p", { className: "nre-line-missing", title: missing.map((r) => r.key).join(", "), children: countText(locale, "pointsMissing", missing.length) })) : null;
+    if (drawableRows.length === 0) {
+        return (_jsxs("figure", { className: cx("nre", "nre-metric-line", className), children: [_jsx("p", { className: "nre-missing", children: localeText(locale, "cell.missing") }), missingNote] }));
+    }
+    const xScale = linearScale(drawableRows.map((r) => r.x), PLOT.left, PLOT.right, false);
+    // y 像素轴向下增长:higher 高值在上;lower 反向后「好」的一端同样在上
+    const yScale = linearScale(drawableRows.map((r) => r.y.value), PLOT.bottom, PLOT.top, data.y.better === "lower");
+    const points = drawableRows.map((r) => ({
+        key: r.key,
+        series: r.series,
+        xValue: r.x,
+        yValue: r.y.value,
+        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),
+        py: yScale.scale(r.y.value),
+    }));
+    // 同系列的点按 x 排序连线;系列名标在最右点旁
+    const seriesOrder = [];
+    const bySeries = new Map();
+    for (const p of points) {
+        const key = p.series ?? "";
+        if (!bySeries.has(key)) {
+            bySeries.set(key, []);
+            seriesOrder.push(key);
+        }
+        bySeries.get(key).push(p);
+    }
+    for (const list of bySeries.values())
+        list.sort((a, b) => a.xValue - b.xValue);
+    const xTicks = xScale.lo === xScale.hi ? [xScale.lo] : [xScale.lo, xScale.hi];
+    const yTicks = yScale.lo === yScale.hi ? [yScale.lo] : [yScale.lo, yScale.hi];
+    const xDisplayFor = (value) => drawableRows.find((r) => r.x === value)?.xDisplay ?? String(value);
+    const yDisplayFor = (value) => drawableRows.find((r) => r.y.value === value)?.y.display ?? String(value);
+    return (_jsxs("figure", { className: cx("nre", "nre-metric-line", className), children: [_jsxs("svg", { className: "nre-line-svg", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, role: "img", "aria-label": `${yLabel} by ${data.x.label}`, children: [_jsx("rect", { className: "nre-line-plot", x: PLOT.left, y: PLOT.top, width: PLOT.right - PLOT.left, height: PLOT.bottom - PLOT.top, fill: "none" }), _jsxs("text", { className: "nre-line-xlabel", x: (PLOT.left + PLOT.right) / 2, y: HEIGHT - 8, textAnchor: "middle", children: [data.x.label, data.x.unit ? `(${data.x.unit})` : ""] }), _jsxs("text", { className: "nre-line-ylabel", x: 16, y: (PLOT.top + PLOT.bottom) / 2, textAnchor: "middle", transform: `rotate(-90 16 ${(PLOT.top + PLOT.bottom) / 2})`, children: [yLabel, data.y.unit ? `(${data.y.unit})` : ""] }), xTicks.map((v) => (_jsx("text", { className: "nre-line-tick", x: xScale.scale(v), y: PLOT.bottom + 16, textAnchor: "middle", children: xDisplayFor(v) }, `x${v}`))), yTicks.map((v) => (_jsx("text", { className: "nre-line-tick", x: PLOT.left - 6, y: yScale.scale(v) + 4, textAnchor: "end", children: yDisplayFor(v) }, `y${v}`))), seriesOrder.map((series) => {
+                        const list = bySeries.get(series);
+                        const seriesClass = series === "" ? "nre-series-none" : seriesClassForKey(series);
+                        const labelAt = list.reduce((a, b) => (b.px > a.px ? b : a));
+                        return (_jsxs("g", { className: cx("nre-line-series", seriesClass), "data-series": series || undefined, children: [list.length > 1 && (_jsx("polyline", { className: "nre-line-path", points: list.map((p) => `${p.px},${p.py}`).join(" "), fill: "none" })), series !== "" && (_jsx("text", { className: "nre-line-series-label", x: labelAt.px + 8, y: labelAt.py + 4, children: series }))] }, series || "(single)"));
+                    }), points.map((p, i) => {
+                        const circle = (_jsx("circle", { 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, children: _jsx("title", { children: p.title }) }));
+                        const row = drawableRows[i];
+                        return pointHref ? (_jsx("a", { className: "nre-line-point-link", href: pointHref(row), children: circle }, `${p.key}:${i}`)) : (_jsx("g", { children: circle }, `${p.key}:${i}`));
+                    })] }), missingNote] }));
+}

package/dist/report/react/MetricMatrix.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { MatrixData } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function MetricMatrix({ data, attemptHref, className, locale, }: {
+    data: MatrixData;
+    attemptHref?: (locator: AttemptLocator) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/MetricMatrix.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, resolveMetricLabel } from "../locale.js";
+import { MetricCellView } from "./cell.js";
+import { colorClassForKey } from "./colors.js";
+import { cx } from "./format.js";
+export function MetricMatrix({ data, attemptHref, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    // 稀疏 cells → 首次出现顺序的行/列键 + 查找表;组件只整理形状,不碰数值
+    const rowKeys = [];
+    const columnKeys = [];
+    // 键用 \u0000 拼接:行/列键都是用户可见 id,普通分隔符可能撞键
+    const byPosition = new Map();
+    for (const entry of data.cells) {
+        if (!rowKeys.includes(entry.row))
+            rowKeys.push(entry.row);
+        if (!columnKeys.includes(entry.column))
+            columnKeys.push(entry.column);
+        byPosition.set(`${entry.row}\u0000${entry.column}`, entry.cell);
+    }
+    return (_jsxs("table", { className: cx("nre", "nre-metric-matrix", className), children: [_jsxs("caption", { className: "nre-matrix-caption", children: [resolveMetricLabel(data.metric.label, locale, data.metric.key), data.metric.unit && _jsxs("span", { className: "nre-unit", children: ["(", data.metric.unit, ")"] }), _jsxs("span", { className: "nre-matrix-axes", children: [data.rows, " \u00D7 ", data.columns] })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "nre-dimension", children: data.rows }), columnKeys.map((column) => (_jsx("th", { scope: "col", className: cx("nre-col-key", "nre-key", colorClassForKey(column)), children: column }, column)))] }) }), _jsx("tbody", { children: rowKeys.map((row) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", className: "nre-row-key", children: row }), columnKeys.map((column) => {
+                            const cell = byPosition.get(`${row}\u0000${column}`);
+                            return (_jsx("td", { className: cx("nre-td", !cell && "nre-td-empty"), children: cell ? _jsx(MetricCellView, { cell: cell, attemptHref: attemptHref, locale: locale }) : null }, column));
+                        })] }, row))) })] }));
+}

package/dist/report/react/MetricScatter.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from "react";
+import type { ScatterData } from "../types.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function MetricScatter({ data, pointHref, className, locale, }: {
+    data: ScatterData;
+    pointHref?: (row: ScatterData["rows"][number]) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;