niceeval 0.9.1 → 0.10.2

package/src/report/built-in/index.tsx

@@ -3,8 +3,8 @@
 // (docs/feature/reports/library/built-in.md)。新增内建视图 = 新文件 + 新具名导出,
 // 不需要注册表,也不改变装载管线。
 
-import { standard } from "./standard.tsx";
+import { standard, standardAttemptPage } from "./standard.tsx";
 
-export { standard };
+export { standard, standardAttemptPage };
 
 export default standard;

package/src/report/built-in/standard.tsx

@@ -1,14 +1,17 @@
-// standard —— 内建视图之一:报告 / Attempts / 追踪三页的通用结果站,没有任何私有钩子
-// (docs/feature/reports/library/built-in.md)。裸 `niceeval show` 与 `niceeval view`
-// 装载的就是它:一份普通 defineReport,与用户的 --report 文件同层、走同一条
+// standard —— 内建视图之一:报告 / Attempts / 追踪三页的通用结果站 + 一张隐藏的 attempt
+// 详情页,没有任何私有钩子(docs/feature/reports/library/built-in.md)。裸 `niceeval show` 与
+// `niceeval view` 装载的就是它:一份普通 defineReport,与用户的 --report 文件同层、走同一条
 // 装载 → resolve → validate → render 管线。「builtin」不是装载逻辑里的类别,
 // 只是宿主默认拿哪个值的事实;用户报告经 defineReport({ extends: standard, … }) 整站复用。
 //
