@opengeni/react 0.46.1 → 0.48.0

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",
@@ -748,7 +759,7 @@ export function RealtimeVoiceControl(props: {
                 className={cn(
                   // Keep the split trigger compact on desktop while preserving a
                   // full 44px mobile target independent of pointer-media support.
-                  "inline-flex h-11 w-11 items-center justify-center rounded-r-og-md outline-none sm:h-8 sm:w-6",
+                  "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",
                   desktopOnlyModelMenu && "hidden sm:inline-flex",
@@ -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,7 +427,7 @@ 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",
+          "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",
         )}
       >

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;

package/src/timeline/projection.ts

@@ -540,6 +540,18 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
 
       case "tool.auth_needed":
       case "credential.auth_needed": {
+        if (
+          event.type === "tool.auth_needed" &&
+          !stringValue(payload.toolName) &&
+          stringValue(payload.serverId) !== "codex_apps"
+        ) {
+          // Historical optional-MCP initialize/tools-list credential misses are
+          // setup availability, not evidence of a concrete conversational tool
+          // call. Keep the raw event in Debug/audit but do not manufacture an
+          // actionable reconnect card in the transcript. Actual tools/call auth
+          // failures carry a concrete toolName and remain visible.
+          break;
+        }
         // Keep the whole structured payload — the renderer turns it into a clean
         // inline reconnect card, and the app starts the recovery flow off the
         // connectionId/resource. Losing it to a plain-text notice was the ugly
@@ -549,6 +561,8 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           kind: "auth-needed",
           id: event.id,
           turnId,
+          serverId: typeof payload.serverId === "string" ? payload.serverId : null,
+          source: event.type === "tool.auth_needed" ? "tool" : "credential",
           providerDomain: stringValue(payload.providerDomain),
           connectionId: typeof payload.connectionId === "string" ? payload.connectionId : null,
           reason: authNeededReason(payload.reason),
@@ -1609,6 +1623,15 @@ export function extractSessionRef(value: unknown, depth = 0): string | null {
     return null;
   }
   const record = value as Record<string, unknown>;
+  const receiptResource = asRecord(record.resource);
+  if (
+    record.receiptVersion === "mcp-mutation-receipt.v1" &&
+    receiptResource.type === "session" &&
+    typeof receiptResource.id === "string" &&
+    looksLikeId(receiptResource.id)
+  ) {
+    return receiptResource.id;
+  }
   if (typeof record.sessionId === "string" && looksLikeId(record.sessionId)) {
     return record.sessionId;
   }

package/src/timeline/registry.ts

@@ -1,3 +1,4 @@
+import type { RetainedArtifactReference } from "@opengeni/sdk";
 import type { ComponentType } from "react";
 import { mcpToolLeaf } from "./tool-display-name";
 import type { ToolCallItem } from "./types";
@@ -22,8 +23,14 @@ import type { ToolCallItem } from "./types";
 
 export type ToolRendererProps = {
   item: ToolCallItem;
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
 };
 
+export type RetainedScreenshotLoader = (
+  artifact: RetainedArtifactReference,
+  signal: AbortSignal,
+) => Promise<Uint8Array | null>;
+
 export type ToolRenderer = ComponentType<ToolRendererProps>;
 
 /** A registry entry: which key it matches and the component that renders it. */

package/src/timeline/screenshot-lightbox.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 import { Dialog } from "radix-ui";
 import { cn } from "../lib/cn";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
 
 /* ----------------------------------------------------------------------------
    Screenshot lightbox
@@ -18,7 +19,7 @@ import { cn } from "../lib/cn";
    -------------------------------------------------------------------------- */
 
 type LightboxController = {
-  open: (src: string, caption?: string) => void;
+  open: (src: string, caption?: string, source?: HTMLElement | null) => void;
 };
 
 const LightboxContext = createContext<LightboxController | null>(null);
@@ -59,17 +60,25 @@ export function LightboxProvider({ children }: { children: ReactNode }) {
 
 function LightboxRoot({ children }: { children: ReactNode }) {
   const [state, setState] = useState<{ src: string; caption?: string } | null>(null);
+  const [tokenSource, setTokenSource] = useState<HTMLElement | null>(null);
+  const portalStyle = usePortalTokenStyle(tokenSource);
 
-  const open = useCallback((src: string, caption?: string) => {
+  const open = useCallback((src: string, caption?: string, source?: HTMLElement | null) => {
+    setTokenSource(source ?? null);
     setState(caption ? { src, caption } : { src });
   }, []);
 
+  const close = useCallback(() => {
+    setState(null);
+    setTokenSource(null);
+  }, []);
+
   const controller = useMemo<LightboxController>(() => ({ open }), [open]);
 
   return (
     <LightboxContext.Provider value={controller}>
       {children}
-      <Dialog.Root open={state !== null} onOpenChange={(next) => !next && setState(null)}>
+      <Dialog.Root open={state !== null} onOpenChange={(next) => !next && close()}>
         <AnimatePresence>
           {state !== null ? (
             <Dialog.Portal forceMount>
@@ -80,6 +89,7 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                   exit={{ opacity: 0 }}
                   transition={{ duration: 0.15 }}
                   className="og-root fixed inset-0 z-50 bg-black/90 backdrop-blur-md"
+                  style={portalStyle}
                 />
               </Dialog.Overlay>
               <Dialog.Content
@@ -101,10 +111,11 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                   // figcaption's "click outside to close" affordance is real.
                   onClick={(event) => {
                     if (event.target === event.currentTarget) {
-                      setState(null);
+                      close();
                     }
                   }}
                   className="og-root fixed inset-0 z-50 flex items-center justify-center p-6 sm:p-12"
+                  style={portalStyle}
                 >
                   <Dialog.Title className="sr-only">Screenshot</Dialog.Title>
                   {/* The figure is one self-contained object: image, caption, and

package/src/timeline/shared.tsx

@@ -163,7 +163,7 @@ export function ActivityDisclosure({
   const inner = (
     <>
       {hasBody ? (
-        <ChevronRightIcon className="size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-[var(--og-duration-disclose)] ease-og-in-out group-data-[state=open]/disclosure:rotate-90" />
+        <ChevronRightIcon className="size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-[var(--_og-duration-disclose)] ease-og-in-out group-data-[state=open]/disclosure:rotate-90" />
       ) : (
         <span className="size-3.5 shrink-0" />
       )}
@@ -226,7 +226,7 @@ export function ActivityDisclosure({
         data-status={dataStatus}
         className={cn(
           rowClass,
-          "cursor-pointer outline-none hover:bg-og-surface-1 hover:text-og-fg",
+          "cursor-pointer outline-hidden hover:bg-og-surface-1 hover:text-og-fg",
           "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-0",
         )}
       >
@@ -498,7 +498,7 @@ export function Thumbnail({
       type="button"
       onClick={(event) => {
         event.stopPropagation();
-        lightbox.open(src, caption);
+        lightbox.open(src, caption, event.currentTarget);
       }}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -507,7 +507,7 @@ export function Thumbnail({
       }}
       className={cn(
         MEDIA_BOX,
-        "group/thumb relative inline-flex overflow-hidden bg-og-bg outline-none",
+        "group/thumb relative inline-flex overflow-hidden bg-og-bg outline-hidden",
         "focus-visible:ring-2 focus-visible:ring-og-accent",
       )}
       aria-label="Expand screenshot"
@@ -554,7 +554,7 @@ export function ScreenshotFigure({
       ) : lightbox ? (
         <button
           type="button"
-          onClick={() => lightbox.open(src, caption)}
+          onClick={(event) => lightbox.open(src, caption, event.currentTarget)}
           className={surface}
           aria-label="Expand screenshot"
         >