@comergehq/studio 0.1.13 → 0.1.16

package/src/studio/hooks/useBundleManager.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as FileSystem from 'expo-file-system/legacy';
 import { Asset } from 'expo-asset';
+import { unzip } from 'react-native-zip-archive';
 
-import type { Platform as BundlePlatform, Bundle } from '../../data/apps/bundles/types';
+import type { Platform as BundlePlatform, Bundle, BundleAsset } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
 
 function sleep(ms: number): Promise<void> {
@@ -90,6 +91,8 @@ export type UseBundleManagerResult = BundleLoadState & {
 export type EmbeddedBaseBundle = {
   module: number;
   meta?: BaseBundleMeta | null;
+  assetsModule?: number;
+  assetsMeta?: EmbeddedAssetsMeta | null;
 };
 
 export type EmbeddedBaseBundles = {
@@ -97,6 +100,11 @@ export type EmbeddedBaseBundles = {
   android?: EmbeddedBaseBundle;
 };
 
+type EmbeddedAssetsMeta = {
+  checksumSha256: string | null;
+  size: number | null;
+};
+
 function safeName(s: string) {
   return s.replace(/[^a-zA-Z0-9._-]/g, '_');
 }
@@ -114,6 +122,11 @@ async function ensureDir(path: string) {
   await FileSystem.makeDirectoryAsync(path, { intermediates: true });
 }
 
+async function ensureBundleDir(key: string) {
+  await ensureDir(bundlesCacheDir());
+  await ensureDir(bundleDir(key));
+}
+
 function baseBundleKey(appId: string, platform: BundlePlatform): string {
   return `base:${appId}:${platform}`;
 }
@@ -122,16 +135,37 @@ function testBundleKey(appId: string, commitId: string | null | undefined, platf
   return `test:${appId}:${commitId ?? 'head'}:${platform}:${bundleId}`;
 }
 
-function toBundleFileUri(key: string): string {
+function legacyBundleFileUri(key: string): string {
   const dir = bundlesCacheDir();
   return `${dir}${safeName(key)}.jsbundle`;
 }
 
-function toBundleMetaFileUri(key: string): string {
+function legacyBundleMetaFileUri(key: string): string {
   const dir = bundlesCacheDir();
   return `${dir}${safeName(key)}.meta.json`;
 }
 
+function bundleDir(key: string): string {
+  const dir = bundlesCacheDir();
+  return `${dir}${safeName(key)}/`;
+}
+
+function toBundleFileUri(key: string, platform: BundlePlatform): string {
+  return `${bundleDir(key)}index.${platform}.jsbundle`;
+}
+
+function toBundleMetaFileUri(key: string): string {
+  return `${bundleDir(key)}bundle.meta.json`;
+}
+
+function toAssetsMetaFileUri(key: string): string {
+  return `${bundleDir(key)}assets.meta.json`;
+}
+
+function toAssetsDir(key: string): string {
+  return `${bundleDir(key)}assets/`;
+}
+
 type BaseBundleMeta = {
   fingerprint: string;
   bundleId: string;
@@ -156,7 +190,7 @@ async function writeJsonFile(fileUri: string, value: unknown): Promise<void> {
   try {
     await (FileSystem as any).writeAsStringAsync(fileUri, JSON.stringify(value));
   } catch {
-    
+
   }
 }
 
@@ -170,6 +204,15 @@ async function getExistingNonEmptyFileUri(fileUri: string): Promise<string | nul
   }
 }
 
+async function getExistingBundleFileUri(key: string, platform: BundlePlatform): Promise<string | null> {
+  const nextPath = toBundleFileUri(key, platform);
+  const next = await getExistingNonEmptyFileUri(nextPath);
+  if (next) return next;
+  const legacyPath = legacyBundleFileUri(key);
+  const legacy = await getExistingNonEmptyFileUri(legacyPath);
+  return legacy;
+}
+
 async function downloadIfMissing(url: string, fileUri: string): Promise<string> {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
@@ -189,9 +232,9 @@ async function deleteFileIfExists(fileUri: string) {
   try {
     const info = await FileSystem.getInfoAsync(fileUri);
     if (!info.exists) return;
-    await FileSystem.deleteAsync(fileUri).catch(() => {});
+    await FileSystem.deleteAsync(fileUri).catch(() => { });
   } catch {
-    
+
   }
 }
 
@@ -202,9 +245,12 @@ async function hydrateBaseFromEmbeddedAsset(
 ): Promise<{ bundlePath: string; meta?: BaseBundleMeta | null } | null> {
   if (!embedded?.module) return null;
   const key = baseBundleKey(appId, platform);
-  const targetUri = toBundleFileUri(key);
-  const existing = await getExistingNonEmptyFileUri(targetUri);
-  if (existing) return { bundlePath: existing, meta: embedded.meta ?? null };
+  const existing = await getExistingBundleFileUri(key, platform);
+  if (existing) {
+    return { bundlePath: existing, meta: embedded.meta ?? null };
+  }
+  await ensureBundleDir(key);
+  const targetUri = toBundleFileUri(key, platform);
 
   const asset = Asset.fromModule(embedded.module);
   await asset.downloadAsync();
@@ -220,8 +266,69 @@ async function hydrateBaseFromEmbeddedAsset(
   return { bundlePath: finalUri, meta: embedded.meta ?? null };
 }
 
-async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: string): Promise<string> {
-  const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
+async function hydrateAssetsFromEmbeddedAsset(
+  appId: string,
+  platform: BundlePlatform,
+  key: string,
+  embedded: EmbeddedBaseBundle | undefined
+): Promise<boolean> {
+  const moduleId = embedded?.assetsModule;
+  if (!moduleId) return false;
+
+  const assetsMeta = embedded?.assetsMeta ?? null;
+  const assetsDir = toAssetsDir(key);
+  const metaUri = toAssetsMetaFileUri(key);
+
+  const existingMeta = await readJsonFile<AssetsMeta>(metaUri);
+  const assetsDirInfo = await FileSystem.getInfoAsync(assetsDir);
+  const assetsDirExists = assetsDirInfo.exists && assetsDirInfo.isDirectory;
+  const checksumMatches =
+    Boolean(existingMeta?.checksumSha256) &&
+    Boolean(assetsMeta?.checksumSha256) &&
+    existingMeta?.checksumSha256 === assetsMeta?.checksumSha256;
+  const embeddedMetaMatches = existingMeta?.storageKey?.startsWith('embedded:');
+  if (assetsDirExists && checksumMatches && embeddedMetaMatches) {
+    return true;
+  }
+
+  await ensureBundleDir(key);
+  await ensureDir(assetsDir);
+
+  const asset = Asset.fromModule(moduleId);
+  await asset.downloadAsync();
+  const sourceUri = asset.localUri ?? asset.uri;
+  if (!sourceUri) return false;
+  const info = await FileSystem.getInfoAsync(sourceUri);
+  if (!info.exists) return false;
+
+  const zipUri = `${bundleDir(key)}assets.zip`;
+  await deleteFileIfExists(zipUri);
+  await FileSystem.copyAsync({ from: sourceUri, to: zipUri });
+
+  try {
+    await FileSystem.deleteAsync(assetsDir, { idempotent: true }).catch(() => { });
+  } catch {
+  }
+  await ensureDir(assetsDir);
+  await unzipArchive(zipUri, assetsDir);
+
+  await writeJsonFile(metaUri, {
+    checksumSha256: assetsMeta?.checksumSha256 ?? null,
+    storageKey: `embedded:${assetsMeta?.checksumSha256 ?? 'unknown'}`,
+    updatedAt: new Date().toISOString(),
+  } satisfies AssetsMeta);
+  return true;
+}
+
+async function safeReplaceFileFromUrl(
+  url: string,
+  targetUri: string,
+  tmpKey: string,
+  platform: BundlePlatform
+): Promise<string> {
+  const tmpKeySafe = `tmp:${tmpKey}:${Date.now()}`;
+  const tmpUri = toBundleFileUri(tmpKeySafe, platform);
+  await ensureDir(bundleDir(tmpKeySafe));
   try {
     await withRetry(
       async () => {
@@ -244,6 +351,107 @@ async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: st
   }
 }
 
+async function safeReplaceFileFromUrlToPath(url: string, targetUri: string, tmpKey: string): Promise<string> {
+  const tmpDir = `${bundlesCacheDir()}tmp/`;
+  await ensureDir(tmpDir);
+  const tmpUri = `${tmpDir}${safeName(tmpKey)}.tmp`;
+  try {
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error('Downloaded file is empty.');
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+    );
+    await deleteFileIfExists(targetUri);
+    await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
+    const finalOk = await getExistingNonEmptyFileUri(targetUri);
+    if (!finalOk) throw new Error('File replacement failed.');
+    return targetUri;
+  } finally {
+    await deleteFileIfExists(tmpUri);
+  }
+}
+
+function getMetroAssets(bundle: Bundle): BundleAsset | null {
+  const assets = bundle.assets ?? [];
+  return assets.find((asset) => asset.kind === 'metro-assets') ?? null;
+}
+
+type AssetsMeta = {
+  checksumSha256: string | null;
+  storageKey: string;
+  updatedAt: string;
+};
+
+async function ensureAssetsForBundle(
+  appId: string,
+  bundle: Bundle,
+  key: string,
+  platform: BundlePlatform
+): Promise<void> {
+  const asset = getMetroAssets(bundle);
+  if (!asset?.storageKey) return;
+
+  await ensureBundleDir(key);
+  const assetsDir = toAssetsDir(key);
+  await ensureDir(assetsDir);
+
+  const metaUri = toAssetsMetaFileUri(key);
+  const existingMeta = await readJsonFile<AssetsMeta>(metaUri);
+  const assetsDirInfo = await FileSystem.getInfoAsync(assetsDir);
+  const assetsDirExists = assetsDirInfo.exists && assetsDirInfo.isDirectory;
+  if (
+    existingMeta?.checksumSha256 &&
+    asset.checksumSha256 &&
+    existingMeta.checksumSha256 === asset.checksumSha256 &&
+    (existingMeta.storageKey === asset.storageKey || existingMeta.storageKey?.startsWith('embedded:')) &&
+    assetsDirExists
+  ) {
+    return;
+  }
+
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedAssetsDownloadUrl(appId, bundle.id, {
+        redirect: false,
+        kind: asset.kind,
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+  );
+
+  const zipUri = `${bundleDir(key)}assets.zip`;
+  await safeReplaceFileFromUrlToPath(signed.url, zipUri, `${appId}:${bundle.id}:${platform}:${asset.kind}`);
+
+  try {
+    await FileSystem.deleteAsync(assetsDir, { idempotent: true }).catch(() => { });
+  } catch {
+
+  }
+  await ensureDir(assetsDir);
+  await unzipArchive(zipUri, assetsDir);
+  await writeJsonFile(metaUri, {
+    checksumSha256: asset.checksumSha256 ?? null,
+    storageKey: asset.storageKey,
+    updatedAt: new Date().toISOString(),
+  } satisfies AssetsMeta);
+}
+
+async function unzipArchive(sourceUri: string, destDir: string) {
+  try {
+    await unzip(sourceUri, destDir);
+  } catch (e) {
+    throw new Error(
+      `Failed to extract assets archive. Ensure 'react-native-zip-archive' is installed in the host app. ${String(
+        (e as Error)?.message ?? e
+      )}`
+    );
+  }
+}
+
 async function pollBundle(appId: string, bundleId: string, opts: { timeoutMs: number; intervalMs: number }): Promise<Bundle> {
   const start = Date.now();
   while (true) {
@@ -291,21 +499,41 @@ async function resolveBundlePath(
     throw new Error('Bundle build failed.');
   }
 
+  let bundleWithAssets = finalBundle;
+  if (finalBundle.status === 'succeeded' && (!finalBundle.assets || finalBundle.assets.length === 0)) {
+    try {
+      bundleWithAssets = await bundlesRepository.getById(appId, finalBundle.id);
+    } catch {
+      bundleWithAssets = finalBundle;
+    }
+  }
+
   const signed = await withRetry(
     async () => {
       return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
     },
     { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
   );
+  const key =
+    mode === 'base'
+      ? baseBundleKey(appId, platform)
+      : testBundleKey(appId, commitId, platform, finalBundle.id);
+  await ensureBundleDir(key);
   const bundlePath =
     mode === 'base'
       ? await safeReplaceFileFromUrl(
-          signed.url,
-          toBundleFileUri(baseBundleKey(appId, platform)),
-          `${appId}:${commitId ?? 'head'}:${platform}:${finalBundle.id}`
-        )
-      : await downloadIfMissing(signed.url, toBundleFileUri(testBundleKey(appId, commitId, platform, finalBundle.id)));
-  return { bundlePath, label: 'Ready', bundle: finalBundle };
+        signed.url,
+        toBundleFileUri(key, platform),
+        `${appId}:${commitId ?? 'head'}:${platform}:${finalBundle.id}`,
+        platform
+      )
+      : await downloadIfMissing(signed.url, toBundleFileUri(key, platform));
+  try {
+    await ensureAssetsForBundle(appId, bundleWithAssets, key, platform);
+  } catch {
+
+  }
+  return { bundlePath, label: 'Ready', bundle: bundleWithAssets };
 }
 
 export function useBundleManager({
@@ -360,8 +588,7 @@ export function useBundleManager({
         const dir = bundlesCacheDir();
         await ensureDir(dir);
         const key = baseBundleKey(appId, platform);
-        const uri = toBundleFileUri(key);
-        let existing = await getExistingNonEmptyFileUri(uri);
+        let existing = await getExistingBundleFileUri(key, platform);
         let embeddedMeta: BaseBundleMeta | null = null;
         if (!existing) {
           const embedded = embeddedBaseBundlesRef.current?.[platform];
@@ -370,14 +597,29 @@ export function useBundleManager({
             existing = hydrated.bundlePath;
             embeddedMeta = hydrated.meta ?? null;
             if (embeddedMeta) {
+              await ensureBundleDir(key);
               await writeJsonFile(toBundleMetaFileUri(key), embeddedMeta);
+              await writeJsonFile(legacyBundleMetaFileUri(key), embeddedMeta);
             }
           }
         }
         if (existing) {
           lastBaseBundlePathRef.current = existing;
           setBundlePath(existing);
-          const meta = embeddedMeta ?? (await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key)));
+          const meta =
+            embeddedMeta ??
+            (await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key))) ??
+            (await readJsonFile<BaseBundleMeta>(legacyBundleMetaFileUri(key)));
+          const embedded = embeddedBaseBundlesRef.current?.[platform];
+          const embeddedFingerprint = embedded?.meta?.fingerprint ?? null;
+          const actualFingerprint = meta?.fingerprint ?? embeddedMeta?.fingerprint ?? null;
+          if (embedded?.assetsModule && embeddedFingerprint && actualFingerprint === embeddedFingerprint) {
+            try {
+              await hydrateAssetsFromEmbeddedAsset(appId, platform, key, embedded);
+            } catch {
+
+            }
+          }
           if (meta?.fingerprint) {
             lastBaseFingerprintRef.current = meta.fingerprint;
           }
@@ -387,7 +629,7 @@ export function useBundleManager({
           }
         }
       } catch {
-       
+
       }
     },
     [platform]
@@ -461,7 +703,16 @@ export function useBundleManager({
         lastBaseFingerprintRef.current = fingerprint;
         hasCompletedFirstNetworkBaseLoadRef.current = true;
         initialHydratedBaseFromDiskRef.current = false;
-        void writeJsonFile(toBundleMetaFileUri(baseBundleKey(src.appId, platform)), {
+        const metaKey = baseBundleKey(src.appId, platform);
+        await ensureBundleDir(metaKey);
+        void writeJsonFile(toBundleMetaFileUri(metaKey), {
+          fingerprint,
+          bundleId: bundle.id,
+          checksumSha256: bundle.checksumSha256 ?? null,
+          size: bundle.size ?? null,
+          updatedAt: new Date().toISOString(),
+        } satisfies BaseBundleMeta);
+        void writeJsonFile(legacyBundleMetaFileUri(metaKey), {
           fingerprint,
           bundleId: bundle.id,
           checksumSha256: bundle.checksumSha256 ?? null,

package/src/studio/hooks/useEditQueue.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import type { EditQueueItem } from '../../data/apps/edit-queue/types';
+import { editQueueRepository } from '../../data/apps/edit-queue/repository';
+import { useForegroundSignal } from './useForegroundSignal';
+
+export type UseEditQueueResult = {
+  items: EditQueueItem[];
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+};
+
+export function useEditQueue(appId: string): UseEditQueueResult {
+  const [items, setItems] = React.useState<EditQueueItem[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+  const activeRequestIdRef = React.useRef(0);
+  const foregroundSignal = useForegroundSignal(Boolean(appId));
+
+  const upsertSorted = React.useCallback((prev: EditQueueItem[], nextItem: EditQueueItem) => {
+    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 = React.useCallback(async () => {
+    if (!appId) {
+      setItems([]);
+      return;
+    }
+    const requestId = ++activeRequestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const list = await editQueueRepository.list(appId);
+      if (activeRequestIdRef.current !== requestId) return;
+      setItems([...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)));
+      setItems([]);
+    } finally {
+      if (activeRequestIdRef.current === requestId) setLoading(false);
+    }
+  }, [appId]);
+
+  React.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+
+  React.useEffect(() => {
+    if (!appId) return;
+    const unsubscribe = editQueueRepository.subscribeEditQueue(appId, {
+      onInsert: (item) => setItems((prev) => upsertSorted(prev, item)),
+      onUpdate: (item) => setItems((prev) => upsertSorted(prev, item)),
+      onDelete: (item) => setItems((prev) => prev.filter((x) => x.id !== item.id)),
+    });
+    return unsubscribe;
+  }, [appId, upsertSorted, foregroundSignal]);
+
+  React.useEffect(() => {
+    if (!appId) return;
+    if (foregroundSignal <= 0) return;
+    void refetch();
+  }, [appId, foregroundSignal, refetch]);
+
+  return { items, loading, error, refetch };
+}

package/src/studio/hooks/useEditQueueActions.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import type { UpdateEditQueueItemRequest } from '../../data/apps/edit-queue/types';
+import { editQueueRepository } from '../../data/apps/edit-queue/repository';
+
+export type UseEditQueueActionsResult = {
+  update: (queueItemId: string, payload: UpdateEditQueueItemRequest) => Promise<void>;
+  cancel: (queueItemId: string) => Promise<void>;
+};
+
+export function useEditQueueActions(appId: string): UseEditQueueActionsResult {
+  const update = React.useCallback(
+    async (queueItemId: string, payload: UpdateEditQueueItemRequest) => {
+      if (!appId) return;
+      await editQueueRepository.update(appId, queueItemId, payload);
+    },
+    [appId]
+  );
+
+  const cancel = React.useCallback(
+    async (queueItemId: string) => {
+      if (!appId) return;
+      await editQueueRepository.cancel(appId, queueItemId);
+    },
+    [appId]
+  );
+
+  return { update, cancel };
+}

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);
@@ -52,6 +58,7 @@ export function useStudioActions({
       setSending(true);
       setError(null);
       try {
+        onEditStart?.();
         let targetApp = app;
 
         if (shouldForkOnEdit) {
@@ -72,12 +79,16 @@ export function useStudioActions({
           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,10 @@ 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 include = !isQueuedHiddenMessage(m);
+    const next = prev.filter((x) => x.id !== m.id);
+    if (include) next.push(m);
+    next.sort(compareMessages);
     return next;
   }, []);
 
@@ -66,8 +101,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].filter((m) => !isQueuedHiddenMessage(m)).sort(compareMessages));
     } catch (e) {
       if (activeRequestIdRef.current !== requestId) return;
       setError(e instanceof Error ? e : new Error(String(e)));