@opengeni/react 5.1.0-canary.0 → 5.2.0-canary.0

package/src/components/message-timeline.tsx

@@ -1,3 +1,4 @@
+import { RollingActivity } from "../timeline/rolling-activity";
 import { GenieLoadingOptionsContext, type GenieLoadingOptions } from "../timeline/genie-loading";
 import { ChildSessionLink } from "./child-session-link";
 import { useStartupDetails } from "../timeline/startup-preference";
@@ -2526,6 +2527,12 @@ const TimelineGroupView = memo(function TimelineGroupView({
   const startupDetails = useStartupDetails();
   const enter = useEntranceAnimation();
   const settleChrome = useTurnSettleOpen();
+  const previousSingleActivity = useRef<ActivityItem | undefined>(undefined);
+  useLayoutEffect(() => {
+    const work =
+      group.kind === "activity" ? group.items.filter((item) => item.kind !== "startup-phase") : [];
+    previousSingleActivity.current = work.length === 1 ? work[0] : undefined;
+  }, [group]);
   const foldMemory = useFoldMemory();
   // Settled (or live-fold) activity clusters get a chip. Inside an expanded
   // turn that is the second layer — quiet nested chips under the outer turn
@@ -2552,7 +2559,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
     );
   }
   const settleFold =
-    group.kind === "turn" ? !!(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle;
+    !turnSummary?.rolling &&
+    (group.kind === "turn" ? !!(enter && !insideTurn && !turnDefaultOpen) : liveActivitySettle);
   switch (group.kind) {
     case "activity":
       // Preparation is one quiet surface, not a fold with eight technical steps.
@@ -2578,6 +2586,24 @@ const TimelineGroupView = memo(function TimelineGroupView({
           />
         );
       }
+      if (
+        turnSummary?.rolling &&
+        !startupDetails &&
+        group.items.filter((item) => item.kind !== "startup-phase").length === 1
+      ) {
+        return (
+          <ActivityRail
+            items={group.items}
+            startupActive={false}
+            bare
+            toolRegistry={toolRegistry}
+            onOpenSession={onOpenSession}
+            onMemoryClick={onMemoryClick}
+            loadRetainedScreenshot={loadRetainedScreenshot}
+            loadRetainedArtifact={loadRetainedArtifact}
+          />
+        );
+      }
       if (insideTurn) {
         // Nested chips whenever the parent has ≥2 clusters. During outer settle
         // chrome they stay force-open so structure is visible and height stays
@@ -2589,7 +2615,13 @@ const TimelineGroupView = memo(function TimelineGroupView({
         // settled closed pre-wrap was showing as a CHIP, so mounting it closed
         // is both the stable height and the honest state — force-opening it
         // was the "already-collapsed cluster auto-expands at the end" reopen.
-        const useNestedChip = nestClusterChips && activityShouldFold && !containsGeneratedImage;
+        const visibleActivity = group.items.filter((item) => item.kind !== "startup-phase");
+        const singleThought =
+          !startupDetails &&
+          visibleActivity.length === 1 &&
+          visibleActivity[0]?.kind === "reasoning";
+        const useNestedChip =
+          nestClusterChips && activityShouldFold && !containsGeneratedImage && !singleThought;
         if (!useNestedChip) {
           return (
             <ActivityRail
@@ -2634,7 +2666,20 @@ const TimelineGroupView = memo(function TimelineGroupView({
           items={group.items}
           outcome={group.outcome}
           failureText={group.failureText}
-          defaultOpen={!activityShouldFold || group.outcome === "failed" ? true : undefined}
+          defaultOpen={
+            group.outcome === "failed" || (!turnSummary?.rolling && !activityShouldFold)
+              ? true
+              : undefined
+          }
+          liveHeader={
+            turnSummary?.rolling && !group.outcome && !foldLiveCluster ? (
+              <RollingActivity
+                items={group.items}
+                toolRegistry={toolRegistry}
+                previousItem={previousSingleActivity.current}
+              />
+            ) : undefined
+          }
           foldKey={group.id}
           facets={turnSummary?.facets}
           settleFold={settleFold}

package/src/hooks/use-computer-session.ts

@@ -117,6 +117,33 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
       if (!mountedRef.current || requestRef.current.id !== id) return;
       const targets = sortComputerTargets(targetResponse.targets);
       const selected = chooseTarget(targets, selectedTargetIdRef.current, session.platform);
+      // Discovery is useful independently of semantic observation. Publish it
+      // now so a slow/unresponsive application cannot block the frame stream
+      // or prevent the person from choosing a different window or screen.
+      const previous = observationRef.current.observation;
+      const retainedObservation =
+        selected &&
+        previous?.target.id === selected.id &&
+        previous.target.controllerGeneration === selected.controllerGeneration &&
+        previous.target.targetGeneration === selected.targetGeneration
+          ? previous
+          : null;
+      selectedTargetIdRef.current = selected?.id ?? null;
+      targetsRef.current = { computerSessionId, targets };
+      observationRef.current = { computerSessionId, observation: retainedObservation };
+      setState((current) =>
+        current.computerSessionId === computerSessionId
+          ? {
+              ...current,
+              session,
+              targets,
+              selectedTargetId: selected?.id ?? null,
+              observation: retainedObservation,
+              loading: false,
+              error: null,
+            }
+          : current,
+      );
       const observation = selected
         ? await client.observeComputerTarget(workspaceId, computerSessionId, selected.id, {
             signal: controller.signal,
@@ -303,7 +330,15 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
         ? (targetsRef.current.targets.find((candidate) => candidate.id === frame.targetId) ??
           (currentObservation?.target.id === frame.targetId ? currentObservation.target : null))
         : null;
-      const target = frameTarget ?? focusTarget ?? currentObservation?.target ?? null;
+      const inputTarget =
+        (action.type === "keyboard" || action.type === "clipboard") &&
+        targetsRef.current.computerSessionId === computerSessionId
+          ? targetsRef.current.targets.find(
+              (candidate) => candidate.id === selectedTargetIdRef.current,
+            )
+          : null;
+      const target =
+        frameTarget ?? focusTarget ?? currentObservation?.target ?? inputTarget ?? null;
       if (!target) throw new Error("The desktop target is not ready for input.");
       if (frame && frame.targetId !== selectedTargetIdRef.current) {
         throw new Error("The displayed desktop frame is no longer selected.");

package/src/index.ts

@@ -1,3 +1,4 @@
+export { retainedImageId } from "./components/markdown";
 // oxlint-disable-next-line typescript/triple-slash-reference -- package consumers must load the ambient type for this optional untyped peer without emitting a runtime import.
 /// <reference path="./types/external.d.ts" />
 
@@ -520,7 +521,11 @@ export {
   sandboxFileLocationFromHref,
   sandboxFilePathFromHref,
 } from "./components/markdown";
-export type { MarkdownProps, SandboxFileLocation } from "./components/markdown";
+export type {
+  MarkdownProps,
+  MarkdownInteractiveBlock,
+  SandboxFileLocation,
+} from "./components/markdown";
 export { CopyButton, CopyHoverFrame } from "./components/copy-button";
 export { copyTextToClipboard, tableElementToTsv } from "./lib/clipboard";
 export { SessionStatus, StatusDot, SESSION_STATUS_META } from "./components/session-status";

package/src/sites-ui.tsx

@@ -29,10 +29,11 @@ type SiteScope = { client: SiteClient; workspaceId: string; className?: string }
 /** Shared native/embedded read boundary: pin content to the observed version,
  * and never accept a response belonging to another workspace or Site. */
 export async function loadSiteSnapshot(
-  client: Pick<SiteClient, "getWorkspaceArtifact" | "getWorkspaceArtifactHtml">,
+  client: Pick<SiteClient, "getWorkspaceArtifact" | "getWorkspaceArtifactHtml"> &
+    Partial<Pick<OpenGeniClient, "getWorkspaceArtifactContent">>,
   workspaceId: string,
   siteId: string,
-  options: { signal?: AbortSignal; includeArchivedContent?: boolean } = {},
+  options: { signal?: AbortSignal; includeArchivedContent?: boolean; versionId?: string } = {},
 ): Promise<{
   detail: WorkspaceArtifactDetailResponse;
   content: SiteDisplayContent | null;
@@ -42,19 +43,35 @@ export async function loadSiteSnapshot(
   options.signal?.throwIfAborted();
   if (detail.artifact.id !== siteId || detail.artifact.workspaceId !== workspaceId)
     throw new Error("Site scope mismatch");
-  const versionId = detail.artifact.currentVersion?.id;
-  const content =
-    versionId && (detail.artifact.status === "active" || options.includeArchivedContent)
+  const selectedVersion = options.versionId
+    ? detail.versions.find((version) => version.id === options.versionId)
+    : detail.artifact.currentVersion;
+  const versionId = options.versionId ?? selectedVersion?.id;
+  let content: SiteDisplayContent | null =
+    selectedVersion &&
+    versionId &&
+    (detail.artifact.status === "active" || options.includeArchivedContent)
       ? {
           artifactId: siteId,
           versionId,
-          requestedTools: detail.artifact.currentVersion!.requestedTools,
+          requestedTools: selectedVersion!.requestedTools,
           html: await client.getWorkspaceArtifactHtml(workspaceId, siteId, {
             ...requestOptions,
             versionId,
           }),
         }
       : null;
+  if (
+    versionId &&
+    !selectedVersion &&
+    (detail.artifact.status === "active" || options.includeArchivedContent)
+  ) {
+    if (!client.getWorkspaceArtifactContent) throw new Error("Site version unavailable");
+    content = await client.getWorkspaceArtifactContent(workspaceId, siteId, {
+      ...requestOptions,
+      versionId,
+    });
+  }
   options.signal?.throwIfAborted();
   if (content && (content.artifactId !== siteId || content.versionId !== versionId))
     throw new Error("Site content mismatch");

package/src/timeline/activity-rail.tsx

@@ -2,7 +2,7 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { GenieLoading } from "./genie-loading";
 import { useStartupDetails } from "./startup-preference";
 import { ArrowRightIcon, BotIcon, BrainCircuitIcon } from "lucide-react";
-import { lazy, Suspense, useLayoutEffect, useRef, useState } from "react";
+import { lazy, Suspense, useContext, useLayoutEffect, useRef, useState } from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
 import { Markdown } from "../components/markdown";
 import { cn } from "../lib/cn";
@@ -11,7 +11,13 @@ import { defaultToolRegistry } from "./tool-renderers";
 import { useEntranceAnimation, useEntranceAnimationLive } from "./entrance";
 import type { RetainedArtifactLoader, RetainedScreenshotLoader, ToolRegistry } from "./registry";
 import { useSeenActivityIds } from "./seen-activity-ids";
-import { BodyNote, PayloadBlock, ActivityDisclosure, ToolCallTruncationProvider } from "./shared";
+import {
+  BodyNote,
+  PayloadBlock,
+  ActivityDisclosure,
+  CompactActivityContext,
+  ToolCallTruncationProvider,
+} from "./shared";
 import { toolDisplayName } from "./tool-display-name";
 import type { ActivityItem, MemoryItem, WorkerItem } from "./types";
 
@@ -214,7 +220,7 @@ function assertNever(item: never): never {
   throw new Error(`ActivityRail: unhandled activity item ${JSON.stringify(item)}`);
 }
 
-function renderActivity(
+export function renderActivity(
   item: ActivityItem,
   toolRegistry: ToolRegistry,
   onOpenSession: ((sessionId: string) => void) | undefined,
@@ -380,6 +386,7 @@ function WorkerRow({
   item: WorkerItem;
   onOpenSession?: ((sessionId: string) => void) | undefined;
 }) {
+  const compact = useContext(CompactActivityContext);
   const running = item.status === "running";
   const failed = item.status === "failed";
   const cancelled = item.status === "cancelled";
@@ -399,6 +406,16 @@ function WorkerRow({
           : cancelled
             ? "Worker interrupted"
             : "Worker messaged";
+  if (compact) {
+    return (
+      <ActivityDisclosure
+        icon={<BotIcon className="size-3.5" />}
+        title={title}
+        preview={item.prompt}
+        running={running}
+      />
+    );
+  }
   // A worker is a first-class actor but still a STEP on the rail — a borderless
   // row (no card), aligned to its sibling tool rows: the chevron column is an
   // empty spacer (a worker doesn't expand), then the bot glyph, then the title

package/src/timeline/platform-activity-row.tsx

@@ -10,7 +10,6 @@ export default function PlatformActivityRow({
   t: displayName,
   b: BotIcon,
   m: Markdown,
-  r: truncate,
   j,
   s,
 }: {
@@ -35,7 +34,11 @@ export default function PlatformActivityRow({
             children: "Thought",
           }),
       running: item.streaming,
-      preview: truncate(item.text, 110),
+      compactPreview: item.text.replace(/\*\*|__|`/g, "").replace(/\s+/g, " "),
+      preview: j("span", {
+        className: "og-reasoning-preview",
+        children: j(Markdown, { streaming: item.streaming, children: item.text }),
+      }),
       children: j("div", {
         className: "text-og-base leading-6 text-og-fg-muted [&_strong]:text-og-fg-muted",
         children: j(Markdown, { streaming: item.streaming, children: item.text }),

package/src/timeline/retained-image.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from "react";
+import type { RetainedArtifactReference } from "@opengeni/sdk";
+import type { ToolRendererProps } from "./registry";
+type RetainedImageState =
+  | { kind: "loading" }
+  | { kind: "ready"; url: string }
+  | { kind: "unavailable"; label: string }
+  | { kind: "error"; message: string };
+
+export 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;
+}
+
+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");
+}

package/src/timeline/rolling-activity.tsx

@@ -0,0 +1,83 @@
+import { renderActivity } from "./activity-rail";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { WrenchIcon } from "lucide-react";
+import { Suspense, useEffect, useState } from "react";
+import { CompactActivityContext } from "./shared";
+import { defaultToolRegistry } from "./tool-renderers";
+import type { ToolRegistry } from "./registry";
+import { toolDisplayName } from "./tool-display-name";
+import type { ActivityItem } from "./types";
+
+/** One stable viewport; updates replace its content without moving the conversation. */
+export function RollingActivity({
+  items,
+  toolRegistry = defaultToolRegistry,
+  previousItem,
+}: {
+  items: ActivityItem[];
+  /** The standalone item visible immediately before this reel mounted. */
+  previousItem?: ActivityItem | undefined;
+  toolRegistry?: ToolRegistry;
+}) {
+  const reduced = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const work = items.filter((item) => item.kind !== "startup-phase");
+  const active = work.filter((item) =>
+    item.kind === "reasoning" ? item.streaming : "status" in item && item.status === "running",
+  );
+  // Advance with the event order; finishing a parallel tool must not replay an older one.
+  const item = !mounted && previousItem ? previousItem : work.at(-1);
+  if (!item) return null;
+  const earlierCount = Math.max(
+    0,
+    work.findIndex((entry) => entry.id === item.id),
+  );
+  const fallback = (
+    <span className="og-rolling-label">
+      <WrenchIcon className="size-3.5" />
+      <span>{item.kind === "tool-call" ? toolDisplayName(item.name) : "Working"}</span>
+    </span>
+  );
+  return (
+    <span
+      className="og-rolling-status"
+      data-running={active.some((entry) => entry.id === item.id) ? "true" : undefined}
+    >
+      <span className="sr-only">
+        {item.kind === "tool-call"
+          ? toolDisplayName(item.name)
+          : item.kind === "reasoning"
+            ? "Thinking"
+            : "Working"}
+      </span>
+      <span className="og-rolling-window" aria-hidden="true">
+        <AnimatePresence initial={false} mode="sync">
+          <motion.span
+            key={item.id}
+            className="og-rolling-face"
+            initial={{
+              opacity: 0,
+              y: reduced ? 0 : 24,
+            }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{
+              opacity: 0,
+              y: reduced ? 0 : -24,
+            }}
+            transition={{ duration: reduced ? 0 : 0.4, ease: [0.22, 1, 0.36, 1] }}
+          >
+            <CompactActivityContext.Provider value={true}>
+              <Suspense fallback={fallback}>
+                {renderActivity(item, toolRegistry, undefined, undefined, undefined, undefined)}
+              </Suspense>
+            </CompactActivityContext.Provider>
+          </motion.span>
+        </AnimatePresence>
+      </span>
+      {earlierCount > 0 ? (
+        <span className="og-rolling-count">{`+${earlierCount} earlier`}</span>
+      ) : null}
+    </span>
+  );
+}

package/src/timeline/shared.tsx

@@ -55,6 +55,8 @@ export function ToolCallTruncationProvider({
 }
 
 export type ActivityDisclosureProps = {
+  /** Override the rolling preview; null keeps rapidly streaming details out of the header. */
+  compactPreview?: ReactNode;
   icon: ReactNode;
   /** Icon tint. Defaults to the muted foreground; renderers pass accent/failed. */
   iconTone?: "accent" | "failed" | "running" | "muted" | undefined;
@@ -116,6 +118,8 @@ const ICON_TONE: Record<NonNullable<ActivityDisclosureProps["iconTone"]>, string
  * inline media, and at most one right-gutter settle chip. Compact by default;
  * the body mounts only when expanded.
  */
+export const CompactActivityContext = createContext(false);
+
 export function ActivityDisclosure({
   icon,
   iconTone: iconToneProp = "muted",
@@ -123,6 +127,7 @@ export function ActivityDisclosure({
   titleMono,
   running,
   preview,
+  compactPreview,
   media,
   chip: chipProp,
   failed,
@@ -150,6 +155,21 @@ export function ActivityDisclosure({
   const forcedDefaultOpen = useForcedDefaultOpen();
   const [open, setOpen] = useState(defaultOpen ?? forcedDefaultOpen ?? false);
   const truncation = useContext(ToolCallTruncationContext);
+  const compact = useContext(CompactActivityContext);
+  if (compact)
+    return (
+      <span className="og-rolling-label">
+        <span className={cn("shrink-0", ICON_TONE[iconTone])}>{icon}</span>
+        <span className="og-command-reel">
+          <span className="og-reel-title">{title}</span>
+          {(compactPreview === undefined ? preview : compactPreview) ? (
+            <span className="og-reel-preview text-og-fg-subtle">
+              {compactPreview === undefined ? preview : compactPreview}
+            </span>
+          ) : null}
+        </span>
+      </span>
+    );
   const hasBody = expandable && (children != null || truncation != null);
 
   // The preview is detail-on-demand: it is suppressed once the row is open so a
@@ -189,20 +209,21 @@ export function ActivityDisclosure({
         <span className="size-3.5 shrink-0" />
       )}
       <span className={cn("shrink-0", ICON_TONE[iconTone])}>{icon}</span>
-      <span
-        className={cn(
-          "min-w-0 shrink truncate text-og-base font-medium",
-          titleMono && "font-og-mono text-og-sm font-normal",
-          running && "og-shimmer-text",
+      <span className={cn("og-command-reel", running && "og-command-reel-running")}>
+        <span
+          className={cn(
+            "min-w-0 shrink truncate text-og-base font-medium",
+            titleMono && "font-og-mono text-og-sm font-normal",
+          )}
+        >
+          {title}
+        </span>
+        {previewVisible && !media ? (
+          <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
+        ) : (
+          <span className="flex-1" />
         )}
-      >
-        {title}
       </span>
-      {previewVisible && !media ? (
-        <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
-      ) : (
-        <span className="flex-1" />
-      )}
       {/* The right gutter carries at most ONE signal: the media thumbnail, else a
           terse settle chip (hidden once expanded — the body owns the detail). */}
       {media && !open ? (

package/src/timeline/tool-renderers.tsx

@@ -1,3 +1,4 @@
+import { useRetainedImageObjectUrl } from "./retained-image";
 import {
   parseSandboxFileArtifactReceipt,
   type GitFileDiff,
@@ -34,7 +35,7 @@ import {
   VideoIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useContext, useState, type ReactNode } from "react";
 import { formatBytes, stringifyPayload, tryParseJson } from "../lib/format";
 import { useTimelineComputeLabel } from "./compute-label";
 import {
@@ -71,6 +72,7 @@ import {
   TermBlock,
   Thumbnail,
   ActivityDisclosure,
+  CompactActivityContext,
   type DisclosureChip,
 } from "./shared";
 import { RawPatch, ToolDiff } from "./tool-diff";
@@ -96,9 +98,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>
   );
@@ -766,95 +771,6 @@ 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;
-}
-
-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");
-}
-
 function RetainedSessionImageDisclosure({
   artifact,
   load,