niceeval 0.8.1 → 0.9.1

package/src/view/view-report.test.ts

@@ -2,7 +2,7 @@
 // niceeval view 的报告槽与宿主组合语义(docs/feature/reports/architecture.md「Selection 是计算入口」
 // 与裁决记录 6;公开行为准绳 docs-site/zh/how-to/viewing-results.mdx / custom-reports.mdx)。
 // 覆盖:
-// - 组合语义与 show 对齐:位置前缀收窄报告槽 Scope、--experiment 过滤、匹配不到直说;
+// - 组合语义与 show 对齐:位置前缀收窄报告槽 Scope、--exp 过滤、匹配不到直说;
 // - 输入语义:位置参数只表示 eval id 前缀(不随文件系统状态改变),结果根走 --results,
 //   单开一份快照走 --snapshot(文件不可读时失败);
 // - 报告槽恒在:裸跑填充内建报告,--report 整槽替换;en / zh-CN 双语各渲染一遍;
@@ -139,33 +139,61 @@ describe("resolveViewInput · 输入语义", () => {
 });
 
 
-/** 单页报告(裸跑 / 树形态 --report)的报告槽 HTML:规范化后唯一页 id 恒为 `report`。 */
+/** 单页报告(树形态 --report)的报告槽 HTML:规范化后唯一页 id 恒为 `report`。 */
 function slotHtml(scan: ViewScan): { en: string; "zh-CN": string } {
   expect(scan.reportPages).toHaveLength(1);
   expect(scan.reportPages[0]!.id).toBe("report");
   return scan.reportPages[0]!.html as { en: string; "zh-CN": string };
 }
 
