@comergehq/studio 0.1.35 → 0.1.37

package/dist/index.mjs

@@ -486,8 +486,8 @@ var require_remix_x_loop_lottie = __commonJS({
 });
 
 // src/studio/ComergeStudio.tsx
-import * as React51 from "react";
-import { Platform as RNPlatform, View as View49 } from "react-native";
+import * as React52 from "react";
+import { Platform as RNPlatform, View as View50 } from "react-native";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { isSystemEventEnvelope } from "@comergehq/runtime";
 
@@ -700,6 +700,7 @@ publicApi.interceptors.request.use((config) => {
 
 // src/core/services/supabase/client.ts
 import { createClient } from "@supabase/supabase-js";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 var clientSingleton = null;
 var injectedClient = null;
 var hasInjectedClient = false;
@@ -726,6 +727,7 @@ function getSupabaseClient() {
   }
   clientSingleton = createClient(runtimeConfig.url, runtimeConfig.anonKey, {
     auth: {
+      storage: AsyncStorage,
       autoRefreshToken: true,
       persistSession: true,
       detectSessionInUrl: false
@@ -1605,6 +1607,34 @@ function compareMessages(a, b) {
   if (aMs !== bMs) return aMs - bMs;
   return String(a.createdAt).localeCompare(String(b.createdAt));
 }
+function parseAttachments(payload) {
+  const raw = payload == null ? void 0 : payload.attachments;
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const id = typeof item.id === "string" ? String(item.id) : "";
+    const name = typeof item.name === "string" ? String(item.name) : "";
+    const mimeType = typeof item.mimeType === "string" ? String(item.mimeType) : "";
+    const size = typeof item.size === "number" ? Number(item.size) : 0;
+    if (!id || !name || !mimeType || !Number.isFinite(size) || size <= 0) continue;
+    out.push({
+      id,
+      name,
+      mimeType,
+      size,
+      uri: typeof item.downloadUrl === "string" ? String(item.downloadUrl) : void 0,
+      width: typeof item.width === "number" ? Number(item.width) : void 0,
+      height: typeof item.height === "number" ? Number(item.height) : void 0
+    });
+  }
+  return out;
+}
+function hasAttachmentWithoutUrl(payload) {
+  const attachments = parseAttachments(payload);
+  if (attachments.length === 0) return false;
+  return attachments.some((att) => !att.uri);
+}
 function mapMessageToChatMessage(m) {
   var _a, _b;
   const kind = typeof ((_a = m.payload) == null ? void 0 : _a.type) === "string" ? String(m.payload.type) : null;
@@ -1614,7 +1644,8 @@ function mapMessageToChatMessage(m) {
     content: typeof ((_b = m.payload) == null ? void 0 : _b.content) === "string" ? m.payload.content : "",
     createdAt: m.createdAt,
     kind,
-    meta: extractMeta(m.payload)
+    meta: extractMeta(m.payload),
+    attachments: parseAttachments(m.payload)
   };
 }
 function useThreadMessages(threadId) {
@@ -1625,9 +1656,19 @@ function useThreadMessages(threadId) {
   const activeRequestIdRef = React4.useRef(0);
   const foregroundSignal = useForegroundSignal(Boolean(threadId));
   const hasLoadedOnceRef = React4.useRef(false);
+  const attachmentRecoveryTimerRef = React4.useRef(null);
+  const lastAttachmentRecoveryAtRef = React4.useRef(0);
   React4.useEffect(() => {
     hasLoadedOnceRef.current = false;
   }, [threadId]);
+  React4.useEffect(() => {
+    return () => {
+      if (attachmentRecoveryTimerRef.current) {
+        clearTimeout(attachmentRecoveryTimerRef.current);
+        attachmentRecoveryTimerRef.current = null;
+      }
+    };
+  }, []);
   const upsertSorted = React4.useCallback((prev, m) => {
     const next = prev.filter((x) => x.id !== m.id);
     next.push(m);
@@ -1668,29 +1709,56 @@ function useThreadMessages(threadId) {
       }
     }
   }, [threadId]);
+  const recoverAttachmentUrls = React4.useCallback(() => {
+    if (!threadId) return;
+    if (attachmentRecoveryTimerRef.current) return;
+    const now = Date.now();
+    if (now - lastAttachmentRecoveryAtRef.current < 2e3) return;
+    attachmentRecoveryTimerRef.current = setTimeout(() => {
+      attachmentRecoveryTimerRef.current = null;
+      lastAttachmentRecoveryAtRef.current = Date.now();
+      void refetch({ background: true });
+    }, 250);
+  }, [refetch, threadId]);
   React4.useEffect(() => {
     void refetch();
   }, [refetch]);
   React4.useEffect(() => {
     if (!threadId) return;
     const unsubscribe = messagesRepository.subscribeThread(threadId, {
-      onInsert: (m) => setRaw((prev) => upsertSorted(prev, m)),
-      onUpdate: (m) => setRaw((prev) => upsertSorted(prev, m)),
+      onInsert: (m) => {
+        setRaw((prev) => upsertSorted(prev, m));
+        if (hasAttachmentWithoutUrl(m.payload)) {
+          recoverAttachmentUrls();
+        }
+      },
+      onUpdate: (m) => {
+        setRaw((prev) => upsertSorted(prev, m));
+        if (hasAttachmentWithoutUrl(m.payload)) {
+          recoverAttachmentUrls();
+        }
+      },
       onDelete: (m) => setRaw((prev) => prev.filter((x) => x.id !== m.id))
     });
     return unsubscribe;
-  }, [threadId, upsertSorted, foregroundSignal]);
+  }, [threadId, upsertSorted, foregroundSignal, recoverAttachmentUrls]);
   React4.useEffect(() => {
     if (!threadId) return;
     if (foregroundSignal <= 0) return;
     void refetch({ background: true });
   }, [foregroundSignal, refetch, threadId]);
+  React4.useEffect(() => {
+    if (!threadId) return;
+    if (raw.length === 0) return;
+    if (!raw.some((m) => hasAttachmentWithoutUrl(m.payload))) return;
+    recoverAttachmentUrls();
+  }, [raw, recoverAttachmentUrls, threadId]);
   const messages = React4.useMemo(() => {
     const visible = raw.filter((m) => !isQueuedHiddenMessage(m));
     const resolved = visible.length > 0 ? visible : raw;
     return resolved.map(mapMessageToChatMessage);
   }, [raw]);
-  return { raw, messages, loading, refreshing, error, refetch };
+  return { raw, messages, loading, refreshing, error, refetch, recoverAttachmentUrls };
 }
 
 // src/studio/hooks/useBundleManager.ts
@@ -2857,7 +2925,7 @@ function useMergeRequests(params) {
 
 // src/studio/hooks/useAttachmentUpload.ts
 import * as React7 from "react";
-import { Platform as Platform2 } from "react-native";
+import { Image, Platform as Platform2 } from "react-native";
 import * as FileSystem2 from "expo-file-system/legacy";
 
 // src/data/attachment/remote.ts
@@ -2953,6 +3021,23 @@ function getMimeTypeFromDataUrl(dataUrl) {
   const mimeMatch = header.match(/data:(.*?);base64/i);
   return (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "image/png";
 }
+async function getImageDimensionsFromDataUrl(dataUrl) {
+  try {
+    const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+    const dims = await new Promise((resolve, reject) => {
+      Image.getSize(
+        normalized,
+        (width, height) => resolve({ width, height }),
+        (err) => reject(err)
+      );
+    });
+    if (dims.width > 0 && dims.height > 0) {
+      return { width: Math.round(dims.width), height: Math.round(dims.height) };
+    }
+  } catch {
+  }
+  return {};
+}
 function useAttachmentUpload() {
   const [uploading, setUploading] = React7.useState(false);
   const [error, setError] = React7.useState(null);
@@ -2967,17 +3052,24 @@ function useAttachmentUpload() {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
           const blob = Platform2.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
           const mimeType = getMimeTypeFromDataUrl(normalized);
-          return { blob, idx, mimeType };
+          const dimensions = mimeType.startsWith("image/") ? await getImageDimensionsFromDataUrl(normalized) : {};
+          return { blob, idx, mimeType, ...dimensions };
         })
       );
-      const files = blobs.map(({ blob, mimeType }, idx) => ({
+      const files = blobs.map(({ blob, mimeType, width, height }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
-        mimeType
+        mimeType,
+        width,
+        height
       }));
       const presign = await attachmentRepository.presign({ threadId, appId, files });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.upload(u, blobs[index].blob)));
-      return presign.uploads.map((u) => u.attachment);
+      return presign.uploads.map((u, index) => ({
+        ...u.attachment,
+        width: blobs[index].width,
+        height: blobs[index].height
+      }));
     } catch (e) {
       const err = e instanceof Error ? e : new Error(String(e));
       setError(err);
@@ -2996,13 +3088,16 @@ function useAttachmentUpload() {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
           const blob = Platform2.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
           const mimeType = getMimeTypeFromDataUrl(normalized);
-          return { blob, mimeType };
+          const dimensions = mimeType.startsWith("image/") ? await getImageDimensionsFromDataUrl(normalized) : {};
+          return { blob, mimeType, ...dimensions };
         })
       );
-      const files = blobs.map(({ blob, mimeType }, idx) => ({
+      const files = blobs.map(({ blob, mimeType, width, height }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
-        mimeType
+        mimeType,
+        width,
+        height
       }));
       const presign = await attachmentRepository.stagePresign({ files });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.uploadStaged(u, blobs[index].blob)));
@@ -3285,8 +3380,8 @@ function RuntimeRenderer({
 }
 
 // src/studio/ui/StudioOverlay.tsx
-import * as React46 from "react";
-import { InteractionManager, Keyboard as Keyboard5, Platform as Platform11, View as View48, useWindowDimensions as useWindowDimensions4 } from "react-native";
+import * as React47 from "react";
+import { InteractionManager, Keyboard as Keyboard5, Platform as Platform11, View as View49, useWindowDimensions as useWindowDimensions5 } from "react-native";
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 import * as React12 from "react";
@@ -3845,6 +3940,7 @@ function EdgeGlowFrame({
   role = "accent",
   thickness = 40,
   intensity = 1,
+  animationDurationMs = 300,
   style
 }) {
   const theme = useTheme();
@@ -3853,10 +3949,10 @@ function EdgeGlowFrame({
   React14.useEffect(() => {
     Animated3.timing(anim, {
       toValue: visible ? 1 : 0,
-      duration: 300,
+      duration: animationDurationMs,
       useNativeDriver: true
     }).start();
-  }, [anim, visible]);
+  }, [anim, visible, animationDurationMs]);
   const c = baseColor(role, theme);
   const strong = withAlpha(c, 0.6 * alpha);
   const soft = withAlpha(c, 0.22 * alpha);
@@ -4382,7 +4478,16 @@ function DrawModeOverlay({
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
   return /* @__PURE__ */ jsxs7(View10, { style: [StyleSheet3.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
-    /* @__PURE__ */ jsx14(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
+    /* @__PURE__ */ jsx14(
+      EdgeGlowFrame,
+      {
+        visible: !hideUi,
+        role: "danger",
+        thickness: 50,
+        intensity: 1,
+        animationDurationMs: hideUi ? 0 : 300
+      }
+    ),
     /* @__PURE__ */ jsx14(
       DrawSurface,
       {
@@ -4436,7 +4541,7 @@ import {
   ActivityIndicator as ActivityIndicator2,
   Animated as Animated5,
   Dimensions,
-  Image,
+  Image as Image2,
   Pressable as Pressable4,
   ScrollView,
   View as View11
@@ -4538,7 +4643,7 @@ function AspectRatioThumbnail({
   const [aspectRatio, setAspectRatio] = React19.useState(1);
   return /* @__PURE__ */ jsxs8(View11, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
     /* @__PURE__ */ jsx17(View11, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ jsx17(
-      Image,
+      Image2,
       {
         source: { uri },
         style: { width: "100%", height: "100%" },
@@ -4747,7 +4852,7 @@ import * as React20 from "react";
 import { View as View13 } from "react-native";
 
 // src/components/primitives/Avatar.tsx
-import { Image as Image2, View as View12 } from "react-native";
+import { Image as Image3, View as View12 } from "react-native";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function initialsFrom(name) {
   var _a, _b;
@@ -4782,7 +4887,7 @@ function Avatar({
         style
       ],
       children: uri ? /* @__PURE__ */ jsx18(
-        Image2,
+        Image3,
         {
           source: { uri },
           style: [{ width: size, height: size }, imageStyle],
@@ -5587,12 +5692,12 @@ function PreviewPlaceholder({ visible, style }) {
 }
 
 // src/components/preview/PreviewImage.tsx
-import { Image as Image3 } from "react-native";
+import { Image as Image4 } from "react-native";
 import { jsx as jsx29 } from "react/jsx-runtime";
 function PreviewImage({ uri, onLoad, style }) {
   if (!uri) return null;
   return /* @__PURE__ */ jsx29(
-    Image3,
+    Image4,
     {
       source: { uri },
       resizeMode: "cover",
@@ -5819,7 +5924,7 @@ function PreviewHeroSection({
 
 // src/studio/ui/preview-panel/PreviewRelatedAppsSection.tsx
 import * as React27 from "react";
-import { ActivityIndicator as ActivityIndicator4, Pressable as Pressable9, ScrollView as ScrollView2, View as View24 } from "react-native";
+import { ActivityIndicator as ActivityIndicator4, Pressable as Pressable9, ScrollView as ScrollView2, View as View24, useWindowDimensions as useWindowDimensions3 } from "react-native";
 
 // src/components/primitives/Modal.tsx
 import {
@@ -5907,7 +6012,10 @@ function PreviewRelatedAppsSection({
 }) {
   var _a;
   const theme = useTheme();
+  const { height: windowHeight } = useWindowDimensions3();
   const [relatedAppsOpen, setRelatedAppsOpen] = React27.useState(false);
+  const modalMaxHeight = Math.max(240, windowHeight * 0.5);
+  const modalScrollMaxHeight = Math.max(140, modalMaxHeight - 96);
   const relatedAppItems = React27.useMemo(() => {
     if (!relatedApps) return [];
     const items = [];
@@ -6040,10 +6148,7 @@ function PreviewRelatedAppsSection({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs19(View24, { style: { alignItems: "flex-end", gap: 6 }, children: [
-              /* @__PURE__ */ jsx36(View24, { style: { minHeight: 20, justifyContent: "center" }, children: item.app.status !== "ready" ? /* @__PURE__ */ jsx36(PreviewStatusBadge, { status: item.app.status }) : null }),
-              isSwitching ? /* @__PURE__ */ jsx36(ActivityIndicator4, { size: "small", color: theme.colors.primary }) : null
-            ] })
+            /* @__PURE__ */ jsx36(View24, { style: { alignItems: "flex-end", gap: 6 }, children: isSwitching ? /* @__PURE__ */ jsx36(ActivityIndicator4, { size: "small", color: theme.colors.primary }) : null })
           ] })
         },
         item.app.id
@@ -6086,17 +6191,35 @@ function PreviewRelatedAppsSection({
         children: inlineItems.map((item) => renderRelatedCard(item))
       }
     ),
-    /* @__PURE__ */ jsx36(Modal, { visible: relatedAppsOpen, onRequestClose: closeRelatedApps, children: /* @__PURE__ */ jsxs19(View24, { style: { gap: theme.spacing.sm }, children: [
-      /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }, children: "Related apps" }),
-      sectionedRelatedApps.original.length > 0 ? /* @__PURE__ */ jsxs19(View24, { children: [
-        /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Original" }),
-        sectionedRelatedApps.original.map((item) => renderRelatedCard(item, { fullWidth: true }))
-      ] }) : null,
-      sectionedRelatedApps.remixes.length > 0 ? /* @__PURE__ */ jsxs19(View24, { children: [
-        /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Remixes" }),
-        sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))
-      ] }) : null
-    ] }) })
+    /* @__PURE__ */ jsx36(
+      Modal,
+      {
+        visible: relatedAppsOpen,
+        onRequestClose: closeRelatedApps,
+        contentStyle: { maxHeight: modalMaxHeight, overflow: "hidden" },
+        children: /* @__PURE__ */ jsxs19(View24, { style: { gap: theme.spacing.sm, minHeight: 0 }, children: [
+          /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }, children: "Related apps" }),
+          /* @__PURE__ */ jsxs19(
+            ScrollView2,
+            {
+              style: { maxHeight: modalScrollMaxHeight },
+              contentContainerStyle: { paddingBottom: theme.spacing.xs, gap: theme.spacing.sm },
+              showsVerticalScrollIndicator: true,
+              children: [
+                sectionedRelatedApps.original.length > 0 ? /* @__PURE__ */ jsxs19(View24, { children: [
+                  /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Original" }),
+                  sectionedRelatedApps.original.map((item) => renderRelatedCard(item, { fullWidth: true }))
+                ] }) : null,
+                sectionedRelatedApps.remixes.length > 0 ? /* @__PURE__ */ jsxs19(View24, { children: [
+                  /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Remixes" }),
+                  sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))
+                ] }) : null
+              ]
+            }
+          )
+        ] })
+      }
+    )
   ] });
 }
 
@@ -6713,7 +6836,7 @@ function MergeRequestStatusCard({
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
 import * as React32 from "react";
-import { Animated as Animated9, FlatList, View as View33, useWindowDimensions as useWindowDimensions3 } from "react-native";
+import { Animated as Animated9, FlatList, View as View33, useWindowDimensions as useWindowDimensions4 } from "react-native";
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
 import * as React31 from "react";
@@ -6928,7 +7051,7 @@ function ReviewMergeRequestCarousel({
   style
 }) {
   const theme = useTheme();
-  const { width } = useWindowDimensions3();
+  const { width } = useWindowDimensions4();
   const [expanded, setExpanded] = React32.useState({});
   const carouselScrollX = React32.useRef(new Animated9.Value(0)).current;
   const peekAmount = 24;
@@ -7669,22 +7792,22 @@ ${shareUrl}`;
 }
 
 // src/studio/ui/ChatPanel.tsx
-import * as React43 from "react";
-import { ActivityIndicator as ActivityIndicator10, View as View46 } from "react-native";
+import * as React44 from "react";
+import { ActivityIndicator as ActivityIndicator10, View as View47 } from "react-native";
 
 // src/components/chat/ChatPage.tsx
-import * as React40 from "react";
-import { Platform as Platform10, View as View39 } from "react-native";
+import * as React41 from "react";
+import { Platform as Platform10, View as View40 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
 
 // src/components/chat/ChatMessageList.tsx
-import * as React39 from "react";
-import { View as View38 } from "react-native";
+import * as React40 from "react";
+import { View as View39 } from "react-native";
 import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
 
 // src/components/chat/ChatMessageBubble.tsx
-import * as React37 from "react";
-import { View as View36 } from "react-native";
+import * as React38 from "react";
+import { View as View37 } from "react-native";
 import { CheckCheck as CheckCheck2, GitMerge as GitMerge2, RotateCcw } from "lucide-react-native";
 
 // src/components/primitives/Button.tsx
@@ -7752,19 +7875,269 @@ function Button({
   );
 }
 
+// src/components/chat/ChatMessageAttachments.tsx
+import * as React37 from "react";
+import {
+  Animated as Animated10,
+  Dimensions as Dimensions3,
+  FlatList as FlatList2,
+  Modal as Modal3,
+  Pressable as Pressable16,
+  StyleSheet as StyleSheet4,
+  View as View36
+} from "react-native";
+import { Image as ExpoImage } from "expo-image";
+import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+function ChatMessageAttachments({
+  messageId,
+  attachments,
+  align = "left",
+  onAttachmentLoadError
+}) {
+  const theme = useTheme();
+  const [viewerVisible, setViewerVisible] = React37.useState(false);
+  const [viewerIndex, setViewerIndex] = React37.useState(0);
+  const failedKeysRef = React37.useRef(/* @__PURE__ */ new Set());
+  const [loadingById, setLoadingById] = React37.useState({});
+  const [modalLoadingById, setModalLoadingById] = React37.useState({});
+  const pulse = React37.useRef(new Animated10.Value(0.45)).current;
+  const imageAttachments = React37.useMemo(
+    () => attachments.filter(
+      (att) => att.mimeType.startsWith("image/") && typeof att.uri === "string" && att.uri.length > 0
+    ),
+    [attachments]
+  );
+  const itemHeight = imageAttachments.length === 1 ? 180 : 124;
+  const maxItemWidth = imageAttachments.length === 1 ? 280 : 180;
+  const getAspectRatio = (att) => {
+    const width = typeof att.width === "number" ? att.width : 0;
+    const height = typeof att.height === "number" ? att.height : 0;
+    if (width > 0 && height > 0) {
+      return Math.max(0.35, Math.min(2.4, width / height));
+    }
+    return 0.8;
+  };
+  React37.useEffect(() => {
+    Animated10.loop(
+      Animated10.sequence([
+        Animated10.timing(pulse, { toValue: 0.85, duration: 650, useNativeDriver: true }),
+        Animated10.timing(pulse, { toValue: 0.45, duration: 650, useNativeDriver: true })
+      ])
+    ).start();
+  }, [pulse]);
+  React37.useEffect(() => {
+    if (imageAttachments.length === 0) {
+      setLoadingById({});
+      setModalLoadingById({});
+      return;
+    }
+    setLoadingById((prev) => {
+      const next = {};
+      for (const att of imageAttachments) {
+        next[att.id] = prev[att.id] ?? true;
+      }
+      return next;
+    });
+  }, [imageAttachments]);
+  React37.useEffect(() => {
+    if (!viewerVisible) return;
+    if (imageAttachments.length === 0) {
+      setModalLoadingById({});
+      return;
+    }
+    setModalLoadingById(() => {
+      const next = {};
+      for (const att of imageAttachments) {
+        next[att.id] = true;
+      }
+      return next;
+    });
+  }, [viewerVisible, imageAttachments]);
+  if (imageAttachments.length === 0) return null;
+  const handleError = (attachmentId) => {
+    const key = `${messageId}:${attachmentId}`;
+    if (failedKeysRef.current.has(key)) return;
+    failedKeysRef.current.add(key);
+    onAttachmentLoadError == null ? void 0 : onAttachmentLoadError(messageId, attachmentId);
+  };
+  return /* @__PURE__ */ jsxs30(Fragment7, { children: [
+    /* @__PURE__ */ jsx49(
+      View36,
+      {
+        style: {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          justifyContent: align === "right" ? "flex-end" : "flex-start",
+          alignSelf: align === "right" ? "flex-end" : "flex-start",
+          gap: theme.spacing.sm,
+          marginBottom: theme.spacing.sm
+        },
+        children: imageAttachments.map((att, index) => /* @__PURE__ */ jsxs30(
+          Pressable16,
+          {
+            onPress: () => {
+              setViewerIndex(index);
+              setViewerVisible(true);
+            },
+            accessibilityRole: "button",
+            accessibilityLabel: `Attachment ${index + 1} of ${imageAttachments.length}`,
+            style: {
+              height: itemHeight,
+              aspectRatio: getAspectRatio(att),
+              maxWidth: maxItemWidth,
+              borderRadius: theme.radii.lg,
+              overflow: "hidden"
+            },
+            children: [
+              loadingById[att.id] ? /* @__PURE__ */ jsx49(
+                Animated10.View,
+                {
+                  style: {
+                    ...StyleSheet4.absoluteFillObject,
+                    opacity: pulse,
+                    backgroundColor: theme.colors.border
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx49(
+                ExpoImage,
+                {
+                  source: { uri: att.uri },
+                  style: { width: "100%", height: "100%" },
+                  contentFit: "contain",
+                  transition: 140,
+                  cachePolicy: "memory-disk",
+                  onLoadStart: () => {
+                    setLoadingById((prev) => ({ ...prev, [att.id]: true }));
+                  },
+                  onLoadEnd: () => {
+                    setLoadingById((prev) => ({ ...prev, [att.id]: false }));
+                  },
+                  onError: () => handleError(att.id)
+                }
+              )
+            ]
+          },
+          att.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx49(Modal3, { visible: viewerVisible, transparent: true, animationType: "fade", onRequestClose: () => setViewerVisible(false), children: /* @__PURE__ */ jsxs30(View36, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.95)" }, children: [
+      /* @__PURE__ */ jsx49(
+        View36,
+        {
+          style: {
+            position: "absolute",
+            top: 56,
+            right: 16,
+            zIndex: 2
+          },
+          children: /* @__PURE__ */ jsx49(
+            Pressable16,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Close attachment viewer",
+              onPress: () => setViewerVisible(false),
+              style: {
+                width: 44,
+                height: 44,
+                borderRadius: 22,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "rgba(255,255,255,0.15)"
+              },
+              children: /* @__PURE__ */ jsx49(IconClose, { size: 18, colorToken: "onPrimary" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx49(
+        FlatList2,
+        {
+          data: imageAttachments,
+          horizontal: true,
+          pagingEnabled: true,
+          initialScrollIndex: viewerIndex,
+          keyExtractor: (item) => item.id,
+          showsHorizontalScrollIndicator: false,
+          getItemLayout: (_, index) => {
+            const width = Dimensions3.get("window").width;
+            return { length: width, offset: width * index, index };
+          },
+          renderItem: ({ item, index }) => /* @__PURE__ */ jsxs30(View36, { style: { width: Dimensions3.get("window").width, height: "100%", justifyContent: "center" }, children: [
+            modalLoadingById[item.id] ? /* @__PURE__ */ jsx49(
+              Animated10.View,
+              {
+                style: {
+                  ...StyleSheet4.absoluteFillObject,
+                  opacity: pulse,
+                  backgroundColor: theme.colors.border
+                }
+              }
+            ) : null,
+            /* @__PURE__ */ jsx49(
+              ExpoImage,
+              {
+                source: { uri: item.uri },
+                style: { width: "100%", height: "78%" },
+                contentFit: "contain",
+                transition: 140,
+                cachePolicy: "memory-disk",
+                onLoadStart: () => {
+                  setModalLoadingById((prev) => ({ ...prev, [item.id]: true }));
+                },
+                onLoadEnd: () => {
+                  setModalLoadingById((prev) => ({ ...prev, [item.id]: false }));
+                },
+                onError: () => handleError(item.id)
+              }
+            ),
+            /* @__PURE__ */ jsxs30(
+              Text,
+              {
+                variant: "caption",
+                color: "#FFFFFF",
+                style: { textAlign: "center", marginTop: theme.spacing.sm },
+                children: [
+                  index + 1,
+                  " / ",
+                  imageAttachments.length
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
+
 // src/components/chat/ChatMessageBubble.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 function areMessageMetaEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return a === b;
   return a.kind === b.kind && a.event === b.event && a.status === b.status && a.mergeRequestId === b.mergeRequestId && a.sourceAppId === b.sourceAppId && a.targetAppId === b.targetAppId && a.appId === b.appId && a.threadId === b.threadId;
 }
+function areMessageAttachmentsEqual(a, b) {
+  if (a === b) return true;
+  const left = a ?? [];
+  const right = b ?? [];
+  if (left.length !== right.length) return false;
+  for (let i = 0; i < left.length; i += 1) {
+    if (left[i].id !== right[i].id || left[i].name !== right[i].name || left[i].mimeType !== right[i].mimeType || left[i].size !== right[i].size || left[i].uri !== right[i].uri || left[i].width !== right[i].width || left[i].height !== right[i].height) {
+      return false;
+    }
+  }
+  return true;
+}
 function ChatMessageBubbleInner({
   message,
   renderContent,
   isLast,
   retrying,
   onRetryMessage,
+  onAttachmentLoadError,
   style
 }) {
   var _a, _b;
@@ -7783,11 +8156,36 @@ function ChatMessageBubbleInner({
   const bodyColor = metaStatus === "success" ? theme.colors.success : metaStatus === "error" ? theme.colors.danger : void 0;
   const showRetry = Boolean(onRetryMessage) && isLast && metaStatus === "error" && message.author === "human";
   const retryLabel = retrying ? "Retrying..." : "Retry";
-  const handleRetryPress = React37.useCallback(() => {
+  const hasText = message.content.trim().length > 0;
+  const attachments = message.attachments ?? [];
+  const hasAttachments = attachments.length > 0;
+  const hasStatusIcon = isMergeCompleted || isSyncCompleted || isMergeApproved || isSyncStarted;
+  const shouldRenderBubble = hasText || hasStatusIcon;
+  const handleRetryPress = React38.useCallback(() => {
     onRetryMessage == null ? void 0 : onRetryMessage(message.id);
   }, [message.id, onRetryMessage]);
-  return /* @__PURE__ */ jsxs30(View36, { style: [align, style], children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs31(View37, { style: [align, style], children: [
+    hasAttachments ? /* @__PURE__ */ jsx50(
+      View37,
+      {
+        style: {
+          maxWidth: "85%",
+          marginBottom: shouldRenderBubble ? theme.spacing.xs : 0,
+          alignSelf: isHuman ? "flex-end" : "flex-start",
+          alignItems: isHuman ? "flex-end" : "flex-start"
+        },
+        children: /* @__PURE__ */ jsx50(
+          ChatMessageAttachments,
+          {
+            messageId: message.id,
+            attachments,
+            align: isHuman ? "right" : "left",
+            onAttachmentLoadError
+          }
+        )
+      }
+    ) : null,
+    shouldRenderBubble ? /* @__PURE__ */ jsx50(
       Surface,
       {
         variant: bubbleVariant,
@@ -7802,14 +8200,14 @@ function ChatMessageBubbleInner({
           },
           cornerStyle
         ],
-        children: /* @__PURE__ */ jsxs30(View36, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ jsx49(CheckCheck2, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
-          isMergeApproved || isSyncStarted ? /* @__PURE__ */ jsx49(GitMerge2, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-          /* @__PURE__ */ jsx49(View36, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ jsx49(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+        children: /* @__PURE__ */ jsxs31(View37, { style: { flexDirection: "row", alignItems: "center" }, children: [
+          isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ jsx50(CheckCheck2, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
+          isMergeApproved || isSyncStarted ? /* @__PURE__ */ jsx50(GitMerge2, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
+          /* @__PURE__ */ jsx50(View37, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ jsx50(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
         ] })
       }
-    ),
-    showRetry ? /* @__PURE__ */ jsx49(View36, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ jsx49(
+    ) : null,
+    showRetry ? /* @__PURE__ */ jsx50(View37, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "ghost",
@@ -7818,9 +8216,9 @@ function ChatMessageBubbleInner({
         disabled: retrying,
         style: { borderColor: theme.colors.danger },
         accessibilityLabel: "Retry send",
-        children: /* @__PURE__ */ jsxs30(View36, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          !retrying ? /* @__PURE__ */ jsx49(RotateCcw, { size: 14, color: theme.colors.danger }) : null,
-          /* @__PURE__ */ jsx49(
+        children: /* @__PURE__ */ jsxs31(View37, { style: { flexDirection: "row", alignItems: "center" }, children: [
+          !retrying ? /* @__PURE__ */ jsx50(RotateCcw, { size: 14, color: theme.colors.danger }) : null,
+          /* @__PURE__ */ jsx50(
             Text,
             {
               variant: "caption",
@@ -7836,30 +8234,30 @@ function ChatMessageBubbleInner({
   ] });
 }
 function areEqual(prev, next) {
-  return prev.message.id === next.message.id && prev.message.author === next.message.author && prev.message.content === next.message.content && prev.message.kind === next.message.kind && String(prev.message.createdAt) === String(next.message.createdAt) && areMessageMetaEqual(prev.message.meta, next.message.meta) && prev.renderContent === next.renderContent && prev.isLast === next.isLast && prev.retrying === next.retrying && prev.onRetryMessage === next.onRetryMessage && prev.style === next.style;
+  return prev.message.id === next.message.id && prev.message.author === next.message.author && prev.message.content === next.message.content && areMessageAttachmentsEqual(prev.message.attachments, next.message.attachments) && prev.message.kind === next.message.kind && String(prev.message.createdAt) === String(next.message.createdAt) && areMessageMetaEqual(prev.message.meta, next.message.meta) && prev.renderContent === next.renderContent && prev.isLast === next.isLast && prev.retrying === next.retrying && prev.onRetryMessage === next.onRetryMessage && prev.onAttachmentLoadError === next.onAttachmentLoadError && prev.style === next.style;
 }
-var ChatMessageBubble = React37.memo(ChatMessageBubbleInner, areEqual);
+var ChatMessageBubble = React38.memo(ChatMessageBubbleInner, areEqual);
 ChatMessageBubble.displayName = "ChatMessageBubble";
 
 // src/components/chat/TypingIndicator.tsx
-import * as React38 from "react";
-import { Animated as Animated10, View as View37 } from "react-native";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { Animated as Animated11, View as View38 } from "react-native";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
-  const anims = React38.useMemo(
-    () => [new Animated10.Value(0.3), new Animated10.Value(0.3), new Animated10.Value(0.3)],
+  const anims = React39.useMemo(
+    () => [new Animated11.Value(0.3), new Animated11.Value(0.3), new Animated11.Value(0.3)],
     []
   );
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = Animated10.sequence([
-        Animated10.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        Animated10.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      const seq = Animated11.sequence([
+        Animated11.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        Animated11.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
       ]);
-      const loop = Animated10.loop(seq);
+      const loop = Animated11.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -7867,8 +8265,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ jsx50(View37, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ jsx50(
-    Animated10.View,
+  return /* @__PURE__ */ jsx51(View38, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ jsx51(
+    Animated11.View,
     {
       style: {
         width: 8,
@@ -7877,7 +8275,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: Animated10.multiply(Animated10.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: Animated11.multiply(Animated11.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -7885,36 +8283,37 @@ function TypingIndicator({ style }) {
 }
 
 // src/components/chat/ChatMessageList.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
-var ChatMessageList = React39.forwardRef(
+import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+var ChatMessageList = React40.forwardRef(
   ({
     messages,
     showTypingIndicator = false,
     renderMessageContent,
     onRetryMessage,
     isRetryingMessage,
+    onAttachmentLoadError,
     contentStyle,
     bottomInset = 0,
     onNearBottomChange,
     nearBottomThreshold = 200
   }, ref) => {
     const theme = useTheme();
-    const listRef = React39.useRef(null);
-    const nearBottomRef = React39.useRef(true);
-    const initialScrollDoneRef = React39.useRef(false);
-    const lastMessageIdRef = React39.useRef(null);
-    const data = React39.useMemo(() => {
+    const listRef = React40.useRef(null);
+    const nearBottomRef = React40.useRef(true);
+    const initialScrollDoneRef = React40.useRef(false);
+    const lastMessageIdRef = React40.useRef(null);
+    const data = React40.useMemo(() => {
       return [...messages].reverse();
     }, [messages]);
     const lastMessageId = messages.length > 0 ? messages[messages.length - 1].id : null;
-    const keyExtractor = React39.useCallback((m) => m.id, []);
-    const scrollToBottom = React39.useCallback((options) => {
+    const keyExtractor = React40.useCallback((m) => m.id, []);
+    const scrollToBottom = React40.useCallback((options) => {
       var _a;
       const animated = (options == null ? void 0 : options.animated) ?? true;
       (_a = listRef.current) == null ? void 0 : _a.scrollToOffset({ offset: 0, animated });
     }, []);
-    React39.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
-    const handleScroll = React39.useCallback(
+    React40.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    const handleScroll = React40.useCallback(
       (e) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
         const distanceFromBottom = Math.max(contentOffset.y - Math.max(bottomInset, 0), 0);
@@ -7926,7 +8325,7 @@ var ChatMessageList = React39.forwardRef(
       },
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
-    React39.useEffect(() => {
+    React40.useEffect(() => {
       if (!initialScrollDoneRef.current) return;
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : null;
       const prevLastId = lastMessageIdRef.current;
@@ -7936,14 +8335,14 @@ var ChatMessageList = React39.forwardRef(
       const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
       return () => cancelAnimationFrame(id);
     }, [messages, scrollToBottom]);
-    React39.useEffect(() => {
+    React40.useEffect(() => {
       if (showTypingIndicator && nearBottomRef.current) {
         const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
         return () => cancelAnimationFrame(id);
       }
       return void 0;
     }, [showTypingIndicator, scrollToBottom]);
-    const handleContentSizeChange = React39.useCallback(() => {
+    const handleContentSizeChange = React40.useCallback(() => {
       if (initialScrollDoneRef.current) return;
       initialScrollDoneRef.current = true;
       lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1].id : null;
@@ -7951,7 +8350,7 @@ var ChatMessageList = React39.forwardRef(
       onNearBottomChange == null ? void 0 : onNearBottomChange(true);
       requestAnimationFrame(() => scrollToBottom({ animated: false }));
     }, [messages, onNearBottomChange, scrollToBottom]);
-    const contentContainerStyle = React39.useMemo(
+    const contentContainerStyle = React40.useMemo(
       () => [
         {
           paddingHorizontal: theme.spacing.lg,
@@ -7961,28 +8360,29 @@ var ChatMessageList = React39.forwardRef(
       ],
       [contentStyle, theme.spacing.lg, theme.spacing.sm]
     );
-    const renderSeparator = React39.useCallback(() => /* @__PURE__ */ jsx51(View38, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
-    const listHeader = React39.useMemo(
-      () => /* @__PURE__ */ jsxs31(View38, { children: [
-        showTypingIndicator ? /* @__PURE__ */ jsx51(View38, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx51(TypingIndicator, {}) }) : null,
-        bottomInset > 0 ? /* @__PURE__ */ jsx51(View38, { style: { height: bottomInset } }) : null
+    const renderSeparator = React40.useCallback(() => /* @__PURE__ */ jsx52(View39, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
+    const listHeader = React40.useMemo(
+      () => /* @__PURE__ */ jsxs32(View39, { children: [
+        showTypingIndicator ? /* @__PURE__ */ jsx52(View39, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx52(TypingIndicator, {}) }) : null,
+        bottomInset > 0 ? /* @__PURE__ */ jsx52(View39, { style: { height: bottomInset } }) : null
       ] }),
       [bottomInset, showTypingIndicator, theme.spacing.lg, theme.spacing.sm]
     );
-    const renderItem = React39.useCallback(
-      ({ item }) => /* @__PURE__ */ jsx51(
+    const renderItem = React40.useCallback(
+      ({ item }) => /* @__PURE__ */ jsx52(
         ChatMessageBubble,
         {
           message: item,
           renderContent: renderMessageContent,
           isLast: Boolean(lastMessageId && item.id === lastMessageId),
           retrying: (isRetryingMessage == null ? void 0 : isRetryingMessage(item.id)) ?? false,
-          onRetryMessage
+          onRetryMessage,
+          onAttachmentLoadError
         }
       ),
-      [isRetryingMessage, lastMessageId, onRetryMessage, renderMessageContent]
+      [isRetryingMessage, lastMessageId, onAttachmentLoadError, onRetryMessage, renderMessageContent]
     );
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx52(
       BottomSheetFlatList,
       {
         ref: listRef,
@@ -8005,7 +8405,7 @@ var ChatMessageList = React39.forwardRef(
 ChatMessageList.displayName = "ChatMessageList";
 
 // src/components/chat/ChatPage.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
 function ChatPage({
   header,
   messages,
@@ -8013,6 +8413,7 @@ function ChatPage({
   renderMessageContent,
   onRetryMessage,
   isRetryingMessage,
+  onAttachmentLoadError,
   topBanner,
   composerTop,
   composer,
@@ -8024,35 +8425,35 @@ function ChatPage({
 }) {
   const theme = useTheme();
   const insets = useSafeAreaInsets4();
-  const [composerHeight, setComposerHeight] = React40.useState(0);
-  const [composerTopHeight, setComposerTopHeight] = React40.useState(0);
+  const [composerHeight, setComposerHeight] = React41.useState(0);
+  const [composerTopHeight, setComposerTopHeight] = React41.useState(0);
   const footerBottomPadding = Platform10.OS === "ios" ? insets.bottom - 24 : insets.bottom + 10;
   const totalComposerHeight = composerHeight + composerTopHeight;
   const overlayBottom = totalComposerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = totalComposerHeight + footerBottomPadding + theme.spacing.xl;
-  const resolvedOverlay = React40.useMemo(() => {
+  const resolvedOverlay = React41.useMemo(() => {
     var _a;
     if (!overlay) return null;
-    if (!React40.isValidElement(overlay)) return overlay;
+    if (!React41.isValidElement(overlay)) return overlay;
     const prevStyle = (_a = overlay.props) == null ? void 0 : _a.style;
-    return React40.cloneElement(overlay, {
+    return React41.cloneElement(overlay, {
       style: [prevStyle, { bottom: overlayBottom }]
     });
   }, [overlay, overlayBottom]);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (composerTop) return;
     setComposerTopHeight(0);
   }, [composerTop]);
-  return /* @__PURE__ */ jsxs32(View39, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ jsx52(View39, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ jsx52(View39, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ jsxs32(View39, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsxs32(
-        View39,
+  return /* @__PURE__ */ jsxs33(View40, { style: [{ flex: 1 }, style], children: [
+    header ? /* @__PURE__ */ jsx53(View40, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ jsx53(View40, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    /* @__PURE__ */ jsxs33(View40, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsxs33(
+        View40,
         {
           style: { flex: 1 },
           children: [
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53(
               ChatMessageList,
               {
                 ref: listRef,
@@ -8061,6 +8462,7 @@ function ChatPage({
                 renderMessageContent,
                 onRetryMessage,
                 isRetryingMessage,
+                onAttachmentLoadError,
                 onNearBottomChange,
                 bottomInset
               }
@@ -8069,8 +8471,8 @@ function ChatPage({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs32(
-        View39,
+      /* @__PURE__ */ jsxs33(
+        View40,
         {
           style: {
             position: "absolute",
@@ -8082,15 +8484,15 @@ function ChatPage({
             paddingBottom: footerBottomPadding
           },
           children: [
-            composerTop ? /* @__PURE__ */ jsx52(
-              View39,
+            composerTop ? /* @__PURE__ */ jsx53(
+              View40,
               {
                 style: { marginBottom: theme.spacing.sm },
                 onLayout: (e) => setComposerTopHeight(e.nativeEvent.layout.height),
                 children: composerTop
               }
             ) : null,
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53(
               ChatComposer,
               {
                 ...composer,
@@ -8106,15 +8508,15 @@ function ChatPage({
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
-import * as React41 from "react";
-import { Pressable as Pressable16, View as View40 } from "react-native";
-import Animated11, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle2, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import * as React42 from "react";
+import { Pressable as Pressable17, View as View41 } from "react-native";
+import Animated12, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle2, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = useSharedValue2(visible ? 1 : 0);
-  const [pressed, setPressed] = React41.useState(false);
-  React41.useEffect(() => {
+  const [pressed, setPressed] = React42.useState(false);
+  React42.useEffect(() => {
     progress.value = withTiming2(visible ? 1 : 0, { duration: 200, easing: Easing2.out(Easing2.ease) });
   }, [progress, visible]);
   const animStyle = useAnimatedStyle2(() => ({
@@ -8123,8 +8525,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
   }));
   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__ */ jsx53(
-    Animated11.View,
+  return /* @__PURE__ */ jsx54(
+    Animated12.View,
     {
       pointerEvents: visible ? "auto" : "none",
       style: [
@@ -8137,8 +8539,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         style,
         animStyle
       ],
-      children: /* @__PURE__ */ jsx53(
-        View40,
+      children: /* @__PURE__ */ jsx54(
+        View41,
         {
           style: {
             width: 44,
@@ -8156,8 +8558,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             elevation: 5,
             opacity: pressed ? 0.85 : 1
           },
-          children: /* @__PURE__ */ jsx53(
-            Pressable16,
+          children: /* @__PURE__ */ jsx54(
+            Pressable17,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -8174,16 +8576,16 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-import { StyleSheet as StyleSheet4 } from "react-native";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet5 } from "react-native";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = StyleSheet4.flatten([
+  const flattenedStyle = StyleSheet5.flatten([
     {
       paddingTop: 0
     },
     style
   ]);
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     StudioSheetHeader,
     {
       left,
@@ -8195,13 +8597,13 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-import { View as View42 } from "react-native";
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { View as View43 } from "react-native";
+import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
   const resolvedTitle = title ?? (isOwner ? "Remixed app" : "Remix app");
   const resolvedDescription = description ?? (isOwner ? "Any changes you make will be a remix of the original app. You can view the edited version in the Remix tab in your apps page." : "Once you make edits, this remixed version will appear on your Remixed apps page.");
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     Card,
     {
       variant: "surfaceRaised",
@@ -8216,8 +8618,8 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ jsxs33(View42, { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsxs34(View43, { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx56(
           Text,
           {
             style: {
@@ -8231,7 +8633,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
             children: resolvedTitle
           }
         ),
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56(
           Text,
           {
             style: {
@@ -8249,16 +8651,16 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 }
 
 // src/components/chat/ChatQueue.tsx
-import * as React42 from "react";
-import { ActivityIndicator as ActivityIndicator9, Pressable as Pressable17, View as View43 } from "react-native";
-import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
+import * as React43 from "react";
+import { ActivityIndicator as ActivityIndicator9, Pressable as Pressable18, View as View44 } from "react-native";
+import { jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
 function ChatQueue({ items, onRemove }) {
   const theme = useTheme();
-  const [expanded, setExpanded] = React42.useState({});
-  const [canExpand, setCanExpand] = React42.useState({});
-  const [collapsedText, setCollapsedText] = React42.useState({});
-  const [removing, setRemoving] = React42.useState({});
-  const buildCollapsedText = React42.useCallback((lines) => {
+  const [expanded, setExpanded] = React43.useState({});
+  const [canExpand, setCanExpand] = React43.useState({});
+  const [collapsedText, setCollapsedText] = React43.useState({});
+  const [removing, setRemoving] = React43.useState({});
+  const buildCollapsedText = React43.useCallback((lines) => {
     var _a, _b;
     const line1 = ((_a = lines[0]) == null ? void 0 : _a.text) ?? "";
     const line2 = ((_b = lines[1]) == null ? void 0 : _b.text) ?? "";
@@ -8274,7 +8676,7 @@ function ChatQueue({ items, onRemove }) {
     return `${line1}
 ${trimmedLine2}\u2026 `;
   }, []);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (items.length === 0) return;
     const ids = new Set(items.map((item) => item.id));
     setExpanded((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
@@ -8283,8 +8685,8 @@ ${trimmedLine2}\u2026 `;
     setRemoving((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
   }, [items]);
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs34(
-    View43,
+  return /* @__PURE__ */ jsxs35(
+    View44,
     {
       style: {
         borderWidth: 1,
@@ -8295,16 +8697,16 @@ ${trimmedLine2}\u2026 `;
         backgroundColor: "transparent"
       },
       children: [
-        /* @__PURE__ */ jsx56(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
-        /* @__PURE__ */ jsx56(View43, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
+        /* @__PURE__ */ jsx57(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
+        /* @__PURE__ */ jsx57(View44, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
           const isExpanded = Boolean(expanded[item.id]);
           const showToggle = Boolean(canExpand[item.id]);
           const prompt = item.prompt ?? "";
           const moreLabel = "more";
           const displayPrompt = !isExpanded && showToggle && collapsedText[item.id] ? collapsedText[item.id] : prompt;
           const isRemoving = Boolean(removing[item.id]);
-          return /* @__PURE__ */ jsxs34(
-            View43,
+          return /* @__PURE__ */ jsxs35(
+            View44,
             {
               style: {
                 flexDirection: "row",
@@ -8316,8 +8718,8 @@ ${trimmedLine2}\u2026 `;
                 backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.8 : 0.9)
               },
               children: [
-                /* @__PURE__ */ jsxs34(View43, { style: { flex: 1 }, children: [
-                  !canExpand[item.id] ? /* @__PURE__ */ jsx56(
+                /* @__PURE__ */ jsxs35(View44, { style: { flex: 1 }, children: [
+                  !canExpand[item.id] ? /* @__PURE__ */ jsx57(
                     Text,
                     {
                       style: { position: "absolute", opacity: 0, zIndex: -1, width: "100%" },
@@ -8336,14 +8738,14 @@ ${trimmedLine2}\u2026 `;
                       children: prompt
                     }
                   ) : null,
-                  /* @__PURE__ */ jsxs34(
+                  /* @__PURE__ */ jsxs35(
                     Text,
                     {
                       variant: "bodyMuted",
                       numberOfLines: isExpanded ? void 0 : 2,
                       children: [
                         displayPrompt,
-                        !isExpanded && showToggle ? /* @__PURE__ */ jsx56(
+                        !isExpanded && showToggle ? /* @__PURE__ */ jsx57(
                           Text,
                           {
                             color: theme.colors.text,
@@ -8355,18 +8757,18 @@ ${trimmedLine2}\u2026 `;
                       ]
                     }
                   ),
-                  showToggle && isExpanded ? /* @__PURE__ */ jsx56(
-                    Pressable17,
+                  showToggle && isExpanded ? /* @__PURE__ */ jsx57(
+                    Pressable18,
                     {
                       onPress: () => setExpanded((prev) => ({ ...prev, [item.id]: false })),
                       hitSlop: 6,
                       style: { alignSelf: "flex-start", marginTop: 4 },
-                      children: /* @__PURE__ */ jsx56(Text, { variant: "captionMuted", color: theme.colors.text, children: "less" })
+                      children: /* @__PURE__ */ jsx57(Text, { variant: "captionMuted", color: theme.colors.text, children: "less" })
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ jsx56(
-                  Pressable17,
+                /* @__PURE__ */ jsx57(
+                  Pressable18,
                   {
                     onPress: () => {
                       if (!onRemove || isRemoving) return;
@@ -8381,7 +8783,7 @@ ${trimmedLine2}\u2026 `;
                     },
                     hitSlop: 8,
                     style: { alignSelf: "center" },
-                    children: isRemoving ? /* @__PURE__ */ jsx56(ActivityIndicator9, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ jsx56(IconClose, { size: 14, colorToken: "text" })
+                    children: isRemoving ? /* @__PURE__ */ jsx57(ActivityIndicator9, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ jsx57(IconClose, { size: 14, colorToken: "text" })
                   }
                 )
               ]
@@ -8395,15 +8797,15 @@ ${trimmedLine2}\u2026 `;
 }
 
 // src/components/chat/AgentProgressCard.tsx
-import { View as View44 } from "react-native";
+import { View as View45 } from "react-native";
 
 // src/components/icons/RemixXLoopLottie.tsx
 import LottieView from "lottie-react-native";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var remixXLoopSource = require_remix_x_loop_lottie();
 var Lottie = LottieView;
 function RemixXLoopLottie({ size = 24, style }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Lottie,
     {
       source: remixXLoopSource,
@@ -8415,7 +8817,7 @@ function RemixXLoopLottie({ size = 24, style }) {
 }
 
 // src/components/chat/AgentProgressCard.tsx
-import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
 function titleForPhase(phase) {
   if (phase === "planning") return "Planning";
   if (phase === "reasoning") return "Reasoning";
@@ -8440,8 +8842,8 @@ function AgentProgressCard({ progress }) {
   const showAnimatedStatusIcon = progress.status === "running";
   const subtitle = progress.latestMessage || `Agent is ${phaseLabel.toLowerCase()}...`;
   const todo = progress.todoSummary;
-  return /* @__PURE__ */ jsxs35(
-    View44,
+  return /* @__PURE__ */ jsxs36(
+    View45,
     {
       style: {
         borderWidth: 1,
@@ -8452,23 +8854,23 @@ function AgentProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ jsxs35(View44, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
-          /* @__PURE__ */ jsx58(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ jsxs35(View44, { style: { flexDirection: "row", alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx58(Text, { variant: "captionMuted", children: phaseLabel }),
-            showAnimatedStatusIcon ? /* @__PURE__ */ jsx58(RemixXLoopLottie, { size: 20, style: { marginLeft: 8 } }) : null
+        /* @__PURE__ */ jsxs36(View45, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+          /* @__PURE__ */ jsx59(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ jsxs36(View45, { style: { flexDirection: "row", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx59(Text, { variant: "captionMuted", children: phaseLabel }),
+            showAnimatedStatusIcon ? /* @__PURE__ */ jsx59(RemixXLoopLottie, { size: 20, style: { marginLeft: 8 } }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx58(Text, { variant: "bodyMuted", children: subtitle }),
-        progress.changedFilesCount > 0 ? /* @__PURE__ */ jsxs35(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        /* @__PURE__ */ jsx59(Text, { variant: "bodyMuted", children: subtitle }),
+        progress.changedFilesCount > 0 ? /* @__PURE__ */ jsxs36(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Updated files: ",
           progress.changedFilesCount
         ] }) : null,
-        progress.recentFiles.length > 0 ? /* @__PURE__ */ jsx58(View44, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ jsxs35(Text, { variant: "captionMuted", numberOfLines: 1, children: [
+        progress.recentFiles.length > 0 ? /* @__PURE__ */ jsx59(View45, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ jsxs36(Text, { variant: "captionMuted", numberOfLines: 1, children: [
           "\u2022 ",
           path
         ] }, path)) }) : null,
-        todo ? /* @__PURE__ */ jsxs35(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        todo ? /* @__PURE__ */ jsxs36(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Todos: ",
           todo.completed,
           "/",
@@ -8482,8 +8884,8 @@ function AgentProgressCard({ progress }) {
 }
 
 // src/components/chat/BundleProgressCard.tsx
-import { View as View45 } from "react-native";
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { View as View46 } from "react-native";
+import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 function titleForStatus2(status) {
   if (status === "succeeded") return "Completed";
   if (status === "failed") return "Failed";
@@ -8495,8 +8897,8 @@ function BundleProgressCard({ progress }) {
   const percent = Math.round(Math.max(0, Math.min(1, progress.progressValue)) * 100);
   const fillColor = progress.status === "failed" ? theme.colors.danger : progress.status === "succeeded" ? theme.colors.success : theme.colors.warning;
   const detail = progress.errorMessage || progress.phaseLabel;
-  return /* @__PURE__ */ jsxs36(
-    View45,
+  return /* @__PURE__ */ jsxs37(
+    View46,
     {
       accessible: true,
       accessibilityRole: "progressbar",
@@ -8511,15 +8913,15 @@ function BundleProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ jsxs36(View45, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
-          /* @__PURE__ */ jsx59(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ jsxs36(Text, { variant: "captionMuted", children: [
+        /* @__PURE__ */ jsxs37(View46, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx60(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ jsxs37(Text, { variant: "captionMuted", children: [
             percent,
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ jsx59(
-          View45,
+        /* @__PURE__ */ jsx60(
+          View46,
           {
             style: {
               width: "100%",
@@ -8528,8 +8930,8 @@ function BundleProgressCard({ progress }) {
               backgroundColor: withAlpha(theme.colors.border, theme.scheme === "dark" ? 0.5 : 0.6),
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx59(
-              View45,
+            children: /* @__PURE__ */ jsx60(
+              View46,
               {
                 style: {
                   width: `${percent}%`,
@@ -8540,14 +8942,14 @@ function BundleProgressCard({ progress }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx59(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
+        /* @__PURE__ */ jsx60(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
       ]
     }
   );
 }
 
 // src/studio/ui/ChatPanel.tsx
-import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 function ChatPanel({
   title = "Chat",
   messages,
@@ -8567,14 +8969,15 @@ function ChatPanel({
   onSend,
   onRetryMessage,
   isRetryingMessage,
+  onAttachmentLoadError,
   queueItems = [],
   onRemoveQueueItem,
   progress = null
 }) {
   const theme = useTheme();
-  const listRef = React43.useRef(null);
-  const [nearBottom, setNearBottom] = React43.useState(true);
-  const handleSend = React43.useCallback(
+  const listRef = React44.useRef(null);
+  const [nearBottom, setNearBottom] = React44.useState(true);
+  const handleSend = React44.useCallback(
     async (text, composerAttachments) => {
       const all = composerAttachments ?? attachments;
       await onSend(text, all.length > 0 ? all : void 0);
@@ -8588,25 +8991,25 @@ function ChatPanel({
     },
     [attachments, nearBottom, onClearAttachments, onSend]
   );
-  const handleScrollToBottom = React43.useCallback(() => {
+  const handleScrollToBottom = React44.useCallback(() => {
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
-  const header = /* @__PURE__ */ jsx60(
+  const header = /* @__PURE__ */ jsx61(
     ChatHeader,
     {
-      left: /* @__PURE__ */ jsxs37(View46, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx60(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx60(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ jsx60(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ jsx60(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+      left: /* @__PURE__ */ jsxs38(View47, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx61(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx61(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ jsx61(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ jsx61(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ jsxs37(View46, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ jsx60(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx60(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ jsx60(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ jsx60(IconClose, { size: 20, colorToken: "floatingContent" }) })
+      right: /* @__PURE__ */ jsxs38(View47, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        onStartDraw ? /* @__PURE__ */ jsx61(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx61(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ jsx61(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ jsx61(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ jsx60(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ jsx61(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -8615,22 +9018,22 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ jsxs37(View46, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx60(View46, { children: header }),
-      topBanner ? /* @__PURE__ */ jsx60(View46, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ jsxs37(View46, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ jsx60(ActivityIndicator10, {}),
-        /* @__PURE__ */ jsx60(View46, { style: { height: 12 } }),
-        /* @__PURE__ */ jsx60(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
+    return /* @__PURE__ */ jsxs38(View47, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx61(View47, { children: header }),
+      topBanner ? /* @__PURE__ */ jsx61(View47, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ jsxs38(View47, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ jsx61(ActivityIndicator10, {}),
+        /* @__PURE__ */ jsx61(View47, { style: { height: 12 } }),
+        /* @__PURE__ */ jsx61(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
       ] })
     ] });
   }
   const bundleProgress = (progress == null ? void 0 : progress.bundle) ?? null;
-  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ jsxs37(View46, { style: { gap: theme.spacing.sm }, children: [
-    progress ? bundleProgress ? /* @__PURE__ */ jsx60(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ jsx60(AgentProgressCard, { progress }) : null,
-    !progress && queueItems.length > 0 ? /* @__PURE__ */ jsx60(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
+  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ jsxs38(View47, { style: { gap: theme.spacing.sm }, children: [
+    progress ? bundleProgress ? /* @__PURE__ */ jsx61(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ jsx61(AgentProgressCard, { progress }) : null,
+    !progress && queueItems.length > 0 ? /* @__PURE__ */ jsx61(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
   ] }) : null;
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     ChatPage,
     {
       header,
@@ -8638,18 +9041,19 @@ function ChatPanel({
       showTypingIndicator,
       onRetryMessage,
       isRetryingMessage,
+      onAttachmentLoadError,
       topBanner,
       composerTop: queueTop,
       composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ jsx60(
+      overlay: /* @__PURE__ */ jsx61(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ jsx60(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ jsx61(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -8669,9 +9073,9 @@ function ChatPanel({
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-import * as React44 from "react";
-import { Pressable as Pressable18, View as View47 } from "react-native";
-import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
+import * as React45 from "react";
+import { Pressable as Pressable19, View as View48 } from "react-native";
+import { jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -8682,14 +9086,14 @@ function ConfirmMergeRequestDialog({
   onTestFirst
 }) {
   const theme = useTheme();
-  const close = React44.useCallback(() => onOpenChange(false), [onOpenChange]);
+  const close = React45.useCallback(() => onOpenChange(false), [onOpenChange]);
   const canConfirm = Boolean(mergeRequest) && !approveDisabled;
-  const handleConfirm = React44.useCallback(() => {
+  const handleConfirm = React45.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onConfirm();
   }, [mergeRequest, onConfirm, onOpenChange]);
-  const handleTestFirst = React44.useCallback(() => {
+  const handleTestFirst = React45.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onTestFirst(mergeRequest);
@@ -8701,7 +9105,7 @@ function ConfirmMergeRequestDialog({
     justifyContent: "center",
     alignSelf: "stretch"
   };
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     Modal,
     {
       visible,
@@ -8712,7 +9116,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ jsx61(View47, { children: /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(View48, { children: /* @__PURE__ */ jsx62(
           Text,
           {
             style: {
@@ -8724,9 +9128,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ jsxs38(View47, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx61(
-            View47,
+        /* @__PURE__ */ jsxs39(View48, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ jsx62(
+            View48,
             {
               style: [
                 fullWidthButtonBase,
@@ -8735,22 +9139,22 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ jsx61(
-                Pressable18,
+              children: /* @__PURE__ */ jsx62(
+                Pressable19,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx61(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ jsx62(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx61(View47, { style: { height: 8 } }),
-          /* @__PURE__ */ jsx61(
-            View47,
+          /* @__PURE__ */ jsx62(View48, { style: { height: 8 } }),
+          /* @__PURE__ */ jsx62(
+            View48,
             {
               style: [
                 fullWidthButtonBase,
@@ -8761,22 +9165,22 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ jsx61(
-                Pressable18,
+              children: /* @__PURE__ */ jsx62(
+                Pressable19,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx61(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ jsx62(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx61(View47, { style: { height: 8 } }),
-          /* @__PURE__ */ jsx61(
-            View47,
+          /* @__PURE__ */ jsx62(View48, { style: { height: 8 } }),
+          /* @__PURE__ */ jsx62(
+            View48,
             {
               style: [
                 fullWidthButtonBase,
@@ -8786,14 +9190,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ jsx61(
-                Pressable18,
+              children: /* @__PURE__ */ jsx62(
+                Pressable19,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx61(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ jsx62(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -8805,7 +9209,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -8816,7 +9220,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -8838,7 +9242,8 @@ function ConfirmMergeFlow({
 }
 
 // src/studio/hooks/useOptimisticChatMessages.ts
-import * as React45 from "react";
+import * as React46 from "react";
+import { Image as Image5 } from "react-native";
 function makeOptimisticId() {
   return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -8849,6 +9254,28 @@ function toEpochMs2(createdAt) {
   const t = Date.parse(String(createdAt));
   return Number.isFinite(t) ? t : 0;
 }
+async function resolveAttachmentDimensions(uris) {
+  return Promise.all(
+    uris.map(
+      async (uri) => {
+        try {
+          const { width, height } = await new Promise((resolve, reject) => {
+            Image5.getSize(
+              uri,
+              (w, h) => resolve({ width: w, height: h }),
+              (err) => reject(err)
+            );
+          });
+          if (width > 0 && height > 0) {
+            return { uri, width: Math.round(width), height: Math.round(height) };
+          }
+        } catch {
+        }
+        return { uri };
+      }
+    )
+  );
+}
 function isOptimisticResolvedByServer(chatMessages, o) {
   if (o.failed) return false;
   const normalize = (s) => s.trim();
@@ -8877,11 +9304,11 @@ function useOptimisticChatMessages({
   chatMessages,
   onSendChat
 }) {
-  const [optimisticChat, setOptimisticChat] = React45.useState([]);
-  React45.useEffect(() => {
+  const [optimisticChat, setOptimisticChat] = React46.useState([]);
+  React46.useEffect(() => {
     setOptimisticChat([]);
   }, [threadId]);
-  const messages = React45.useMemo(() => {
+  const messages = React46.useMemo(() => {
     if (!optimisticChat || optimisticChat.length === 0) return chatMessages;
     const unresolved = optimisticChat.filter((o) => !isOptimisticResolvedByServer(chatMessages, o));
     if (unresolved.length === 0) return chatMessages;
@@ -8891,13 +9318,22 @@ function useOptimisticChatMessages({
       content: o.content,
       createdAt: o.createdAtIso,
       kind: "optimistic",
+      attachments: (o.attachments ?? []).map((attachment, index) => ({
+        id: `${o.id}:attachment:${index}`,
+        name: `attachment-${index + 1}.png`,
+        mimeType: "image/png",
+        size: 1,
+        uri: attachment.uri,
+        width: attachment.width,
+        height: attachment.height
+      })),
       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]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     if (optimisticChat.length === 0) return;
     setOptimisticChat((prev) => {
       if (prev.length === 0) return prev;
@@ -8905,7 +9341,7 @@ function useOptimisticChatMessages({
       return next.length === prev.length ? prev : next;
     });
   }, [chatMessages, optimisticChat.length]);
-  const onSend = React45.useCallback(
+  const onSend = React46.useCallback(
     async (text, attachments) => {
       if (disableOptimistic) {
         await onSendChat(text, attachments);
@@ -8914,7 +9350,7 @@ function useOptimisticChatMessages({
       const createdAtIso = (/* @__PURE__ */ new Date()).toISOString();
       const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1].id : null;
       const id = makeOptimisticId();
-      const normalizedAttachments = attachments && attachments.length > 0 ? [...attachments] : void 0;
+      const normalizedAttachments = attachments && attachments.length > 0 ? await resolveAttachmentDimensions(attachments) : void 0;
       setOptimisticChat((prev) => [
         ...prev,
         {
@@ -8933,8 +9369,9 @@ function useOptimisticChatMessages({
     },
     [chatMessages, disableOptimistic, onSendChat]
   );
-  const onRetry = React45.useCallback(
+  const onRetry = React46.useCallback(
     async (messageId) => {
+      var _a;
       if (disableOptimistic) return;
       const target = optimisticChat.find((m) => m.id === messageId);
       if (!target || target.retrying) return;
@@ -8945,7 +9382,10 @@ function useOptimisticChatMessages({
         )
       );
       try {
-        await onSendChat(target.content, target.attachments);
+        await onSendChat(
+          target.content,
+          (_a = target.attachments) == null ? void 0 : _a.map((att) => att.uri)
+        );
         setOptimisticChat(
           (prev) => prev.map((m) => m.id === messageId ? { ...m, retrying: false } : m)
         );
@@ -8957,7 +9397,7 @@ function useOptimisticChatMessages({
     },
     [chatMessages, disableOptimistic, onSendChat, optimisticChat]
   );
-  const isRetrying = React45.useCallback(
+  const isRetrying = React46.useCallback(
     (messageId) => {
       return optimisticChat.some((m) => m.id === messageId && m.retrying);
     },
@@ -8974,24 +9414,24 @@ import {
 
 // src/components/icons/RemixUpIcon.tsx
 import Svg3, { Path as Path3 } from "react-native-svg";
-import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 function RemixUpIcon({ width = 24, height = 24, ...props }) {
-  return /* @__PURE__ */ jsxs39(Svg3, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
-    /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsxs40(Svg3, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx64(
       Path3,
       {
         d: "M34.706 7.62939e-05L34.7656 2.28882e-05L21.44 13.2661L0 34.8401L13.266 48.1061L34.706 26.5321L21.44 13.2661L34.706 7.62939e-05Z",
         fill: "#00CBC0"
       }
     ),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx64(
       Path3,
       {
         d: "M47.972 13.266L34.7656 2.28882e-05L34.706 7.62939e-05L47.972 13.266L34.706 26.5321L56.28 48.106L69.546 34.84L47.972 13.266Z",
         fill: "#FF1820"
       }
     ),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx64(
       Path3,
       {
         d: "M34.7656 2.28882e-05L21.44 13.2661L34.706 26.5321L47.972 13.266L34.7656 2.28882e-05Z",
@@ -9002,7 +9442,7 @@ function RemixUpIcon({ width = 24, height = 24, ...props }) {
 }
 
 // src/studio/ui/StudioOverlay.tsx
-import { Fragment as Fragment7, jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -9033,6 +9473,7 @@ function StudioOverlay({
   chatSending,
   chatShowTypingIndicator,
   onSendChat,
+  onChatAttachmentLoadError,
   chatQueueItems,
   onRemoveQueueItem,
   chatProgress,
@@ -9046,15 +9487,15 @@ function StudioOverlay({
   onSwitchRelatedApp
 }) {
   const theme = useTheme();
-  const { width } = useWindowDimensions4();
-  const [sheetOpen, setSheetOpen] = React46.useState(false);
-  const sheetOpenRef = React46.useRef(sheetOpen);
-  const pendingNavigateHomeRef = React46.useRef(false);
-  const [activePage, setActivePage] = React46.useState("preview");
-  const [drawing, setDrawing] = React46.useState(false);
-  const [chatAttachments, setChatAttachments] = React46.useState([]);
-  const [commentsAppId, setCommentsAppId] = React46.useState(null);
-  const [commentsCount, setCommentsCount] = React46.useState(null);
+  const { width } = useWindowDimensions5();
+  const [sheetOpen, setSheetOpen] = React47.useState(false);
+  const sheetOpenRef = React47.useRef(sheetOpen);
+  const pendingNavigateHomeRef = React47.useRef(false);
+  const [activePage, setActivePage] = React47.useState("preview");
+  const [drawing, setDrawing] = React47.useState(false);
+  const [chatAttachments, setChatAttachments] = React47.useState([]);
+  const [commentsAppId, setCommentsAppId] = React47.useState(null);
+  const [commentsCount, setCommentsCount] = React47.useState(null);
   const threadId = (app == null ? void 0 : app.threadId) ?? null;
   const isForking = chatForking || (app == null ? void 0 : app.status) === "forking";
   const isBubbleLoading = (app == null ? void 0 : app.status) === "editing" || isBaseBundleDownloading;
@@ -9067,24 +9508,24 @@ function StudioOverlay({
     chatMessages,
     onSendChat
   });
-  const [confirmMrId, setConfirmMrId] = React46.useState(null);
-  const confirmMr = React46.useMemo(
+  const [confirmMrId, setConfirmMrId] = React47.useState(null);
+  const confirmMr = React47.useMemo(
     () => confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null,
     [confirmMrId, incomingMergeRequests]
   );
-  const handleSheetOpenChange = React46.useCallback((open) => {
+  const handleSheetOpenChange = React47.useCallback((open) => {
     setSheetOpen(open);
     if (!open) Keyboard5.dismiss();
   }, []);
-  const closeSheet = React46.useCallback(() => {
+  const closeSheet = React47.useCallback(() => {
     handleSheetOpenChange(false);
   }, [handleSheetOpenChange]);
-  const openSheet = React46.useCallback(() => setSheetOpen(true), []);
-  const goToChat = React46.useCallback(() => {
+  const openSheet = React47.useCallback(() => setSheetOpen(true), []);
+  const goToChat = React47.useCallback(() => {
     setActivePage("chat");
     openSheet();
   }, [openSheet]);
-  const backToPreview = React46.useCallback(() => {
+  const backToPreview = React47.useCallback(() => {
     if (Platform11.OS !== "ios") {
       Keyboard5.dismiss();
       setActivePage("preview");
@@ -9102,11 +9543,11 @@ function StudioOverlay({
     const t = setTimeout(finalize, 350);
     Keyboard5.dismiss();
   }, []);
-  const startDraw = React46.useCallback(() => {
+  const startDraw = React47.useCallback(() => {
     setDrawing(true);
     closeSheet();
   }, [closeSheet]);
-  const handleDrawCapture = React46.useCallback(
+  const handleDrawCapture = React47.useCallback(
     (dataUrl) => {
       setChatAttachments((prev) => [...prev, dataUrl]);
       setDrawing(false);
@@ -9115,7 +9556,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React46.useCallback(async () => {
+  const toggleSheet = React47.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -9127,7 +9568,7 @@ function StudioOverlay({
       closeSheet();
     }
   }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
-  const handleTestMr = React46.useCallback(
+  const handleTestMr = React47.useCallback(
     async (mr) => {
       if (!onTestMr) return;
       await onTestMr(mr);
@@ -9135,7 +9576,7 @@ function StudioOverlay({
     },
     [closeSheet, onTestMr]
   );
-  const handleNavigateHome = React46.useCallback(() => {
+  const handleNavigateHome = React47.useCallback(() => {
     if (!onNavigateHome) return;
     if (Platform11.OS !== "android") {
       onNavigateHome();
@@ -9152,7 +9593,7 @@ function StudioOverlay({
     setActivePage("preview");
     closeSheet();
   }, [closeSheet, onNavigateHome]);
-  const handleSheetDismiss = React46.useCallback(() => {
+  const handleSheetDismiss = React47.useCallback(() => {
     if (Platform11.OS !== "android") return;
     if (!pendingNavigateHomeRef.current) return;
     pendingNavigateHomeRef.current = false;
@@ -9160,21 +9601,21 @@ function StudioOverlay({
       onNavigateHome == null ? void 0 : onNavigateHome();
     });
   }, [onNavigateHome]);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     if (!sheetOpen) {
       return;
     }
     pendingNavigateHomeRef.current = false;
   }, [sheetOpen]);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     return () => {
       pendingNavigateHomeRef.current = false;
     };
   }, []);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     sheetOpenRef.current = sheetOpen;
   }, [sheetOpen]);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     const poller = startStudioControlPolling((action) => {
       if (action === "show" && !sheetOpenRef.current) openSheet();
       if (action === "hide" && sheetOpenRef.current) closeSheet();
@@ -9182,17 +9623,17 @@ function StudioOverlay({
     }, studioControlOptions);
     return () => poller.stop();
   }, [closeSheet, openSheet, studioControlOptions, toggleSheet]);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     void publishComergeStudioUIState(sheetOpen, studioControlOptions);
   }, [sheetOpen, studioControlOptions]);
-  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
-    /* @__PURE__ */ jsx64(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ jsx64(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, onDismiss: handleSheetDismiss, children: /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs41(Fragment8, { children: [
+    /* @__PURE__ */ jsx65(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ jsx65(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, onDismiss: handleSheetDismiss, children: /* @__PURE__ */ jsx65(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ jsx64(
+        preview: /* @__PURE__ */ jsx65(
           PreviewPanel,
           {
             app,
@@ -9226,7 +9667,7 @@ function StudioOverlay({
             onSwitchRelatedApp
           }
         ),
-        chat: /* @__PURE__ */ jsx64(
+        chat: /* @__PURE__ */ jsx65(
           ChatPanel,
           {
             messages: optimistic.messages,
@@ -9246,6 +9687,7 @@ function StudioOverlay({
             onSend: optimistic.onSend,
             onRetryMessage: optimistic.onRetry,
             isRetryingMessage: optimistic.isRetrying,
+            onAttachmentLoadError: onChatAttachmentLoadError,
             queueItems: queueItemsForChat,
             onRemoveQueueItem,
             progress: chatProgress
@@ -9253,7 +9695,7 @@ function StudioOverlay({
         )
       }
     ) }),
-    showBubble && /* @__PURE__ */ jsx64(
+    showBubble && /* @__PURE__ */ jsx65(
       Bubble,
       {
         visible: !sheetOpen && !drawing,
@@ -9262,10 +9704,10 @@ function StudioOverlay({
         onPress: toggleSheet,
         isLoading: isBubbleLoading,
         loadingBorderTone: isBaseBundleDownloading ? "warning" : "default",
-        children: /* @__PURE__ */ jsx64(View48, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: isBubbleLoading ? /* @__PURE__ */ jsx64(RemixXLoopLottie, { size: 24 }) : /* @__PURE__ */ jsx64(RemixUpIcon, { width: 24, height: 24 }) })
+        children: /* @__PURE__ */ jsx65(View49, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: isBubbleLoading ? /* @__PURE__ */ jsx65(RemixXLoopLottie, { size: 24 }) : /* @__PURE__ */ jsx65(RemixUpIcon, { width: 24, height: 24 }) })
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -9274,7 +9716,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -9288,7 +9730,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -9301,7 +9743,7 @@ function StudioOverlay({
 }
 
 // src/studio/hooks/useEditQueue.ts
-import * as React47 from "react";
+import * as React48 from "react";
 
 // src/data/apps/edit-queue/remote.ts
 var EditQueueRemoteDataSourceImpl = class extends BaseRemote {
@@ -9410,17 +9852,17 @@ var editQueueRepository = new EditQueueRepositoryImpl(
 
 // src/studio/hooks/useEditQueue.ts
 function useEditQueue(appId) {
-  const [items, setItems] = React47.useState([]);
-  const [loading, setLoading] = React47.useState(false);
-  const [error, setError] = React47.useState(null);
-  const activeRequestIdRef = React47.useRef(0);
+  const [items, setItems] = React48.useState([]);
+  const [loading, setLoading] = React48.useState(false);
+  const [error, setError] = React48.useState(null);
+  const activeRequestIdRef = React48.useRef(0);
   const foregroundSignal = useForegroundSignal(Boolean(appId));
-  const upsertSorted = React47.useCallback((prev, nextItem) => {
+  const upsertSorted = React48.useCallback((prev, nextItem) => {
     const next = prev.some((x) => x.id === nextItem.id) ? prev.map((x) => x.id === nextItem.id ? nextItem : x) : [...prev, nextItem];
     next.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
     return next;
   }, []);
-  const refetch = React47.useCallback(async () => {
+  const refetch = React48.useCallback(async () => {
     if (!appId) {
       setItems([]);
       return;
@@ -9440,10 +9882,10 @@ function useEditQueue(appId) {
       if (activeRequestIdRef.current === requestId) setLoading(false);
     }
   }, [appId]);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     void refetch();
   }, [refetch]);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (!appId) return;
     const unsubscribe = editQueueRepository.subscribeEditQueue(appId, {
       onInsert: (item) => setItems((prev) => upsertSorted(prev, item)),
@@ -9452,7 +9894,7 @@ function useEditQueue(appId) {
     });
     return unsubscribe;
   }, [appId, upsertSorted, foregroundSignal]);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (!appId) return;
     if (foregroundSignal <= 0) return;
     void refetch();
@@ -9461,16 +9903,16 @@ function useEditQueue(appId) {
 }
 
 // src/studio/hooks/useEditQueueActions.ts
-import * as React48 from "react";
+import * as React49 from "react";
 function useEditQueueActions(appId) {
-  const update = React48.useCallback(
+  const update = React49.useCallback(
     async (queueItemId, payload) => {
       if (!appId) return;
       await editQueueRepository.update(appId, queueItemId, payload);
     },
     [appId]
   );
-  const cancel = React48.useCallback(
+  const cancel = React49.useCallback(
     async (queueItemId) => {
       if (!appId) return;
       await editQueueRepository.cancel(appId, queueItemId);
@@ -9481,7 +9923,7 @@ function useEditQueueActions(appId) {
 }
 
 // src/studio/hooks/useAgentRunProgress.ts
-import * as React49 from "react";
+import * as React50 from "react";
 
 // src/data/agent-progress/repository.ts
 function mapRun(row) {
@@ -9747,23 +10189,23 @@ function deriveView(run, events, nowMs) {
 function useAgentRunProgress(threadId, opts) {
   var _a;
   const enabled = Boolean((opts == null ? void 0 : opts.enabled) ?? true);
-  const [run, setRun] = React49.useState(null);
-  const [events, setEvents] = React49.useState([]);
-  const [loading, setLoading] = React49.useState(false);
-  const [error, setError] = React49.useState(null);
-  const activeRequestIdRef = React49.useRef(0);
-  const lastSeqRef = React49.useRef(0);
-  const runRef = React49.useRef(null);
+  const [run, setRun] = React50.useState(null);
+  const [events, setEvents] = React50.useState([]);
+  const [loading, setLoading] = React50.useState(false);
+  const [error, setError] = React50.useState(null);
+  const activeRequestIdRef = React50.useRef(0);
+  const lastSeqRef = React50.useRef(0);
+  const runRef = React50.useRef(null);
   const foregroundSignal = useForegroundSignal(Boolean(threadId) && enabled);
-  const [bundleTick, setBundleTick] = React49.useState(0);
-  React49.useEffect(() => {
+  const [bundleTick, setBundleTick] = React50.useState(0);
+  React50.useEffect(() => {
     lastSeqRef.current = 0;
     runRef.current = null;
   }, [threadId]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     runRef.current = run;
   }, [run]);
-  const refetch = React49.useCallback(async () => {
+  const refetch = React50.useCallback(async () => {
     if (!threadId || !enabled) {
       setRun(null);
       setEvents([]);
@@ -9799,15 +10241,15 @@ function useAgentRunProgress(threadId, opts) {
       if (activeRequestIdRef.current === requestId) setLoading(false);
     }
   }, [enabled, threadId]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     void refetch();
   }, [refetch]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!threadId || !enabled) return;
     if (foregroundSignal <= 0) return;
     void refetch();
   }, [enabled, foregroundSignal, refetch, threadId]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!threadId || !enabled) return;
     const unsubRuns = agentProgressRepository.subscribeThreadRuns(threadId, {
       onInsert: (nextRun) => {
@@ -9837,7 +10279,7 @@ function useAgentRunProgress(threadId, opts) {
     });
     return unsubRuns;
   }, [enabled, threadId, foregroundSignal]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!enabled || !(run == null ? void 0 : run.id)) return;
     const runId = run.id;
     const processIncoming = (incoming) => {
@@ -9869,8 +10311,8 @@ function useAgentRunProgress(threadId, opts) {
     });
     return unsubscribe;
   }, [enabled, run == null ? void 0 : run.id, foregroundSignal]);
-  const view = React49.useMemo(() => deriveView(run, events, Date.now()), [bundleTick, events, run]);
-  React49.useEffect(() => {
+  const view = React50.useMemo(() => deriveView(run, events, Date.now()), [bundleTick, events, run]);
+  React50.useEffect(() => {
     var _a2;
     if (!((_a2 = view.bundle) == null ? void 0 : _a2.active)) return;
     const interval = setInterval(() => {
@@ -9883,13 +10325,13 @@ function useAgentRunProgress(threadId, opts) {
 }
 
 // src/studio/hooks/useRelatedApps.ts
-import * as React50 from "react";
+import * as React51 from "react";
 function useRelatedApps(appId) {
-  const [relatedApps, setRelatedApps] = React50.useState(null);
-  const [loading, setLoading] = React50.useState(false);
-  const [error, setError] = React50.useState(null);
-  const requestSeqRef = React50.useRef(0);
-  const fetchRelatedApps = React50.useCallback(async () => {
+  const [relatedApps, setRelatedApps] = React51.useState(null);
+  const [loading, setLoading] = React51.useState(false);
+  const [error, setError] = React51.useState(null);
+  const requestSeqRef = React51.useRef(0);
+  const fetchRelatedApps = React51.useCallback(async () => {
     if (!appId) {
       setRelatedApps(null);
       setError(null);
@@ -9915,7 +10357,7 @@ function useRelatedApps(appId) {
       }
     }
   }, [appId]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     void fetchRelatedApps();
   }, [fetchRelatedApps]);
   return {
@@ -9927,7 +10369,7 @@ function useRelatedApps(appId) {
 }
 
 // src/studio/ComergeStudio.tsx
-import { jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
 function ComergeStudio({
   appId,
   clientKey: clientKey2,
@@ -9943,13 +10385,13 @@ function ComergeStudio({
   embeddedBaseBundles,
   onSystemEvent
 }) {
-  const [activeAppId, setActiveAppId] = React51.useState(appId);
-  const [runtimeAppId, setRuntimeAppId] = React51.useState(appId);
-  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React51.useState(null);
-  const didSyncFromHostRef = React51.useRef(false);
-  const lastNotifiedRef = React51.useRef(null);
-  const platform = React51.useMemo(() => RNPlatform.OS === "ios" ? "ios" : "android", []);
-  const notifyActiveAppChanged = React51.useCallback(
+  const [activeAppId, setActiveAppId] = React52.useState(appId);
+  const [runtimeAppId, setRuntimeAppId] = React52.useState(appId);
+  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React52.useState(null);
+  const didSyncFromHostRef = React52.useRef(false);
+  const lastNotifiedRef = React52.useRef(null);
+  const platform = React52.useMemo(() => RNPlatform.OS === "ios" ? "ios" : "android", []);
+  const notifyActiveAppChanged = React52.useCallback(
     (nextAppId, source) => {
       if (!onActiveAppChanged) return;
       const trimmedAppId = nextAppId.trim();
@@ -9962,28 +10404,28 @@ function ComergeStudio({
     },
     [appKey, onActiveAppChanged]
   );
-  const setActiveAppIdWithSource = React51.useCallback(
+  const setActiveAppIdWithSource = React52.useCallback(
     (nextAppId, source) => {
       setActiveAppId(nextAppId);
       notifyActiveAppChanged(nextAppId, source);
     },
     [notifyActiveAppChanged]
   );
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     const source = didSyncFromHostRef.current ? "host_route_sync" : "initial";
     didSyncFromHostRef.current = true;
     setActiveAppIdWithSource(appId, source);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId, setActiveAppIdWithSource]);
-  const captureTargetRef = React51.useRef(null);
-  return /* @__PURE__ */ jsx65(
+  const captureTargetRef = React52.useRef(null);
+  return /* @__PURE__ */ jsx66(
     StudioBootstrap,
     {
       clientKey: clientKey2,
       analyticsEnabled,
-      fallback: /* @__PURE__ */ jsx65(View49, { style: { flex: 1 } }),
-      children: ({ userId }) => /* @__PURE__ */ jsx65(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx65(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ jsx65(
+      fallback: /* @__PURE__ */ jsx66(View50, { style: { flex: 1 } }),
+      children: ({ userId }) => /* @__PURE__ */ jsx66(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx66(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ jsx66(
         ComergeStudioInner,
         {
           userId,
@@ -10033,11 +10475,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 = React51.useRef(false);
-  React51.useEffect(() => {
+  const sawEditingOnPendingTargetRef = React52.useRef(false);
+  React52.useEffect(() => {
     sawEditingOnPendingTargetRef.current = false;
   }, [pendingRuntimeTargetAppId]);
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     if (!pendingRuntimeTargetAppId) return;
     if (activeAppId !== pendingRuntimeTargetAppId) return;
     if ((app == null ? void 0 : app.status) === "editing") {
@@ -10055,13 +10497,13 @@ function ComergeStudioInner({
     canRequestLatest: (runtimeApp == null ? void 0 : runtimeApp.status) === "ready",
     embeddedBaseBundles
   });
-  const sawEditingOnActiveAppRef = React51.useRef(false);
-  const [showPostEditPreparing, setShowPostEditPreparing] = React51.useState(false);
-  React51.useEffect(() => {
+  const sawEditingOnActiveAppRef = React52.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React52.useState(false);
+  React52.useEffect(() => {
     sawEditingOnActiveAppRef.current = false;
     setShowPostEditPreparing(false);
   }, [activeAppId]);
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     if (app.status === "editing") {
       sawEditingOnActiveAppRef.current = true;
@@ -10073,7 +10515,7 @@ function ComergeStudioInner({
       sawEditingOnActiveAppRef.current = false;
     }
   }, [app == null ? void 0 : app.id, app == null ? void 0 : app.status]);
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     if (!showPostEditPreparing) return;
     const stillProcessingBaseBundle = bundle.loading && bundle.loadingMode === "base" && !bundle.isTesting;
     if (!stillProcessingBaseBundle) {
@@ -10085,19 +10527,19 @@ function ComergeStudioInner({
   const editQueue = useEditQueue(activeAppId);
   const agentProgress = useAgentRunProgress(threadId, { enabled: enableAgentProgress });
   const editQueueActions = useEditQueueActions(activeAppId);
-  const [lastEditQueueInfo, setLastEditQueueInfo] = React51.useState(null);
-  const lastEditQueueInfoRef = React51.useRef(null);
-  const [suppressQueueUntilResponse, setSuppressQueueUntilResponse] = React51.useState(false);
+  const [lastEditQueueInfo, setLastEditQueueInfo] = React52.useState(null);
+  const lastEditQueueInfoRef = React52.useRef(null);
+  const [suppressQueueUntilResponse, setSuppressQueueUntilResponse] = React52.useState(false);
   const mergeRequests = useMergeRequests({ appId: activeAppId });
-  const hasOpenOutgoingMr = React51.useMemo(() => {
+  const hasOpenOutgoingMr = React52.useMemo(() => {
     return mergeRequests.lists.outgoing.some((mr) => mr.status === "open");
   }, [mergeRequests.lists.outgoing]);
-  const incomingReviewMrs = React51.useMemo(() => {
+  const incomingReviewMrs = React52.useMemo(() => {
     if (!userId) return mergeRequests.lists.incoming;
     return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
   }, [mergeRequests.lists.incoming, userId]);
   const uploader = useAttachmentUpload();
-  const updateLastEditQueueInfo = React51.useCallback(
+  const updateLastEditQueueInfo = React52.useCallback(
     (info) => {
       lastEditQueueInfoRef.current = info;
       setLastEditQueueInfo(info);
@@ -10139,13 +10581,13 @@ function ComergeStudioInner({
     }
   });
   const chatSendDisabled = false;
-  const [processingMrId, setProcessingMrId] = React51.useState(null);
-  const [testingMrId, setTestingMrId] = React51.useState(null);
-  const [syncingUpstream, setSyncingUpstream] = React51.useState(false);
-  const [upstreamSyncStatus, setUpstreamSyncStatus] = React51.useState(null);
+  const [processingMrId, setProcessingMrId] = React52.useState(null);
+  const [testingMrId, setTestingMrId] = React52.useState(null);
+  const [syncingUpstream, setSyncingUpstream] = React52.useState(false);
+  const [upstreamSyncStatus, setUpstreamSyncStatus] = React52.useState(null);
   const isMrTestBuildInProgress = bundle.loading && bundle.loadingMode === "test";
   const isBaseBundleDownloading = bundle.loading && bundle.loadingMode === "base" && !bundle.isTesting;
-  const runtimePreparingText = React51.useMemo(() => {
+  const runtimePreparingText = React52.useMemo(() => {
     const status = app == null ? void 0 : app.status;
     if (status === "ready" && bundle.bundleStatus === "pending") {
       return "Bundling app\u2026 this may take a few minutes";
@@ -10165,7 +10607,7 @@ function ComergeStudioInner({
         return "Preparing app\u2026";
     }
   }, [app == null ? void 0 : app.status, bundle.bundleStatus]);
-  const chatShowTypingIndicator = React51.useMemo(() => {
+  const chatShowTypingIndicator = React52.useMemo(() => {
     var _a2;
     if (agentProgress.hasLiveProgress) return false;
     if (!thread.raw || thread.raw.length === 0) return false;
@@ -10174,12 +10616,12 @@ function ComergeStudioInner({
     return payloadType !== "outcome";
   }, [agentProgress.hasLiveProgress, thread.raw]);
   const showChatProgress = agentProgress.hasLiveProgress || Boolean((_a = agentProgress.view.bundle) == null ? void 0 : _a.active);
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     updateLastEditQueueInfo(null);
     setSuppressQueueUntilResponse(false);
     setUpstreamSyncStatus(null);
   }, [activeAppId, updateLastEditQueueInfo]);
-  const handleSyncUpstream = React51.useCallback(async () => {
+  const handleSyncUpstream = React52.useCallback(async () => {
     if (!(app == null ? void 0 : app.id)) {
       throw new Error("Missing app");
     }
@@ -10192,7 +10634,7 @@ function ComergeStudioInner({
       setSyncingUpstream(false);
     }
   }, [activeAppId, app == null ? void 0 : app.id]);
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     if (!(lastEditQueueInfo == null ? void 0 : lastEditQueueInfo.queueItemId)) return;
     const stillPresent = editQueue.items.some((item) => item.id === lastEditQueueInfo.queueItemId);
     if (!stillPresent) {
@@ -10200,7 +10642,7 @@ function ComergeStudioInner({
       setSuppressQueueUntilResponse(false);
     }
   }, [editQueue.items, lastEditQueueInfo == null ? void 0 : lastEditQueueInfo.queueItemId]);
-  const chatQueueItems = React51.useMemo(() => {
+  const chatQueueItems = React52.useMemo(() => {
     var _a2;
     if (suppressQueueUntilResponse && editQueue.items.length <= 1) {
       return [];
@@ -10214,8 +10656,8 @@ function ComergeStudioInner({
     return editQueue.items;
   }, [editQueue.items, lastEditQueueInfo, suppressQueueUntilResponse]);
   const { relatedApps, loading: relatedAppsLoading } = useRelatedApps(activeAppId);
-  const [switchingRelatedAppId, setSwitchingRelatedAppId] = React51.useState(null);
-  const handleOpenRelatedApps = React51.useCallback(() => {
+  const [switchingRelatedAppId, setSwitchingRelatedAppId] = React52.useState(null);
+  const handleOpenRelatedApps = React52.useCallback(() => {
     var _a2;
     if (!relatedApps) return;
     const ids = /* @__PURE__ */ new Set();
@@ -10224,7 +10666,7 @@ function ComergeStudioInner({
     for (const remix of relatedApps.remixes) ids.add(remix.id);
     void trackRelatedAppsOpened({ appId: relatedApps.current.id, relatedCount: ids.size });
   }, [relatedApps]);
-  const handleSwitchRelatedApp = React51.useCallback(
+  const handleSwitchRelatedApp = React52.useCallback(
     async (targetAppId) => {
       var _a2;
       if (!targetAppId || targetAppId === activeAppId) return;
@@ -10285,8 +10727,8 @@ function ComergeStudioInner({
       setRuntimeAppId
     ]
   );
-  return /* @__PURE__ */ jsx65(View49, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs41(View49, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(View50, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs42(View50, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ jsx66(
       RuntimeRenderer,
       {
         appKey,
@@ -10310,7 +10752,7 @@ function ComergeStudioInner({
         }
       }
     ),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx66(
       StudioOverlay,
       {
         captureTargetRef,
@@ -10367,6 +10809,9 @@ function ComergeStudioInner({
         chatSending: actions.sending,
         chatShowTypingIndicator,
         onSendChat: (text, attachments) => actions.sendEdit({ prompt: text, attachments }),
+        onChatAttachmentLoadError: () => {
+          thread.recoverAttachmentUrls();
+        },
         chatQueueItems,
         onRemoveQueueItem: (id) => editQueueActions.cancel(id),
         chatProgress: showChatProgress ? agentProgress.view : null,