@comergehq/studio 0.1.7 → 0.1.9

package/package.json

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

package/src/components/chat/ChatComposer.tsx

@@ -21,6 +21,7 @@ export type ChatComposerProps = {
   onChangeValue?: (text: string) => void;
   placeholder?: string;
   disabled?: boolean;
+  sendDisabled?: boolean;
   sending?: boolean;
   autoFocus?: boolean;
   onSend: (text: string, attachments?: string[]) => void | Promise<void>;
@@ -90,6 +91,7 @@ export function ChatComposer({
   onChangeValue,
   placeholder = 'Describe the idea you want to build',
   disabled = false,
+  sendDisabled = false,
   sending = false,
   autoFocus = false,
   onSend,
@@ -111,7 +113,7 @@ export function ChatComposer({
   const hasText = text.trim().length > 0;
   const composerMinHeight = hasAttachments ? THUMBNAIL_HEIGHT + 44 + 24 : 44;
 
-  const isButtonDisabled = sending || disabled;
+  const isButtonDisabled = sending || disabled || sendDisabled;
   const maxInputHeight = React.useMemo(() => Dimensions.get('window').height * 0.5, []);
   const shakeAnim = React.useRef(new Animated.Value(0)).current;
   const [sendPressed, setSendPressed] = React.useState(false);

package/src/components/chat/ChatMessageList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
+import { Platform, View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
 import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
 
 import type { ChatMessage } from '../models/types';
@@ -16,6 +16,7 @@ export type ChatMessageListProps = {
   showTypingIndicator?: boolean;
   renderMessageContent?: ChatMessageBubbleProps['renderContent'];
   contentStyle?: ViewStyle;
+  bottomInset?: number;
   /**
    * Called when the user is near the bottom of the list.
    */
@@ -33,6 +34,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       showTypingIndicator = false,
       renderMessageContent,
       contentStyle,
+      bottomInset = 0,
       onNearBottomChange,
       nearBottomThreshold = 200,
     },
@@ -55,7 +57,12 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
     const handleScroll = React.useCallback(
       (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        const distanceFromBottom = Math.max(contentSize.height - (contentOffset.y + layoutMeasurement.height), 0);
+        // Treat "bottom" as the end of actual messages (excluding the intentional footer spacer),
+        // so "near bottom" still means "near the latest message", not "deep into empty space".
+        const distanceFromBottom = Math.max(
+          contentSize.height - Math.max(bottomInset, 0) - (contentOffset.y + layoutMeasurement.height),
+          0
+        );
         const isNear = distanceFromBottom <= nearBottomThreshold;
 
         if (nearBottomRef.current !== isNear) {
@@ -63,7 +70,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
           onNearBottomChange?.(isNear);
         }
       },
-      [nearBottomThreshold, onNearBottomChange]
+      [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
 
     // On first load, start at the bottom
@@ -99,11 +106,21 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       return undefined;
     }, [showTypingIndicator, scrollToBottom]);
 
+    // When the bottom inset grows/shrinks (e.g. composer height changes), keep pinned users at bottom.
+    React.useEffect(() => {
+      if (!initialScrollDoneRef.current) return;
+      if (!nearBottomRef.current) return;
+      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
+      return () => cancelAnimationFrame(id);
+    }, [bottomInset, scrollToBottom]);
+
     return (
       <BottomSheetFlatList
         ref={listRef}
         data={messages}
         keyExtractor={(m: ChatMessage) => m.id}
+        keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
+        keyboardShouldPersistTaps="handled"
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={false}
@@ -111,7 +128,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
           {
             paddingHorizontal: theme.spacing.lg,
             paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.xl,
+            paddingBottom: theme.spacing.sm,
           },
           contentStyle,
         ]}
@@ -121,13 +138,15 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
           </View>
         )}
         ListFooterComponent={
-          showTypingIndicator ? (
-            <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>
-              <TypingIndicator />
-            </View>
-          ) : null
+          <View>
+            {showTypingIndicator ? (
+              <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>
+                <TypingIndicator />
+              </View>
+            ) : null}
+            {bottomInset > 0 ? <View style={{ height: bottomInset }} /> : null}
+          </View>
         }
-        maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: nearBottomThreshold }}
       />
     );
   }

