@comergehq/studio 0.1.23 → 0.1.24

package/src/core/services/http/index.ts

@@ -11,9 +11,53 @@ import { BASE_URL } from './baseUrl';
 declare module 'axios' {
   export interface AxiosRequestConfig {
     _retried?: boolean;
+    _retryCount?: number;
+    skipRetry?: boolean;
   }
 }
 
+const RETRYABLE_MAX_ATTEMPTS = 3;
+const RETRYABLE_BASE_DELAY_MS = 500;
+const RETRYABLE_MAX_DELAY_MS = 4000;
+const RETRYABLE_JITTER_MS = 250;
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function isRetryableNetworkError(e: unknown): boolean {
+  const err = e as any;
+  const code = typeof err?.code === 'string' ? err.code : '';
+  const message = typeof err?.message === 'string' ? err.message : '';
+
+  if (code === 'ERR_NETWORK' || code === 'ECONNABORTED') return true;
+  if (message.toLowerCase().includes('network error')) return true;
+  if (message.toLowerCase().includes('timeout')) return true;
+
+  const status = typeof err?.response?.status === 'number' ? err.response.status : undefined;
+  if (status && (status === 429 || status >= 500)) return true;
+
+  return false;
+}
+
+function computeBackoffDelay(attempt: number): number {
+  const exp = Math.min(RETRYABLE_MAX_DELAY_MS, RETRYABLE_BASE_DELAY_MS * Math.pow(2, attempt - 1));
+  const jitter = Math.floor(Math.random() * RETRYABLE_JITTER_MS);
+  return exp + jitter;
+}
+
+function parseRetryAfterMs(value: unknown): number | null {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const seconds = Number(trimmed);
+  if (!Number.isNaN(seconds) && seconds >= 0) return seconds * 1000;
+  const parsed = Date.parse(trimmed);
+  if (Number.isNaN(parsed)) return null;
+  const delta = parsed - Date.now();
+  return delta > 0 ? delta : 0;
+}
+
 export const createApiClient = (baseURL: string): AxiosInstance => {
   const apiClient = axios.create({
     baseURL,
@@ -74,7 +118,7 @@ export const createApiClient = (baseURL: string): AxiosInstance => {
     },
     async (error: AxiosError) => {
       const originalRequest = error.config as
-        | (InternalAxiosRequestConfig & { _retried?: boolean })
+        | (InternalAxiosRequestConfig & { _retried?: boolean; _retryCount?: number; skipRetry?: boolean })
         | undefined;
       log.error('Response Error:', {
         message: error.message,
@@ -114,6 +158,25 @@ export const createApiClient = (baseURL: string): AxiosInstance => {
         }
       }
 
+      const method = originalRequest.method?.toLowerCase() ?? '';
+      const isGet = method === 'get';
+      const retryable = isRetryableNetworkError(error);
+      const retryCount = originalRequest._retryCount ?? 0;
+      const skipRetry = originalRequest.skipRetry === true;
+
+      if (isGet && retryable && !skipRetry && retryCount < RETRYABLE_MAX_ATTEMPTS) {
+        const retryAfterMs = parseRetryAfterMs(error.response?.headers?.['retry-after']);
+        originalRequest._retryCount = retryCount + 1;
+        const delayMs = retryAfterMs ?? computeBackoffDelay(retryCount + 1);
+        log.warn('Retrying GET request after transient error', {
+          url: originalRequest.url,
+          attempt: originalRequest._retryCount,
+          delayMs,
+        });
+        await sleep(delayMs);
+        return apiClient(originalRequest);
+      }
+
       return Promise.reject(error);
     }
   );

package/src/core/services/supabase/realtimeManager.ts

@@ -19,6 +19,7 @@ const MAX_BACKOFF_MS = 30000;
 const realtimeLog = log.extend('realtime');
 const entries = new Map<string, ChannelEntry>();
 let subscriberIdCounter = 0;
+let resetTimer: ReturnType<typeof setTimeout> | null = null;
 
 function clearTimer(entry: ChannelEntry) {
   if (!entry.timer) return;
@@ -65,13 +66,66 @@ function subscribeChannel(entry: ChannelEntry) {
     if (entry.channel) supabase.removeChannel(entry.channel);
     const channel = buildChannel(entry);
     entry.channel = channel;
-    channel.subscribe((status) => handleStatus(entry, status));
+    channel.subscribe((status: string) => handleStatus(entry, status));
   } catch (error) {
     realtimeLog.warn('[realtime] subscribe failed', error);
     scheduleResubscribe(entry, 'SUBSCRIBE_FAILED');
   }
 }
 
+function unsubscribeChannel(entry: ChannelEntry) {
+  if (!entry.channel) return;
+  try {
+    entry.channel.unsubscribe?.();
+  } catch (error) {
+    realtimeLog.warn('[realtime] unsubscribe failed', error);
+  }
+  entry.channel = null;
+}
+
+export function resetRealtimeState(reason: string) {
+  realtimeLog.warn(`[realtime] reset state ${reason}`);
+  entries.forEach((entry) => {
+    clearTimer(entry);
+    entry.backoffMs = INITIAL_BACKOFF_MS;
+    unsubscribeChannel(entry);
+  });
+  entries.clear();
+}
+
+function resubscribeAll() {
+  entries.forEach((entry) => {
+    if (entry.subscribers.size === 0) return;
+    subscribeChannel(entry);
+  });
+}
+
+export function resetRealtime(reason: string) {
+  if (resetTimer) return;
+  resetTimer = setTimeout(() => {
+    resetTimer = null;
+    const supabase = getSupabaseClient();
+    realtimeLog.warn(`[realtime] full reset ${reason}`);
+    entries.forEach((entry) => {
+      clearTimer(entry);
+      entry.backoffMs = INITIAL_BACKOFF_MS;
+      if (entry.channel) supabase.removeChannel(entry.channel);
+      entry.channel = null;
+    });
+    try {
+      supabase.realtime?.disconnect?.();
+    } catch (error) {
+      realtimeLog.warn('[realtime] disconnect failed', error);
+    }
+    try {
+      supabase.realtime?.connect?.();
+    } catch (error) {
+      realtimeLog.warn('[realtime] connect failed', error);
+    }
+    resubscribeAll();
+  }, 250);
+}
+
 export function subscribeManagedChannel(key: string, configure: ChannelConfigurer): () => void {
   let entry = entries.get(key);
   if (!entry) {

package/src/data/agent/types.ts

@@ -10,6 +10,7 @@ export type EditAgentAppRequest = {
   thread_id: string;
   app_id: string;
   attachments?: AttachmentMeta[];
+  idempotencyKey?: string;
 };
 
 export type AgentCreateAppResult = {

package/src/data/apps/bundles/remote.ts

@@ -29,7 +29,8 @@ class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDat
 
   async getById(appId: string, bundleId: string): Promise<ServiceResponse<Bundle>> {
     const { data } = await api.get<ServiceResponse<Bundle>>(
-      `/v1/apps/${encodeURIComponent(appId)}/bundles/${encodeURIComponent(bundleId)}`
+      `/v1/apps/${encodeURIComponent(appId)}/bundles/${encodeURIComponent(bundleId)}`,
+      { skipRetry: true }
     );
     return data;
   }
@@ -41,7 +42,7 @@ class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDat
   ): Promise<ServiceResponse<{ url: string; redirect: boolean }>> {
     const { data } = await api.get<ServiceResponse<{ url: string; redirect: boolean }>>(
       `/v1/apps/${encodeURIComponent(appId)}/bundles/${encodeURIComponent(bundleId)}/download`,
-      { params: { redirect: options?.redirect ?? false } }
+      { params: { redirect: options?.redirect ?? false }, skipRetry: true }
     );
     return data;
   }
@@ -53,7 +54,7 @@ class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDat
   ): Promise<ServiceResponse<{ url: string; redirect: boolean }>> {
     const { data } = await api.get<ServiceResponse<{ url: string; redirect: boolean }>>(
       `/v1/apps/${encodeURIComponent(appId)}/bundles/${encodeURIComponent(bundleId)}/assets/download`,
-      { params: { redirect: options?.redirect ?? false, kind: options?.kind } }
+      { params: { redirect: options?.redirect ?? false, kind: options?.kind }, skipRetry: true }
     );
     return data;
   }

package/src/data/users/types.ts

@@ -2,7 +2,7 @@ export type UserStats = {
   userId: string;
   name: string | null;
   avatar: string | null;
-  approvedOpenedMergeRequests: number;
+  approvedOrMergedMergeRequests: number;
   totalOpenedMergeRequests: number;
 };
 

package/src/index.ts

@@ -2,5 +2,6 @@ export type { ComergeStudioProps } from './studio/ComergeStudio';
 
 export { ComergeStudio } from './studio/ComergeStudio';
 export { setSupabaseClient } from './core/services/supabase';
+export { resetRealtimeState } from './core/services/supabase/realtimeManager';
 
 

package/src/studio/ComergeStudio.tsx

@@ -249,6 +249,8 @@ function ComergeStudioInner({
   const [testingMrId, setTestingMrId] = React.useState<string | null>(null);
   const [syncingUpstream, setSyncingUpstream] = React.useState(false);
   const [upstreamSyncStatus, setUpstreamSyncStatus] = React.useState<SyncUpstreamStatus | null>(null);
+  const isMrTestBuildInProgress = bundle.loading && bundle.loadingMode === 'test';
+  const isBaseBundleDownloading = bundle.loading && bundle.loadingMode === 'base' && !bundle.isTesting;
 
   // Show typing dots when the last message isn't an outcome (agent still working).
   const chatShowTypingIndicator = React.useMemo(() => {
@@ -321,6 +323,7 @@ function ComergeStudioInner({
           isOwner={actions.isOwner}
           shouldForkOnEdit={actions.shouldForkOnEdit}
           isTesting={bundle.isTesting}
+          isBaseBundleDownloading={isBaseBundleDownloading}
           onRestoreBase={async () => {
             setTestingMrId(null);
             await bundle.restoreBase();
@@ -329,11 +332,11 @@ function ComergeStudioInner({
           outgoingMergeRequests={mergeRequests.lists.outgoing}
           creatorStatsById={mergeRequests.creatorStatsById}
           processingMrId={processingMrId}
-          isBuildingMrTest={bundle.loading}
+          isBuildingMrTest={isMrTestBuildInProgress}
           testingMrId={testingMrId}
           toMergeRequestSummary={mergeRequests.toSummary}
           onSubmitMergeRequest={
-            app?.forkedFromAppId && actions.isOwner && !hasOpenOutgoingMr
+            app?.forkedFromAppId && actions.isOwner && !mergeRequests.loading && !hasOpenOutgoingMr
               ? async () => {
                   await mergeRequests.actions.openMergeRequest(activeAppId);
                 }
@@ -361,6 +364,7 @@ function ComergeStudioInner({
             }
           }}
           onTestMr={async (mr) => {
+            if (testingMrId === mr.id || bundle.loadingMode === 'test') return;
             setTestingMrId(mr.id);
             await bundle.loadTest({ appId: mr.sourceAppId, commitId: mr.sourceTipCommitId ?? mr.sourceCommitId });
           }}

package/src/studio/hooks/useApp.ts

@@ -7,6 +7,7 @@ import { useForegroundSignal } from './useForegroundSignal';
 export type UseAppResult = {
   app: App | null;
   loading: boolean;
+  refreshing: boolean;
   error: Error | null;
   refetch: () => Promise<void>;
 };
@@ -23,8 +24,14 @@ export function useApp(appId: string, options?: UseAppOptions): UseAppResult {
   const enabled = options?.enabled ?? true;
   const [app, setApp] = React.useState<App | null>(null);
   const [loading, setLoading] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
   const foregroundSignal = useForegroundSignal(enabled && Boolean(appId));
+  const hasLoadedOnceRef = React.useRef(false);
+
+  React.useEffect(() => {
+    hasLoadedOnceRef.current = false;
+  }, [appId]);
 
   const mergeApp = React.useCallback((prev: App | null, next: App): App => {
     // Realtime (Supabase) rows don't include "viewer-specific" fields like `isLiked`,
@@ -38,21 +45,32 @@ export function useApp(appId: string, options?: UseAppOptions): UseAppResult {
     return merged;
   }, []);
 
-  const fetchOnce = React.useCallback(async () => {
+  const fetchOnce = React.useCallback(async (opts?: { background?: boolean }) => {
     if (!enabled) return;
     if (!appId) return;
-    setLoading(true);
+    const isBackground = Boolean(opts?.background);
+    const useBackgroundRefresh = isBackground && hasLoadedOnceRef.current;
+    if (useBackgroundRefresh) {
+      setRefreshing(true);
+    } else {
+      setLoading(true);
+    }
     setError(null);
     try {
       const next = await appsRepository.getById(appId);
+      hasLoadedOnceRef.current = true;
       setApp((prev) => mergeApp(prev, next));
     } catch (e) {
       setError(e instanceof Error ? e : new Error(String(e)));
       setApp(null);
     } finally {
-      setLoading(false);
+      if (useBackgroundRefresh) {
+        setRefreshing(false);
+      } else {
+        setLoading(false);
+      }
     }
-  }, [appId, enabled]);
+  }, [appId, enabled, mergeApp]);
 
   React.useEffect(() => {
     if (!enabled) return;
@@ -80,10 +98,10 @@ export function useApp(appId: string, options?: UseAppOptions): UseAppResult {
     if (!enabled) return;
     if (!appId) return;
     if (foregroundSignal <= 0) return;
-    void fetchOnce();
+    void fetchOnce({ background: true });
   }, [appId, enabled, fetchOnce, foregroundSignal]);
 
-  return { app, loading, error, refetch: fetchOnce };
+  return { app, loading, refreshing, error, refetch: fetchOnce };
 }
 
 

package/src/studio/hooks/useBundleManager.ts

@@ -560,6 +560,7 @@ export function useBundleManager({
   const baseOpIdRef = React.useRef(0);
   const testOpIdRef = React.useRef(0);
   const activeLoadModeRef = React.useRef<'base' | 'test' | null>(null);
+  const desiredModeRef = React.useRef<'base' | 'test'>('base');
 
   const canRequestLatestRef = React.useRef<boolean>(canRequestLatest);
   React.useEffect(() => {
@@ -661,6 +662,12 @@ export function useBundleManager({
   const load = React.useCallback(async (src: BundleSource, mode: 'base' | 'test') => {
     if (!src.appId) return;
 
+    if (mode === 'test') {
+      // Testing takes precedence over any in-flight base refresh.
+      desiredModeRef.current = 'test';
+      baseOpIdRef.current += 1;
+    }
+
     const canRequestLatest = canRequestLatestRef.current;
     if (mode === 'base' && !canRequestLatest) {
       await activateCachedBase(src.appId);
@@ -674,7 +681,7 @@ export function useBundleManager({
     setError(null);
     setStatusLabel(mode === 'test' ? 'Loading test bundle…' : 'Loading latest build…');
 
-    if (mode === 'base') {
+    if (mode === 'base' && desiredModeRef.current === 'base') {
       void activateCachedBase(src.appId);
     }
 
@@ -682,6 +689,7 @@ export function useBundleManager({
       const { bundlePath: path, bundle } = await resolveBundlePath(src, platform, mode);
       if (mode === 'base' && opId !== baseOpIdRef.current) return;
       if (mode === 'test' && opId !== testOpIdRef.current) return;
+      if (desiredModeRef.current !== mode) return;
       setBundlePath(path);
       const fingerprint = bundle.checksumSha256 ?? `id:${bundle.id}`;
 
@@ -750,6 +758,9 @@ export function useBundleManager({
   const restoreBase = React.useCallback(async () => {
     const src = baseRef.current;
     if (!src.appId) return;
+    desiredModeRef.current = 'base';
+    // Exiting test mode should drop any in-flight test completion.
+    testOpIdRef.current += 1;
     await activateCachedBase(src.appId);
     if (canRequestLatestRef.current) {
       await load(src, 'base');

package/src/studio/hooks/useForegroundSignal.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AppState, type AppStateStatus } from 'react-native';
 
-import { getSupabaseClient } from '../../core/services/supabase';
+import { resetRealtimeState } from '../../core/services/supabase/realtimeManager';
 
 export function useForegroundSignal(enabled: boolean = true): number {
   const [signal, setSignal] = React.useState(0);
@@ -19,10 +19,8 @@ export function useForegroundSignal(enabled: boolean = true): number {
       if (!didResume) return;
 
       try {
-        const supabase = getSupabaseClient();
-        supabase?.realtime?.connect?.();
+        resetRealtimeState('APP_RESUME');
       } catch {
-        
       }
 
       setSignal((s) => s + 1);

package/src/studio/hooks/useMergeRequests.ts

@@ -54,10 +54,14 @@ export function useMergeRequests(params: { appId: string }): UseMergeRequestsRes
   const { appId } = params;
   const [incoming, setIncoming] = React.useState<MergeRequest[]>([]);
   const [outgoing, setOutgoing] = React.useState<MergeRequest[]>([]);
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(() => Boolean(appId));
   const [error, setError] = React.useState<Error | null>(null);
   const [creatorStatsById, setCreatorStatsById] = React.useState<Record<string, UserStats>>({});
 
+  React.useEffect(() => {
+    setLoading(Boolean(appId));
+  }, [appId]);
+
   const pollUntilMerged = React.useCallback(async (mrId: string) => {
     const startedAt = Date.now();
     const timeoutMs = 2 * 60 * 1000;
@@ -74,6 +78,7 @@ export function useMergeRequests(params: { appId: string }): UseMergeRequestsRes
       setIncoming([]);
       setOutgoing([]);
       setCreatorStatsById({});
+      setLoading(false);
       return;
     }
     setLoading(true);

package/src/studio/hooks/useOptimisticChatMessages.ts

@@ -13,14 +13,18 @@ export type UseOptimisticChatMessagesParams = {
 export type UseOptimisticChatMessagesResult = {
   messages: ChatMessage[];
   onSend: (text: string, attachments?: string[]) => Promise<void>;
+  onRetry: (messageId: string) => Promise<void>;
+  isRetrying: (messageId: string) => boolean;
 };
 
 type OptimisticChatMessage = {
   id: string;
   content: string;
+  attachments?: string[];
   createdAtIso: string;
   baseServerLastId: string | null;
   failed: boolean;
+  retrying: boolean;
 };
 
 function makeOptimisticId() {
@@ -115,8 +119,20 @@ export function useOptimisticChatMessages({
       const createdAtIso = new Date().toISOString();
       const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1]!.id : null;
       const id = makeOptimisticId();
-
-      setOptimisticChat((prev) => [...prev, { id, content: text, createdAtIso, baseServerLastId, failed: false }]);
+      const normalizedAttachments = attachments && attachments.length > 0 ? [...attachments] : undefined;
+
+      setOptimisticChat((prev) => [
+        ...prev,
+        {
+          id,
+          content: text,
+          attachments: normalizedAttachments,
+          createdAtIso,
+          baseServerLastId,
+          failed: false,
+          retrying: false,
+        },
+      ]);
 
       void Promise.resolve(onSendChat(text, attachments)).catch(() => {
         setOptimisticChat((prev) => prev.map((m) => (m.id === id ? { ...m, failed: true } : m)));
@@ -125,6 +141,42 @@ export function useOptimisticChatMessages({
     [chatMessages, disableOptimistic, onSendChat, shouldForkOnEdit]
   );
 
-  return { messages, onSend };
+  const onRetry = React.useCallback(
+    async (messageId: string) => {
+      if (shouldForkOnEdit || disableOptimistic) return;
+      const target = optimisticChat.find((m) => m.id === messageId);
+      if (!target || target.retrying) return;
+
+      const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1]!.id : null;
+      setOptimisticChat((prev) =>
+        prev.map((m) =>
+          m.id === messageId
+            ? { ...m, failed: false, retrying: true, baseServerLastId }
+            : m
+        )
+      );
+
+      try {
+        await onSendChat(target.content, target.attachments);
+        setOptimisticChat((prev) =>
+          prev.map((m) => (m.id === messageId ? { ...m, retrying: false } : m))
+        );
+      } catch {
+        setOptimisticChat((prev) =>
+          prev.map((m) => (m.id === messageId ? { ...m, failed: true, retrying: false } : m))
+        );
+      }
+    },
+    [chatMessages, disableOptimistic, onSendChat, optimisticChat, shouldForkOnEdit]
+  );
+
+  const isRetrying = React.useCallback(
+    (messageId: string) => {
+      return optimisticChat.some((m) => m.id === messageId && m.retrying);
+    },
+    [optimisticChat]
+  );
+
+  return { messages, onSend, onRetry, isRetrying };
 }
 

package/src/studio/hooks/useStudioActions.ts

@@ -5,6 +5,53 @@ import { appsRepository } from '../../data/apps/repository';
 import { agentRepository } from '../../data/agent/repository';
 import type { AttachmentMeta } from '../../data/attachment/types';
 
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function isRetryableNetworkError(e: unknown): boolean {
+  const err = e as any;
+  const code = typeof err?.code === 'string' ? err.code : '';
+  const message = typeof err?.message === 'string' ? err.message : '';
+
+  if (code === 'ERR_NETWORK' || code === 'ECONNABORTED') return true;
+  if (message.toLowerCase().includes('network error')) return true;
+  if (message.toLowerCase().includes('timeout')) return true;
+
+  const status = typeof err?.response?.status === 'number' ? err.response.status : undefined;
+  if (status && (status === 429 || status >= 500)) return true;
+
+  return false;
+}
+
+async function withRetry<T>(
+  fn: () => Promise<T>,
+  opts: { attempts: number; baseDelayMs: number; maxDelayMs: number }
+): Promise<T> {
+  let lastErr: unknown = null;
+  for (let attempt = 1; attempt <= opts.attempts; attempt += 1) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastErr = e;
+      const retryable = isRetryableNetworkError(e);
+      if (!retryable || attempt >= opts.attempts) {
+        throw e;
+      }
+      const exp = Math.min(opts.maxDelayMs, opts.baseDelayMs * Math.pow(2, attempt - 1));
+      const jitter = Math.floor(Math.random() * 250);
+      await sleep(exp + jitter);
+    }
+  }
+  throw lastErr;
+}
+
+function generateIdempotencyKey(): string {
+  const rnd = globalThis.crypto?.randomUUID?.();
+  if (rnd) return `edit:${rnd}`;
+  return `edit:${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
 export type UseStudioActionsParams = {
   userId: string | null;
   /**
@@ -79,12 +126,19 @@ export function useStudioActions({
           attachmentMetas = await uploadAttachments({ threadId, appId: targetApp.id, dataUrls: attachments });
         }
 
-        const editResult = await agentRepository.editApp({
-          prompt,
-          thread_id: threadId,
-          app_id: targetApp.id,
-          attachments: attachmentMetas && attachmentMetas.length > 0 ? attachmentMetas : undefined,
-        });
+        const idempotencyKey = generateIdempotencyKey();
+        const editResult = await withRetry(
+          async () => {
+            return await agentRepository.editApp({
+              prompt,
+              thread_id: threadId,
+              app_id: targetApp.id,
+              attachments: attachmentMetas && attachmentMetas.length > 0 ? attachmentMetas : undefined,
+              idempotencyKey,
+            });
+          },
+          { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+        );
         onEditQueued?.({
           queueItemId: editResult.queueItemId ?? null,
           queuePosition: editResult.queuePosition ?? null,

package/src/studio/hooks/useThreadMessages.ts

@@ -9,6 +9,7 @@ export type UseThreadMessagesResult = {
   raw: Message[];
   messages: ChatMessage[];
   loading: boolean;
+  refreshing: boolean;
   error: Error | null;
   refetch: () => Promise<void>;
 };
@@ -78,9 +79,15 @@ function mapMessageToChatMessage(m: Message): ChatMessage {
 export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   const [raw, setRaw] = React.useState<Message[]>([]);
   const [loading, setLoading] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
   const activeRequestIdRef = React.useRef(0);
   const foregroundSignal = useForegroundSignal(Boolean(threadId));
+  const hasLoadedOnceRef = React.useRef(false);
+
+  React.useEffect(() => {
+    hasLoadedOnceRef.current = false;
+  }, [threadId]);
 
   const upsertSorted = React.useCallback((prev: Message[], m: Message) => {
     const next = prev.filter((x) => x.id !== m.id);
@@ -89,24 +96,38 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
     return next;
   }, []);
 
-  const refetch = React.useCallback(async () => {
+  const refetch = React.useCallback(async (opts?: { background?: boolean }) => {
     if (!threadId) {
       setRaw([]);
+      setLoading(false);
+      setRefreshing(false);
       return;
     }
     const requestId = ++activeRequestIdRef.current;
-    setLoading(true);
+    const isBackground = Boolean(opts?.background);
+    const useBackgroundRefresh = isBackground && hasLoadedOnceRef.current;
+    if (useBackgroundRefresh) {
+      setRefreshing(true);
+    } else {
+      setLoading(true);
+    }
     setError(null);
     try {
       const list = await messagesRepository.list(threadId);
       if (activeRequestIdRef.current !== requestId) return;
+      hasLoadedOnceRef.current = true;
       setRaw([...list].sort(compareMessages));
     } catch (e) {
       if (activeRequestIdRef.current !== requestId) return;
       setError(e instanceof Error ? e : new Error(String(e)));
       setRaw([]);
     } finally {
-      if (activeRequestIdRef.current === requestId) setLoading(false);
+      if (activeRequestIdRef.current !== requestId) return;
+      if (useBackgroundRefresh) {
+        setRefreshing(false);
+      } else {
+        setLoading(false);
+      }
     }
   }, [threadId]);
 
@@ -127,7 +148,7 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
   React.useEffect(() => {
     if (!threadId) return;
     if (foregroundSignal <= 0) return;
-    void refetch();
+    void refetch({ background: true });
   }, [foregroundSignal, refetch, threadId]);
 
   const messages = React.useMemo(() => {
@@ -136,7 +157,7 @@ export function useThreadMessages(threadId: string): UseThreadMessagesResult {
     return resolved.map(mapMessageToChatMessage);
   }, [raw]);
 
-  return { raw, messages, loading, error, refetch };
+  return { raw, messages, loading, refreshing, error, refetch };
 }