@comergehq/studio 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/components/chat/ChatMessageList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
+import { Platform, View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
 import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
 
 import type { ChatMessage } from '../models/types';
@@ -46,10 +46,13 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
     const initialScrollDoneRef = React.useRef(false);
     const lastMessageIdRef = React.useRef<string | null>(null);
 
+    const data = React.useMemo(() => {
+      return [...messages].reverse();
+    }, [messages]);
+
     const scrollToBottom = React.useCallback((options?: { animated?: boolean }) => {
       const animated = options?.animated ?? true;
-      // Scroll to visual bottom (latest messages) in a normal (non-inverted) list.
-      listRef.current?.scrollToEnd({ animated });
+      listRef.current?.scrollToOffset({ offset: 0, animated });
     }, []);
 
     React.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
@@ -57,12 +60,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
     const handleScroll = React.useCallback(
       (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        // Treat "bottom" as the end of actual messages (excluding the intentional footer spacer),
-        // so "near bottom" still means "near the latest message", not "deep into empty space".
-        const distanceFromBottom = Math.max(
-          contentSize.height - Math.max(bottomInset, 0) - (contentOffset.y + layoutMeasurement.height),
-          0
-        );
+        const distanceFromBottom = Math.max(contentOffset.y - Math.max(bottomInset, 0), 0);
         const isNear = distanceFromBottom <= nearBottomThreshold;
 
         if (nearBottomRef.current !== isNear) {
@@ -73,16 +71,6 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
 
-    // On first load, start at the bottom
-    React.useEffect(() => {
-      if (initialScrollDoneRef.current) return;
-      if (messages.length === 0) return;
-
-      initialScrollDoneRef.current = true;
-      lastMessageIdRef.current = messages[messages.length - 1]?.id ?? null;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [messages, scrollToBottom]);
 
     // When new messages arrive, keep the user pinned to the bottom only if they already were near it.
     React.useEffect(() => {
@@ -106,36 +94,36 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       return undefined;
     }, [showTypingIndicator, scrollToBottom]);
 
-    // When the bottom inset grows/shrinks (e.g. composer height changes), keep pinned users at bottom.
-    React.useEffect(() => {
-      if (!initialScrollDoneRef.current) return;
-      if (!nearBottomRef.current) return;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [bottomInset, scrollToBottom]);
-
     return (
       <BottomSheetFlatList
         ref={listRef}
-        data={messages}
+        inverted
+        data={data}
         keyExtractor={(m: ChatMessage) => m.id}
+        keyboardShouldPersistTaps="handled"
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={false}
+        onContentSizeChange={() => {
+          if (initialScrollDoneRef.current) return;
+          initialScrollDoneRef.current = true;
+          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1]!.id : null;
+          nearBottomRef.current = true;
+          onNearBottomChange?.(true);
+          requestAnimationFrame(() => scrollToBottom({ animated: false }));
+        }}
         contentContainerStyle={[
           {
             paddingHorizontal: theme.spacing.lg,
-            paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.sm,
+            paddingVertical: theme.spacing.sm,
           },
           contentStyle,
         ]}
-        renderItem={({ item, index }: { item: ChatMessage; index: number }) => (
-          <View style={{ marginTop: index === 0 ? 0 : theme.spacing.sm }}>
-            <ChatMessageBubble message={item} renderContent={renderMessageContent} />
-          </View>
+        ItemSeparatorComponent={() => <View style={{ height: theme.spacing.sm }} />}
+        renderItem={({ item }: { item: ChatMessage }) => (
+          <ChatMessageBubble message={item} renderContent={renderMessageContent} />
         )}
-        ListFooterComponent={
+        ListHeaderComponent={
           <View>
             {showTypingIndicator ? (
               <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>

package/src/components/chat/ChatPage.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Keyboard, Platform, View, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
 
 import type { ChatMessage } from '../models/types';
 import { useTheme } from '../../theme';
@@ -22,6 +21,7 @@ export type ChatPageProps = {
    */
   overlay?: React.ReactNode;
   style?: ViewStyle;
+  composerHorizontalPadding?: number;
   onNearBottomChange?: ChatMessageListProps['onNearBottomChange'];
   listRef?: React.RefObject<ChatMessageListRef | null>;
 };
@@ -35,6 +35,7 @@ export function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef,
 }: ChatPageProps) {
@@ -42,11 +43,9 @@ export function ChatPage({
   const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-  const animatedKeyboard = useAnimatedKeyboard();
 
   React.useEffect(() => {
     if (Platform.OS !== 'ios') return;
-
     const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
     const hide = Keyboard.addListener('keyboardWillHide', () => setKeyboardVisible(false));
     return () => {
@@ -56,10 +55,6 @@ export function ChatPage({
   }, []);
 
   const footerBottomPadding = Platform.OS === 'ios' ? (keyboardVisible ? 0 : insets.bottom) : insets.bottom + 10;
-  const footerAnimatedStyle = useAnimatedStyle(() => {
-    if (Platform.OS !== 'ios') return { paddingBottom: insets.bottom + 10 };
-    return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
-  });
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
 
@@ -80,35 +75,36 @@ export function ChatPage({
         </View>
       ) : null}
       <View style={{ flex: 1 }}>
-        <ChatMessageList
-          ref={listRef}
-          messages={messages}
-          showTypingIndicator={showTypingIndicator}
-          renderMessageContent={renderMessageContent}
-          onNearBottomChange={onNearBottomChange}
-          bottomInset={bottomInset}
-        />
-        {resolvedOverlay}
-
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              paddingHorizontal: theme.spacing.lg,
-              paddingTop: theme.spacing.sm,
-            },
-            footerAnimatedStyle,
-          ]}
+        <View
+          style={{ flex: 1 }}
+        >
+          <ChatMessageList
+            ref={listRef}
+            messages={messages}
+            showTypingIndicator={showTypingIndicator}
+            renderMessageContent={renderMessageContent}
+            onNearBottomChange={onNearBottomChange}
+            bottomInset={bottomInset}
+          />
+          {resolvedOverlay}
+        </View>
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: footerBottomPadding,
+          }}
         >
           <ChatComposer
             {...composer}
             attachments={composer.attachments ?? []}
             onLayout={({ height }) => setComposerHeight(height)}
           />
-        </Animated.View>
+        </View>
       </View>
     </View>
   );

package/src/components/studio-sheet/StudioBottomSheet.tsx

@@ -35,8 +35,7 @@ export type StudioBottomSheetProps = {
   children: React.ReactNode;
 
   /**
-   * Additional BottomSheet props, for advanced tuning.
-   * We intentionally do not expose everything as first-class props to keep SRP.
+   * Additional BottomSheet props
    */
   bottomSheetProps?: Omit<
     BottomSheetProps,
@@ -56,7 +55,7 @@ export type StudioBottomSheetProps = {
 export function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ['80%', '100%'],
+  snapPoints = ['100%'],
   sheetRef,
   background,
   children,
@@ -93,20 +92,6 @@ export function StudioBottomSheet({
     return () => sub.remove();
   }, [open, resolvedSheetRef]);
 
-  React.useEffect(() => {
-    if (Platform.OS !== 'ios') return;
-    const sub = Keyboard.addListener('keyboardDidHide', () => {
-      const sheet = resolvedSheetRef.current;
-      if (!sheet || !open) return;
-      const targetIndex = snapPoints.length - 1;
-      // Only "re-snap" if we're already at the highest snap point.
-      if (currentIndexRef.current === targetIndex) {
-        setTimeout(() => sheet.snapToIndex(targetIndex), 10);
-      }
-    });
-    return () => sub.remove();
-  }, [open, resolvedSheetRef, snapPoints.length]);
-
   React.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
@@ -132,9 +117,9 @@ export function StudioBottomSheet({
       ref={resolvedSheetRef}
       index={open ? snapPoints.length - 1 : -1}
       snapPoints={snapPoints}
+      enableDynamicSizing={false}
       enablePanDownToClose
-      keyboardBehavior="interactive"
-      keyboardBlurBehavior="restore"
+      enableContentPanningGesture={false}
       android_keyboardInputMode="adjustResize"
       backgroundComponent={(props: BottomSheetBackgroundProps) => (
         <StudioSheetBackground {...props} renderBackground={background?.renderBackground} />

package/src/studio/ComergeStudio.tsx

@@ -125,6 +125,34 @@ function ComergeStudioInner({
     canRequestLatest: runtimeApp?.status === 'ready',
   });
 
+  const sawEditingOnActiveAppRef = React.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React.useState(false);
+  React.useEffect(() => {
+    sawEditingOnActiveAppRef.current = false;
+    setShowPostEditPreparing(false);
+  }, [activeAppId]);
+
+  React.useEffect(() => {
+    if (!app?.id) return;
+    if (app.status === 'editing') {
+      sawEditingOnActiveAppRef.current = true;
+      setShowPostEditPreparing(false);
+      return;
+    }
+    if (app.status === 'ready' && sawEditingOnActiveAppRef.current) {
+      setShowPostEditPreparing(true);
+      sawEditingOnActiveAppRef.current = false;
+    }
+  }, [app?.id, app?.status]);
+
+  React.useEffect(() => {
+    if (!showPostEditPreparing) return;
+    const stillProcessingBaseBundle = bundle.loading && bundle.loadingMode === 'base' && !bundle.isTesting;
+    if (!stillProcessingBaseBundle) {
+      setShowPostEditPreparing(false);
+    }
+  }, [showPostEditPreparing, bundle.loading, bundle.loadingMode, bundle.isTesting]);
+
   const threadId = app?.threadId ?? '';
   const thread = useThreadMessages(threadId);
 
@@ -173,7 +201,12 @@ function ComergeStudioInner({
   return (
       <View style={[{ flex: 1 }, style]}>
       <View ref={captureTargetRef} style={{ flex: 1 }} collapsable={false}>
-        <RuntimeRenderer appKey={appKey} bundlePath={bundle.bundlePath} renderToken={bundle.renderToken} />
+        <RuntimeRenderer
+          appKey={appKey}
+          bundlePath={bundle.bundlePath}
+          forcePreparing={showPostEditPreparing}
+          renderToken={bundle.renderToken}
+        />
 
         <StudioOverlay
           captureTargetRef={captureTargetRef}

package/src/studio/hooks/useAttachmentUpload.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Platform } from 'react-native';
+import * as FileSystem from 'expo-file-system/legacy';
 
 import { attachmentRepository } from '../../data/attachment/repository';
 import type { AttachmentMeta } from '../../data/attachment/types';
@@ -15,6 +17,47 @@ export type UseAttachmentUploadResult = {
   error: Error | null;
 };
 
+async function dataUrlToBlobAndroid(dataUrl: string): Promise<Blob> {
+  const normalized = dataUrl.startsWith('data:') ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(',');
+  if (comma === -1) {
+    throw new Error('Invalid data URL (missing comma separator)');
+  }
+
+  const header = normalized.slice(0, comma);
+  const base64 = normalized.slice(comma + 1);
+
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  const mimeType = mimeMatch?.[1] ?? 'application/octet-stream';
+
+  const cacheDir = FileSystem.cacheDirectory;
+  if (!cacheDir) {
+    throw new Error('expo-file-system cacheDirectory is unavailable');
+  }
+
+  const fileUri = `${cacheDir}attachment-${Date.now()}-${Math.random().toString(16).slice(2)}.bin`;
+
+  await FileSystem.writeAsStringAsync(fileUri, base64, {
+    encoding: FileSystem.EncodingType.Base64,
+  });
+
+  try {
+    const resp = await fetch(fileUri);
+    const blob = await resp.blob();
+    return blob.type ? blob : new Blob([blob], { type: mimeType });
+  } finally {
+    void FileSystem.deleteAsync(fileUri, { idempotent: true }).catch(() => {});
+  }
+}
+
+function getMimeTypeFromDataUrl(dataUrl: string): string {
+  const normalized = dataUrl.startsWith('data:') ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(',');
+  const header = comma === -1 ? normalized : normalized.slice(0, comma);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  return mimeMatch?.[1] ?? 'image/png';
+}
+
 export function useAttachmentUpload(): UseAttachmentUploadResult {
   const [uploading, setUploading] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
@@ -29,16 +72,19 @@ export function useAttachmentUpload(): UseAttachmentUploadResult {
       const blobs = await Promise.all(
         dataUrls.map(async (dataUrl, idx) => {
           const normalized = dataUrl.startsWith('data:') ? dataUrl : `data:image/png;base64,${dataUrl}`;
-          const resp = await fetch(normalized);
-          const blob = await resp.blob();
-          return { blob, idx };
+          const blob =
+            Platform.OS === 'android'
+              ? await dataUrlToBlobAndroid(normalized)
+              : await (await fetch(normalized)).blob();
+          const mimeType = getMimeTypeFromDataUrl(normalized);
+          return { blob, idx, mimeType };
         })
       );
 
-      const files = blobs.map(({ blob }, idx) => ({
+      const files = blobs.map(({ blob, mimeType }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
-        mimeType: blob.type || 'image/png',
+        mimeType,
       }));
 
       const presign = await attachmentRepository.presign({ threadId, appId, files });

package/src/studio/hooks/useBundleManager.ts

@@ -4,6 +4,47 @@ import * as FileSystem from 'expo-file-system/legacy';
 import type { Platform as BundlePlatform, Bundle } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
 
+function sleep(ms: number): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+function isRetryableNetworkError(e: unknown): boolean {
+  const err = e as any;
+  const code = typeof err?.code === 'string' ? err.code : '';
+  const message = typeof err?.message === 'string' ? err.message : '';
+
+  if (code === 'ERR_NETWORK' || code === 'ECONNABORTED') return true;
+  if (message.toLowerCase().includes('network error')) return true;
+  if (message.toLowerCase().includes('timeout')) return true;
+
+  const status = typeof err?.response?.status === 'number' ? err.response.status : undefined;
+  if (status && (status === 429 || status >= 500)) return true;
+
+  return false;
+}
+
+async function withRetry<T>(
+  fn: () => Promise<T>,
+  opts: { attempts: number; baseDelayMs: number; maxDelayMs: number }
+): Promise<T> {
+  let lastErr: unknown = null;
+  for (let attempt = 1; attempt <= opts.attempts; attempt += 1) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastErr = e;
+      const retryable = isRetryableNetworkError(e);
+      if (!retryable || attempt >= opts.attempts) {
+        throw e;
+      }
+      const exp = Math.min(opts.maxDelayMs, opts.baseDelayMs * Math.pow(2, attempt - 1));
+      const jitter = Math.floor(Math.random() * 250);
+      await sleep(exp + jitter);
+    }
+  }
+  throw lastErr;
+}
+
 type BundleSource = {
   appId: string;
   commitId?: string | null;
@@ -29,6 +70,7 @@ export type BundleLoadState = {
    */
   renderToken: number;
   loading: boolean;
+  loadingMode: 'base' | 'test' | null;
   statusLabel: string | null;
   error: string | null;
   /**
@@ -119,8 +161,16 @@ async function getExistingNonEmptyFileUri(fileUri: string): Promise<string | nul
 async function downloadIfMissing(url: string, fileUri: string): Promise<string> {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
-  const res = await FileSystem.downloadAsync(url, fileUri);
-  return res.uri;
+  return await withRetry(
+    async () => {
+      await deleteFileIfExists(fileUri);
+      const res = await FileSystem.downloadAsync(url, fileUri);
+      const ok = await getExistingNonEmptyFileUri(res.uri);
+      if (!ok) throw new Error('Downloaded bundle is empty.');
+      return res.uri;
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+  );
 }
 
 async function deleteFileIfExists(fileUri: string) {
@@ -136,11 +186,15 @@ async function deleteFileIfExists(fileUri: string) {
 async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: string): Promise<string> {
   const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
   try {
-    await FileSystem.downloadAsync(url, tmpUri);
-    const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
-    if (!tmpOk) {
-      throw new Error('Downloaded bundle is empty.');
-    }
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error('Downloaded bundle is empty.');
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+    );
 
     await deleteFileIfExists(targetUri);
     await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
@@ -156,12 +210,18 @@ async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: st
 async function pollBundle(appId: string, bundleId: string, opts: { timeoutMs: number; intervalMs: number }): Promise<Bundle> {
   const start = Date.now();
   while (true) {
-    const bundle = await bundlesRepository.getById(appId, bundleId);
-    if (bundle.status === 'succeeded' || bundle.status === 'failed') return bundle;
+    try {
+      const bundle = await bundlesRepository.getById(appId, bundleId);
+      if (bundle.status === 'succeeded' || bundle.status === 'failed') return bundle;
+    } catch (e) {
+      if (!isRetryableNetworkError(e)) {
+        throw e;
+      }
+    }
     if (Date.now() - start > opts.timeoutMs) {
       throw new Error('Bundle build timed out.');
     }
-    await new Promise((r) => setTimeout(r, opts.intervalMs));
+    await sleep(opts.intervalMs);
   }
 }
 
@@ -174,11 +234,16 @@ async function resolveBundlePath(
   const dir = bundlesCacheDir();
   await ensureDir(dir);
 
-  const initiate = await bundlesRepository.initiate(appId, {
-    platform,
-    commitId: commitId ?? undefined,
-    idempotencyKey: `${appId}:${commitId ?? 'head'}:${platform}`,
-  });
+  const initiate = await withRetry(
+    async () => {
+      return await bundlesRepository.initiate(appId, {
+        platform,
+        commitId: commitId ?? undefined,
+        idempotencyKey: `${appId}:${commitId ?? 'head'}:${platform}`,
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+  );
 
   const finalBundle =
     initiate.status === 'succeeded' || initiate.status === 'failed'
@@ -189,7 +254,12 @@ async function resolveBundlePath(
     throw new Error('Bundle build failed.');
   }
 
-  const signed = await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+  );
   const bundlePath =
     mode === 'base'
       ? await safeReplaceFileFromUrl(
@@ -209,6 +279,7 @@ export function useBundleManager({
   const [bundlePath, setBundlePath] = React.useState<string | null>(null);
   const [renderToken, setRenderToken] = React.useState(0);
   const [loading, setLoading] = React.useState(false);
+  const [loadingMode, setLoadingMode] = React.useState<'base' | 'test' | null>(null);
   const [statusLabel, setStatusLabel] = React.useState<string | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const [isTesting, setIsTesting] = React.useState(false);
@@ -229,6 +300,7 @@ export function useBundleManager({
       baseOpIdRef.current += 1;
       if (activeLoadModeRef.current === 'base') {
         setLoading(false);
+        setLoadingMode(null);
         setStatusLabel(null);
         activeLoadModeRef.current = null;
       }
@@ -303,6 +375,7 @@ export function useBundleManager({
     const opId = mode === 'base' ? ++baseOpIdRef.current : ++testOpIdRef.current;
     activeLoadModeRef.current = mode;
     setLoading(true);
+    setLoadingMode(mode);
     setError(null);
     setStatusLabel(mode === 'test' ? 'Loading test bundle…' : 'Loading latest build…');
 
@@ -357,6 +430,7 @@ export function useBundleManager({
       if (mode === 'base' && opId !== baseOpIdRef.current) return;
       if (mode === 'test' && opId !== testOpIdRef.current) return;
       setLoading(false);
+      setLoadingMode(null);
       if (activeLoadModeRef.current === mode) activeLoadModeRef.current = null;
     }
   }, [activateCachedBase, platform]);
@@ -383,7 +457,7 @@ export function useBundleManager({
     void loadBase();
   }, [base.appId, base.commitId, platform, canRequestLatest, loadBase]);
 
-  return { bundlePath, renderToken, loading, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
+  return { bundlePath, renderToken, loading, loadingMode, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
 }