@comergehq/studio 0.1.15 → 0.1.17

package/src/studio/hooks/useOptimisticChatMessages.ts

@@ -5,6 +5,7 @@ import type { ChatMessage } from '../../components/models/types';
 export type UseOptimisticChatMessagesParams = {
   threadId: string | null;
   shouldForkOnEdit: boolean;
+  disableOptimistic?: boolean;
   chatMessages: ChatMessage[];
   onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
 };
@@ -63,6 +64,7 @@ function isOptimisticResolvedByServer(chatMessages: ChatMessage[], o: Optimistic
 export function useOptimisticChatMessages({
   threadId,
   shouldForkOnEdit,
+  disableOptimistic = false,
   chatMessages,
   onSendChat,
 }: UseOptimisticChatMessagesParams): UseOptimisticChatMessagesResult {
@@ -105,7 +107,7 @@ export function useOptimisticChatMessages({
 
   const onSend = React.useCallback(
     async (text: string, attachments?: string[]) => {
-      if (shouldForkOnEdit) {
+      if (shouldForkOnEdit || disableOptimistic) {
         await onSendChat(text, attachments);
         return;
       }
@@ -120,7 +122,7 @@ export function useOptimisticChatMessages({
         setOptimisticChat((prev) => prev.map((m) => (m.id === id ? { ...m, failed: true } : m)));
       });
     },
-    [chatMessages, onSendChat, shouldForkOnEdit]
+    [chatMessages, disableOptimistic, onSendChat, shouldForkOnEdit]
   );
 
   return { messages, onSend };

package/src/studio/hooks/useStudioActions.ts

@@ -15,6 +15,9 @@ export type UseStudioActionsParams = {
    * Called when we fork and should switch to the new app.
    */
   onForkedApp?: (appId: string, opts?: { keepRenderingAppId?: string }) => void;
+  onEditStart?: () => void;
+  onEditQueued?: (info: { queueItemId?: string | null; queuePosition?: number | null }) => void;
+  onEditFinished?: () => void;
   /**
    * Upload function used to convert attachments.
    */
@@ -34,6 +37,9 @@ export function useStudioActions({
   userId,
   app,
   onForkedApp,
+  onEditStart,
+  onEditQueued,
+  onEditFinished,
   uploadAttachments,
 }: UseStudioActionsParams): UseStudioActionsResult {
   const [forking, setForking] = React.useState(false);
@@ -66,18 +72,23 @@ export function useStudioActions({
 
         const threadId = targetApp.threadId;
         if (!threadId) throw new Error('No thread available for this app.');
+        onEditStart?.();
 
         let attachmentMetas: AttachmentMeta[] | undefined;
         if (attachments && attachments.length > 0 && uploadAttachments) {
           attachmentMetas = await uploadAttachments({ threadId, appId: targetApp.id, dataUrls: attachments });
         }
 
-        await agentRepository.editApp({
+        const editResult = await agentRepository.editApp({
           prompt,
           thread_id: threadId,
           app_id: targetApp.id,
           attachments: attachmentMetas && attachmentMetas.length > 0 ? attachmentMetas : undefined,
         });
+        onEditQueued?.({
+          queueItemId: editResult.queueItemId ?? null,
+          queuePosition: editResult.queuePosition ?? null,
+        });
       } catch (e) {
         const err = e instanceof Error ? e : new Error(String(e));
         setError(err);
@@ -85,9 +96,10 @@ export function useStudioActions({
       } finally {
         setForking(false);
         setSending(false);
+        onEditFinished?.();
       }
     },
-    [app, onForkedApp, sending, shouldForkOnEdit, uploadAttachments, userId]
+    [app, onEditFinished, onEditQueued, onEditStart, onForkedApp, sending, shouldForkOnEdit, uploadAttachments, userId]
   );
 
   return { isOwner, shouldForkOnEdit, forking, sending, error, sendEdit };

package/src/studio/hooks/useThreadMessages.ts

@@ -29,6 +29,40 @@ function extractMeta(payload: unknown): ChatMessage['meta'] {
   };
 }
 
+function getPayloadMeta(payload: Message['payload']): Record<string, unknown> | null {
+  const meta = (payload as any)?.meta;
+  if (!meta || typeof meta !== 'object') return null;
+  return meta as Record<string, unknown>;
+}
+
+function isQueuedHiddenMessage(m: Message): boolean {
+  if (m.authorType !== 'human') return false;
+  const meta = getPayloadMeta(m.payload);
+  return meta?.visibility === 'queued';
+}
+
+function toEpochMs(value: unknown): number {
+  if (value == null) return 0;
+  if (typeof value === 'number') return value;
+  if (value instanceof Date) return value.getTime();
+  const parsed = Date.parse(String(value));
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function getEffectiveSortMs(m: Message): number {
+  const meta = getPayloadMeta(m.payload);
+  const runStartedAt = meta?.runStartedAt;
+  const runMs = toEpochMs(runStartedAt);
+  return runMs > 0 ? runMs : toEpochMs(m.createdAt);
+}
+
+function compareMessages(a: Message, b: Message): number {
+  const aMs = getEffectiveSortMs(a);
+  const bMs = getEffectiveSortMs(b);
+  if (aMs !== bMs) return aMs - bMs;
+  return String(a.createdAt).localeCompare(String(b.createdAt));
+}
+
 function mapMessageToChatMessage(m: Message): ChatMessage {
   const kind = typeof (m.payload as any)?.type === 'string' ? String((m.payload as any).type) : null;
   return {
@@ -49,9 +83,9 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   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)));
+    const next = prev.filter((x) => x.id !== m.id);
+    next.push(m);
+    next.sort(compareMessages);
     return next;
   }, []);
 
@@ -66,8 +100,7 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
     try {
       const list = await messagesRepository.list(threadId);
       if (activeRequestIdRef.current !== requestId) return;
-      // Ensure stable ordering for downstream scrolling behavior.
-      setRaw([...list].sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt))));
+      setRaw([...list].sort(compareMessages));
     } catch (e) {
       if (activeRequestIdRef.current !== requestId) return;
       setError(e instanceof Error ? e : new Error(String(e)));
@@ -97,7 +130,11 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
     void refetch();
   }, [foregroundSignal, refetch, threadId]);
 
-  const messages = React.useMemo(() => raw.map(mapMessageToChatMessage), [raw]);
+  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, error, refetch };
 }

package/src/studio/ui/ChatPanel.tsx

@@ -10,6 +10,8 @@ import { StudioSheetHeaderIconButton } from '../../components/studio-sheet/Studi
 import { IconArrowDown, IconBack, IconClose, IconDraw, IconHome } from '../../components/icons/StudioIcons';
 import { Text } from '../../components/primitives/Text';
 import type { ChatMessage } from '../../components/models/types';
+import type { EditQueueItem } from '../../data/apps/edit-queue/types';
+import { ChatQueue } from '../../components/chat/ChatQueue';
 
 export type ChatPanelProps = {
   title?: string;
@@ -29,6 +31,8 @@ export type ChatPanelProps = {
   onNavigateHome?: () => void;
   onStartDraw?: () => void;
   onSend: (text: string, attachments?: string[]) => void | Promise<void>;
+  queueItems?: EditQueueItem[];
+  onRemoveQueueItem?: (id: string) => void;
 };
 
 export function ChatPanel({
@@ -49,6 +53,8 @@ export function ChatPanel({
   onNavigateHome,
   onStartDraw,
   onSend,
+  queueItems = [],
+  onRemoveQueueItem,
 }: ChatPanelProps) {
   const listRef = React.useRef<ChatMessageListRef | null>(null);
   const [nearBottom, setNearBottom] = React.useState(true);
@@ -123,12 +129,17 @@ export function ChatPanel({
     );
   }
 
+  const queueTop = queueItems.length > 0 ? (
+    <ChatQueue items={queueItems} onRemove={onRemoveQueueItem} />
+  ) : null;
+
   return (
     <ChatPage
       header={header}
       messages={messages}
       showTypingIndicator={showTypingIndicator}
       topBanner={topBanner}
+      composerTop={queueTop}
       composerHorizontalPadding={0}
       listRef={listRef}
       onNearBottomChange={setNearBottom}

package/src/studio/ui/StudioOverlay.tsx

@@ -58,6 +58,8 @@ export type StudioOverlayProps = {
   chatSending?: boolean;
   chatShowTypingIndicator?: boolean;
   onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
+  chatQueueItems?: import('../../data/apps/edit-queue/types').EditQueueItem[];
+  onRemoveQueueItem?: (id: string) => void;
 
   // Navigation callbacks
   onNavigateHome?: () => void;
@@ -93,6 +95,8 @@ export function StudioOverlay({
   chatSending,
   chatShowTypingIndicator,
   onSendChat,
+  chatQueueItems,
+  onRemoveQueueItem,
   onNavigateHome,
   showBubble,
   studioControlOptions,
@@ -110,9 +114,13 @@ export function StudioOverlay({
   const [commentsCount, setCommentsCount] = React.useState<number | null>(null);
 
   const threadId = app?.threadId ?? null;
+  const isForking = chatForking || app?.status === 'forking';
+  const queueItemsForChat = isForking ? [] : chatQueueItems;
+  const disableOptimistic = Boolean(queueItemsForChat && queueItemsForChat.length > 0) || app?.status === 'editing';
   const optimistic = useOptimisticChatMessages({
     threadId,
     shouldForkOnEdit,
+    disableOptimistic,
     chatMessages,
     onSendChat,
   });
@@ -265,6 +273,8 @@ export function StudioOverlay({
               onNavigateHome={onNavigateHome}
               onStartDraw={startDraw}
               onSend={optimistic.onSend}
+              queueItems={queueItemsForChat}
+              onRemoveQueueItem={onRemoveQueueItem}
             />
           }
         />