niceeval 0.3.0 → 0.4.0

package/src/view/index.ts

@@ -4,7 +4,7 @@
 
 import { copyFile, mkdir, writeFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
+import { join, resolve } from "node:path";
 import { loadSummaries, type ScanResult } from "./loader.ts";
 import { renderHtml, type ViewOptions } from "./server.ts";
 
@@ -20,27 +20,21 @@ export {
   type SkippedRun,
 } from "./loader.ts";
 
-/** --out 目标是单文件(*.html)还是目录式静态导出;CLI 的提示文案也按这个口径分。 */
-export function isSingleFileOut(out: string): boolean {
-  return /\.html?$/i.test(out);
-}
-
 /**
- * 导出静态报告(--out)。两种形态:
- * - `--out report.html`:单个可分享 HTML。榜单/断言/检查自包含;代码视图、transcript、
- *   trace 依赖工件文件,单文件带不动(diff/trace 可达上百 MB),静态托管时优雅降级。
- * - `--out <dir>`:目录式静态导出。写 <dir>/index.html,并把前端会 fetch 的工件
- *   (sources.json / events.json / trace.json)复制到 <dir>/artifact/<base>/——与本地
- *   server 的 /artifact/<rel> 路由同一布局,整个目录扔给任何静态托管即是完整体验。
+ * 导出静态报告(--out):只有目录式一种形态。写 <dir>/index.html,并把前端会 fetch 的工件
+ * (sources.json / events.json / trace.json)复制到 <dir>/artifact/<base>/——与本地
+ * server 的 /artifact/<rel> 路由同一布局,整个目录扔给任何静态托管即是完整体验。
+ * 单文件(*.html)导出已移除:代码/transcript/trace 视图依赖工件文件,单文件注定残缺,
+ * 存在本身就在诱导用户导出一份看不了证据的报告(docs/view.md「静态导出」)。
  */
 export async function buildView(opts: ViewOptions = {}): Promise<string> {
-  const scan = await loadSummaries(opts.input);
-  const out = resolve(opts.out ?? ".niceeval/report.html");
-  if (isSingleFileOut(out)) {
-    await mkdir(dirname(out), { recursive: true });
-    await writeFile(out, await renderHtml(scan), "utf-8");
-    return out;
+  const out = resolve(opts.out ?? ".niceeval/site");
+  if (/\.html?$/i.test(out)) {
+    throw new Error(
+      `--out expects a directory, got "${opts.out}". Single-file HTML export was removed: code, transcript and trace views need artifact files next to the page. Export a directory instead (e.g. --out site) and serve it with any static host.`,
+    );
   }
+  const scan = await loadSummaries(opts.input);
   await mkdir(out, { recursive: true });
   await writeFile(join(out, "index.html"), await renderHtml(scan), "utf-8");
   await copyFetchedArtifacts(scan, join(out, "artifact"));

package/src/view/loader.ts

@@ -6,6 +6,7 @@ import { existsSync, statSync } from "node:fs";
 import { readFile, readdir, stat } from "node:fs/promises";
 import { dirname, join, relative, resolve } from "node:path";
 import { RESULTS_FORMAT, RESULTS_SCHEMA_VERSION, type EvalResult, type RunSummary } from "../types.ts";
+import type { ViewEvalResult } from "./shared/types.ts";
 import { t } from "../i18n/index.ts";
 
 export interface LoadedSummary {
@@ -112,7 +113,7 @@ export async function loadSummaries(input?: string): Promise<ScanResult> {
   if (s.isFile()) {
     // 单文件模式:这是用户明确指定的目标,任何读不了(版本/损坏/无关)都直接抛,由 CLI 打印提示退出。
     const summary = normalizeSummary(await parseSummary(target), target);
-    return { loaded: [{ path: target, summary: withArtifactBases(summary, target, root, artifactDirs) }], skipped: [], artifactDirs };
+    return { loaded: [{ path: target, summary: withViewRefs(summary, target, root, artifactDirs) }], skipped: [], artifactDirs };
   }
 
   const candidates = await findSummaryFiles(target);
@@ -121,7 +122,7 @@ export async function loadSummaries(input?: string): Promise<ScanResult> {
   for (const path of candidates) {
     try {
       const summary = normalizeSummary(await parseSummary(path), path);
-      loaded.push({ path, summary: withArtifactBases(summary, path, root, artifactDirs) });
+      loaded.push({ path, summary: withViewRefs(summary, path, root, artifactDirs) });
     } catch (e) {
       const entry = classifySkip(e, path);
       // 无关 JSON(NotAReportError)可以静默忽略;像报告却读不了的必须记下来。
@@ -203,25 +204,31 @@ function classifySkip(e: unknown, path: string): SkippedRun | undefined {
 }
 
 /**
- * 给每条 result 拼出相对 view 根的工件目录(前端据此 fetch trace.json 等)。
+ * 给每条 result 注入 view 侧标注:
+ * - attemptRef:run 目录(相对 view 根)+ summary.results 下标,`#/attempt/<run>/<result>`
+ *   深链的身份。必须在这里(读盘顺序)捕获下标——聚合层会把 results 重排。
+ * - artifactBase:相对 view 根的工件目录(前端据此 fetch trace.json 等)。
  * 返回新对象,不 mutate 读入的 summary;宿主机绝对路径只写进 artifactDirs(server 端内存),
  * 不挂到 result 上,避免随 viewData 进静态 HTML。
  */
-function withArtifactBases(
+function withViewRefs(
   summary: RunSummary,
   summaryPath: string,
   root: string,
   artifactDirs: Map<string, string>,
 ): RunSummary {
   const runDir = dirname(summaryPath);
+  // 单文件入口时 run 目录就是 view 根,relative 为空串;统一占位 "."(与 classifySkip 的目录口径一致)。
+  const runRef = relative(root, runDir).split(/[\\/]/).join("/") || ".";
   return {
     ...summary,
-    results: summary.results.map((r) => {
-      if (!r.artifactsDir) return r;
+    results: summary.results.map((r, index): ViewEvalResult => {
+      const annotated: ViewEvalResult = { ...r, attemptRef: { run: runRef, result: index } };
+      if (!r.artifactsDir) return annotated;
       const abs = join(runDir, r.artifactsDir);
       const base = relative(root, abs).split(/[\\/]/).join("/");
       artifactDirs.set(base, abs);
-      return { ...r, artifactBase: base };
+      return { ...annotated, artifactBase: base };
     }),
   };
 }

package/src/view/shared/types.ts

@@ -3,6 +3,19 @@
 
 import type { EvalResult, LocalizedText, Usage } from "../../types.ts";
 
+/**
+ * attempt 的深链身份:run 目录(相对 view 输入根,通常就是 `.niceeval/` 下的时间戳目录名)
+ * + 该 attempt 在 summary.results 里的下标。`#/attempt/<run>/<result>` 路由的参数——
+ * 报告页(前门)与 view(证据室)靠这份契约指向同一个 attempt,见 docs/view.md「用 Reports 积木重建 view」。
+ */
+export interface AttemptRef {
+  run: string;
+  result: number;
+}
+
+/** view 侧的 attempt 结果 = 瘦身后的 EvalResult + loadSummaries 注入的深链身份。 */
+export type ViewEvalResult = EvalResult & { attemptRef?: AttemptRef };
+
 /** 榜单一行 = 一个实验(或 legacy 的 agent×model 组合),跨全部历史 run 聚合。 */
 export interface ViewRow {
   key: string;
@@ -27,7 +40,7 @@ export interface ViewRow {
   estimatedCostUSD?: number;
   /** 该实验组里最新一次 run 的 startedAt(ISO);详情展示「运行时间」。 */
   lastRunAt?: string;
-  results: EvalResult[];
+  results: ViewEvalResult[];
 }
 
 /** 目录扫描里被跳过的 run 在页面顶部的提示条目。 */

package/src/view/styles.css

@@ -34,6 +34,13 @@
   /* send/回复行的强调色,对齐 landing page setup-card 的 --blue(#6ea8fe)。 */
   --blue: light-dark(#1d63d8, #6ea8fe);
   --focus: light-dark(#111113, #ededed);
+  /* 分类色板(cost/score 散点图按实验区分系列),六色顺序按 CVD 校验过,不要重排。 */
+  --series-1: light-dark(#2a78d6, #3987e5);
+  --series-2: light-dark(#1baf7a, #199e70);
+  --series-3: light-dark(#eda100, #c98500);
+  --series-4: light-dark(#008300, #008300);
+  --series-5: light-dark(#e34948, #e66767);
+  --series-6: light-dark(#eb6834, #d95926);
   font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
 }
 
@@ -308,6 +315,42 @@ tbody tr:last-child td { border-bottom: 0; }
 .group-card-rate { font-size: 30px; font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
 .group-card-meta { font-size: 12px; color: var(--muted); }
 .group-card-time { font-size: 11px; color: var(--soft); margin-top: 2px; }
+.cost-score-chart {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 16px 20px 10px;
+  margin-bottom: 20px;
+  background: var(--panel);
+}
+.csc-head { font-size: 13px; font-weight: 680; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
+.csc-svg-wrap { position: relative; width: 100%; }
+.csc-svg { width: 100%; height: auto; display: block; overflow: visible; }
+.csc-grid line { stroke: var(--line); stroke-width: 1; }
+.csc-axis text { fill: var(--muted); font-size: 10px; }
+.csc-point { cursor: pointer; }
+.csc-point .csc-hit { fill: transparent; }
+.csc-point .csc-dot { stroke: var(--panel); stroke-width: 2; }
+.csc-point text { fill: var(--text); font-size: 11px; }
+.csc-leader { stroke: var(--line-strong); stroke-width: 1; }
+.csc-point:hover .csc-dot,
+.csc-point:focus-visible .csc-dot { r: 6.5; }
+.csc-point:focus-visible { outline: none; }
+.csc-tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  margin-top: -12px;
+  background: var(--panel);
+  border: 1px solid var(--line-strong);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 16px color-mix(in oklch, var(--text), transparent 88%);
+  z-index: 5;
+}
+.csc-tooltip b { font-size: 13px; }
+.csc-tooltip .csc-tooltip-meta { color: var(--muted); margin-top: 2px; }
 .section-sub-head {
   display: flex;
   align-items: center;

package/src/view/template.html

@@ -9,7 +9,6 @@
 </head>
 <body>
   <div id="root"></div>
-  <script src="https://unpkg.com/grab/dist/index.global.js"></script>
   <script>new Function(__NICEEVAL_APP_CODE__)();</script>
 </body>
 </html>