@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/timeline/tool-renderers.tsx

@@ -1,10 +1,18 @@
-import type { GitFileDiff, RetainedArtifactReference } from "@opengeni/sdk";
+import { KnowledgeReceiptRow } from "./knowledge-receipt";
+import { defaultUrlTransform } from "react-markdown";
+import { isRetainedImageContentType, useRetainedImageObjectUrl } from "./retained-image";
+import {
+  parseSandboxFileArtifactReceipt,
+  type GitFileDiff,
+  type RetainedArtifactReference,
+} from "@opengeni/sdk";
 import {
   BoxIcon,
   BrainCircuitIcon,
   CalendarClockIcon,
   CameraIcon,
   CameraOffIcon,
+  DownloadIcon,
   FileDiffIcon,
   FileSearchIcon,
   FolderGitIcon,
@@ -29,8 +37,8 @@ import {
   VideoIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { stringifyPayload, tryParseJson } from "../lib/format";
+import { useContext, useState, type ReactNode } from "react";
+import { formatBytes, stringifyPayload, tryParseJson } from "../lib/format";
 import { useTimelineComputeLabel } from "./compute-label";
 import {
   applyPatchOpsFromToolItem,
@@ -66,10 +74,12 @@ import {
   TermBlock,
   Thumbnail,
   ActivityDisclosure,
+  CompactActivityContext,
   type DisclosureChip,
 } from "./shared";
 import { RawPatch, ToolDiff } from "./tool-diff";
 import { mcpToolLeaf, toolDisplayName } from "./tool-display-name";
+import { useOpenGeniLinkResolver } from "../components/open-geni-links";
 
 /* ----------------------------------------------------------------------------
    Per-tool renderers
@@ -91,9 +101,12 @@ 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>
   );
@@ -761,96 +774,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 };
-  }
-  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;
+/** 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>
+    );
+  }
+  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,
@@ -861,25 +885,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 = 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={
@@ -893,13 +919,7 @@ function RetainedSessionImageDisclosure({
       }
       media={
         state.kind === "ready" ? (
-          <Thumbnail
-            src={state.url}
-            caption={caption}
-            alt={caption}
-            expandLabel={`Expand ${noun}`}
-            lightboxLabel={lightboxLabel}
-          />
+          <Thumbnail {...figure} />
         ) : state.kind === "loading" ? (
           <MediaSkeleton />
         ) : (
@@ -908,13 +928,7 @@ function RetainedSessionImageDisclosure({
       }
     >
       {state.kind === "ready" ? (
-        <ScreenshotFigure
-          src={state.url}
-          caption={caption}
-          alt={caption}
-          expandLabel={`Expand ${noun}`}
-          lightboxLabel={lightboxLabel}
-        />
+        <ScreenshotFigure {...figure} />
       ) : state.kind === "loading" ? (
         <BodyNote>Loading the retained {noun}…</BodyNote>
       ) : state.kind === "unavailable" ? (
@@ -922,15 +936,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 : "";
@@ -1001,6 +1030,256 @@ function GeneratedVideoRenderer({ item }: ToolRendererProps) {
     </ActivityDisclosure>
   );
 }
+function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRendererProps) {
+  const { text: output, isError } = unwrapMcpOutput(item.output);
+  const receipt = parseSandboxFileArtifactReceipt(output);
+  const [downloadState, setDownloadState] = useState<"idle" | "loading" | "error">("idle");
+  if (item.status === "running") {
+    return (
+      <ActivityDisclosure
+        icon={<DownloadIcon className={ICON_SIZE} />}
+        iconTone="running"
+        title="Publishing file"
+        running
+        preview={<RunningPreview>retaining workspace bytes…</RunningPreview>}
+      />
+    );
+  }
+  if (!receipt || isError || item.status === "failed") {
+    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");
+      return;
+    }
+    setDownloadState("loading");
+    let objectUrl: string | null = null;
+    try {
+      const source = await loadRetainedArtifact(receipt.artifact, new AbortController().signal);
+      if (!source) throw new Error("artifact unavailable");
+      const url =
+        source instanceof Uint8Array
+          ? (objectUrl = URL.createObjectURL(
+              new Blob([source as unknown as BlobPart], {
+                type: receipt.artifact.contentType,
+              }),
+            ))
+          : source.url;
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = receipt.filename;
+      anchor.rel = "noopener";
+      anchor.click();
+      setDownloadState("idle");
+    } catch {
+      setDownloadState("error");
+    } finally {
+      const urlToRevoke = objectUrl;
+      if (urlToRevoke) setTimeout(() => URL.revokeObjectURL(urlToRevoke), 0);
+    }
+  };
+
+  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} />}
+      iconTone="accent"
+      title={`Published ${receipt.filename}`}
+      defaultOpen
+      preview={formatBytes(receipt.artifact.originalBytes)}
+    >
+      {downloadButton}
+      {openLink}
+    </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"
+        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()}
+      >
+        {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>
+  );
+}
+
 function GeneratedImageDisclosure({
   receipt,
   load,
@@ -1064,7 +1343,7 @@ function GeneratedImageDisclosure({
       ) : state.kind === "unavailable" ? (
         <BodyNote>Image {state.label}.</BodyNote>
       ) : (
-        <BodyNote tone="error">Image retrieval failed.</BodyNote>
+        <ImageRetrievalError retry={state.retry} />
       )}
       <BodyNote>
         {dimensions.width}×{dimensions.height} · {receipt.sandboxPath}
@@ -1073,6 +1352,16 @@ function GeneratedImageDisclosure({
   );
 }
 
+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 };
@@ -1632,7 +1921,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) {
@@ -1706,7 +1997,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} />;
 
@@ -2044,7 +2335,7 @@ function RunOnRenderer({ item }: ToolRendererProps) {
 function GenericRenderer({ item }: ToolRendererProps) {
   const running = item.status === "running";
   const args = parseToolArgs(item.arguments);
-  const display = toolDisplayName(item.name);
+  const display = toolDisplayName(item.name, item.display);
   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.
@@ -2103,7 +2394,8 @@ function goalToolPreview(name: string, args: unknown): string | null {
     leaf !== "goal_set" &&
     leaf !== "goal_update" &&
     leaf !== "goal_complete" &&
-    leaf !== "goal_pause"
+    leaf !== "goal_pause" &&
+    leaf !== "wait_for_input"
   ) {
     return null;
   }
@@ -2118,9 +2410,11 @@ function goalToolPreview(name: string, args: unknown): string | null {
         ? record.evidence
         : typeof record.rationale === "string"
           ? record.rationale
-          : typeof record.progressNote === "string"
-            ? record.progressNote
-            : null;
+          : typeof record.reason === "string"
+            ? record.reason
+            : typeof record.progressNote === "string"
+              ? record.progressNote
+              : null;
   return text ? truncatePreview(text, 90) : null;
 }
 
@@ -2173,7 +2467,7 @@ function GenericToolIcon({ name }: { name: string }) {
                                 ? FileSearchIcon
                                 : leaf === "tool_search"
                                   ? PackageSearchIcon
-                                  : leaf === "load_skill"
+                                  : leaf.startsWith("skill_")
                                     ? PlugIcon
                                     : WrenchIcon;
   return <Icon className={ICON_SIZE} />;
@@ -2181,7 +2475,54 @@ function GenericToolIcon({ name }: { name: string }) {
 
 /* ---- the default registry -------------------------------------------------- */
 
+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}
+    />
+  );
+}
+
 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 },
@@ -2195,6 +2536,9 @@ 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 },
@@ -2210,6 +2554,31 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { 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: "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 },