niceeval 0.1.1 → 0.1.2

package/src/view/server.ts

@@ -0,0 +1,136 @@
+// HTTP server 与静态资源:起本地 web、按需吐工件、把 viewData 烘焙进单个 HTML。
+// 数据读取在 loader.ts,聚合在 aggregate.ts;这里只管「怎么送到浏览器」。
+
+import { createServer, type Server } from "node:http";
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { loadSummaries, viewRoot, type ScanResult } from "./loader.ts";
+import { buildViewData } from "./aggregate.ts";
+import { formatThrown } from "../util.ts";
+
+export interface ViewOptions {
+  input?: string;
+  out?: string;
+  port?: number;
+}
+
+export interface ViewServer {
+  url: string;
+  close(): Promise<void>;
+}
+
+const TEMPLATE_PLACEHOLDERS = {
+  styles: "<!-- __NICEEVAL_STYLES__ -->",
+  appCode: "__NICEEVAL_APP_CODE__",
+  viewData: "__NICEEVAL_VIEW_DATA_JSON__",
+} as const;
+
+export async function startViewServer(opts: ViewOptions = {}): Promise<ViewServer> {
+  const input = opts.input;
+  const root = viewRoot(input);
+  const server = createServer(async (req, res) => {
+    try {
+      const url = new URL(req.url ?? "/", "http://127.0.0.1");
+      if (url.pathname === "/healthz") {
+        res.writeHead(200, { "content-type": "text/plain; charset=utf-8" });
+        res.end("ok");
+        return;
+      }
+      // 按需提供拆分工件(trace.json / events.json / …),前端展开时 fetch。
+      if (url.pathname === "/artifact") {
+        await serveArtifact(root, url.searchParams.get("p") ?? "", res);
+        return;
+      }
+      if (url.pathname !== "/") {
+        res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
+        res.end("not found");
+        return;
+      }
+      res.writeHead(200, {
+        "content-type": "text/html; charset=utf-8",
+        "cache-control": "no-store",
+      });
+      res.end(await renderHtml(await loadSummaries(input)));
+    } catch (e) {
+      res.writeHead(500, { "content-type": "text/plain; charset=utf-8" });
+      res.end(formatThrown(e));
+    }
+  });
+
+  const port = await listen(server, opts.port ?? 0);
+  return {
+    url: `http://127.0.0.1:${port}/`,
+    close: () =>
+      new Promise((resolveClose, reject) => {
+        server.close((err) => (err ? reject(err) : resolveClose()));
+      }),
+  };
+}
+
+/** 把 viewData(只含原始值与相对路径,不含宿主机绝对路径)和前端产物烘焙进单个 HTML。 */
+export async function renderHtml(scan: ScanResult): Promise<string> {
+  const template = await readViewAsset("template.html");
+  const styles = await readViewAsset("client-dist/app.css");
+  const app = await readViewAsset("client-dist/app.js");
+  const viewData = buildViewData(scan);
+
+  return template
+    .replace(TEMPLATE_PLACEHOLDERS.styles, () => `<style>\n${styles}\n</style>`)
+    .replace(TEMPLATE_PLACEHOLDERS.viewData, () => JSON.stringify(viewData).replace(/</g, "\\u003c"))
+    .replace(TEMPLATE_PLACEHOLDERS.appCode, () => JSON.stringify(app).replace(/</g, "\\u003c"));
+}
+
+/** 安全地把 root 下的工件文件吐回去(限定 .json,且解析后必须仍在 root 内)。 */
+async function serveArtifact(
+  root: string,
+  rel: string,
+  res: import("node:http").ServerResponse,
+): Promise<void> {
+  const abs = resolve(root, rel);
+  const within = abs === root || abs.startsWith(root + "/");
+  if (!within || !rel.endsWith(".json")) {
+    res.writeHead(400, { "content-type": "text/plain; charset=utf-8" });
+    res.end("bad artifact path");
+    return;
+  }
+  try {
+    const body = await readFile(abs, "utf-8");
+    res.writeHead(200, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
+    res.end(body);
+  } catch {
+    res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
+    res.end("artifact not found");
+  }
+}
+
+async function readViewAsset(name: string): Promise<string> {
+  return readFile(new URL(name, import.meta.url), "utf-8");
+}
+
+async function listen(server: Server, preferredPort: number): Promise<number> {
+  const tryListen = (port: number): Promise<number> =>
+    new Promise((resolveListen, reject) => {
+      const onError = (err: NodeJS.ErrnoException) => {
+        server.off("listening", onListening);
+        reject(err);
+      };
+      const onListening = () => {
+        server.off("error", onError);
+        const address = server.address();
+        resolveListen(typeof address === "object" && address ? address.port : port);
+      };
+      server.once("error", onError);
+      server.once("listening", onListening);
+      server.listen(port, "127.0.0.1");
+    });
+
+  if (preferredPort === 0) return tryListen(0);
+  for (let port = preferredPort; port < preferredPort + 20; port++) {
+    try {
+      return await tryListen(port);
+    } catch (e) {
+      if ((e as NodeJS.ErrnoException).code !== "EADDRINUSE") throw e;
+    }
+  }
+  throw new Error(`No available port near ${preferredPort}`);
+}

package/src/view/shared/types.ts

@@ -0,0 +1,64 @@
+// server(aggregate/loader)与前端(app/)共用的 view 数据形状。
+// viewData 会被序列化进静态 HTML,两边必须对同一份声明编程;只允许 type import。
+
+import type { EvalResult, LocalizedText, Usage } from "../../types.ts";
+
+/** 榜单一行 = 一个实验(或 legacy 的 agent×model 组合),跨全部历史 run 聚合。 */
+export interface ViewRow {
+  key: string;
+  experimentId?: string;
+  experiment?: EvalResult["experiment"];
+  group?: string;
+  label: string;
+  agent: string;
+  model?: string;
+  /** 总 attempt 数(详情里作次要信息)。 */
+  runs: number;
+  /** 去重后的 eval 数(成功率分母的口径)。 */
+  evals: number;
+  passed: number;
+  failed: number;
+  errored: number;
+  skipped: number;
+  scored?: number;
+  passRate: number;
+  avgDurationMs: number;
+  usage: Usage;
+  estimatedCostUSD?: number;
+  /** 该实验组里最新一次 run 的 startedAt(ISO);详情展示「运行时间」。 */
+  lastRunAt?: string;
+  results: EvalResult[];
+}
+
+/** 目录扫描里被跳过的 run 在页面顶部的提示条目。 */
+export interface SkippedRunNotice {
+  /** run 目录(summary.json 所在目录),相对 cwd。 */
+  dir: string;
+  reason: "incompatible-version" | "malformed";
+  schemaVersion?: number;
+  producerVersion?: string;
+  /** incompatible-version:服务端拼好的查看命令(npx niceeval@<version> view <dir>)。 */
+  command?: string;
+  /** malformed:一句诊断(invalid JSON / results 不是数组 …)。 */
+  detail?: string;
+}
+
+/**
+ * 烘焙进 HTML 的页面数据。时间/比率/成本一律传原始值(ISO 字符串、number),
+ * 格式化统一由前端按当前界面 locale 做,server 不预格式化。
+ */
+export interface ViewData {
+  rows?: ViewRow[];
+  /** 项目名(来自 config.name);hero 标题,可按 locale 多语言。 */
+  name?: LocalizedText;
+  /** 最近一次 run 的 startedAt(ISO);没有历史 run 时缺省。 */
+  lastRunAt?: string;
+  /** 0–1 的通过率。 */
+  passRate: number;
+  /** 去重后的 eval 结果数。 */
+  resultCount: number;
+  durationMs: number;
+  estimatedCostUSD?: number;
+  /** 读不了 / 版本不同而被跳过的 run;前端顶部横幅展示。 */
+  skippedRuns?: SkippedRunNotice[];
+}

package/src/view/styles.css

@@ -14,6 +14,7 @@
   --color-good: var(--good);
   --color-bad: var(--bad);
   --color-warn: var(--warn);
+  --color-blue: var(--blue);
   --color-focus: var(--focus);
 }
 
