niceeval 0.6.2 → 0.7.1

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

@@ -1,12 +1,13 @@
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ArtifactLoadState, T } from "../shared.ts";
-import type { ViewResult } from "../types.ts";
+import type { Assertion, Span, ViewResult } from "../types.ts";
 import { artifactUrl } from "../lib/artifact-url.ts";
-import { asEvents, asSources } from "../lib/guards.ts";
+import { asEvents, asSources, asSpans } from "../lib/guards.ts";
 import { verdictClass, verdictLabel } from "../lib/verdict.ts";
-import { CodeView, NoSourceBody } from "./CodeView.tsx";
+import { AssertDetail, assertTone, CodeView, NoSourceBody } from "./CodeView.tsx";
+import { formatScore } from "../lib/format.ts";
 import { CopyAttemptPrompt } from "./CopyControls.tsx";
-import { LazyArtifact } from "./LazyArtifact.tsx";
+import { Trace } from "./Trace.tsx";
 import { Dialog, DialogClose, DialogContent, DialogTitle } from "./ui/dialog.tsx";
 import { Badge } from "./ui/badge.tsx";
 
@@ -14,6 +15,7 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
   const allAssertions = result.assertions || [];
   const base = result.artifactBase;
   const [data, setData] = useState<ArtifactLoadState>({ sources: null, events: null, status: "loading" });
