@comergehq/studio 0.1.26 → 0.1.27

package/src/studio/ComergeStudio.tsx

@@ -16,6 +16,7 @@ import { StudioOverlay } from './ui/StudioOverlay';
 import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
 import { useEditQueue } from './hooks/useEditQueue';
 import { useEditQueueActions } from './hooks/useEditQueueActions';
+import { useAgentRunProgress } from './hooks/useAgentRunProgress';
 import { appsRepository } from '../data/apps/repository';
 import type { SyncUpstreamStatus } from '../data/apps/types';
 
@@ -26,6 +27,7 @@ export type ComergeStudioProps = {
   onNavigateHome?: () => void;
   style?: ViewStyle;
   showBubble?: boolean;
+  enableAgentProgress?: boolean;
   studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
   embeddedBaseBundles?: EmbeddedBaseBundles;
 };
@@ -37,6 +39,7 @@ export function ComergeStudio({
   onNavigateHome,
   style,
   showBubble = true,
+  enableAgentProgress = true,
   studioControlOptions,
   embeddedBaseBundles,
 }: ComergeStudioProps) {
@@ -72,6 +75,7 @@ export function ComergeStudio({
               captureTargetRef={captureTargetRef}
               style={style}
               showBubble={showBubble}
+              enableAgentProgress={enableAgentProgress}
               studioControlOptions={studioControlOptions}
               embeddedBaseBundles={embeddedBaseBundles}
             />
@@ -96,6 +100,7 @@ type InnerProps = {
   captureTargetRef: React.RefObject<View | null>;
   style?: ViewStyle;
   showBubble: boolean;
+  enableAgentProgress: boolean;
   studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
   embeddedBaseBundles?: EmbeddedBaseBundles;
 };
@@ -114,6 +119,7 @@ function ComergeStudioInner({
   captureTargetRef,
   style,
   showBubble,
+  enableAgentProgress,
   studioControlOptions,
   embeddedBaseBundles,
 }: InnerProps) {
@@ -179,6 +185,7 @@ function ComergeStudioInner({
   const threadId = app?.threadId ?? '';
   const thread = useThreadMessages(threadId);
   const editQueue = useEditQueue(activeAppId);
+  const agentProgress = useAgentRunProgress(threadId, { enabled: enableAgentProgress });
   const editQueueActions = useEditQueueActions(activeAppId);
   const [lastEditQueueInfo, setLastEditQueueInfo] = React.useState<{
     queueItemId?: string | null;
@@ -251,14 +258,20 @@ function ComergeStudioInner({
   const [upstreamSyncStatus, setUpstreamSyncStatus] = React.useState<SyncUpstreamStatus | null>(null);
   const isMrTestBuildInProgress = bundle.loading && bundle.loadingMode === 'test';
   const isBaseBundleDownloading = bundle.loading && bundle.loadingMode === 'base' && !bundle.isTesting;
+  const runtimePreparingText =
+    bundle.bundleStatus === 'pending'
+      ? 'Bundling app… this may take a few minutes'
+      : 'Preparing app…';
 
   // Show typing dots when the last message isn't an outcome (agent still working).
   const chatShowTypingIndicator = React.useMemo(() => {
+    if (agentProgress.hasLiveProgress) return false;
     if (!thread.raw || thread.raw.length === 0) return false;
     const last = thread.raw[thread.raw.length - 1];
     const payloadType = typeof (last.payload as any)?.type === 'string' ? String((last.payload as any).type) : undefined;
     return payloadType !== 'outcome';
-  }, [thread.raw]);
+  }, [agentProgress.hasLiveProgress, thread.raw]);
+  const showChatProgress = agentProgress.hasLiveProgress || Boolean(agentProgress.view.bundle?.active);
 
   React.useEffect(() => {
     updateLastEditQueueInfo(null);
@@ -311,6 +324,7 @@ function ComergeStudioInner({
         <RuntimeRenderer
           appKey={appKey}
           bundlePath={bundle.bundlePath}
+          preparingText={runtimePreparingText}
           forcePreparing={showPostEditPreparing}
           renderToken={bundle.renderToken}
           allowInitialPreparing={!embeddedBaseBundles}
@@ -377,6 +391,7 @@ function ComergeStudioInner({
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
           chatQueueItems={chatQueueItems}
           onRemoveQueueItem={(id) => editQueueActions.cancel(id)}
+          chatProgress={showChatProgress ? agentProgress.view : null}
           onNavigateHome={onNavigateHome}
           showBubble={showBubble}
           studioControlOptions={studioControlOptions}

package/src/studio/hooks/useAgentRunProgress.ts

@@ -0,0 +1,357 @@
+import * as React from 'react';
+
+import { agentProgressRepository } from '../../data/agent-progress/repository';
+import type { AgentProgressPhase, AgentRun, AgentRunEvent, AgentTodoSummary } from '../../data/agent-progress/types';
+import { useForegroundSignal } from './useForegroundSignal';
+
+type BundleStage = 'queued' | 'building' | 'fixing' | 'retrying' | 'finalizing' | 'ready' | 'failed';
+
+export type AgentBundleProgressView = {
+  active: boolean;
+  status: 'loading' | 'succeeded' | 'failed';
+  phaseLabel: string;
+  progressValue: number;
+  errorMessage: string | null;
+  platform: 'ios' | 'android' | 'both';
+};
+
+export type AgentRunProgressView = {
+  runId: string | null;
+  status: AgentRun['status'] | null;
+  phase: AgentProgressPhase | null;
+  latestMessage: string | null;
+  changedFilesCount: number;
+  recentFiles: string[];
+  todoSummary: AgentTodoSummary | null;
+  bundle: AgentBundleProgressView | null;
+  events: AgentRunEvent[];
+};
+
+export type UseAgentRunProgressResult = {
+  run: AgentRun | null;
+  view: AgentRunProgressView;
+  loading: boolean;
+  error: Error | null;
+  hasLiveProgress: boolean;
+  refetch: () => Promise<void>;
+};
+
+function upsertBySeq(prev: AgentRunEvent[], next: AgentRunEvent): AgentRunEvent[] {
+  const map = new Map<number, AgentRunEvent>();
+  for (const item of prev) map.set(item.seq, item);
+  map.set(next.seq, next);
+  return Array.from(map.values()).sort((a, b) => a.seq - b.seq);
+}
+
+function mergeMany(prev: AgentRunEvent[], incoming: AgentRunEvent[]): AgentRunEvent[] {
+  if (incoming.length === 0) return prev;
+  const map = new Map<number, AgentRunEvent>();
+  for (const item of prev) map.set(item.seq, item);
+  for (const item of incoming) map.set(item.seq, item);
+  return Array.from(map.values()).sort((a, b) => a.seq - b.seq);
+}
+
+function toMs(v: string | null | undefined): number {
+  if (!v) return 0;
+  const n = Date.parse(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function shouldSwitchRun(current: AgentRun | null, candidate: AgentRun): boolean {
+  if (!current) return true;
+  if (candidate.id === current.id) return true;
+  return toMs(candidate.startedAt) >= toMs(current.startedAt);
+}
+
+function toInt(value: unknown): number {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function toBundleStage(value: unknown): BundleStage | null {
+  if (value === 'queued') return 'queued';
+  if (value === 'building') return 'building';
+  if (value === 'fixing') return 'fixing';
+  if (value === 'retrying') return 'retrying';
+  if (value === 'finalizing') return 'finalizing';
+  if (value === 'ready') return 'ready';
+  if (value === 'failed') return 'failed';
+  return null;
+}
+
+function toBundlePlatform(value: unknown): 'ios' | 'android' | 'both' {
+  if (value === 'ios' || value === 'android') return value;
+  return 'both';
+}
+
+function clamp01(value: number): number {
+  if (value <= 0) return 0;
+  if (value >= 1) return 1;
+  return value;
+}
+
+function defaultBundleLabel(stage: BundleStage): string {
+  if (stage === 'queued') return 'Queued for build';
+  if (stage === 'building') return 'Building bundle';
+  if (stage === 'fixing') return 'Applying auto-fix';
+  if (stage === 'retrying') return 'Retrying bundle';
+  if (stage === 'finalizing') return 'Finalizing artifacts';
+  if (stage === 'ready') return 'Bundle ready';
+  if (stage === 'failed') return 'Bundle failed';
+  return 'Building bundle';
+}
+
+function fallbackBundleProgress(stage: BundleStage, startedAtMs: number, nowMs: number): number {
+  if (stage === 'ready') return 1;
+  if (stage === 'failed') return 0.96;
+  const elapsed = Math.max(0, nowMs - startedAtMs);
+  const expectedMs = 60_000;
+  if (elapsed <= expectedMs) {
+    const t = clamp01(elapsed / expectedMs);
+    return 0.05 + 0.85 * (1 - Math.pow(1 - t, 2));
+  }
+  const over = elapsed - expectedMs;
+  return Math.min(0.9 + 0.07 * (1 - Math.exp(-over / 25_000)), 0.97);
+}
+
+function deriveView(run: AgentRun | null, events: AgentRunEvent[], nowMs: number): AgentRunProgressView {
+  const files: string[] = [];
+  const fileSeen = new Set<string>();
+  let todoSummary: AgentTodoSummary | null = null;
+  let latestMessage: string | null = null;
+  let phase = run?.currentPhase ?? null;
+  let bundleStage: BundleStage | null = null;
+  let bundleLabel: string | null = null;
+  let bundleError: string | null = null;
+  let bundleProgressHint: number | null = null;
+  let bundlePlatform: 'ios' | 'android' | 'both' = 'both';
+  let bundleStartedAtMs: number | null = null;
+  let lastBundleSig: string | null = null;
+
+  for (const ev of events) {
+    if (ev.eventType === 'phase_changed') {
+      if (typeof ev.payload?.message === 'string') latestMessage = ev.payload.message;
+      if (ev.phase) phase = ev.phase;
+    }
+    if (ev.eventType === 'file_changed') {
+      if (ev.path && !fileSeen.has(ev.path)) {
+        fileSeen.add(ev.path);
+        files.push(ev.path);
+      }
+    }
+    if (ev.eventType === 'todo_updated') {
+      todoSummary = {
+        total: toInt(ev.payload?.total),
+        pending: toInt(ev.payload?.pending),
+        inProgress: toInt(ev.payload?.inProgress),
+        completed: toInt(ev.payload?.completed),
+        currentTask: typeof ev.payload?.currentTask === 'string' ? ev.payload.currentTask : null,
+      };
+    }
+
+    const stageType = typeof ev.payload?.stage === 'string' ? ev.payload.stage : null;
+    if (stageType !== 'bundle') continue;
+    const nextStage = toBundleStage(ev.payload?.bundlePhase);
+    if (!nextStage) continue;
+    const nextPlatform = toBundlePlatform(ev.payload?.platform);
+    const message = typeof ev.payload?.message === 'string' ? ev.payload.message : null;
+    const phaseLabel = message || (typeof ev.payload?.message === 'string' ? ev.payload.message : null);
+    const hintRaw = Number(ev.payload?.progressHint);
+    const progressHint = Number.isFinite(hintRaw) ? clamp01(hintRaw) : null;
+    const errorText = typeof ev.payload?.error === 'string' ? ev.payload.error : null;
+    const sig = `${ev.seq}:${nextStage}:${nextPlatform}:${progressHint ?? 'none'}:${phaseLabel ?? 'none'}:${errorText ?? 'none'}`;
+    if (sig === lastBundleSig) continue;
+    lastBundleSig = sig;
+    bundleStage = nextStage;
+    bundlePlatform = nextPlatform;
+    if (phaseLabel) bundleLabel = phaseLabel;
+    if (progressHint != null) bundleProgressHint = progressHint;
+    if (errorText) bundleError = errorText;
+    const evMs = toMs(ev.createdAt);
+    if (!bundleStartedAtMs && evMs > 0) bundleStartedAtMs = evMs;
+  }
+
+  if (!latestMessage) {
+    if (phase === 'planning') latestMessage = 'Planning changes...';
+    else if (phase === 'analyzing') latestMessage = 'Analyzing relevant files...';
+    else if (phase === 'editing') latestMessage = 'Applying code updates...';
+    else if (phase === 'validating') latestMessage = 'Validating updates...';
+    else if (phase === 'finalizing') latestMessage = 'Finalizing response...';
+    else if (phase) latestMessage = `Working (${phase})...`;
+  }
+
+  const runFinished = run?.status === 'succeeded' || run?.status === 'failed' || run?.status === 'cancelled';
+  let bundle: AgentBundleProgressView | null = null;
+  if (bundleStage && !runFinished) {
+    const baseTime = bundleStartedAtMs ?? toMs(run?.startedAt) ?? nowMs;
+    const fallback = fallbackBundleProgress(bundleStage, baseTime || nowMs, nowMs);
+    const value = bundleProgressHint != null ? Math.max(fallback, bundleProgressHint) : fallback;
+    const status = bundleStage === 'failed' ? 'failed' : bundleStage === 'ready' ? 'succeeded' : 'loading';
+    bundle = {
+      active: status === 'loading',
+      status,
+      phaseLabel: bundleLabel || defaultBundleLabel(bundleStage),
+      progressValue: clamp01(value),
+      errorMessage: bundleError,
+      platform: bundlePlatform,
+    };
+  }
+
+  return {
+    runId: run?.id ?? null,
+    status: run?.status ?? null,
+    phase,
+    latestMessage,
+    changedFilesCount: fileSeen.size,
+    recentFiles: files.slice(-5),
+    todoSummary,
+    bundle,
+    events,
+  };
+}
+
+export function useAgentRunProgress(threadId: string, opts?: { enabled?: boolean }): UseAgentRunProgressResult {
+  const enabled = Boolean(opts?.enabled ?? true);
+  const [run, setRun] = React.useState<AgentRun | null>(null);
+  const [events, setEvents] = React.useState<AgentRunEvent[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+  const activeRequestIdRef = React.useRef(0);
+  const lastSeqRef = React.useRef(0);
+  const runRef = React.useRef<AgentRun | null>(null);
+  const foregroundSignal = useForegroundSignal(Boolean(threadId) && enabled);
+  const [bundleTick, setBundleTick] = React.useState(0);
+
+  React.useEffect(() => {
+    lastSeqRef.current = 0;
+    runRef.current = null;
+  }, [threadId]);
+
+  React.useEffect(() => {
+    runRef.current = run;
+  }, [run]);
+
+  const refetch = React.useCallback(async () => {
+    if (!threadId || !enabled) {
+      setRun(null);
+      setEvents([]);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    const requestId = ++activeRequestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const latestRun = await agentProgressRepository.getLatestRun(threadId);
+      if (activeRequestIdRef.current !== requestId) return;
+      if (!latestRun) {
+        setRun(null);
+        setEvents([]);
+        lastSeqRef.current = 0;
+        return;
+      }
+      const initialEvents = await agentProgressRepository.listEvents(latestRun.id);
+      if (activeRequestIdRef.current !== requestId) return;
+      const sorted = [...initialEvents].sort((a, b) => a.seq - b.seq);
+      setRun(latestRun);
+      setEvents(sorted);
+      lastSeqRef.current = sorted.length > 0 ? sorted[sorted.length - 1]!.seq : 0;
+    } catch (e) {
+      if (activeRequestIdRef.current !== requestId) return;
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setRun(null);
+      setEvents([]);
+      lastSeqRef.current = 0;
+    } finally {
+      if (activeRequestIdRef.current === requestId) setLoading(false);
+    }
+  }, [enabled, threadId]);
+
+  React.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+
+  React.useEffect(() => {
+    if (!threadId || !enabled) return;
+    if (foregroundSignal <= 0) return;
+    void refetch();
+  }, [enabled, foregroundSignal, refetch, threadId]);
+
+  React.useEffect(() => {
+    if (!threadId || !enabled) return;
+    const unsubRuns = agentProgressRepository.subscribeThreadRuns(threadId, {
+      onInsert: (nextRun) => {
+        const currentRun = runRef.current;
+        if (!shouldSwitchRun(currentRun, nextRun)) return;
+        setRun(nextRun);
+        runRef.current = nextRun;
+        if (!currentRun || currentRun.id !== nextRun.id) {
+          lastSeqRef.current = 0;
+          setEvents([]);
+          void agentProgressRepository
+            .listEvents(nextRun.id)
+            .then((initial) => {
+              if (runRef.current?.id !== nextRun.id) return;
+              setEvents((prev) => mergeMany(prev, initial));
+              const maxSeq = initial.length > 0 ? initial[initial.length - 1]!.seq : 0;
+              if (maxSeq > lastSeqRef.current) lastSeqRef.current = maxSeq;
+            })
+            .catch(() => {});
+        }
+      },
+      onUpdate: (nextRun) => {
+        const currentRun = runRef.current;
+        if (!shouldSwitchRun(currentRun, nextRun)) return;
+        setRun(nextRun);
+        runRef.current = nextRun;
+      },
+    });
+    return unsubRuns;
+  }, [enabled, threadId, foregroundSignal]);
+
+  React.useEffect(() => {
+    if (!enabled || !run?.id) return;
+    const runId = run.id;
+    const processIncoming = (incoming: AgentRunEvent) => {
+      if (runRef.current?.id !== runId) return;
+      setEvents((prev) => upsertBySeq(prev, incoming));
+      if (incoming.seq > lastSeqRef.current) {
+        const expectedNext = lastSeqRef.current + 1;
+        const seenSeq = incoming.seq;
+        const currentLast = lastSeqRef.current;
+        lastSeqRef.current = seenSeq;
+        if (seenSeq > expectedNext) {
+          void agentProgressRepository
+            .listEvents(runId, currentLast)
+            .then((missing) => {
+              if (runRef.current?.id !== runId) return;
+              setEvents((prev) => mergeMany(prev, missing));
+              if (missing.length > 0) {
+                const maxSeq = missing[missing.length - 1]!.seq;
+                if (maxSeq > lastSeqRef.current) lastSeqRef.current = maxSeq;
+              }
+            })
+            .catch(() => {});
+        }
+      }
+    };
+    const unsubscribe = agentProgressRepository.subscribeRunEvents(runId, {
+      onInsert: processIncoming,
+      onUpdate: processIncoming,
+    });
+    return unsubscribe;
+  }, [enabled, run?.id, foregroundSignal]);
+
+  const view = React.useMemo(() => deriveView(run, events, Date.now()), [bundleTick, events, run]);
+  React.useEffect(() => {
+    if (!view.bundle?.active) return;
+    const interval = setInterval(() => {
+      setBundleTick((v) => v + 1);
+    }, 300);
+    return () => clearInterval(interval);
+  }, [view.bundle?.active]);
+  const hasLiveProgress = Boolean(run) && run?.status === 'running';
+  return { run, view, loading, error, hasLiveProgress, refetch };
+}
+

package/src/studio/hooks/useBundleManager.ts

@@ -3,7 +3,7 @@ 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, BundleAsset } from '../../data/apps/bundles/types';
+import type { Platform as BundlePlatform, Bundle, BundleAsset, BundleStatus } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
 
 function sleep(ms: number): Promise<void> {
@@ -74,6 +74,7 @@ export type BundleLoadState = {
   renderToken: number;
   loading: boolean;
   loadingMode: 'base' | 'test' | null;
+  bundleStatus: BundleStatus | null;
   statusLabel: string | null;
   error: string | null;
   /**
@@ -473,7 +474,8 @@ async function pollBundle(appId: string, bundleId: string, opts: { timeoutMs: nu
 async function resolveBundlePath(
   src: BundleSource,
   platform: BundlePlatform,
-  mode: 'base' | 'test'
+  mode: 'base' | 'test',
+  onStatus?: (status: BundleStatus) => void
 ): Promise<{ bundlePath: string; label: string; bundle: Bundle }> {
   const { appId, commitId } = src;
   const dir = bundlesCacheDir();
@@ -489,11 +491,13 @@ async function resolveBundlePath(
     },
     { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
   );
+  onStatus?.(initiate.status);
 
   const finalBundle =
     initiate.status === 'succeeded' || initiate.status === 'failed'
       ? initiate
       : await pollBundle(appId, initiate.id, { timeoutMs: 3 * 60 * 1000, intervalMs: 1200 });
+  onStatus?.(finalBundle.status);
 
   if (finalBundle.status === 'failed') {
     throw new Error('Bundle build failed.');
@@ -546,6 +550,7 @@ export function useBundleManager({
   const [renderToken, setRenderToken] = React.useState(0);
   const [loading, setLoading] = React.useState(false);
   const [loadingMode, setLoadingMode] = React.useState<'base' | 'test' | null>(null);
+  const [bundleStatus, setBundleStatus] = React.useState<BundleStatus | null>(null);
   const [statusLabel, setStatusLabel] = React.useState<string | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const [isTesting, setIsTesting] = React.useState(false);
@@ -678,6 +683,7 @@ export function useBundleManager({
     activeLoadModeRef.current = mode;
     setLoading(true);
     setLoadingMode(mode);
+    setBundleStatus(null);
     setError(null);
     setStatusLabel(mode === 'test' ? 'Loading test bundle…' : 'Loading latest build…');
 
@@ -686,10 +692,13 @@ export function useBundleManager({
     }
 
     try {
-      const { bundlePath: path, bundle } = await resolveBundlePath(src, platform, mode);
+      const { bundlePath: path, bundle } = await resolveBundlePath(src, platform, mode, (status) => {
+        setBundleStatus(status);
+      });
       if (mode === 'base' && opId !== baseOpIdRef.current) return;
       if (mode === 'test' && opId !== testOpIdRef.current) return;
       if (desiredModeRef.current !== mode) return;
+      setBundleStatus(bundle.status);
       setBundlePath(path);
       const fingerprint = bundle.checksumSha256 ?? `id:${bundle.id}`;
 
@@ -735,6 +744,7 @@ export function useBundleManager({
     } catch (e) {
       if (mode === 'base' && opId !== baseOpIdRef.current) return;
       if (mode === 'test' && opId !== testOpIdRef.current) return;
+      setBundleStatus('failed');
       const msg = e instanceof Error ? e.message : String(e);
       setError(msg);
       setStatusLabel(null);
@@ -772,7 +782,19 @@ export function useBundleManager({
     void loadBase();
   }, [base.appId, base.commitId, platform, canRequestLatest, loadBase]);
 
-  return { bundlePath, renderToken, loading, loadingMode, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
+  return {
+    bundlePath,
+    renderToken,
+    loading,
+    loadingMode,
+    bundleStatus,
+    statusLabel,
+    error,
+    isTesting,
+    loadBase,
+    loadTest,
+    restoreBase,
+  };
 }
 
 

package/src/studio/ui/ChatPanel.tsx

@@ -12,6 +12,10 @@ 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';
+import { AgentProgressCard } from '../../components/chat/AgentProgressCard';
+import { BundleProgressCard } from '../../components/chat/BundleProgressCard';
+import type { AgentRunProgressView } from '../hooks/useAgentRunProgress';
+import { useTheme } from '../../theme';
 
 export type ChatPanelProps = {
   title?: string;
@@ -34,6 +38,7 @@ export type ChatPanelProps = {
   isRetryingMessage?: (messageId: string) => boolean;
   queueItems?: EditQueueItem[];
   onRemoveQueueItem?: (id: string) => void;
+  progress?: AgentRunProgressView | null;
 };
 
 export function ChatPanel({
@@ -57,7 +62,9 @@ export function ChatPanel({
   isRetryingMessage,
   queueItems = [],
   onRemoveQueueItem,
+  progress = null,
 }: ChatPanelProps) {
+  const theme = useTheme();
   const listRef = React.useRef<ChatMessageListRef | null>(null);
   const [nearBottom, setNearBottom] = React.useState(true);
 
@@ -131,8 +138,12 @@ export function ChatPanel({
     );
   }
 
-  const queueTop = queueItems.length > 0 ? (
-    <ChatQueue items={queueItems} onRemove={onRemoveQueueItem} />
+  const bundleProgress = progress?.bundle ?? null;
+  const queueTop = progress || queueItems.length > 0 ? (
+    <View style={{ gap: theme.spacing.sm }}>
+      {progress ? (bundleProgress ? <BundleProgressCard progress={bundleProgress} /> : <AgentProgressCard progress={progress} />) : null}
+      {queueItems.length > 0 ? <ChatQueue items={queueItems} onRemove={onRemoveQueueItem} /> : null}
+    </View>
   ) : null;
 
   return (

package/src/studio/ui/RuntimeRenderer.tsx

@@ -8,6 +8,10 @@ import { Text } from '../../components/primitives/Text';
 export type RuntimeRendererProps = {
   appKey: string;
   bundlePath: string | null;
+  /**
+   * Loading text shown while runtime cannot render a bundle yet.
+   */
+  preparingText?: string;
   /**
    * When true, show the "Preparing app…" UI even if a previous bundle is available.
    * Used to avoid briefly rendering an outdated bundle during post-edit base refresh.
@@ -28,6 +32,7 @@ export type RuntimeRendererProps = {
 export function RuntimeRenderer({
   appKey,
   bundlePath,
+  preparingText,
   forcePreparing,
   renderToken,
   style,
@@ -48,7 +53,7 @@ export function RuntimeRenderer({
 
     return (
       <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }, style]}>
-        <Text variant="bodyMuted">Preparing app…</Text>
+        <Text variant="bodyMuted">{preparingText ?? 'Preparing app…'}</Text>
       </View>
     );
   }

package/src/studio/ui/StudioOverlay.tsx

@@ -64,6 +64,7 @@ export type StudioOverlayProps = {
   onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
   chatQueueItems?: import('../../data/apps/edit-queue/types').EditQueueItem[];
   onRemoveQueueItem?: (id: string) => void;
+  chatProgress?: import('../hooks/useAgentRunProgress').AgentRunProgressView | null;
 
   // Navigation callbacks
   onNavigateHome?: () => void;
@@ -105,6 +106,7 @@ export function StudioOverlay({
   onSendChat,
   chatQueueItems,
   onRemoveQueueItem,
+  chatProgress,
   onNavigateHome,
   showBubble,
   studioControlOptions,
@@ -287,6 +289,7 @@ export function StudioOverlay({
               isRetryingMessage={optimistic.isRetrying}
               queueItems={queueItemsForChat}
               onRemoveQueueItem={onRemoveQueueItem}
+              progress={chatProgress}
             />
           }
         />