@@ -30,6 +31,8 @@
   --good: light-dark(#087f5b, #3ddc97);
   --bad: light-dark(#b42318, #ff6b6b);
   --warn: light-dark(#9a6700, #e8b84a);
+  /* send/回复行的强调色,对齐 landing page setup-card 的 --blue(#6ea8fe)。 */
+  --blue: light-dark(#1d63d8, #6ea8fe);
   --focus: light-dark(#111113, #ededed);
   font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
 }
@@ -170,6 +173,40 @@ h1 {
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
+/* schemaVersion 不匹配的 run:榜单不解析它们,这里占位并给出 npx 查看命令。 */
+.incompatible-banner {
+  border: 1px solid color-mix(in oklch, var(--warn), var(--line) 45%);
+  border-left: 3px solid var(--warn);
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--warn), var(--panel) 92%);
+  padding: 12px 16px;
+  margin: 0 auto 36px;
+  font-size: 13px;
+}
+.incompatible-banner ul {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 6px;
+}
+.incompatible-banner li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 12px;
+}
+.incompatible-banner .ib-dir { font-weight: 600; }
+.incompatible-banner .ib-meta { color: var(--soft); }
+.incompatible-banner code {
+  font-family: var(--mono, ui-monospace, monospace);
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 40%);
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  padding: 1px 7px;
+  user-select: all;
+}
+
 .section-head {
   display: flex;
   align-items: end;
@@ -913,8 +950,16 @@ a.brand:hover { opacity: 0.75; }
 }
 .code-line.line-clickable { cursor: pointer; }
 .code-line.line-clickable:hover { background: color-mix(in oklch, var(--panel), var(--line) 45%); }
-.code-line.line-clickable:hover .gchev { color: var(--text); }
-.code-line.line-send { border-left-color: var(--line-strong); }
+/* send 行学 landing setup-card 的 reply 行:蓝底 + 蓝左缘 + 蓝行号,和断言行的绿/红/黄一眼区分。 */
+.code-line.line-send {
+  background: color-mix(in oklch, var(--blue), var(--panel) 88%);
+  border-left-color: var(--blue);
+}
+.code-line.line-send .ln {
+  background: color-mix(in oklch, var(--blue), var(--panel) 74%);
+  color: color-mix(in oklch, var(--blue), var(--text) 45%);
+}
+.code-line.line-send.line-clickable:hover { background: color-mix(in oklch, var(--blue), var(--panel) 82%); }
 .code-line.is-open { background: color-mix(in oklch, var(--panel), var(--line) 34%); }
 
 /* github-diff 式整行红绿:行底色 + 更深的行号格 + 实色左缘(过=绿/加,不过=红/减)。 */
@@ -959,12 +1004,12 @@ a.brand:hover { opacity: 0.75; }
   justify-content: flex-end;
 }
 .gmark { display: inline-flex; align-items: center; justify-content: center; }
