niceeval 0.9.0 → 0.10.0

package/src/view/app/App.tsx

@@ -1,17 +1,41 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { detectLocale, makeTranslator, persistLocale, setDocumentLocale } from "./i18n.ts";
-import type { Locale, LocalizedText, ReportSlotHtml, Tab, ViewData, ViewReportPageMeta, ViewResult } from "./types.ts";
-import { resultFromUrl } from "./lib/rows.ts";
-import { parseAttemptHash, resolveAttemptLocator, unresolvedAttemptWarning } from "./lib/attempt-route.ts";
-import { AttemptModal } from "./components/AttemptModal.tsx";
+import type { Locale, LocalizedText, ReportSlotHtml, Tab, ViewData, ViewReportPageMeta } from "./types.ts";
+import {
+  attemptHrefFor,
+  attemptLocatorFromHref,
+  hashForAttempt,
+  locatorFromHash,
+  parseAttemptDocument,
+  type AttemptDocumentContent,
+} from "./lib/attempt-dialog.ts";
+import { Dialog, DialogClose, DialogContent, DialogTitle } from "./components/ui/dialog.tsx";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs.tsx";
 
 // 导航组成只有一条规则(docs/feature/reports/view.md「页面构成」):导航项 = 报告定义声明的页,
 // 按声明顺序排列(路由 `#/page/<id>`,`--page <id>` 定初始页)。宿主不追加、不保留任何导航项——