+  const trace = useTraceSpans(base, result.hasTrace);
 
   // Esc / 焦点陷阱 / 背景滚动锁 / 点遮罩关闭 都交给 Radix Dialog;这里只保留 artifact 拉取。
   useEffect(() => {
@@ -34,10 +36,12 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
   const verdict = result.verdict;
   const hasCode = Boolean(data.sources?.length);
 
+  // 区块顺序对齐 docs/feature/reports/view.md「Attempt 详情」:判定与断言(errored 的结构化错误
+  // 就是判定原因,归这一区)→ 紧凑时间树 → diagnostics → usage → 源码/对话 → trace 入口。
   return (
     <Dialog open onOpenChange={(o) => { if (!o) onClose(); }}>
       <DialogContent aria-describedby={undefined}>
-        <div className="flex min-w-0 shrink-0 items-center justify-between gap-3 border-b border-line px-[18px] pb-[11px] pt-[13px]">
+        <div className="flex min-w-0 shrink-0 items-center justify-between gap-3 border-b border-line px-7 pb-3 pt-4">
           <div className="flex min-w-0 flex-col gap-[3px]">
             <Badge tone={verdictClass(verdict)}>{verdictLabel(verdict, t)}</Badge>
             <DialogTitle asChild>
@@ -53,31 +57,33 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
             x
           </DialogClose>
         </div>
-        <div className="flex-1 overflow-y-auto px-[18px] pb-[18px] pt-[14px]">
+        <div className="flex-1 overflow-y-auto px-7 pb-7 pt-5">
+          {data.status !== "loading" && !hasCode ? <AssertionSection assertions={allAssertions} t={t} /> : null}
           {result.error ? (
             <div className="modal-error">
               <ErrorDetailBlock error={result.error} />
             </div>
           ) : null}
+          {result.phases && result.phases.length > 0 ? <PhaseTimingBlock phases={result.phases} trace={trace} t={t} /> : null}
           {result.diagnostics && result.diagnostics.length > 0 ? (
-            <AttemptDiagnostics diagnostics={result.diagnostics} />
+            <AttemptDiagnostics diagnostics={result.diagnostics} t={t} />
           ) : null}
-          {result.phases && result.phases.length > 0 ? <PhaseTimingBlock phases={result.phases} /> : null}
           <UsageDiffLine result={result} />
           {data.status === "loading" ? <div className="conv-loading">{t("trace.loading")}</div> : null}
           {hasCode ? (
             <CodeView sources={data.sources ?? []} events={data.events || []} assertions={allAssertions} t={t} />
           ) : data.status !== "loading" ? (
             // hasSources 为真却取不到 → 源码捕获过,是 artifact 文件在当前托管里缺失;和「从未捕获」分开提示。
+            // 断言明细此时由断言区(detailMode)内嵌呈现,这里只保留说明与会话流,不再重复 checks。
             <NoSourceBody
-              assertions={allAssertions}
+              assertions={[]}
               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} />
+          {trace.available ? (
+            <FullTraceEntry trace={trace} t={t} />
           ) : data.status !== "loading" ? (
             <div className="mt-3 text-xs text-muted">
               {t("trace.enableHint")}
@@ -92,6 +98,113 @@ export function AttemptModal({ result, onClose, t }: { result: ViewResult; onClo
   );
 }
 
+/* ───────────────────────── 判定与断言 ───────────────────────── */
+
+/** 断言的源码位置标注(fallback 下无代码可跳,纯文本)。 */
+function locLabel(a: Assertion): React.ReactNode {
+  const loc = a.loc;
+  if (!loc) return null;
+  const short = loc.file.split("/").pop() ?? loc.file;
+  return (
+    <span className="assert-loc" title={`${loc.file}:${loc.line}`}>
+      {short}:{loc.line}
+    </span>
+  );
+}
+
+/**
+ * 断言区 = 源码视图的 fallback(见 docs/feature/reports/view.md「Attempt 详情」):断言明细
+ * 单点住在源码行里,只有源码不可用(未捕获或 artifact 缺失)时这里才出现,呈现同一份事实——
+ * failed / unavailable 与没过阈值的 soft 每条一行、一次展开明细,第一条 failed 默认展开;
+ * passed 按 group 收进默认折叠区,只显示数量。
+ */
+function AssertionSection({ assertions, t }: { assertions: Assertion[]; t: T }) {
+  if (!assertions.length) return null;
+  const attention = assertions.filter((a) => a.outcome !== "passed");
+  const passed = assertions.filter((a) => a.outcome === "passed");
+  const firstFailed = attention.findIndex((a) => a.outcome === "failed");
+  const openIdx = firstFailed === -1 ? 0 : firstFailed;
+  const groups = new Map<string, Assertion[]>();
+  for (const a of passed) {
+    const g = a.groupPath?.join(" > ") ?? "";
+    groups.set(g, [...(groups.get(g) ?? []), a]);
+  }
+  return (
+    <div className="attempt-asserts">
+      <div className="modal-sect">{t("code.checks")}</div>
+      {attention.length ? (
+        <div className="attempt-asserts-open">
+          {attention.map((a, i) => (
+            <FailureRow key={i} a={a} defaultOpen={i === openIdx} t={t} />
+          ))}
+        </div>
+      ) : null}
+      {passed.length ? (
+        <details className="asserts-passed">
+          <summary>{t("assert.passedCollapsed", { count: passed.length })}</summary>
+          {[...groups.entries()].map(([g, list]) => (
+            <details key={g || "·"} className="asserts-passed-group">
+              <summary>
+                {g || "—"} · {list.length}
+              </summary>
+              <AssertDetail asserts={list.map(stripGroupPath)} t={t} anchor={locLabel} />
+            </details>
+          ))}
+        </details>
+      ) : null}
+    </div>
+  );
+}
+
+/** 折叠区已按 group 分组,行内不再重复组前缀。 */
+function stripGroupPath(a: Assertion): Assertion {
+  const { groupPath: _gp, ...rest } = a;
+  return rest as Assertion;
+}
+
+/** fallback 断言区里的一行:标题(徽章/名字/matcher/分数/位置),明细一次展开可见。 */
+function FailureRow({ a, defaultOpen, t }: { a: Assertion; defaultOpen: boolean; t: T }) {
+  return (
+    <details className="fail-row" open={defaultOpen || undefined}>
+      <summary className="fail-sum">
+        <span className={`abadge ${assertTone(a)}`}>
+          {a.outcome === "unavailable" ? t("assert.unavailable") : t("assert.fail")}
+        </span>
+        <span className="fail-name">
+          {a.groupPath?.length ? `${a.groupPath.join(" > ")} · ` : ""}
+          {a.name}
+        </span>
+        {a.detail && a.detail !== a.name ? <span className="fail-matcher">{a.detail}</span> : null}
+        {a.optional ? <span className="assert-sev">{t("assert.optional")}</span> : null}
+        {a.severity === "soft" ? <span className="assert-sev">{t("assert.soft")}</span> : null}
+        {a.outcome !== "unavailable" && a.threshold !== undefined ? (
+          <span className="assert-score">
+            {formatScore(a.score)} / {formatScore(a.threshold)}
+          </span>
+        ) : null}
+        {locLabel(a)}
+      </summary>
+      <div className="fail-body">
+        {a.outcome === "unavailable" ? <div className="assert-reason">{a.reason}</div> : null}
+        {a.outcome !== "unavailable" && a.expected !== undefined ? (
+          <div className="assert-reason">expected: {a.expected}</div>
+        ) : null}
+        {a.outcome !== "unavailable" && a.received !== undefined ? (
+          <div className="assert-reason">received: {a.received}</div>
+        ) : null}
+        {a.outcome !== "unavailable" && a.evidence ? (
+          <details className="assert-evidence">
+            <summary>{t("assert.evidence")}</summary>
+            <pre className="assert-evidence-pre">{a.evidence}</pre>
+          </details>
+        ) : null}
+      </div>
+    </details>
+  );
+}
+
+/* ───────────────────────── 结构化错误与 diagnostics ───────────────────────── */
+
 /** errored attempt 的结构化 error 明细(见 docs/feature/reports/view.md「结构化错误」)。结构化
  *  `AttemptError`:operation / code / message + 可选 cause / stack。字段标签是低层技术标识,与终端
  *  `niceeval show` 一样保持英文,不进 view 的 i18n 词典。 */
@@ -122,7 +235,7 @@ function ErrorDetailBlock({ error }: { error: NonNullable<ViewResult["error"]> }
 
 /** attempt 级诊断,按 lifecycle 阶段分组(teardown/cleanup 等,与 verdict 独立;
  *  见 docs/feature/reports/view.md「Attempt 详情」)。 */
-function AttemptDiagnostics({ diagnostics }: { diagnostics: NonNullable<ViewResult["diagnostics"]> }) {
+function AttemptDiagnostics({ diagnostics, t }: { diagnostics: NonNullable<ViewResult["diagnostics"]>; t: T }) {
   const groups = new Map<string, typeof diagnostics>();
   for (const d of diagnostics) {
     const list = groups.get(d.phase) ?? [];
@@ -130,7 +243,7 @@ function AttemptDiagnostics({ diagnostics }: { diagnostics: NonNullable<ViewResu
   }
   return (
     <div className="mt-3">
-      <div className="text-xs font-[640] text-text">diagnostics</div>
+      <div className="modal-sect">{t("attempt.diagnostics")}</div>
       {[...groups.entries()].map(([phase, list]) => (
         <div key={phase} className="mt-1">
           <div className="text-[11px] text-muted">{phase}</div>
@@ -153,6 +266,8 @@ function AttemptDiagnostics({ diagnostics }: { diagnostics: NonNullable<ViewResu
   );
 }
 
+/* ───────────────────────── 统一时间树 ───────────────────────── */
+
 const CLOSING_PHASES = new Set(["eval.teardown", "agent.teardown", "sandbox.teardown", "sandbox.suspend", "sandbox.stop"]);
 
 function fmtMs(ms: number): string {
@@ -161,75 +276,221 @@ function fmtMs(ms: number): string {
   return `${ms}ms`;
 }
 
-/** 统一时间树(见 docs/feature/reports/view.md「Attempt 详情」):`result.json.phases` 的主链
- *  分解与收尾段;每个 phase 可展开 runner 直接观察到的 hook / 命令 / turn(嵌套 children)。 */
-function PhaseTimingBlock({ phases }: { phases: NonNullable<ViewResult["phases"]> }) {
+type PhaseEntry = NonNullable<ViewResult["phases"]>[number];
+type TimingChild = NonNullable<PhaseEntry["children"]>[number];
+
+/** trace.json 的共享按需装载:时间树的 turn 挂接与底部 trace 入口用同一份,只 fetch 一次。 */
+interface TraceHook {
+  available: boolean;
+  status: "idle" | "loading" | "ready" | "failed";
+  spans: Span[] | null;
+  load: () => void;
+}
+
+function useTraceSpans(base: string | undefined, hasTrace: boolean | undefined): TraceHook {
+  const [state, setState] = useState<{ spans: Span[] | null; status: TraceHook["status"] }>({ spans: null, status: "idle" });
+  const started = useRef(false);
+  const available = Boolean(base && hasTrace);
+  const load = useCallback(() => {
+    if (started.current || !base) return;
+    started.current = true;
+    setState({ spans: null, status: "loading" });
+    fetch(artifactUrl(`${base}/trace.json`))
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((body) => setState({ spans: asSpans(body) ?? [], status: "ready" }))
+      .catch(() => setState({ spans: null, status: "failed" }));
+  }, [base]);
+  return useMemo(() => ({ available, load, ...state }), [available, load, state]);
+}
+
+const seriesClass = (i: number, failed?: true): string => (failed ? "phase-seg-bad" : `phase-seg-${(i % 6) + 1}`);
+
+/**
+ * 统一时间树(见 docs/feature/reports/view.md「Attempt 详情」):整区一个折叠块,收合时只占
+ * 一行(标题 + 总耗时),有失败 phase 的 attempt 默认展开;展开后主链先画一条分解条,列表里
+ * 每个 phase 的 children(hook / 沙箱命令 / session/turn)默认收合、可逐个展开。
+ * 收尾段单列,不计入总耗时。
+ */
+function PhaseTimingBlock({ phases, trace, t }: { phases: NonNullable<ViewResult["phases"]>; trace: TraceHook; t: T }) {
   const main = phases.filter((p) => !CLOSING_PHASES.has(p.name));
   const closing = phases.filter((p) => CLOSING_PHASES.has(p.name));
+  const total = main.reduce((sum, p) => sum + p.durationMs, 0);
+  const anyFailed = phases.some((p) => p.failed);
+  const [open, setOpen] = useState(anyFailed);
   return (
-    <div className="mt-3">
-      <div className="text-xs font-[640] text-text">timing</div>
-      <ul className="mt-1 space-y-0.5">
-        {main.map((p, i) => (
-          <TimingRow key={i} name={p.name} durationMs={p.durationMs} failed={p.failed} children_={p.children} />
-        ))}
-      </ul>
-      {closing.length > 0 ? (
-        <div className="mt-1">
-          <div className="text-[11px] text-muted">teardown (not counted in total)</div>
-          <ul className="mt-0.5 space-y-0.5">
-            {closing.map((p, i) => (
-              <TimingRow key={i} name={p.name} durationMs={p.durationMs} failed={p.failed} children_={p.children} />
+    <details className="attempt-timing" open={open} onToggle={(e) => setOpen(e.currentTarget.open)}>
+      <summary className="timing-sum">
+        <span className="modal-sect">{t("attempt.timing")}</span>
+        <span className="phase-dur num">{fmtMs(total)}</span>
+        {anyFailed ? <span className="phase-fail">✗</span> : null}
+      </summary>
+      {open ? (
+        <>
+          {total > 0 ? (
+            <div className="phase-bar" aria-hidden="true">
+              {main.map((p, i) => (
+                <div
+                  key={i}
+                  className={`phase-seg ${seriesClass(i, p.failed)}`}
+                  style={{ flexGrow: Math.max(p.durationMs, total / 200) }}
+                  title={`${p.name} ${fmtMs(p.durationMs)}`}
+                />
+              ))}
+            </div>
+          ) : null}
+          <ul className="phase-list">
+            {main.map((p, i) => (
+              <PhaseRow key={i} phase={p} dotClass={seriesClass(i, p.failed)} trace={trace} t={t} />
             ))}
           </ul>
-        </div>
+          {closing.length > 0 ? (
+            <div className="phase-closing">
+              <div className="phase-closing-head">{t("attempt.teardown")}</div>
+              <ul className="phase-list">
+                {closing.map((p, i) => (
+                  <PhaseRow key={i} phase={p} trace={trace} t={t} />
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </>
       ) : null}
-    </div>
+    </details>
   );
 }
 
-type TimingChild = NonNullable<NonNullable<ViewResult["phases"]>[number]["children"]>[number];
-
-function TimingRow({
-  name,
-  durationMs,
-  failed,
-  children_,
-}: {
-  name: string;
-  durationMs: number;
-  failed?: true;
-  children_?: TimingChild[];
-}) {
-  const kids = children_ ?? [];
-  const label = (node: TimingChild): string =>
-    node.kind === "command" && node.command ? `shell · ${node.command.display}` : node.kind === "turn" ? `turn ${node.label}` : node.label;
-  const renderChild = (node: TimingChild, depth: number): React.ReactNode => (
-    <li key={node.id} className="text-[11px]" style={{ paddingLeft: `${depth * 12}px` }}>
-      <span className="text-muted">{label(node)}</span> {fmtMs(node.durationMs)}
-      {node.failed ? <span className="text-bad"> ✗</span> : null}
-      {(node.children ?? []).map((c) => renderChild(c, depth + 1))}
+function PhaseRow({ phase, dotClass, trace, t }: { phase: PhaseEntry; dotClass?: string; trace: TraceHook; t: T }) {
+  const kids = phase.children ?? [];
+  // 失败 phase 默认展开:失败线索直接给出,其余保持收合(契约:children 默认收合)。
+  const [open, setOpen] = useState(Boolean(phase.failed));
+  const head = (
+    <>
+      {dotClass ? <span className={`phase-dot ${dotClass}`} /> : <span className="phase-dot phase-dot-none" />}
+      <span className="phase-name">{phase.name}</span>
+      <span className="phase-dur num">{fmtMs(phase.durationMs)}</span>
+      {phase.failed ? <span className="phase-fail">✗</span> : null}
+      {kids.length > 0 ? <span className="phase-kids num">{countNodes(kids)}</span> : null}
+    </>
+  );
+  if (kids.length === 0) return <li className="phase-row">{head}</li>;
+  return (
+    <li>
+      <details className="phase-details" open={open} onToggle={(e) => setOpen(e.currentTarget.open)}>
+        <summary className="phase-row">{head}</summary>
+        {open ? (
+          <ul className="timing-kids">
+            {kids.map((node) => (
+              <TimingNodeRow key={node.id} node={node} trace={trace} t={t} />
+            ))}
+          </ul>
+        ) : null}
+      </details>
     </li>
   );
+}
+
+function countNodes(nodes: TimingChild[]): number {
+  return nodes.reduce((sum, n) => sum + 1 + countNodes(n.children ?? []), 0);
+}
+
+function TimingNodeRow({ node, trace, t }: { node: TimingChild; trace: TraceHook; t: T }) {
+  const kids = node.children ?? [];
+  // turn 带 traceId 且这次运行有 trace.json 时,展开即挂接同一轮的 agent/model/tool spans。
+  const hooksTrace = node.kind === "turn" && Boolean(node.traceId) && trace.available;
+  const [open, setOpen] = useState(Boolean(node.failed) && (kids.length > 0 || hooksTrace));
+  const label =
+    node.kind === "command" && node.command ? `shell · ${node.command.display}` : node.kind === "turn" ? `turn ${node.label}` : node.label;
+  const head = (
+    <>
+      <span className="tnode-label" title={label}>{label}</span>
+      <span className="phase-dur num">{fmtMs(node.durationMs)}</span>
+      {node.failed ? <span className="phase-fail">✗</span> : null}
+    </>
+  );
+  if (kids.length === 0 && !hooksTrace) return <li className="tnode-row">{head}</li>;
   return (
-    <li className="text-xs">
-      <span>{name}</span> <span className="text-muted">{fmtMs(durationMs)}</span>
-      {failed ? <span className="text-bad"> ✗</span> : null}
-      {kids.length > 0 ? <ul className="mt-0.5 space-y-0.5 pl-3">{kids.map((c) => renderChild(c, 0))}</ul> : null}
+    <li>
+      <details className="phase-details" open={open} onToggle={(e) => setOpen(e.currentTarget.open)}>
+        <summary className="tnode-row">{head}</summary>
+        {open ? (
+          <>
+            {kids.length > 0 ? (
+              <ul className="timing-kids">
+                {kids.map((child) => (
+                  <TimingNodeRow key={child.id} node={child} trace={trace} t={t} />
+                ))}
+              </ul>
+            ) : null}
+            {hooksTrace ? <TurnSpans traceId={node.traceId!} trace={trace} t={t} /> : null}
+          </>
+        ) : null}
+      </details>
     </li>
   );
 }
 
-/** usage 与 diff 入口行(见 docs/feature/reports/view.md「Attempt 详情」)。 */
+function TurnSpans({ traceId, trace, t }: { traceId: string; trace: TraceHook; t: T }) {
+  useEffect(() => { trace.load(); }, [trace]);
+  if (trace.status === "idle" || trace.status === "loading") return <div className="tnode-meta">{t("trace.loading")}</div>;
+  if (trace.status === "failed") return <div className="tnode-meta">{t("trace.loadFailed")}</div>;
+  const spans = (trace.spans ?? []).filter((s) => s.traceId === traceId);
+  if (!spans.length) return <div className="tnode-meta">{t("trace.noSpans")}</div>;
+  return (
+    <div className="tnode-trace">
+      <Trace spans={spans} t={t} />
+    </div>
+  );
+}
+
+/** 底部 trace 入口:被测 agent 的完整原始 span 瀑布,与时间树共享同一次 trace.json 拉取。 */
+function FullTraceEntry({ trace, t }: { trace: TraceHook; t: T }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <details
+      className="trace-details"
+      open={open}
+      onToggle={(e) => {
+        const isOpen = e.currentTarget.open;
+        setOpen(isOpen);
+        if (isOpen) trace.load();
+      }}
+    >
+      <summary>{t("trace.timing")}</summary>
+      <div className="trace-slot">
+        {trace.status === "failed" ? (
+          <div className="trace-span-meta">{t("trace.loadFailed")}</div>
+        ) : trace.status !== "ready" ? (
+          <div className="trace-span-meta">{t("trace.loading")}</div>
+        ) : (
+          <Trace spans={trace.spans ?? []} t={t} />
+        )}
+      </div>
+    </details>
+  );
+}
+
+/* ───────────────────────── usage 行 ───────────────────────── */
+
+/** usage / sandbox 元信息 chips(见 docs/feature/reports/view.md「Attempt 详情」)。 */
 function UsageDiffLine({ result }: { result: ViewResult }) {
-  const parts: string[] = [];
+  const chips: React.ReactNode[] = [];
   if (result.usage) {
     const tok = result.usage.inputTokens + result.usage.outputTokens;
-    parts.push(`usage: ${tok.toLocaleString()} tok${result.usage.costUSD !== undefined ? ` · $${result.usage.costUSD.toFixed(4)}` : ""}`);
+    chips.push(
+      <span className="meta-chip" key="usage">
+        usage <b>{tok.toLocaleString()} tok</b>
+        {result.usage.costUSD !== undefined ? <> · ${result.usage.costUSD.toFixed(4)}</> : null}
+      </span>,
+    );
   }
   if (result.sandbox) {
-    parts.push(`sandbox: ${result.sandbox.provider} · ${result.sandbox.sandboxId}${result.sandbox.kept ? " · kept" : ""}`);
+    chips.push(
+      <span className="meta-chip" key="sandbox">
+        sandbox <b>{result.sandbox.provider}</b> · {result.sandbox.sandboxId}
+        {result.sandbox.kept ? " · kept" : ""}
+      </span>,
+    );
   }
-  if (parts.length === 0) return null;
-  return <div className="mt-2 text-xs text-muted">{parts.join("   ")}</div>;
+  if (chips.length === 0) return null;
+  return <div className="meta-chips">{chips}</div>;
 }

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { AlertCircle, CheckCircle2, ChevronRight, MessageCircle, XCircle } from "lucide-react";
 import type { T } from "../shared.ts";
 import type { Assertion, CodeSource, SourceTurn, TranscriptEvent } from "../types.ts";
@@ -8,7 +8,7 @@ import { InputBlock, ToolBlock, Transcript } from "./Transcript.tsx";
 
 /** soft 断言没过阈值不影响 verdict,颜色上跟 gate 失败(红)区分开,用 warn(黄);
  *  unavailable 用独立第三态(非红非绿)。 */
-function assertTone(a: Assertion): "good" | "warn" | "bad" | "na" {
+export function assertTone(a: Assertion): "good" | "warn" | "bad" | "na" {
   if (a.outcome === "unavailable") return "na";
   if (a.outcome === "passed") return "good";
   return a.severity === "soft" ? "warn" : "bad";
@@ -17,7 +17,12 @@ function assertTone(a: Assertion): "good" | "warn" | "bad" | "na" {
 export function CodeView({ sources, events, assertions, t }: { sources: CodeSource[]; events: TranscriptEvent[]; assertions: Assertion[]; t: T }) {
   const turns = useMemo(() => indexTurns(events), [events]);
   const asserts = useMemo(() => indexAsserts(assertions), [assertions]);
-  const [open, setOpen] = useState<Set<string>>(() => new Set());
+  // 断言明细单点住在源码行(契约 docs/feature/reports/view.md「Attempt 详情」):
+  // 第一条失败行默认展开,打开页面即见「为什么失败」,不用逐行找红行点开。
+  const [open, setOpen] = useState<Set<string>>(() => {
+    const first = assertions.find((a) => a.outcome === "failed" && a.loc);
+    return new Set(first?.loc ? [locKey(first.loc.file, first.loc.line)] : []);
+  });
   const toggle = useCallback((k: string) => {
     setOpen((prev) => {
       const next = new Set(prev);
@@ -223,7 +228,7 @@ export function ReplyPanel({ turn, t }: { turn: SourceTurn; t: T }) {
   );
 }
 
-export function AssertDetail({ asserts, t }: { asserts: Assertion[]; t: T }) {
+export function AssertDetail({ asserts, t, anchor }: { asserts: Assertion[]; t: T; anchor?: (a: Assertion) => ReactNode }) {
   return (
     <div className="line-detail assert-detail">
       {asserts.map((a: Assertion, i: number) => (
@@ -234,6 +239,7 @@ export function AssertDetail({ asserts, t }: { asserts: Assertion[]; t: T }) {
           <span className="assert-name">
             {a.groupPath?.length ? `${a.groupPath.join(" > ")} · ` : ""}
             {a.name}
+            {anchor?.(a)}
           </span>
           {a.optional ? <span className="assert-sev">{t("assert.optional")}</span> : null}
           {a.severity === "soft" ? <span className="assert-sev">{t("assert.soft")}</span> : null}