@opengeni/react 0.45.0 → 0.48.0

package/src/hooks/use-windowed-sections.ts

@@ -108,16 +108,18 @@ export function useWindowedSections(opts: {
     Array.from({ length: count }, (_, i) => estimateHeight(i)),
   );
 
-  // Re-seed heights when the section count changes (a new diff arrives), keeping
-  // any already-measured heights for surviving indices.
+  // Re-seed when the estimate function changes as well as when the count changes.
+  // A replacement diff can contain the same number of files but radically
+  // different section sizes; retaining measurements by index would then place
+  // every unvisited section at an offset belonging to the previous diff.
   useEffect(() => {
     setHeights((prev) => {
-      if (prev.length === count) return prev;
-      return Array.from({ length: count }, (_, i) => prev[i] ?? estimateHeight(i));
+      const next = Array.from({ length: count }, (_, i) => estimateHeight(i));
+      return prev.length === next.length && prev.every((height, index) => height === next[index])
+        ? prev
+        : next;
     });
-    // estimateHeight is expected stable; count is the real trigger.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [count]);
+  }, [count, estimateHeight]);
 
   const heightsRef = useRef(heights);
   heightsRef.current = heights;

package/src/index.ts

@@ -3,9 +3,10 @@
 
 // @opengeni/react — hooks + styled components on @opengeni/sdk.
 //
-// Import the styles once in your Tailwind entry CSS:
-//   @import "@opengeni/react/styles.css";
-//   @source "../node_modules/@opengeni/react/src";
+// Import the ready-to-use styles once:
+//   import "@opengeni/react/compiled.css";
+// Tailwind v4 hosts may instead use the additive styles.css + @source bridge;
+// container-responsive composers additionally import responsive.css.
 
 export type {
   EmbeddedFileAttachmentClientLike,
@@ -22,6 +23,7 @@ export { OpenGeniProvider } from "./provider";
 export type { OpenGeniProviderProps } from "./provider";
 export { useOpenGeni, useOpenGeniClient } from "./session-context";
 export type { ClientOverride, OpenGeniContextValue } from "./session-context";
+export { usePageLiveActivity } from "./hooks/internal";
 
 // Hooks
 export { useSession, isTitleEvent } from "./hooks/use-session";
@@ -79,7 +81,9 @@ export type {
   VoiceRecordingChunk,
   VoiceRecordingChunkUploadState,
   VoiceRecordingFinalizationState,
+  VoiceRecordingHandoffMode,
   VoiceRecordingManifest,
+  VoiceRecordingRecoveryMode,
   VoiceRecordingStore,
   VoiceRecordingTranscriptionState,
   VoiceRecordingUploadState,
@@ -229,12 +233,14 @@ export type {
   CapturedFileUnavailableReason,
   FileTreeNode,
   FileTreeStatus,
+  SandboxFilesGitSummary,
   SandboxWriteFileOptions,
   UseSandboxFilesOptions,
   UseSandboxFilesResult,
 } from "./hooks/use-sandbox-files";
 export { useSandboxGit } from "./hooks/use-sandbox-git";
 export type {
+  SandboxGitComparison,
   SandboxGitFileDiff,
   UseSandboxGitOptions,
   UseSandboxGitResult,
@@ -364,7 +370,7 @@ export type {
   TurnSummaryProps,
 } from "./timeline";
 
-// Pure provider-shape parsers (exec banner, V4A diff, secret redaction, …)
+// Pure provider-shape parsers (exec banner, V4A diff, tool arguments, …)
 export {
   applyPatchOps,
   applyPatchOpsFromToolItem,
@@ -376,7 +382,6 @@ export {
   parseExecBannerSessionId,
   parseFreeformApplyPatch,
   parseToolArgs,
-  redactSecrets,
   sandboxCommandExitCode,
   stripExecBanner,
   tailPeek,
@@ -423,7 +428,7 @@ export type {
   ComposerTranscriptionMessages,
 } from "./components/composer-transcription-control";
 export { defaultChatComposerMessages } from "./components/composer";
-export type { ChatComposerMessages } from "./components/composer";
+export type { ChatComposerMessages, ResponsiveBasis } from "./components/composer";
 export { ModelPicker } from "./components/model-picker";
 export type { ModelPickerProps } from "./components/model-picker";
 export {

package/src/lib/composer-responsive-context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext, type RefObject } from "react";
+
+/** The measurement surface used by responsive composer chrome. */
+export type ResponsiveBasis = "viewport" | "container";
+
+export type ComposerResponsiveContextValue = {
+  responsiveBasis: ResponsiveBasis;
+  rootRef: RefObject<HTMLDivElement | null>;
+};
+
+export const ComposerResponsiveContext = createContext<ComposerResponsiveContextValue | null>(null);
+
+export function useComposerResponsiveContext(): ComposerResponsiveContextValue | null {
+  return useContext(ComposerResponsiveContext);
+}

package/src/lib/use-portal-token-style.ts

@@ -1,6 +1,37 @@
-import { type CSSProperties, type RefObject, useEffect, useState } from "react";
+import {
+  type CSSProperties,
+  type RefCallback,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useComposerResponsiveContext } from "./composer-responsive-context";
 
-export type PortalTokenStyle = CSSProperties & Record<`--${string}`, string>;
+export type PortalTokenStyle = Pick<CSSProperties, "colorScheme"> &
+  Partial<Record<`--${string}`, string>>;
+
+export const PORTAL_SOURCE_INLINE_SIZE = "--og-portal-source-inline-size";
+
+/**
+ * A callback ref that publishes the currently mounted source element through
+ * React state. Unlike a bare mutable ref, late mounts and replacements cause
+ * consumers to render and restart their observers without polling.
+ */
+export function usePortalTokenSource<T extends HTMLElement>(): {
+  source: T | null;
+  currentRef: RefObject<T | null>;
+  ref: RefCallback<T>;
+} {
+  const currentRef = useRef<T | null>(null);
+  const [source, setSource] = useState<T | null>(null);
+  const ref = useCallback<RefCallback<T>>((node) => {
+    currentRef.current = node;
+    setSource((current) => (current === node ? current : node));
+  }, []);
+  return { source, currentRef, ref };
+}
 
 /**
  * Copy the effective SDK tokens across a portal boundary. A locally themed or
@@ -8,11 +39,13 @@ export type PortalTokenStyle = CSSProperties & Record<`--${string}`, string>;
  * `<body>`. Ancestor theme/class/style mutations and OS color-scheme changes
  * keep the copied values live.
  */
-export function usePortalTokenStyle(sourceRef: RefObject<HTMLElement | null>): PortalTokenStyle {
+export function usePortalTokenStyle(source: HTMLElement | null): PortalTokenStyle {
+  const responsiveContext = useComposerResponsiveContext();
   const [style, setStyle] = useState<PortalTokenStyle>({});
   useEffect(() => {
-    const source = sourceRef.current;
-    if (!source || typeof MutationObserver === "undefined") return;
+    if (!source || typeof window === "undefined") return;
+    const layoutSource =
+      responsiveContext?.responsiveBasis === "container" ? responsiveContext.rootRef.current : null;
     let signature = "";
     const sync = () => {
       const computed = getComputedStyle(source);
@@ -22,6 +55,12 @@ export function usePortalTokenStyle(sourceRef: RefObject<HTMLElement | null>): P
         if (!property.startsWith("--og-")) continue;
         next[property as `--${string}`] = computed.getPropertyValue(property);
       }
+      if (layoutSource) {
+        const inlineSize = layoutSource.clientWidth || layoutSource.getBoundingClientRect().width;
+        if (inlineSize > 0) {
+          next[PORTAL_SOURCE_INLINE_SIZE] = `${Math.round(inlineSize * 1000) / 1000}px`;
+        }
+      }
       const nextSignature = JSON.stringify(next);
       if (nextSignature !== signature) {
         signature = nextSignature;
@@ -29,23 +68,29 @@ export function usePortalTokenStyle(sourceRef: RefObject<HTMLElement | null>): P
       }
     };
     const observers: MutationObserver[] = [];
-    let ancestor: HTMLElement | null = source;
-    while (ancestor) {
-      const observer = new MutationObserver(sync);
-      observer.observe(ancestor, {
-        attributes: true,
-        attributeFilter: ["class", "data-og-density", "data-og-theme", "style"],
-      });
-      observers.push(observer);
-      ancestor = ancestor.parentElement;
+    if (typeof MutationObserver !== "undefined") {
+      let ancestor: HTMLElement | null = source;
+      while (ancestor) {
+        const observer = new MutationObserver(sync);
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: ["class", "data-og-density", "data-og-theme", "style"],
+        });
+        observers.push(observer);
+        ancestor = ancestor.parentElement;
+      }
     }
+    const resizeObserver =
+      layoutSource && typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : null;
+    if (layoutSource) resizeObserver?.observe(layoutSource);
     const colorScheme = window.matchMedia?.("(prefers-color-scheme: dark)");
     colorScheme?.addEventListener?.("change", sync);
     sync();
     return () => {
       for (const observer of observers) observer.disconnect();
+      resizeObserver?.disconnect();
       colorScheme?.removeEventListener?.("change", sync);
     };
-  }, [sourceRef]);
+  }, [responsiveContext?.responsiveBasis, responsiveContext?.rootRef, source]);
   return style;
 }

package/src/provider.tsx

@@ -6,6 +6,7 @@ import {
 } from "@opengeni/sdk";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import type { SessionClientLike } from "./client";
+import { usePageLiveActivity } from "./hooks/internal";
 import { OpenGeniContext } from "./session-context";
 
 export { useOpenGeni, useOpenGeniClient } from "./session-context";
@@ -40,6 +41,9 @@ export function OpenGeniProvider({
   );
   const callbackRef = useRef(onWorkspaceControlEvent);
   const reconcilersRef = useRef(new Map<string, Map<string, () => Promise<void>>>());
+  const reconcileInFlightRef = useRef(new Map<string, Promise<void>>());
+  const workspaceControlSequencesRef = useRef(new Map<string, number>());
+  const pageLive = usePageLiveActivity();
   callbackRef.current = onWorkspaceControlEvent;
 
   const verifyApiContract = useCallback(async (): Promise<void> => {
@@ -76,31 +80,57 @@ export function OpenGeniProvider({
   );
   const reconcileSession = useMemo(
     () =>
-      async (sessionId: string): Promise<void> => {
+      (sessionId: string): Promise<void> => {
+        const existing = reconcileInFlightRef.current.get(sessionId);
+        if (existing) return existing;
         // This read also crosses the exact API-contract handshake before stale
         // state can be presented as live after a deployment.
-        await verifyApiContract();
-        const callbacks = [...(reconcilersRef.current.get(sessionId)?.values() ?? [])];
-        await Promise.all(callbacks.map((reconcile) => reconcile()));
+        const promise = (async () => {
+          await withTimeout(verifyApiContract(), 10_000, "API contract reconciliation");
+          const callbacks = [...(reconcilersRef.current.get(sessionId)?.values() ?? [])];
+          await withTimeout(
+            Promise.all(callbacks.map((reconcile) => reconcile())).then(() => undefined),
+            15_000,
+            "session reconciliation",
+          );
+        })().finally(() => {
+          if (reconcileInFlightRef.current.get(sessionId) === promise) {
+            reconcileInFlightRef.current.delete(sessionId);
+          }
+        });
+        reconcileInFlightRef.current.set(sessionId, promise);
+        return promise;
       },
     [verifyApiContract],
   );
 
   useEffect(() => {
+    if (!pageLive) {
+      setWorkspaceControlConnectionState("idle");
+      return;
+    }
     const controller = new AbortController();
-    setWorkspaceControlEvent(null);
     setWorkspaceControlConnectionState("connecting");
     void (async () => {
       try {
         await verifyApiContract();
         const workspace = await client.getWorkspace(workspaceId);
+        const resumeAfter = Math.max(
+          workspaceControlSequencesRef.current.get(workspaceId) ?? 0,
+          workspace.inferenceControl.revision,
+        );
+        workspaceControlSequencesRef.current.set(workspaceId, resumeAfter);
         const stream = client.streamWorkspaceControlEvents(workspaceId, {
-          after: workspace.inferenceControl.revision,
+          after: resumeAfter,
           signal: controller.signal,
           onStateChange: setWorkspaceControlConnectionState,
         });
         for await (const event of stream) {
           if (controller.signal.aborted) return;
+          workspaceControlSequencesRef.current.set(
+            workspaceId,
+            Math.max(workspaceControlSequencesRef.current.get(workspaceId) ?? 0, event.sequence),
+          );
           setWorkspaceControlEvent((current) =>
             !current || event.sequence > current.sequence ? event : current,
           );
@@ -115,7 +145,7 @@ export function OpenGeniProvider({
       }
     })();
     return () => controller.abort();
-  }, [client, verifyApiContract, workspaceId]);
+  }, [client, pageLive, verifyApiContract, workspaceId]);
 
   const value = useMemo(
     () => ({
@@ -143,6 +173,21 @@ export function OpenGeniProvider({
   );
 }
 
+function withTimeout<T>(promise: Promise<T>, timeoutMs: number, label: string): Promise<T> {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  return Promise.race([
+    promise,
+    new Promise<T>((_resolve, reject) => {
+      timer = setTimeout(
+        () => reject(new Error(`${label} timed out after ${timeoutMs}ms`)),
+        timeoutMs,
+      );
+    }),
+  ]).finally(() => {
+    if (timer !== undefined) clearTimeout(timer);
+  });
+}
+
 function ApiContractMismatchScreen({ mismatch }: { mismatch: OpenGeniApiContractMismatchError }) {
   return (
     <div

package/src/realtime/dropdown-menu.tsx

@@ -2,18 +2,16 @@
 
 import { ChevronRightIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import {
-  createContext,
-  useContext,
-  useRef,
-  type ComponentProps,
-  type Ref,
-  type RefObject,
-} from "react";
+import { createContext, useContext, type ComponentProps, type Ref } from "react";
 import { cn } from "../lib/cn";
-import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 
-const DropdownMenuSourceContext = createContext<RefObject<HTMLElement | null> | null>(null);
+type DropdownMenuSourceContextValue = {
+  source: HTMLElement | null;
+  ref: (node: HTMLElement | null) => void;
+};
+
+const DropdownMenuSourceContext = createContext<DropdownMenuSourceContextValue | null>(null);
 
 function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
   if (typeof ref === "function") ref(value);
@@ -21,9 +19,9 @@ function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
 }
 
 function DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  const sourceRef = useRef<HTMLElement | null>(null);
+  const source = usePortalTokenSource<HTMLElement>();
   return (
-    <DropdownMenuSourceContext.Provider value={sourceRef}>
+    <DropdownMenuSourceContext.Provider value={source}>
       <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
     </DropdownMenuSourceContext.Provider>
   );
@@ -38,7 +36,7 @@ function DropdownMenuTrigger({
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       ref={(node) => {
-        if (sourceRef) sourceRef.current = node;
+        sourceRef?.ref(node);
         assignRef(ref, node);
       }}
       {...props}
@@ -52,9 +50,8 @@ function DropdownMenuContent({
   style,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  const sourceRef = useContext(DropdownMenuSourceContext);
-  const fallbackRef = useRef<HTMLElement | null>(null);
-  const portalStyle = usePortalTokenStyle(sourceRef ?? fallbackRef);
+  const source = useContext(DropdownMenuSourceContext);
+  const portalStyle = usePortalTokenStyle(source?.source ?? null);
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
@@ -138,9 +135,8 @@ function DropdownMenuSubContent({
   style,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  const sourceRef = useContext(DropdownMenuSourceContext);
-  const fallbackRef = useRef<HTMLElement | null>(null);
-  const portalStyle = usePortalTokenStyle(sourceRef ?? fallbackRef);
+  const source = useContext(DropdownMenuSourceContext);
+  const portalStyle = usePortalTokenStyle(source?.source ?? null);
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"

package/src/realtime/realtime-control.tsx

@@ -297,6 +297,13 @@ export function SessionRealtimeControl(props: {
   onRealtimeAutostartConsumed?: (() => void) | undefined;
   /** Host hides dictate (and can choreograph layout) while realtime voice is live. */
   onVoiceActiveChange?: ((active: boolean) => void) | undefined;
+  /**
+   * `split` attaches the model chevron at every breakpoint (public default).
+   * `split-desktop` hides it below `sm` when the host owns mobile selection.
+   * Inside a container-responsive Composer.Root, `sm` follows that composer.
+   * `none` never attaches a model menu to the bar button.
+   */
+  modelMenu?: "split" | "split-desktop" | "none" | undefined;
   /** Deterministic browser-test/demo seam. Production hosts should use the SDK default. */
   controllerFactory?: SessionRealtimeControllerFactory | undefined;
 }) {
@@ -365,6 +372,7 @@ export function SessionRealtimeControl(props: {
       admissionBlocker={realtime.admissionBlocker}
       modelAvailable={selectedModel.available}
       menuSide="top"
+      modelMenu={props.modelMenu ?? "split"}
       audioRef={realtime.audioRef}
       selectedModel={selectedModel}
       models={selection.models}
@@ -475,6 +483,7 @@ export function NewSessionRealtimeControl(props: {
   /**
    * `split` attaches the model chevron at every breakpoint (public default).
    * `split-desktop` hides it below `sm` when the host owns mobile selection (e.g. “+”).
+   * Inside a container-responsive Composer.Root, `sm` follows that composer.
    * `none` never attaches a model menu to the bar button.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
@@ -556,6 +565,7 @@ export function RealtimeVoiceControl(props: {
   /**
    * `split` = start + model chevron at every breakpoint (public SDK default).
    * `split-desktop` = chevron from `sm` up; below that the host owns selection.
+   * Inside a container-responsive Composer.Root, `sm` follows that composer.
    * `none` = start button only.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
@@ -632,7 +642,8 @@ export function RealtimeVoiceControl(props: {
       role="group"
       aria-label="Realtime voice"
       data-picker-side={props.menuSide ?? "top"}
-      className="inline-flex shrink-0 items-center"
+      data-model-menu={modelMenu}
+      className="og-realtime-control inline-flex shrink-0 items-center"
     >
       <audio ref={props.audioRef} autoPlay className="hidden" aria-hidden="true" />
       <RealtimeComposerGlow phase={status.phase} reduceMotion={reduceMotion === true} />
@@ -719,7 +730,7 @@ export function RealtimeVoiceControl(props: {
             // Match transcription mic: ghost icon when idle; filled only when live.
             // Public contract: coarse pointers keep a 44px target; split menu uses
             // left-only rounding at `sm+` where the chevron attaches.
-            "relative inline-flex size-8 items-center justify-center outline-none",
+            "og-realtime-primary relative inline-flex size-8 items-center justify-center outline-hidden",
             "rounded-og-md transition-[background-color,border-color,color,box-shadow] duration-200 ease-og-out",
             "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-og-accent/45",
             "disabled:cursor-not-allowed disabled:opacity-45 pointer-coarse:size-11",
@@ -746,11 +757,11 @@ export function RealtimeVoiceControl(props: {
                 title={`Voice model: ${selectedModel.label}`}
                 disabled={props.selectionDisabled}
                 className={cn(
-                  // ≥24px wide so WCAG 2.2 target-size passes when the chevron is shown.
-                  "inline-flex h-8 w-6 items-center justify-center rounded-r-og-md outline-none",
+                  // Keep the split trigger compact on desktop while preserving a
+                  // full 44px mobile target independent of pointer-media support.
+                  "og-realtime-model-trigger inline-flex h-11 w-11 items-center justify-center rounded-r-og-md outline-hidden sm:h-8 sm:w-6",
                   "transition-[background-color,border-color,color] duration-200 ease-og-out",
                   "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-og-accent/45",
-                  "pointer-coarse:h-11 pointer-coarse:w-7",
                   desktopOnlyModelMenu && "hidden sm:inline-flex",
                   voiceChevronTone(status.phase),
                 )}
@@ -763,7 +774,7 @@ export function RealtimeVoiceControl(props: {
               align="end"
               sideOffset={8}
               collisionPadding={12}
-              className="flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-xl border-border bg-surface p-1.5 shadow-xl"
+              className="og-realtime-menu flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-xl border-border bg-surface p-1.5 shadow-xl"
               onCloseAutoFocus={(event) => event.preventDefault()}
             >
               <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
@@ -931,7 +942,7 @@ function RealtimeMuteButton(props: {
       {...(props.reduceMotion ? {} : { whileTap: { scale: 0.92 } })}
       onClick={props.onToggle}
       className={cn(
-        "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md outline-none",
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md outline-hidden",
         "transition-[background-color,border-color,color] duration-150 ease-og-out",
         "focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:size-11",
         props.muted

package/src/timeline/activity-rail.tsx

@@ -12,7 +12,7 @@ import { cn } from "../lib/cn";
 import { truncate } from "../lib/format";
 import { defaultToolRegistry } from "./tool-renderers";
 import { useEntranceAnimation, useEntranceAnimationLive } from "./entrance";
-import type { ToolRegistry } from "./registry";
+import type { RetainedScreenshotLoader, ToolRegistry } from "./registry";
 import { useSeenActivityIds } from "./seen-activity-ids";
 import { BodyNote, PayloadBlock, ActivityDisclosure } from "./shared";
 import { toolDisplayName } from "./tool-display-name";
@@ -43,6 +43,7 @@ export type ActivityRailProps = {
    * row is then non-interactive rich content). See {@link MessageTimelineProps}.
    */
   onMemoryClick?: ((memoryId: string) => void) | undefined;
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
   /** Drop the left rule + indent (used inside a folded turn summary). */
   bare?: boolean | undefined;
   className?: string | undefined;
@@ -65,6 +66,7 @@ export function ActivityRail({
   toolRegistry = defaultToolRegistry,
   onOpenSession,
   onMemoryClick,
+  loadRetainedScreenshot,
   bare,
   className,
 }: ActivityRailProps) {
@@ -112,7 +114,13 @@ export function ActivityRail({
     >
       {items.map((item, index) => {
         const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]!);
-        const row = renderActivity(item, toolRegistry, onOpenSession, onMemoryClick);
+        const row = renderActivity(
+          item,
+          toolRegistry,
+          onOpenSession,
+          onMemoryClick,
+          loadRetainedScreenshot,
+        );
         return (
           <div
             key={item.id}
@@ -137,13 +145,14 @@ function renderActivity(
   toolRegistry: ToolRegistry,
   onOpenSession: ((sessionId: string) => void) | undefined,
   onMemoryClick: ((memoryId: string) => void) | undefined,
+  loadRetainedScreenshot: RetainedScreenshotLoader | undefined,
 ) {
   switch (item.kind) {
     case "reasoning":
       return <ReasoningRow item={item} />;
     case "tool-call": {
       const Renderer = toolRegistry.resolve(item);
-      return <Renderer item={item} />;
+      return <Renderer item={item} loadRetainedScreenshot={loadRetainedScreenshot} />;
     }
     case "worker":
       return <WorkerRow item={item} onOpenSession={onOpenSession} />;
@@ -281,7 +290,7 @@ function MemoryRow({
           onClick={() => onMemoryClick?.(targetId)}
           className={cn(
             "group/memlink -mx-1 inline-flex w-fit items-center gap-1 rounded-og-sm px-1 py-0.5 text-left text-og-sm text-og-fg-subtle",
-            "outline-none transition-colors duration-150 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent",
+            "outline-hidden transition-colors duration-150 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent",
           )}
         >
           View in memory
@@ -418,8 +427,8 @@ function WorkerRow({
         onClick={() => onOpenSession(sessionId)}
         className={cn(
           "group/worker -mx-1.5 flex w-full items-start gap-2 rounded-og-sm px-1.5 py-1.5 text-left",
-          "outline-none transition-colors duration-150 hover:bg-og-surface-1 focus-visible:ring-2 focus-visible:ring-og-accent",
-          "pointer-coarse:py-2.5",
+          "outline-hidden transition-colors duration-150 hover:bg-og-surface-1 focus-visible:ring-2 focus-visible:ring-og-accent",
+          "pointer-coarse:min-h-11 pointer-coarse:py-2.5",
         )}
       >
         {inner}

package/src/timeline/index.ts

@@ -56,6 +56,7 @@ export type {
 export { createToolRegistry, rawTypeOf } from "./registry";
 export type {
   CreateToolRegistryOptions,
+  RetainedScreenshotLoader,
   ToolRegistry,
   ToolRegistryEntry,
   ToolRenderer,
@@ -123,7 +124,6 @@ export {
   looksBinary,
   parseExecBannerSessionId,
   parseToolArgs,
-  redactSecrets,
   sandboxCommandExitCode,
   stripExecBanner,
   tailPeek,

package/src/timeline/parsers.ts

@@ -1,4 +1,4 @@
-import { normalizeMcpOutput, type GitFileDiff } from "@opengeni/sdk";
+import { normalizeMcpOutput, type GitFileDiff, type RetainedArtifactMetadata } from "@opengeni/sdk";
 import { tryParseJson } from "../lib/format";
 
 /* ----------------------------------------------------------------------------
@@ -437,25 +437,6 @@ export function isApplyPatch(item: { name: string; raw: unknown }): boolean {
   return name === "apply_patch_call" || name === "apply_patch" || name.endsWith("__apply_patch");
 }
 
-/* --- secret redaction ------------------------------------------------------- */
-
-const SECRET_KEY = /^(value|secret|token|password|api[_-]?key|signing[_-]?key)$/i;
-
-/** Deep-redact secret-looking values so arguments never leak a key into the UI. */
-export function redactSecrets(value: unknown): unknown {
-  if (Array.isArray(value)) {
-    return value.map(redactSecrets);
-  }
-  if (value && typeof value === "object") {
-    const out: Record<string, unknown> = {};
-    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
-      out[k] = SECRET_KEY.test(k) ? "••••" : redactSecrets(v);
-    }
-    return out;
-  }
-  return value;
-}
-
 /** Parse tool arguments that may arrive as a JSON string or an object. */
 export function parseToolArgs(args: unknown): Record<string, unknown> {
   if (args == null) {
@@ -558,6 +539,38 @@ export function screenshotDataUrl(out: unknown): string | null {
   return null;
 }
 
+/** Parse the closed retained-screenshot receipt carried by new tool events. */
+export function retainedScreenshotMetadata(out: unknown): RetainedArtifactMetadata | null {
+  if (typeof out === "string" && (out.startsWith("{") || out.startsWith("["))) {
+    const parsed = tryParseJson(out);
+    if (parsed !== undefined && parsed !== out) return retainedScreenshotMetadata(parsed);
+  }
+  if (Array.isArray(out)) {
+    for (const entry of out) {
+      const metadata = retainedScreenshotMetadata(entry);
+      if (metadata) return metadata;
+    }
+    return null;
+  }
+  if (!out || typeof out !== "object") return null;
+  const value = out as Record<string, unknown>;
+  if (typeof value.artifactId !== "string" || typeof value.available !== "boolean") return null;
+  if (!value.available) {
+    return typeof value.reason === "string" ? (value as unknown as RetainedArtifactMetadata) : null;
+  }
+  return value.kind === "computer_screenshot" &&
+    value.contentType === "image/png" &&
+    typeof value.originalBytes === "number" &&
+    typeof value.sha256 === "string" &&
+    value.dimensions !== null &&
+    typeof value.dimensions === "object" &&
+    value.retention !== null &&
+    typeof value.retention === "object" &&
+    (value.retention as Record<string, unknown>).policy === "session_screenshot"
+    ? (value as unknown as RetainedArtifactMetadata)
+    : null;
+}
+
 export type TimelineMediaPreview = {
   type: "media_preview";
   mediaType: string;