+/** 多页定义(裸跑装载的内建报告是三页)按页 id 取报告槽 HTML。 */
+function pageHtml(scan: ViewScan, id: string): { en: string; "zh-CN": string } {
+  const page = scan.reportPages.find((p) => p.id === id);
+  expect(page, `page ${id}`).toBeTruthy();
+  return page!.html as { en: string; "zh-CN": string };
+}
+
+/** 裸跑的首页(内建报告的 report 页):先断言内建三页齐全,再取首页 HTML。 */
+function bareReportHtml(scan: ViewScan): { en: string; "zh-CN": string } {
+  expect(scan.reportPages.map((p) => p.id)).toEqual(["report", "attempts", "traces"]);
+  return pageHtml(scan, "report");
+}
+
 // ───────────────────────── 组合语义(与 show 对齐) ─────────────────────────
 
 describe("loadViewScan · 组合语义", () => {
-  it("位置前缀收窄报告槽 Selection;证据室快照不收窄,深链恒可达", async () => {
+  it("位置前缀收窄作用在有效根上:全部页与证据室一致缩小,被滤掉的 attempt 不烘进页面数据", async () => {
     const root = await seedRoot();
     const scan = await loadViewScan(root, { patterns: ["weather"] });
     const { viewData } = scan;
-    const reportHtml = slotHtml(scan);
-    // 报告槽:两实验都只剩 weather/brooklyn 一题,范围外的失败不再出现。
+    const reportHtml = bareReportHtml(scan);
+    // 报告页:两实验都只剩 weather/brooklyn 一题,范围外的失败不再出现。
     expect(reportHtml.en).toContain("compare/bub");
     expect(reportHtml.en).toContain("compare/codex");
     expect(reportHtml.en).not.toContain("fixtures/button");
-    // 证据室:快照明细仍含 fixtures/button(attempt 深链在收窄下也能解析)。
-    const allIds = viewData.snapshots.flatMap((s) => s.results.map((r) => r.id));
-    expect(allIds).toContain("fixtures/button");
+    // Attempts / Traces 是普通页,共享同一收窄后 Scope:行集同样缩小。
+    expect(pageHtml(scan, "attempts").en).not.toContain("fixtures/button");
+    expect(pageHtml(scan, "traces").en).not.toContain("fixtures/button");
+    const bare = await loadViewScan(root);
+    expect(pageHtml(bare, "attempts").en).toContain("fixtures/button"); // 不收窄时在场,对照
+    // 有效根即证据室:被滤掉的 attempt 不在 viewData.snapshots 里,深链两宿主一致不可达。
+    const filteredOut = viewData.snapshots
+      .flatMap((s) => s.results)
+      .find((r) => r.id === "fixtures/button");
+    expect(filteredOut).toBeUndefined();
+    expect(scan.artifactDirs.size).toBe(
+      [...scan.artifactDirs.keys()].filter((base) => base.includes("weather/brooklyn")).length,
+    );
+    // 收窄之内、不在现刻水位的口径差异由 --exp 深链测试覆盖;不收窄时深链照常可达,对照:
+    const inBare = bare.viewData.snapshots.flatMap((s) => s.results).find((r) => r.id === "fixtures/button");
+    expect(inBare?.locator).toBeTruthy();
+    const { resolveAttemptLocator } = await import("./app/lib/attempt-route.ts");
+    expect(resolveAttemptLocator(bare.viewData.snapshots, inBare!.locator!)).toBe(inBare);
   });
 
-  it("--experiment 过滤:报告槽 Selection 只留该实验", async () => {
+  it("--exp 过滤:报告槽 Selection 只留该实验", async () => {
     const root = await seedRoot();
-    const reportHtml = slotHtml(await loadViewScan(root, { experiment: "compare/codex" }));
+    const reportHtml = bareReportHtml(await loadViewScan(root, { experiment: "compare/codex" }));
     expect(reportHtml.en).toContain("compare/codex");
     expect(reportHtml.en).not.toContain("compare/bub");
   });
@@ -177,34 +205,43 @@ describe("loadViewScan · 组合语义", () => {
     await expect(loadViewScan(root, { experiment: "nosuch" })).rejects.toBeInstanceOf(ViewInputError);
   });
 
-  it("全部缺省:报告槽使用现刻水位口径(与 show 相同的合成规则)", async () => {
+  it("全部缺省:报告槽使用现刻水位口径(与 show 相同的合成规则);导航页即内建三页", async () => {
     const root = await seedRoot();
-    const reportHtml = slotHtml(await loadViewScan(root));
+    const scan = await loadViewScan(root);
+    const reportHtml = bareReportHtml(scan);
     // 默认报告的榜单含两个实验;官方组件的稳定类名在场。
     expect(reportHtml.en).toContain("compare/bub");
     expect(reportHtml.en).toContain("compare/codex");
     expect(reportHtml.en).toContain("nre-");
+    // 导航 = 报告定义声明的页(声明序),宿主不追加:裸 view 的三个 tab 就是内建三页。
+    expect(scan.viewData.report?.pages.map((p) => p.id)).toEqual(["report", "attempts", "traces"]);
+    expect(scan.viewData.report?.pages.map((p) => p.title)).toEqual([
+      { en: "Report", "zh-CN": "报告" },
+      "Attempts",
+      { en: "Traces", "zh-CN": "追踪" },
+    ]);
   });
 });
 
 // ─────────────────── 报告槽恒在:裸跑 ≡ --report <ExperimentComparison> ───────────────────
 
 describe("loadViewScan · 默认报告槽(裸跑)", () => {
-  it("裸跑产出的报告槽 HTML 与 --report <re-export ExperimentComparison 的文件> 完全一致(双语)", async () => {
+  it("裸跑产出的报告槽 HTML 与 --report <re-export 内建报告的文件> 逐页完全一致(双语)", async () => {
     const root = await seedRoot();
-    const bare = slotHtml(await loadViewScan(root));
-    const viaReport = slotHtml(
-      await loadViewScan(root, {
-        report: { path: DEFAULT_REPORT_REEXPORT, cwd: root },
-      }),
-    );
-    expect(bare.en).toBe(viaReport.en);
-    expect(bare["zh-CN"]).toBe(viaReport["zh-CN"]);
+    const bare = await loadViewScan(root);
+    const viaReport = await loadViewScan(root, {
+      report: { path: DEFAULT_REPORT_REEXPORT, cwd: root },
+    });
+    expect(viaReport.reportPages.map((p) => p.id)).toEqual(bare.reportPages.map((p) => p.id));
+    for (const pageId of ["report", "attempts", "traces"]) {
+      expect(pageHtml(viaReport, pageId).en).toBe(pageHtml(bare, pageId).en);
+      expect(pageHtml(viaReport, pageId)["zh-CN"]).toBe(pageHtml(bare, pageId)["zh-CN"]);
+    }
   });
 
   it("报告槽双语渲染:同一棵树按 locale 渲染两遍,chrome 文案分语言、数据不分语言", async () => {
     const root = await seedRoot();
-    const reportHtml = slotHtml(await loadViewScan(root));
+    const reportHtml = bareReportHtml(await loadViewScan(root));
     expect(reportHtml.en).toContain("End-to-end pass rate"); // ExperimentList 主行(en)
     expect(reportHtml["zh-CN"]).toContain("端到端成功率"); // ExperimentList 主行(zh-CN)
     for (const html of [reportHtml.en, reportHtml["zh-CN"]]) {
@@ -216,11 +253,17 @@ describe("loadViewScan · 默认报告槽(裸跑)", () => {
     }
   });
 
-  it("失败清单与警告住在报告槽里:ExperimentList 列出失败,壳的 viewData 不携带统计产物", async () => {
+  it("失败清单与警告住在报告页里:ExperimentList 列出失败,壳的 viewData 不携带统计产物", async () => {
     const root = await seedRoot();
     const scan = await loadViewScan(root);
     const { viewData } = scan;
-    expect(slotHtml(scan).en).toContain("fixtures/button");
+    expect(bareReportHtml(scan).en).toContain("fixtures/button");
+    // 品牌行是页内组件(Hero 恒含),不是宿主 chrome:每页 web 面都带官网品牌行。
+    for (const pageId of ["report", "attempts", "traces"]) {
+      const html = pageHtml(scan, pageId).en;
+      expect(html).toContain("nre-powered-by");
+      expect(html).toContain("https://niceeval.com/?utm_source=report&amp;utm_medium=powered-by");
+    }
     // viewData 只有证据室数据:快照 + skipped + 壳元信息。
     expect(viewData).not.toHaveProperty("overview");
     expect(viewData).not.toHaveProperty("table");
@@ -431,18 +474,41 @@ describe("buildView · --out 与 --report", () => {
     expect(existsSync(join(exported, "o11y.json"))).toBe(false);
   });
 
-  it("--out 与位置参数 / --experiment 互斥:报错含 copySnapshots + filter 下一步", async () => {
+  it("--out 接受收窄,出站的就是收窄到的:被滤掉实验的证据文件与页面数据都不出站", async () => {
     const root = await seedRoot();
+    // 两个实验各写一份 events.json:导出后只有收窄内的那份在站里。
+    const bubDir = join(root, "compare_bub", "2026-07-08T10-00-00-000Z", "weather", "brooklyn", "a0");
+    const codexDir = join(root, "compare_codex", "2026-07-09T10-00-00-000Z", "weather", "brooklyn", "a0");
+    for (const dir of [bubDir, codexDir]) {
+      await mkdir(dir, { recursive: true });
+      await writeFile(join(dir, "events.json"), "[]", "utf-8");
+    }
+
     const out = join(root, "site");
-    for (const scan of [{ patterns: ["weather"] }, { experiment: "compare/bub" }]) {
-      const attempt = buildView({ input: root, out, scan });
-      await expect(attempt).rejects.toBeInstanceOf(ViewInputError);
-      await expect(
-        buildView({ input: root, out, scan }),
-      ).rejects.toThrow(/copySnapshots/);
+    await buildView({ input: root, out, scan: { patterns: [], experiment: "compare/codex" } });
+    expect(existsSync(join(out, "artifact", "compare_codex/2026-07-09T10-00-00-000Z/weather/brooklyn/a0", "events.json"))).toBe(true);
+    // 被滤掉的实验:证据树整目录不出站,页面数据(烘进 HTML 的 viewData 与报告块)也不含它。
+    expect(existsSync(join(out, "artifact", "compare_bub"))).toBe(false);
+    const html = await readFile(join(out, "index.html"), "utf-8");
+    expect(html).not.toContain("compare/bub");
+    expect(html).toContain("compare/codex");
+  });
+
+  it("eval 前缀收窄导出:不匹配 attempt 的证据不出站", async () => {
+    const root = await seedRoot();
+    const weatherDir = join(root, "compare_bub", "2026-07-08T10-00-00-000Z", "weather", "brooklyn", "a0");
+    const buttonDir = join(root, "compare_bub", "2026-07-08T10-00-00-000Z", "fixtures", "button", "a0");
+    for (const dir of [weatherDir, buttonDir]) {
+      await mkdir(dir, { recursive: true });
+      await writeFile(join(dir, "events.json"), "[]", "utf-8");
     }
-    // 同参数不带 --out 时照常收窄报告槽(不报错)。
-    await expect(loadViewScan(root, { patterns: ["weather"] })).resolves.toBeTruthy();
+
+    const out = join(root, "site");
+    await buildView({ input: root, out, scan: { patterns: ["weather"] } });
+    expect(existsSync(join(out, "artifact", "compare_bub/2026-07-08T10-00-00-000Z/weather/brooklyn/a0", "events.json"))).toBe(true);
+    expect(existsSync(join(out, "artifact", "compare_bub/2026-07-08T10-00-00-000Z/fixtures"))).toBe(false);
+    const html = await readFile(join(out, "index.html"), "utf-8");
+    expect(html).not.toContain("fixtures/button");
   });
 
   it("默认导出(无 --report):报告槽填充 ExperimentComparison,双语块与增强 runtime 恒内联", async () => {

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

@@ -1,51 +0,0 @@
-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";
-
-export function LazyArtifact({ type, src, autoLoad = false, t }: { type: LazyArtifactType; src: string; autoLoad?: boolean; t: T }) {
-  const [open, setOpen] = useState(autoLoad);
-  const [loaded, setLoaded] = useState(false);
-  const [content, setContent] = useState<unknown>(null);
-  const [error, setError] = useState("");
-
-  const load = async () => {
-    if (loaded) return;
-    setLoaded(true);
-    try {
-      const resp = await fetch(artifactUrl(src));
-      if (!resp.ok) throw new Error("HTTP " + resp.status);
-      const body = await resp.json();
-      setContent(body);
-      setError("");
-    } catch (e) {
-      setLoaded(false);
-      setError(`${t("trace.loadFailed")} ${String(e)}`);
-    }
-  };
-
-  useEffect(() => {
-    if (autoLoad) void load();
-  }, []);
-
-  return (
-    <details
-      className="trace-details"
-      open={open}
-      onToggle={(e) => {
-        const isOpen = e.currentTarget.open;
-        setOpen(isOpen);
-        if (isOpen) void load();
-      }}
-    >
-      <summary>{type === "transcript" ? t("trace.transcript") : t("trace.timing")}</summary>
-      <div className="trace-slot">
-        {error ? <div className="trace-span-meta">{error}</div> : !content ? <div className="trace-span-meta">{t("trace.loading")}</div> : null}
-        {content && type === "transcript" ? <Transcript events={asEvents(content) ?? []} t={t} /> : null}
-        {content && type === "trace" ? <Trace spans={asSpans(content) ?? []} t={t} /> : null}
-      </div>
-    </details>
-  );
-}

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

@@ -1,140 +0,0 @@
-import { useState } from "react";
-import { AlertCircle, ChevronRight, Copy, Check } from "lucide-react";
-import type { T } from "../shared.ts";
-import type { MessageKey } from "../i18n.ts";
-import type { SkippedRunNotice } from "../types.ts";
-import { copyText } from "./CopyControls.tsx";
-
-// 折叠前默认可见的条目数(跨分组累计);超出的部分收进「展开其余」。
-const DEFAULT_VISIBLE = 3;
-
-type GroupKind = "incompatible" | "incompatibleForeign" | "malformed" | "incomplete";
-
-interface SkippedGroup {
-  key: string;
-  kind: GroupKind;
-  messageKey: MessageKey;
-  vars: Record<string, string | number>;
-  items: SkippedRunNotice[];
-}
-
-/** 同一原因(且描述文案完全相同)的失败 run 归成一组,组内条目只保留目录名 + 命令,
- *  避免把完整原因句子重复 N 遍——这正是原实现把首屏挤满的根因。 */
-function groupSkippedRuns(runs: SkippedRunNotice[]): SkippedGroup[] {
-  const groups = new Map<string, SkippedGroup>();
-  for (const run of runs) {
-    let kind: GroupKind;
-    let key: string;
-    let messageKey: MessageKey;
-    let vars: Record<string, string | number>;
-
-    if (run.reason === "malformed") {
-      kind = "malformed";
-      vars = { detail: run.detail ?? "?" };
-      key = `malformed:${vars.detail}`;
-      messageKey = "banner.skipped.malformed";
-    } else if (run.reason === "incomplete") {
-      kind = "incomplete";
-      vars = {};
-      key = "incomplete";
-      messageKey = "banner.skipped.incomplete";
-    } else if (run.producerName && run.producerName !== "niceeval") {
-      kind = "incompatibleForeign";
-      vars = { name: run.producerName, version: run.producerVersion ?? "?", schemaVersion: run.schemaVersion ?? "?" };
-      key = `foreign:${vars.name}:${vars.version}:${vars.schemaVersion}`;
-      messageKey = "banner.skipped.incompatibleForeign";
-    } else {
-      kind = "incompatible";
-      vars = { producer: run.producerVersion ?? "?", schemaVersion: run.schemaVersion ?? "?" };
-      key = `incompatible:${vars.producer}:${vars.schemaVersion}`;
-      messageKey = "banner.skipped.incompatible";
-    }
-
-    const existing = groups.get(key);
-    if (existing) {
-      existing.items.push(run);
-    } else {
-      groups.set(key, { key, kind, messageKey, vars, items: [run] });
-    }
-  }
-  return [...groups.values()];
-}
-
-function CopyCommandButton({ command, t }: { command: string; t: T }) {
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      type="button"
-      className={`ib-copy${copied ? " is-copied" : ""}`}
-      title={t("banner.copyCommand")}
-      onClick={async () => {
-        await copyText(command);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1200);
-      }}
-    >
-      {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
-    </button>
-  );
-}
-
-export function SkippedRunsBanner({ skippedRuns, t }: { skippedRuns: SkippedRunNotice[]; t: T }) {
-  const [expanded, setExpanded] = useState(false);
-  if (skippedRuns.length === 0) return null;
-
-  const groups = groupSkippedRuns(skippedRuns);
-  const total = skippedRuns.length;
-  let budget = expanded ? total : DEFAULT_VISIBLE;
-  const hiddenCount = expanded ? 0 : Math.max(0, total - DEFAULT_VISIBLE);
-
-  return (
-    <section className="incompatible-banner" role="alert">
-      <div className="ib-head">
-        <AlertCircle className="ib-icon" aria-hidden="true" />
-        <b>{t("banner.skippedTitle", { count: total })}</b>
-      </div>
-      <div className="ib-groups">
-        {groups.map((group) => {
-          const visibleItems = group.items.slice(0, Math.max(0, budget));
-          budget -= visibleItems.length;
-          const hiddenInGroup = group.items.length - visibleItems.length;
-          return (
-            <div className="ib-group" key={group.key}>
-              <div className="ib-group-head">
-                <span className="ib-group-count">{group.items.length}</span>
-                <span className="ib-group-desc">{t(group.messageKey, group.vars)}</span>
-              </div>
-              {visibleItems.length > 0 && (
-                <ul>
-                  {visibleItems.map((item) => (
-                    <li key={item.dir}>
-                      <span className="ib-dir">{item.dir}</span>
-                      {item.command && <CopyCommandButton command={item.command} t={t} />}
-                    </li>
-                  ))}
-                  {hiddenInGroup > 0 && !expanded && (
-                    <li className="ib-more" aria-hidden="true">
-                      +{hiddenInGroup}
-                    </li>
-                  )}
-                </ul>
-              )}
-            </div>
-          );
-        })}
-      </div>
-      {hiddenCount > 0 && (
-        <button type="button" className="ib-toggle" onClick={() => setExpanded(true)}>
-          <ChevronRight aria-hidden="true" />
-          {t("banner.expandRest", { count: hiddenCount })}
-        </button>
-      )}
-      {expanded && total > DEFAULT_VISIBLE && (
-        <button type="button" className="ib-toggle" onClick={() => setExpanded(false)}>
-          <ChevronRight className="is-open" aria-hidden="true" />
-          {t("banner.collapse")}
-        </button>
-      )}
-    </section>
-  );
-}

package/src/view/app/pages/AttemptsPage.tsx

@@ -1,80 +0,0 @@
-import { useState } from "react";
-import type { RowRun, T } from "../shared.ts";
-import { verdictClass, verdictLabel } from "../lib/verdict.ts";
-import { formatCost, formatDateTime, formatDuration, formatTokens, totalTokens } from "../lib/format.ts";
-
-/** 全部历史 attempt 打平成一张表;列表在 App 里由 flattenAttempts(全部快照,已跨快照去重)算好。 */
-export function AttemptsView({ attempts, t }: { attempts: RowRun[]; t: T }) {
-  const [query, setQuery] = useState("");
-  const allRuns = attempts;
-  const filtered = allRuns.filter((r: RowRun) => {
-    const q = query.trim().toLowerCase();
-    return !q || `${r.id} ${r.rowLabel} ${r.rowAgent} ${r.rowModel || ""}`.toLowerCase().includes(q);
-  });
-  return (
-    <section id="tab-attempts">
-      <div className="section-head">
-        <h2>{t("section.attempts")}</h2>
-        <div className="controls">
-          <input
-            className="search"
-            type="search"
-            placeholder={t("search.attempts")}
-            autoComplete="off"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
-        </div>
-      </div>
-      {!allRuns.length ? (
-        <div className="empty">{t("empty.attempts")}</div>
-      ) : (
-        <div className="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>{t("table.evalId")}</th>
-                <th>{t("table.experiment")}</th>
-                <th>{t("table.verdict")}</th>
-                <th>{t("table.agent")}</th>
-                <th>{t("table.model")}</th>
-                <th>{t("metric.duration")}</th>
-                <th>{t("table.tokens")}</th>
-                <th>{t("table.estCost")}</th>
-                <th>{t("table.ranAt")}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filtered.length ? (
-                filtered.map((r: RowRun) => {
-                  const verdict = r.verdict;
-                  return (
-                    <tr key={`${r.id}-${r.rowLabel}-${r.attempt}`}>
-                      <td>
-                        <span className="name">{r.id}</span>
-                      </td>
-                      <td>{r.rowLabel}</td>
-                      <td className={verdictClass(verdict)}>{verdictLabel(verdict, t)}</td>
-                      <td>{r.rowAgent}</td>
-                      <td>{r.rowModel || t("config.default")}</td>
-                      <td className="num">{formatDuration(r.durationMs)}</td>
-                      <td className="num">{formatTokens(totalTokens(r.usage))}</td>
-                      <td className="num">{formatCost(r.estimatedCostUSD)}</td>
-                      <td className="num">{r.startedAt ? formatDateTime(r.startedAt) : "-"}</td>
-                    </tr>
-                  );
-                })
-              ) : (
-                <tr>
-                  <td colSpan={9} style={{ textAlign: "center", color: "var(--muted)" }}>
-                    {t("empty.attemptsFilter")}
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </section>
-  );
-}

package/src/view/app/pages/TracesPage.tsx

@@ -1,35 +0,0 @@
-import type { RowRun, T } from "../shared.ts";
-import { verdictClass, verdictLabel } from "../lib/verdict.ts";
-import { formatDuration } from "../lib/format.ts";
-import { LazyArtifact } from "../components/LazyArtifact.tsx";
-
-/** 全部历史 attempt 的 trace/transcript 视图;列表在 App 里由 flattenAttempts 算好。 */
-export function TracesView({ attempts, t }: { attempts: RowRun[]; t: T }) {
-  const traceable = attempts.filter((r: RowRun) => r.hasEvents || r.hasTrace);
-  return (
-    <section id="tab-traces">
-      <div className="section-head">
-        <h2>{t("section.traces")}</h2>
-      </div>
-      {!traceable.length ? (
-        <div className="empty">{t("empty.traces")}</div>
-      ) : (
-        traceable.map((r: RowRun) => {
-          const verdict = r.verdict;
-          return (
-            <div className="traces-entry" key={`${r.id}-${r.rowLabel}-${r.attempt}`}>
-              <div className="traces-entry-head">
-                <span className={`${verdictClass(verdict)} traces-verdict`}>{verdictLabel(verdict, t)}</span>
-                <span className="eval-id">{r.id}</span>
-                <span className="traces-exp">{r.rowLabel}</span>
-                <span className="num traces-dur">{formatDuration(r.durationMs)}</span>
-              </div>
-              {r.hasEvents && r.artifactBase ? <LazyArtifact type="transcript" src={`${r.artifactBase}/events.json`} t={t} /> : null}
-              {r.hasTrace && r.artifactBase ? <LazyArtifact type="trace" src={`${r.artifactBase}/trace.json`} t={t} /> : null}
-            </div>
-          );
-        })
-      )}
-    </section>
-  );
-}