@opengeni/react 0.46.1 → 0.48.0

package/src/hooks/use-voice-input.ts

@@ -1,4 +1,4 @@
-import type { ClientVoiceInputConfig, OpenGeniClient } from "@opengeni/sdk";
+import { OpenGeniApiError, type ClientVoiceInputConfig, type OpenGeniClient } from "@opengeni/sdk";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   IndexedDbVoiceRecordingStore,
@@ -21,6 +21,7 @@ export type VoiceInputStatus =
   | "recording"
   | "saving"
   | "transcribing"
+  | "retrying"
   | "recovered"
   | "transcript-ready"
   | "error";
@@ -39,6 +40,8 @@ export type UseVoiceInputOptions = {
   createRecordingId?: (() => string) | undefined;
   createOwnerId?: (() => string) | undefined;
   now?: (() => Date) | undefined;
+  /** Test/embed seam. Production uses bounded exponential recovery backoff. */
+  automaticRetryDelayMilliseconds?: number | undefined;
 };
 
 type ResumableVoiceInputClient = Pick<
@@ -86,7 +89,6 @@ export const VOICE_RECORDING_RESUMABLE_CLIENT_MAX_DURATION_SECONDS = 8 * 60 * 60
 export const VOICE_RECORDING_RECOVERY_STATUS_POLL_MILLISECONDS = 2_000;
 export const VOICE_RECORDING_RECOVERY_MAX_MUTATION_DELAY_MILLISECONDS = 30_000;
 const TRANSCRIPTION_RECORDING_RECOVERY_RETRY_AFTER_MILLISECONDS = 5_000;
-
 const MIME_PREFERENCES = ["audio/webm;codecs=opus", "audio/mp4", "audio/ogg;codecs=opus"];
 const createDefaultVoiceRecordingId = () => crypto.randomUUID();
 const currentDate = () => new Date();
