@comergehq/studio 0.1.34 → 0.1.36

package/dist/index.js

@@ -516,8 +516,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/studio/ComergeStudio.tsx
-var React51 = __toESM(require("react"));
-var import_react_native61 = require("react-native");
+var React52 = __toESM(require("react"));
+var import_react_native63 = require("react-native");
 var import_bottom_sheet6 = require("@gorhom/bottom-sheet");
 var import_runtime2 = require("@comergehq/runtime");
 
@@ -1635,6 +1635,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;
@@ -1644,7 +1672,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) {
@@ -1655,9 +1684,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);
@@ -1698,29 +1737,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
@@ -2983,6 +3049,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) => {
+      import_react_native6.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);
@@ -2997,17 +3080,24 @@ function useAttachmentUpload() {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
           const blob = import_react_native6.Platform.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);
@@ -3026,13 +3116,16 @@ function useAttachmentUpload() {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
           const blob = import_react_native6.Platform.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)));
@@ -3315,8 +3408,8 @@ function RuntimeRenderer({
 }
 
 // src/studio/ui/StudioOverlay.tsx
-var React46 = __toESM(require("react"));
-var import_react_native60 = require("react-native");
+var React47 = __toESM(require("react"));
+var import_react_native62 = require("react-native");
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 var React12 = __toESM(require("react"));
@@ -3856,6 +3949,7 @@ function EdgeGlowFrame({
   role = "accent",
   thickness = 40,
   intensity = 1,
+  animationDurationMs = 300,
   style
 }) {
   const theme = useTheme();
@@ -3864,10 +3958,10 @@ function EdgeGlowFrame({
   React14.useEffect(() => {
     import_react_native13.Animated.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);
@@ -4386,7 +4480,16 @@ function DrawModeOverlay({
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native17.View, { style: [import_react_native17.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      EdgeGlowFrame,
+      {
+        visible: !hideUi,
+        role: "danger",
+        thickness: 50,
+        intensity: 1,
+        animationDurationMs: hideUi ? 0 : 300
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DrawSurface,
       {
@@ -5874,7 +5977,10 @@ function PreviewRelatedAppsSection({
 }) {
   var _a;
   const theme = useTheme();
+  const { height: windowHeight } = (0, import_react_native35.useWindowDimensions)();
   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 = [];
@@ -6007,10 +6113,7 @@ function PreviewRelatedAppsSection({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { alignItems: "flex-end", gap: 6 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: { minHeight: 20, justifyContent: "center" }, children: item.app.status !== "ready" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PreviewStatusBadge, { status: item.app.status }) : null }),
-              isSwitching ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.ActivityIndicator, { size: "small", color: theme.colors.primary }) : null
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: { alignItems: "flex-end", gap: 6 }, children: isSwitching ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.ActivityIndicator, { size: "small", color: theme.colors.primary }) : null })
           ] })
         },
         item.app.id
@@ -6053,17 +6156,35 @@ function PreviewRelatedAppsSection({
         children: inlineItems.map((item) => renderRelatedCard(item))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal, { visible: relatedAppsOpen, onRequestClose: closeRelatedApps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { gap: theme.spacing.sm }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }, children: "Related apps" }),
-      sectionedRelatedApps.original.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(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__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Remixes" }),
-        sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))
-      ] }) : null
-    ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      Modal,
+      {
+        visible: relatedAppsOpen,
+        onRequestClose: closeRelatedApps,
+        contentStyle: { maxHeight: modalMaxHeight, overflow: "hidden" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { gap: theme.spacing.sm, minHeight: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }, children: "Related apps" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            import_react_native35.ScrollView,
+            {
+              style: { maxHeight: modalScrollMaxHeight },
+              contentContainerStyle: { paddingBottom: theme.spacing.xs, gap: theme.spacing.sm },
+              showsVerticalScrollIndicator: true,
+              children: [
+                sectionedRelatedApps.original.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(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__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Remixes" }),
+                  sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))
+                ] }) : null
+              ]
+            }
+          )
+        ] })
+      }
+    )
   ] });
 }
 
