niceeval 0.2.1 → 0.4.0

package/src/view/index.ts

@@ -2,9 +2,10 @@
 // 读取/版本判定在 loader.ts,聚合在 aggregate.ts,HTTP 与 HTML 烘焙在 server.ts,
 // server/前端共用的折叠口径、格式化与数据形状在 shared/。
 
-import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
-import { loadSummaries } from "./loader.ts";
+import { copyFile, mkdir, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { loadSummaries, type ScanResult } from "./loader.ts";
 import { renderHtml, type ViewOptions } from "./server.ts";
 
 export { startViewServer, type ViewOptions, type ViewServer } from "./server.ts";
@@ -19,11 +20,39 @@ export {
   type SkippedRun,
 } from "./loader.ts";
 
-/** 导出静态 HTML 报告(--out):一次性把当前结果烘焙进单个可分享文件。 */
+/**
+ * 导出静态报告(--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 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);
-  const out = resolve(opts.out ?? ".niceeval/report.html");
-  await mkdir(dirname(out), { recursive: true });
-  await writeFile(out, await renderHtml(scan), "utf-8");
+  await mkdir(out, { recursive: true });
+  await writeFile(join(out, "index.html"), await renderHtml(scan), "utf-8");
+  await copyFetchedArtifacts(scan, join(out, "artifact"));
   return out;
 }
+
+// 只复制前端会 fetch 的三类工件。diff.json / o11y.json 是运行侧产物,查看器从不读取,
+// 且 diff 可达上百 MB,带进静态导出只会拖垮部署体积。
+const FETCHED_ARTIFACTS = ["sources.json", "events.json", "trace.json"];
+
+async function copyFetchedArtifacts(scan: ScanResult, artifactRoot: string): Promise<void> {
+  for (const [base, srcDir] of scan.artifactDirs) {
+    const destDir = join(artifactRoot, base);
+    // 输入本身已经是导出布局(比如对着上次导出的目录重新生成 index.html)时不自拷。
+    if (resolve(srcDir) === resolve(destDir)) continue;
+    const files = FETCHED_ARTIFACTS.filter((name) => existsSync(join(srcDir, name)));
+    if (!files.length) continue;
+    await mkdir(destDir, { recursive: true });
+    await Promise.all(files.map((name) => copyFile(join(srcDir, name), join(destDir, name))));
+  }
+}

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/server.ts

@@ -37,6 +37,13 @@ export async function startViewServer(opts: ViewOptions = {}): Promise<ViewServe
         return;
       }
       // 按需提供拆分工件(trace.json / events.json / …),前端展开时 fetch。
+      // 路径式 /artifact/<rel> 与目录式静态导出的文件布局一致(见 view/index.ts 的 buildView),
+      // 同一份前端产物在本地 server 和静态托管上用同一个相对 URL。
+      if (url.pathname.startsWith("/artifact/")) {
+        await serveArtifact(root, decodeURIComponent(url.pathname.slice("/artifact/".length)), res);
+        return;
+      }
+      // 兼容旧的 query 形式(0.2.x 前端烘焙的 HTML 可能还开着)。
       if (url.pathname === "/artifact") {
         await serveArtifact(root, url.searchParams.get("p") ?? "", res);
         return;

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>