@opengeni/react 3.3.2 → 3.4.0

package/src/timeline/tool-renderers.tsx

@@ -1,8 +1,11 @@
-import {
-  parseSandboxFileArtifactReceipt,
-  type GitFileDiff,
-  type RetainedArtifactReference,
-} from "@opengeni/sdk";
+import { useHasToolReview, useRecordedToolReview } from "../components/tool-review-history";
+import { ToolActionReviewCard } from "../components/tool-action-review";
+import { SecretRefText } from "../components/secret-ref-chip";
+import type { ToolReviewStatus } from "@opengeni/sdk";
+import { KnowledgeReceiptRow } from "./knowledge-receipt";
+import { defaultUrlTransform } from "react-markdown";
+import { isRetainedImageContentType, useRetainedImageObjectUrl } from "./retained-image";
+import { parseSandboxFileArtifactReceipt, type RetainedArtifactReference } from "@opengeni/sdk";
 import {
   BoxIcon,
   BrainCircuitIcon,
@@ -33,28 +36,20 @@ import {
   TerminalIcon,
   VideoIcon,
   WrenchIcon,
+  type LucideIcon,
 } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { formatBytes, stringifyPayload, tryParseJson } from "../lib/format";
+import { useContext, useState, type ReactNode } from "react";
+import { formatBytes, tryParseJson } from "../lib/format";
 import { useTimelineComputeLabel } from "./compute-label";
+import { ConnectorLogoIcon, useToolConnectorLogo } from "./provider-logo";
 import {
-  applyPatchOpsFromToolItem,
-  controlCaret,
-  execTruncated,
   generatedImageReceipt,
-  isExecSessionLostBanner,
-  looksBinary,
   mediaPreviewFact,
-  parseExecBannerSessionId,
   parseToolArgs,
   retainedScreenshotMetadata,
-  sandboxCommandExitCode,
-  stripExecBanner,
-  tailPeek,
+  retainedToolResultImages,
   unwrapMcpOutput,
-  v4aToGitFileDiff,
   screenshotDataUrl,
-  type ApplyPatchOperation,
 } from "./parsers";
 import {
   createToolRegistry,
@@ -71,18 +66,41 @@ import {
   TermBlock,
   Thumbnail,
   ActivityDisclosure,
+  CompactActivityContext,
   type DisclosureChip,
 } from "./shared";
 import { RawPatch, ToolDiff } from "./tool-diff";
+import {
+  applyPatchPresentation,
+  askPresentation,
+  execPresentation,
+  genericToolIconKind,
+  genericToolPresentation,
+  parseDisclosedTools,
+  parseSearchHits,
+  pathBasename,
+  pathDirname,
+  runOnPresentation,
+  toolSearchPreview,
+  toolSearchQuery,
+  truncatePreview,
+  webSearchPresentation,
+  writeStdinPresentation,
+  type ToolBody,
+  type ToolIconKind,
+  type ToolPreview,
+  type ToolRowPresentation,
+  type WebSearchResult,
+} from "./tool-presentation";
+import { isPatchFilename, PatchApplyCommand } from "./patch-apply-command";
 import { mcpToolLeaf, toolDisplayName } from "./tool-display-name";
+import { useOpenGeniLinkResolver } from "../components/open-geni-links";
 
 /* ----------------------------------------------------------------------------
    Per-tool renderers
-
    Each renderer takes one projected `ToolCallItem` and returns an `ActivityDisclosure`
    tuned for that tool's real wire shape. The defaults below populate the
    registry; the mapping is registered at the bottom of the file.
-
    Restraint is the rule: compact title + one quiet preview, secondary detail
    only on expand. No loud right-side badges — at most a single settle chip.
    -------------------------------------------------------------------------- */
@@ -96,226 +114,17 @@ const ICON_SIZE = "size-3.5";
  * left-to-right.
  */
 function RunningPreview({ children }: { children: ReactNode }) {
+  const compact = useContext(CompactActivityContext);
   return (
     <span className="inline-flex items-center gap-1.5">
-      <span className="size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-status-running" />
+      {!compact && (
+        <span className="size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-status-running" />
+      )}
       <span className="min-w-0 truncate">{children}</span>
     </span>
   );
 }
 
-/** Prefix a collapsed preview with the host-supplied active compute label. */
-function withComputePreview(label: string | null, preview: string): string {
-  if (!label) {
-    return preview;
-  }
-  return `on ${label} · ${preview}`;
-}
-
-/* ---- exec_command ---------------------------------------------------------- */
-
-function ExecRenderer({ item }: ToolRendererProps) {
-  const args = parseToolArgs(item.arguments);
-  const cmd = typeof args.cmd === "string" ? args.cmd : "";
-  const workdir = typeof args.workdir === "string" ? args.workdir : null;
-  const running = item.status === "running";
-  const out = item.output;
-  const title = `$ ${cmd}`;
-  const computeLabel = useTimelineComputeLabel();
-
-  // No output event ever arrived (item.output stays undefined from creation):
-  // the turn failed before the output insert — most likely a NUL byte in the
-  // command output prevented storage. Surface the specific explanation.
-  // (Cancelled items bypass this: a cancellation is not a NUL-storage failure.)
-  if (item.status === "failed" && out === undefined) {
-    return (
-      <ActivityDisclosure
-        icon={<TerminalIcon className={ICON_SIZE} />}
-        iconTone="failed"
-        title={title}
-        titleMono
-        chip={{ tone: "bad", text: "failed" }}
-        preview={withComputePreview(computeLabel, "output lost — NUL byte could not be stored")}
-      >
-        <BodyNote tone="error">
-          output contained a NUL byte and could not be stored; the turn failed on this tool&apos;s
-          output insert — no output event ever arrived.
-        </BodyNote>
-      </ActivityDisclosure>
-    );
-  }
-
-  // An output event arrived but the tool still failed (error:true / MCP isError)
-  // and the output is empty — show a generic failure rather than claiming NUL.
-  // (Cancelled items bypass this: a cancellation is not a tool-call failure.)
-  if (item.status === "failed" && (out == null || out === "")) {
-    return (
-      <ActivityDisclosure
-        icon={<TerminalIcon className={ICON_SIZE} />}
-        iconTone="failed"
-        title={title}
-        titleMono
-        chip={{ tone: "bad", text: "failed" }}
-        preview={withComputePreview(computeLabel, "tool call failed")}
-      >
-        <BodyNote tone="error">the tool call failed with no output.</BodyNote>
-      </ActivityDisclosure>
-    );
-  }
-
-  if (running) {
-    const streamed = typeof out === "string" ? stripExecBanner(out) : "";
-    const runningPreview = streamed ? `${streamed.split("\n").length} lines` : "running…";
-    return (
-      <ActivityDisclosure
-        icon={<TerminalIcon className={ICON_SIZE} />}
-        iconTone="running"
-        title={title}
-        titleMono
-        running
-        preview={
-          <RunningPreview>{withComputePreview(computeLabel, runningPreview)}</RunningPreview>
-        }
-      >
-        {/* The row title is already `$ ${cmd}`; the TermBlock header drops the
-            command (command={null}) so it never repeats above the output. */}
-        <TermBlock command={null} workdir={workdir} output={streamed} live />
-      </ActivityDisclosure>
-    );
-  }
-
-  const text = typeof out === "string" ? out : stringifyPayload(out);
-  const stripped = stripExecBanner(text);
-  const bgSession = parseExecBannerSessionId(text);
-  const exitCode = sandboxCommandExitCode(text);
-  const binary = looksBinary(stripped);
-
-  // Color is spent on the exception only: a clean exit (0) earns NO chip — the
-  // absence of a red token is the success signal. Background sessions surface a
-  // muted id; a non-zero exit is the one red token.
-  let chip: DisclosureChip | undefined;
-  let iconTone: "accent" | "failed" | "muted" = "muted";
-  if (bgSession != null) {
-    chip = { tone: "muted", text: `session ${bgSession}` };
-  } else if (exitCode != null && exitCode !== 0) {
-    chip = { tone: "bad", text: `exit ${exitCode}` };
-    iconTone = "failed";
-  }
-
-  const peek = binary ? "binary output" : tailPeek(stripped) || "(no output)";
-  const truncated = execTruncated(text);
-  const preview = withComputePreview(computeLabel, truncated ? `⋯ truncated · ${peek}` : peek);
-  // Hand TermBlock the FULL stripped output; it owns the tail/show-more slicing.
-  const body = binary ? "(binary output suppressed)" : stripped;
-
-  return (
-    <ActivityDisclosure
-      icon={<TerminalIcon className={ICON_SIZE} />}
-      iconTone={iconTone}
-      title={title}
-      titleMono
-      {...(chip ? { chip } : {})}
-      failed={item.status === "failed"}
-      cancelled={item.status === "cancelled"}
-      preview={preview}
-    >
-      <TermBlock
-        command={null}
-        workdir={workdir}
-        output={body}
-        failed={item.status === "failed" || (exitCode != null && exitCode !== 0)}
-      />
-      {bgSession != null ? (
-        <BodyNote>↳ session {bgSession} — a later write_stdin can target this PTY.</BodyNote>
-      ) : null}
-    </ActivityDisclosure>
-  );
-}
-
-/* ---- write_stdin ----------------------------------------------------------- */
-
-function WriteStdinRenderer({ item }: ToolRendererProps) {
-  const args = parseToolArgs(item.arguments);
-  const sessionId =
-    typeof args.session_id === "string" || typeof args.session_id === "number"
-      ? args.session_id
-      : undefined;
-  const running = item.status === "running";
-  const text = typeof item.output === "string" ? item.output : stringifyPayload(item.output);
-  const lost = isExecSessionLostBanner(text);
-  const keys = controlCaret(typeof args.chars === "string" ? args.chars : "");
-  const exitCode = sandboxCommandExitCode(text);
-  const stripped = stripExecBanner(text);
-
-  if (running) {
-    return (
-      <ActivityDisclosure
-        icon={<KeyboardIcon className={ICON_SIZE} />}
-        iconTone="running"
-        title={`session ${sessionId} ← ${keys || "∅"}`}
-        titleMono
-        running
-        preview={<RunningPreview>sending…</RunningPreview>}
-      >
-        <BodyNote>sending input to session {sessionId}…</BodyNote>
-      </ActivityDisclosure>
-    );
-  }
-
-  // Success (exit 0 or a quiet ack) earns no chip; only a lost PTY / non-zero
-  // exit gets the one red token.
-  let chip: DisclosureChip | undefined;
-  if (lost) {
-    chip = { tone: "bad", text: "lost" };
-  } else if (exitCode != null && exitCode !== 0) {
-    chip = { tone: "bad", text: `exit ${exitCode}` };
-  }
-
-  return (
-    <ActivityDisclosure
-      icon={<KeyboardIcon className={ICON_SIZE} />}
-      iconTone={lost ? "failed" : "muted"}
-      title={`session ${sessionId} ← ${keys || "∅"}`}
-      titleMono
-      {...(chip ? { chip } : {})}
-      failed={item.status === "failed"}
-      cancelled={item.status === "cancelled"}
-      preview={lost ? `session ${sessionId} PTY vanished` : tailPeek(stripped) || "sent"}
-    >
-      {lost ? (
-        <BodyNote tone="error">{stripped || text}</BodyNote>
-      ) : (
-        <TermBlock command={`write_stdin → session ${sessionId}`} output={stripped} />
-      )}
-    </ActivityDisclosure>
-  );
-}
-
-/* ---- apply_patch ----------------------------------------------------------- */
-
-function verbForOp(op: ApplyPatchOperation | undefined): string {
-  if (!op) {
-    return "Edited";
-  }
-  return op.type === "create_file"
-    ? "Created"
-    : op.type === "delete_file"
-      ? "Deleted"
-      : op.moveTo
-        ? "Renamed"
-        : "Edited";
-}
-
-function basename(path: string): string {
-  const parts = path.split("/").filter(Boolean);
-  return parts.length ? parts[parts.length - 1]! : path;
-}
-
-function dirname(path: string): string {
-  const idx = path.lastIndexOf("/");
-  return idx >= 0 ? path.slice(0, idx + 1) : "";
-}
-
 /**
  * The collapsed-row path preview. Diff magnitude is rendered as a SINGLE muted
  * "+N −M" glyph pair — the saturated add/del green/red is reserved exclusively
@@ -334,8 +143,8 @@ function PathPreview({
   return (
     <span className="inline-flex items-center gap-2 truncate font-og-mono">
       <span className="truncate">
-        <span className="text-og-fg-subtle">{dirname(path)}</span>
-        <span className="text-og-fg-muted">{basename(path)}</span>
+        <span className="text-og-fg-subtle">{pathDirname(path)}</span>
+        <span className="text-og-fg-muted">{pathBasename(path)}</span>
       </span>
       {add != null || del != null ? (
         <span className="shrink-0 text-og-fg-subtle">
@@ -348,162 +157,281 @@ function PathPreview({
   );
 }
 
-function ApplyPatchRenderer({ item }: ToolRendererProps) {
-  const ops = applyPatchOpsFromToolItem(item);
-  const failed = item.status === "failed";
-  const cancelled = item.status === "cancelled";
-  const running = item.status === "running";
-  const firstOp = ops[0];
-
-  if (running) {
-    // Show the patch structure from the arguments (available immediately on
-    // creation), but mark the row clearly as in-progress — not applied yet.
-    const fileCount = ops.length;
-    const titleVerb = firstOp ? `Applying ${basename(firstOp.path)}` : "Applying patch";
-    return (
-      <ActivityDisclosure
-        icon={<FileDiffIcon className={ICON_SIZE} />}
-        iconTone="running"
-        title={fileCount > 1 ? `Applying ${fileCount} files` : titleVerb}
-        running
-        preview={
-          <RunningPreview>
-            {fileCount > 1 ? `${fileCount} files` : firstOp ? firstOp.path : "applying…"}
-          </RunningPreview>
-        }
-      >
-        {ops.map((op, index) => {
-          const file = safeParseOp(op);
-          const key = `${op.type}:${op.path}:${index}`;
-          return file ? (
-            <ToolDiff key={key} files={[file]} />
-          ) : (
-            <div key={key}>
-              <p className="mb-1 font-og-mono text-og-xs text-og-fg-muted">{op.path}</p>
-              <RawPatch diff={op.diff ?? ""} />
-            </div>
-          );
-        })}
-      </ActivityDisclosure>
-    );
-  }
+/* ---- shared-model rows ------------------------------------------------------
+   exec_command, write_stdin, apply_patch, web search, request_human_input,
+   run_on and the generic fallback draw their row from the renderer-neutral
+   presentation model in ./tool-presentation, which non-DOM renderers share.
+   -------------------------------------------------------------------------- */
 
-  if (failed) {
-    return (
-      <ActivityDisclosure
-        icon={<FileDiffIcon className={ICON_SIZE} />}
-        iconTone="failed"
-        title={firstOp ? `${verbForOp(firstOp)} ${basename(firstOp.path)}` : "apply_patch"}
-        chip={{ tone: "bad", text: "failed" }}
-        preview={typeof item.output === "string" ? item.output : "patch failed"}
-      >
-        <PayloadBlock label="Error" value={item.output} failed />
-      </ActivityDisclosure>
-    );
+/**
+ * The icon for a presentation kind, looked up when a row renders. A module-level
+ * table would capture the icons at load time; in a bundle where this module and
+ * the icon library's chunk import each other, an icon can still be undefined
+ * then, and the row would render an undefined component (React #130).
+ */
+function toolIcon(kind: ToolIconKind): LucideIcon {
+  switch (kind) {
+    case "terminal":
+      return TerminalIcon;
+    case "keyboard":
+      return KeyboardIcon;
+    case "file-diff":
+      return FileDiffIcon;
+    case "search":
+      return SearchIcon;
+    case "question":
+      return MessageCircleQuestionIcon;
+    case "target":
+      return TargetIcon;
+    case "brain":
+      return BrainCircuitIcon;
+    case "sessions":
+      return MessagesSquareIcon;
+    case "server":
+      return ServerIcon;
+    case "server-cog":
+      return ServerCogIcon;
+    case "calendar":
+      return CalendarClockIcon;
+    case "panels":
+      return PanelsTopLeftIcon;
+    case "share":
+      return Share2Icon;
+    case "message":
+      return MessageSquareIcon;
+    case "git":
+      return FolderGitIcon;
+    case "box":
+      return BoxIcon;
+    case "key":
+      return KeyRoundIcon;
+    case "file-search":
+      return FileSearchIcon;
+    case "package-search":
+      return PackageSearchIcon;
+    case "plug":
+      return PlugIcon;
+    case "wrench":
+      return WrenchIcon;
   }
+}
 
-  // multi-file edit — magnitude stays a single muted glyph; the per-file
-  // green/red lives only inside the expanded DiffView gutter.
-  if (ops.length > 1) {
-    // Parse every op: successfully parsed ones go into ToolDiff; malformed ops
-    // fall back to a RawPatch display (mirroring the single-op fallback path).
-    // The count in the title/preview equals ops.length so it is always truthful
-    // regardless of how many ops parsed successfully.
-    const parsed = ops.map((op) => safeParseOp(op));
-    const goodFiles = parsed.filter((f): f is GitFileDiff => f !== null);
-    const add = goodFiles.reduce((n, f) => n + f.additions, 0);
-    const del = goodFiles.reduce((n, f) => n + f.deletions, 0);
-    return (
-      <ActivityDisclosure
-        icon={<FileDiffIcon className={ICON_SIZE} />}
-        iconTone="accent"
-        title={`Edited ${ops.length} files`}
-        cancelled={cancelled}
-        preview={
-          <span className="inline-flex items-center gap-2 font-og-mono">
-            <span className="text-og-fg-muted">{ops.length} files</span>
-            <span className="text-og-fg-subtle">
-              +{add} −{del}
-            </span>
+function presentedPreviewNode(preview: ToolPreview): ReactNode {
+  switch (preview.kind) {
+    case "text":
+      return preview.running ? <RunningPreview>{preview.text}</RunningPreview> : preview.text;
+    case "path":
+      return <PathPreview path={preview.path} add={preview.add} del={preview.del} />;
+    case "files":
+      return (
+        <span className="inline-flex items-center gap-2 font-og-mono">
+          <span className="text-og-fg-muted">{preview.count} files</span>
+          <span className="text-og-fg-subtle">
+            +{preview.add} −{preview.del}
           </span>
-        }
-      >
-        {ops.map((op, index) => {
-          const file = parsed[index];
-          const key = `${op.type}:${op.path}:${index}`;
-          return file ? (
-            <ToolDiff key={key} files={[file]} />
-          ) : (
-            <div key={key}>
-              <p className="mb-1 font-og-mono text-og-xs text-og-fg-muted">{op.path}</p>
-              <RawPatch diff={op.diff ?? ""} />
-            </div>
-          );
-        })}
-      </ActivityDisclosure>
-    );
+        </span>
+      );
+    case "malformed":
+      return (
+        <span className="inline-flex items-center gap-2 font-og-mono">
+          <span className="text-og-fg-muted">{preview.name}</span>
+          <span className="text-og-fg-subtle">malformed V4A</span>
+        </span>
+      );
   }
+}
 
-  // single op
-  if (!firstOp) {
-    return <GenericRenderer item={item} />;
-  }
-  if (firstOp.type === "delete_file") {
-    return (
-      <ActivityDisclosure
-        icon={<FileDiffIcon className={ICON_SIZE} />}
-        iconTone="failed"
-        title={`Deleted ${basename(firstOp.path)}`}
-        cancelled={cancelled}
-        preview={<PathPreview path={firstOp.path} />}
-      >
-        <BodyNote>File deleted — no diff to show.</BodyNote>
-      </ActivityDisclosure>
-    );
+function PresentedBody({ body }: { body: ToolBody }) {
+  switch (body.kind) {
+    case "term":
+      return (
+        <>
+          {/* Exec rows pass command={null}: the row title already carries `$ cmd`. */}
+          <TermBlock
+            command={body.command}
+            {...(body.workdir !== null || body.command === null ? { workdir: body.workdir } : {})}
+            output={body.output}
+            {...(body.live ? { live: true } : {})}
+            {...(body.failed !== undefined ? { failed: body.failed } : {})}
+          />
+          {body.note ? <BodyNote>{body.note}</BodyNote> : null}
+        </>
+      );
+    case "note":
+      return body.tone ? (
+        <BodyNote tone={body.tone}>{body.text}</BodyNote>
+      ) : (
+        <BodyNote>{body.text}</BodyNote>
+      );
+    case "payloads":
+      return (
+        <>
+          {body.note ? <p className="m-0 py-1 text-og-sm text-og-fg-muted">{body.note}</p> : null}
+          {body.blocks.map((block) =>
+            block.failed ? (
+              <PayloadBlock key={block.label} label={block.label} value={block.value} failed />
+            ) : (
+              <PayloadBlock key={block.label} label={block.label} value={block.value} />
+            ),
+          )}
+        </>
+      );
+    case "patch":
+      if (body.bare) {
+        return <RawPatch diff={body.files[0]?.diff ?? ""} />;
+      }
+      return (
+        <>
+          {body.files.map((entry) =>
+            entry.file ? (
+              <ToolDiff key={entry.key} files={[entry.file]} />
+            ) : (
+              <div key={entry.key}>
+                <p className="mb-1 font-og-mono text-og-xs text-og-fg-muted">{entry.path}</p>
+                <RawPatch diff={entry.diff} />
+              </div>
+            ),
+          )}
+        </>
+      );
+    case "web-results":
+      return <WebSearchResults results={body.results} />;
   }
+}
 
-  const file = safeParseOp(firstOp);
-  if (!file) {
-    return (
-      <ActivityDisclosure
-        icon={<FileDiffIcon className={ICON_SIZE} />}
-        iconTone="accent"
-        title={`${verbForOp(firstOp)} ${basename(firstOp.path)}`}
-        cancelled={cancelled}
-        preview={
-          <span className="inline-flex items-center gap-2 font-og-mono">
-            <span className="text-og-fg-muted">{basename(firstOp.path)}</span>
-            <span className="text-og-fg-subtle">malformed V4A</span>
-          </span>
-        }
-      >
-        <RawPatch diff={firstOp.diff ?? ""} />
-      </ActivityDisclosure>
-    );
+function WebSearchResults({ results }: { results: WebSearchResult[] | null }) {
+  const resultOccurrences = new Map<string, number>();
+  const keyedResults = results?.map((result) => {
+    const contentKey = `${result.domain}\u0000${result.title}\u0000${result.snippet}`;
+    const occurrence = (resultOccurrences.get(contentKey) ?? 0) + 1;
+    resultOccurrences.set(contentKey, occurrence);
+    return { key: `${contentKey}\u0000${occurrence}`, result };
+  });
+  if (!keyedResults || !keyedResults.length) {
+    return <BodyNote>results folded into model context — no list available.</BodyNote>;
   }
+  return (
+    <ul className="flex flex-col gap-2">
+      {keyedResults.map(({ key, result }) => (
+        <li key={key} className="flex gap-2.5">
+          <GlobeIcon className="mt-0.5 size-3.5 shrink-0 text-og-fg-subtle" />
+          <div className="min-w-0">
+            <p className="truncate text-og-base text-og-fg">
+              {result.title} <span className="text-og-fg-subtle">{result.domain}</span>
+            </p>
+            <p className="text-og-sm leading-5 text-og-fg-muted">{result.snippet}</p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
 
-  // The collapsed row shows verb + basename (title) and a muted "+N −M"
-  // (preview); on expand the preview is hidden and the DiffView header carries
-  // the path + churn — so the filename/stat never appears twice at once.
+/** Draw one shared-model row with the web disclosure primitives. */
+function PresentedToolRow({
+  presentation: p,
+  logo = null,
+}: {
+  presentation: ToolRowPresentation;
+  /** A connector's logo, drawn in place of the row's icon. */
+  logo?: string | null;
+}) {
+  const Icon = toolIcon(p.icon);
   return (
     <ActivityDisclosure
-      icon={<FileDiffIcon className={ICON_SIZE} />}
-      iconTone="accent"
-      title={`${verbForOp(firstOp)} ${basename(file.path)}`}
-      cancelled={cancelled}
-      preview={<PathPreview path={file.path} add={file.additions} del={file.deletions} />}
+      icon={<ConnectorLogoIcon src={logo} fallback={<Icon className={ICON_SIZE} />} />}
+      iconTone={p.iconTone}
+      // A chip inside the row's own toggle never links.
+      title={<SecretRefText text={p.title} linkable={false} />}
+      {...(p.titleMono ? { titleMono: true } : {})}
+      {...(p.running ? { running: true } : {})}
+      {...(p.chip ? { chip: p.chip } : {})}
+      {...(p.failed !== undefined ? { failed: p.failed } : {})}
+      {...(p.cancelled !== undefined ? { cancelled: p.cancelled } : {})}
+      preview={p.preview ? presentedPreviewNode(p.preview) : undefined}
     >
-      <ToolDiff files={[file]} />
+      <PresentedBody body={p.body} />
     </ActivityDisclosure>
   );
 }
 
-function safeParseOp(op: ApplyPatchOperation): GitFileDiff | null {
-  try {
-    return v4aToGitFileDiff(op);
-  } catch {
-    return null;
-  }
+function ExecRenderer({ item }: ToolRendererProps) {
+  const computeLabel = useTimelineComputeLabel();
+  return <PresentedToolRow presentation={execPresentation(item, { computeLabel })} />;
+}
+
+function WriteStdinRenderer({ item }: ToolRendererProps) {
+  return <PresentedToolRow presentation={writeStdinPresentation(item)} />;
+}
+
+function ApplyPatchRenderer({ item }: ToolRendererProps) {
+  const presentation = applyPatchPresentation(item);
+  return presentation ? (
+    <PresentedToolRow presentation={presentation} />
+  ) : (
+    <GenericRenderer item={item} />
+  );
+}
+
+function WebSearchRenderer({ item }: ToolRendererProps) {
+  return <PresentedToolRow presentation={webSearchPresentation(item)} />;
+}
+
+function AskRenderer({ item }: ToolRendererProps) {
+  return <PresentedToolRow presentation={askPresentation(item)} />;
+}
+
+function RunOnRenderer({ item }: ToolRendererProps) {
+  return <PresentedToolRow presentation={runOnPresentation(item)} />;
+}
+
+/**
+ * Baseline craft for unmatched tools: family icon + title-cased leaf + honest
+ * status preview (Running… / Done / error snippet). No argument-field sniffing —
+ * JSON stays in the expandable body only.
+ */
+function UnreviewedGenericRenderer({ item, loadRetainedScreenshot }: ToolRendererProps) {
+  const logo = useToolConnectorLogo(item.display);
+  const { images, output } = retainedToolResultImages(item.output);
+  if (images.length === 0 || item.status === "running") {
+    return <PresentedToolRow presentation={genericToolPresentation(item)} logo={logo} />;
+  }
+  // A tool that returned images shows them like a viewed image, with its
+  // ordinary result text (and any further images) in the expanded body.
+  const presentation = genericToolPresentation({ ...item, output });
+  const Icon = toolIcon(presentation.icon);
+  const [first, ...rest] = images;
+  return (
+    <RetainedSessionImageDisclosure
+      artifact={first!}
+      load={loadRetainedScreenshot}
+      title={presentation.title}
+      caption={presentation.title}
+      noun="image"
+      icon={<ConnectorLogoIcon src={logo} fallback={<Icon className={ICON_SIZE} />} />}
+      lightboxLabel={presentation.title}
+      batched={null}
+      failed={presentation.failed ?? false}
+      cancelled={presentation.cancelled ?? false}
+    >
+      <PresentedBody body={presentation.body} />
+      {rest.map((image, index) => (
+        <RetainedSessionImageDisclosure
+          key={image.artifactId}
+          artifact={image}
+          load={loadRetainedScreenshot}
+          title={`Image ${index + 2}`}
+          caption={`${presentation.title}, image ${index + 2}`}
+          noun="image"
+          icon={<ImageIcon className={ICON_SIZE} />}
+          lightboxLabel={presentation.title}
+          batched={null}
+          failed={false}
+          cancelled={false}
+        />
+      ))}
+    </RetainedSessionImageDisclosure>
+  );
 }
 
 /* ---- computer_call --------------------------------------------------------- */
@@ -579,7 +507,10 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }: ToolRendererProp
   // every transport.
   const functionAction: ComputerAction | undefined =
     !raw.action && item.name.startsWith("computer_") && item.name !== "computer_call"
-      ? { type: item.name.slice("computer_".length), ...asComputerArgs(item.arguments) }
+      ? {
+          type: item.name.slice("computer_".length),
+          ...asComputerArgs(item.arguments),
+        }
       : undefined;
   const action = raw.action ?? functionAction;
   const actions = raw.actions ?? (action ? [action] : []);
@@ -766,96 +697,107 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }: ToolRendererProp
   );
 }
 
-type RetainedImageState =
-  | { kind: "loading" }
-  | { kind: "ready"; url: string }
-  | { kind: "unavailable"; label: string }
-  | { kind: "error"; message: string };
-
-function useRetainedImageObjectUrl(
-  artifact: RetainedArtifactReference,
-  load: ToolRendererProps["loadRetainedArtifact"],
-): RetainedImageState {
-  const [state, setState] = useState<RetainedImageState>({ kind: "loading" });
-  // Function outputs are commonly serialized JSON. Parsing them creates a new
-  // object on every render, so depend on the immutable wire value rather than
-  // object identity; otherwise the loader can refetch after its own setState.
-  const artifactValue = retainedArtifactValue(artifact);
-  const stableArtifactRef = useRef({ value: artifactValue, artifact });
-  if (stableArtifactRef.current.value !== artifactValue) {
-    stableArtifactRef.current = { value: artifactValue, artifact };
+/** Browser tool images share authenticated screenshot loading, with their own media kind. */
+function BrowserScreenshotRenderer(props: ToolRendererProps) {
+  const { item, loadRetainedScreenshot } = props;
+  const leaf = mcpToolLeaf(item.name);
+  const title =
+    leaf === "browser_observe"
+      ? "Observed browser"
+      : leaf === "browser_act"
+        ? "Used browser"
+        : "Browser screenshot";
+  const retained = retainedScreenshotMetadata(item.output);
+  const isFailed = item.status === "failed";
+  const isCancelled = item.status === "cancelled";
+
+  if (item.status === "running" && leaf === "browser_screenshot") {
+    return (
+      <ActivityDisclosure
+        icon={<CameraIcon className={ICON_SIZE} />}
+        iconTone="running"
+        title={title}
+        running
+        media={<MediaSkeleton />}
+      >
+        <BodyNote>capturing frame…</BodyNote>
+      </ActivityDisclosure>
+    );
+  }
+
+  if (!retained) return <GenericRenderer {...props} />;
+  if (!retained.available) {
+    const state =
+      retained.reason === "expired" || retained.reason === "deleted"
+        ? retained.reason
+        : "unavailable";
+    return (
+      <ActivityDisclosure
+        icon={<CameraOffIcon className={ICON_SIZE} />}
+        iconTone={isFailed ? "failed" : "muted"}
+        title={`${title} · ${state}`}
+        failed={isFailed}
+        cancelled={isCancelled}
+        preview={`screenshot ${state}`}
+        media={<MediaEmpty />}
+      >
+        <BodyNote tone={isFailed ? "error" : undefined}>
+          Screenshot {state}: {retained.reason.replaceAll("_", " ")}.
+        </BodyNote>
+      </ActivityDisclosure>
+    );
   }
-  const stableArtifact = stableArtifactRef.current.artifact;
-  useEffect(() => {
-    if (!load) {
-      setState({ kind: "unavailable", label: "retrieval is not configured" });
-      return;
-    }
-    const controller = new AbortController();
-    let objectUrl: string | null = null;
-    setState({ kind: "loading" });
-    void load(stableArtifact, controller.signal)
-      .then((source) => {
-        if (controller.signal.aborted) return;
-        if (!source) {
-          setState({ kind: "unavailable", label: "bytes are unavailable" });
-          return;
-        }
-        if (!(source instanceof Uint8Array)) {
-          if (!source.url.trim()) {
-            setState({ kind: "unavailable", label: "URL is unavailable" });
-            return;
-          }
-          setState({ kind: "ready", url: source.url });
-          return;
-        }
-        objectUrl = URL.createObjectURL(
-          new Blob([source as unknown as BlobPart], { type: stableArtifact.contentType }),
-        );
-        setState({ kind: "ready", url: objectUrl });
-      })
-      .catch((error: unknown) => {
-        if (controller.signal.aborted) return;
-        const status =
-          error && typeof error === "object" && "status" in error
-            ? Number((error as { status?: unknown }).status)
-            : null;
-        setState(
-          status === 404
-            ? { kind: "unavailable", label: "deleted" }
-            : status === 410
-              ? { kind: "unavailable", label: "expired or unavailable" }
-              : { kind: "error", message: "retrieval failed" },
-        );
-      });
-    return () => {
-      controller.abort();
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [stableArtifact, load]);
-  return state;
+  return (
+    <RetainedSessionImageDisclosure
+      artifact={retained}
+      load={loadRetainedScreenshot}
+      title={title}
+      caption={title}
+      noun="screenshot"
+      icon={<CameraIcon className={ICON_SIZE} />}
+      lightboxLabel="Browser screenshot"
+      batched={null}
+      failed={isFailed}
+      cancelled={isCancelled}
+    />
+  );
 }
 
-function retainedArtifactValue(artifact: RetainedArtifactReference): string {
-  return [
-    artifact.artifactId,
-    artifact.kind,
-    artifact.contentType,
-    artifact.originalBytes,
-    artifact.sha256,
-    artifact.retainedAt,
-    artifact.dimensions?.width ?? "",
-    artifact.dimensions?.height ?? "",
-    artifact.retention.policy,
-    artifact.retention.expiresAt ?? "",
-    artifact.retrieval.method,
-    artifact.retrieval.path,
-    artifact.retrieval.acceptRanges,
-    artifact.retrieval.maxRangeBytes,
-  ].join("\0");
+type RetainedSessionImageDisclosureProps = {
+  artifact: RetainedArtifactReference;
+  load: ToolRendererProps["loadRetainedArtifact"];
+  title: string;
+  caption: string;
+  noun: "image" | "screenshot";
+  icon: ReactNode;
+  lightboxLabel: string;
+  batched: string | null;
+  failed: boolean;
+  cancelled: boolean;
+  filename?: string;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+};
+
+function RetainedSessionImageDisclosure(props: RetainedSessionImageDisclosureProps) {
+  const compact = useContext(CompactActivityContext);
+  // The rolling progress label has no screenshot loader by design. Do not run
+  // the full image hook there: it would report the missing loader as an error.
+  if (compact) {
+    return (
+      <ActivityDisclosure
+        icon={props.icon}
+        title={props.title}
+        compactPreview={null}
+        failed={props.failed}
+        cancelled={props.cancelled}
+      />
+    );
+  }
+  return <LoadedRetainedSessionImageDisclosure {...props} />;
 }
 
-function RetainedSessionImageDisclosure({
+function LoadedRetainedSessionImageDisclosure({
   artifact,
   load,
   title,
@@ -866,26 +808,27 @@ function RetainedSessionImageDisclosure({
   batched,
   failed,
   cancelled,
-}: {
-  artifact: RetainedArtifactReference;
-  load: ToolRendererProps["loadRetainedScreenshot"];
-  title: string;
-  caption: string;
-  noun: "image" | "screenshot";
-  icon: ReactNode;
-  lightboxLabel: string;
-  batched: string | null;
-  failed: boolean;
-  cancelled: boolean;
-}) {
+  filename,
+  defaultOpen,
+  children,
+}: RetainedSessionImageDisclosureProps) {
   const state = useRetainedImageObjectUrl(artifact, load);
-  const downloadFilename = retainedImageFilename(artifact);
+  const downloadFilename = filename ?? retainedImageFilename(artifact);
+  const figure = {
+    src: state.kind === "ready" ? state.url : "",
+    caption,
+    alt: caption,
+    expandLabel: `Expand ${noun}`,
+    lightboxLabel,
+    downloadFilename,
+  };
 
   return (
     <ActivityDisclosure
       icon={icon}
       iconTone={failed ? "failed" : state.kind === "ready" ? "accent" : "muted"}
       title={title}
+      defaultOpen={defaultOpen}
       failed={failed}
       cancelled={cancelled}
       preview={
@@ -899,14 +842,7 @@ function RetainedSessionImageDisclosure({
       }
       media={
         state.kind === "ready" ? (
-          <Thumbnail
-            src={state.url}
-            caption={caption}
-            alt={caption}
-            expandLabel={`Expand ${noun}`}
-            lightboxLabel={lightboxLabel}
-            downloadFilename={downloadFilename}
-          />
+          <Thumbnail {...figure} />
         ) : state.kind === "loading" ? (
           <MediaSkeleton />
         ) : (
@@ -915,14 +851,7 @@ function RetainedSessionImageDisclosure({
       }
     >
       {state.kind === "ready" ? (
-        <ScreenshotFigure
-          src={state.url}
-          caption={caption}
-          alt={caption}
-          expandLabel={`Expand ${noun}`}
-          lightboxLabel={lightboxLabel}
-          downloadFilename={downloadFilename}
-        />
+        <ScreenshotFigure {...figure} />
       ) : state.kind === "loading" ? (
         <BodyNote>Loading the retained {noun}…</BodyNote>
       ) : state.kind === "unavailable" ? (
@@ -930,15 +859,30 @@ function RetainedSessionImageDisclosure({
           {noun === "screenshot" ? "Screenshot" : "Image"} {state.label}.
         </BodyNote>
       ) : (
-        <BodyNote tone="error">
-          {noun === "screenshot" ? "Screenshot" : "Image"} retrieval failed: {state.message}
-        </BodyNote>
+        <ImageRetrievalError noun={noun} retry={state.retry} />
       )}
       {batched ? <BodyNote>batched: {batched}</BodyNote> : null}
+      {children}
     </ActivityDisclosure>
   );
 }
 
+function ImageRetrievalError({ noun = "image", retry }: { noun?: string; retry: () => void }) {
+  return (
+    <BodyNote tone="error">
+      {noun === "screenshot" ? "Screenshot" : "Image"} retrieval failed.{" "}
+      <button
+        type="button"
+        aria-label={`Retry ${noun} retrieval`}
+        onClick={retry}
+        className="underline underline-offset-2"
+      >
+        Retry
+      </button>
+    </BodyNote>
+  );
+}
+
 function GeneratedImageRenderer({ item, loadRetainedArtifact }: ToolRendererProps) {
   const args = parseToolArgs(item.arguments);
   const prompt = typeof args.prompt === "string" ? args.prompt : "";
@@ -1028,6 +972,22 @@ function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRenderer
     return <GenericRenderer item={item} />;
   }
 
+  // The closed SDK receipt has already checked the workspace-qualified route.
+  const workspaceId = /^\/v1\/workspaces\/([0-9a-f-]+)\/artifacts\//.exec(
+    receipt.artifact.retrieval.path,
+  )?.[1];
+  const openLink = workspaceId ? (
+    <a
+      href={`/workspaces/${workspaceId}/artifacts/files/${receipt.artifact.artifactId}`}
+      aria-label={`Open ${receipt.filename} in Artifacts`}
+      className="inline-flex min-h-7 items-center rounded-og-sm px-2 text-og-sm font-medium text-og-accent-strong hover:bg-og-surface-2 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-10"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      Open in Artifacts
+    </a>
+  ) : null;
+
   const download = async () => {
     if (!loadRetainedArtifact) {
       setDownloadState("error");
@@ -1060,6 +1020,44 @@ function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRenderer
     }
   };
 
+  const downloadButton = (
+    <button
+      type="button"
+      onClick={() => void download()}
+      disabled={downloadState === "loading"}
+      className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1.5 text-og-sm font-medium text-og-fg transition-colors hover:border-og-border-strong hover:bg-og-surface-2 disabled:cursor-wait disabled:opacity-60"
+    >
+      <DownloadIcon className="size-3.5" />
+      {downloadState === "loading"
+        ? "Preparing…"
+        : downloadState === "error"
+          ? "Retry download"
+          : "Download"}
+    </button>
+  );
+
+  if (isRetainedImageContentType(receipt.artifact.contentType)) {
+    return (
+      <RetainedSessionImageDisclosure
+        artifact={receipt.artifact}
+        load={loadRetainedArtifact}
+        title={`Published ${receipt.filename}`}
+        caption={receipt.filename}
+        noun="image"
+        icon={<ImageIcon className={ICON_SIZE} />}
+        lightboxLabel="Image"
+        batched={null}
+        failed={false}
+        cancelled={false}
+        filename={receipt.filename}
+        defaultOpen
+      >
+        {downloadButton}
+        {openLink}
+      </RetainedSessionImageDisclosure>
+    );
+  }
+
   return (
     <ActivityDisclosure
       icon={<DownloadIcon className={ICON_SIZE} />}
@@ -1068,19 +1066,146 @@ function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRenderer
       defaultOpen
       preview={formatBytes(receipt.artifact.originalBytes)}
     >
+      {downloadButton}
+      {openLink}
+      {isPatchFilename(receipt.filename) ? (
+        <PatchApplyCommand
+          artifact={receipt.artifact}
+          filename={receipt.filename}
+          load={loadRetainedArtifact}
+        />
+      ) : null}
+    </ActivityDisclosure>
+  );
+}
+
+type PublishedSiteReceipt = {
+  workspaceId: string;
+  artifactId: string;
+  title: string;
+  revision: number;
+  replayed: boolean;
+};
+
+function publishedSiteReceipt(output: unknown): PublishedSiteReceipt | null {
+  const { text, isError } = unwrapMcpOutput(output);
+  if (isError) return null;
+  const parsed = tryParseJson(text);
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+  const artifact = (parsed as Record<string, unknown>).artifact;
+  const version = (parsed as Record<string, unknown>).version;
+  if (
+    !artifact ||
+    typeof artifact !== "object" ||
+    Array.isArray(artifact) ||
+    !version ||
+    typeof version !== "object" ||
+    Array.isArray(version)
+  ) {
+    return null;
+  }
+  const artifactRecord = artifact as Record<string, unknown>;
+  const versionRecord = version as Record<string, unknown>;
+  if (
+    typeof artifactRecord.workspaceId !== "string" ||
+    typeof artifactRecord.id !== "string" ||
+    typeof artifactRecord.title !== "string" ||
+    typeof versionRecord.revision !== "number" ||
+    !Number.isInteger(versionRecord.revision) ||
+    versionRecord.revision < 1
+  ) {
+    return null;
+  }
+  return {
+    workspaceId: artifactRecord.workspaceId,
+    artifactId: artifactRecord.id,
+    title: artifactRecord.title,
+    revision: versionRecord.revision,
+    replayed: (parsed as Record<string, unknown>).replayed === true,
+  };
+}
+
+const SITE_OPEN_CLASS =
+  "inline-flex min-h-7 items-center rounded-og-sm px-2 text-og-sm font-medium text-og-accent-strong hover:bg-og-surface-2 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-10";
+
+function SiteOpenLink({ receipt }: { receipt: PublishedSiteReceipt }) {
+  const [pending, setPending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  // The console route only exists in the Opengeni console; a host decides.
+  const resolution = useOpenGeniLinkResolver()?.({
+    kind: "site",
+    artifactId: receipt.artifactId,
+    workspaceId: receipt.workspaceId,
+  });
+  const destination = resolution?.href ? defaultUrlTransform(resolution.href) : "";
+  if (destination) {
+    return (
+      <a
+        href={destination}
+        aria-label={`Open ${receipt.title}`}
+        className={SITE_OPEN_CLASS}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => event.stopPropagation()}
+      >
+        Open
+      </a>
+    );
+  }
+  if (resolution?.open) {
+    const open = resolution.open;
+    return (
       <button
         type="button"
-        onClick={() => void download()}
-        disabled={downloadState === "loading"}
-        className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1.5 text-og-sm font-medium text-og-fg transition-colors hover:border-og-border-strong hover:bg-og-surface-2 disabled:cursor-wait disabled:opacity-60"
+        aria-label={`Open ${receipt.title}`}
+        aria-busy={pending}
+        disabled={pending}
+        className={SITE_OPEN_CLASS}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (pending) return;
+          setPending(true);
+          setFailed(false);
+          void Promise.resolve()
+            .then(open)
+            .catch(() => setFailed(true))
+            .finally(() => setPending(false));
+        }}
+        onKeyDown={(event) => event.stopPropagation()}
       >
-        <DownloadIcon className="size-3.5" />
-        {downloadState === "loading"
-          ? "Preparing…"
-          : downloadState === "error"
-            ? "Retry download"
-            : "Download"}
+        {pending ? "Opening…" : failed ? "Retry open" : "Open"}
       </button>
+    );
+  }
+  return null;
+}
+
+function SiteArtifactRenderer({ item }: ToolRendererProps) {
+  const leaf = mcpToolLeaf(item.name);
+  const publishingExisting = leaf === "artifacts_publish";
+  if (item.status === "running") {
+    return (
+      <ActivityDisclosure
+        icon={<PanelsTopLeftIcon className={ICON_SIZE} />}
+        iconTone="running"
+        title={publishingExisting ? "Publishing Site update" : "Publishing Site"}
+        running
+        preview={<RunningPreview>retaining source and compiled HTML…</RunningPreview>}
+      />
+    );
+  }
+  const receipt = publishedSiteReceipt(item.output);
+  if (!receipt || item.status === "failed") return <GenericRenderer item={item} />;
+  return (
+    <ActivityDisclosure
+      icon={<PanelsTopLeftIcon className={ICON_SIZE} />}
+      iconTone="accent"
+      title={publishingExisting ? `Updated ${receipt.title}` : `Published ${receipt.title}`}
+      media={<SiteOpenLink receipt={receipt} />}
+    >
+      <BodyNote>
+        Version {receipt.revision} is live
+        {receipt.replayed ? " (replayed from the original publication)." : "."}
+      </BodyNote>
     </ActivityDisclosure>
   );
 }
@@ -1132,182 +1257,43 @@ function GeneratedImageDisclosure({
           <MediaSkeleton />
         ) : (
           <MediaEmpty />
-        )
-      }
-    >
-      {state.kind === "ready" ? (
-        <ScreenshotFigure
-          src={state.url}
-          caption={caption}
-          alt={caption}
-          expandLabel="Expand generated image"
-          lightboxLabel="Generated image"
-        />
-      ) : state.kind === "loading" ? (
-        <BodyNote>Loading the generated image…</BodyNote>
-      ) : state.kind === "unavailable" ? (
-        <BodyNote>Image {state.label}.</BodyNote>
-      ) : (
-        <BodyNote tone="error">Image retrieval failed.</BodyNote>
-      )}
-      <BodyNote>
-        {dimensions.width}×{dimensions.height} · {receipt.sandboxPath}
-      </BodyNote>
-    </ActivityDisclosure>
-  );
-}
-
-function retainedImageFilename(artifact: RetainedArtifactReference): string {
-  const extension =
-    artifact.contentType === "image/jpeg"
-      ? "jpg"
-      : artifact.contentType === "image/webp"
-        ? "webp"
-        : "png";
-  return `${artifact.kind}-${artifact.artifactId}.${extension}`;
-}
-
-/* ---- web_search ------------------------------------------------------------ */
-
-type WebSearchResult = { title: string; domain: string; snippet: string };
-
-/** Pull a search string from tool-call arguments when providerData.action is sparse. */
-function webSearchQueryFromArguments(args: unknown): string | null {
-  if (typeof args === "string") {
-    const trimmed = args.trim();
-    if (!trimmed) {
-      return null;
-    }
-    try {
-      return webSearchQueryFromArguments(JSON.parse(trimmed));
-    } catch {
-      return trimmed;
-    }
-  }
-  if (!args || typeof args !== "object") {
-    return null;
-  }
-  const record = args as Record<string, unknown>;
-  if (typeof record.query === "string" && record.query.trim().length > 0) {
-    return record.query;
-  }
-  if (Array.isArray(record.queries)) {
-    const first = record.queries.find(
-      (value): value is string => typeof value === "string" && value.trim().length > 0,
-    );
-    if (first) {
-      return first;
-    }
-  }
-  return null;
-}
-
-function WebSearchRenderer({ item }: ToolRendererProps) {
-  const raw = (item.raw ?? {}) as {
-    providerData?: {
-      action?: {
-        type?: string;
-        query?: string;
-        queries?: string[];
-        url?: string;
-        pattern?: string;
-      };
-    };
-  };
-  const action = raw.providerData?.action ?? {};
-  const actionType = action.type ?? "search";
-  // Responses API deprecated singular `query` in favor of `queries[]`.
-  // Codex/current OpenAI often only populate the array.
-  const queries = (action.queries ?? []).filter(
-    (value): value is string => typeof value === "string" && value.trim().length > 0,
-  );
-  const searchQuery =
-    (typeof action.query === "string" && action.query.trim().length > 0 ? action.query : null) ??
-    queries[0] ??
-    webSearchQueryFromArguments(item.arguments);
-  const running = item.status === "running";
-  const query =
-    actionType === "open_page"
-      ? (action.url ?? "(page unavailable)")
-      : actionType === "find_in_page"
-        ? action.pattern && action.url
-          ? `"${action.pattern}" in ${action.url}`
-          : (action.pattern ?? action.url ?? "(page unavailable)")
-        : // Codex often emits the live card before action.query/queries land;
-          // don't flash the scary unavailable copy while still searching.
-          (searchQuery ?? (running ? "…" : "(query unavailable)"));
-  const variants = queries.length > 1 ? ` +${queries.length - 1} variants` : "";
-  const runningTitle =
-    actionType === "open_page"
-      ? "Opening web page"
-      : actionType === "find_in_page"
-        ? "Searching within page"
-        : "Searching the web";
-  const completedTitle =
-    actionType === "open_page"
-      ? "Opened web page"
-      : actionType === "find_in_page"
-        ? "Searched within page"
-        : "Searched the web";
-  // web_search may surface a results array on the output when the host enriches it.
-  // Filter out null/undefined/non-object entries before casting: host-provided
-  // data is untrusted and a null element would throw on result.title access.
-  const rawResults = (item.output as { results?: unknown } | undefined)?.results;
-  const results = Array.isArray(rawResults)
-    ? (rawResults as unknown[]).filter((r): r is WebSearchResult => !!r && typeof r === "object")
-    : undefined;
-  const resultOccurrences = new Map<string, number>();
-  const keyedResults = results?.map((result) => {
-    const contentKey = `${result.domain}\u0000${result.title}\u0000${result.snippet}`;
-    const occurrence = (resultOccurrences.get(contentKey) ?? 0) + 1;
-    resultOccurrences.set(contentKey, occurrence);
-    return { key: `${contentKey}\u0000${occurrence}`, result };
-  });
-
-  if (running) {
-    return (
-      <ActivityDisclosure
-        icon={<SearchIcon className={ICON_SIZE} />}
-        iconTone="running"
-        title={runningTitle}
-        running
-        preview={<RunningPreview>{`${query}${variants}`}</RunningPreview>}
-      >
-        <BodyNote>searching… results fold into the model context (no output event).</BodyNote>
-      </ActivityDisclosure>
-    );
-  }
-
-  return (
-    <ActivityDisclosure
-      icon={<SearchIcon className={ICON_SIZE} />}
-      iconTone="muted"
-      title={completedTitle}
-      preview={`${query}${variants}`}
-      failed={item.status === "failed"}
-      cancelled={item.status === "cancelled"}
+        )
+      }
     >
-      {keyedResults && keyedResults.length ? (
-        <ul className="flex flex-col gap-2">
-          {keyedResults.map(({ key, result }) => (
-            <li key={key} className="flex gap-2.5">
-              <GlobeIcon className="mt-0.5 size-3.5 shrink-0 text-og-fg-subtle" />
-              <div className="min-w-0">
-                <p className="truncate text-og-base text-og-fg">
-                  {result.title} <span className="text-og-fg-subtle">{result.domain}</span>
-                </p>
-                <p className="text-og-sm leading-5 text-og-fg-muted">{result.snippet}</p>
-              </div>
-            </li>
-          ))}
-        </ul>
+      {state.kind === "ready" ? (
+        <ScreenshotFigure
+          src={state.url}
+          caption={caption}
+          alt={caption}
+          expandLabel="Expand generated image"
+          lightboxLabel="Generated image"
+        />
+      ) : state.kind === "loading" ? (
+        <BodyNote>Loading the generated image…</BodyNote>
+      ) : state.kind === "unavailable" ? (
+        <BodyNote>Image {state.label}.</BodyNote>
       ) : (
-        <BodyNote>results folded into model context — no list available.</BodyNote>
+        <ImageRetrievalError retry={state.retry} />
       )}
+      <BodyNote>
+        {dimensions.width}×{dimensions.height} · {receipt.sandboxPath}
+      </BodyNote>
     </ActivityDisclosure>
   );
 }
 
+function retainedImageFilename(artifact: RetainedArtifactReference): string {
+  const extension =
+    artifact.contentType === "image/jpeg"
+      ? "jpg"
+      : artifact.contentType === "image/webp"
+        ? "webp"
+        : "png";
+  return `${artifact.kind}-${artifact.artifactId}.${extension}`;
+}
+
+/* ---- web_search ------------------------------------------------------------ */
+
 /* ---- view_image ------------------------------------------------------------ */
 
 const VIEW_IMAGE_ERRORS = [
@@ -1331,7 +1317,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
       <ActivityDisclosure
         icon={<ImageIcon className={ICON_SIZE} />}
         iconTone="running"
-        title={`View ${basename(path)}`}
+        title={`View ${pathBasename(path)}`}
         running
         preview={<RunningPreview>reading…</RunningPreview>}
         media={<MediaSkeleton />}
@@ -1345,7 +1331,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
   const viewCancelled = item.status === "cancelled";
 
   if (retained) {
-    const title = `Viewed ${basename(path)}`;
+    const title = `Viewed ${pathBasename(path)}`;
     if (!retained.available) {
       const state =
         retained.reason === "expired" || retained.reason === "deleted"
@@ -1390,7 +1376,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
       <ActivityDisclosure
         icon={<ImageIcon className={ICON_SIZE} />}
         iconTone="failed"
-        title={`View ${basename(path)}`}
+        title={`View ${pathBasename(path)}`}
         chip={{ tone: "bad", text: tooBig ? "too large" : "error" }}
         preview={text}
       >
@@ -1403,7 +1389,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
       <ActivityDisclosure
         icon={<ImageIcon className={ICON_SIZE} />}
         iconTone={viewFailed ? "failed" : "muted"}
-        title={`Viewed ${basename(path)}`}
+        title={`Viewed ${pathBasename(path)}`}
         failed={viewFailed}
         cancelled={viewCancelled}
         preview={path}
@@ -1417,7 +1403,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
       <ActivityDisclosure
         icon={<ImageIcon className={ICON_SIZE} />}
         iconTone={viewFailed ? "failed" : "muted"}
-        title={`Viewed ${basename(path)} · image omitted · not retained`}
+        title={`Viewed ${pathBasename(path)} · image omitted · not retained`}
         failed={viewFailed}
         cancelled={viewCancelled}
         preview="inline image omitted · not retained"
@@ -1435,7 +1421,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
       <ActivityDisclosure
         icon={<ImageIcon className={ICON_SIZE} />}
         iconTone={viewFailed ? "failed" : "muted"}
-        title={`Viewed ${basename(path)}`}
+        title={`Viewed ${pathBasename(path)}`}
         failed={viewFailed}
         cancelled={viewCancelled}
         preview="(no image)"
@@ -1455,7 +1441,7 @@ function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps)
       <ActivityDisclosure
         icon={<ImageIcon className={ICON_SIZE} />}
         iconTone={viewFailed ? "failed" : "accent"}
-        title={`Viewed ${basename(path)}`}
+        title={`Viewed ${pathBasename(path)}`}
         failed={viewFailed}
         cancelled={viewCancelled}
         media={<Thumbnail src={text} caption={path} alt={path} />}
@@ -1525,123 +1511,6 @@ function SecretSetRenderer({ item }: ToolRendererProps) {
 
 /* ---- tool_search (progressive MCP disclosure) ------------------------------ */
 
-type DisclosedTool = {
-  /** Full wire name (`server__leaf` or bare). */
-  name: string;
-  /** Server / namespace prefix before `__`, when present. */
-  source: string | null;
-  /** Leaf tool name after `__`. */
-  leaf: string;
-};
-
-function splitToolWireName(name: string): DisclosedTool {
-  const boundary = name.indexOf("__");
-  if (boundary <= 0) {
-    return { name, source: null, leaf: name };
-  }
-  return {
-    name,
-    source: name.slice(0, boundary),
-    leaf: name.slice(boundary + 2),
-  };
-}
-
-/** Capability query from live tool_search args (object or JSON string). */
-function toolSearchQuery(item: ToolRendererProps["item"]): string {
-  const fromArgs = parseToolArgs(item.arguments);
-  if (typeof fromArgs.query === "string" && fromArgs.query.trim()) {
-    return fromArgs.query.trim();
-  }
-  const raw = item.raw;
-  if (raw && typeof raw === "object") {
-    const rawArgs = (raw as { arguments?: unknown }).arguments;
-    if (typeof rawArgs === "string" && rawArgs.trim()) {
-      const parsed = tryParseJson(rawArgs);
-      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-        const query = (parsed as { query?: unknown }).query;
-        if (typeof query === "string" && query.trim()) {
-          return query.trim();
-        }
-      }
-    } else if (rawArgs && typeof rawArgs === "object" && !Array.isArray(rawArgs)) {
-      const query = (rawArgs as { query?: unknown }).query;
-      if (typeof query === "string" && query.trim()) {
-        return query.trim();
-      }
-    }
-  }
-  return "";
-}
-
-/**
- * Parse disclosed tools from the runtime event shape.
- * `normalizeSdkEvent` collapses `tool_search_output.tools[]` into text:
- *   "Disclosed tools: a, b" | "No matching tools found."
- * Also accept a structured `tools` array when a host/enricher preserves it.
- */
-function parseDisclosedTools(output: unknown): DisclosedTool[] | null {
-  if (output && typeof output === "object" && !Array.isArray(output)) {
-    const tools = (output as { tools?: unknown }).tools;
-    if (Array.isArray(tools)) {
-      return tools
-        .map((tool) => {
-          if (typeof tool === "string" && tool.trim()) {
-            return splitToolWireName(tool.trim());
-          }
-          if (
-            tool &&
-            typeof tool === "object" &&
-            typeof (tool as { name?: unknown }).name === "string"
-          ) {
-            const name = (tool as { name: string }).name.trim();
-            return name ? splitToolWireName(name) : null;
-          }
-          return null;
-        })
-        .filter((tool): tool is DisclosedTool => tool != null);
-    }
-  }
-
-  const { text } = unwrapMcpOutput(output);
-  const trimmed = text.trim();
-  if (!trimmed) {
-    return null;
-  }
-  if (/^no matching tools found\.?$/i.test(trimmed)) {
-    return [];
-  }
-  const disclosed = trimmed.match(/^disclosed tools:\s*(.+)$/i);
-  if (disclosed?.[1]) {
-    return disclosed[1]
-      .split(",")
-      .map((part) => part.trim())
-      .filter(Boolean)
-      .map(splitToolWireName);
-  }
-  const parsed = tryParseJson(trimmed);
-  if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-    return parseDisclosedTools(parsed);
-  }
-  return null;
-}
-
-function toolSearchPreview(tools: DisclosedTool[] | null, cancelled: boolean): string | undefined {
-  if (cancelled) {
-    return undefined;
-  }
-  if (!tools) {
-    return "Done";
-  }
-  if (tools.length === 0) {
-    return "No matches";
-  }
-  if (tools.length === 1) {
-    return tools[0]!.leaf;
-  }
-  const head = tools[0]!.leaf;
-  return `${tools.length} tools · ${truncatePreview(head, 28)}`;
-}
-
 function ToolSearchRenderer({ item }: ToolRendererProps) {
   const query = toolSearchQuery(item);
   const icon = <PackageSearchIcon className={ICON_SIZE} />;
@@ -1726,7 +1595,9 @@ function ToolSearchRenderer({ item }: ToolRendererProps) {
 function DocsSearchRenderer({ item }: ToolRendererProps) {
   const args = parseToolArgs(item.arguments);
   const query = typeof args.query === "string" ? args.query.trim() : "";
-  const title = query ? `Search “${truncatePreview(query, 48)}”` : toolDisplayName(item.name);
+  const title = query
+    ? `Search “${truncatePreview(query, 48)}”`
+    : toolDisplayName(item.name, item.display);
   const running = item.status === "running";
 
   if (running) {
@@ -1800,7 +1671,7 @@ function DocsSearchRenderer({ item }: ToolRendererProps) {
 function SetSessionTitleRenderer({ item }: ToolRendererProps) {
   const args = parseToolArgs(item.arguments);
   const titleArg = typeof args.title === "string" ? args.title.trim() : "";
-  const display = toolDisplayName(item.name);
+  const display = toolDisplayName(item.name, item.display);
   const previewTitle = titleArg ? truncatePreview(titleArg, 72) : "";
   const icon = <MessagesSquareIcon className={ICON_SIZE} />;
 
@@ -1866,43 +1737,6 @@ function SetSessionTitleRenderer({ item }: ToolRendererProps) {
   );
 }
 
-type SearchHit = { title: string; snippet: string };
-
-function parseSearchHits(outText: string): SearchHit[] | null {
-  const parsed = tryParseJson(outText);
-  if (parsed == null) {
-    return null;
-  }
-  const list = Array.isArray(parsed)
-    ? parsed
-    : parsed &&
-        typeof parsed === "object" &&
-        Array.isArray((parsed as { results?: unknown }).results)
-      ? (parsed as { results: unknown[] }).results
-      : parsed && typeof parsed === "object" && Array.isArray((parsed as { hits?: unknown }).hits)
-        ? (parsed as { hits: unknown[] }).hits
-        : null;
-  if (!list) {
-    return null;
-  }
-  return list.map((row) => {
-    const r = row && typeof row === "object" ? (row as Record<string, unknown>) : {};
-    const title =
-      (typeof r.title === "string" && r.title) ||
-      (typeof r.name === "string" && r.name) ||
-      (typeof r.documentTitle === "string" && r.documentTitle) ||
-      (typeof r.path === "string" && r.path) ||
-      (typeof r.id === "string" && r.id) ||
-      "Result";
-    const snippet =
-      (typeof r.snippet === "string" && r.snippet) ||
-      (typeof r.text === "string" && r.text) ||
-      (typeof r.content === "string" && r.content) ||
-      "";
-    return { title, snippet: truncatePreview(snippet, 160) };
-  });
-}
-
 /* ---- company memory propose (docs MCP) ------------------------------------- */
 
 function MemoryProposeRenderer({ item }: ToolRendererProps) {
@@ -1957,177 +1791,8 @@ function MemoryProposeRenderer({ item }: ToolRendererProps) {
 
 /* ---- request_human_input --------------------------------------------------- */
 
-function askToolPreview(args: unknown): string | null {
-  const record = args && typeof args === "object" ? (args as Record<string, unknown>) : null;
-  const questions = Array.isArray(record?.questions) ? record.questions : null;
-  if (!questions || questions.length === 0) {
-    return null;
-  }
-  const first = questions[0];
-  if (!first || typeof first !== "object") {
-    return null;
-  }
-  const q = first as Record<string, unknown>;
-  const text =
-    typeof q.label === "string" && q.label.trim()
-      ? q.label.trim()
-      : typeof q.prompt === "string" && q.prompt.trim()
-        ? q.prompt.trim()
-        : null;
-  if (!text) {
-    return null;
-  }
-  const preview = truncatePreview(text, 90);
-  return questions.length > 1 ? `${preview} · ${questions.length} questions` : preview;
-}
-
-function AskRenderer({ item }: ToolRendererProps) {
-  const args = parseToolArgs(item.arguments);
-  const preview = askToolPreview(args);
-  const icon = <MessageCircleQuestionIcon className={ICON_SIZE} />;
-  const title = "Ask";
-
-  if (item.status === "running") {
-    return (
-      <ActivityDisclosure
-        icon={icon}
-        iconTone="running"
-        title={title}
-        running
-        preview={
-          preview ? (
-            <RunningPreview>{preview}</RunningPreview>
-          ) : (
-            <RunningPreview>Waiting…</RunningPreview>
-          )
-        }
-      >
-        <PayloadBlock label="Arguments" value={args} />
-      </ActivityDisclosure>
-    );
-  }
-
-  const { text: outText, isError } = unwrapMcpOutput(item.output);
-  if ((isError || item.status === "failed") && item.status !== "cancelled") {
-    return (
-      <ActivityDisclosure
-        icon={icon}
-        iconTone="failed"
-        title={title}
-        chip={{ tone: "bad", text: "error" }}
-        preview={truncatePreview(outText, 80) || preview || "Error"}
-      >
-        <PayloadBlock label="Arguments" value={args} />
-        <PayloadBlock label="Error" value={outText} failed />
-      </ActivityDisclosure>
-    );
-  }
-
-  return (
-    <ActivityDisclosure
-      icon={icon}
-      iconTone="muted"
-      title={title}
-      cancelled={item.status === "cancelled"}
-      preview={item.status === "cancelled" ? undefined : (preview ?? undefined)}
-    >
-      <PayloadBlock label="Arguments" value={args} />
-      {outText ? <PayloadBlock label="Result" value={outText} /> : null}
-    </ActivityDisclosure>
-  );
-}
-
 /* ---- run_on ---------------------------------------------------------------- */
 
-function runOnTargetName(output: unknown): string | null {
-  const { text } = unwrapMcpOutput(output);
-  const parsed = tryParseJson(text);
-  if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-    const name = (parsed as { targetName?: unknown }).targetName;
-    if (typeof name === "string" && name.trim()) {
-      return name.trim();
-    }
-  }
-  return null;
-}
-
-function runOnOpPreview(args: Record<string, unknown>): string | null {
-  const op = args.op;
-  if (!op || typeof op !== "object" || Array.isArray(op)) {
-    return null;
-  }
-  const record = op as Record<string, unknown>;
-  if (record.kind === "exec" && typeof record.cmd === "string" && record.cmd.trim()) {
-    return `$ ${record.cmd.trim()}`;
-  }
-  if (
-    (record.kind === "read" || record.kind === "write") &&
-    typeof record.path === "string" &&
-    record.path.trim()
-  ) {
-    return truncatePreview(record.path.trim(), 72);
-  }
-  return null;
-}
-
-function RunOnRenderer({ item }: ToolRendererProps) {
-  const parsedArgs = parseToolArgs(item.arguments);
-  const args = parsedArgs;
-  const targetName = runOnTargetName(item.output);
-  const title = targetName ? `Run on ${targetName}` : "Run on";
-  const opPreview = runOnOpPreview(parsedArgs);
-  const icon = <ServerIcon className={ICON_SIZE} />;
-
-  if (item.status === "running") {
-    return (
-      <ActivityDisclosure
-        icon={icon}
-        iconTone="running"
-        title={title}
-        running
-        preview={
-          opPreview ? (
-            <RunningPreview>{opPreview}</RunningPreview>
-          ) : (
-            <RunningPreview>Running…</RunningPreview>
-          )
-        }
-      >
-        <PayloadBlock label="Arguments" value={args} />
-      </ActivityDisclosure>
-    );
-  }
-
-  const { text: outText, isError } = unwrapMcpOutput(item.output);
-  if ((isError || item.status === "failed") && item.status !== "cancelled") {
-    return (
-      <ActivityDisclosure
-        icon={icon}
-        iconTone="failed"
-        title={title}
-        chip={{ tone: "bad", text: "error" }}
-        preview={truncatePreview(outText, 80) || opPreview || "Error"}
-      >
-        <PayloadBlock label="Arguments" value={args} />
-        <PayloadBlock label="Error" value={outText} failed />
-      </ActivityDisclosure>
-    );
-  }
-
-  return (
-    <ActivityDisclosure
-      icon={icon}
-      iconTone="muted"
-      title={title}
-      cancelled={item.status === "cancelled"}
-      preview={item.status === "cancelled" ? undefined : (opPreview ?? undefined)}
-    >
-      <PayloadBlock label="Arguments" value={args} />
-      {outText ? <PayloadBlock label="Result" value={outText} /> : null}
-    </ActivityDisclosure>
-  );
-}
-
 /* ---- generic fallback (first-party MCP, external MCP, unknown) ------------- */
 
 /**
@@ -2135,150 +1800,127 @@ function RunOnRenderer({ item }: ToolRendererProps) {
  * status preview (Running… / Done / error snippet). No argument-field sniffing —
  * JSON stays in the expandable body only.
  */
-function GenericRenderer({ item }: ToolRendererProps) {
-  const running = item.status === "running";
-  const args = parseToolArgs(item.arguments);
-  const display = toolDisplayName(item.name);
-  const icon = <GenericToolIcon name={item.name} />;
-  // Goal tools: surface the objective text on the collapsed row so the in-cluster
-  // tool replaces the old breakaway GoalRow pill without losing the gist.
-  const goalPreview = goalToolPreview(item.name, args);
-
-  if (running) {
-    return (
-      <ActivityDisclosure
-        icon={icon}
-        iconTone="running"
-        title={display}
-        running
-        preview={goalPreview ?? <RunningPreview>Running…</RunningPreview>}
-      >
-        <PayloadBlock label="Arguments" value={args} />
-      </ActivityDisclosure>
-    );
-  }
+function GenericRenderer(props: ToolRendererProps) {
+  const reviewed = useHasToolReview(props.item.callId);
+  if (reviewed && props.item.callId) return <ReviewedGenericRenderer {...props} />;
+  return <UnreviewedGenericRenderer {...props} />;
+}
 
-  const { text: outText, isError } = unwrapMcpOutput(item.output);
-  // Cancelled is NOT an error — a user-cancelled tool should not surface the red
-  // error chip even if the output payload carries an isError flag (the error may be
-  // a consequence of the cancellation, not the tool's own failure).
-  if ((isError || item.status === "failed") && item.status !== "cancelled") {
-    return (
-      <ActivityDisclosure
-        icon={icon}
-        iconTone="failed"
-        title={display}
-        chip={{ tone: "bad", text: "error" }}
-        preview={truncatePreview(outText, 80) || "Error"}
-      >
-        <PayloadBlock label="Arguments" value={args} />
-        <PayloadBlock label="Error" value={outText} failed />
-      </ActivityDisclosure>
-    );
-  }
+/** Settled review states earn one quiet gutter word; success and waiting stay chip-free. */
+const REVIEW_CHIP: Partial<Record<ToolReviewStatus, DisclosureChip>> = {
+  rejected: { tone: "interrupted", text: "declined" },
+  cancelled: { tone: "interrupted", text: "not run" },
+  expired: { tone: "interrupted", text: "expired" },
+  stale: { tone: "interrupted", text: "not run" },
+  revoked: { tone: "interrupted", text: "not run" },
+  blocked: { tone: "interrupted", text: "blocked" },
+  unknown: { tone: "bad", text: "outcome unknown" },
+  partial: { tone: "bad", text: "partly done" },
+  failed: { tone: "bad", text: "failed" },
+};
 
+/**
+ * A call that went through approval keeps the ordinary row shape, titled with
+ * what was approved. The expanded body is the saved review plus the result.
+ */
+function ReviewedGenericRenderer(props: ToolRendererProps) {
+  const { item } = props;
+  const { review, onViewDetails } = useRecordedToolReview(item.callId);
+  const logo = useToolConnectorLogo(item.display);
+  if (!review) return <UnreviewedGenericRenderer {...props} />;
+  const ReviewIcon = toolIcon(genericToolIconKind(item.name));
+  const icon = <ConnectorLogoIcon src={logo} fallback={<ReviewIcon className={ICON_SIZE} />} />;
+  const waiting = review.status === "pending";
+  const running =
+    !waiting &&
+    (review.status === "executing" || review.status === "approved") &&
+    item.status === "running";
+  const { text: outText, isError } = unwrapMcpOutput(retainedToolResultImages(item.output).output);
+  const chip =
+    REVIEW_CHIP[review.status] ??
+    (isError && !running && !waiting ? ({ tone: "bad", text: "error" } as const) : undefined);
   return (
     <ActivityDisclosure
       icon={icon}
-      iconTone="muted"
-      title={display}
-      cancelled={item.status === "cancelled"}
-      preview={item.status === "cancelled" ? undefined : (goalPreview ?? "Done")}
+      iconTone={chip?.tone === "bad" ? "failed" : waiting ? "accent" : "muted"}
+      title={review.title}
+      running={running}
+      chip={chip}
+      preview={
+        waiting ? (
+          "Waiting for your approval"
+        ) : running ? (
+          <RunningPreview>Running…</RunningPreview>
+        ) : item.display?.connector ? (
+          // The logo names the connector; only a second account needs words.
+          (item.display.accountLabel ?? undefined)
+        ) : (
+          (review.accountLabel ?? undefined)
+        )
+      }
     >
-      <PayloadBlock label="Arguments" value={args} />
-      <PayloadBlock label="Result" value={outText} />
+      <div className="py-1" data-approval-id={item.callId} data-review-origin="history">
+        <ToolActionReviewCard
+          bare
+          review={{ ...review, availableActions: [] }}
+          onViewDetails={onViewDetails}
+        />
+      </div>
+      {outText ? <PayloadBlock label="Result" value={outText} failed={isError} /> : null}
     </ActivityDisclosure>
   );
 }
 
-function goalToolPreview(name: string, args: unknown): string | null {
-  const leaf = mcpToolLeaf(name);
-  if (
-    leaf !== "goal_set" &&
-    leaf !== "goal_update" &&
-    leaf !== "goal_complete" &&
-    leaf !== "goal_pause" &&
-    leaf !== "goal_wait"
-  ) {
-    return null;
-  }
-  const record = args && typeof args === "object" ? (args as Record<string, unknown>) : null;
-  if (!record) {
-    return null;
-  }
-  const text =
-    typeof record.text === "string"
-      ? record.text
-      : typeof record.evidence === "string"
-        ? record.evidence
-        : typeof record.rationale === "string"
-          ? record.rationale
-          : typeof record.reason === "string"
-            ? record.reason
-            : typeof record.progressNote === "string"
-              ? record.progressNote
-              : null;
-  return text ? truncatePreview(text, 90) : null;
-}
-
-function truncatePreview(text: string, max: number): string {
-  const cleaned = text.replace(/\s+/g, " ").trim();
-  if (!cleaned) {
-    return "";
-  }
-  return cleaned.length > max ? `${cleaned.slice(0, max - 1)}…` : cleaned;
-}
+/* ---- the default registry -------------------------------------------------- */
 
-/** Explicit first-party leaf/prefix → canonical product icons (match nav/pages). */
-function GenericToolIcon({ name }: { name: string }) {
-  const leaf = mcpToolLeaf(name);
-  const Icon =
-    leaf === "request_human_input"
-      ? MessageCircleQuestionIcon
-      : leaf.startsWith("goal_")
-        ? TargetIcon
-        : leaf.startsWith("memory_") ||
-            leaf === "preference_registry_summary" ||
-            leaf === "preference_registry_get"
-          ? BrainCircuitIcon
-          : leaf.startsWith("session_") ||
-              leaf === "sessions_list" ||
-              leaf === "set_session_title" ||
-              leaf === "set_other_session_title"
-            ? MessagesSquareIcon
-            : leaf.startsWith("sandbox") || leaf === "sandboxes_list" || leaf === "run_on"
-              ? ServerIcon
-              : leaf.startsWith("rig_")
-                ? ServerCogIcon
-                : leaf.startsWith("scheduled_")
-                  ? CalendarClockIcon
-                  : leaf.startsWith("artifacts_")
-                    ? PanelsTopLeftIcon
-                    : leaf.startsWith("social_")
-                      ? Share2Icon
-                      : leaf.startsWith("slack_")
-                        ? MessageSquareIcon
-                        : leaf.startsWith("github_")
-                          ? FolderGitIcon
-                          : leaf.startsWith("variable_")
-                            ? BoxIcon
-                            : leaf.startsWith("environment_")
-                              ? KeyRoundIcon
-                              : leaf.includes("document") ||
-                                  leaf.includes("knowledge") ||
-                                  leaf === "list_document_bases"
-                                ? FileSearchIcon
-                                : leaf === "tool_search"
-                                  ? PackageSearchIcon
-                                  : leaf === "load_skill"
-                                    ? PlugIcon
-                                    : WrenchIcon;
-  return <Icon className={ICON_SIZE} />;
+function KnowledgeSaveRenderer({ item }: ToolRendererProps) {
+  const output = unwrapMcpOutput(item.output);
+  const parsed = tryParseJson(output.text);
+  if (item.status === "running" || output.isError || !parsed || typeof parsed !== "object")
+    return <GenericRenderer item={item} />;
+  const value = parsed as Record<string, unknown>;
+  const receipt = (value.status === "retained" ? value.receipt : value) as
+    | Record<string, unknown>
+    | undefined;
+  if (
+    !receipt ||
+    typeof receipt.entryId !== "string" ||
+    !["published", "pending", "rejected", "archived"].includes(String(receipt.outcome))
+  )
+    return <GenericRenderer item={item} />;
+  const args = parseToolArgs(item.arguments);
+  const entry = args.entry as Record<string, unknown> | undefined;
+  return (
+    <KnowledgeReceiptRow
+      outcome={receipt.outcome as "published" | "pending" | "rejected" | "archived"}
+      entryId={receipt.entryId}
+      title={
+        typeof entry?.title === "string"
+          ? entry.title
+          : typeof value.filename === "string"
+            ? value.filename
+            : undefined
+      }
+      source={value.status === "retained" || value.retained === true}
+    />
+  );
 }
 
-/* ---- the default registry -------------------------------------------------- */
-
 const BASE_ENTRIES: ToolRegistryEntry[] = [
+  ...[
+    "knowledge_save",
+    "knowledge_archive",
+    "knowledge_retain_file",
+    "knowledge_retain_message",
+    "task_note_promote_knowledge",
+  ].flatMap((name) =>
+    [name, `opengeni__${name}`, `mcp__opengeni__${name}`].map((trustedName) => ({
+      match: "name" as const,
+      name: trustedName,
+      matchPrefixedLeaf: false,
+      render: KnowledgeSaveRenderer,
+    })),
+  ),
   // Provider-native items carry `raw.type` on the wire — this is their source of
   // truth and is consulted first by the registry.
   { match: "rawType", type: "apply_patch_call", render: ApplyPatchRenderer },
@@ -2292,29 +1934,84 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { match: "name", name: "apply_patch_call", render: ApplyPatchRenderer },
   { match: "name", name: "apply_patch", render: ApplyPatchRenderer },
   { match: "name", name: "computer_call", render: ComputerCallRenderer },
+  {
+    match: "name",
+    name: "browser_screenshot",
+    render: BrowserScreenshotRenderer,
+  },
+  { match: "name", name: "browser_observe", render: BrowserScreenshotRenderer },
+  { match: "name", name: "browser_act", render: BrowserScreenshotRenderer },
   // Function-mode computer tools (codex / chat-wire transports).
   { match: "name", name: "computer_screenshot", render: ComputerCallRenderer },
   { match: "name", name: "computer_click", render: ComputerCallRenderer },
-  { match: "name", name: "computer_double_click", render: ComputerCallRenderer },
+  {
+    match: "name",
+    name: "computer_double_click",
+    render: ComputerCallRenderer,
+  },
   { match: "name", name: "computer_move", render: ComputerCallRenderer },
   { match: "name", name: "computer_scroll", render: ComputerCallRenderer },
   { match: "name", name: "computer_type", render: ComputerCallRenderer },
   { match: "name", name: "computer_keypress", render: ComputerCallRenderer },
   { match: "name", name: "computer_drag", render: ComputerCallRenderer },
   { match: "name", name: "web_search_call", render: WebSearchRenderer },
-  { match: "name", name: "image_generation_call", render: GeneratedImageRenderer },
+  {
+    match: "name",
+    name: "image_generation_call",
+    render: GeneratedImageRenderer,
+  },
   { match: "name", name: "generate_image", render: GeneratedImageRenderer },
   { match: "name", name: "generate_video", render: GeneratedVideoRenderer },
   { match: "name", name: "tool_search", render: ToolSearchRenderer },
   { match: "name", name: "view_image", render: ViewImageRenderer },
-  { match: "name", name: "sandbox_file_publish", render: SandboxFilePublishRenderer },
-  { match: "name", name: "environment_set_variable", render: SecretSetRenderer },
-  { match: "name", name: "variable_set_set_variable", render: SecretSetRenderer },
+  {
+    match: "name",
+    name: "sandbox_file_publish",
+    render: SandboxFilePublishRenderer,
+  },
+  {
+    match: "name",
+    name: "artifacts_create",
+    render: SiteArtifactRenderer,
+    matchPrefixedLeaf: false,
+  },
+  {
+    match: "name",
+    name: "artifacts_publish",
+    render: SiteArtifactRenderer,
+    matchPrefixedLeaf: false,
+  },
+  {
+    match: "name",
+    name: "opengeni__artifacts_create",
+    render: SiteArtifactRenderer,
+    matchPrefixedLeaf: false,
+  },
+  {
+    match: "name",
+    name: "opengeni__artifacts_publish",
+    render: SiteArtifactRenderer,
+    matchPrefixedLeaf: false,
+  },
+  {
+    match: "name",
+    name: "environment_set_variable",
+    render: SecretSetRenderer,
+  },
+  {
+    match: "name",
+    name: "variable_set_set_variable",
+    render: SecretSetRenderer,
+  },
   { match: "name", name: "search_documents", render: DocsSearchRenderer },
   { match: "name", name: "knowledge_search", render: DocsSearchRenderer },
   { match: "name", name: "memory_propose", render: MemoryProposeRenderer },
   { match: "name", name: "set_session_title", render: SetSessionTitleRenderer },
-  { match: "name", name: "set_other_session_title", render: SetSessionTitleRenderer },
+  {
+    match: "name",
+    name: "set_other_session_title",
+    render: SetSessionTitleRenderer,
+  },
 ];
 
 /** The built-in tool renderer registry: every first-party tool plus a fallback. */