package/src/components/chat/ChatPage.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Keyboard, Platform, View, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
 
 import type { ChatMessage } from '../models/types';
 import { useTheme } from '../../theme';
@@ -42,11 +41,9 @@ export function ChatPage({
   const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-  const animatedKeyboard = useAnimatedKeyboard();
 
   React.useEffect(() => {
     if (Platform.OS !== 'ios') return;
-
     const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
     const hide = Keyboard.addListener('keyboardWillHide', () => setKeyboardVisible(false));
     return () => {
@@ -56,11 +53,8 @@ export function ChatPage({
   }, []);
 
   const footerBottomPadding = Platform.OS === 'ios' ? (keyboardVisible ? 0 : insets.bottom) : insets.bottom + 10;
-  const footerAnimatedStyle = useAnimatedStyle(() => {
-    if (Platform.OS !== 'ios') return { paddingBottom: insets.bottom + 10 };
-    return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
-  });
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
+  const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
 
   const resolvedOverlay = React.useMemo(() => {
     if (!overlay) return null;
@@ -79,35 +73,36 @@ export function ChatPage({
         </View>
       ) : null}
       <View style={{ flex: 1 }}>
-        <ChatMessageList
-          ref={listRef}
-          messages={messages}
-          showTypingIndicator={showTypingIndicator}
-          renderMessageContent={renderMessageContent}
-          onNearBottomChange={onNearBottomChange}
-          contentStyle={{ paddingBottom: theme.spacing.xl + composerHeight + footerBottomPadding }}
-        />
-        {resolvedOverlay}
-
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              paddingHorizontal: theme.spacing.lg,
-              paddingTop: theme.spacing.sm,
-            },
-            footerAnimatedStyle,
-          ]}
+        <View
+          style={{ flex: 1 }}
+        >
+          <ChatMessageList
+            ref={listRef}
+            messages={messages}
+            showTypingIndicator={showTypingIndicator}
+            renderMessageContent={renderMessageContent}
+            onNearBottomChange={onNearBottomChange}
+            bottomInset={bottomInset}
+          />
+          {resolvedOverlay}
+        </View>
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingHorizontal: theme.spacing.lg,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: footerBottomPadding,
+          }}
         >
           <ChatComposer
             {...composer}
             attachments={composer.attachments ?? []}
             onLayout={({ height }) => setComposerHeight(height)}
           />
-        </Animated.View>
+        </View>
       </View>
     </View>
   );

package/src/components/comments/AppCommentsSheet.tsx

@@ -30,10 +30,14 @@ export function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }: A
   const insets = useSafeAreaInsets();
   const sheetRef = React.useRef<BottomSheetModal | null>(null);
   const snapPoints = React.useMemo(() => ['50%', '90%'], []);
+  const currentIndexRef = React.useRef<number>(1);
 
   const { comments, loading, sending, error, create, refresh } = useAppComments(appId);
   const { app, loading: loadingApp } = useAppDetails(appId);