-// 三页站点:report(Hero + 警告 + 批量修复 prompt + 实验对比)、attempts(带过滤的
-// attempt 全列表)、traces(执行瀑布)。裸宿主导航上能看到的一切内容都在这份定义里;
-// 宿主保留的只有机器(docs/feature/reports/architecture.md「宿主保留的只有机器」)。
+// 四页:report(Hero + 警告 + 批量修复 prompt + 实验对比)、attempts(带过滤的 attempt
+// 全列表)、traces(执行瀑布)三页进导航;第四张 standardAttemptPage 以 locator 为输入、
+// 不进导航,locator 深链打开它,content 就是公开的 AttemptDetail 组合组件。裸宿主导航上能
+// 看到的一切内容都在这份定义里;宿主保留的只有机器(docs/feature/reports/architecture.md
+// 「宿主保留的只有机器」)。
 
 import {
+  AttemptDetail,
   AttemptList,
   Col,
   CopyFixPrompt,
@@ -19,6 +22,14 @@ import {
   defineReport,
 } from "../index.ts";
 
+export const standardAttemptPage = {
+  id: "attempt",
+  title: "Attempt",
+  input: "attempt",
+  navigation: false,
+  content: <AttemptDetail />,
+} as const;
+
 export const standard = defineReport({
   pages: [
     {
@@ -55,5 +66,6 @@ export const standard = defineReport({
         </Col>
       ),
     },
+    standardAttemptPage,
   ],
 });

package/src/report/components/attempt-detail/AttemptAssertions.tsx

@@ -0,0 +1,67 @@
+// AttemptAssertions:全量 assertion,非 passed 默认展开、passed 按 group 折叠计数。
+// 没有 assertion 时零输出(docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptAssertionsData } from "../../model/types.ts";
+import type { AssertionResult } from "../../../types.ts";
+import { cx } from "../shared.ts";
+
+function assertTone(a: AssertionResult): "good" | "warn" | "bad" | "na" {
+  if (a.outcome === "unavailable") return "na";
+  if (a.outcome === "passed") return "good";
+  return a.severity === "soft" ? "warn" : "bad";
+}
+
+function AssertionRow({ a }: { a: AssertionResult }): ReactElement {
+  return (
+    <details className="nre-assertion-row" open>
+      <summary>
+        <span className={`nre-assertion-badge nre-tone-${assertTone(a)}`}>
+          {a.outcome === "unavailable" ? "unavailable" : a.outcome}
+        </span>
+        <span className="nre-assertion-name">
+          {a.groupPath?.length ? `${a.groupPath.join(" > ")} · ` : ""}
+          {a.name}
+        </span>
+        {a.detail && a.detail !== a.name ? <span className="nre-assertion-detail">{a.detail}</span> : null}
+      </summary>
+      <div className="nre-assertion-body">
+        {a.outcome === "unavailable" ? <div>{a.reason}</div> : null}
+        {a.outcome !== "unavailable" && a.expected !== undefined ? <div>expected: {a.expected}</div> : null}
+        {a.outcome !== "unavailable" && a.received !== undefined ? <div>received: {a.received}</div> : null}
+      </div>
+    </details>
+  );
+}
+
+export function AttemptAssertions({
+  data,
+  className,
+}: {
+  data: AttemptAssertionsData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <div className={cx("nre", "nre-attempt-assertions", className)}>
+      {data.attention.map((a, i) => (
+        <AssertionRow key={i} a={a} />
+      ))}
+      {data.passedGroups.length > 0 ? (
+        <details className="nre-assertions-passed">
+          <summary>passed · {data.passedGroups.reduce((n, g) => n + g.items.length, 0)}</summary>
+          {data.passedGroups.map(({ group, items }) => (
+            <details key={group || "·"} className="nre-assertions-passed-group">
+              <summary>
+                {group || "—"} · {items.length}
+              </summary>
+              {items.map((a, i) => (
+                <AssertionRow key={i} a={a} />
+              ))}
+            </details>
+          ))}
+        </details>
+      ) : null}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptConversation.tsx

@@ -0,0 +1,158 @@
+// AttemptConversation:标准事件流按轮组织的完整分轮事件卡。没有 events 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement, ReactNode } from "react";
+import type { AttemptConversationData, AttemptConversationReply, AttemptConversationRound } from "../../model/types.ts";
+import type { JsonValue, ToolName } from "../../../types.ts";
+import { cx } from "../shared.ts";
+
+const TOOL_VERB: Partial<Record<ToolName, string>> = {
+  shell: "Bash",
+  file_read: "Read",
+  file_write: "Write",
+  file_edit: "Edit",
+  web_fetch: "Fetch",
+  web_search: "Search",
+  glob: "Glob",
+  grep: "Grep",
+  list_dir: "List",
+  agent_task: "Task",
+};
+
+function compact(value: JsonValue | undefined, max = 140): string {
+  if (value === undefined || value === null) return "";
+  const text = typeof value === "string" ? value : JSON.stringify(value);
+  const oneLine = text.replace(/\s+/g, " ").trim();
+  return oneLine.length > max ? `${oneLine.slice(0, max)}…` : oneLine;
+}
+
+function toolPrimaryArg(input: JsonValue): string {
+  if (typeof input === "string") return compact(input, 80);
+  if (input === null || Array.isArray(input) || typeof input !== "object") return "";
+  for (const key of ["command", "cmd", "path", "file", "file_path", "pattern", "query", "url", "prompt", "description"]) {
+    const value = input[key];
+    if (typeof value === "string" && value) return compact(value, 80);
+    if (key === "command" && Array.isArray(value)) return compact(value.filter((item) => typeof item === "string").join(" "), 80);
+  }
+  return compact(input, 80);
+}
+
+function ReplyRow({ reply }: { reply: AttemptConversationReply }): ReactNode {
+  switch (reply.kind) {
+    case "assistant":
+      return (
+        <div className="nre-conv-assistant">
+          <span className="nre-conv-role">assistant</span>
+          <div className="nre-conv-text">{reply.text}</div>
+        </div>
+      );
+    case "user":
+      return (
+        <div className="nre-conv-user">
+          <span className="nre-conv-role">user</span>
+          <div className="nre-conv-text">{reply.text}</div>
+        </div>
+      );
+    case "thinking":
+      return (
+        <details className="nre-conv-thinking">
+          <summary>thinking</summary>
+          <div className="nre-conv-text">{reply.text}</div>
+        </details>
+      );
+    case "error":
+      return <div className="nre-conv-error">! {reply.text}</div>;
+    case "skill":
+      return (
+        <div className="nre-conv-skill">
+          <span className="nre-conv-role">skill loaded</span> {reply.skill}
+        </div>
+      );
+    case "tool":
+      const verb = (reply.tool ? TOOL_VERB[reply.tool] : undefined) ?? reply.name;
+      const arg = toolPrimaryArg(reply.input);
+      const preview = compact(reply.output);
+      return (
+        <details className="nre-conv-tool">
+          <summary>
+            <span className={cx("nre-conv-tool-dot", reply.status ? `nre-conv-tool-${reply.status}` : "nre-conv-tool-pending")} />
+            <span className="nre-conv-tool-name" title={arg ? `${verb}(${arg})` : verb}>
+              {arg ? `${verb}(${arg})` : verb}
+            </span>
+            <span className="nre-conv-tool-preview">
+              {reply.status ?? "pending"}
+              {preview ? ` · ${preview}` : ""}
+            </span>
+          </summary>
+          <pre className="nre-conv-tool-io">{JSON.stringify(reply.input, null, 2)}</pre>
+          {reply.output !== undefined ? <pre className="nre-conv-tool-io">{JSON.stringify(reply.output, null, 2)}</pre> : null}
+        </details>
+      );
+    case "subagent":
+      return (
+        <details className="nre-conv-subagent">
+          <summary>
+            subagent {reply.name}
+            {reply.status ? ` · ${reply.status}` : ""}
+          </summary>
+          {reply.output !== undefined ? <pre className="nre-conv-tool-io">{JSON.stringify(reply.output, null, 2)}</pre> : null}
+        </details>
+      );
+    case "input":
+      return <div className="nre-conv-input">input requested{reply.request.prompt ? `: ${reply.request.prompt}` : ""}</div>;
+    case "compaction":
+      return <div className="nre-conv-compaction">compaction{reply.reason ? `: ${reply.reason}` : ""}</div>;
+    case "raw":
+      return (
+        <details className="nre-conv-raw">
+          <summary>unrecognized event</summary>
+          <pre className="nre-conv-tool-io">{JSON.stringify(reply.raw, null, 2)}</pre>
+        </details>
+      );
+  }
+}
+
+/** AttemptSource 复用同一份回复 renderer，把一轮执行挂回对应的 send 源码行。 */
+export function ConversationReplies({ replies }: { replies: AttemptConversationReply[] }): ReactElement {
+  return (
+    <div className="nre-conv-replies">
+      {replies.map((reply, i) => (
+        <ReplyRow key={i} reply={reply} />
+      ))}
+    </div>
+  );
+}
+
+function RoundCard({ round, index }: { round: AttemptConversationRound; index: number }): ReactElement {
+  return (
+    <div className="nre-conv-round">
+      <div className="nre-conv-round-head">
+        round {index + 1}
+        {round.loc ? (
+          <span className="nre-conv-round-loc" title={`${round.loc.file}:${round.loc.line}`}>
+            {round.loc.file.split("/").pop()}:{round.loc.line}
+          </span>
+        ) : null}
+      </div>
+      {round.sentText ? <div className="nre-conv-sent">{round.sentText}</div> : null}
+      <ConversationReplies replies={round.replies} />
+    </div>
+  );
+}
+
+export function AttemptConversation({
+  data,
+  className,
+}: {
+  data: AttemptConversationData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <div className={cx("nre", "nre-attempt-conversation", className)}>
+      {data.rounds.map((round, i) => (
+        <RoundCard key={i} round={round} index={i} />
+      ))}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptDiagnostics.tsx

@@ -0,0 +1,38 @@
+// AttemptDiagnostics:lifecycle 分组的 diagnostics。没有 diagnostics 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptDiagnosticsData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptDiagnostics({
+  data,
+  className,
+}: {
+  data: AttemptDiagnosticsData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <div className={cx("nre", "nre-attempt-diagnostics", className)}>
+      {data.groups.map(({ phase, items }) => (
+        <div key={phase} className="nre-diagnostics-group">
+          <div className="nre-diagnostics-phase">{phase}</div>
+          <ul>
+            {items.map((d, i) => (
+              <li key={i} className={`nre-diagnostics-item nre-tone-${d.level === "error" ? "bad" : "warn"}`}>
+                <span className="nre-diagnostics-meta">
+                  {d.level} · {d.code}
+                </span>
+                <div>
+                  {d.message}
+                  {d.count && d.count > 1 ? ` (${d.count} occurrences)` : ""}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptDiff.tsx

@@ -0,0 +1,35 @@
+// AttemptDiff:generated / modified / deleted 文件摘要与展开的行变化统计。没有变更时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement } from "react";
+import type { AttemptDiffData, AttemptDiffFileEntry } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+const NET_LABEL: Record<AttemptDiffFileEntry["net"], string> = { added: "generated", modified: "modified", deleted: "deleted" };
+
+function FileRow({ file }: { file: AttemptDiffFileEntry }): ReactElement {
+  return (
+    <li className={cx("nre-diff-file", `nre-diff-${file.net}`)}>
+      <span className="nre-diff-net">{NET_LABEL[file.net]}</span>
+      <span className="nre-diff-path">{file.path}</span>
+      {file.binary ? (
+        <span className="nre-diff-lines">binary</span>
+      ) : (
+        <span className="nre-diff-lines">
+          +{file.lines.added} / -{file.lines.deleted}
+        </span>
+      )}
+    </li>
+  );
+}
+
+export function AttemptDiff({ data, className }: { data: AttemptDiffData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <ul className={cx("nre", "nre-attempt-diff", className)}>
+      {data.files.map((f) => (
+        <FileRow key={f.path} file={f} />
+      ))}
+    </ul>
+  );
+}

package/src/report/components/attempt-detail/AttemptError.tsx

@@ -0,0 +1,31 @@
+// AttemptError:结构化 error 明细。没有 error 时零输出(docs/feature/reports/library/attempt-detail.md)。
+// 字段标签是低层技术标识,与终端 `niceeval show` 一样保持英文,不进 view 的 i18n 词典。
+
+import type { ReactElement } from "react";
+import { Fragment } from "react";
+import type { AttemptErrorData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptError({ data, className }: { data: AttemptErrorData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  const rows: [string, string][] = [
+    ["phase", data.phase],
+    ["code", data.code],
+    ["message", data.message],
+  ];
+  if (data.cause) rows.push(["cause", data.cause.name ? `${data.cause.name} · ${data.cause.message}` : data.cause.message]);
+  const stack = data.stack?.replace(/\n+$/, "") ?? "";
+  return (
+    <div className={cx("nre", "nre-attempt-error", className)}>
+      <dl className="nre-attempt-error-fields">
+        {rows.map(([k, v]) => (
+          <Fragment key={k}>
+            <dt>{k}</dt>
+            <dd>{v}</dd>
+          </Fragment>
+        ))}
+      </dl>
+      {stack ? <pre className="nre-attempt-error-stack">{stack}</pre> : null}
+    </div>
+  );
+}

package/src/report/components/attempt-detail/AttemptFixPrompt.tsx

@@ -0,0 +1,26 @@
+// AttemptFixPrompt:单条 attempt 的复制修复 prompt。passed 或没有可操作失败时零输出
+// (docs/feature/reports/library/attempt-detail.md)。与 CopyFixPrompt 同一套增强约定:
+// prompt 在 resolve 阶段算好、烘进静态 HTML,复制按钮是 enhance.js 的增强行为。
+
+import type { ReactElement } from "react";
+import type { AttemptFixPromptData } from "../../model/types.ts";
+import { cx } from "../shared.ts";
+
+export function AttemptFixPrompt({
+  data,
+  className,
+}: {
+  data: AttemptFixPromptData | null;
+  className?: string;
+}): ReactElement | null {
+  if (data === null) return null;
+  return (
+    <details className={cx("nre", "nre-attempt-fix-prompt", className)}>
+      <summary className="nre-attempt-fix-prompt-summary">Fix prompt</summary>
+      <button type="button" className="nre-attempt-fix-prompt-copy" data-nre-copy={data.prompt}>
+        Copy fix prompt
+      </button>
+      <pre className="nre-attempt-fix-prompt-text">{data.prompt}</pre>
+    </details>
+  );
+}

package/src/report/components/attempt-detail/AttemptSource.tsx

@@ -0,0 +1,224 @@
+// AttemptSource:GitHub diff 式带标注 eval 源码。send / assertion 行按状态着色，点击
+// 原生 details 在调用点展开完整回复与 assertion 细节。没有 source 时零输出
+// (docs/feature/reports/library/attempt-detail.md)。
+
+import type { ReactElement, ReactNode } from "react";
+import type { AttemptSourceData, AttemptSourceLineData, AttemptSourceTurn } from "../../model/types.ts";
+import type { AssertionResult } from "../../../types.ts";
+import { cx } from "../shared.ts";
+import { ConversationReplies } from "./AttemptConversation.tsx";
+
+const TS_HL_RE =
+  /(\/\/[^\n]*)|(\/\*[^]*?\*\/)|(`(?:\\.|[^`\\])*`|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|\b(import|from|export|default|const|let|var|async|await|function|return|if|else|for|of|in|new|class|extends|typeof|void|true|false|null|undefined)\b|\b(\d[\d_.]*)\b|([A-Za-z_$][\w$]*)(?=\s*\()/g;
+
+/** 逐行零依赖 TS 高亮；token class 是稳定的 web 展示语义，不改源码文本。 */
+function highlightTs(line: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let last = 0;
+  let i = 0;
+  let match: RegExpExecArray | null;
+  TS_HL_RE.lastIndex = 0;
+  while ((match = TS_HL_RE.exec(line))) {
+    if (match.index > last) out.push(line.slice(last, match.index));
+    const tokenClass =
+      match[1] || match[2] ? "tok-comment" : match[3] ? "tok-str" : match[4] ? "tok-kw" : match[5] ? "tok-num" : "tok-fn";
+    out.push(
+      <span key={i++} className={tokenClass}>
+        {match[0]}
+      </span>,
+    );
+    last = match.index + match[0].length;
+    if (match[0].length === 0) TS_HL_RE.lastIndex++;
+  }
+  if (last < line.length) out.push(line.slice(last));
+  return out;
+}
+
+function assertTone(a: AssertionResult): "good" | "warn" | "bad" | "na" {
+  if (a.outcome === "unavailable") return "na";
+  if (a.outcome === "passed") return "good";
+  return a.severity === "soft" ? "warn" : "bad";
+}
+
+function lineTone(line: AttemptSourceLineData): "good" | "warn" | "bad" | "na" | undefined {
+  if (line.assertions.length === 0) return undefined;
+  if (line.assertions.some((a) => assertTone(a) === "bad")) return "bad";
+  if (line.assertions.some((a) => assertTone(a) === "warn")) return "warn";
+  if (line.assertions.some((a) => assertTone(a) === "na")) return "na";
+  return "good";
+}
+
+function formatDuration(ms: number): string {
+  return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`;
+}
+
+function thresholdScores(assertions: AssertionResult[]): string[] {
+  const scores: string[] = [];
+  for (const assertion of assertions) {
+    if (assertion.outcome !== "unavailable" && assertion.threshold !== undefined) {
+      scores.push(`${assertion.score}/${assertion.threshold}`);
+    }
+  }
+  return scores;
+}
+
+/** 行号位标记(与产品站示例卡同语言:图标顶替行号,不加独立状态列);内联 SVG,零图标依赖。 */
+const MARK_ICONS: Record<"send" | "good" | "bad" | "warn" | "na", ReactElement> = {
+  send: <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" />,
+  good: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="m9 12 2 2 4-4" />
+    </>
+  ),
+  bad: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="m15 9-6 6" />
+      <path d="m9 9 6 6" />
+    </>
+  ),
+  warn: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" x2="12" y1="8" y2="12" />
+      <line x1="12" x2="12.01" y1="16" y2="16" />
+    </>
+  ),
+  na: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+      <path d="M12 17h.01" />
+    </>
+  ),
+};
+
+function LineNo({ line, tone, send }: { line: number; tone: ReturnType<typeof lineTone>; send: boolean }): ReactElement {
+  const kind = tone ?? (send ? "send" : null);
+  if (kind === null) return <span className="nre-source-ln">{line}</span>;
+  const label = kind === "bad" ? "failed" : kind === "warn" ? "soft failed" : kind === "good" ? "passed" : kind === "na" ? "unavailable" : "send";
+  return (
+    <span className="nre-source-ln nre-source-ln-mark" role="img" aria-label={label} title={label}>
+      <svg viewBox="0 0 24 24" aria-hidden="true">{MARK_ICONS[kind]}</svg>
+    </span>
+  );
+}
+
+function LineSummary({ line, tone }: { line: AttemptSourceLineData; tone: ReturnType<typeof lineTone> }): ReactElement {
+  const interactive = line.assertions.length > 0 || line.sends.length > 0 || line.turns.length > 0;
+  const scores = thresholdScores(line.assertions);
+  return (
+    <span className="nre-source-line-summary">
+      <LineNo line={line.line} tone={tone} send={line.sends.length > 0 || line.turns.length > 0} />
+      <code className="nre-source-text">{highlightTs(line.text)}</code>
+      <span className="nre-source-line-meta">
+        {scores.length > 0 ? <span className="nre-source-score-badge">{scores.join(", ")}</span> : null}
+        {interactive ? <span className="nre-source-chevron">›</span> : null}
+      </span>
+    </span>
+  );
+}
+
+function TurnDetail({ turn, showMeta = false, showSent = false }: { turn: AttemptSourceTurn; showMeta?: boolean; showSent?: boolean }): ReactElement {
+  return (
+    <div className={cx("nre-source-turn", `nre-source-turn-${turn.status}`)}>
+      {showMeta ? (
+        <div className="nre-source-turn-head">
+          <span>{turn.label}</span>
+          <span>{turn.status}</span>
+          {turn.durationMs === undefined ? null : <span>{formatDuration(turn.durationMs)}</span>}
+        </div>
+      ) : null}
+      {showSent && turn.sentText ? <div className="nre-conv-sent">{turn.sentText}</div> : null}
+      <ConversationReplies replies={turn.replies} />
+    </div>
+  );
+}
+
+function AssertionDetail({ assertion }: { assertion: AssertionResult }): ReactElement {
+  return (
+    <div className={`nre-assertion-row nre-tone-${assertTone(assertion)}`}>
+      <div className="nre-source-assertion-head">
+        <span className="nre-assertion-badge">{assertion.outcome}</span>
+        <span className="nre-assertion-name">{assertion.name}</span>
+        {assertion.outcome !== "unavailable" ? <span className="nre-source-assertion-score">{assertion.score}</span> : null}
+      </div>
+      {assertion.detail ? <div className="nre-assertion-detail">{assertion.detail}</div> : null}
+      {assertion.outcome === "unavailable" ? (
+        <div className="nre-assertion-body">reason: {assertion.reason}</div>
+      ) : assertion.expected !== undefined || assertion.received !== undefined || assertion.evidence !== undefined ? (
+        <div className="nre-assertion-body">
+          {assertion.expected !== undefined ? <span>expected: {assertion.expected}</span> : null}
+          {assertion.received !== undefined ? <span>received: {assertion.received}</span> : null}
+          {assertion.evidence !== undefined ? <span>evidence: {assertion.evidence}</span> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function AttemptSource({ data, className }: { data: AttemptSourceData | null; className?: string }): ReactElement | null {
+  if (data === null) return null;
+  const firstAttentionLine = data.lines.find((line) => {
+    const tone = lineTone(line);
+    return tone === "bad" || tone === "warn" || tone === "na";
+  })?.line;
+  return (
+    <div className={cx("nre", "nre-attempt-source", className)}>
+      <div className="nre-attempt-source-head">{data.sourcePath}</div>
+      <div className="nre-attempt-source-lines">
+        {data.lines.map((line) => {
+          const tone = lineTone(line);
+          const interactive = line.assertions.length > 0 || line.sends.length > 0 || line.turns.length > 0;
+          const lineClass = cx(
+            "nre-source-line",
+            tone ? `nre-tone-${tone}` : undefined,
+            line.sends.length > 0 || line.turns.length > 0 ? "nre-source-line-send" : undefined,
+          );
+          if (!interactive) {
+            return (
+              <div key={line.line} className={lineClass}>
+                <LineSummary line={line} tone={tone} />
+              </div>
+            );
+          }
+          return (
+            <details key={line.line} className={lineClass} open={line.line === firstAttentionLine}>
+              <summary>
+                <LineSummary line={line} tone={tone} />
+              </summary>
+              <div className="nre-source-line-detail">
+                {line.turns.map((turn, i) => (
+                  <TurnDetail key={`${turn.label}-${i}`} turn={turn} />
+                ))}
+                {line.assertions.map((assertion, i) => (
+                  <AssertionDetail key={i} assertion={assertion} />
+                ))}
+              </div>
+            </details>
+          );
+        })}
+      </div>
+      {data.unmapped.length > 0 ? (
+        <div className="nre-attempt-source-unmapped">
+          <div className="nre-attempt-source-unmapped-head">Other assertions</div>
+          {data.unmapped.map((a, i) => (
+            <div key={i} className={`nre-assertion-row nre-tone-${assertTone(a)}`}>
+              {a.groupPath?.length ? `${a.groupPath.join(" > ")} · ` : ""}
+              {a.name}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {data.unlocatedTurns.length > 0 ? (
+        <div className="nre-attempt-source-unlocated">
+          <div className="nre-attempt-source-unmapped-head">Other conversation</div>
+          {data.unlocatedTurns.map((turn, i) => (
+            <TurnDetail key={`${turn.label}-${i}`} turn={turn} showMeta showSent />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}