niceeval 0.9.1 → 0.10.2

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

@@ -1,310 +0,0 @@
-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";
-import { highlightTs, indexAsserts, indexTurns, locKey } from "../lib/transcript-data.tsx";
-import { formatScore } from "../lib/format.ts";
-import { InputBlock, RawEventBlock, ToolBlock, Transcript } from "./Transcript.tsx";
-
-/** soft 断言没过阈值不影响 verdict,颜色上跟 gate 失败(红)区分开,用 warn(黄);
- *  unavailable 用独立第三态(非红非绿)。 */
-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";
-}
-
-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]);
-  // 断言明细单点住在源码行(契约 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);
-      if (next.has(k)) next.delete(k); else next.add(k);
-      return next;
-    });
-  }, []);
-
-  // 哪些 loc 被源码行覆盖到了;没覆盖到的(读不到源码的文件)放底部兜底。
-  const sourceKeys = new Set<string>();
-  for (const f of sources) {
-    const n = f.content.split("\n").length;
-    for (let i = 1; i <= n; i++) sourceKeys.add(locKey(f.path, i));
-  }
-  const orphanAsserts = [...asserts.byKey.entries()]
-    .filter(([k]) => !sourceKeys.has(k))
-    .flatMap(([, v]) => v)
-    .concat(asserts.noloc);
-
-  return (
-    <div className="codeview">
-      {sources.map((file) => (
-        <CodeFile
-          key={file.path}
-          file={file}
-          turns={turns.byKey}
-          asserts={asserts.byKey}
-          open={open}
-          toggle={toggle}
-          t={t}
-        />
-      ))}
-      {orphanAsserts.length ? (
-        <div className="code-orphans">
-          <div className="code-orphans-head">{t("code.otherAssertions")}</div>
-          <AssertDetail asserts={orphanAsserts} t={t} />
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export function CodeFile({
-  file,
-  turns,
-  asserts,
-  open,
-  toggle,
-  t,
-}: {
-  file: CodeSource;
-  turns: Map<string, SourceTurn>;
-  asserts: Map<string, Assertion[]>;
-  open: Set<string>;
-  toggle: (key: string) => void;
-  t: T;
-}) {
-  const lines = file.content.replace(/\n$/, "").split("\n");
-  return (
-    <div className="code-file">
-      <div className="code-file-head">{file.path}</div>
-      <div className="code-lines">
-        {lines.map((text: string, i: number) => {
-          const n = i + 1;
-          const k = locKey(file.path, n);
-          return (
-            <CodeLine
-              key={n}
-              n={n}
-              text={text}
-              turn={turns.get(k)}
-              asserts={asserts.get(k)}
-              isOpen={open.has(k)}
-              onToggle={() => toggle(k)}
-              t={t}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function CodeLine({
-  n,
-  text,
-  turn,
-  asserts,
-  isOpen,
-  onToggle,
-  t,
-}: {
-  n: number;
-  text: string;
-  turn?: SourceTurn;
-  asserts?: Assertion[];
-  isOpen: boolean;
-  onToggle: () => void;
-  t: T;
-}) {
-  const hasReply = !!turn;
-  const hasAsserts = !!(asserts && asserts.length);
-  // 只有 gate 断言没过才算这一行真的"fail";只剩 soft 断言没过阈值时是"warn"(不影响 verdict);
-  // 只剩 unavailable 时是第三态 "na"(非红非绿)。
-  const status = hasAsserts
-    ? asserts?.every((a: Assertion) => a.outcome === "passed")
-      ? "pass"
-      : asserts?.some((a: Assertion) => a.outcome === "failed" && a.severity === "gate")
-        ? "fail"
-        : asserts?.some((a: Assertion) => a.outcome === "failed")
-          ? "warn"
-          : "na"
-    : null;
-  const clickable = hasReply || hasAsserts;
-  const rowCls =
-    "code-line" +
-    (status ? ` line-${status}` : "") +
-    (hasReply && !status ? " line-send" : "") +
-    (clickable ? " line-clickable" : "") +
-    (isOpen ? " is-open" : "");
-  return (
-    <>
-      <div
-        className={rowCls}
-        onClick={clickable ? onToggle : undefined}
-        role={clickable ? "button" : undefined}
-        tabIndex={clickable ? 0 : undefined}
-        onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onToggle(); } } : undefined}
-      >
-        <span className="ln">{n}</span>
-        <span className="gmark">
-          {hasAsserts ? (
-            status === "pass" ? (
-              <CheckCircle2 className="gstat good" aria-hidden="true" />
-            ) : status === "warn" ? (
-              <AlertCircle className="gstat warn" aria-hidden="true" />
-            ) : status === "na" ? (
-              <AlertCircle className="gstat na" aria-hidden="true" />
-            ) : (
-              <XCircle className="gstat bad" aria-hidden="true" />
-            )
-          ) : hasReply ? (
-            <MessageCircle className="gsend" aria-hidden="true" />
-          ) : null}
-        </span>
-        <code className="ctext">{highlightTs(text)}</code>
-        <span className="lbadges">
-          {hasAsserts ? asserts?.map((a: Assertion, i: number) => <AssertBadge key={i} a={a} />) : null}
-          {hasReply ? (
-            <span className="reply-hint">{isOpen ? t("code.hide") : t("code.reply")}</span>
-          ) : clickable ? (
-            <ChevronRight className={`line-chev${isOpen ? " is-open" : ""}`} aria-hidden="true" />
-          ) : null}
-        </span>
-      </div>
-      {isOpen && hasReply && turn ? <ReplyPanel turn={turn} t={t} /> : null}
-      {isOpen && hasAsserts && asserts ? <AssertDetail asserts={asserts} t={t} /> : null}
-    </>
-  );
-}
-
-/** 行尾分数徽章:judge / 带阈值的断言显示分数(过绿不过红);纯 gate 断言靠行色 + gutter 勾叉。 */
-export function AssertBadge({ a }: { a: Assertion }) {
-  if (a.outcome === "unavailable") return <span className="abadge na">n/a</span>;
-  const showPct = a.threshold !== undefined || (a.score > 0 && a.score < 1);
-  if (!showPct) return null;
-  return (
-    <span className={`abadge ${assertTone(a)}`}>
-      {formatScore(a.score)}
-      {a.threshold !== undefined ? <span className="abadge-th">/{formatScore(a.threshold)}</span> : null}
-    </span>
-  );
-}
-
-export function ReplyPanel({ turn, t }: { turn: SourceTurn; t: T }) {
-  if (!turn.replies.length) return <div className="line-detail reply-empty">{t("code.noReply")}</div>;
-  return (
-    <div className="line-detail reply-panel">
-      {turn.replies.map((r, j) => {
-        if (r.kind === "text")
-          return (
-            <div key={j} className="reply-assistant">
-              <span className="reply-role">{t("transcript.assistant")}</span>
-              <div className="reply-text">{r.text}</div>
-            </div>
-          );
-        if (r.kind === "user")
-          return (
-            <div key={j} className="reply-user">
-              <span className="reply-role">{t("transcript.user")}</span>
-              <div className="reply-text">{r.text}</div>
-            </div>
-          );
-        if (r.kind === "thinking")
-          return (
-            <details key={j} className="reply-think">
-              <summary>{t("transcript.thinking")}</summary>
-              <div className="reply-think-text">{r.text}</div>
-            </details>
-          );
-        if (r.kind === "error")
-          return <div key={j} className="reply-err">! {r.text}</div>;
-        if (r.kind === "skill")
-          return (
-            <div key={j} className="reply-skill">
-              <span className="reply-role">{t("transcript.skillLoaded")}</span> {r.skill}
-            </div>
-          );
-        if (r.kind === "raw") return <RawEventBlock key={j} raw={r.raw} t={t} />;
-        if (r.kind === "tool")
-          // 和 Transcript 同一个组件:摘要行显示工具名(入参)→ 出参预览,展开看完整出入参。
-          return <ToolBlock key={j} call={r.ev} result={r.result} t={t} />;
-        if (r.kind === "input") return <InputBlock key={j} event={{ type: "input.requested", request: r.ev.request }} t={t} />;
-        return null;
-      })}
-    </div>
-  );
-}
-
-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) => (
-        <div key={i} className="assert-row">
-          <span className={`abadge ${assertTone(a)}`}>
-            {a.outcome === "unavailable" ? t("assert.unavailable") : a.outcome === "passed" ? t("assert.pass") : t("assert.fail")}
-          </span>
-          <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}
-          {a.outcome !== "unavailable" && a.threshold !== undefined ? (
-            <span className="assert-score">
-              {formatScore(a.score)} / {formatScore(a.threshold)}
-            </span>
-          ) : null}
-          {a.outcome === "unavailable" ? <div className="assert-reason">{a.reason}</div> : null}
-          {a.detail ? <div className="assert-reason">{a.detail}</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>
-      ))}
-    </div>
-  );
-}
-
-/**
- * 没源码可叠时(此 run 早于 source-loc,或源码不可读:远程沙箱等)。不退回老的分组视图——
- * 用代码视图同一套视觉语言:一句说明 + checks(绿过/红不过)+ 原始会话流。重跑即可看到代码视图。
- */
-export function NoSourceBody({ assertions, events, message, t }: { assertions: Assertion[]; events: TranscriptEvent[]; message?: string; t: T }) {
-  const checks = assertions || [];
-  return (
-    <div className="nosource">
-      <div className="nosource-note">
-        {message ?? t("code.noSource")}
-      </div>
-      {checks.length ? (
-        <div className="nosource-block">
-          <div className="nosource-head">{t("code.checks")}</div>
-          <AssertDetail asserts={checks} t={t} />
-        </div>
-      ) : null}
-      {events?.length ? (
-        <div className="nosource-block">
-          <div className="nosource-head">{t("code.conversation")}</div>
-          <Transcript events={events} t={t} />
-        </div>
-      ) : null}
-    </div>
-  );
-}

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

@@ -1,106 +0,0 @@
-import React, { useState } from "react";
-import { Check, Copy } from "lucide-react";
-import type { T } from "../shared.ts";
-import type { ViewResult } from "../types.ts";
-import { reasonFor } from "../lib/verdict.ts";
-
-/** 修复 prompt 的一条失败条目;路径均相对 view 输入根(默认 `.niceeval/`)。 */
-export interface FixPromptEntry {
-  experiment: string;
-  evalId: string;
-  verdict: string;
-  reason: string;
-  artifactBase?: string;
-  resultPath?: string;
-}
-
-export function toFixPromptEntry(r: ViewResult, experimentLabel: string): FixPromptEntry {
-  return {
-    experiment: r.experimentId ?? experimentLabel,
-    evalId: r.id,
-    verdict: r.verdict,
-    reason: reasonFor(r),
-    artifactBase: r.artifactBase,
-    // result.json 与其它 artifact(events.json 等)同目录落盘,resultPath 因此复用同一个
-    // artifactBase(不再靠 attemptRef 的 {snapshot, attempt} 两段拼——locator 是不透明的,
-    // 浏览器端解不出磁盘路径)。
-    resultPath: r.artifactBase ? `${r.artifactBase}/result.json` : undefined,
-  };
-}
-
-/**
- * 学 Next.js 16.3 的「Copy prompt」:把失败打包成一段可直接粘给 coding agent 的修复
- * prompt——失败清单 + artifact 路径 + 先读随包文档 / 判断缺陷在哪一侧 / 重跑验证的步骤。
- * prompt 面向 agent,固定英文;按钮文案走界面 i18n。
- */
-export function buildFixPrompt(entries: FixPromptEntry[]): string {
-  const failures = entries
-    .map((e, i) =>
-      [
-        `${i + 1}. eval "${e.evalId}" [experiment ${e.experiment}] — ${e.verdict}`,
-        e.reason ? `   reason: ${e.reason}` : null,
-        e.artifactBase ? `   artifacts: ${e.artifactBase}/` : null,
-        e.resultPath ? `   result: ${e.resultPath}` : null,
-      ]
-        .filter(Boolean)
-        .join("\n"),
-    )
-    .join("\n");
-  const experiments = [...new Set(entries.map((e) => e.experiment))].join(" / ");
-  return [
-    "Fix the failing evals from this niceeval run.",
-    "",
-    "## Failures",
-    failures,
-    "",
-    "## Steps",
-    "1. niceeval is NOT in your training data. Read the relevant guide in `node_modules/niceeval/docs-site/` (English at the top level, Chinese under `zh/`) before changing anything.",
-    "2. The paths above are relative to the results directory (default `.niceeval/`). For each failure, read `events.json` in its artifacts directory — the full agent transcript including tool calls — plus `trace.json` (execution trace) and `diff.json` (workspace diff) when present, to see what actually happened.",
-    "3. Decide which side the defect is on: the program under test, or the eval itself (over-tight assertion, wrong fixture, missing setup). Fix that side; do not weaken assertions just to turn the run green.",
-    `4. Re-run: \`npx niceeval exp ${experiments || "<experiment>"} <eval-id-prefix>\`. Already-passing evals are skipped by the fingerprint cache; pass \`--force\` to re-run everything.`,
-    "5. Run `npx niceeval show` and confirm these failures are gone.",
-  ].join("\n");
-}
-
-// 批量修复 prompt 不再由壳渲染:它是内建报告首页里的 CopyFixPrompt 组件
-// (niceeval/report 的站点组件,prompt 在 resolve 期烘进静态 HTML)。这里只留
-// attempt 弹窗的单条版。
-
-/** attempt 弹窗里的单条版:只打包当前 attempt 的失败,供逐条转交 agent。 */
-export function CopyAttemptPrompt({ result, t }: { result: ViewResult; t: T }) {
-  const [copied, setCopied] = useState(false);
-  if (result.verdict !== "failed" && result.verdict !== "errored") return null;
-
-  const copy = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    try {
-      await copyText(buildFixPrompt([toFixPromptEntry(result, result.agent)]));
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      setCopied(false);
-    }
-  };
-
-  return (
-    <button className={`copy-all-errors${copied ? " is-copied" : ""}`} onClick={copy} title={t("action.copyPrompt")}>
-      {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
-      <span>{copied ? t("action.copied") : t("action.copyPrompt")}</span>
-    </button>
-  );
-}
-
-export async function copyText(text: string): Promise<void> {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-  const ta = document.createElement("textarea");
-  ta.value = text;
-  ta.style.position = "fixed";
-  ta.style.opacity = "0";
-  document.body.appendChild(ta);
-  ta.select();
-  document.execCommand("copy");
-  ta.remove();
-}

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

@@ -1,100 +0,0 @@
-import type { ReactNode } from "react";
-import type { T } from "../shared.ts";
-import type { Span, ViewJson } from "../types.ts";
-import { formatDuration } from "../lib/format.ts";
-
-export function Trace({ spans, t }: { spans: Span[]; t: T }) {
-  if (!spans?.length) return <div className="trace-span-meta">{t("trace.noSpans")}</div>;
-  const t0 = Math.min(...spans.map((s) => s.startMs));
-  const t1 = Math.max(...spans.map((s) => s.endMs));
-  const total = Math.max(1, t1 - t0);
-  const byId = new Map(spans.map((s) => [s.spanId, s]));
-  const depthOf = (span: Span): number => {
-    let depth = 0;
-    let cur = span;
-    const seen = new Set();
-    while (cur && cur.parentSpanId && byId.has(cur.parentSpanId) && !seen.has(cur.spanId)) {
-      seen.add(cur.spanId);
-      const next = byId.get(cur.parentSpanId);
-      if (!next) break;
-      cur = next;
-      depth++;
-      if (depth > 40) break;
-    }
-    return depth;
-  };
-  const ordered = [...spans].sort((a, b) => a.startMs - b.startMs || depthOf(a) - depthOf(b));
-  return (
-    <div className="trace">
-      <div className="trace-span-meta">
-        {t("trace.total")} {formatDuration(total)} · {spans.length} {t("trace.spans")} · {t("trace.clickDetails")}
-      </div>
-      {ordered.map((span) => {
-        const left = ((span.startMs - t0) / total) * 100;
-        const width = Math.max(0.6, ((span.endMs - span.startMs) / total) * 100);
-        const kind = span.kind || "other";
-        const tone = span.status === "error" ? "bad" : "k-" + kind;
-        const detail = spanAttrs(span.attributes);
-        const row = (
-          <summary className="trace-row">
-            <div className="trace-label" style={{ paddingLeft: depthOf(span) * 12 }} title={span.name}>
-              {kind !== "other" ? <span className={`kind-chip k-${kind}`}>{kind}</span> : null}
-              {span.name}
-            </div>
-            <div className="trace-track">
-              <div className={`trace-bar ${tone}`} style={{ left: `${left}%`, width: `${width}%` }} />
-            </div>
-            <div className="trace-dur num">{formatDuration(span.endMs - span.startMs)}</div>
-          </summary>
-        );
-        return detail ? (
-          <details className="span-d" key={span.spanId}>
-            {row}
-            {detail}
-          </details>
-        ) : (
-          <div className="span-d" key={span.spanId}>
-            {row}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function spanAttrs(attrs?: Record<string, ViewJson>): ReactNode {
-  if (!attrs) return null;
-  const hide = /^(code\.|thread\.|target$|busy_ns$|idle_ns$|rpc\.|app_server\.)/;
-  const keys = Object.keys(attrs).filter((k) => !hide.test(k));
-  if (!keys.length) return null;
-  const io = keys.filter((k) => k.startsWith("io."));
-  const rest = keys.filter((k) => !k.startsWith("io.")).sort();
-  return (
-    <div className="span-attrs">
-      {io.map((key) => {
-        const label = key.replace(/^io\./, "");
-        const value = String(attrs[key]);
-        return label === "input" || label === "output" ? (
-          <div className="attr-io" key={key}>
-            <span className="attr-k">{label}</span>
-            <pre className="attr-pre">{value}</pre>
-          </div>
-        ) : (
-          <AttrRow key={key} label={label} value={value} />
-        );
-      })}
-      {rest.map((key) => (
-        <AttrRow key={key} label={key} value={typeof attrs[key] === "object" ? JSON.stringify(attrs[key]) : String(attrs[key])} />
-      ))}
-    </div>
-  );
-}
-
-export function AttrRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="attr-row">
-      <span className="attr-k">{label}</span>
-      <span className="attr-v">{value}</span>
-    </div>
-  );
-}

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

@@ -1,157 +0,0 @@
-import type { T, ToolBlockCall } from "../shared.ts";
-import type { ObjectRecord, ToolResultEvent, TranscriptEvent } from "../types.ts";
-import { TOOL_VERB, resultBody, toolPrimaryArg } from "../lib/transcript-data.tsx";
-import { prettyJson, previewText, truncate } from "../lib/format.ts";
-
-export function Transcript({ events, t }: { events: TranscriptEvent[]; t: T }) {
-  if (!Array.isArray(events) || !events.length) return <div className="trace-span-meta">{t("transcript.noEvents")}</div>;
-  const resultByCall = new Map<string, ToolResultEvent>();
-  for (const event of events) {
-    if (event.type === "action.result" || event.type === "subagent.completed") resultByCall.set(event.callId, event);
-  }
-  const pairedResult = new Set<string>();
-  return (
-    <div className="transcript">
-      {events.map((event, index) => {
-        switch (event.type) {
-          case "message":
-            return <MessageBlock event={event} t={t} key={index} />;
-          case "thinking":
-            return <ThinkBlock event={event} t={t} key={index} />;
-          case "action.called": {
-            const result = resultByCall.get(event.callId);
-            if (result) pairedResult.add(event.callId);
-            return <ToolBlock call={event} result={result} t={t} key={index} />;
-          }
-          case "subagent.called": {
-            const result = resultByCall.get(event.callId);
-            if (result) pairedResult.add(event.callId);
-            return (
-              <ToolBlock
-                call={{ tool: "agent_task", name: event.name, input: { description: event.name, ...(event.remoteUrl ? { remoteUrl: event.remoteUrl } : {}) } }}
-                result={result}
-                t={t}
-                key={index}
-              />
-            );
-          }
-          case "action.result":
-          case "subagent.completed":
-            return pairedResult.has(event.callId) ? null : (
-              <ToolBlock call={{ tool: "unknown", name: "result", input: null }} result={event} t={t} key={index} />
-            );
-          case "input.requested":
-            return <InputBlock event={event} t={t} key={index} />;
-          case "skill.loaded":
-            return (
-              <div className="ts-skill" key={index}>
-                <span className="ts-role">{t("transcript.skillLoaded")}</span>
-                <div className="ts-text">{event.skill}</div>
-              </div>
-            );
-          case "view.raw":
-            return <RawEventBlock raw={event.raw} t={t} key={index} />;
-          case "compaction":
-            return (
-              <div className="ts-compaction" key={index}>
-                {t("transcript.contextCompacted")}{event.reason ? " · " + event.reason : ""}
-              </div>
-            );
-          case "error":
-            return (
-              <div className="ts-error" key={index}>
-                ! {event.message || "error"}
-              </div>
-            );
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-}
-
-/** 未识别事件的原样展示:摘要行带原始 type,展开是完整 JSON——不静默丢,方便发现新词汇后续补一等呈现。 */
-export function RawEventBlock({ raw, t }: { raw: ObjectRecord; t: T }) {
-  const type = typeof raw.type === "string" ? raw.type : "?";
-  const body = prettyJson(raw);
-  return (
-    <details className="ts-tool-d ts-raw">
-      <summary className="ts-row">
-        <span className="ts-dot pending" />
-        <span className="ts-tool">{type}</span>
-        <span className="ts-preview">{t("transcript.rawEvent")}</span>
-      </summary>
-      <div className="ts-body">
-        <pre className="attr-pre">{truncate(body, 8000)}</pre>
-      </div>
-    </details>
-  );
-}
-
-export function MessageBlock({ event, t }: { event: Extract<TranscriptEvent, { type: "message" }>; t: T }) {
-  const who = event.role === "assistant" ? "assistant" : "user";
-  return (
-    <div className={`ts-msg ts-${who}`}>
-      <span className="ts-role">{who === "assistant" ? t("transcript.assistant") : t("transcript.user")}</span>
-      <div className="ts-text">{event.text || ""}</div>
-    </div>
-  );
-}
-
-export function ThinkBlock({ event, t }: { event: Extract<TranscriptEvent, { type: "thinking" }>; t: T }) {
-  return (
-    <details className="ts-think">
-      <summary>{t("transcript.thinking")}</summary>
-      <div className="ts-think-text">{event.text || ""}</div>
-    </details>
-  );
-}
-
-export function InputBlock({ event, t }: { event: Extract<TranscriptEvent, { type: "input.requested" }>; t: T }) {
-  const request = event.request || {};
-  const opts = (request.options || []).map((o: { id: string; label?: string }) => o.label || o.id).filter(Boolean).join("  /  ");
-  const body = (request.prompt || t("transcript.awaitingInput")) + (opts ? "\n[ " + opts + " ]" : "");
-  return (
-    <div className="ts-msg ts-input">
-      <span className="ts-role">{t("transcript.inputRequested")}</span>
-      <div className="ts-text">{body}</div>
-    </div>
-  );
-}
-
-export function ToolBlock({ call, result, t }: { call: ToolBlockCall; result?: ToolResultEvent; t: T }) {
-  const verb = (call.tool ? TOOL_VERB[call.tool] : undefined) || call.name || call.tool || "tool";
-  const arg = toolPrimaryArg(call);
-  const label = arg ? `${verb}(${arg})` : verb;
-  const status = result ? result.status : "pending";
-  const dot = status === "failed" ? "bad" : status === "rejected" ? "warn" : status === "pending" ? "pending" : "good";
-  const inputStr = call.input == null ? "" : prettyJson(call.input);
-  const outBody = result ? resultBody(result.output) : "";
-  const preview = result ? previewText(outBody) : t("transcript.running");
-  return (
-    <details className="ts-tool-d">
-      <summary className="ts-row">
-        <span className={`ts-dot ${dot}`} />
-        <span className="ts-tool" title={label}>
-          {label}
-        </span>
-        <span className="ts-preview">{truncate(preview, 140)}</span>
-      </summary>
-      <div className="ts-body">
-        {inputStr ? (
-          <div className="ts-field">
-            <span className="ts-k">{t("transcript.input")}</span>
-            <pre className="attr-pre">{truncate(inputStr, 4000)}</pre>
-          </div>
-        ) : null}
-        {result ? (
-          <div className="ts-field">
-            <span className="ts-k">{t("transcript.output")}{result.status && result.status !== "completed" ? " · " + result.status : ""}</span>
-            <pre className="attr-pre">{outBody ? truncate(outBody, 8000) : <span className="reason-empty">{t("transcript.empty")}</span>}</pre>
-          </div>
-        ) : null}
-      </div>
-    </details>
-  );
-}