@comergehq/studio 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/studio/ComergeStudio.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { Platform as RNPlatform, View as View45 } from "react-native";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 
@@ -952,6 +952,39 @@ var BundlesRepositoryImpl = class extends BaseRepository {
 var bundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);
 
 // src/studio/hooks/useBundleManager.ts
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+function isRetryableNetworkError(e) {
+  var _a;
+  const err = e;
+  const code = typeof (err == null ? void 0 : err.code) === "string" ? err.code : "";
+  const message = typeof (err == null ? void 0 : 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 ((_a = err == null ? void 0 : err.response) == null ? void 0 : _a.status) === "number" ? err.response.status : void 0;
+  if (status && (status === 429 || status >= 500)) return true;
+  return false;
+}
+async function withRetry(fn, opts) {
+  let lastErr = 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;
+}
 function safeName(s) {
   return s.replace(/[^a-zA-Z0-9._-]/g, "_");
 }
@@ -1009,8 +1042,16 @@ async function getExistingNonEmptyFileUri(fileUri) {
 async function downloadIfMissing(url, fileUri) {
   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: 4e3 }
+  );
 }
 async function deleteFileIfExists(fileUri) {
   try {
@@ -1024,11 +1065,15 @@ async function deleteFileIfExists(fileUri) {
 async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
   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: 4e3 }
+    );
     await deleteFileIfExists(targetUri);
     await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
     const finalOk = await getExistingNonEmptyFileUri(targetUri);
@@ -1041,28 +1086,44 @@ async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
 async function pollBundle(appId, bundleId, opts) {
   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);
   }
 }
 async function resolveBundlePath(src, platform, mode) {
   const { appId, commitId } = src;
   const dir = bundlesCacheDir();
   await ensureDir(dir);
-  const initiate = await bundlesRepository.initiate(appId, {
-    platform,
-    commitId: commitId ?? void 0,
-    idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
-  });
+  const initiate = await withRetry(
+    async () => {
+      return await bundlesRepository.initiate(appId, {
+        platform,
+        commitId: commitId ?? void 0,
+        idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const finalBundle = initiate.status === "succeeded" || initiate.status === "failed" ? initiate : await pollBundle(appId, initiate.id, { timeoutMs: 3 * 60 * 1e3, intervalMs: 1200 });
   if (finalBundle.status === "failed") {
     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: 4e3 }
+  );
   const bundlePath = mode === "base" ? await safeReplaceFileFromUrl(
     signed.url,
     toBundleFileUri(baseBundleKey(appId, platform)),
@@ -1078,6 +1139,7 @@ function useBundleManager({
   const [bundlePath, setBundlePath] = React5.useState(null);
   const [renderToken, setRenderToken] = React5.useState(0);
   const [loading, setLoading] = React5.useState(false);
+  const [loadingMode, setLoadingMode] = React5.useState(null);
   const [statusLabel, setStatusLabel] = React5.useState(null);
   const [error, setError] = React5.useState(null);
   const [isTesting, setIsTesting] = React5.useState(false);
@@ -1093,6 +1155,7 @@ function useBundleManager({
       baseOpIdRef.current += 1;
       if (activeLoadModeRef.current === "base") {
         setLoading(false);
+        setLoadingMode(null);
         setStatusLabel(null);
         activeLoadModeRef.current = null;
       }
@@ -1157,6 +1220,7 @@ 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\u2026" : "Loading latest build\u2026");
     if (mode === "base") {
@@ -1199,6 +1263,7 @@ 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]);
@@ -1220,7 +1285,7 @@ function useBundleManager({
     if (!canRequestLatest) return;
     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 };
 }
 
 // src/studio/hooks/useMergeRequests.ts
@@ -1479,6 +1544,8 @@ function useMergeRequests(params) {
 
 // src/studio/hooks/useAttachmentUpload.ts
 import * as React7 from "react";
+import { Platform } from "react-native";
+import * as FileSystem2 from "expo-file-system/legacy";
 
 // src/data/attachment/remote.ts
 var AttachmentRemoteDataSourceImpl = class extends BaseRemote {
@@ -1518,6 +1585,40 @@ var attachmentRepository = new AttachmentRepositoryImpl(
 );
 
 // src/studio/hooks/useAttachmentUpload.ts
+async function dataUrlToBlobAndroid(dataUrl) {
+  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 == null ? void 0 : mimeMatch[1]) ?? "application/octet-stream";
+  const cacheDir = FileSystem2.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 FileSystem2.writeAsStringAsync(fileUri, base64, {
+    encoding: FileSystem2.EncodingType.Base64
+  });
+  try {
+    const resp = await fetch(fileUri);
+    const blob = await resp.blob();
+    return blob.type ? blob : new Blob([blob], { type: mimeType });
+  } finally {
+    void FileSystem2.deleteAsync(fileUri, { idempotent: true }).catch(() => {
+    });
+  }
+}
+function getMimeTypeFromDataUrl(dataUrl) {
+  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 == null ? void 0 : mimeMatch[1]) ?? "image/png";
+}
 function useAttachmentUpload() {
   const [uploading, setUploading] = React7.useState(false);
   const [error, setError] = React7.useState(null);
@@ -1530,15 +1631,15 @@ function useAttachmentUpload() {
       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 });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.upload(u, blobs[index].blob)));
@@ -1665,8 +1766,8 @@ function hasNoOutcomeAfterLastHuman(messages) {
 import { View as View2 } from "react-native";
 import { ComergeRuntimeRenderer } from "@comergehq/runtime";
 import { jsx as jsx3 } from "react/jsx-runtime";
-function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
-  if (!bundlePath) {
+function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }) {
+  if (!bundlePath || forcePreparing) {
     return /* @__PURE__ */ jsx3(View2, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ jsx3(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
   }
   return /* @__PURE__ */ jsx3(View2, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsx3(
@@ -1681,17 +1782,17 @@ function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
 }
 
 // src/studio/ui/StudioOverlay.tsx
-import * as React38 from "react";
-import { Keyboard as Keyboard5, Platform as Platform7, View as View44, useWindowDimensions as useWindowDimensions4 } from "react-native";
+import * as React39 from "react";
+import { Keyboard as Keyboard5, Platform as Platform9, View as View44, useWindowDimensions as useWindowDimensions4 } from "react-native";
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 import * as React9 from "react";
-import { AppState as AppState2, Keyboard, Platform as Platform2, View as View4 } from "react-native";
+import { AppState as AppState2, Keyboard, View as View4 } from "react-native";
 import BottomSheet from "@gorhom/bottom-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/components/studio-sheet/StudioSheetBackground.tsx
-import { Platform, View as View3 } from "react-native";
+import { Platform as Platform2, View as View3 } from "react-native";
 import { LiquidGlassView, isLiquidGlassSupported } from "@callstack/liquid-glass";
 import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
 function StudioSheetBackground({
@@ -1699,7 +1800,7 @@ function StudioSheetBackground({
   renderBackground
 }) {
   const theme = useTheme();
-  const radius = Platform.OS === "ios" ? 39 : 16;
+  const radius = Platform2.OS === "ios" ? 39 : 16;
   const fallbackBgColor = theme.scheme === "dark" ? "rgba(11, 8, 15, 0.85)" : "rgba(255, 255, 255, 0.85)";
   const secondaryBgBaseColor = theme.scheme === "dark" ? "rgb(24, 24, 27)" : "rgb(173, 173, 173)";
   const containerStyle = {
@@ -1745,7 +1846,7 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ["80%", "100%"],
+  snapPoints = ["100%"],
   sheetRef,
   background,
   children,
@@ -1777,18 +1878,6 @@ function StudioBottomSheet({
     });
     return () => sub.remove();
   }, [open, resolvedSheetRef]);
-  React9.useEffect(() => {
-    if (Platform2.OS !== "ios") return;
-    const sub = Keyboard.addListener("keyboardDidHide", () => {
-      const sheet = resolvedSheetRef.current;
-      if (!sheet || !open) return;
-      const targetIndex = snapPoints.length - 1;
-      if (currentIndexRef.current === targetIndex) {
-        setTimeout(() => sheet.snapToIndex(targetIndex), 10);
-      }
-    });
-    return () => sub.remove();
-  }, [open, resolvedSheetRef, snapPoints.length]);
   React9.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
@@ -1811,9 +1900,9 @@ function StudioBottomSheet({
       ref: resolvedSheetRef,
       index: open ? snapPoints.length - 1 : -1,
       snapPoints,
+      enableDynamicSizing: false,
       enablePanDownToClose: true,
-      keyboardBehavior: "interactive",
-      keyboardBlurBehavior: "restore",
+      enableContentPanningGesture: false,
       android_keyboardInputMode: "adjustResize",
       backgroundComponent: (props) => /* @__PURE__ */ jsx5(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
       topInset: insets.top,
@@ -2791,7 +2880,7 @@ var styles3 = StyleSheet3.create({
 
 // src/components/comments/AppCommentsSheet.tsx
 import * as React21 from "react";
-import { ActivityIndicator as ActivityIndicator3, Keyboard as Keyboard3, Platform as Platform4, Pressable as Pressable5, View as View14 } from "react-native";
+import { ActivityIndicator as ActivityIndicator3, Keyboard as Keyboard3, Platform as Platform5, Pressable as Pressable5, View as View14 } from "react-native";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
@@ -3396,11 +3485,11 @@ function useAppDetails(appId) {
 
 // src/components/comments/useIosKeyboardSnapFix.ts
 import * as React20 from "react";
-import { Keyboard as Keyboard2, Platform as Platform3 } from "react-native";
+import { Keyboard as Keyboard2, Platform as Platform4 } from "react-native";
 function useIosKeyboardSnapFix(sheetRef, options) {
   const [keyboardVisible, setKeyboardVisible] = React20.useState(false);
   React20.useEffect(() => {
-    if (Platform3.OS !== "ios") return;
+    if (Platform4.OS !== "ios") return;
     const show = Keyboard2.addListener("keyboardWillShow", () => setKeyboardVisible(true));
     const hide = Keyboard2.addListener("keyboardWillHide", () => {
       var _a;
@@ -3478,8 +3567,8 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: Platform4.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: Platform4.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: Platform5.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: Platform5.OS === "ios" ? 39 : 16
       },
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       keyboardBehavior: "interactive",
@@ -3586,7 +3675,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: Platform4.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: Platform5.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
               borderTopWidth: 1,
               borderTopColor: withAlpha(theme.colors.border, 0.1),
               backgroundColor: withAlpha(theme.colors.background, 0.8)
@@ -4485,7 +4574,7 @@ import { Animated as Animated7, Pressable as Pressable9, View as View28 } from "
 import { Ban, Check as Check3, CheckCheck, ChevronDown as ChevronDown2 } from "lucide-react-native";
 
 // src/components/primitives/MarkdownText.tsx
-import { Platform as Platform5, View as View27 } from "react-native";
+import { Platform as Platform6, View as View27 } from "react-native";
 import Markdown from "react-native-markdown-display";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
@@ -4511,7 +4600,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
           paddingHorizontal: variant === "mergeRequest" ? 6 : 4,
           paddingVertical: variant === "mergeRequest" ? 2 : 0,
           borderRadius: variant === "mergeRequest" ? 6 : 4,
-          fontFamily: Platform5.OS === "ios" ? "Menlo" : "monospace",
+          fontFamily: Platform6.OS === "ios" ? "Menlo" : "monospace",
           fontSize: 13
         },
         code_block: {
@@ -5524,9 +5613,8 @@ import { ActivityIndicator as ActivityIndicator8, View as View41 } from "react-n
 
 // src/components/chat/ChatPage.tsx
 import * as React34 from "react";
-import { Keyboard as Keyboard4, Platform as Platform6, View as View37 } from "react-native";
+import { Keyboard as Keyboard4, Platform as Platform8, View as View37 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
-import Animated11, { useAnimatedKeyboard, useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
 
 // src/components/chat/ChatMessageList.tsx
 import * as React33 from "react";
@@ -5634,19 +5722,19 @@ var ChatMessageList = React33.forwardRef(
     const nearBottomRef = React33.useRef(true);
     const initialScrollDoneRef = React33.useRef(false);
     const lastMessageIdRef = React33.useRef(null);
+    const data = React33.useMemo(() => {
+      return [...messages].reverse();
+    }, [messages]);
     const scrollToBottom = React33.useCallback((options) => {
       var _a;
       const animated = (options == null ? void 0 : options.animated) ?? true;
-      (_a = listRef.current) == null ? void 0 : _a.scrollToEnd({ animated });
+      (_a = listRef.current) == null ? void 0 : _a.scrollToOffset({ offset: 0, animated });
     }, []);
     React33.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
     const handleScroll = React33.useCallback(
       (e) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        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) {
           nearBottomRef.current = isNear;
@@ -5655,15 +5743,6 @@ var ChatMessageList = React33.forwardRef(
       },
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
-    React33.useEffect(() => {
-      var _a;
-      if (initialScrollDoneRef.current) return;
-      if (messages.length === 0) return;
-      initialScrollDoneRef.current = true;
-      lastMessageIdRef.current = ((_a = messages[messages.length - 1]) == null ? void 0 : _a.id) ?? null;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [messages, scrollToBottom]);
     React33.useEffect(() => {
       if (!initialScrollDoneRef.current) return;
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : null;
@@ -5681,31 +5760,35 @@ var ChatMessageList = React33.forwardRef(
       }
       return void 0;
     }, [showTypingIndicator, scrollToBottom]);
-    React33.useEffect(() => {
-      if (!initialScrollDoneRef.current) return;
-      if (!nearBottomRef.current) return;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [bottomInset, scrollToBottom]);
     return /* @__PURE__ */ jsx46(
       BottomSheetFlatList,
       {
         ref: listRef,
-        data: messages,
+        inverted: true,
+        data,
         keyExtractor: (m) => 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 == null ? void 0 : 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 }) => /* @__PURE__ */ jsx46(View36, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ jsx46(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
-        ListFooterComponent: /* @__PURE__ */ jsxs28(View36, { children: [
+        ItemSeparatorComponent: () => /* @__PURE__ */ jsx46(View36, { style: { height: theme.spacing.sm } }),
+        renderItem: ({ item }) => /* @__PURE__ */ jsx46(ChatMessageBubble, { message: item, renderContent: renderMessageContent }),
+        ListHeaderComponent: /* @__PURE__ */ jsxs28(View36, { children: [
           showTypingIndicator ? /* @__PURE__ */ jsx46(View36, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx46(TypingIndicator, {}) }) : null,
           bottomInset > 0 ? /* @__PURE__ */ jsx46(View36, { style: { height: bottomInset } }) : null
         ] })
@@ -5726,6 +5809,7 @@ function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef
 }) {
@@ -5733,9 +5817,8 @@ function ChatPage({
   const insets = useSafeAreaInsets4();
   const [composerHeight, setComposerHeight] = React34.useState(0);
   const [keyboardVisible, setKeyboardVisible] = React34.useState(false);
-  const animatedKeyboard = useAnimatedKeyboard();
   React34.useEffect(() => {
-    if (Platform6.OS !== "ios") return;
+    if (Platform8.OS !== "ios") return;
     const show = Keyboard4.addListener("keyboardWillShow", () => setKeyboardVisible(true));
     const hide = Keyboard4.addListener("keyboardWillHide", () => setKeyboardVisible(false));
     return () => {
@@ -5743,11 +5826,7 @@ function ChatPage({
       hide.remove();
     };
   }, []);
-  const footerBottomPadding = Platform6.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
-  const footerAnimatedStyle = useAnimatedStyle2(() => {
-    if (Platform6.OS !== "ios") return { paddingBottom: insets.bottom + 10 };
-    return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
-  });
+  const footerBottomPadding = Platform8.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
   const resolvedOverlay = React34.useMemo(() => {
@@ -5763,32 +5842,38 @@ function ChatPage({
     header ? /* @__PURE__ */ jsx47(View37, { children: header }) : null,
     topBanner ? /* @__PURE__ */ jsx47(View37, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
     /* @__PURE__ */ jsxs29(View37, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx47(
-        ChatMessageList,
+      /* @__PURE__ */ jsxs29(
+        View37,
         {
-          ref: listRef,
-          messages,
-          showTypingIndicator,
-          renderMessageContent,
-          onNearBottomChange,
-          bottomInset
+          style: { flex: 1 },
+          children: [
+            /* @__PURE__ */ jsx47(
+              ChatMessageList,
+              {
+                ref: listRef,
+                messages,
+                showTypingIndicator,
+                renderMessageContent,
+                onNearBottomChange,
+                bottomInset
+              }
+            ),
+            resolvedOverlay
+          ]
         }
       ),
-      resolvedOverlay,
       /* @__PURE__ */ jsx47(
-        Animated11.View,
+        View37,
         {
-          style: [
-            {
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: 0,
-              paddingHorizontal: theme.spacing.lg,
-              paddingTop: theme.spacing.sm
-            },
-            footerAnimatedStyle
-          ],
+          style: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: footerBottomPadding
+          },
           children: /* @__PURE__ */ jsx47(
             ChatComposer,
             {
@@ -5806,7 +5891,7 @@ function ChatPage({
 // src/components/chat/ScrollToBottomButton.tsx
 import * as React35 from "react";
 import { Pressable as Pressable12, View as View38 } from "react-native";
-import Animated12, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle3, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
+import Animated11, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle2, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
 import { jsx as jsx48 } from "react/jsx-runtime";
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
@@ -5815,14 +5900,14 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
   React35.useEffect(() => {
     progress.value = withTiming2(visible ? 1 : 0, { duration: 200, easing: Easing2.out(Easing2.ease) });
   }, [progress, visible]);
-  const animStyle = useAnimatedStyle3(() => ({
+  const animStyle = useAnimatedStyle2(() => ({
     opacity: progress.value,
     transform: [{ translateY: (1 - progress.value) * 20 }]
   }));
   const bg = theme.scheme === "dark" ? "rgba(39,39,42,0.9)" : "rgba(244,244,245,0.95)";
   const border = theme.scheme === "dark" ? withAlpha("#FFFFFF", 0.12) : withAlpha("#000000", 0.08);
   return /* @__PURE__ */ jsx48(
-    Animated12.View,
+    Animated11.View,
     {
       pointerEvents: visible ? "auto" : "none",
       style: [
@@ -6027,6 +6112,7 @@ function ChatPanel({
       messages,
       showTypingIndicator,
       topBanner,
+      composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
       overlay: /* @__PURE__ */ jsx51(
@@ -6263,6 +6349,92 @@ function ConfirmMergeFlow({
   );
 }
 
+// src/studio/hooks/useOptimisticChatMessages.ts
+import * as React38 from "react";
+function makeOptimisticId() {
+  return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
+}
+function toEpochMs(createdAt) {
+  if (createdAt == null) return 0;
+  if (typeof createdAt === "number") return createdAt;
+  if (createdAt instanceof Date) return createdAt.getTime();
+  const t = Date.parse(String(createdAt));
+  return Number.isFinite(t) ? t : 0;
+}
+function isOptimisticResolvedByServer(chatMessages, o) {
+  if (o.failed) return false;
+  const normalize = (s) => s.trim();
+  let startIndex = -1;
+  if (o.baseServerLastId) {
+    startIndex = chatMessages.findIndex((m) => m.id === o.baseServerLastId);
+  }
+  const candidates = startIndex >= 0 ? chatMessages.slice(startIndex + 1) : chatMessages;
+  const target = normalize(o.content);
+  for (const m of candidates) {
+    if (m.author !== "human") continue;
+    if (normalize(m.content) !== target) continue;
+    const serverMs = toEpochMs(m.createdAt);
+    const optimisticMs = Date.parse(o.createdAtIso);
+    if (Number.isFinite(optimisticMs) && optimisticMs > 0 && serverMs > 0) {
+      if (serverMs + 12e4 < optimisticMs) continue;
+    }
+    return true;
+  }
+  return false;
+}
+function useOptimisticChatMessages({
+  threadId,
+  shouldForkOnEdit,
+  chatMessages,
+  onSendChat
+}) {
+  const [optimisticChat, setOptimisticChat] = React38.useState([]);
+  React38.useEffect(() => {
+    setOptimisticChat([]);
+  }, [threadId]);
+  const messages = React38.useMemo(() => {
+    if (!optimisticChat || optimisticChat.length === 0) return chatMessages;
+    const unresolved = optimisticChat.filter((o) => !isOptimisticResolvedByServer(chatMessages, o));
+    if (unresolved.length === 0) return chatMessages;
+    const optimisticAsChat = unresolved.map((o) => ({
+      id: o.id,
+      author: "human",
+      content: o.content,
+      createdAt: o.createdAtIso,
+      kind: "optimistic",
+      meta: o.failed ? { kind: "optimistic", event: "send.failed", status: "error" } : { kind: "optimistic", event: "send.pending", status: "info" }
+    }));
+    const merged = [...chatMessages, ...optimisticAsChat];
+    merged.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return merged;
+  }, [chatMessages, optimisticChat]);
+  React38.useEffect(() => {
+    if (optimisticChat.length === 0) return;
+    setOptimisticChat((prev) => {
+      if (prev.length === 0) return prev;
+      const next = prev.filter((o) => !isOptimisticResolvedByServer(chatMessages, o) || o.failed);
+      return next.length === prev.length ? prev : next;
+    });
+  }, [chatMessages, optimisticChat.length]);
+  const onSend = React38.useCallback(
+    async (text, attachments) => {
+      if (shouldForkOnEdit) {
+        await onSendChat(text, attachments);
+        return;
+      }
+      const createdAtIso = (/* @__PURE__ */ new Date()).toISOString();
+      const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1].id : null;
+      const id = makeOptimisticId();
+      setOptimisticChat((prev) => [...prev, { id, content: text, createdAtIso, baseServerLastId, failed: false }]);
+      void Promise.resolve(onSendChat(text, attachments)).catch(() => {
+        setOptimisticChat((prev) => prev.map((m) => m.id === id ? { ...m, failed: true } : m));
+      });
+    },
+    [chatMessages, onSendChat, shouldForkOnEdit]
+  );
+  return { messages, onSend };
+}
+
 // src/studio/ui/StudioOverlay.tsx
 import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function StudioOverlay({
@@ -6295,28 +6467,38 @@ function StudioOverlay({
 }) {
   const theme = useTheme();
   const { width } = useWindowDimensions4();
-  const [sheetOpen, setSheetOpen] = React38.useState(false);
-  const [activePage, setActivePage] = React38.useState("preview");
-  const [drawing, setDrawing] = React38.useState(false);
-  const [chatAttachments, setChatAttachments] = React38.useState([]);
-  const [commentsAppId, setCommentsAppId] = React38.useState(null);
-  const [commentsCount, setCommentsCount] = React38.useState(null);
-  const [confirmMrId, setConfirmMrId] = React38.useState(null);
-  const confirmMr = React38.useMemo(
+  const [sheetOpen, setSheetOpen] = React39.useState(false);
+  const [activePage, setActivePage] = React39.useState("preview");
+  const [drawing, setDrawing] = React39.useState(false);
+  const [chatAttachments, setChatAttachments] = React39.useState([]);
+  const [commentsAppId, setCommentsAppId] = React39.useState(null);
+  const [commentsCount, setCommentsCount] = React39.useState(null);
+  const threadId = (app == null ? void 0 : app.threadId) ?? null;
+  const optimistic = useOptimisticChatMessages({
+    threadId,
+    shouldForkOnEdit,
+    chatMessages,
+    onSendChat
+  });
+  const [confirmMrId, setConfirmMrId] = React39.useState(null);
+  const confirmMr = React39.useMemo(
     () => confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null,
     [confirmMrId, incomingMergeRequests]
   );
-  const closeSheet = React38.useCallback(() => {
-    setSheetOpen(false);
-    Keyboard5.dismiss();
+  const handleSheetOpenChange = React39.useCallback((open) => {
+    setSheetOpen(open);
+    if (!open) Keyboard5.dismiss();
   }, []);
-  const openSheet = React38.useCallback(() => setSheetOpen(true), []);
-  const goToChat = React38.useCallback(() => {
+  const closeSheet = React39.useCallback(() => {
+    handleSheetOpenChange(false);
+  }, [handleSheetOpenChange]);
+  const openSheet = React39.useCallback(() => setSheetOpen(true), []);
+  const goToChat = React39.useCallback(() => {
     setActivePage("chat");
     openSheet();
   }, [openSheet]);
-  const backToPreview = React38.useCallback(() => {
-    if (Platform7.OS !== "ios") {
+  const backToPreview = React39.useCallback(() => {
+    if (Platform9.OS !== "ios") {
       Keyboard5.dismiss();
       setActivePage("preview");
       return;
@@ -6333,11 +6515,11 @@ function StudioOverlay({
     const t = setTimeout(finalize, 350);
     Keyboard5.dismiss();
   }, []);
-  const startDraw = React38.useCallback(() => {
+  const startDraw = React39.useCallback(() => {
     setDrawing(true);
     closeSheet();
   }, [closeSheet]);
-  const handleDrawCapture = React38.useCallback(
+  const handleDrawCapture = React39.useCallback(
     (dataUrl) => {
       setChatAttachments((prev) => [...prev, dataUrl]);
       setDrawing(false);
@@ -6346,7 +6528,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React38.useCallback(async () => {
+  const toggleSheet = React39.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -6358,7 +6540,7 @@ function StudioOverlay({
       closeSheet();
     }
   }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
-  const handleTestMr = React38.useCallback(
+  const handleTestMr = React39.useCallback(
     async (mr) => {
       if (!onTestMr) return;
       await onTestMr(mr);
@@ -6368,7 +6550,7 @@ function StudioOverlay({
   );
   return /* @__PURE__ */ jsxs34(Fragment6, { children: [
     /* @__PURE__ */ jsx55(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ jsx55(StudioBottomSheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx55(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ jsx55(
       StudioSheetPager,
       {
         activePage,
@@ -6402,7 +6584,7 @@ function StudioOverlay({
         chat: /* @__PURE__ */ jsx55(
           ChatPanel,
           {
-            messages: chatMessages,
+            messages: optimistic.messages,
             showTypingIndicator: chatShowTypingIndicator,
             loading: chatLoading,
             sendDisabled: chatSendDisabled,
@@ -6417,7 +6599,7 @@ function StudioOverlay({
             onClose: closeSheet,
             onNavigateHome,
             onStartDraw: startDraw,
-            onSend: onSendChat
+            onSend: optimistic.onSend
           }
         )
       }
@@ -6476,16 +6658,16 @@ function ComergeStudio({
   onNavigateHome,
   style
 }) {
-  const [activeAppId, setActiveAppId] = React39.useState(appId);
-  const [runtimeAppId, setRuntimeAppId] = React39.useState(appId);
-  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React39.useState(null);
-  const platform = React39.useMemo(() => RNPlatform.OS === "ios" ? "ios" : "android", []);
-  React39.useEffect(() => {
+  const [activeAppId, setActiveAppId] = React40.useState(appId);
+  const [runtimeAppId, setRuntimeAppId] = React40.useState(appId);
+  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React40.useState(null);
+  const platform = React40.useMemo(() => RNPlatform.OS === "ios" ? "ios" : "android", []);
+  React40.useEffect(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
-  const captureTargetRef = React39.useRef(null);
+  const captureTargetRef = React40.useRef(null);
   return /* @__PURE__ */ jsx56(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ jsx56(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx56(
     ComergeStudioInner,
     {
@@ -6521,11 +6703,11 @@ function ComergeStudioInner({
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
   const runtimeApp = runtimeAppId === activeAppId ? app : runtimeAppFromHook;
-  const sawEditingOnPendingTargetRef = React39.useRef(false);
-  React39.useEffect(() => {
+  const sawEditingOnPendingTargetRef = React40.useRef(false);
+  React40.useEffect(() => {
     sawEditingOnPendingTargetRef.current = false;
   }, [pendingRuntimeTargetAppId]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!pendingRuntimeTargetAppId) return;
     if (activeAppId !== pendingRuntimeTargetAppId) return;
     if ((app == null ? void 0 : app.status) === "editing") {
@@ -6542,13 +6724,38 @@ function ComergeStudioInner({
     platform,
     canRequestLatest: (runtimeApp == null ? void 0 : runtimeApp.status) === "ready"
   });
+  const sawEditingOnActiveAppRef = React40.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React40.useState(false);
+  React40.useEffect(() => {
+    sawEditingOnActiveAppRef.current = false;
+    setShowPostEditPreparing(false);
+  }, [activeAppId]);
+  React40.useEffect(() => {
+    if (!(app == null ? void 0 : 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 == null ? void 0 : app.id, app == null ? void 0 : app.status]);
+  React40.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 == null ? void 0 : app.threadId) ?? "";
   const thread = useThreadMessages(threadId);
   const mergeRequests = useMergeRequests({ appId: activeAppId });
-  const hasOpenOutgoingMr = React39.useMemo(() => {
+  const hasOpenOutgoingMr = React40.useMemo(() => {
     return mergeRequests.lists.outgoing.some((mr) => mr.status === "open");
   }, [mergeRequests.lists.outgoing]);
-  const incomingReviewMrs = React39.useMemo(() => {
+  const incomingReviewMrs = React40.useMemo(() => {
     if (!userId) return mergeRequests.lists.incoming;
     return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
   }, [mergeRequests.lists.incoming, userId]);
@@ -6570,9 +6777,9 @@ function ComergeStudioInner({
     uploadAttachments: uploader.uploadBase64Images
   });
   const chatSendDisabled = hasNoOutcomeAfterLastHuman(thread.raw);
-  const [processingMrId, setProcessingMrId] = React39.useState(null);
-  const [testingMrId, setTestingMrId] = React39.useState(null);
-  const chatShowTypingIndicator = React39.useMemo(() => {
+  const [processingMrId, setProcessingMrId] = React40.useState(null);
+  const [testingMrId, setTestingMrId] = React40.useState(null);
+  const chatShowTypingIndicator = React40.useMemo(() => {
     var _a;
     if (!thread.raw || thread.raw.length === 0) return false;
     const last = thread.raw[thread.raw.length - 1];
@@ -6580,7 +6787,15 @@ function ComergeStudioInner({
     return payloadType !== "outcome";
   }, [thread.raw]);
   return /* @__PURE__ */ jsx56(View45, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs35(View45, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ jsx56(RuntimeRenderer, { appKey, bundlePath: bundle.bundlePath, renderToken: bundle.renderToken }),
+    /* @__PURE__ */ jsx56(
+      RuntimeRenderer,
+      {
+        appKey,
+        bundlePath: bundle.bundlePath,
+        forcePreparing: showPostEditPreparing,
+        renderToken: bundle.renderToken
+      }
+    ),
     /* @__PURE__ */ jsx56(
       StudioOverlay,
       {