niceeval 0.2.1 → 0.4.0

package/src/runner/reporters/live.ts

@@ -2,10 +2,10 @@
 // spinner 每 80ms 刷新;attempt 完成后行内显示 ✓/✗/~ 符号。
 // onRunComplete 时清除状态表,打印和网页榜单同口径的表格报告。
 
-import type { Reporter, RunShape, RunSummary } from "../../types.ts";
+import type { Reporter, ReporterEvent, RunShape, RunSummary } from "../../types.ts";
 import { t } from "../../i18n/index.ts";
 import { renderRunReport } from "./table.ts";
-import { outcomeSymbol } from "./shared.ts";
+import { outcomeSymbol, WAITING_SYM } from "./shared.ts";
 
 const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
@@ -42,6 +42,8 @@ interface RowState extends LiveRow {
   completed: number;
   lastMsg: string;
   dominantOutcome: string | undefined;
+  /** true 一旦拿到并发名额、attempt effect 真正开始跑;之前是排队等待,不该转圈误导。 */
+  started: boolean;
 }
 
 export function Live(rows: LiveRow[], totalAttempts: number): LiveReporter {
@@ -51,7 +53,7 @@ export function Live(rows: LiveRow[], totalAttempts: number): LiveReporter {
   for (const r of rows) {
     const k = `${r.evalId}|${r.who}`;
     if (!stateMap.has(k)) {
-      stateMap.set(k, { ...r, completed: 0, lastMsg: "", dominantOutcome: undefined });
+      stateMap.set(k, { ...r, completed: 0, lastMsg: "", dominantOutcome: undefined, started: false });
       keyOrder.push(k);
     } else {
       // 同一 (evalId, who) 可能在多个 agentRun 里出现(不应发生,但做防御)
@@ -71,7 +73,9 @@ export function Live(rows: LiveRow[], totalAttempts: number): LiveReporter {
     const done = state.completed >= state.total;
     const sym = done
       ? outcomeSymbol(state.dominantOutcome ?? "")
-      : SPINNER[frame % SPINNER.length];
+      : state.started
+        ? SPINNER[frame % SPINNER.length]
+        : WAITING_SYM;
 
     const evalCol = state.evalId.slice(0, 24).padEnd(24);
     const whoCol = `[${state.who}]`.slice(0, 26).padEnd(26);
@@ -79,7 +83,7 @@ export function Live(rows: LiveRow[], totalAttempts: number): LiveReporter {
 
     const prefix = `  ${sym} ${evalCol} ${whoCol} ${cntCol}  `;
     const budget = Math.max(0, cols() - prefix.length - 1);
-    const msg = done ? "" : state.lastMsg.slice(0, budget);
+    const msg = done ? "" : state.started ? state.lastMsg.slice(0, budget) : t("live.waiting").slice(0, budget);
 
     return `\x1B[2K${prefix}${msg}`;
   }
@@ -90,6 +94,7 @@ export function Live(rows: LiveRow[], totalAttempts: number): LiveReporter {
           totalRuns: shape.totalRuns,
           evals: shape.evals,
           configs: shape.configs,
+          concurrency: shape.maxConcurrency,
           completed: totalCompleted,
           total: totalAttempts,
         })
@@ -132,6 +137,13 @@ export function Live(rows: LiveRow[], totalAttempts: number): LiveReporter {
       // 不在这里 draw();由 interval 驱动,避免每条日志都刷屏
     },
 
+    onEvent(event: ReporterEvent) {
+      if (event.type !== "eval:start") return;
+      const who = event.model ? `${event.agent.name}/${event.model}` : event.agent.name;
+      const state = stateMap.get(`${event.eval.id}|${who}`);
+      if (state) state.started = true;
+    },
+
     onRunStart(_evals, _agent, s) {
       shape = s;
       // 初始渲染:让用户看到行表

package/src/runner/reporters/shared.ts

@@ -13,3 +13,6 @@ export const OUTCOME_SYM: Record<ResultOutcome, string> = {
 export function outcomeSymbol(outcome: string): string {
   return OUTCOME_SYM[outcome as ResultOutcome] ?? "?";
 }
+
+/** live 表格里「还没抢到并发名额」的行:和转圈的 SPINNER、完成后的 OUTCOME_SYM 三态区分开。 */
+export const WAITING_SYM = "·";

package/src/runner/reporters/table.ts

@@ -104,6 +104,7 @@ export function renderRunReport(summary: RunSummary): string {
     tokens: tokStr,
     cost,
   }).trimEnd());
+  lines.push(t("report.viewHint").trimEnd());
 
   return `${lines.join("\n")}\n\n`;
 }

package/src/runner/run.ts

@@ -70,7 +70,7 @@ export async function runEvals(opts: RunOptions): Promise<RunSummary> {
     for (const r of opts.priorResults) {
       if (!r.experimentId || !priorRunKeys.has(`${r.experimentId}|${r.id}`)) continue;
       // artifactsDir 是相对"本次 run 自己目录"的路径,新 summary 换了目录就会失效,必须清掉。
-      // artifactBase 不一样:它已经是 loadMostRecentResults(经 withArtifactBases)拼好的、
+      // artifactBase 不一样:它已经是 loadMostRecentResults(经 withViewRefs)拼好的、
       // 相对稳定的 .niceeval 根的路径,指向旧 run 的产物目录依然可解析,原样带过来
       // ——不然 view 就再也找不到这条携带结果的源码/转录/trace 了。
       carriedResults.push({ ...r, artifactsDir: undefined });
@@ -113,6 +113,7 @@ export async function runEvals(opts: RunOptions): Promise<RunSummary> {
     evals: runningEvals.length,
     configs: opts.agentRuns.length,
     totalRuns: attempts.length,
+    maxConcurrency: opts.maxConcurrency,
   };
   for (const r of opts.reporters) {
     // reporter 只是结果消费方:单个 reporter 抛错记 diagnostic,不能让整次调度崩(P2)。
@@ -200,12 +201,14 @@ export async function runEvals(opts: RunOptions): Promise<RunSummary> {
             // 早停:同 key 已通过,或已 errored(重跑只会重复同一个框架错误)且开了 earlyExit
             // → 跳过未启动的 attempt。
             if (a.run.earlyExit && (passedKeys.has(a.key) || erroredKeys.has(a.key))) {
-              yield* Effect.promise(() =>
-                emitReporterEvent(opts.reporters, {
-                  type: "run:earlyExit",
-                  evalId: a.evalDef.id,
-                  experimentId: a.run.experimentId,
-                }),
+              yield* reportMutex.withPermits(1)(
+                Effect.promise(() =>
+                  emitReporterEvent(opts.reporters, {
+                    type: "run:earlyExit",
+                    evalId: a.evalDef.id,
+                    experimentId: a.run.experimentId,
+                  }),
+                ),
               );
               return;
             }
@@ -221,8 +224,10 @@ export async function runEvals(opts: RunOptions): Promise<RunSummary> {
                 if (s.spent >= budget) {
                   if (!budgetReported.has(budgetKey)) {
                     budgetReported.add(budgetKey);
-                    yield* Effect.promise(() =>
-                      emitReporterEvent(opts.reporters, { type: "run:budgetExceeded", budget, spent: s.spent }),
+                    yield* reportMutex.withPermits(1)(
+                      Effect.promise(() =>
+                        emitReporterEvent(opts.reporters, { type: "run:budgetExceeded", budget, spent: s.spent }),
+                      ),
                     );
                   }
                   return;
@@ -254,14 +259,17 @@ export async function runEvals(opts: RunOptions): Promise<RunSummary> {
                 ? AbortSignal.any([opts.signal, evalAc.signal])
                 : (evalAc?.signal ?? opts.signal);
 
-            yield* Effect.promise(() =>
-              emitReporterEvent(opts.reporters, {
-                type: "eval:start",
-                eval: { id: a.evalDef.id },
-                agent: a.run.agent,
-                attempt: a.attempt,
-                experimentId: a.run.experimentId,
-              }),
+            yield* reportMutex.withPermits(1)(
+              Effect.promise(() =>
+                emitReporterEvent(opts.reporters, {
+                  type: "eval:start",
+                  eval: { id: a.evalDef.id },
+                  agent: a.run.agent,
+                  model: a.run.model,
+                  attempt: a.attempt,
+                  experimentId: a.run.experimentId,
+                }),
+              ),
             );
             const result = yield* runAttemptEffect(a, opts, sandboxSem, attemptSignal).pipe(
               Effect.ensuring(
@@ -308,7 +316,12 @@ export async function runEvals(opts: RunOptions): Promise<RunSummary> {
                 ),
               ),
             );
-            yield* Effect.promise(() => emitReporterEvent(opts.reporters, { type: "eval:complete", result }));
+            // 和上面的 onEvalComplete 同一把 reportMutex:两条回调路径都要串行化,否则并发
+            // attempt 各自触发的 eval:complete 会绕开 permit=1 直接并发跑,和文档承诺的
+            // 「报告回调串行化」不一致。
+            yield* reportMutex.withPermits(1)(
+              Effect.promise(() => emitReporterEvent(opts.reporters, { type: "eval:complete", result })),
+            );
           }),
       { concurrency: opts.maxConcurrency, discard: true },
     ).pipe(

package/src/runner/types.ts

@@ -97,6 +97,8 @@ export interface RunShape {
   configs: number;
   /** 总 attempt 数(evals × configs × runs);逐行输出与汇总计数都按它。 */
   totalRuns: number;
+  /** 本次运行实际生效的并发数(flag/env/experiment/config/sandbox 默认值解析后的结果)。 */
+  maxConcurrency: number;
 }
 
 export interface Reporter {
@@ -108,7 +110,7 @@ export interface Reporter {
 
 export type ReporterEvent =
   | { type: "run:start"; evals: { id: string }[]; agent: Agent; shape: RunShape }
-  | { type: "eval:start"; eval: { id: string }; agent: Agent; attempt: number; experimentId?: string }
+  | { type: "eval:start"; eval: { id: string }; agent: Agent; model?: string; attempt: number; experimentId?: string }
   | { type: "eval:complete"; result: EvalResult }
   | { type: "run:earlyExit"; evalId: string; experimentId?: string }
   | { type: "run:budgetExceeded"; budget: number; spent: number }
@@ -151,6 +153,8 @@ export interface ExperimentDef {
   agent: Agent;
   /** 单个模型(agent 留空时实验决定);省略=用 agent 原生默认。跨模型对比写多个实验文件,别用数组。 */
   model?: string;
+  /** 模型推理努力程度(如 "low"/"medium"/"high",取值由具体模型/adapter 决定);省略=用 agent 原生默认。经 ctx.reasoningEffort 透给 adapter 与 eval。 */
+  reasoningEffort?: string;
   flags?: Record<string, unknown>;
   runs?: number;
   earlyExit?: boolean;
@@ -189,6 +193,20 @@ export interface Config {
    * 的远程接入,在这里覆盖。
    */
   telemetry?: { host?: string; port?: number };
+  /**
+   * 内置价格表(`o11y/prices.json`)之上的用户覆盖 / 补充,按 model 查(见 Observability
+   * · 用量与成本)。key 支持精确 model 名或 `provider/*` 通配(自托管/网关折扣按 provider 批量覆盖);
+   * 精确 key 优先于通配。只在没有网关实测成本(`usage.costUSD`)时才会用到——实测优先于估算恒成立。
+   */
+  pricing?: Record<string, PriceOverride>;
+}
+
+/** 每百万 token 的美元单价;省略的桶退回 `inputPerMTok`(cache token 本质也是 input)。 */
+export interface PriceOverride {
+  inputPerMTok: number;
+  outputPerMTok: number;
+  cacheReadPerMTok?: number;
+  cacheWritePerMTok?: number;
 }
 
 // ───────────────────────── 调度编排 ─────────────────────────
@@ -197,6 +215,7 @@ export interface Config {
 export interface AgentRun {
   agent: Agent;
   model?: string;
+  reasoningEffort?: string;
   flags: Record<string, unknown>;
   runs: number;
   earlyExit: boolean;

package/src/sandbox/types.ts

@@ -54,8 +54,8 @@ export type SandboxRuntime = "node20" | "node24";
 /**
  * Sandbox 的「数据结构」定义 —— 与 agent 一样可带参数(见 docs/sandbox.md)。
  * 必须用工厂函数构造(`dockerSandbox()` / `vercelSandbox()` / `e2bSandbox()` / `defineSandbox()`),
- * 放进 config / experiment 的 `sandbox` 字段 —— 字段类型只接受这个数据结构,不接受裸字符串,
- * 省略字段 = 按环境自动探测后端。各后端的参数互不相同 —— 这是个按 `backend` 区分的可辨识联合(discriminated union)。
+ * 放进 config / experiment 的 `sandbox` 字段 —— 字段类型只接受这个数据结构,不接受裸字符串。
+ * 各后端的参数互不相同 —— 这是个按 `backend` 区分的可辨识联合(discriminated union)。
  */
 export interface DockerSandboxSpec {
   readonly backend: "docker";
@@ -89,7 +89,7 @@ export interface CustomSandboxSpec {
 
 export type SandboxSpec = DockerSandboxSpec | VercelSandboxSpec | E2BSandboxSpec | CustomSandboxSpec;
 
-/** config / experiment 的 `sandbox` 字段:必须是工厂函数产出的 spec 数据结构,省略 = 自动探测后端。 */
+/** config / experiment 的 `sandbox` 字段:必须是工厂函数产出的 spec 数据结构;沙箱型 agent 不能省略。 */
 export type SandboxOption = SandboxSpec;
 
 export interface CommandOptions {

package/src/shared/format.ts

@@ -15,6 +15,12 @@ export function formatDuration(ms?: number): string {
 }
 
 export function formatCost(value?: number): string {
-  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return "$0";
-  return "$" + value.toFixed(value < 1 ? 3 : 2);
+  // 查不到价 / 没有 model 时上游传 undefined(见 o11y/cost.ts) —— 显示 "—" 而不是騙人的 $0,
+  // 否则「真实但极小的花费」和「压根没算出成本」在界面上长得一模一样。
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return "—";
+  if (value >= 1) return "$" + value.toFixed(2);
+  if (value >= 0.001) return "$" + value.toFixed(3);
+  // 便宜模型 + 小样本(如 tier1 示例)常见的真实成本,3 位小数会整个舍成 0.000,
+  // 这里退到 2 位有效数字,保留"确实花了一点点钱"的信号。
+  return "$" + value.toPrecision(2);
 }

package/src/view/app/App.tsx

@@ -1,11 +1,13 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { detectLocale, makeTranslator, persistLocale, setDocumentLocale } from "./i18n.ts";
 import type { MessageKey } from "./i18n.ts";
 import type { Locale, LocalizedText, SortKey, SortState, Tab, ViewData, ViewResult, ViewRow } from "./types.ts";
 import { buildGroupMap, compareRows, resultFromUrl } from "./lib/rows.ts";
+import { formatAttemptHash, parseAttemptHash, resolveAttemptRef, unresolvedAttemptWarning } from "./lib/attempt-route.ts";
 import { formatCost, formatDateTime, formatDuration, formatPercent } from "./lib/format.ts";
 import { Metric } from "./components/primitives.tsx";
 import { GroupSelector } from "./components/GroupSelector.tsx";
+import { CostScoreChart } from "./components/CostScoreChart.tsx";
 import { ExperimentTable } from "./components/ExperimentTable.tsx";
 import { CopyAllErrors } from "./components/CopyControls.tsx";
 import { AttemptModal } from "./components/AttemptModal.tsx";
@@ -26,6 +28,19 @@ export function localizedText(text: LocalizedText | undefined, locale: Locale):
   return text[locale] ?? text.en ?? Object.values(text)[0];
 }
 
+/** 初始 URL → 直接打开的 attempt:先认 #/attempt/<run>/<result> 深链,回退旧版 ?modal= 参数。 */
+function modalResultFromLocation(rows: ViewRow[]): ViewResult | null {
+  const ref = parseAttemptHash(location.hash);
+  if (ref) {
+    const found = resolveAttemptRef(rows, ref);
+    if (found) return found;
+    // 定位不到(run 不在、下标越界、旧格式数据):不开空 modal,页面照常渲染。
+    console.warn(unresolvedAttemptWarning(location.hash));
+    return null;
+  }
+  return resultFromUrl(rows);
+}
+
 export function App({ data }: { data: ViewData }) {
   const rows = data.rows ?? [];
   const [locale, setLocale] = useState<Locale>(() => detectLocale());
@@ -38,7 +53,11 @@ export function App({ data }: { data: ViewData }) {
     const groups = [...new Set(rows.map((r) => r.group).filter(Boolean))].sort();
     return groups[0] ?? null;
   });
-  const [modalResult, setModalResult] = useState<ViewResult | null>(() => resultFromUrl(rows));
+  const [modalResult, setModalResult] = useState<ViewResult | null>(() => modalResultFromLocation(rows));
+  // 当前 modal 的 hash 历史条目前面是否还有本页条目(本页 push 的 / 前进键回到的):
+  // true → UI 关闭走 history.back(),前进键还能重新打开;false(深链直接落地)→ 原地抹 hash,
+  // 免得 back 把用户弹出站外。
+  const modalOwnsHistory = useRef(false);
 
   useEffect(() => {
     setDocumentLocale(locale);
@@ -47,18 +66,61 @@ export function App({ data }: { data: ViewData }) {
 
   const openModal = useCallback((result: ViewResult) => {
     setModalResult(result);
-    const p = new URLSearchParams();
-    p.set("modal", result.id);
-    if (result.experimentId) p.set("exp", result.experimentId);
-    p.set("a", String(result.attempt));
-    history.replaceState(null, "", "?" + p.toString());
+    const ref = result.attemptRef;
+    // 旧格式烘焙的数据没有 attemptRef:modal 照常打开,只是这条 attempt 产不出可分享链接。
+    if (!ref) return;
+    try {
+      // pushState/replaceState 不触发 hashchange,不会和下面的监听器重复开合。
+      if (parseAttemptHash(location.hash)) {
+        // 已经在某条 attempt 深链上(防御浏览器导航竞态):替换当前条目,不叠历史。
+        history.replaceState(null, "", formatAttemptHash(ref));
+      } else {
+        history.pushState(null, "", formatAttemptHash(ref));
+        modalOwnsHistory.current = true;
+      }
+    } catch {
+      // file:// 等受限环境可能拒绝写 history;URL 同步失败不影响打开 modal。
+    }
   }, []);
 
   const closeModal = useCallback(() => {
     setModalResult(null);
-    history.replaceState(null, "", location.pathname);
+    if (modalOwnsHistory.current) {
+      modalOwnsHistory.current = false;
+      history.back();
+      return;
+    }
+    try {
+      // 深链直接落地 / 旧版 ?modal= 链接:没有可回退的本页条目,原地还原成无 modal 的 URL。
+      history.replaceState(null, "", location.pathname);
+    } catch {
+      // 还原 URL 失败不影响关闭。
+    }
   }, []);
 
+  // 浏览器前进/后退、手改 hash、页内 attempt 链接统一从 hashchange 开合 modal。
+  useEffect(() => {
+    const onHashChange = () => {
+      const ref = parseAttemptHash(location.hash);
+      if (!ref) {
+        modalOwnsHistory.current = false;
+        setModalResult(null);
+        return;
+      }
+      const found = resolveAttemptRef(rows, ref);
+      if (!found) {
+        console.warn(unresolvedAttemptWarning(location.hash));
+        setModalResult(null);
+        return;
+      }
+      // 经浏览器导航打开:前一条历史仍是本页,UI 关闭可以安全 back()。
+      modalOwnsHistory.current = true;
+      setModalResult(found);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [rows]);
+
   const groupMap = useMemo<Map<string, ViewRow[]>>(() => buildGroupMap(rows), [rows]);
   const pool = selectedGroup ? groupMap.get(selectedGroup) ?? [] : rows;
   const filtered = useMemo(() => {
@@ -181,15 +243,18 @@ export function App({ data }: { data: ViewData }) {
             </div>
           </div>
           {rows.length ? (
-            <ExperimentTable
-              rows={filtered}
-              sort={sort}
-              setSortKey={setSortKey}
-              openRows={openRows}
-              toggleRow={toggleRow}
-              openModal={openModal}
-              t={t}
-            />
+            <>
+              <CostScoreChart rows={filtered} t={t} />
+              <ExperimentTable
+                rows={filtered}
+                sort={sort}
+                setSortKey={setSortKey}
+                openRows={openRows}
+                toggleRow={toggleRow}
+                openModal={openModal}
+                t={t}
+              />
+            </>
           ) : (
             <div className="empty">
               {t("empty.summary")}

package/src/view/app/components/AttemptModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import type { ArtifactLoadState, T } from "../shared.ts";
 import type { ViewResult } from "../types.ts";
+import { artifactUrl } from "../lib/artifact-url.ts";
 import { asEvents, asSources } from "../lib/guards.ts";
 import { outcomeClass, outcomeLabel } from "../lib/outcome.ts";
 import { CodeView, NoSourceBody } from "./CodeView.tsx";
@@ -19,7 +20,7 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
     let alive = true;
     const grab = (name: string, has?: boolean): Promise<unknown> =>
       has
-        ? fetch("/artifact?p=" + encodeURIComponent(`${base}/${name}`))
+        ? fetch(artifactUrl(`${base}/${name}`))
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null)
         : Promise.resolve(null);
@@ -56,7 +57,13 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
           {hasCode ? (
             <CodeView sources={data.sources ?? []} events={data.events || []} assertions={allAssertions} t={t} />
           ) : data.status !== "loading" ? (
-            <NoSourceBody assertions={allAssertions} events={data.events || []} t={t} />
+            // hasSources 为真却取不到 → 源码捕获过,是工件文件在当前托管里缺失;和「从未捕获」分开提示。
+            <NoSourceBody
+              assertions={allAssertions}
+              events={data.events || []}
+              message={t(result.hasSources && base ? "code.sourceUnavailable" : "code.noSource")}
+              t={t}
+            />
           ) : null}
           {result.hasTrace && base ? (
             <LazyArtifact type="trace" src={`${base}/trace.json`} t={t} />

package/src/view/app/components/CodeView.tsx

@@ -245,12 +245,12 @@ export function AssertDetail({ asserts, t }: { asserts: Assertion[]; t: T }) {
  * 没源码可叠时(此 run 早于 source-loc,或源码不可读:远程沙箱等)。不退回老的分组视图——
  * 用代码视图同一套视觉语言:一句说明 + checks(绿过/红不过)+ 原始会话流。重跑即可看到代码视图。
  */
-export function NoSourceBody({ assertions, events, t }: { assertions: Assertion[]; events: TranscriptEvent[]; t: T }) {
+export function NoSourceBody({ assertions, events, message, t }: { assertions: Assertion[]; events: TranscriptEvent[]; message?: string; t: T }) {
   const checks = assertions || [];
   return (
     <div className="nosource">
       <div className="nosource-note">
-        {t("code.noSource")}
+        {message ?? t("code.noSource")}
       </div>
       {checks.length ? (
         <div className="nosource-block">

package/src/view/app/components/CostScoreChart.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import type { T } from "../shared.ts";
+import type { ViewRow } from "../types.ts";
+import { formatCost, formatPercent } from "../lib/format.ts";
+import { layoutLabelOffsets, niceTicks, seriesColor } from "../lib/chart.ts";
+
+const WIDTH = 640;
+const HEIGHT = 300;
+const MARGIN = { top: 16, right: 24, bottom: 34, left: 46 };
+
+/** formatCost(0) 显示 "—"(表示"没测出成本"),但坐标轴原点确实就是 $0,不能沿用那个语义。 */
+function formatAxisCost(value: number): string {
+  return value === 0 ? "$0" : formatCost(value);
+}
+
+/**
+ * 一个 group 内「成本 vs 通过率」散点图:一行(一个实验/config)= 一个点。
+ * 只在 group 内至少两条 row 有 estimatedCostUSD 时渲染,否则没有比较意义。
+ */
+export function CostScoreChart({ rows, t }: { rows: ViewRow[]; t: T }) {
+  const [hoverKey, setHoverKey] = useState<string | null>(null);
+  const points = rows.filter((r): r is ViewRow & { estimatedCostUSD: number } => typeof r.estimatedCostUSD === "number" && Number.isFinite(r.estimatedCostUSD));
+  if (points.length < 2) return null;
+
+  const plotW = WIDTH - MARGIN.left - MARGIN.right;
+  const plotH = HEIGHT - MARGIN.top - MARGIN.bottom;
+
+  const xTicks = niceTicks(0, Math.max(...points.map((p) => p.estimatedCostUSD)), 5);
+  const xMax = xTicks[xTicks.length - 1] || 1;
+
+  const rates = points.map((p) => p.passRate);
+  const rateMin = Math.min(...rates);
+  const rateMax = Math.max(...rates);
+  const pad = Math.max(0.03, (rateMax - rateMin) * 0.25);
+  const yTicksRaw = niceTicks(Math.max(0, rateMin - pad), Math.min(1, rateMax + pad), 5);
+  const yMin = Math.max(0, yTicksRaw[0] ?? 0);
+  const yMax = Math.min(1, yTicksRaw[yTicksRaw.length - 1] ?? 1);
+  const yTicks = yTicksRaw.filter((v) => v >= yMin - 1e-9 && v <= yMax + 1e-9);
+
+  const xScale = (cost: number) => MARGIN.left + (cost / xMax) * plotW;
+  const yScale = (rate: number) => MARGIN.top + (1 - (rate - yMin) / (yMax - yMin)) * plotH;
+
+  const hovered = points.find((p) => p.key === hoverKey);
+
+  const positions = points.map((p) => {
+    const cx = xScale(p.estimatedCostUSD);
+    const cy = yScale(p.passRate);
+    const anchorLeft = cx >= MARGIN.left + plotW * 0.72;
+    return { cx, cy, anchorLeft, width: p.label.length * 6.4 + 10 };
+  });
+  const labelOffsets = layoutLabelOffsets(positions);
+
+  return (
+    <div className="cost-score-chart">
+      <div className="csc-head">{t("chart.costVsScore")}</div>
+      <div className="csc-svg-wrap">
+        <svg className="csc-svg" viewBox={`0 0 ${WIDTH} ${HEIGHT}`} role="img" aria-label={t("chart.costVsScore")}>
+          <g className="csc-grid">
+            {yTicks.map((tick) => (
+              <line key={`gy-${tick}`} x1={MARGIN.left} x2={WIDTH - MARGIN.right} y1={yScale(tick)} y2={yScale(tick)} />
+            ))}
+            {xTicks.map((tick) => (
+              <line key={`gx-${tick}`} y1={MARGIN.top} y2={HEIGHT - MARGIN.bottom} x1={xScale(tick)} x2={xScale(tick)} />
+            ))}
+          </g>
+          <g className="csc-axis csc-axis-y">
+            {yTicks.map((tick) => (
+              <text key={`ay-${tick}`} x={MARGIN.left - 8} y={yScale(tick)} textAnchor="end" dominantBaseline="middle">
+                {formatPercent(tick)}
+              </text>
+            ))}
+          </g>
+          <g className="csc-axis csc-axis-x">
+            {xTicks.map((tick) => (
+              <text key={`ax-${tick}`} x={xScale(tick)} y={HEIGHT - MARGIN.bottom + 18} textAnchor="middle">
+                {formatAxisCost(tick)}
+              </text>
+            ))}
+            <text x={MARGIN.left + plotW / 2} y={HEIGHT - 4} textAnchor="middle">
+              {t("chart.axisCost")}
+            </text>
+          </g>
+          <g className="csc-points">
+            {points.map((p, i) => {
+              const { cx, cy, anchorLeft } = positions[i]!;
+              const labelY = cy + 4 + labelOffsets[i]!;
+              const color = seriesColor(i);
+              const labelX = cx + (anchorLeft ? -10 : 10);
+              return (
+                <g
+                  key={p.key}
+                  className="csc-point"
+                  tabIndex={0}
+                  role="button"
+                  aria-label={`${p.label}: ${formatCost(p.estimatedCostUSD)}, ${formatPercent(p.passRate)}`}
+                  onMouseEnter={() => setHoverKey(p.key)}
+                  onMouseLeave={() => setHoverKey((k) => (k === p.key ? null : k))}
+                  onFocus={() => setHoverKey(p.key)}
+                  onBlur={() => setHoverKey((k) => (k === p.key ? null : k))}
+                >
+                  {/* 标签被挤开时补一条 leader line,避免脱离原点看不出对应关系。 */}
+                  {labelOffsets[i] ? <line className="csc-leader" x1={cx} y1={cy} x2={labelX} y2={labelY - 4} /> : null}
+                  <circle className="csc-hit" cx={cx} cy={cy} r={13} />
+                  <circle className="csc-dot" cx={cx} cy={cy} r={5} style={{ fill: color }} />
+                  <text x={labelX} y={labelY} textAnchor={anchorLeft ? "end" : "start"}>
+                    {p.label}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+        {hovered ? (
+          <div
+            className="csc-tooltip"
+            style={{ left: `${(xScale(hovered.estimatedCostUSD) / WIDTH) * 100}%`, top: `${(yScale(hovered.passRate) / HEIGHT) * 100}%` }}
+          >
+            <b>{formatPercent(hovered.passRate)}</b> {t("chart.axisScore")}
+            <div className="csc-tooltip-meta">
+              {formatCost(hovered.estimatedCostUSD)} · {hovered.model || hovered.agent}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/view/app/components/LazyArtifact.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import type { LazyArtifactType, T } from "../shared.ts";
+import { artifactUrl } from "../lib/artifact-url.ts";
 import { asEvents, asSpans } from "../lib/guards.ts";
 import { Trace } from "./Trace.tsx";
 import { Transcript } from "./Transcript.tsx";
@@ -14,7 +15,7 @@ export function LazyArtifact({ type, src, autoLoad = false, t }: { type: LazyArt
     if (loaded) return;
     setLoaded(true);
     try {
-      const resp = await fetch("/artifact?p=" + encodeURIComponent(src));
+      const resp = await fetch(artifactUrl(src));
       if (!resp.ok) throw new Error("HTTP " + resp.status);
       const body = await resp.json();
       setContent(body);