@comergehq/studio 0.1.34 → 0.1.36

package/src/studio/hooks/useOptimisticChatMessages.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Image } from 'react-native';
 
 import type { ChatMessage } from '../../components/models/types';
 
@@ -20,13 +21,19 @@ export type UseOptimisticChatMessagesResult = {
 type OptimisticChatMessage = {
   id: string;
   content: string;
-  attachments?: string[];
+  attachments?: OptimisticAttachment[];
   createdAtIso: string;
   baseServerLastId: string | null;
   failed: boolean;
   retrying: boolean;
 };
 
+type OptimisticAttachment = {
+  uri: string;
+  width?: number;
+  height?: number;
+};
+
 function makeOptimisticId() {
   return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -39,6 +46,28 @@ function toEpochMs(createdAt: ChatMessage['createdAt']): number {
   return Number.isFinite(t) ? t : 0;
 }
 
+async function resolveAttachmentDimensions(uris: string[]): Promise<OptimisticAttachment[]> {
+  return Promise.all(
+    uris.map(
+      async (uri): Promise<OptimisticAttachment> => {
+        try {
+          const { width, height } = await new Promise<{ width: number; height: number }>((resolve, reject) => {
+            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: ChatMessage[], o: OptimisticChatMessage) {
   if (o.failed) return false;
 
@@ -90,6 +119,15 @@ export 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' },
@@ -119,7 +157,10 @@ export function useOptimisticChatMessages({
       const createdAtIso = new Date().toISOString();
       const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1]!.id : null;
       const id = makeOptimisticId();
-      const normalizedAttachments = attachments && attachments.length > 0 ? [...attachments] : undefined;
+      const normalizedAttachments =
+        attachments && attachments.length > 0
+          ? await resolveAttachmentDimensions(attachments)
+          : undefined;
 
       setOptimisticChat((prev) => [
         ...prev,
@@ -157,7 +198,10 @@ export function useOptimisticChatMessages({
       );
 
       try {
-        await onSendChat(target.content, target.attachments);
+        await onSendChat(
+          target.content,
+          target.attachments?.map((att) => att.uri)
+        );
         setOptimisticChat((prev) =>
           prev.map((m) => (m.id === messageId ? { ...m, retrying: false } : m))
         );

package/src/studio/hooks/useThreadMessages.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type { Message } from '../../data/messages/types';
 import { messagesRepository } from '../../data/messages/repository';
-import type { ChatMessage } from '../../components/models/types';
+import type { ChatAttachment, ChatMessage } from '../../components/models/types';
 import { useForegroundSignal } from './useForegroundSignal';
 
 export type UseThreadMessagesResult = {
@@ -12,6 +12,7 @@ export type UseThreadMessagesResult = {
   refreshing: boolean;
   error: Error | null;
   refetch: () => Promise<void>;
+  recoverAttachmentUrls: () => void;
 };
 
 function extractMeta(payload: unknown): ChatMessage['meta'] {
@@ -64,6 +65,36 @@ function compareMessages(a: Message, b: Message): number {
   return String(a.createdAt).localeCompare(String(b.createdAt));
 }
 
+function parseAttachments(payload: Message['payload']): ChatAttachment[] {
+  const raw = (payload as any)?.attachments;
+  if (!Array.isArray(raw)) return [];
+  const out: ChatAttachment[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== 'object') continue;
+    const id = typeof (item as any).id === 'string' ? String((item as any).id) : '';
+    const name = typeof (item as any).name === 'string' ? String((item as any).name) : '';
+    const mimeType = typeof (item as any).mimeType === 'string' ? String((item as any).mimeType) : '';
+    const size = typeof (item as any).size === 'number' ? Number((item as any).size) : 0;
+    if (!id || !name || !mimeType || !Number.isFinite(size) || size <= 0) continue;
+    out.push({
+      id,
+      name,
+      mimeType,
+      size,
+      uri: typeof (item as any).downloadUrl === 'string' ? String((item as any).downloadUrl) : undefined,
+      width: typeof (item as any).width === 'number' ? Number((item as any).width) : undefined,
+      height: typeof (item as any).height === 'number' ? Number((item as any).height) : undefined,
+    });
+  }
+  return out;
+}
+
+function hasAttachmentWithoutUrl(payload: Message['payload']): boolean {
+  const attachments = parseAttachments(payload);
+  if (attachments.length === 0) return false;
+  return attachments.some((att) => !att.uri);
+}
+
 function mapMessageToChatMessage(m: Message): ChatMessage {
   const kind = typeof (m.payload as any)?.type === 'string' ? String((m.payload as any).type) : null;
   return {
@@ -73,6 +104,7 @@ function mapMessageToChatMessage(m: Message): ChatMessage {
     createdAt: m.createdAt,
     kind,
     meta: extractMeta(m.payload),
+    attachments: parseAttachments(m.payload),
   };
 }
 
@@ -84,11 +116,22 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   const activeRequestIdRef = React.useRef(0);
   const foregroundSignal = useForegroundSignal(Boolean(threadId));
   const hasLoadedOnceRef = React.useRef(false);
+  const attachmentRecoveryTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastAttachmentRecoveryAtRef = React.useRef(0);
 
   React.useEffect(() => {
     hasLoadedOnceRef.current = false;
   }, [threadId]);
 
+  React.useEffect(() => {
+    return () => {
+      if (attachmentRecoveryTimerRef.current) {
+        clearTimeout(attachmentRecoveryTimerRef.current);
+        attachmentRecoveryTimerRef.current = null;
+      }
+    };
+  }, []);
+
   const upsertSorted = React.useCallback((prev: Message[], m: Message) => {
     const next = prev.filter((x) => x.id !== m.id);
     next.push(m);
@@ -131,6 +174,20 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
     }
   }, [threadId]);
 
+  const recoverAttachmentUrls = React.useCallback(() => {
+    if (!threadId) return;
+    if (attachmentRecoveryTimerRef.current) return;
+
+    const now = Date.now();
+    if (now - lastAttachmentRecoveryAtRef.current < 2000) return;
+
+    attachmentRecoveryTimerRef.current = setTimeout(() => {
+      attachmentRecoveryTimerRef.current = null;
+      lastAttachmentRecoveryAtRef.current = Date.now();
+      void refetch({ background: true });
+    }, 250);
+  }, [refetch, threadId]);
+
   React.useEffect(() => {
     void refetch();
   }, [refetch]);
@@ -138,12 +195,22 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   React.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]);
 
   React.useEffect(() => {
     if (!threadId) return;
@@ -151,13 +218,20 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
     void refetch({ background: true });
   }, [foregroundSignal, refetch, threadId]);
 
+  React.useEffect(() => {
+    if (!threadId) return;
+    if (raw.length === 0) return;
+    if (!raw.some((m) => hasAttachmentWithoutUrl(m.payload))) return;
+    recoverAttachmentUrls();
+  }, [raw, recoverAttachmentUrls, threadId]);
+
   const messages = React.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 };
 }
 
 

package/src/studio/ui/ChatPanel.tsx

@@ -36,6 +36,7 @@ export type ChatPanelProps = {
   onSend: (text: string, attachments?: string[]) => void | Promise<void>;
   onRetryMessage?: (messageId: string) => void | Promise<void>;
   isRetryingMessage?: (messageId: string) => boolean;
+  onAttachmentLoadError?: (messageId: string, attachmentId: string) => void;
   queueItems?: EditQueueItem[];
   onRemoveQueueItem?: (id: string) => void;
   progress?: AgentRunProgressView | null;
@@ -60,6 +61,7 @@ export function ChatPanel({
   onSend,
   onRetryMessage,
   isRetryingMessage,
+  onAttachmentLoadError,
   queueItems = [],
   onRemoveQueueItem,
   progress = null,
@@ -153,6 +155,7 @@ export function ChatPanel({
       showTypingIndicator={showTypingIndicator}
       onRetryMessage={onRetryMessage}
       isRetryingMessage={isRetryingMessage}
+      onAttachmentLoadError={onAttachmentLoadError}
       topBanner={topBanner}
       composerTop={queueTop}
       composerHorizontalPadding={0}

package/src/studio/ui/StudioOverlay.tsx

@@ -64,6 +64,7 @@ export type StudioOverlayProps = {
   chatSending?: boolean;
   chatShowTypingIndicator?: boolean;
   onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
+  onChatAttachmentLoadError?: (messageId: string, attachmentId: string) => void;
   chatQueueItems?: import('../../data/apps/edit-queue/types').EditQueueItem[];
   onRemoveQueueItem?: (id: string) => void;
   chatProgress?: import('../hooks/useAgentRunProgress').AgentRunProgressView | null;
@@ -111,6 +112,7 @@ export function StudioOverlay({
   chatSending,
   chatShowTypingIndicator,
   onSendChat,
+  onChatAttachmentLoadError,
   chatQueueItems,
   onRemoveQueueItem,
   chatProgress,
@@ -350,6 +352,7 @@ export function StudioOverlay({
               onSend={optimistic.onSend}
               onRetryMessage={optimistic.onRetry}
               isRetryingMessage={optimistic.isRetrying}
+              onAttachmentLoadError={onChatAttachmentLoadError}
               queueItems={queueItemsForChat}
               onRemoveQueueItem={onRemoveQueueItem}
               progress={chatProgress}

package/src/studio/ui/preview-panel/PreviewRelatedAppsSection.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { ActivityIndicator, Pressable, ScrollView, View } from 'react-native';
+import { ActivityIndicator, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 
 import type { RelatedApp, RelatedApps } from '../../../data/apps/types';
 import { Modal } from '../../../components/primitives/Modal';
 import { Text } from '../../../components/primitives/Text';
-import { PreviewStatusBadge } from '../../../components/preview/PreviewStatusBadge';
 import { withAlpha } from '../../../components/utils/color';
 import { useTheme } from '../../../theme';
 import { SectionTitle } from './SectionTitle';
@@ -53,7 +52,10 @@ export function PreviewRelatedAppsSection({
   onSwitchRelatedApp,
 }: PreviewRelatedAppsSectionProps) {
   const theme = useTheme();
+  const { height: windowHeight } = useWindowDimensions();
   const [relatedAppsOpen, setRelatedAppsOpen] = React.useState(false);
+  const modalMaxHeight = Math.max(240, windowHeight * 0.5);
+  const modalScrollMaxHeight = Math.max(140, modalMaxHeight - 96);
 
   const relatedAppItems = React.useMemo((): RelatedAppListItem[] => {
     if (!relatedApps) return [];
@@ -203,9 +205,6 @@ export function PreviewRelatedAppsSection({
             </View>
 
             <View style={{ alignItems: 'flex-end', gap: 6 }}>
-              <View style={{ minHeight: 20, justifyContent: 'center' }}>
-                {item.app.status !== 'ready' ? <PreviewStatusBadge status={item.app.status} /> : null}
-              </View>
               {isSwitching ? <ActivityIndicator size="small" color={theme.colors.primary} /> : null}
             </View>
           </View>
@@ -258,25 +257,35 @@ export function PreviewRelatedAppsSection({
         </ScrollView>
       )}
 
-      <Modal visible={relatedAppsOpen} onRequestClose={closeRelatedApps}>
-        <View style={{ gap: theme.spacing.sm }}>
+      <Modal
+        visible={relatedAppsOpen}
+        onRequestClose={closeRelatedApps}
+        contentStyle={{ maxHeight: modalMaxHeight, overflow: 'hidden' }}
+      >
+        <View style={{ gap: theme.spacing.sm, minHeight: 0 }}>
           <Text style={{ color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }}>
             Related apps
           </Text>
 
-          {sectionedRelatedApps.original.length > 0 ? (
-            <View>
-              <Text style={{ color: theme.colors.textMuted, marginBottom: theme.spacing.xs }}>Original</Text>
-              {sectionedRelatedApps.original.map((item) => renderRelatedCard(item, { fullWidth: true }))}
-            </View>
-          ) : null}
+          <ScrollView
+            style={{ maxHeight: modalScrollMaxHeight }}
+            contentContainerStyle={{ paddingBottom: theme.spacing.xs, gap: theme.spacing.sm }}
+            showsVerticalScrollIndicator
+          >
+            {sectionedRelatedApps.original.length > 0 ? (
+              <View>
+                <Text style={{ color: theme.colors.textMuted, marginBottom: theme.spacing.xs }}>Original</Text>
+                {sectionedRelatedApps.original.map((item) => renderRelatedCard(item, { fullWidth: true }))}
+              </View>
+            ) : null}
 
-          {sectionedRelatedApps.remixes.length > 0 ? (
-            <View>
-              <Text style={{ color: theme.colors.textMuted, marginBottom: theme.spacing.xs }}>Remixes</Text>
-              {sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))}
-            </View>
-          ) : null}
+            {sectionedRelatedApps.remixes.length > 0 ? (
+              <View>
+                <Text style={{ color: theme.colors.textMuted, marginBottom: theme.spacing.xs }}>Remixes</Text>
+                {sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))}
+              </View>
+            ) : null}
+          </ScrollView>
         </View>
       </Modal>
     </>