@opengeni/react 5.0.5-canary.3 → 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";
@@ -62,6 +63,7 @@ import {
   UserMessageBody,
   UserMessageDisclosureProvider,
   type UserMessageDisclosureContextValue,
+  type UserMessageDisclosureLabels,
 } from "./user-message-body";
 import {
   createTipFollowState,
@@ -128,6 +130,8 @@ const TimelineAnnotationSelection = lazy(() => import("./timeline-annotation-sel
 const TimelineAnnotationMarkers = lazy(() => import("./timeline-annotation-markers"));
 
 export type MessageTimelineProps = {
+  /** Localized user-message disclosure actions, including custom UserMessageBody renderers. */
+  userMessageDisclosureLabels?: UserMessageDisclosureLabels | undefined;
   /** Raw session events (projected internally) … */
   events?: SessionEvent[] | undefined;
   /** … or pre-projected items (e.g. from `useSessionEvents().timeline`). */
@@ -404,6 +408,7 @@ function cssEscapeAttribute(value: string): string {
  * with a "jump to latest" affordance when the reader scrolls back.
  */
 export function MessageTimeline({
+  userMessageDisclosureLabels,
   events,
   items,
   status: _status,
@@ -919,8 +924,16 @@ export function MessageTimeline({
     () => ({
       expandedByMessageId: userMessageDisclosureMemoryRef.current,
       beginChange: beginUserMessageDisclosureChange,
+      labels: {
+        showMore: userMessageDisclosureLabels?.showMore,
+        showLess: userMessageDisclosureLabels?.showLess,
+      },
     }),
-    [beginUserMessageDisclosureChange],
+    [
+      beginUserMessageDisclosureChange,
+      userMessageDisclosureLabels?.showMore,
+      userMessageDisclosureLabels?.showLess,
+    ],
   );
   const timelineGroupEntryContext = useMemo<TimelineGroupEntryContext>(
     () => ({
@@ -2514,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
@@ -2540,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.
@@ -2566,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
@@ -2577,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
@@ -2622,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/components/session-conversation.tsx

@@ -11,11 +11,14 @@ import { ChatComposer, type ChatComposerProps } from "./chat-composer";
 import { QueueSurface } from "./queue-surface";
 import { HumanInputSurface, type HumanInputSurfaceProps } from "./human-input-surface";
 import { MessageTimeline } from "./message-timeline";
+import type { UserMessageDisclosureLabels } from "./user-message-body";
 import { conversationTimeline } from "../conversation-timeline";
 import { cn } from "../lib/cn";
 
 export type SessionConversationProps = ClientOverride & {
   sessionId: string;
+  /** Localized actions for already-sent user-message disclosure. */
+  userMessageDisclosureLabels?: UserMessageDisclosureLabels | undefined;
   loadSkillReview?: HumanInputSurfaceProps["loadSkillReview"];
   className?: string;
   /** Defaults to filling the host. The host owns available height. */
@@ -32,6 +35,7 @@ export function SessionConversation(props: SessionConversationProps) {
 
 function Conversation({
   sessionId,
+  userMessageDisclosureLabels,
   loadSkillReview,
   client,
   workspaceId,
@@ -71,6 +75,7 @@ function Conversation({
     >
       {error && <p role="alert">{error.message}</p>}
       <MessageTimeline
+        userMessageDisclosureLabels={userMessageDisclosureLabels}
         className="min-h-0 flex-1"
         items={conversationTimeline(feed.timeline, queue, composer)}
         status={status}

package/src/components/user-message-body.tsx

@@ -190,7 +190,15 @@ function observeSharedResize(element: Element, callback: () => void): (() => voi
   };
 }
 
+export type UserMessageDisclosureLabels = {
+  /** Collapsed disclosure action. Defaults to "Show more". */
+  showMore?: string | undefined;
+  /** Expanded disclosure action. Defaults to "Show less". */
+  showLess?: string | undefined;
+};
+
 export type UserMessageDisclosureContextValue = {
+  labels?: UserMessageDisclosureLabels | undefined;
   expandedByMessageId: Map<string, boolean>;
   beginChange: (
     messageBody: HTMLElement,
@@ -235,6 +243,8 @@ export type UserMessageBodyProps = {
   text: string;
   children: ReactNode;
   className?: string | undefined;
+  /** Per-field overrides for timeline labels, then the English defaults. */
+  disclosureLabels?: UserMessageDisclosureLabels | undefined;
 };
 
 /**
@@ -247,7 +257,13 @@ export type UserMessageBodyProps = {
  * remembers expansion per durable message id and preserves the reader's scroll
  * anchor when height changes.
  */
-export function UserMessageBody({ messageId, text, children, className }: UserMessageBodyProps) {
+export function UserMessageBody({
+  messageId,
+  text,
+  children,
+  className,
+  disclosureLabels,
+}: UserMessageBodyProps) {
   const disclosure = useContext(UserMessageDisclosureContext);
   const [expanded, setExpanded] = useState(
     () => disclosure?.expandedByMessageId.get(messageId) ?? false,
@@ -454,7 +470,9 @@ export function UserMessageBody({ messageId, text, children, className }: UserMe
         className="mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-hidden transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11"
         onClick={(event) => toggle(event.currentTarget)}
       >
-        {expanded ? "Show less" : "Show more"}
+        {expanded
+          ? (disclosureLabels?.showLess ?? disclosure?.labels?.showLess ?? "Show less")
+          : (disclosureLabels?.showMore ?? disclosure?.labels?.showMore ?? "Show more")}
       </button>
     </div>
   );

package/src/hooks/use-composer.ts

@@ -677,6 +677,8 @@ export function useComposer(
   const [acceptedControl, setAcceptedControl] = useState<EffectiveSessionControl | null>(null);
   const [resuming, setResuming] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  // Background draft reads recover independently of Send/Steer/control failures.
+  const [draftReadError, setDraftReadError] = useState<Error | null>(null);
   const [draft, setDraft] = useState<ComposerDraft | null>(null);
   const [draftLoading, setDraftLoading] = useState(Boolean(sessionId) && durableDrafts);
   const [draftSaving, setDraftSaving] = useState(false);
@@ -794,6 +796,7 @@ export function useComposer(
     setAcceptedControl(null);
     setResuming(false);
     setError(null);
+    setDraftReadError(null);
     setDraft(null);
     setDraftLoading(Boolean(sessionId) && durableDrafts);
     setDraftSaving(false);
@@ -920,6 +923,7 @@ export function useComposer(
       if (targetKeyRef.current !== targetKey) return;
       if (!sessionId || !durableDrafts) {
         setDraftLoading(false);
+        setDraftReadError(null);
         return;
       }
       let retry = draftReadRetryRef.current;
@@ -993,6 +997,8 @@ export function useComposer(
         if (retry.timer !== null) clearTimeout(retry.timer);
         retry.failures = 0;
         retry.timer = null;
+        // Recovery also counts when the server returns the same draft revision.
+        setDraftReadError(null);
         const currentRevision = draftRef.current?.revision ?? -1;
         // Reconnect and client-generation effects can legitimately ask for the
         // draft again. A same-revision response is not new authority: publishing
@@ -1045,12 +1051,18 @@ export function useComposer(
         }
       } catch (cause) {
         if (
+          !requestAbort.signal.aborted &&
           generation === targetGeneration.current &&
           targetKeyRef.current === targetKey &&
           readTicket === draftReadGeneration.current
         ) {
-          setError(asError(cause));
+          const problem = asError(cause);
+          const timedOut = problem.name === "TimeoutError";
+          setDraftReadError(
+            timedOut ? new Error("Draft sync timed out. Retrying…", { cause }) : problem,
+          );
           if (
+            timedOut ||
             cause instanceof TypeError ||
             (cause && typeof cause === "object" && "retryable" in cause && cause.retryable === true)
           ) {
@@ -2639,6 +2651,7 @@ export function useComposer(
   const clearError = useCallback(() => {
     if (targetKeyRef.current !== targetKey) return;
     setError(null);
+    setDraftReadError(null);
     setDraftConflict(null);
   }, [targetKey]);
   // `valueRef` is the synchronous composer authority. React state exists to
@@ -2706,7 +2719,7 @@ export function useComposer(
     resolveDraftConflict,
     restoredResources: identityMatches ? restoredResources : [],
     removeRestoredResource,
-    error: identityMatches ? error : null,
+    error: identityMatches ? (error ?? draftReadError) : null,
     clearError,
   };
 }

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" />
 
@@ -511,13 +512,20 @@ export { GeneratedVideoPlayer } from "./components/generated-video-player";
 export type { GeneratedVideoPlayerProps } from "./components/generated-video-player";
 export type { MessageTimelineProps } from "./components/message-timeline";
 export { UserMessageBody, userMessageLikelyNeedsDisclosure } from "./components/user-message-body";
-export type { UserMessageBodyProps } from "./components/user-message-body";
+export type {
+  UserMessageBodyProps,
+  UserMessageDisclosureLabels,
+} from "./components/user-message-body";
 export {
   Markdown,
   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/session-ui.ts

@@ -16,7 +16,10 @@ export type { MessageTimelineProps } from "./components/message-timeline";
 export { createOlderHistoryLoadReceipt } from "./older-history";
 export type { OlderHistoryLoader, OlderHistoryLoadReceipt } from "./older-history";
 export { UserMessageBody, userMessageLikelyNeedsDisclosure } from "./components/user-message-body";
-export type { UserMessageBodyProps } from "./components/user-message-body";
+export type {
+  UserMessageBodyProps,
+  UserMessageDisclosureLabels,
+} from "./components/user-message-body";
 export { BUILT_IN_TURN_SUMMARY_FACET_IDS } from "./timeline/turn-summary";
 export type {
   BuiltInTurnSummaryFacetId,

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");
+}