@@ -7636,22 +7757,22 @@ ${shareUrl}`;
 }
 
 // src/studio/ui/ChatPanel.tsx
-var React43 = __toESM(require("react"));
-var import_react_native58 = require("react-native");
+var React44 = __toESM(require("react"));
+var import_react_native59 = require("react-native");
 
 // src/components/chat/ChatPage.tsx
-var React40 = __toESM(require("react"));
-var import_react_native51 = require("react-native");
+var React41 = __toESM(require("react"));
+var import_react_native52 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/components/chat/ChatMessageList.tsx
-var React39 = __toESM(require("react"));
-var import_react_native50 = require("react-native");
+var React40 = __toESM(require("react"));
+var import_react_native51 = require("react-native");
 var import_bottom_sheet5 = require("@gorhom/bottom-sheet");
 
 // src/components/chat/ChatMessageBubble.tsx
-var React37 = __toESM(require("react"));
-var import_react_native48 = require("react-native");
+var React38 = __toESM(require("react"));
+var import_react_native49 = require("react-native");
 var import_lucide_react_native10 = require("lucide-react-native");
 
 // src/components/primitives/Button.tsx
@@ -7717,19 +7838,261 @@ function Button({
   );
 }
 
-// src/components/chat/ChatMessageBubble.tsx
+// src/components/chat/ChatMessageAttachments.tsx
+var React37 = __toESM(require("react"));
+var import_react_native48 = require("react-native");
+var import_expo_image = require("expo-image");
 var import_jsx_runtime49 = require("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 import_react_native48.Animated.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(() => {
+    import_react_native48.Animated.loop(
+      import_react_native48.Animated.sequence([
+        import_react_native48.Animated.timing(pulse, { toValue: 0.85, duration: 650, useNativeDriver: true }),
+        import_react_native48.Animated.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__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_react_native48.View,
+      {
+        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__ */ (0, import_jsx_runtime49.jsxs)(
+          import_react_native48.Pressable,
+          {
+            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__ */ (0, import_jsx_runtime49.jsx)(
+                import_react_native48.Animated.View,
+                {
+                  style: {
+                    ...import_react_native48.StyleSheet.absoluteFillObject,
+                    opacity: pulse,
+                    backgroundColor: theme.colors.border
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                import_expo_image.Image,
+                {
+                  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__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.Modal, { visible: viewerVisible, transparent: true, animationType: "fade", onRequestClose: () => setViewerVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.95)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        import_react_native48.View,
+        {
+          style: {
+            position: "absolute",
+            top: 56,
+            right: 16,
+            zIndex: 2
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_react_native48.Pressable,
+            {
+              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__ */ (0, import_jsx_runtime49.jsx)(IconClose, { size: 18, colorToken: "onPrimary" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        import_react_native48.FlatList,
+        {
+          data: imageAttachments,
+          horizontal: true,
+          pagingEnabled: true,
+          initialScrollIndex: viewerIndex,
+          keyExtractor: (item) => item.id,
+          showsHorizontalScrollIndicator: false,
+          getItemLayout: (_, index) => {
+            const width = import_react_native48.Dimensions.get("window").width;
+            return { length: width, offset: width * index, index };
+          },
+          renderItem: ({ item, index }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: { width: import_react_native48.Dimensions.get("window").width, height: "100%", justifyContent: "center" }, children: [
+            modalLoadingById[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              import_react_native48.Animated.View,
+              {
+                style: {
+                  ...import_react_native48.StyleSheet.absoluteFillObject,
+                  opacity: pulse,
+                  backgroundColor: theme.colors.border
+                }
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              import_expo_image.Image,
+              {
+                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__ */ (0, import_jsx_runtime49.jsxs)(
+              Text,
+              {
+                variant: "caption",
+                color: "#FFFFFF",
+                style: { textAlign: "center", marginTop: theme.spacing.sm },
+                children: [
+                  index + 1,
+                  " / ",
+                  imageAttachments.length
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/components/chat/ChatMessageBubble.tsx
+var import_jsx_runtime50 = require("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;
@@ -7748,11 +8111,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__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: [align, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: [align, style], children: [
+    hasAttachments ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_react_native49.View,
+      {
+        style: {
+          maxWidth: "85%",
+          marginBottom: shouldRenderBubble ? theme.spacing.xs : 0,
+          alignSelf: isHuman ? "flex-end" : "flex-start",
+          alignItems: isHuman ? "flex-end" : "flex-start"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          ChatMessageAttachments,
+          {
+            messageId: message.id,
+            attachments,
+            align: isHuman ? "right" : "left",
+            onAttachmentLoadError
+          }
+        )
+      }
+    ) : null,
+    shouldRenderBubble ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Surface,
       {
         variant: bubbleVariant,
@@ -7767,14 +8155,14 @@ function ChatMessageBubbleInner({
           },
           cornerStyle
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
-          isMergeApproved || isSyncStarted ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+          isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
+          isMergeApproved || isSyncStarted ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
         ] })
       }
-    ),
-    showRetry ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : null,
+    showRetry ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
         variant: "ghost",
@@ -7783,9 +8171,9 @@ function ChatMessageBubbleInner({
         disabled: retrying,
         style: { borderColor: theme.colors.danger },
         accessibilityLabel: "Retry send",
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          !retrying ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react_native10.RotateCcw, { size: 14, color: theme.colors.danger }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+          !retrying ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react_native10.RotateCcw, { size: 14, color: theme.colors.danger }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Text,
             {
               variant: "caption",
@@ -7801,30 +8189,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
-var React38 = __toESM(require("react"));
-var import_react_native49 = require("react-native");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var React39 = __toESM(require("react"));
+var import_react_native50 = require("react-native");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
-  const anims = React38.useMemo(
-    () => [new import_react_native49.Animated.Value(0.3), new import_react_native49.Animated.Value(0.3), new import_react_native49.Animated.Value(0.3)],
+  const anims = React39.useMemo(
+    () => [new import_react_native50.Animated.Value(0.3), new import_react_native50.Animated.Value(0.3), new import_react_native50.Animated.Value(0.3)],
     []
   );
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = import_react_native49.Animated.sequence([
-        import_react_native49.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        import_react_native49.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      const seq = import_react_native50.Animated.sequence([
+        import_react_native50.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        import_react_native50.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
       ]);
-      const loop = import_react_native49.Animated.loop(seq);
+      const loop = import_react_native50.Animated.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -7832,8 +8220,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_react_native49.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    import_react_native50.Animated.View,
     {
       style: {
         width: 8,
@@ -7842,7 +8230,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: import_react_native49.Animated.multiply(import_react_native49.Animated.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: import_react_native50.Animated.multiply(import_react_native50.Animated.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -7850,36 +8238,37 @@ function TypingIndicator({ style }) {
 }
 
 // src/components/chat/ChatMessageList.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var ChatMessageList = React39.forwardRef(
+var import_jsx_runtime52 = require("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);
@@ -7891,7 +8280,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;
@@ -7901,14 +8290,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;
@@ -7916,7 +8305,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,
@@ -7926,28 +8315,29 @@ var ChatMessageList = React39.forwardRef(
       ],
       [contentStyle, theme.spacing.lg, theme.spacing.sm]
     );
-    const renderSeparator = React39.useCallback(() => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
-    const listHeader = React39.useMemo(
-      () => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { children: [
-        showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TypingIndicator, {}) }) : null,
-        bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { height: bottomInset } }) : null
+    const renderSeparator = React40.useCallback(() => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
+    const listHeader = React40.useMemo(
+      () => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native51.View, { children: [
+        showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TypingIndicator, {}) }) : null,
+        bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { style: { height: bottomInset } }) : null
       ] }),
       [bottomInset, showTypingIndicator, theme.spacing.lg, theme.spacing.sm]
     );
-    const renderItem = React39.useCallback(
-      ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    const renderItem = React40.useCallback(
+      ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         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__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       import_bottom_sheet5.BottomSheetFlatList,
       {
         ref: listRef,
@@ -7970,7 +8360,7 @@ var ChatMessageList = React39.forwardRef(
 ChatMessageList.displayName = "ChatMessageList";
 
 // src/components/chat/ChatPage.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function ChatPage({
   header,
   messages,
@@ -7978,6 +8368,7 @@ function ChatPage({
   renderMessageContent,
   onRetryMessage,
   isRetryingMessage,
+  onAttachmentLoadError,
   topBanner,
   composerTop,
   composer,
@@ -7989,35 +8380,35 @@ function ChatPage({
 }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const [composerHeight, setComposerHeight] = React40.useState(0);
-  const [composerTopHeight, setComposerTopHeight] = React40.useState(0);
-  const footerBottomPadding = import_react_native51.Platform.OS === "ios" ? insets.bottom - 24 : insets.bottom + 10;
+  const [composerHeight, setComposerHeight] = React41.useState(0);
+  const [composerTopHeight, setComposerTopHeight] = React41.useState(0);
+  const footerBottomPadding = import_react_native52.Platform.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__ */ (0, import_jsx_runtime52.jsxs)(import_react_native51.View, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native51.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-        import_react_native51.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native52.View, { style: [{ flex: 1 }, style], children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native52.View, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native52.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native52.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        import_react_native52.View,
         {
           style: { flex: 1 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               ChatMessageList,
               {
                 ref: listRef,
@@ -8026,6 +8417,7 @@ function ChatPage({
                 renderMessageContent,
                 onRetryMessage,
                 isRetryingMessage,
+                onAttachmentLoadError,
                 onNearBottomChange,
                 bottomInset
               }
@@ -8034,8 +8426,8 @@ function ChatPage({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-        import_react_native51.View,
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        import_react_native52.View,
         {
           style: {
             position: "absolute",
@@ -8047,15 +8439,15 @@ function ChatPage({
             paddingBottom: footerBottomPadding
           },
           children: [
-            composerTop ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-              import_react_native51.View,
+            composerTop ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              import_react_native52.View,
               {
                 style: { marginBottom: theme.spacing.sm },
                 onLayout: (e) => setComposerTopHeight(e.nativeEvent.layout.height),
                 children: composerTop
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               ChatComposer,
               {
                 ...composer,
@@ -8071,15 +8463,15 @@ function ChatPage({
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
-var React41 = __toESM(require("react"));
-var import_react_native52 = require("react-native");
+var React42 = __toESM(require("react"));
+var import_react_native53 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = (0, import_react_native_reanimated2.useSharedValue)(visible ? 1 : 0);
-  const [pressed, setPressed] = React41.useState(false);
-  React41.useEffect(() => {
+  const [pressed, setPressed] = React42.useState(false);
+  React42.useEffect(() => {
     progress.value = (0, import_react_native_reanimated2.withTiming)(visible ? 1 : 0, { duration: 200, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.ease) });
   }, [progress, visible]);
   const animStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
@@ -8088,7 +8480,7 @@ 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__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_react_native_reanimated2.default.View,
     {
       pointerEvents: visible ? "auto" : "none",
@@ -8102,8 +8494,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         style,
         animStyle
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        import_react_native52.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        import_react_native53.View,
         {
           style: {
             width: 44,
@@ -8121,8 +8513,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             elevation: 5,
             opacity: pressed ? 0.85 : 1
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native52.Pressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_react_native53.Pressable,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -8139,16 +8531,16 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-var import_react_native53 = require("react-native");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_react_native54 = require("react-native");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = import_react_native53.StyleSheet.flatten([
+  const flattenedStyle = import_react_native54.StyleSheet.flatten([
     {
       paddingTop: 0
     },
     style
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     StudioSheetHeader,
     {
       left,
@@ -8160,13 +8552,13 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-var import_react_native54 = require("react-native");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react_native55 = require("react-native");
+var import_jsx_runtime56 = require("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__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Card,
     {
       variant: "surfaceRaised",
@@ -8181,8 +8573,8 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native54.View, { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native55.View, { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Text,
           {
             style: {
@@ -8196,7 +8588,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
             children: resolvedTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Text,
           {
             style: {
@@ -8214,16 +8606,16 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 }
 
 // src/components/chat/ChatQueue.tsx
-var React42 = __toESM(require("react"));
-var import_react_native55 = require("react-native");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var React43 = __toESM(require("react"));
+var import_react_native56 = require("react-native");
+var import_jsx_runtime57 = require("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) ?? "";
@@ -8239,7 +8631,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))));
@@ -8248,8 +8640,8 @@ ${trimmedLine2}\u2026 `;
     setRemoving((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
   }, [items]);
   if (items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-    import_react_native55.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    import_react_native56.View,
     {
       style: {
         borderWidth: 1,
@@ -8260,16 +8652,16 @@ ${trimmedLine2}\u2026 `;
         backgroundColor: "transparent"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native55.View, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { 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__ */ (0, import_jsx_runtime56.jsxs)(
-            import_react_native55.View,
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            import_react_native56.View,
             {
               style: {
                 flexDirection: "row",
@@ -8281,8 +8673,8 @@ ${trimmedLine2}\u2026 `;
                 backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.8 : 0.9)
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native55.View, { style: { flex: 1 }, children: [
-                  !canExpand[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flex: 1 }, children: [
+                  !canExpand[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     Text,
                     {
                       style: { position: "absolute", opacity: 0, zIndex: -1, width: "100%" },
@@ -8301,14 +8693,14 @@ ${trimmedLine2}\u2026 `;
                       children: prompt
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                     Text,
                     {
                       variant: "bodyMuted",
                       numberOfLines: isExpanded ? void 0 : 2,
                       children: [
                         displayPrompt,
-                        !isExpanded && showToggle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                        !isExpanded && showToggle ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                           Text,
                           {
                             color: theme.colors.text,
@@ -8320,18 +8712,18 @@ ${trimmedLine2}\u2026 `;
                       ]
                     }
                   ),
-                  showToggle && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                    import_react_native55.Pressable,
+                  showToggle && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_react_native56.Pressable,
                     {
                       onPress: () => setExpanded((prev) => ({ ...prev, [item.id]: false })),
                       hitSlop: 6,
                       style: { alignSelf: "flex-start", marginTop: 4 },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "captionMuted", color: theme.colors.text, children: "less" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "captionMuted", color: theme.colors.text, children: "less" })
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                  import_react_native55.Pressable,
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  import_react_native56.Pressable,
                   {
                     onPress: () => {
                       if (!onRemove || isRemoving) return;
@@ -8346,7 +8738,7 @@ ${trimmedLine2}\u2026 `;
                     },
                     hitSlop: 8,
                     style: { alignSelf: "center" },
-                    children: isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native55.ActivityIndicator, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(IconClose, { size: 14, colorToken: "text" })
+                    children: isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.ActivityIndicator, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconClose, { size: 14, colorToken: "text" })
                   }
                 )
               ]
@@ -8360,8 +8752,27 @@ ${trimmedLine2}\u2026 `;
 }
 
 // src/components/chat/AgentProgressCard.tsx
-var import_react_native56 = require("react-native");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react_native57 = require("react-native");
+
+// src/components/icons/RemixXLoopLottie.tsx
+var import_lottie_react_native = __toESM(require("lottie-react-native"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var remixXLoopSource = require_remix_x_loop_lottie();
+var Lottie = import_lottie_react_native.default;
+function RemixXLoopLottie({ size = 24, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    Lottie,
+    {
+      source: remixXLoopSource,
+      autoPlay: true,
+      loop: true,
+      style: [{ width: size, height: size }, style]
+    }
+  );
+}
+
+// src/components/chat/AgentProgressCard.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function titleForPhase(phase) {
   if (phase === "planning") return "Planning";
   if (phase === "reasoning") return "Reasoning";
@@ -8383,10 +8794,11 @@ function AgentProgressCard({ progress }) {
   const theme = useTheme();
   const statusLabel = titleForStatus(progress.status);
   const phaseLabel = titleForPhase(progress.phase);
+  const showAnimatedStatusIcon = progress.status === "running";
   const subtitle = progress.latestMessage || `Agent is ${phaseLabel.toLowerCase()}...`;
   const todo = progress.todoSummary;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    import_react_native56.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    import_react_native57.View,
     {
       style: {
         borderWidth: 1,
@@ -8397,20 +8809,23 @@ function AgentProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "captionMuted", children: phaseLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "captionMuted", children: phaseLabel }),
+            showAnimatedStatusIcon ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RemixXLoopLottie, { size: 20, style: { marginLeft: 8 } }) : null
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
-        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
+        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Updated files: ",
           progress.changedFilesCount
         ] }) : null,
-        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
+        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native57.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
           "\u2022 ",
           path
         ] }, path)) }) : null,