-.gchev { width: 12px; height: 12px; color: var(--muted); transition: transform 0.12s; }
-.gchev.is-open { transform: rotate(90deg); }
-.gstat { font-size: 13px; font-weight: 800; line-height: 1; }
+/* gutter 用 lucide 图标(对齐 landing:CheckCircle2/MessageCircle),不再用 ✓/✗ 文本字形。 */
+.gstat { width: 13px; height: 13px; flex-shrink: 0; }
 .gstat.good { color: var(--good); }
 .gstat.bad { color: var(--bad); }
 .gstat.warn { color: var(--warn); }
+.gsend { width: 13px; height: 13px; flex-shrink: 0; color: var(--blue); }
 
 .ctext { white-space: pre; overflow-x: auto; color: var(--text); padding-left: 8px; }
 .ctext::-webkit-scrollbar { height: 0; }
@@ -996,10 +1041,15 @@ a.brand:hover { opacity: 0.75; }
   background: color-mix(in oklch, var(--panel), var(--line) 28%);
   transition: color 0.12s, border-color 0.12s, background 0.12s;
 }
+.code-line.line-send .reply-hint {
+  color: color-mix(in oklch, var(--blue), var(--text) 30%);
+  border-color: color-mix(in oklch, var(--blue), var(--line) 55%);
+  background: color-mix(in oklch, var(--blue), transparent 88%);
+}
 .code-line.line-clickable:hover .reply-hint {
   color: var(--text);
-  border-color: var(--line-strong);
-  background: color-mix(in oklch, var(--panel), var(--line) 52%);
+  border-color: color-mix(in oklch, var(--blue), var(--line) 30%);
+  background: color-mix(in oklch, var(--blue), transparent 80%);
 }
 .line-chev {
   width: 14px;
@@ -1018,8 +1068,9 @@ a.brand:hover { opacity: 0.75; }
   border-left: 3px solid var(--line-strong);
   font-size: 12.5px;
 }
-.reply-panel { display: flex; flex-direction: column; gap: 9px; }
-.reply-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--good); display: block; margin-bottom: 2px; }
+.reply-panel { display: flex; flex-direction: column; gap: 9px; border-left-color: color-mix(in oklch, var(--blue), var(--line) 40%); }
+/* assistant 角色标签用蓝色,对齐 landing 的 code-note-role;绿色留给断言通过。 */
+.reply-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); display: block; margin-bottom: 2px; }
 .reply-text { color: var(--text); white-space: pre-wrap; word-break: break-word; }
 .reply-think { font-size: 12px; color: var(--muted); }
 .reply-think summary { cursor: pointer; user-select: none; }