@comergehq/studio 0.1.12 → 0.1.15

package/src/studio/hooks/useBundleManager.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import * as FileSystem from 'expo-file-system/legacy';
+import { Asset } from 'expo-asset';
+import { unzip } from 'react-native-zip-archive';
 
-import type { Platform as BundlePlatform, Bundle } from '../../data/apps/bundles/types';
+import type { Platform as BundlePlatform, Bundle, BundleAsset } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
 
 function sleep(ms: number): Promise<void> {
@@ -60,6 +62,7 @@ export type UseBundleManagerParams = {
    * Test bundles (merge request previews) are NOT gated by this.
    */
   canRequestLatest?: boolean;
+  embeddedBaseBundles?: EmbeddedBaseBundles;
 };
 
 export type BundleLoadState = {
@@ -85,6 +88,23 @@ export type UseBundleManagerResult = BundleLoadState & {
   restoreBase: () => Promise<void>;
 };
 
+export type EmbeddedBaseBundle = {
+  module: number;
+  meta?: BaseBundleMeta | null;
+  assetsModule?: number;
+  assetsMeta?: EmbeddedAssetsMeta | null;
+};
+
+export type EmbeddedBaseBundles = {
+  ios?: EmbeddedBaseBundle;
+  android?: EmbeddedBaseBundle;
+};
+
+type EmbeddedAssetsMeta = {
+  checksumSha256: string | null;
+  size: number | null;
+};
+
 function safeName(s: string) {
   return s.replace(/[^a-zA-Z0-9._-]/g, '_');
 }
@@ -102,6 +122,11 @@ async function ensureDir(path: string) {
   await FileSystem.makeDirectoryAsync(path, { intermediates: true });
 }
 
+async function ensureBundleDir(key: string) {
+  await ensureDir(bundlesCacheDir());
+  await ensureDir(bundleDir(key));
+}
+
 function baseBundleKey(appId: string, platform: BundlePlatform): string {
   return `base:${appId}:${platform}`;
 }
@@ -110,16 +135,37 @@ function testBundleKey(appId: string, commitId: string | null | undefined, platf
   return `test:${appId}:${commitId ?? 'head'}:${platform}:${bundleId}`;
 }
 
-function toBundleFileUri(key: string): string {
+function legacyBundleFileUri(key: string): string {
   const dir = bundlesCacheDir();
   return `${dir}${safeName(key)}.jsbundle`;
 }
 
-function toBundleMetaFileUri(key: string): string {
+function legacyBundleMetaFileUri(key: string): string {
   const dir = bundlesCacheDir();
   return `${dir}${safeName(key)}.meta.json`;
 }
 
+function bundleDir(key: string): string {
+  const dir = bundlesCacheDir();
+  return `${dir}${safeName(key)}/`;
+}
+
+function toBundleFileUri(key: string, platform: BundlePlatform): string {
+  return `${bundleDir(key)}index.${platform}.jsbundle`;
+}
+
+function toBundleMetaFileUri(key: string): string {
+  return `${bundleDir(key)}bundle.meta.json`;
+}
+
+function toAssetsMetaFileUri(key: string): string {
+  return `${bundleDir(key)}assets.meta.json`;
+}
+
+function toAssetsDir(key: string): string {
+  return `${bundleDir(key)}assets/`;
+}
+
 type BaseBundleMeta = {
   fingerprint: string;
   bundleId: string;
@@ -144,7 +190,7 @@ async function writeJsonFile(fileUri: string, value: unknown): Promise<void> {
   try {
     await (FileSystem as any).writeAsStringAsync(fileUri, JSON.stringify(value));
   } catch {
-    
+
   }
 }
 
@@ -158,6 +204,15 @@ async function getExistingNonEmptyFileUri(fileUri: string): Promise<string | nul
   }
 }
 
+async function getExistingBundleFileUri(key: string, platform: BundlePlatform): Promise<string | null> {
+  const nextPath = toBundleFileUri(key, platform);
+  const next = await getExistingNonEmptyFileUri(nextPath);
+  if (next) return next;
+  const legacyPath = legacyBundleFileUri(key);
+  const legacy = await getExistingNonEmptyFileUri(legacyPath);
+  return legacy;
+}
+
 async function downloadIfMissing(url: string, fileUri: string): Promise<string> {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
@@ -177,14 +232,103 @@ async function deleteFileIfExists(fileUri: string) {
   try {
     const info = await FileSystem.getInfoAsync(fileUri);
     if (!info.exists) return;
-    await FileSystem.deleteAsync(fileUri).catch(() => {});
+    await FileSystem.deleteAsync(fileUri).catch(() => { });
+  } catch {
+
+  }
+}
+
+async function hydrateBaseFromEmbeddedAsset(
+  appId: string,
+  platform: BundlePlatform,
+  embedded: EmbeddedBaseBundle | undefined
+): Promise<{ bundlePath: string; meta?: BaseBundleMeta | null } | null> {
+  if (!embedded?.module) return null;
+  const key = baseBundleKey(appId, platform);
+  const existing = await getExistingBundleFileUri(key, platform);
+  if (existing) {
+    return { bundlePath: existing, meta: embedded.meta ?? null };
+  }
+  await ensureBundleDir(key);
+  const targetUri = toBundleFileUri(key, platform);
+
+  const asset = Asset.fromModule(embedded.module);
+  await asset.downloadAsync();
+  const sourceUri = asset.localUri ?? asset.uri;
+  if (!sourceUri) return null;
+  const info = await FileSystem.getInfoAsync(sourceUri);
+  if (!info.exists) return null;
+
+  await deleteFileIfExists(targetUri);
+  await FileSystem.copyAsync({ from: sourceUri, to: targetUri });
+  const finalUri = await getExistingNonEmptyFileUri(targetUri);
+  if (!finalUri) return null;
+  return { bundlePath: finalUri, meta: embedded.meta ?? null };
+}
+
+async function hydrateAssetsFromEmbeddedAsset(
+  appId: string,
+  platform: BundlePlatform,
+  key: string,
+  embedded: EmbeddedBaseBundle | undefined
+): Promise<boolean> {
+  const moduleId = embedded?.assetsModule;
+  if (!moduleId) return false;
+
+  const assetsMeta = embedded?.assetsMeta ?? null;
+  const assetsDir = toAssetsDir(key);
+  const metaUri = toAssetsMetaFileUri(key);
+
+  const existingMeta = await readJsonFile<AssetsMeta>(metaUri);
+  const assetsDirInfo = await FileSystem.getInfoAsync(assetsDir);
+  const assetsDirExists = assetsDirInfo.exists && assetsDirInfo.isDirectory;
+  const checksumMatches =
+    Boolean(existingMeta?.checksumSha256) &&
+    Boolean(assetsMeta?.checksumSha256) &&
+    existingMeta?.checksumSha256 === assetsMeta?.checksumSha256;
+  const embeddedMetaMatches = existingMeta?.storageKey?.startsWith('embedded:');
+  if (assetsDirExists && checksumMatches && embeddedMetaMatches) {
+    return true;
+  }
+
+  await ensureBundleDir(key);
+  await ensureDir(assetsDir);
+
+  const asset = Asset.fromModule(moduleId);
+  await asset.downloadAsync();
+  const sourceUri = asset.localUri ?? asset.uri;
+  if (!sourceUri) return false;
+  const info = await FileSystem.getInfoAsync(sourceUri);
+  if (!info.exists) return false;
+
+  const zipUri = `${bundleDir(key)}assets.zip`;
+  await deleteFileIfExists(zipUri);
+  await FileSystem.copyAsync({ from: sourceUri, to: zipUri });
+
+  try {
+    await FileSystem.deleteAsync(assetsDir, { idempotent: true }).catch(() => { });
   } catch {
-    
   }
+  await ensureDir(assetsDir);
+  await unzipArchive(zipUri, assetsDir);
+
+  await writeJsonFile(metaUri, {
+    checksumSha256: assetsMeta?.checksumSha256 ?? null,
+    storageKey: `embedded:${assetsMeta?.checksumSha256 ?? 'unknown'}`,
+    updatedAt: new Date().toISOString(),
+  } satisfies AssetsMeta);
+  return true;
 }
 
-async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: string): Promise<string> {
-  const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
+async function safeReplaceFileFromUrl(
+  url: string,
+  targetUri: string,
+  tmpKey: string,
+  platform: BundlePlatform
+): Promise<string> {
+  const tmpKeySafe = `tmp:${tmpKey}:${Date.now()}`;
+  const tmpUri = toBundleFileUri(tmpKeySafe, platform);
+  await ensureDir(bundleDir(tmpKeySafe));
   try {
     await withRetry(
       async () => {
@@ -207,6 +351,107 @@ async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: st
   }
 }
 
+async function safeReplaceFileFromUrlToPath(url: string, targetUri: string, tmpKey: string): Promise<string> {
+  const tmpDir = `${bundlesCacheDir()}tmp/`;
+  await ensureDir(tmpDir);
+  const tmpUri = `${tmpDir}${safeName(tmpKey)}.tmp`;
+  try {
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error('Downloaded file is empty.');
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+    );
+    await deleteFileIfExists(targetUri);
+    await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
+    const finalOk = await getExistingNonEmptyFileUri(targetUri);
+    if (!finalOk) throw new Error('File replacement failed.');
+    return targetUri;
+  } finally {
+    await deleteFileIfExists(tmpUri);
+  }
+}
+
+function getMetroAssets(bundle: Bundle): BundleAsset | null {
+  const assets = bundle.assets ?? [];
+  return assets.find((asset) => asset.kind === 'metro-assets') ?? null;
+}
+
+type AssetsMeta = {
+  checksumSha256: string | null;
+  storageKey: string;
+  updatedAt: string;
+};
+
+async function ensureAssetsForBundle(
+  appId: string,
+  bundle: Bundle,
+  key: string,
+  platform: BundlePlatform
+): Promise<void> {
+  const asset = getMetroAssets(bundle);
+  if (!asset?.storageKey) return;
+
+  await ensureBundleDir(key);
+  const assetsDir = toAssetsDir(key);
+  await ensureDir(assetsDir);
+
+  const metaUri = toAssetsMetaFileUri(key);
+  const existingMeta = await readJsonFile<AssetsMeta>(metaUri);
+  const assetsDirInfo = await FileSystem.getInfoAsync(assetsDir);
+  const assetsDirExists = assetsDirInfo.exists && assetsDirInfo.isDirectory;
+  if (
+    existingMeta?.checksumSha256 &&
+    asset.checksumSha256 &&
+    existingMeta.checksumSha256 === asset.checksumSha256 &&
+    (existingMeta.storageKey === asset.storageKey || existingMeta.storageKey?.startsWith('embedded:')) &&
+    assetsDirExists
+  ) {
+    return;
+  }
+
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedAssetsDownloadUrl(appId, bundle.id, {
+        redirect: false,
+        kind: asset.kind,
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+  );
+
+  const zipUri = `${bundleDir(key)}assets.zip`;
+  await safeReplaceFileFromUrlToPath(signed.url, zipUri, `${appId}:${bundle.id}:${platform}:${asset.kind}`);
+
+  try {
+    await FileSystem.deleteAsync(assetsDir, { idempotent: true }).catch(() => { });
+  } catch {
+
+  }
+  await ensureDir(assetsDir);
+  await unzipArchive(zipUri, assetsDir);
+  await writeJsonFile(metaUri, {
+    checksumSha256: asset.checksumSha256 ?? null,
+    storageKey: asset.storageKey,
+    updatedAt: new Date().toISOString(),
+  } satisfies AssetsMeta);
+}
+
+async function unzipArchive(sourceUri: string, destDir: string) {
+  try {
+    await unzip(sourceUri, destDir);
+  } catch (e) {
+    throw new Error(
+      `Failed to extract assets archive. Ensure 'react-native-zip-archive' is installed in the host app. ${String(
+        (e as Error)?.message ?? e
+      )}`
+    );
+  }
+}
+
 async function pollBundle(appId: string, bundleId: string, opts: { timeoutMs: number; intervalMs: number }): Promise<Bundle> {
   const start = Date.now();
   while (true) {
@@ -254,27 +499,48 @@ async function resolveBundlePath(
     throw new Error('Bundle build failed.');
   }
 
+  let bundleWithAssets = finalBundle;
+  if (finalBundle.status === 'succeeded' && (!finalBundle.assets || finalBundle.assets.length === 0)) {
+    try {
+      bundleWithAssets = await bundlesRepository.getById(appId, finalBundle.id);
+    } catch {
+      bundleWithAssets = finalBundle;
+    }
+  }
+
   const signed = await withRetry(
     async () => {
       return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
     },
     { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
   );
+  const key =
+    mode === 'base'
+      ? baseBundleKey(appId, platform)
+      : testBundleKey(appId, commitId, platform, finalBundle.id);
+  await ensureBundleDir(key);
   const bundlePath =
     mode === 'base'
       ? await safeReplaceFileFromUrl(
-          signed.url,
-          toBundleFileUri(baseBundleKey(appId, platform)),
-          `${appId}:${commitId ?? 'head'}:${platform}:${finalBundle.id}`
-        )
-      : await downloadIfMissing(signed.url, toBundleFileUri(testBundleKey(appId, commitId, platform, finalBundle.id)));
-  return { bundlePath, label: 'Ready', bundle: finalBundle };
+        signed.url,
+        toBundleFileUri(key, platform),
+        `${appId}:${commitId ?? 'head'}:${platform}:${finalBundle.id}`,
+        platform
+      )
+      : await downloadIfMissing(signed.url, toBundleFileUri(key, platform));
+  try {
+    await ensureAssetsForBundle(appId, bundleWithAssets, key, platform);
+  } catch {
+
+  }
+  return { bundlePath, label: 'Ready', bundle: bundleWithAssets };
 }
 
 export function useBundleManager({
   base,
   platform,
   canRequestLatest = true,
+  embeddedBaseBundles,
 }: UseBundleManagerParams): UseBundleManagerResult {
   const [bundlePath, setBundlePath] = React.useState<string | null>(null);
   const [renderToken, setRenderToken] = React.useState(0);
@@ -287,6 +553,9 @@ export function useBundleManager({
   const baseRef = React.useRef(base);
   baseRef.current = base;
 
+  const embeddedBaseBundlesRef = React.useRef<EmbeddedBaseBundles | undefined>(embeddedBaseBundles);
+  embeddedBaseBundlesRef.current = embeddedBaseBundles;
+
   // Monotonic operation ids to prevent stale async loads from overwriting newer ones.
   const baseOpIdRef = React.useRef(0);
   const testOpIdRef = React.useRef(0);
@@ -319,12 +588,38 @@ export function useBundleManager({
         const dir = bundlesCacheDir();
         await ensureDir(dir);
         const key = baseBundleKey(appId, platform);
-        const uri = toBundleFileUri(key);
-        const existing = await getExistingNonEmptyFileUri(uri);
+        let existing = await getExistingBundleFileUri(key, platform);
+        let embeddedMeta: BaseBundleMeta | null = null;
+        if (!existing) {
+          const embedded = embeddedBaseBundlesRef.current?.[platform];
+          const hydrated = await hydrateBaseFromEmbeddedAsset(appId, platform, embedded);
+          if (hydrated?.bundlePath) {
+            existing = hydrated.bundlePath;
+            embeddedMeta = hydrated.meta ?? null;
+            if (embeddedMeta) {
+              await ensureBundleDir(key);
+              await writeJsonFile(toBundleMetaFileUri(key), embeddedMeta);
+              await writeJsonFile(legacyBundleMetaFileUri(key), embeddedMeta);
+            }
+          }
+        }
         if (existing) {
           lastBaseBundlePathRef.current = existing;
           setBundlePath(existing);
-          const meta = await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key));
+          const meta =
+            embeddedMeta ??
+            (await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key))) ??
+            (await readJsonFile<BaseBundleMeta>(legacyBundleMetaFileUri(key)));
+          const embedded = embeddedBaseBundlesRef.current?.[platform];
+          const embeddedFingerprint = embedded?.meta?.fingerprint ?? null;
+          const actualFingerprint = meta?.fingerprint ?? embeddedMeta?.fingerprint ?? null;
+          if (embedded?.assetsModule && embeddedFingerprint && actualFingerprint === embeddedFingerprint) {
+            try {
+              await hydrateAssetsFromEmbeddedAsset(appId, platform, key, embedded);
+            } catch {
+
+            }
+          }
           if (meta?.fingerprint) {
             lastBaseFingerprintRef.current = meta.fingerprint;
           }
@@ -334,7 +629,7 @@ export function useBundleManager({
           }
         }
       } catch {
-       
+
       }
     },
     [platform]
@@ -408,7 +703,16 @@ export function useBundleManager({
         lastBaseFingerprintRef.current = fingerprint;
         hasCompletedFirstNetworkBaseLoadRef.current = true;
         initialHydratedBaseFromDiskRef.current = false;
-        void writeJsonFile(toBundleMetaFileUri(baseBundleKey(src.appId, platform)), {
+        const metaKey = baseBundleKey(src.appId, platform);
+        await ensureBundleDir(metaKey);
+        void writeJsonFile(toBundleMetaFileUri(metaKey), {
+          fingerprint,
+          bundleId: bundle.id,
+          checksumSha256: bundle.checksumSha256 ?? null,
+          size: bundle.size ?? null,
+          updatedAt: new Date().toISOString(),
+        } satisfies BaseBundleMeta);
+        void writeJsonFile(legacyBundleMetaFileUri(metaKey), {
           fingerprint,
           bundleId: bundle.id,
           checksumSha256: bundle.checksumSha256 ?? null,

package/src/studio/ui/RuntimeRenderer.tsx

@@ -13,6 +13,10 @@ export type RuntimeRendererProps = {
    * Used to avoid briefly rendering an outdated bundle during post-edit base refresh.
    */
   forcePreparing?: boolean;
+  /**
+   * When false, suppress "Preparing app…" on the very first load.
+   */
+  allowInitialPreparing?: boolean;
   /**
    * Used to force a runtime remount even when bundlePath stays constant
    * (e.g. base bundle replaced in-place).
@@ -21,8 +25,27 @@ export type RuntimeRendererProps = {
   style?: ViewStyle;
 };
 
-export function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }: RuntimeRendererProps) {
+export function RuntimeRenderer({
+  appKey,
+  bundlePath,
+  forcePreparing,
+  renderToken,
+  style,
+  allowInitialPreparing = true,
+}: RuntimeRendererProps) {
+  const [hasRenderedOnce, setHasRenderedOnce] = React.useState(false);
+
+  React.useEffect(() => {
+    if (bundlePath) {
+      setHasRenderedOnce(true);
+    }
+  }, [bundlePath]);
+
   if (!bundlePath || forcePreparing) {
+    if (!hasRenderedOnce && !forcePreparing && !allowInitialPreparing) {
+      return <View style={[{ flex: 1 }, style]} />;
+    }
+
     return (
       <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }, style]}>
         <Text variant="bodyMuted">Preparing app…</Text>

package/src/studio/ui/StudioOverlay.tsx

@@ -5,7 +5,7 @@ import type { App } from '../../data/apps/types';
 import type { MergeRequest } from '../../data/merge-requests/types';
 import { StudioBottomSheet } from '../../components/studio-sheet/StudioBottomSheet';
 import { StudioSheetPager } from '../../components/studio-sheet/StudioSheetPager';
-import { FloatingDraggableButton } from '../../components/floating-draggable-button/FloatingDraggableButton';
+import { Bubble } from '../../components/bubble/Bubble';
 import { EdgeGlowFrame } from '../../components/overlays/EdgeGlowFrame';
 import { DrawModeOverlay } from '../../components/draw/DrawModeOverlay';
 import { AppCommentsSheet } from '../../components/comments/AppCommentsSheet';
@@ -61,7 +61,7 @@ export type StudioOverlayProps = {
 
   // Navigation callbacks
   onNavigateHome?: () => void;
-  showFloatingButton: boolean;
+  showBubble: boolean;
   studioControlOptions?: StudioControlOptions;
 };
 
@@ -94,7 +94,7 @@ export function StudioOverlay({
   chatShowTypingIndicator,
   onSendChat,
   onNavigateHome,
-  showFloatingButton,
+  showBubble,
   studioControlOptions,
 }: StudioOverlayProps) {
   const theme = useTheme();
@@ -270,8 +270,8 @@ export function StudioOverlay({
         />
       </StudioBottomSheet>
 
-      {showFloatingButton && (
-        <FloatingDraggableButton
+      {showBubble && (
+        <Bubble
           visible={!sheetOpen && !drawing}
           ariaLabel={sheetOpen ? 'Hide studio' : 'Show studio'}
           badgeCount={incomingMergeRequests.length}
@@ -281,7 +281,7 @@ export function StudioOverlay({
           <View style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
             <MergeIcon width={24} height={24} color={theme.colors.floatingContent} />
           </View>
-        </FloatingDraggableButton>
+        </Bubble>
       )}
 
       <DrawModeOverlay

package/src/components/floating-draggable-button/index.ts

@@ -1,4 +0,0 @@
-export { FloatingDraggableButton } from './FloatingDraggableButton';
-export type { FloatingDraggableButtonProps, FloatingButtonOffset } from './types';
-
-