-// 裸 view 的「报告 / Attempts / 追踪」三个 tab 就是内建报告的三页。页面里的 hero、品牌行、
-// 选择警告都不是宿主渲染的:它们是页内的站点组件(Hero / PoweredBy / ScopeWarnings)。
-// 宿主保留的只有机器:管线与路由、attempt 详情路由、文档单例(<title>)、语言切换
-// (docs/feature/reports/architecture.md「宿主保留的只有机器」)。
+// 裸 view 的「报告 / Attempts / 追踪」三个 tab 就是内建报告的三页。页面里的 hero、Scope 警告
+// 都不是宿主渲染的:它们是页内的站点组件(Hero / ScopeWarnings)。宿主保留的是机器
+// 加一个恒定的品牌位:管线与路由、attempt 详情路由、文档单例(<title>)、语言切换,以及
+// 页头左端的 NiceEval 字标(docs/feature/reports/architecture.md「宿主保留的只有机器」)。
+
+// niceeval 官网。页头品牌字标与 hero 下的 `Powered by NiceEval` 行都外链到它,
+// utm_medium 区分点击来自哪个品牌位(shell.md「行为约束」)。
+const BRAND_HREF = "https://niceeval.com/?utm_source=report&utm_medium=brand";
+
+/** 屏幕阅读器可用、视觉上不占位:Radix Dialog 需要一个可访问标题,内容本身(身份 / verdict)
+ *  已经在 dialog 里可见,不需要再视觉重复一遍。 */
+const VISUALLY_HIDDEN: CSSProperties = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+};
 
 /**
  * LocalizedText 的确定回退(docs/feature/reports/library/shell.md):当前 locale → en →
@@ -28,19 +52,6 @@ export function localizedText(text: LocalizedText | undefined, locale: Locale):
   return undefined;
 }
 
-/** 初始 URL → 直接打开的 attempt:先认 #/attempt/@<locator> 深链,回退旧版 ?modal= 参数。 */
-function modalResultFromLocation(snapshots: ViewData["snapshots"]): ViewResult | null {
-  const locator = parseAttemptHash(location.hash);
-  if (locator) {
-    const found = resolveAttemptLocator(snapshots, locator);
-    if (found) return found;
-    // 定位不到(locator 不在、快照未加载、旧格式数据):不开空 modal,页面照常渲染。
-    console.warn(unresolvedAttemptWarning(location.hash));
-    return null;
-  }
-  return resultFromUrl(snapshots);
-}
-
 /**
  * 报告槽:React 19 对 dangerouslySetInnerHTML 只比较对象身份,身份一变就无条件重设
  * innerHTML(不再比对 __html 字符串值)。{__html} 必须 memo 住,否则 App 任意一次重渲染
@@ -64,7 +75,6 @@ function hashForTab(tab: Tab): string {
 }
 
 export function App({ data, reportPages }: { data: ViewData; reportPages: Record<string, ReportSlotHtml> }) {
-  const snapshots = data.snapshots ?? [];
   const [locale, setLocale] = useState<Locale>(() => detectLocale());
   const t = useMemo(() => makeTranslator(locale), [locale]);
 
@@ -75,11 +85,16 @@ export function App({ data, reportPages }: { data: ViewData; reportPages: Record
   const initialPageId = data.report?.initialPageId ?? pages[0]!.id;
 
   const [tab, setTab] = useState<Tab>(() => tabFromHash(location.hash, pages) ?? `page:${initialPageId}`);
-  const [modalResult, setModalResult] = useState<ViewResult | null>(() => modalResultFromLocation(snapshots));
-  // 当前 modal 的 hash 历史条目前面是否还有本页条目(本页 push 的 / 前进键回到的):
+
+  // attempt 详情弹窗:内容是独立文档(attempt/<locator>.html)fetch 回来的同一份 server-rendered
+  // 片段,不维护第二份客户端渲染(docs/feature/reports/view.md「静态导出」)。dialogLocator 为
+  // null 即关闭。
+  const [dialogLocator, setDialogLocator] = useState<string | null>(null);
+  const [dialogContent, setDialogContent] = useState<AttemptDocumentContent | null>(null);
+  // 当前 dialog 的 hash 历史条目前面是否还有本页条目(点击链接 push 的 / 前进键回到的):
   // true → UI 关闭走 history.back(),前进键还能重新打开;false(深链直接落地)→ 原地抹 hash,
   // 免得 back 把用户弹出站外。
-  const modalOwnsHistory = useRef(false);
+  const dialogOwnsHistory = useRef(false);
 
   useEffect(() => {
     setDocumentLocale(locale);
@@ -94,48 +109,88 @@ export function App({ data, reportPages }: { data: ViewData; reportPages: Record
     document.title = shellTitle;
   }, [shellTitle]);
 
-  const closeModal = useCallback(() => {
-    setModalResult(null);
-    if (modalOwnsHistory.current) {
-      modalOwnsHistory.current = false;
+  /** fetch 一个 locator 的独立文档、抠出两种语言内容并打开 dialog;定位不到就直说,不开空 dialog。 */
+  const openAttempt = useCallback(async (locator: string, ownsHistory: boolean) => {
+    try {
+      const res = await fetch(attemptHrefFor(locator));
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const content = parseAttemptDocument(await res.text());
+      if (!content) throw new Error("response is not a recognized attempt document");
+      dialogOwnsHistory.current = ownsHistory;
+      setDialogLocator(locator);
+      setDialogContent(content);
+    } catch (e) {
+      console.warn(
+        `[niceeval view] failed to open attempt "${locator}": ${e instanceof Error ? e.message : String(e)}`,
+      );
+    }
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    setDialogLocator(null);
+    setDialogContent(null);
+    if (dialogOwnsHistory.current) {
+      dialogOwnsHistory.current = false;
       history.back();
       return;
     }
     try {
-      // 深链直接落地 / 旧版 ?modal= 链接:没有可回退的本页条目,原地还原成无 modal 的 URL。
-      history.replaceState(null, "", location.pathname);
+      // 深链直接落地:没有可回退的本页条目,原地还原成无 hash 的 URL。
+      history.replaceState(null, "", location.pathname + location.search);
     } catch {
       // 还原 URL 失败不影响关闭。
     }
   }, []);
 
