niceeval 0.5.3 → 0.6.0

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" | "capabilities">;
+    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,20 @@
+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 { capabilityBadge, cx, formatDurationMs, formatUSD, verdictMark } from "./format.js";
+/** locator + 判定符 + 证据能力标记的普通 <a>,AttemptList/EvalList/ExperimentList 共用。 */
+export function AttemptLocatorBadge({ item, attemptHref, }) {
+    const caps = capabilityBadge(item.capabilities);
+    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) }), caps && _jsx("span", { className: "nre-locator-caps", children: caps })] }));
+}
+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,10 @@
+import type { ReactElement } from "react";
+import type { ExperimentListItem } from "../types.ts";
+import type { AttemptLocator } from "../../results/locator.ts";
+import { type ReportLocale } from "../locale.ts";
+export declare function ExperimentList({ items, attemptHref, className, locale, }: {
+    items: ExperimentListItem[];
+    attemptHref: (locator: AttemptLocator) => string;
+    className?: string;
+    locale?: ReportLocale;
+}): ReactElement;

package/dist/report/react/ExperimentList.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_REPORT_LOCALE, localeText } from "../locale.js";
+import { MetricCellView } from "./cell.js";
+import { AttemptLocatorBadge } from "./AttemptList.js";
+import { colorClassForKey } from "./colors.js";
+import { cx, formatDurationMs, formatUSD, verdictMark } from "./format.js";
+function EvalRow({ row, attemptHref, }) {
+    return (_jsxs("li", { className: cx("nre-experiment-eval-row", `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-badges", children: row.attempts.map((attempt) => (_jsx(AttemptLocatorBadge, { item: attempt, attemptHref: attemptHref }, attempt.locator))) }), row.verdict === "passed" ? (_jsxs("span", { className: "nre-eval-avg", children: [formatDurationMs(row.duration.value ?? 0), row.cost.value !== null && _jsxs(_Fragment, { children: [" \u00B7 ", formatUSD(row.cost.value)] })] })) : (_jsx("span", { className: "nre-eval-reason", children: row.reason }))] }));
+}
+function ExperimentCard({ item, attemptHref, locale, }) {
+    return (_jsx("li", { className: "nre-experiment-entry", children: _jsxs("details", { className: "nre-experiment-details", children: [_jsxs("summary", { className: "nre-experiment-summary", children: [_jsx("span", { className: cx("nre-experiment-id", "nre-key", colorClassForKey(item.experimentId)), children: item.experimentId }), _jsx("span", { className: "nre-experiment-agent", children: item.agent }), item.model && _jsx("span", { className: "nre-experiment-model", children: item.model }), _jsx("span", { className: "nre-experiment-cell", children: _jsx(MetricCellView, { cell: item.passRate, attemptHref: attemptHref, locale: locale }) }), _jsx("span", { className: "nre-experiment-cell", children: _jsx(MetricCellView, { cell: item.cost, attemptHref: attemptHref, locale: locale }) }), _jsx("span", { className: "nre-experiment-cell", children: _jsx(MetricCellView, { cell: item.duration, attemptHref: attemptHref, locale: locale }) }), _jsxs("span", { className: "nre-experiment-meta-sub", children: [localeText(locale, "overview.evalsCount", { n: item.evals }), item.attempts > item.evals ? ` · ${localeText(locale, "overview.attemptsCount", { n: item.attempts })}` : "", ` · ${localeText(locale, "latestRun", { run: item.lastRunAt })}`] })] }), _jsx("ul", { className: "nre-experiment-evals", children: item.evalRows.map((row) => (_jsx(EvalRow, { row: row, attemptHref: attemptHref }, row.evalId))) })] }) }));
+}
+export function ExperimentList({ items, attemptHref, className, locale = DEFAULT_REPORT_LOCALE, }) {
+    return (_jsxs("div", { className: cx("nre", "nre-experiment-list", className), children: [items.length === 0 && _jsx("p", { className: "nre-experiment-list-empty", children: localeText(locale, "attemptList.empty") }), _jsx("ul", { className: "nre-experiments", children: items.map((item) => (_jsx(ExperimentCard, { item: item, attemptHref: attemptHref, locale: locale }, item.experimentId))) })] }));
+}

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;