@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/Items.tsx

@@ -0,0 +1,608 @@
+import { createContext, memo, useContext, useMemo, useState, type ReactNode } from "react";
+import { Link } from "react-router";
+import { useMutation } from "@tanstack/react-query";
+import type { Item, TaskProgress, ToolResult } from "../transcript.ts";
+import { collapse, fromHunks, lineDiff, type DiffLine } from "../diff.ts";
+import { Markdown } from "./Markdown.tsx";
+import { CopyButton as CopyMessageButton } from "./CopyButton.tsx";
+import { copyText } from "../clipboard.ts";
+import { ChevronIcon } from "./icons.tsx";
+import { AlertIcon, MicIcon, VolumeOffIcon } from "../ui/icons.tsx";
+import { splitUserText } from "../user-text.ts";
+import { Button } from "../ui/Button.tsx";
+import { openImagePreview } from "./ImagePreview.tsx";
+import { getReasoningExpanded } from "../reasoning-preference.ts";
+import { ItemViewState } from "../item-view-state.ts";
+import { IMAGE_EXTENSIONS } from "@shared/files.ts";
+import { uuid } from "../uuid.ts";
+
+/** Where tool cards live: project root (for relative paths) and the link base for subagent pages. */
+export const TranscriptContext = createContext<{
+  root?: string;
+  sessionUrl?: string;
+  /** Current transcript identity for folds, independent of the root used by agent links. */
+  viewKey?: string;
+  userActions?: (uuid: string) => ReactNode;
+  loadMessage?: (uuid: string) => Promise<void>;
+  backgroundTool?: (toolUseId: string) => Promise<void>;
+  readImageUrl?: (toolUseId: string) => string | undefined;
+  /** Todo id → subject, so TaskUpdate lines can say which item changed. A stable, mutated map (no re-renders). */
+  todoNames?: Map<string, string>;
+}>({});
+
+export const ItemView = memo(function ItemView({ item }: { item: Item }) {
+  const deferredUuid = item.deferred?.uuid ?? (item.kind === "tool" ? item.result?.deferredUuid : undefined);
+  return <div data-annotation-item={item.key}><ItemContent item={item} />{deferredUuid && <DeferredMessage uuid={deferredUuid} />}</div>;
+});
+
+function DeferredMessage({ uuid }: { uuid: string }) {
+  const { loadMessage } = useContext(TranscriptContext);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  if (!loadMessage) return null;
+  return <div className="mt-2 text-xs text-muted">
+    <Button size="sm" disabled={busy} onClick={async () => {
+      setBusy(true); setError("");
+      try { await loadMessage(uuid); } catch (e) { setError((e as Error).message); } finally { setBusy(false); }
+    }}>{busy ? "加载中…" : "加载完整消息"}</Button>
+    {error && <p className="mt-1 text-danger">{error}</p>}
+  </div>;
+}
+
+function ItemContent({ item }: { item: Item }) {
+  switch (item.kind) {
+    case "user":
+      return <UserMessage item={item} />;
+    case "text":
+      return (
+        <div className="group/text relative" data-testid="assistant-text" data-streaming={item.streaming ? "true" : undefined}>
+          <Markdown text={item.text} />
+          {!item.streaming && <CopyButton text={item.text} />}
+        </div>
+      );
+    case "thinking":
+      return (
+        <Collapsible label={<span className="italic">思考过程</span>} testId="thinking" stateKey={item.key} stateAliases={item.streamStateKey ? [item.streamStateKey] : undefined} defaultOpen={getReasoningExpanded()} rememberInitial>
+          <div className="whitespace-pre-wrap px-3 py-3 text-sm text-muted md:px-4">{item.text}</div>
+        </Collapsible>
+      );
+    case "tool":
+      return <ToolView item={item} />;
+    case "result":
+      return (
+        <div className="flex items-center gap-3 border-t border-border pt-2 text-xs text-muted" data-testid="turn-result">
+          {!item.ok && <span className="text-danger">{item.subtype === "error_during_execution" ? "已中断" : item.error || (item.subtype === "success" ? "出错" : item.subtype)}</span>}
+          {item.durationMs !== undefined && <span>耗时 {(item.durationMs / 1000).toFixed(1)}s</span>}
+          {item.turnCostUsd !== undefined && item.turnCostUsd > 0 && (
+            <span title="本轮花费" data-testid="turn-cost">
+              费用 ${item.turnCostUsd.toFixed(4)}
+            </span>
+          )}
+        </div>
+      );
+    case "bash":
+      return <BashBlock item={item} />;
+    case "local":
+      return (
+        <Clipped text={item.text} stateKey={item.key}>
+          {(text) => (
+            <pre className="overflow-x-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-surface-2/60 px-3 py-2 font-mono text-xs leading-relaxed" data-testid="local-output">
+              {text}
+            </pre>
+          )}
+        </Clipped>
+      );
+    case "notice":
+      return <div className={`text-center text-xs ${item.tone === "error" ? "text-danger" : "text-muted"}`}>{item.text}</div>;
+  }
+}
+
+function BashBlock({ item }: { item: Extract<Item, { kind: "bash" }> }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-border font-mono text-xs" data-testid="bash-block" data-running={item.running ? "true" : undefined}>
+      <div className="flex items-center gap-2 bg-surface-2 px-3 py-2">
+        <span className="text-accent">!</span>
+        <span className="min-w-0 flex-1 whitespace-pre-wrap break-all text-text">{item.command}</span>
+        {item.running && <span className="size-1.5 shrink-0 animate-pulse rounded-full bg-accent" />}
+      </div>
+      {(item.stdout || item.stderr) && (
+        <Clipped text={(item.stdout ?? "") + (item.stderr ? (item.stdout ? "\n" : "") + item.stderr : "")} stateKey={item.key}>
+          {(_, shown) => (
+            <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words px-3 py-2" data-testid="bash-output">
+              {item.stdout?.slice(0, shown)}
+              {item.stderr && shown > (item.stdout?.length ?? 0) && (
+                <span className="text-danger">
+                  {item.stdout ? "\n" : ""}
+                  {item.stderr.slice(0, shown - (item.stdout ? item.stdout.length + 1 : 0))}
+                </span>
+              )}
+            </pre>
+          )}
+        </Clipped>
+      )}
+    </div>
+  );
+}
+
+/** /copy on the web: copy one reply's markdown. Always visible on touch screens, on hover elsewhere. */
+function CopyButton({ text }: { text: string }) {
+  const [done, setDone] = useState(false);
+  return (
+    <button
+      className="mt-1 rounded px-1.5 py-0.5 text-xs text-muted opacity-100 hover:bg-surface-2 hover:text-text md:opacity-0 md:group-hover/text:opacity-100"
+      aria-label="复制回复"
+      onClick={async () => {
+        await copyText(text);
+        setDone(true);
+        setTimeout(() => setDone(false), 1500);
+      }}
+    >
+      {done ? "已复制" : "复制"}
+    </button>
+  );
+}
+
+function UserMessage({ item }: { item: Extract<Item, { kind: "user" }> }) {
+  const { userActions } = useContext(TranscriptContext);
+  // Deferred history contains only a preview; load the full message before copying.
+  const canCopyText = !!item.text.trim() && !item.deferred;
+  return (
+    <div className="group" data-testid="user-message" data-uuid={item.key}>
+      <div className="flex justify-end">
+        <div className="max-w-[85%] whitespace-pre-wrap break-words rounded-2xl bg-surface-2 px-4 py-2.5">
+          {item.scheduled && <div className="mb-1 text-[10px] font-medium text-accent">IDECron</div>}
+          {item.imageSrcs?.length ? (
+            <div className="mb-1.5 flex flex-wrap justify-end gap-1.5">
+              {item.imageSrcs.map((src, i) => (
+                <button key={i} type="button" onClick={() => openImagePreview(src, `图片 ${i + 1}`)} aria-label={`预览图片 ${i + 1}`} className="shrink-0 cursor-zoom-in rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50">
+                  <img src={src} alt={`图片 ${i + 1}`} data-testid="user-image" className="size-20 rounded-lg border border-border object-cover" />
+                </button>
+              ))}
+            </div>
+          ) : (
+            item.images > 0 && <div className="mb-1 text-xs text-muted">[{item.images} 张图片]</div>
+          )}
+          <UserMessageText text={item.text} />
+        </div>
+      </div>
+      {(canCopyText || userActions) && <div className="mt-1 flex items-center justify-end gap-1">
+        {canCopyText && <CopyMessageButton text={item.text} label="复制消息" />}
+        {userActions?.(item.key)}
+      </div>}
+    </div>
+  );
+}
+
+function UserMessageText({ text }: { text: string }) {
+  const parts = useMemo(() => splitUserText(text), [text]);
+  if (parts.every((part) => part.kind === "text")) return text;
+  return (
+    <div className="space-y-2">
+      {parts.map((part, index) => part.kind === "text" ? (
+        part.text.trim() ? <div key={index} className="whitespace-pre-wrap">{part.text}</div> : null
+      ) : (
+        <div key={index} className={`min-w-0 rounded-lg border px-3 py-2 ${part.kind === "asr-warning" ? "border-accent/40 bg-accent/5" : part.kind === "unheard_text" ? "border-dashed border-border bg-bg/60" : "border-accent/20 bg-bg/60"}`} data-testid={part.kind}>
+          <div className="mb-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 whitespace-normal text-xs text-muted">
+            <span className={`inline-flex items-center gap-1.5 ${part.kind !== "unheard_text" ? "text-accent" : ""}`}>
+              {part.kind === "asr-warning" ? <AlertIcon /> : part.kind === "asr-recognized-text" ? <MicIcon /> : <VolumeOffIcon />}
+              {part.kind === "asr-warning" ? "语音识别纠偏" : part.kind === "asr-recognized-text" ? "语音输入" : "未听到的内容"}
+            </span>
+            {part.kind === "unheard_text" && part.reason && <span className="rounded bg-surface-2 px-1.5 py-0.5">{part.reason}</span>}
+          </div>
+          <div className={`whitespace-pre-wrap ${part.kind === "unheard_text" ? "text-muted" : ""}`}>{part.text}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------- view state that survives remounts ----------
+//
+// Long transcripts are virtualized: rows leave the DOM when scrolled away. Whether a
+// card was opened (or "show all" clicked) is kept here by item key so it comes back.
+
+const viewState = new ItemViewState();
+
+function useViewState(key: string | undefined, initial: boolean, rememberInitial = false, aliases?: readonly string[]): [boolean, (v: boolean) => void] {
+  const [local, setLocal] = useState(() => ({ key, choice: viewState.read(key, initial, rememberInitial, aliases) }));
+  // Resolve on render as well: replay/history may reveal the stream alias after
+  // this completed card has already mounted with its default choice.
+  const choice = viewState.read(key, initial, rememberInitial, aliases, local.key === key ? local.choice : undefined);
+  return [
+    choice.value,
+    (next: boolean) => {
+      setLocal({ key, choice: viewState.write(key, next, aliases) });
+    },
+  ];
+}
+
+// ---------- long output ----------
+
+const CLIP_LINES = 200;
+const CLIP_CHARS = 20_000;
+
+/** Where to cut a long text for the first render, or -1 when it is short enough. */
+function clipAt(text: string, lines = CLIP_LINES, chars = CLIP_CHARS): number {
+  if (text.length <= chars && text.length < lines * 20) return -1;
+  let at = -1;
+  for (let n = 0; n < lines; n++) {
+    at = text.indexOf("\n", at + 1);
+    if (at === -1) break;
+  }
+  const cut = at === -1 ? Math.min(text.length, chars) : Math.min(at, chars);
+  return cut >= text.length ? -1 : cut;
+}
+
+function countLines(text: string) {
+  let n = 1;
+  for (let i = text.indexOf("\n"); i !== -1; i = text.indexOf("\n", i + 1)) n++;
+  return n;
+}
+
+/** Renders the start of a long text first, with a button to show all of it. */
+export function Clipped({ text, stateKey, children }: { text: string; stateKey?: string; children: (shown: string, length: number) => ReactNode }) {
+  const [all, setAll] = useViewState(stateKey && `${stateKey}:all`, false);
+  const cut = all ? -1 : clipAt(text);
+  if (cut === -1) return <>{children(text, text.length)}</>;
+  return (
+    <>
+      {children(text.slice(0, cut), cut)}
+      <ShowAll onClick={() => setAll(true)} label={`显示全部（共 ${countLines(text)} 行，${Math.ceil(text.length / 1024)} KB）`} />
+    </>
+  );
+}
+
+function ShowAll({ onClick, label }: { onClick: () => void; label: string }) {
+  return (
+    <button className="block w-full border-t border-border px-3 py-2 text-left text-xs text-accent hover:bg-surface-2" onClick={onClick} data-testid="show-all">
+      {label}
+    </button>
+  );
+}
+
+function Collapsible({
+  label,
+  children,
+  testId,
+  attrs,
+  stateKey,
+  stateAliases,
+  actions,
+  defaultOpen = false,
+  rememberInitial = false,
+}: {
+  label: ReactNode;
+  children: ReactNode;
+  testId?: string;
+  attrs?: Record<string, string>;
+  /** Remember open/closed under this key across remounts. */
+  stateKey?: string;
+  stateAliases?: readonly string[];
+  actions?: ReactNode;
+  defaultOpen?: boolean;
+  rememberInitial?: boolean;
+}) {
+  const [open, setOpen] = useViewState(stateKey && `${stateKey}:open`, defaultOpen, rememberInitial, stateAliases?.map((key) => `${key}:open`));
+  return (
+    <div className="min-w-0 rounded-lg border border-border bg-surface/60" data-testid={testId} {...attrs}>
+      <div className="flex min-w-0 items-center">
+        <button className="flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-left text-sm text-muted" onClick={() => setOpen(!open)} aria-expanded={open}>
+          <ChevronIcon open={open} />
+          {label}
+        </button>
+        {actions && <div className="shrink-0 pr-2">{actions}</div>}
+      </div>
+      {open && <div className="min-w-0 border-t border-border">{children}</div>}
+    </div>
+  );
+}
+
+// ---------- tools ----------
+
+type ToolItem = Extract<Item, { kind: "tool" }>;
+
+const str = (v: unknown) => (typeof v === "string" ? v : "");
+
+function useRel() {
+  const { root } = useContext(TranscriptContext);
+  return (p: string) => (root && p.startsWith(root + "/") ? p.slice(root.length + 1) : p);
+}
+
+function statusOf(item: ToolItem): "running" | "done" | "error" {
+  if (item.task && item.task.status !== "running" && !item.result) return item.task.status === "completed" ? "done" : "error";
+  return !item.result ? "running" : item.result.isError ? "error" : "done";
+}
+
+function StatusMark({ status }: { status: "running" | "done" | "error" }) {
+  if (status === "running") return <span className="ml-auto size-1.5 shrink-0 animate-pulse rounded-full bg-accent" aria-label="运行中" />;
+  if (status === "error") return <span className="ml-auto shrink-0 text-xs text-danger">失败</span>;
+  return null;
+}
+
+function ToolLabel({ item, children }: { item: ToolItem; children?: ReactNode }) {
+  return (
+    <span className="flex min-w-0 flex-1 items-center gap-2">
+      <span className="shrink-0 font-medium text-text">{item.name}</span>
+      <span className="min-w-0 truncate font-mono text-xs">{children}</span>
+      <StatusMark status={statusOf(item)} />
+    </span>
+  );
+}
+
+export function resultText(result: ToolResult | undefined): string {
+  if (!result) return "";
+  const c = result.content;
+  if (typeof c === "string") return c;
+  if (Array.isArray(c)) return c.map((b) => (b && typeof b === "object" && "text" in b ? String(b.text) : "")).join("\n");
+  return JSON.stringify(c, null, 2);
+}
+
+function ToolView({ item }: { item: ToolItem }) {
+  const attrs = { "data-tool": item.name, "data-status": statusOf(item), "data-tool-id": item.id };
+  switch (item.name) {
+    case "Bash":
+      return <BashCard item={item} attrs={attrs} />;
+    case "Edit":
+    case "MultiEdit":
+    case "Write":
+    case "NotebookEdit":
+      return <EditCard item={item} attrs={attrs} />;
+    case "Agent":
+    case "Task":
+      return <AgentCard item={item} attrs={attrs} />;
+    case "TaskCreate":
+    case "TaskUpdate":
+    case "TodoWrite":
+    case "TaskList":
+    case "TaskGet":
+      return <TodoLine item={item} attrs={attrs} />;
+    default:
+      return <GenericCard item={item} attrs={attrs} />;
+  }
+}
+
+function Output({ text, error, stateKey }: { text: string; error?: boolean; stateKey?: string }) {
+  if (!text) return null;
+  return (
+    <Clipped text={text} stateKey={stateKey}>
+      {(shown) => <pre className={`max-h-80 overflow-auto whitespace-pre-wrap break-words px-3 py-2 font-mono text-xs leading-relaxed ${error ? "text-danger" : ""}`}>{shown}</pre>}
+    </Clipped>
+  );
+}
+
+function BashCard({ item, attrs }: { item: ToolItem; attrs: Record<string, string> }) {
+  const { backgroundTool } = useContext(TranscriptContext);
+  const [backgrounded, setBackgrounded] = useViewState(`${item.key}:backgrounded`, false);
+  const background = useMutation({
+    mutationFn: async () => {
+      if (!backgroundTool) throw new Error("会话当前未运行");
+      await backgroundTool(item.id);
+    },
+    onSuccess: () => setBackgrounded(true),
+  });
+  const canBackground = !!backgroundTool && !item.result && item.input.run_in_background !== true && statusOf(item) === "running";
+  const cmd = str(item.input.command);
+  const out = resultText(item.result);
+  return (
+    <div className="space-y-1">
+    <Collapsible testId="tool-call" attrs={attrs} stateKey={item.key} label={<ToolLabel item={item}>{str(item.input.description) || cmd.split("\n")[0]}</ToolLabel>} actions={canBackground && (
+      <Button variant="ghost" size="sm" loading={background.isPending} disabled={backgrounded} title="命令继续在后台运行，让 agent 继续执行" data-testid="bash-background" onClick={() => background.mutate()}>
+        {backgrounded ? "已转后台" : "转后台"}
+      </Button>
+    )}>
+      <pre className="overflow-x-auto whitespace-pre-wrap break-words bg-surface-2/60 px-3 py-2 font-mono text-xs" data-testid="bash-command">
+        <span className="select-none text-muted">$ </span>
+        {cmd}
+      </pre>
+      <div data-testid="bash-output">
+        <Output text={out} error={item.result?.isError} stateKey={item.key} />
+      </div>
+    </Collapsible>
+    {background.isError && !item.result && <p role="alert" className="px-3 text-xs text-danger">{background.error.message}</p>}
+    </div>
+  );
+}
+
+function editDiff(item: ToolItem): DiffLine[] {
+  const structured = item.result?.structured as { structuredPatch?: { oldStart: number; newStart: number; lines: string[] }[]; type?: string } | undefined;
+  if (structured?.structuredPatch?.length) return fromHunks(structured.structuredPatch);
+  const input = item.input;
+  if (item.name === "Write") return collapse(str(input.content).split("\n").map((t, i) => ({ type: "+" as const, text: t, newNo: i + 1 })), 1e9);
+  if (item.name === "MultiEdit" && Array.isArray(input.edits)) {
+    return (input.edits as { old_string: string; new_string: string }[]).flatMap((e, i) => [
+      ...(i ? [{ type: "gap" as const, count: 0 }] : []),
+      ...lineDiff(e.old_string ?? "", e.new_string ?? ""),
+    ]);
+  }
+  return lineDiff(str(input.old_string), str(input.new_string));
+}
+
+function EditCard({ item, attrs }: { item: ToolItem; attrs: Record<string, string> }) {
+  const rel = useRel();
+  const rows = editDiff(item);
+  const adds = rows.filter((r) => r.type === "+").length;
+  const dels = rows.filter((r) => r.type === "-").length;
+  return (
+    <Collapsible
+      testId="tool-call"
+      attrs={attrs}
+      stateKey={item.key}
+      label={
+        <ToolLabel item={item}>
+          {rel(str(item.input.file_path) || str(item.input.notebook_path))}
+          <span className="ml-2 text-ok">+{adds}</span> <span className="text-danger">-{dels}</span>
+        </ToolLabel>
+      }
+    >
+      {item.result?.isError ? <Output text={resultText(item.result)} error /> : <DiffView rows={rows} stateKey={item.key} />}
+    </Collapsible>
+  );
+}
+
+/** Diffs longer than this render their first rows until "show all". */
+const DIFF_ROWS = 300;
+
+export function DiffView({ rows: allRows, stateKey }: { rows: DiffLine[]; stateKey?: string }) {
+  const [all, setAll] = useViewState(stateKey && `${stateKey}:all`, false);
+  const rows = all || allRows.length <= DIFF_ROWS ? allRows : allRows.slice(0, DIFF_ROWS);
+  return (
+    <div className="max-h-[28rem] overflow-auto font-mono text-xs leading-relaxed" data-testid="diff">
+      <table className="w-full border-collapse">
+        <tbody>
+          {rows.map((r, i) =>
+            r.type === "gap" ? (
+              <tr key={i} className="bg-surface-2/50 text-muted">
+                <td colSpan={3} className="px-3 py-0.5 text-center">
+                  {r.count ? `… ${r.count} 行未改动` : "⋯"}
+                </td>
+              </tr>
+            ) : (
+              <tr key={i} className={r.type === "+" ? "bg-ok/10" : r.type === "-" ? "bg-danger/10" : ""} data-diff={r.type === "+" ? "add" : r.type === "-" ? "del" : "ctx"}>
+                <td className="w-10 select-none px-2 text-right align-top text-muted/70">{r.type === "+" ? r.newNo : r.oldNo}</td>
+                <td className={`w-4 select-none align-top ${r.type === "+" ? "text-ok" : r.type === "-" ? "text-danger" : "text-muted"}`}>{r.type === " " ? "" : r.type}</td>
+                <td className="whitespace-pre-wrap break-all pr-3">{r.text || " "}</td>
+              </tr>
+            ),
+          )}
+        </tbody>
+      </table>
+      {rows.length < allRows.length && <ShowAll onClick={() => setAll(true)} label={`显示全部（共 ${allRows.length} 行）`} />}
+    </div>
+  );
+}
+
+/** The subagent's final report without the hand-back frame and usage trailer. */
+export function agentReport(text: string): string {
+  let t = text;
+  const marker = t.indexOf("The report follows:\n");
+  if (t.startsWith("[Subagent hand-back]") && marker !== -1) {
+    const body = t.slice(marker + "The report follows:\n".length).split("\n");
+    const lines: string[] = [];
+    for (const l of body) {
+      if (l.startsWith("  ") || l === "") lines.push(l.slice(2));
+      else break;
+    }
+    t = lines.join("\n");
+  }
+  return t.replace(/\nagentId: [\s\S]*$/, "").trim();
+}
+
+function AgentCard({ item, attrs }: { item: ToolItem; attrs: Record<string, string> }) {
+  const { sessionUrl } = useContext(TranscriptContext);
+  const status = statusOf(item);
+  const task: TaskProgress | undefined = item.task;
+  const description = str(item.input.description) || task?.description || "子 agent";
+  const type = str(item.input.subagent_type) || task?.subagentType;
+  const report = item.result ? agentReport(resultText(item.result)) : "";
+  const asyncLaunch = report.startsWith("Async agent launched");
+  return (
+    <Collapsible testId="tool-call" attrs={{ ...attrs, "data-agent": "true" }} stateKey={item.key} label={
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        <span className="shrink-0 rounded bg-accent/15 px-1.5 py-0.5 text-xs font-medium text-accent">子 agent</span>
+        <span className="min-w-0 flex-1 truncate font-medium">{description}</span>
+        {type && <span className="hidden shrink-0 text-xs text-muted sm:inline">{type}</span>}
+        <StatusMark status={asyncLaunch && (!task || task.status === "running") ? "running" : status} />
+      </span>
+    }>
+      {(status === "running" || asyncLaunch) && task?.status !== "completed" && (
+        <div className="border-t border-border px-3 py-1.5 text-xs text-muted" data-testid="agent-progress">
+          {task?.summary || (task?.lastTool ? `正在使用 ${task.lastTool}` : "启动中…")}
+          {task?.toolUses !== undefined && <span className="ml-2">· {task.toolUses} 次工具调用</span>}
+          {item.steps ? <span className="ml-2">· {item.steps} 步</span> : null}
+        </div>
+      )}
+      {report && !asyncLaunch && (
+        <div className="max-h-96 overflow-y-auto border-t border-border px-3 py-2 text-sm" data-testid="agent-report">
+          <Markdown text={report} />
+        </div>
+      )}
+      {sessionUrl && (
+        <div className="border-t border-border px-3 py-1.5 text-right">
+          <Link to={`${sessionUrl}/agent/${item.id}`} className="text-xs text-accent hover:underline">
+            查看完整过程 →
+          </Link>
+        </div>
+      )}
+    </Collapsible>
+  );
+}
+
+function TodoLine({ item, attrs }: { item: ToolItem; attrs: Record<string, string> }) {
+  const { todoNames } = useContext(TranscriptContext);
+  const i = item.input;
+  let text: string;
+  if (item.name === "TaskCreate") text = `新增待办：${str(i.subject)}`;
+  else if (item.name === "TaskUpdate") {
+    const name = todoNames?.get(str(i.taskId)) ?? `#${str(i.taskId)}`;
+    text = i.status ? `${STATUS_ZH[str(i.status)] ?? str(i.status)}：${name}` : `更新待办：${name}`;
+  }
+  else if (item.name === "TodoWrite") text = "更新待办清单";
+  else text = "查看待办";
+  return (
+    <div className="flex items-center gap-2 px-1 text-xs text-muted" data-testid="tool-call" {...attrs}>
+      <span>☑</span>
+      <span className="min-w-0 truncate">{text}</span>
+    </div>
+  );
+}
+
+const STATUS_ZH: Record<string, string> = { pending: "待办", in_progress: "进行中", completed: "已完成", deleted: "已删除" };
+
+function genericSummary(name: string, input: Record<string, unknown>, rel: (p: string) => string): string {
+  switch (name) {
+    case "Read":
+      return rel(str(input.file_path));
+    case "Glob":
+    case "Grep":
+      return str(input.pattern) + (input.path ? `  ${rel(str(input.path))}` : "");
+    case "WebFetch":
+      return str(input.url);
+    case "WebSearch":
+      return str(input.query);
+    case "ToolSearch":
+      return str(input.query);
+    case "Skill":
+      return str(input.skill) || str(input.command);
+    default:
+      return "";
+  }
+}
+
+function GenericCard({ item, attrs }: { item: ToolItem; attrs: Record<string, string> }) {
+  const rel = useRel();
+  const out = resultText(item.result);
+  return (
+    <Collapsible testId="tool-call" attrs={attrs} stateKey={item.key} label={<ToolLabel item={item}>{genericSummary(item.name, item.input, rel)}</ToolLabel>}>
+      <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-words px-3 py-2 font-mono text-xs text-muted">{JSON.stringify(item.input, null, 2)}</pre>
+      <ReadImage item={item} />
+      {item.result && (
+        <div className="border-t border-border">
+          <Output text={out} error={item.result.isError} stateKey={item.key} />
+        </div>
+      )}
+    </Collapsible>
+  );
+}
+
+function ReadImage({ item }: { item: ToolItem }) {
+  const { readImageUrl } = useContext(TranscriptContext);
+  const file = str(item.input.file_path);
+  const src = item.name === "Read" && !item.result?.isError && IMAGE_EXTENSIONS.some((extension) => file.toLowerCase().endsWith(extension))
+    ? readImageUrl?.(item.id) : undefined;
+  return src ? <OptionalReadImage key={src} src={src} file={file} /> : null;
+}
+
+function OptionalReadImage({ src, file }: { src: string; file: string }) {
+  // A decoded <img> can be reused despite no-store. A fresh expansion must
+  // check the current temporary file instead of reviving an old decoded image.
+  const [url] = useState(() => `${src}${src.includes("?") ? "&" : "?"}preview=${uuid()}`);
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  if (failed) return null;
+  return <button type="button" hidden={!loaded} aria-label={`预览图片 ${file}`} title="临时预览当前文件"
+    onClick={() => openImagePreview(url, file, true)}
+    className="mx-3 mb-3 max-w-[calc(100%_-_1.5rem)] cursor-zoom-in rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50">
+    <img src={url} alt={file} onLoad={() => setLoaded(true)} onError={() => setFailed(true)}
+      data-testid="read-image" className="max-h-80 max-w-full rounded-lg border border-border object-contain" />
+  </button>;
+}