-  // 浏览器前进/后退、手改 hash、页内链接(attempt 深链与 `#/page/<id>` 页路由)统一从
-  // hashchange 分发:attempt hash 开证据室弹窗,页 hash 切当前 tab。
-  // attempt 详情路由对完整结果根解析(viewData.snapshots 全量通道):被位置参数 / --experiment
-  // 收窄滤掉的 attempt 仍能经深链打开,报告里的证据引用不因页面过滤失效。
+  // 初始 URL 已经是 #/attempt/@<locator> 深链:直接打开(不经 hashchange——那只在后续变化时触发)。
+  // 有效根即收窄后的结果(view.md「打开与收窄」):这份路由对完整结果根解析,不受当前统计口径
+  // (现刻水位)限制,深链因此对历史 attempt 同样可达;收窄之外的 locator 由这份文档自身
+  // 的宿主寻址语义处理(本地越过收窄解析,导出站按证据缺失呈现,不是这里的关注点)。
+  // 空依赖数组是有意的:只在挂载时检查一次初始 hash,openAttempt 本身是 useCallback(deps: [])
+  // 的稳定引用,不会随后续渲染变化。
+  useEffect(() => {
+    const locator = locatorFromHash(location.hash);
+    if (locator) void openAttempt(locator, false);
+  }, [openAttempt]);
+
+  // 浏览器前进/后退、手改 hash、页内链接点击(经下面的点击拦截转成 hash 变化)统一从
+  // hashchange 分发:attempt hash 开证据室 dialog,页 hash 切当前 tab。
   useEffect(() => {
     const onHashChange = () => {
-      const locator = parseAttemptHash(location.hash);
+      const locator = locatorFromHash(location.hash);
       if (locator) {
-        const found = resolveAttemptLocator(snapshots, locator);
-        if (!found) {
-          console.warn(unresolvedAttemptWarning(location.hash));
-          setModalResult(null);
-          return;
-        }
-        // 经浏览器导航打开:前一条历史仍是本页,UI 关闭可以安全 back()。
-        modalOwnsHistory.current = true;
-        setModalResult(found);
+        // 经浏览器导航打开:前一条历史仍是本页,dialog 关闭可以安全 back()。
+        void openAttempt(locator, true);
         return;
       }
-      modalOwnsHistory.current = false;
-      setModalResult(null);
+      setDialogLocator(null);
+      setDialogContent(null);
       const routed = tabFromHash(location.hash, pages);
       if (routed) setTab(routed);
     };
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
-  }, [snapshots, pages]);
+  }, [pages, openAttempt]);
+
+  // 拦截 attempt 文档链接(报告页里的 locator 引用,attemptHref 缺省产出的
+  // `attempt/<encodeURIComponent(locator)>.html`):点击时改写成 hash 路由,交给上面的
+  // hashchange 统一打开——无 JavaScript 时这些链接原样导航到独立文档,同样完整可读。
+  // 修饰键 / 非左键点击放行,让「新标签页打开」这类浏览器原生行为不受影响。
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      const anchor = target.closest("a[href]");
+      if (!anchor) return;
+      const locator = attemptLocatorFromHref(anchor.getAttribute("href") ?? "");
+      if (!locator) return;
+      e.preventDefault();
+      location.hash = hashForAttempt(locator);
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
 
   const selectTab = useCallback((value: Tab) => {
     setTab(value);
@@ -151,6 +206,14 @@ export function App({ data, reportPages }: { data: ViewData; reportPages: Record
   return (
     <Tabs value={tab} onValueChange={(v) => selectTab(v as Tab)}>
       <header className="topbar">
+        {/* 页头左端是恒定的 NiceEval 品牌字标(与 Powered by 行同族的产品品牌位),
+            报告定义不能覆盖或移除,点击外链官网;报告 title 的落点是页内 hero 与浏览器标题。
+            rel 用 noopener 而非 noreferrer:保留 Referer(默认策略只发 origin),官网统计由此
+            得知点击来自哪个报告站点;utm 只负责区分品牌位。 */}
+        <a className="brand" href={BRAND_HREF} target="_blank" rel="noopener">
+          <span className="mark" aria-hidden="true" />
+          <span>NiceEval</span>
+        </a>
         <TabsList aria-label={t("nav.label")}>
           {pages.map((page) => (
             <TabsTrigger key={`page:${page.id}`} value={`page:${page.id}`}>
@@ -190,7 +253,7 @@ export function App({ data, reportPages }: { data: ViewData; reportPages: Record
           <TabsContent key={`page:${page.id}`} value={`page:${page.id}`} id={`tab-page-${page.id}`}>
             {/* 报告槽:server 侧逐页渲染好的静态 HTML(含 <Style> 产物),按当前页与界面语言
                 摆放对应块;hero、品牌行、Scope 警告、批量修复 prompt 都是页内组件,壳不再渲染。
-                attempt 深链是普通 <a href="#/attempt/…">,经 hashchange 打开证据室弹窗。 */}
+                attempt 深链是普通 <a href="attempt/…html">,经上面的点击拦截打开 dialog。 */}
             <ReportSlot html={reportPages[page.id]?.[locale] || reportPages[page.id]?.en || ""} />
           </TabsContent>
         ))}
@@ -200,7 +263,28 @@ export function App({ data, reportPages }: { data: ViewData; reportPages: Record
           <span className="site-footer-text">{footerText}</span>
         </footer>
       ) : null}
-      {modalResult && <AttemptModal result={modalResult} onClose={closeModal} t={t} />}
+      {dialogLocator && dialogContent ? (
+        <Dialog open onOpenChange={(o) => { if (!o) closeDialog(); }}>
+          <DialogContent aria-describedby={undefined}>
+            {/* 屏幕阅读器用的可访问标题:视觉上隐藏,身份 / verdict 等实际内容已经在下面
+                fetch 回来的片段里可见,这里不重复渲染。 */}
+            <DialogTitle style={VISUALLY_HIDDEN}>{t("dialog.attemptTitle")}</DialogTitle>
+            <div className="flex min-w-0 shrink-0 items-center justify-end border-b border-line px-7 pb-3 pt-4">
+              <DialogClose
+                aria-label={t("action.close")}
+                className="grid h-7 w-7 shrink-0 place-items-center rounded-md border border-transparent text-sm text-muted transition-colors hover:border-line hover:bg-panel-2 hover:text-text"
+              >
+                x
+              </DialogClose>
+            </div>
+            {/* 与直接打开 attempt/<locator>.html 看到的是同一份 server-rendered 片段
+                (docs/engineering/unit-tests/reports/cases.md 第 207 行),不是客户端重新渲染。 */}
+            <div className="flex-1 overflow-y-auto px-7 pb-7 pt-2">
+              <ReportSlot html={dialogContent[locale] || dialogContent.en} />
+            </div>
+          </DialogContent>
+        </Dialog>
+      ) : null}
     </Tabs>
   );
 }

package/src/view/app/i18n.ts

@@ -1,61 +1,11 @@
 // view 前端 i18n:内核(插值/归一)在 src/i18n/core.ts;这里只注入
 // localStorage + navigator 的 locale 来源与 en 默认值。字典与 CLI 侧分开维护。
-// 词条只覆盖宿主机器(导航标签、attempt 详情弹窗):页面内容(hero、警告、列表、瀑布)
-// 是报告组件,文案在 niceeval/report 的组件词典里(src/report/locale.ts)。
+// 词条只覆盖宿主机器(导航标签、attempt dialog 的关闭按钮):页面内容(hero、警告、列表、瀑布、
+// attempt 详情)是报告组件,文案在 niceeval/report 的组件词典里(src/report/locale.ts)。
 
 import { interpolate, normalizeLocale, type Locale, type Vars } from "../../i18n/core.ts";
 
-export type MessageKey =
-  | "nav.label"
-  | "hero.title"
-  | "status.pass"
-  | "status.fail"
-  | "status.error"
-  | "status.skipped"
-  | "action.close"
-  | "action.copyPrompt"
-  | "action.copied"
-  | "trace.loading"
-  | "trace.loadFailed"
-  | "trace.timing"
-  | "trace.noSpans"
-  | "trace.total"
-  | "trace.spans"
-  | "trace.clickDetails"
-  | "trace.enableHint"
-  | "trace.enableHintLink"
-  | "trace.enableHintUrl"
-  | "transcript.noEvents"
-  | "transcript.user"
-  | "transcript.assistant"
-  | "transcript.thinking"
-  | "transcript.inputRequested"
-  | "transcript.awaitingInput"
-  | "transcript.contextCompacted"
-  | "transcript.skillLoaded"
-  | "transcript.rawEvent"
-  | "transcript.running"
-  | "transcript.input"
-  | "transcript.output"
-  | "transcript.empty"
-  | "code.otherAssertions"
-  | "code.noReply"
-  | "code.reply"
-  | "code.hide"
-  | "code.checks"
-  | "code.conversation"
-  | "code.noSource"
-  | "code.sourceUnavailable"
-  | "attempt.timing"
-  | "attempt.teardown"
-  | "attempt.diagnostics"
-  | "assert.pass"
-  | "assert.fail"
-  | "assert.passedCollapsed"
-  | "assert.unavailable"
-  | "assert.optional"
-  | "assert.soft"
-  | "assert.evidence";
+export type MessageKey = "nav.label" | "hero.title" | "action.close" | "dialog.attemptTitle";
 
 type Dictionary = Record<MessageKey, string>;
 
@@ -65,106 +15,16 @@ const dictionaries: Record<Locale, Dictionary> = {
     // 标题回退链终点的内置文案(shell.md:「Eval 运行结果 / Eval Results」);
     // 正常路径 server 侧已走完回退链,这里只兜旧数据 / 缺声明。
     "hero.title": "Eval Results",
-    "status.pass": "pass",
-    "status.fail": "fail",
-    "status.error": "error",
-    "status.skipped": "skipped",
     "action.close": "Close",
-    "action.copyPrompt": "Copy fix prompt",
-    "action.copied": "Copied",
-    "trace.loading": "loading...",
-    "trace.loadFailed": "load failed (static report has no server - use niceeval view):",
-    "trace.timing": "timing trace",
-    "trace.noSpans": "no spans",
-    "trace.total": "total",
-    "trace.spans": "spans",
-    "trace.clickDetails": "click a row for details",
-    "trace.enableHint": "No trace for this run. Wire up OTel to get a call waterfall — see the ",
-    "trace.enableHintLink": "OTel guide",
-    "trace.enableHintUrl": "https://niceeval.com/docs/guides/connect-otel",
-    "transcript.noEvents": "no events",
-    "transcript.user": "user",
-    "transcript.assistant": "assistant",
-    "transcript.thinking": "thinking",
-    "transcript.inputRequested": "input requested",
-    "transcript.awaitingInput": "(awaiting input)",
-    "transcript.contextCompacted": "context compacted",
-    "transcript.skillLoaded": "skill loaded",
-    "transcript.rawEvent": "unrecognized event, shown as-is",
-    "transcript.running": "running...",
-    "transcript.input": "input",
-    "transcript.output": "output",
-    "transcript.empty": "(empty)",
-    "code.otherAssertions": "other assertions",
-    "code.noReply": "(no reply)",
-    "code.reply": "reply",
-    "code.hide": "hide",
-    "code.checks": "checks",
-    "code.conversation": "conversation",
-    "code.noSource": "Source was not captured. This run may predate source-loc or the source may be unavailable. Re-run this eval to see the code view.",
-    "code.sourceUnavailable": "Source was captured for this run, but its artifact files are missing from this deployment. Re-export with `niceeval view --out <dir>` (directory mode bundles artifacts), or open the results locally with `niceeval view`.",
-    "attempt.timing": "timing",
-    "attempt.teardown": "teardown (not counted in total)",
-    "attempt.diagnostics": "diagnostics",
-    "assert.pass": "pass",
-    "assert.fail": "fail",
-    "assert.passedCollapsed": "{{count}} passed",
-    "assert.unavailable": "unavailable",
-    "assert.optional": "optional",
-    "assert.soft": "soft",
-    "assert.evidence": "What was checked",
+    // 屏幕阅读器专用(Radix Dialog 的可访问标题),视觉上不出现——内容本身的身份 / verdict
+    // 已经在 dialog 里可见。
+    "dialog.attemptTitle": "Attempt details",
   },
   "zh-CN": {
     "nav.label": "报告",
     "hero.title": "Eval 运行结果",
-    "status.pass": "通过",
-    "status.fail": "失败",
-    "status.error": "错误",
-    "status.skipped": "跳过",
     "action.close": "关闭",
-    "action.copyPrompt": "复制修复 Prompt",
-    "action.copied": "已复制",
-    "trace.loading": "加载中...",
-    "trace.loadFailed": "加载失败(静态报告没有服务端 - 请用 niceeval view):",
-    "trace.timing": "耗时追踪",
-    "trace.noSpans": "没有 span",
-    "trace.total": "总计",
-    "trace.spans": "spans",
-    "trace.clickDetails": "点击行查看详情",
-    "trace.enableHint": "这次运行没有 trace。接入 OTel 才有调用瀑布图——看",
-    "trace.enableHintLink": "OTel 接入指南",
-    "trace.enableHintUrl": "https://niceeval.com/docs/zh/how-to/connect-otel",
-    "transcript.noEvents": "没有事件",
-    "transcript.user": "user",
-    "transcript.assistant": "assistant",
-    "transcript.thinking": "thinking",
-    "transcript.inputRequested": "请求输入",
-    "transcript.awaitingInput": "(等待输入)",
-    "transcript.contextCompacted": "上下文已压缩",
-    "transcript.skillLoaded": "已加载 Skill",
-    "transcript.rawEvent": "未识别事件,原样展示",
-    "transcript.running": "运行中...",
-    "transcript.input": "输入",
-    "transcript.output": "输出",
-    "transcript.empty": "(空)",
-    "code.otherAssertions": "其它断言",
-    "code.noReply": "(无回复)",
-    "code.reply": "回复",
-    "code.hide": "收起",
-    "code.checks": "检查",
-    "code.conversation": "会话",
-    "code.noSource": "源码未捕获。此 run 可能早于 source-loc，或源码不可读。重跑此 eval 即可看到代码视图。",
-    "code.sourceUnavailable": "此 run 捕获过源码，但当前部署里缺少它的 artifact 文件。用 `niceeval view --out <目录>` 重新导出（目录模式会带上 artifact），或在本地 `niceeval view` 查看。",
-    "attempt.timing": "耗时",
-    "attempt.teardown": "收尾(不计入总耗时)",
-    "attempt.diagnostics": "诊断",
-    "assert.pass": "通过",
-    "assert.fail": "失败",
-    "assert.passedCollapsed": "{{count}} 条通过",
-    "assert.unavailable": "评不了",
-    "assert.optional": "可缺席",
-    "assert.soft": "soft",
-    "assert.evidence": "实际被检查的内容",
+    "dialog.attemptTitle": "Attempt 详情",
   },
 };
 

package/src/view/app/lib/attempt-dialog.test.ts

@@ -0,0 +1,65 @@
+// cases: docs/engineering/unit-tests/reports/cases.md
+// 第 207 行:增强脚本拦截 locator 链接后,dialog 内容与直接打开该文档的内容是同一份
+// server-rendered 字节/DOM 片段。
+import { describe, expect, it } from "vitest";
+import { attemptHrefFor, attemptLocatorFromHref, hashForAttempt, locatorFromHash, parseAttemptDocument } from "./attempt-dialog.ts";
+
+describe("attemptHrefFor / attemptLocatorFromHref", () => {
+  it("互为逆运算(编码/解码往返)", () => {
+    const locator = "@1kijjdij";
+    const href = attemptHrefFor(locator);
+    expect(href).toBe("attempt/%401kijjdij.html");
+    expect(attemptLocatorFromHref(href)).toBe(locator);
+  });
+
+  it("不是 attempt 文档链接或形状不对时返回 undefined", () => {
+    expect(attemptLocatorFromHref("index.html")).toBeUndefined();
+    expect(attemptLocatorFromHref("artifact/e/run/a0/events.json")).toBeUndefined();
+    expect(attemptLocatorFromHref("attempt/not-a-locator.html")).toBeUndefined();
+  });
+});
+
+describe("hashForAttempt / locatorFromHash", () => {
+  it("互为逆运算", () => {
+    expect(locatorFromHash(hashForAttempt("@abc123"))).toBe("@abc123");
+  });
+
+  it("非 attempt 路由或形状不对返回 undefined", () => {
+    expect(locatorFromHash("#/page/report")).toBeUndefined();
+    expect(locatorFromHash("#/attempt/not-valid")).toBeUndefined();
+    expect(locatorFromHash("")).toBeUndefined();
+  });
+});
+
+describe("parseAttemptDocument", () => {
+  function fakeDocument(en: string, zh: string): string {
+    return [
+      "<!doctype html>",
+      "<html><head></head><body>",
+      `<div data-nre-locale="en">${en}</div>`,
+      `<div data-nre-locale="zh-CN" hidden>${zh}</div>`,
+      "<script>/* locale swap */</script>",
+      "</body></html>",
+    ].join("\n");
+  }
+
+  it("取出两种语言的内容片段,不含包裹的 div 标签本身", () => {
+    const html = fakeDocument("<p>hello</p>", "<p>你好</p>");
+    expect(parseAttemptDocument(html)).toEqual({ en: "<p>hello</p>", "zh-CN": "<p>你好</p>" });
+  });
+
+  it("内容里嵌套的 <div> 不会打断切分(现实里的 AttemptDetail 输出全是嵌套 div)", () => {
+    const html = fakeDocument(
+      '<div class="nre nre-col"><div class="nre-attempt-summary">stuff</div></div>',
+      '<div class="nre nre-col"><div class="nre-attempt-summary">东西</div></div>',
+    );
+    expect(parseAttemptDocument(html)).toEqual({
+      en: '<div class="nre nre-col"><div class="nre-attempt-summary">stuff</div></div>',
+      "zh-CN": '<div class="nre nre-col"><div class="nre-attempt-summary">东西</div></div>',
+    });
+  });
+
+  it("不是这份渲染器产出的文档(缺少标记)返回 null,不开空 dialog", () => {
+    expect(parseAttemptDocument("<html><body>not an attempt document</body></html>")).toBeNull();
+  });
+});

package/src/view/app/lib/attempt-dialog.ts

@@ -0,0 +1,69 @@
+// 独立 attempt 文档(attempt/<locator>.html,site.ts 的 renderAttemptDocument)的客户端消费面:
+// 拦截同源链接、按 locator 拼 href、把 fetch 回来的文档两种语言内容抠出来塞进 dialog——
+// 内容片段与直接打开该文档看到的完全一致,不维护第二份客户端渲染(view.md「静态导出」)。
+// 纯字符串切分,不用 DOMParser:结构由同一个 site.ts 的固定模板产出,不需要通用 HTML 解析。
+
+const EN_MARK = '<div data-nre-locale="en">';
+const ZH_MARK = '<div data-nre-locale="zh-CN"';
+const SCRIPT_MARK = "<script>";
+
+export interface AttemptDocumentContent {
+  en: string;
+  "zh-CN": string;
+}
+
+/** attempt/<locator>.html 链接的形状(相对于当前文档的相对 href,与 encodeURIComponent(locator) 对应)。 */
+const ATTEMPT_HREF_PATTERN = /^attempt\/(.+)\.html$/;
+
+/** locator 串的最小形状:`@` + 至少一个 base36 字符——与 site.ts DEFAULT_ATTEMPT_HREF 编码前的原始值同形。 */
+const LOCATOR_SHAPE = /^@[0-9a-z]+$/;
+
+/** 相对 href → 解码后的 locator;不是 attempt 文档链接或 locator 形状不对都返回 undefined。 */
+export function attemptLocatorFromHref(href: string): string | undefined {
+  const match = ATTEMPT_HREF_PATTERN.exec(href);
+  if (!match) return undefined;
+  const locator = decodeURIComponent(match[1]!);
+  return LOCATOR_SHAPE.test(locator) ? locator : undefined;
+}
+
+/** locator → 该文档的根相对 href(与 report/web.ts DEFAULT_ATTEMPT_HREF 同一编码规则)。 */
+export function attemptHrefFor(locator: string): string {
+  return `attempt/${encodeURIComponent(locator)}.html`;
+}
+
+const ATTEMPT_HASH_PREFIX = "#/attempt/";
+
+/** hash → locator;不是这条路由或形状不对(旧格式深链、手打错的 hash)都返回 undefined。 */
+export function locatorFromHash(hash: string): string | undefined {
+  if (!hash.startsWith(ATTEMPT_HASH_PREFIX)) return undefined;
+  const locator = hash.slice(ATTEMPT_HASH_PREFIX.length);
+  return LOCATOR_SHAPE.test(locator) ? locator : undefined;
+}
+
+export function hashForAttempt(locator: string): string {
+  return `${ATTEMPT_HASH_PREFIX}${locator}`;
+}
+
+/**
+ * 从 attempt 文档的响应文本里取出两种语言的内容片段。两个 locale 块紧邻、且两者之间/之后
+ * 不会出现这里搜索的标记字符串(site.ts 的固定模板保证),纯字符串切分足够,不需要 DOMParser。
+ * 形状不对(不是这份渲染器产出的文档)返回 null,调用方不开空 dialog。
+ */
+export function parseAttemptDocument(html: string): AttemptDocumentContent | null {
+  const enStart = html.indexOf(EN_MARK);
+  if (enStart === -1) return null;
+  const afterEnOpen = html.slice(enStart + EN_MARK.length);
+  const zhMarkIdx = afterEnOpen.indexOf(ZH_MARK);
+  if (zhMarkIdx === -1) return null;
+  const en = afterEnOpen.slice(0, zhMarkIdx).replace(/<\/div>\s*$/, "");
+
+  const afterZhMark = afterEnOpen.slice(zhMarkIdx);
+  const zhTagEnd = afterZhMark.indexOf(">");
+  if (zhTagEnd === -1) return null;
+  const afterZhOpen = afterZhMark.slice(zhTagEnd + 1);
+  const scriptIdx = afterZhOpen.indexOf(SCRIPT_MARK);
+  if (scriptIdx === -1) return null;
+  const zh = afterZhOpen.slice(0, scriptIdx).replace(/<\/div>\s*$/, "");
+
+  return { en, "zh-CN": zh };
+}

package/src/view/app/main.tsx

@@ -6,7 +6,6 @@ import "../styles.css";
 // 没有烘焙数据(比如直接打开裸产物)时的空页面兜底。
 const emptyViewData: ViewData = {
   composedRuns: 0,
-  snapshots: [],
 };
 
 const initialData: ViewData = window.__NICEEVAL_VIEW_DATA__ ?? emptyViewData;