@comergehq/studio 0.1.9 → 0.1.10

package/package.json

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

package/src/components/chat/ChatMessageList.tsx

@@ -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,38 +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}
-        keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
         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

@@ -21,6 +21,7 @@ export type ChatPageProps = {
    */
   overlay?: React.ReactNode;
   style?: ViewStyle;
+  composerHorizontalPadding?: number;
   onNearBottomChange?: ChatMessageListProps['onNearBottomChange'];
   listRef?: React.RefObject<ChatMessageListRef | null>;
 };
@@ -34,6 +35,7 @@ export function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef,
 }: ChatPageProps) {
@@ -92,7 +94,7 @@ export function ChatPage({
             left: 0,
             right: 0,
             bottom: 0,
-            paddingHorizontal: theme.spacing.lg,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
             paddingTop: theme.spacing.sm,
             paddingBottom: footerBottomPadding,
           }}

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

@@ -55,7 +55,7 @@ export type StudioBottomSheetProps = {
 export function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ['80%', '100%'],
+  snapPoints = ['100%'],
   sheetRef,
   background,
   children,
@@ -117,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 };
 }
 
 

package/src/studio/hooks/useOptimisticChatMessages.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+
+import type { ChatMessage } from '../../components/models/types';
+
+export type UseOptimisticChatMessagesParams = {
+  threadId: string | null;
+  shouldForkOnEdit: boolean;
+  chatMessages: ChatMessage[];
+  onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
+};
+
+export type UseOptimisticChatMessagesResult = {
+  messages: ChatMessage[];
+  onSend: (text: string, attachments?: string[]) => Promise<void>;
+};
+
+type OptimisticChatMessage = {
+  id: string;
+  content: string;
+  createdAtIso: string;
+  baseServerLastId: string | null;
+  failed: boolean;
+};
+
+function makeOptimisticId() {
+  return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function toEpochMs(createdAt: ChatMessage['createdAt']): number {
+  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: ChatMessage[], o: OptimisticChatMessage) {
+  if (o.failed) return false;
+
+  const normalize = (s: string) => 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 + 120_000 < optimisticMs) continue;
+    }
+    return true;
+  }
+  return false;
+}
+
+export function useOptimisticChatMessages({
+  threadId,
+  shouldForkOnEdit,
+  chatMessages,
+  onSendChat,
+}: UseOptimisticChatMessagesParams): UseOptimisticChatMessagesResult {
+  const [optimisticChat, setOptimisticChat] = React.useState<OptimisticChatMessage[]>([]);
+
+  React.useEffect(() => {
+    setOptimisticChat([]);
+  }, [threadId]);
+
+  const messages = React.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<ChatMessage>((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]);
+
+  React.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 = React.useCallback(
+    async (text: string, attachments?: string[]) => {
+      if (shouldForkOnEdit) {
+        await onSendChat(text, attachments);
+        return;
+      }
+
+      const createdAtIso = 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 };
+}
+

package/src/studio/ui/ChatPanel.tsx

@@ -129,6 +129,7 @@ export function ChatPanel({
       messages={messages}
       showTypingIndicator={showTypingIndicator}
       topBanner={topBanner}
+      composerHorizontalPadding={0}
       listRef={listRef}
       onNearBottomChange={setNearBottom}
       overlay={

package/src/studio/ui/RuntimeRenderer.tsx

@@ -8,6 +8,11 @@ import { Text } from '../../components/primitives/Text';
 export type RuntimeRendererProps = {
   appKey: string;
   bundlePath: string | null;
+  /**
+   * When true, show the "Preparing app…" UI even if a previous bundle is available.
+   * Used to avoid briefly rendering an outdated bundle during post-edit base refresh.
+   */
+  forcePreparing?: boolean;
   /**
    * Used to force a runtime remount even when bundlePath stays constant
    * (e.g. base bundle replaced in-place).
@@ -16,8 +21,8 @@ export type RuntimeRendererProps = {
   style?: ViewStyle;
 };
 
-export function RuntimeRenderer({ appKey, bundlePath, renderToken, style }: RuntimeRendererProps) {
-  if (!bundlePath) {
+export function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }: RuntimeRendererProps) {
+  if (!bundlePath || forcePreparing) {
     return (
       <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }, style]}>
         <Text variant="bodyMuted">Preparing app…</Text>

package/src/studio/ui/StudioOverlay.tsx

@@ -14,6 +14,7 @@ import { ChatPanel } from './ChatPanel';
 import { ConfirmMergeFlow } from './ConfirmMergeFlow';
 import type { MergeRequestSummary } from '../../components/models/types';
 import { useTheme } from '../../theme';
+import { useOptimisticChatMessages } from '../hooks/useOptimisticChatMessages';
 
 import { MergeIcon } from '../../components/icons/MergeIcon';
 
@@ -98,6 +99,14 @@ export function StudioOverlay({
   const [commentsAppId, setCommentsAppId] = React.useState<string | null>(null);
   const [commentsCount, setCommentsCount] = React.useState<number | null>(null);
 
+  const threadId = app?.threadId ?? null;
+  const optimistic = useOptimisticChatMessages({
+    threadId,
+    shouldForkOnEdit,
+    chatMessages,
+    onSendChat,
+  });
+
   const [confirmMrId, setConfirmMrId] = React.useState<string | null>(null);
   const confirmMr = React.useMemo(
     () => (confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null),
@@ -213,7 +222,7 @@ export function StudioOverlay({
           }
           chat={
             <ChatPanel
-              messages={chatMessages}
+              messages={optimistic.messages}
               showTypingIndicator={chatShowTypingIndicator}
               loading={chatLoading}
               sendDisabled={chatSendDisabled}
@@ -228,7 +237,7 @@ export function StudioOverlay({
               onClose={closeSheet}
               onNavigateHome={onNavigateHome}
               onStartDraw={startDraw}
-              onSend={onSendChat}
+              onSend={optimistic.onSend}
             />
           }
         />