-        todo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        todo ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Todos: ",
           todo.completed,
           "/",
@@ -8424,8 +8839,8 @@ function AgentProgressCard({ progress }) {
 }
 
 // src/components/chat/BundleProgressCard.tsx
-var import_react_native57 = require("react-native");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react_native58 = require("react-native");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function titleForStatus2(status) {
   if (status === "succeeded") return "Completed";
   if (status === "failed") return "Failed";
@@ -8437,8 +8852,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__ */ (0, import_jsx_runtime58.jsxs)(
-    import_react_native57.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    import_react_native58.View,
     {
       accessible: true,
       accessibilityRole: "progressbar",
@@ -8453,15 +8868,15 @@ function BundleProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { variant: "captionMuted", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Text, { variant: "captionMuted", children: [
             percent,
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          import_react_native57.View,
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_react_native58.View,
           {
             style: {
               width: "100%",
@@ -8470,8 +8885,8 @@ function BundleProgressCard({ progress }) {
               backgroundColor: withAlpha(theme.colors.border, theme.scheme === "dark" ? 0.5 : 0.6),
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-              import_react_native57.View,
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_react_native58.View,
               {
                 style: {
                   width: `${percent}%`,
@@ -8482,14 +8897,14 @@ function BundleProgressCard({ progress }) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
       ]
     }
   );
 }
 
 // src/studio/ui/ChatPanel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function ChatPanel({
   title = "Chat",
   messages,
@@ -8509,14 +8924,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);
@@ -8530,25 +8946,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__ */ (0, import_jsx_runtime59.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+      left: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_native59.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
+      right: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_native59.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -8557,22 +8973,22 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_native59.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { children: header }),
+      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_native59.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.ActivityIndicator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { style: { height: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
       ] })
     ] });
   }
   const bundleProgress = (progress == null ? void 0 : progress.bundle) ?? null;
-  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { gap: theme.spacing.sm }, children: [
-    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AgentProgressCard, { progress }) : null,
-    !progress && queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
+  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_native59.View, { style: { gap: theme.spacing.sm }, children: [
+    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(AgentProgressCard, { progress }) : null,
+    !progress && queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
   ] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     ChatPage,
     {
       header,
@@ -8580,18 +8996,19 @@ function ChatPanel({
       showTypingIndicator,
       onRetryMessage,
       isRetryingMessage,
+      onAttachmentLoadError,
       topBanner,
       composerTop: queueTop,
       composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      overlay: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -8611,9 +9028,9 @@ function ChatPanel({
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-var React44 = __toESM(require("react"));
-var import_react_native59 = require("react-native");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var React45 = __toESM(require("react"));
+var import_react_native60 = require("react-native");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -8624,14 +9041,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);
@@ -8643,7 +9060,7 @@ function ConfirmMergeRequestDialog({
     justifyContent: "center",
     alignSelf: "stretch"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     Modal,
     {
       visible,
@@ -8654,7 +9071,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           Text,
           {
             style: {
@@ -8666,9 +9083,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native59.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-            import_react_native59.View,
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native60.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            import_react_native60.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -8677,22 +9094,22 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                import_react_native59.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                import_react_native60.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-            import_react_native59.View,
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            import_react_native60.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -8703,22 +9120,22 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                import_react_native59.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                import_react_native60.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-            import_react_native59.View,
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            import_react_native60.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -8728,14 +9145,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                import_react_native59.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                import_react_native60.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -8747,7 +9164,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -8758,7 +9175,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -8780,7 +9197,8 @@ function ConfirmMergeFlow({
 }
 
 // src/studio/hooks/useOptimisticChatMessages.ts
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
+var import_react_native61 = require("react-native");
 function makeOptimisticId() {
   return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -8791,6 +9209,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) => {
+            import_react_native61.Image.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();
@@ -8819,11 +9259,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;
@@ -8833,13 +9273,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;
@@ -8847,7 +9296,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);
@@ -8856,7 +9305,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,
         {
@@ -8875,8 +9324,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;
@@ -8887,7 +9337,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)
         );
@@ -8899,7 +9352,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);
     },
@@ -8913,24 +9366,24 @@ var import_studio_control = require("@comergehq/studio-control");
 
 // src/components/icons/RemixUpIcon.tsx
 var import_react_native_svg3 = __toESM(require("react-native-svg"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function RemixUpIcon({ width = 24, height = 24, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native_svg3.default, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react_native_svg3.default, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       import_react_native_svg3.Path,
       {
         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__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       import_react_native_svg3.Path,
       {
         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__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       import_react_native_svg3.Path,
       {
         d: "M34.7656 2.28882e-05L21.44 13.2661L34.706 26.5321L47.972 13.266L34.7656 2.28882e-05Z",
@@ -8940,25 +9393,8 @@ function RemixUpIcon({ width = 24, height = 24, ...props }) {
   ] });
 }
 
-// src/components/icons/RemixXLoopLottie.tsx
-var import_lottie_react_native = __toESM(require("lottie-react-native"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var remixXLoopSource = require_remix_x_loop_lottie();
-var Lottie = import_lottie_react_native.default;
-function RemixXLoopLottie({ size = 24, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    Lottie,
-    {
-      source: remixXLoopSource,
-      autoPlay: true,
-      loop: true,
-      style: [{ width: size, height: size }, style]
-    }
-  );
-}
-
 // src/studio/ui/StudioOverlay.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -8989,6 +9425,7 @@ function StudioOverlay({
   chatSending,
   chatShowTypingIndicator,
   onSendChat,
+  onChatAttachmentLoadError,
   chatQueueItems,
   onRemoveQueueItem,
   chatProgress,
@@ -9002,15 +9439,15 @@ function StudioOverlay({
   onSwitchRelatedApp
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native60.useWindowDimensions)();
-  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 } = (0, import_react_native62.useWindowDimensions)();
+  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;
@@ -9023,26 +9460,26 @@ 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) import_react_native60.Keyboard.dismiss();
+    if (!open) import_react_native62.Keyboard.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(() => {
-    if (import_react_native60.Platform.OS !== "ios") {
-      import_react_native60.Keyboard.dismiss();
+  const backToPreview = React47.useCallback(() => {
+    if (import_react_native62.Platform.OS !== "ios") {
+      import_react_native62.Keyboard.dismiss();
       setActivePage("preview");
       return;
     }
@@ -9054,15 +9491,15 @@ function StudioOverlay({
       clearTimeout(t);
       setActivePage("preview");
     };
-    const sub = import_react_native60.Keyboard.addListener("keyboardDidHide", finalize);
+    const sub = import_react_native62.Keyboard.addListener("keyboardDidHide", finalize);
     const t = setTimeout(finalize, 350);
-    import_react_native60.Keyboard.dismiss();
+    import_react_native62.Keyboard.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);
@@ -9071,7 +9508,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React46.useCallback(async () => {
+  const toggleSheet = React47.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -9083,7 +9520,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);
@@ -9091,46 +9528,46 @@ function StudioOverlay({
     },
     [closeSheet, onTestMr]
   );
-  const handleNavigateHome = React46.useCallback(() => {
+  const handleNavigateHome = React47.useCallback(() => {
     if (!onNavigateHome) return;
-    if (import_react_native60.Platform.OS !== "android") {
+    if (import_react_native62.Platform.OS !== "android") {
       onNavigateHome();
       return;
     }
     if (!sheetOpenRef.current) {
-      import_react_native60.InteractionManager.runAfterInteractions(() => {
+      import_react_native62.InteractionManager.runAfterInteractions(() => {
         onNavigateHome();
       });
       return;
     }
     pendingNavigateHomeRef.current = true;
-    import_react_native60.Keyboard.dismiss();
+    import_react_native62.Keyboard.dismiss();
     setActivePage("preview");
     closeSheet();
   }, [closeSheet, onNavigateHome]);
-  const handleSheetDismiss = React46.useCallback(() => {
-    if (import_react_native60.Platform.OS !== "android") return;
+  const handleSheetDismiss = React47.useCallback(() => {
+    if (import_react_native62.Platform.OS !== "android") return;
     if (!pendingNavigateHomeRef.current) return;
     pendingNavigateHomeRef.current = false;
-    import_react_native60.InteractionManager.runAfterInteractions(() => {
+    import_react_native62.InteractionManager.runAfterInteractions(() => {
       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 = (0, import_studio_control.startStudioControlPolling)((action) => {
       if (action === "show" && !sheetOpenRef.current) openSheet();
       if (action === "hide" && sheetOpenRef.current) closeSheet();
@@ -9138,17 +9575,17 @@ function StudioOverlay({
     }, studioControlOptions);
     return () => poller.stop();
   }, [closeSheet, openSheet, studioControlOptions, toggleSheet]);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     void (0, import_studio_control.publishComergeStudioUIState)(sheetOpen, studioControlOptions);
   }, [sheetOpen, studioControlOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, onDismiss: handleSheetDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, onDismiss: handleSheetDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        preview: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           PreviewPanel,
           {
             app,
@@ -9182,7 +9619,7 @@ function StudioOverlay({
             onSwitchRelatedApp
           }
         ),
-        chat: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        chat: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           ChatPanel,
           {
             messages: optimistic.messages,
@@ -9202,6 +9639,7 @@ function StudioOverlay({
             onSend: optimistic.onSend,
             onRetryMessage: optimistic.onRetry,
             isRetryingMessage: optimistic.isRetrying,
+            onAttachmentLoadError: onChatAttachmentLoadError,
             queueItems: queueItemsForChat,
             onRemoveQueueItem,
             progress: chatProgress
@@ -9209,7 +9647,7 @@ function StudioOverlay({
         )
       }
     ) }),
-    showBubble && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    showBubble && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Bubble,
       {
         visible: !sheetOpen && !drawing,
@@ -9218,10 +9656,10 @@ function StudioOverlay({
         onPress: toggleSheet,
         isLoading: isBubbleLoading,
         loadingBorderTone: isBaseBundleDownloading ? "warning" : "default",
-        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_native60.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: isBubbleLoading ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RemixXLoopLottie, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RemixUpIcon, { width: 24, height: 24 }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native62.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: isBubbleLoading ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RemixXLoopLottie, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RemixUpIcon, { width: 24, height: 24 }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -9230,7 +9668,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -9244,7 +9682,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -9257,7 +9695,7 @@ function StudioOverlay({
 }
 
 // src/studio/hooks/useEditQueue.ts
-var React47 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 
 // src/data/apps/edit-queue/remote.ts
 var EditQueueRemoteDataSourceImpl = class extends BaseRemote {
@@ -9366,17 +9804,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;
@@ -9396,10 +9834,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)),
@@ -9408,7 +9846,7 @@ function useEditQueue(appId) {
     });
     return unsubscribe;
   }, [appId, upsertSorted, foregroundSignal]);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (!appId) return;
     if (foregroundSignal <= 0) return;
     void refetch();
@@ -9417,16 +9855,16 @@ function useEditQueue(appId) {
 }
 
 // src/studio/hooks/useEditQueueActions.ts
-var React48 = __toESM(require("react"));
+var React49 = __toESM(require("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);
@@ -9437,7 +9875,7 @@ function useEditQueueActions(appId) {
 }
 
 // src/studio/hooks/useAgentRunProgress.ts
-var React49 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 
 // src/data/agent-progress/repository.ts
 function mapRun(row) {
@@ -9703,23 +10141,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([]);
@@ -9755,15 +10193,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) => {
@@ -9793,7 +10231,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) => {
@@ -9825,8 +10263,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(() => {
@@ -9839,13 +10277,13 @@ function useAgentRunProgress(threadId, opts) {
 }
 
 // src/studio/hooks/useRelatedApps.ts
-var React50 = __toESM(require("react"));
+var React51 = __toESM(require("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);
@@ -9871,7 +10309,7 @@ function useRelatedApps(appId) {
       }
     }
   }, [appId]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     void fetchRelatedApps();
   }, [fetchRelatedApps]);
   return {
@@ -9883,7 +10321,7 @@ function useRelatedApps(appId) {
 }
 
 // src/studio/ComergeStudio.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function ComergeStudio({
   appId,
   clientKey: clientKey2,
@@ -9899,13 +10337,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(() => import_react_native61.Platform.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(() => import_react_native63.Platform.OS === "ios" ? "ios" : "android", []);
+  const notifyActiveAppChanged = React52.useCallback(
     (nextAppId, source) => {
       if (!onActiveAppChanged) return;
       const trimmedAppId = nextAppId.trim();
@@ -9918,28 +10356,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__ */ (0, import_jsx_runtime65.jsx)(
+  const captureTargetRef = React52.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     StudioBootstrap,
     {
       clientKey: clientKey2,
       analyticsEnabled,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native61.View, { style: { flex: 1 } }),
-      children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_native63.View, { style: { flex: 1 } }),
+      children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         ComergeStudioInner,
         {
           userId,
@@ -9989,11 +10427,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") {
@@ -10011,13 +10449,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;
@@ -10029,7 +10467,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) {
@@ -10041,19 +10479,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);
@@ -10095,13 +10533,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";
@@ -10121,7 +10559,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;
@@ -10130,12 +10568,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");
     }
@@ -10148,7 +10586,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) {
@@ -10156,7 +10594,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 [];
@@ -10170,8 +10608,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();
@@ -10180,7 +10618,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;
@@ -10241,8 +10679,8 @@ function ComergeStudioInner({
       setRuntimeAppId
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native61.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react_native61.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_native63.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react_native63.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       RuntimeRenderer,
       {
         appKey,
@@ -10266,7 +10704,7 @@ function ComergeStudioInner({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       StudioOverlay,
       {
         captureTargetRef,
@@ -10323,6 +10761,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,