-  const { keyboardVisible } = useIosKeyboardSnapFix(sheetRef);
+  const { keyboardVisible } = useIosKeyboardSnapFix(sheetRef, {
+    getCurrentIndex: () => currentIndexRef.current,
+    targetIndex: 1,
+  });
 
   React.useEffect(() => {
     if (appId) {
@@ -56,6 +60,7 @@ export function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }: A
 
   const handleChange = React.useCallback(
     (index: number) => {
+      currentIndexRef.current = index;
       if (index === -1) onClose();
     },
     [onClose]

package/src/components/comments/useIosKeyboardSnapFix.ts

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { Keyboard, Platform } from 'react-native';
 import type { BottomSheetModal } from '@gorhom/bottom-sheet';
 
-export function useIosKeyboardSnapFix(sheetRef: React.RefObject<BottomSheetModal | null>) {
+export function useIosKeyboardSnapFix(
+  sheetRef: React.RefObject<BottomSheetModal | null>,
+  options?: { getCurrentIndex?: () => number | null; targetIndex?: number }
+) {
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
   React.useEffect(() => {
@@ -10,13 +13,18 @@ export function useIosKeyboardSnapFix(sheetRef: React.RefObject<BottomSheetModal
     const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
     const hide = Keyboard.addListener('keyboardWillHide', () => {
       setKeyboardVisible(false);
-      setTimeout(() => sheetRef.current?.snapToIndex?.(1), 10);
+      const target = options?.targetIndex ?? 1;
+      const current = options?.getCurrentIndex?.() ?? null;
+      // Only "re-snap" if we're already at the target index; otherwise we can cause a jump.
+      if (current === target) {
+        setTimeout(() => sheetRef.current?.snapToIndex?.(target), 10);
+      }
     });
     return () => {
       show.remove();
       hide.remove();
     };
-  }, [sheetRef]);
+  }, [options?.getCurrentIndex, options?.targetIndex, sheetRef]);
 
   return { keyboardVisible };
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Keyboard, Platform, View } from 'react-native';
+import { AppState, Keyboard, Platform, View, type AppStateStatus } from 'react-native';
 import BottomSheet, { type BottomSheetBackgroundProps, type BottomSheetProps } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -35,8 +35,7 @@ export type StudioBottomSheetProps = {
   children: React.ReactNode;
 
   /**
-   * Additional BottomSheet props, for advanced tuning.
-   * We intentionally do not expose everything as first-class props to keep SRP.
+   * Additional BottomSheet props
    */
   bottomSheetProps?: Omit<
     BottomSheetProps,
@@ -66,17 +65,32 @@ export function StudioBottomSheet({
   const insets = useSafeAreaInsets();
   const internalSheetRef = React.useRef<BottomSheet | null>(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
+  const currentIndexRef = React.useRef<number>(open ? snapPoints.length - 1 : -1);
+  const lastAppStateRef = React.useRef<AppStateStatus>(AppState.currentState);
 
+  // Workaround: @gorhom/bottom-sheet can occasionally render empty content after app resume.
   React.useEffect(() => {
-    if (Platform.OS !== 'ios') return;
-    const sub = Keyboard.addListener('keyboardDidHide', () => {
+    const sub = AppState.addEventListener('change', (state) => {
+      const prev = lastAppStateRef.current;
+      lastAppStateRef.current = state;
+
+      if (state === 'background' || state === 'inactive') {
+        Keyboard.dismiss();
+        return;
+      }
+
+      if (state !== 'active') return;
       const sheet = resolvedSheetRef.current;
-      if (!sheet || !open) return;
-      const targetIndex = snapPoints.length - 1;
-      setTimeout(() => sheet.snapToIndex(targetIndex), 10);
+      if (!sheet) return;
+      const idx = currentIndexRef.current;
+      if (open && idx >= 0) {
+        Keyboard.dismiss();
+        requestAnimationFrame(() => sheet.snapToIndex(idx));
+        setTimeout(() => sheet.snapToIndex(idx), 120);
+      }
     });
     return () => sub.remove();
-  }, [open, resolvedSheetRef, snapPoints.length]);
+  }, [open, resolvedSheetRef]);
 
   React.useEffect(() => {
     const sheet = resolvedSheetRef.current;
@@ -92,6 +106,7 @@ export function StudioBottomSheet({
 
   const handleChange = React.useCallback(
     (index: number) => {
+      currentIndexRef.current = index;
       onOpenChange?.(index >= 0);
     },
     [onOpenChange]
@@ -103,7 +118,7 @@ export function StudioBottomSheet({
       index={open ? snapPoints.length - 1 : -1}
       snapPoints={snapPoints}
       enablePanDownToClose
-      keyboardBehavior="extend"
+      keyboardBehavior="interactive"
       keyboardBlurBehavior="restore"
       android_keyboardInputMode="adjustResize"
       backgroundComponent={(props: BottomSheetBackgroundProps) => (

package/src/studio/hooks/useApp.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import type { App } from '../../data/apps/types';
 import { appsRepository } from '../../data/apps/repository';
+import { useForegroundSignal } from './useForegroundSignal';
 
 export type UseAppResult = {
   app: App | null;
@@ -23,6 +24,7 @@ export function useApp(appId: string, options?: UseAppOptions): UseAppResult {
   const [app, setApp] = React.useState<App | null>(null);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
+  const foregroundSignal = useForegroundSignal(enabled && Boolean(appId));
 
   const mergeApp = React.useCallback((prev: App | null, next: App): App => {
     // Realtime (Supabase) rows don't include "viewer-specific" fields like `isLiked`,
@@ -62,20 +64,24 @@ export function useApp(appId: string, options?: UseAppOptions): UseAppResult {
     if (!appId) return;
     const unsubscribe = appsRepository.subscribeApp(appId, {
       onInsert: (a) => {
-        console.log('[useApp] onInsert', a);
         setApp((prev) => mergeApp(prev, a));
       },
       onUpdate: (a) => {
-        console.log('[useApp] onUpdate', a);
         setApp((prev) => mergeApp(prev, a));
       },
       onDelete: () => {
-        console.log('[useApp] onDelete');
         setApp(null);
       },
     });
     return unsubscribe;
-  }, [appId, enabled, mergeApp]);
+  }, [appId, enabled, mergeApp, foregroundSignal]);
+
+  React.useEffect(() => {                                   
+    if (!enabled) return;
+    if (!appId) return;
+    if (foregroundSignal <= 0) return;
+    void fetchOnce();
+  }, [appId, enabled, fetchOnce, foregroundSignal]);
 
   return { app, loading, error, refetch: fetchOnce };
 }

package/src/studio/hooks/useForegroundSignal.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { AppState, type AppStateStatus } from 'react-native';
+
+import { getSupabaseClient } from '../../core/services/supabase';
+
+export function useForegroundSignal(enabled: boolean = true): number {
+  const [signal, setSignal] = React.useState(0);
+  const lastStateRef = React.useRef<AppStateStatus>(AppState.currentState);
+
+  React.useEffect(() => {
+    if (!enabled) return;
+
+    const sub = AppState.addEventListener('change', (nextState) => {
+      const prevState = lastStateRef.current;
+      lastStateRef.current = nextState;
+
+      const didResume =
+        (prevState === 'background' || prevState === 'inactive') && nextState === 'active';
+      if (!didResume) return;
+
+      try {
+        const supabase = getSupabaseClient();
+        supabase?.realtime?.connect?.();
+      } catch {
+        
+      }
+
+      setSignal((s) => s + 1);
+    });
+
+    return () => sub.remove();
+  }, [enabled]);
+
+  return signal;
+}
+
+

package/src/studio/hooks/useThreadMessages.ts

@@ -3,6 +3,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 { useForegroundSignal } from './useForegroundSignal';
 
 export type UseThreadMessagesResult = {
   raw: Message[];
@@ -44,22 +45,35 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   const [raw, setRaw] = React.useState<Message[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
+  const activeRequestIdRef = React.useRef(0);
+  const foregroundSignal = useForegroundSignal(Boolean(threadId));
+
+  const upsertSorted = React.useCallback((prev: Message[], m: Message) => {
+    const next = prev.some((x) => x.id === m.id) ? prev.map((x) => (x.id === m.id ? m : x)) : [...prev, m];
+    // Keep ordering stable for the UI (chat scrolling is very sensitive to reorders).
+    next.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return next;
+  }, []);
 
   const refetch = React.useCallback(async () => {
     if (!threadId) {
       setRaw([]);
       return;
     }
+    const requestId = ++activeRequestIdRef.current;
     setLoading(true);
     setError(null);
     try {
       const list = await messagesRepository.list(threadId);
-      setRaw(list);
+      if (activeRequestIdRef.current !== requestId) return;
+      // Ensure stable ordering for downstream scrolling behavior.
+      setRaw([...list].sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt))));
     } catch (e) {
+      if (activeRequestIdRef.current !== requestId) return;
       setError(e instanceof Error ? e : new Error(String(e)));
       setRaw([]);
     } finally {
-      setLoading(false);
+      if (activeRequestIdRef.current === requestId) setLoading(false);
     }
   }, [threadId]);
 
@@ -70,12 +84,18 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   React.useEffect(() => {
     if (!threadId) return;
     const unsubscribe = messagesRepository.subscribeThread(threadId, {
-      onInsert: (m) => setRaw((prev) => [...prev, m]),
-      onUpdate: (m) => setRaw((prev) => prev.map((x) => (x.id === m.id ? m : x))),
+      onInsert: (m) => setRaw((prev) => upsertSorted(prev, m)),
+      onUpdate: (m) => setRaw((prev) => upsertSorted(prev, m)),
       onDelete: (m) => setRaw((prev) => prev.filter((x) => x.id !== m.id)),
     });
     return unsubscribe;
-  }, [threadId]);
+  }, [threadId, upsertSorted, foregroundSignal]);
+
+  React.useEffect(() => {
+    if (!threadId) return;
+    if (foregroundSignal <= 0) return;
+    void refetch();
+  }, [foregroundSignal, refetch, threadId]);
 
   const messages = React.useMemo(() => raw.map(mapMessageToChatMessage), [raw]);
 

package/src/studio/ui/ChatPanel.tsx

@@ -58,9 +58,12 @@ export function ChatPanel({
       const all = composerAttachments ?? attachments;
       await onSend(text, all.length > 0 ? all : undefined);
       onClearAttachments?.();
-      requestAnimationFrame(() => listRef.current?.scrollToBottom({ animated: true }));
+      // Avoid double-scroll: ChatMessageList already auto-scrolls when the user is near bottom.
+      if (!nearBottom) {
+        requestAnimationFrame(() => listRef.current?.scrollToBottom({ animated: true }));
+      }
     },
-    [attachments, onClearAttachments, onSend]
+    [attachments, nearBottom, onClearAttachments, onSend]
   );
 
   const handleScrollToBottom = React.useCallback(() => {
@@ -138,7 +141,10 @@ export function ChatPanel({
         </ScrollToBottomButton>
       }
       composer={{
-        disabled: Boolean(loading) || Boolean(sendDisabled) || Boolean(forking),
+        // Keep the input editable even when sending is disallowed (e.g. agent still working),
+        // otherwise iOS will drop focus/keyboard and BottomSheet can get "stuck" with a keyboard-sized gap.
+        disabled: Boolean(loading) || Boolean(forking),
+        sendDisabled: Boolean(sendDisabled) || Boolean(loading) || Boolean(forking),
         sending: Boolean(sending),
         autoFocus: autoFocusComposer,
         onSend: handleSend,

package/src/studio/ui/StudioOverlay.tsx

@@ -104,11 +104,15 @@ export function StudioOverlay({
     [confirmMrId, incomingMergeRequests]
   );
 
-  const closeSheet = React.useCallback(() => {
-    setSheetOpen(false);
-    Keyboard.dismiss();
+  const handleSheetOpenChange = React.useCallback((open: boolean) => {
+    setSheetOpen(open);
+    if (!open) Keyboard.dismiss();
   }, []);
 
+  const closeSheet = React.useCallback(() => {
+    handleSheetOpenChange(false);
+  }, [handleSheetOpenChange]);
+
   const openSheet = React.useCallback(() => setSheetOpen(true), []);
 
   const goToChat = React.useCallback(() => {
@@ -178,7 +182,7 @@ export function StudioOverlay({
       {/* Testing glow around runtime */}
       <EdgeGlowFrame visible={isTesting} role="accent" thickness={40} intensity={1} />
 
-      <StudioBottomSheet open={sheetOpen} onOpenChange={setSheetOpen}>
+      <StudioBottomSheet open={sheetOpen} onOpenChange={handleSheetOpenChange}>
         <StudioSheetPager
           activePage={activePage}
           width={width}