@@ -132,6 +134,7 @@ export function useVoiceInput({
   createRecordingId = createDefaultVoiceRecordingId,
   createOwnerId,
   now = currentDate,
+  automaticRetryDelayMilliseconds,
 }: UseVoiceInputOptions): UseVoiceInputResult {
   const [status, setStatus] = useState<VoiceInputStatus>("idle");
   const [error, setError] = useState<string | null>(null);
@@ -156,6 +159,8 @@ export function useVoiceInput({
   const recorderRef = useRef<MediaRecorder | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const automaticRetryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const automaticRetryAttemptRef = useRef(0);
   const ownerHeartbeatTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const controllerRef = useRef<AbortController | null>(null);
   const valueRef = useRef(value);
@@ -211,6 +216,7 @@ export function useVoiceInput({
     setRecordingId(null);
     setDurationSeconds(0);
     setLocallySaved(false);
+    automaticRetryAttemptRef.current = 0;
   }, [stopOwnerHeartbeat]);
 
   const ensureStore = useCallback(async (): Promise<VoiceRecordingStore> => {
@@ -348,7 +354,9 @@ export function useVoiceInput({
           setStatus(
             claimed.finalizationState === "transcript-ready" && claimed.transcriptText !== null
               ? "transcript-ready"
-              : "recovered",
+              : claimed.recoveryMode === "automatic"
+                ? "retrying"
+                : "recovered",
           );
           setError(null);
           return;
@@ -415,7 +423,12 @@ export function useVoiceInput({
         if (chunks.length === 0) {
           const retained = await store.updateManifest(
             transcribing.recordingId,
-            { uploadState: "retrying", transcriptionState: "retrying" },
+            {
+              uploadState: "retrying",
+              transcriptionState: "retrying",
+              recoveryMode: "manual",
+              handoffMode: "explicit",
+            },
             readNow().toISOString(),
             ownerIdRef.current ?? undefined,
           );
@@ -447,6 +460,14 @@ export function useVoiceInput({
         if (!active()) return;
         rememberManifest(ready);
 
+        automaticRetryAttemptRef.current = 0;
+        if (ready.handoffMode === "explicit") {
+          setStatus("transcript-ready");
+          setError("handoff_uncertain");
+          focusInput();
+          return;
+        }
+
         const next = appendFinalTranscript(valueRef.current, response.text);
         if (next !== valueRef.current) {
           valueRef.current = next;
@@ -490,16 +511,22 @@ export function useVoiceInput({
         await loadNextRecoverable(generation);
       } catch (reason) {
         if (!active()) return;
+        const code = controller.signal.aborted ? null : errorCode(reason);
+        const retryable = !controller.signal.aborted && isRetryableVoiceInputError(reason);
         const retained = await updateManifestBestEffort(transcribing, {
           uploadState: "retrying",
           transcriptionState: "retrying",
+          recoveryMode: retryable ? "automatic" : "manual",
+          handoffMode: "explicit",
         });
         if (!active()) return;
-        await preserveForRetry(
-          retained,
-          controller.signal.aborted ? null : errorCode(reason),
-          generation,
-        );
+        if (retryable) {
+          rememberManifest(retained);
+          setStatus("retrying");
+          setError(code);
+        } else {
+          await preserveForRetry(retained, code, generation);
+        }
       } finally {
         if (controllerRef.current === controller) controllerRef.current = null;
       }
@@ -519,6 +546,61 @@ export function useVoiceInput({
       workspaceId,
     ],
   );
+  // Live session renders must not postpone a durable retry deadline. Execute the
+  // latest finalizer without making its callback identity part of the timer key.
+  const finalizePersistedRecordingRef = useRef(finalizePersistedRecording);
+  finalizePersistedRecordingRef.current = finalizePersistedRecording;
+  const clientAvailable = client !== null && client !== undefined;
+
+  useEffect(() => {
+    if (
+      status !== "retrying" ||
+      !manifestRef.current ||
+      manifestRef.current.recoveryMode !== "automatic" ||
+      manifestRef.current.workspaceId !== workspaceId ||
+      !clientAvailable ||
+      disabled ||
+      !enabled
+    ) {
+      return;
+    }
+    const generation = generationRef.current;
+    let started = false;
+    const run = () => {
+      if (
+        started ||
+        generation !== generationRef.current ||
+        statusRef.current !== "retrying" ||
+        workspaceIdRef.current !== workspaceId
+      ) {
+        return;
+      }
+      started = true;
+      if (automaticRetryTimerRef.current) clearTimeout(automaticRetryTimerRef.current);
+      automaticRetryTimerRef.current = null;
+      automaticRetryAttemptRef.current += 1;
+      void finalizePersistedRecordingRef.current(generation);
+    };
+    const onOnline = () => run();
+    globalThis.addEventListener?.("online", onOnline);
+    if (typeof navigator !== "undefined" && navigator.onLine === false) {
+      return () => globalThis.removeEventListener?.("online", onOnline);
+    }
+    const delay = Math.max(
+      0,
+      automaticRetryDelayMilliseconds ??
+        transcriptionRecoveryMutationDelayMilliseconds(
+          TRANSCRIPTION_RECORDING_RECOVERY_RETRY_AFTER_MILLISECONDS,
+          automaticRetryAttemptRef.current,
+        ),
+    );
+    automaticRetryTimerRef.current = setTimeout(run, delay);
+    return () => {
+      globalThis.removeEventListener?.("online", onOnline);
+      if (automaticRetryTimerRef.current) clearTimeout(automaticRetryTimerRef.current);
+      automaticRetryTimerRef.current = null;
+    };
+  }, [automaticRetryDelayMilliseconds, clientAvailable, disabled, enabled, status, workspaceId]);
 
   const stop = useCallback(() => {
     const recorder = recorderRef.current;
@@ -540,6 +622,7 @@ export function useVoiceInput({
       status === "recording" ||
       status === "saving" ||
       status === "transcribing" ||
+      status === "retrying" ||
       !navigator.mediaDevices?.getUserMedia ||
       typeof MediaRecorder === "undefined"
     ) {
@@ -716,11 +799,19 @@ export function useVoiceInput({
             }
             rememberManifest(stopped);
             if (attemptPersistenceError) {
-              await preserveForRetry(stopped, "storage_unavailable", generation);
+              const retained = await updateManifestBestEffort(stopped, {
+                recoveryMode: "manual",
+                handoffMode: "explicit",
+              });
+              await preserveForRetry(retained, "storage_unavailable", generation);
               return;
             }
             if (attemptCaptureLimitError) {
-              await preserveForRetry(stopped, attemptCaptureLimitError, generation);
+              const retained = await updateManifestBestEffort(stopped, {
+                recoveryMode: "manual",
+                handoffMode: "explicit",
+              });
+              await preserveForRetry(retained, attemptCaptureLimitError, generation);
               return;
             }
             await finalizePersistedRecording(generation);
@@ -826,9 +917,29 @@ export function useVoiceInput({
     }
     const generation = ++generationRef.current;
     controllerRef.current?.abort();
+    if (automaticRetryTimerRef.current) clearTimeout(automaticRetryTimerRef.current);
+    automaticRetryTimerRef.current = null;
+    automaticRetryAttemptRef.current = 0;
     setError(null);
-    void finalizePersistedRecording(generation);
-  }, [client, disabled, enabled, finalizePersistedRecording, status, workspaceId]);
+    const manifest = manifestRef.current;
+    void updateManifestBestEffort(manifest, {
+      recoveryMode: "automatic",
+      handoffMode: "append",
+    }).then((retained) => {
+      if (generation !== generationRef.current) return;
+      rememberManifest(retained);
+      void finalizePersistedRecording(generation);
+    });
+  }, [
+    client,
+    disabled,
+    enabled,
+    finalizePersistedRecording,
+    rememberManifest,
+    status,
+    updateManifestBestEffort,
+    workspaceId,
+  ]);
 
   const insertSavedTranscript = useCallback(async (): Promise<void> => {
     const manifest = manifestRef.current;
@@ -951,10 +1062,12 @@ export function useVoiceInput({
       void discard();
       return;
     }
-    if (status === "saving" || status === "transcribing") {
+    if (status === "saving" || status === "transcribing" || status === "retrying") {
       const generation = ++generationRef.current;
       controllerRef.current?.abort();
       controllerRef.current = null;
+      if (automaticRetryTimerRef.current) clearTimeout(automaticRetryTimerRef.current);
+      automaticRetryTimerRef.current = null;
       const captureSettled = status === "saving" ? captureSettledRef.current : Promise.resolve();
       void captureSettled.then(async () => {
         const manifest = manifestRef.current;
@@ -963,6 +1076,8 @@ export function useVoiceInput({
           captureState: "stopped",
           uploadState: "retrying",
           transcriptionState: "retrying",
+          recoveryMode: "manual",
+          handoffMode: "explicit",
         });
         await preserveForRetry(retained, null, generation);
       });
@@ -996,7 +1111,12 @@ export function useVoiceInput({
             {
               ...(current.captureState === "capturing" ? { captureState: "stopped" as const } : {}),
               ...(wasProcessing
-                ? { uploadState: "retrying" as const, transcriptionState: "retrying" as const }
+                ? {
+                    uploadState: "retrying" as const,
+                    transcriptionState: "retrying" as const,
+                    recoveryMode: "automatic" as const,
+                    handoffMode: "explicit" as const,
+                  }
                 : {}),
               ownerId: null,
               ownerHeartbeatAt: null,
@@ -1028,7 +1148,8 @@ export function useVoiceInput({
         (status === "requesting-permission" ||
           status === "recording" ||
           status === "saving" ||
-          status === "transcribing")
+          status === "transcribing" ||
+          status === "retrying")
       ) {
         event.preventDefault();
         cancel();
@@ -1043,6 +1164,8 @@ export function useVoiceInput({
       generationRef.current += 1;
       controllerRef.current?.abort();
       controllerRef.current = null;
+      if (automaticRetryTimerRef.current) clearTimeout(automaticRetryTimerRef.current);
+      automaticRetryTimerRef.current = null;
       const manifest = manifestRef.current;
       const ownerReady = ownerIdPromiseRef.current;
       stopOwnerHeartbeat();
@@ -1061,7 +1184,9 @@ export function useVoiceInput({
           const store = storeRef.current;
           if (store && manifest && ownerId) {
             const wasProcessing =
-              statusRef.current === "saving" || statusRef.current === "transcribing";
+              statusRef.current === "saving" ||
+              statusRef.current === "transcribing" ||
+              statusRef.current === "retrying";
             await store
               .updateManifest(
                 manifest.recordingId,
@@ -1073,6 +1198,8 @@ export function useVoiceInput({
                     ? {
                         uploadState: "retrying" as const,
                         transcriptionState: "retrying" as const,
+                        recoveryMode: "automatic" as const,
+                        handoffMode: "explicit" as const,
                       }
                     : {}),
                   ownerId: null,
@@ -1232,7 +1359,7 @@ async function transcribePersistedRecording(input: {
         break;
       case "failed": {
         if (!remote.recording.retryable) {
-          throw { code: remote.recording.errorCode ?? "unknown" };
+          throw { code: remote.recording.errorCode ?? "unknown", retryable: false };
         }
         const retried =
           remote.recording.segmentCount === 0
@@ -1247,7 +1374,10 @@ async function transcribePersistedRecording(input: {
                 { signal: input.signal },
               );
         if (retried.recording.state === "failed") {
-          throw { code: retried.recording.errorCode ?? "unknown" };
+          throw {
+            code: retried.recording.errorCode ?? "unknown",
+            retryable: retried.recording.retryable,
+          };
         }
         remote = retried;
         scheduleRecoveryMutation(remote);
@@ -1350,6 +1480,9 @@ function chooseMimeType(accepted: string[]): string | undefined {
 }
 
 function errorCode(error: unknown): string {
+  if (error instanceof OpenGeniApiError && typeof error.details?.transcriptionCode === "string") {
+    return error.details.transcriptionCode;
+  }
   if (error && typeof error === "object" && "code" in error && typeof error.code === "string") {
     return error.code;
   }
@@ -1357,3 +1490,14 @@ function errorCode(error: unknown): string {
   if (error instanceof DOMException && error.name === "NotSupportedError") return "not_supported";
   return "unknown";
 }
+
+function isRetryableVoiceInputError(error: unknown): boolean {
+  if (error instanceof OpenGeniApiError) {
+    return error.retryable && error.status !== 409;
+  }
+  if (error instanceof TypeError) return true;
+  if (error && typeof error === "object" && "retryable" in error) {
+    return error.retryable === true;
+  }
+  return false;
+}

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;
 }