@comergehq/studio 0.1.26 → 0.1.28

package/dist/index.js

@@ -37,12 +37,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/studio/ComergeStudio.tsx
-var React47 = __toESM(require("react"));
-var import_react_native57 = require("react-native");
+var React49 = __toESM(require("react"));
+var import_react_native60 = require("react-native");
 var import_bottom_sheet6 = require("@gorhom/bottom-sheet");
 
 // src/studio/bootstrap/StudioBootstrap.tsx
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 
 // src/components/primitives/Text.tsx
 var import_react_native2 = require("react-native");
@@ -309,6 +309,109 @@ async function ensureAnonymousSession() {
   return { user: data.user, isNew: true };
 }
 
+// src/studio/analytics/client.ts
+var import_react_native3 = require("react-native");
+var import_mixpanel_react_native = require("mixpanel-react-native");
+
+// src/core/logger.ts
+var import_react_native_logs = require("react-native-logs");
+var log = import_react_native_logs.logger.createLogger(
+  {
+    levels: {
+      debug: 0,
+      info: 1,
+      warn: 2,
+      error: 3
+    },
+    severity: "debug",
+    transport: import_react_native_logs.consoleTransport,
+    transportOptions: {
+      colors: {
+        info: "blueBright",
+        warn: "yellowBright",
+        error: "redBright"
+      }
+    },
+    async: true,
+    dateFormat: "time",
+    printLevel: true,
+    printDate: true,
+    fixedExtLvlLength: false,
+    enabled: true
+  }
+);
+
+// src/studio/analytics/client.ts
+var studioMixpanel = null;
+var studioAnalyticsEnabled = false;
+var initPromise = null;
+async function initStudioAnalytics(options) {
+  if (initPromise) return initPromise;
+  initPromise = (async () => {
+    if (!options.enabled) {
+      studioAnalyticsEnabled = false;
+      return;
+    }
+    const token = (options.token ?? "").trim();
+    if (!token) {
+      studioAnalyticsEnabled = false;
+      log.warn("[studio-analytics] disabled: missing Mixpanel token");
+      return;
+    }
+    try {
+      const trackAutomaticEvents = false;
+      const useNative = false;
+      const serverUrl = (options.serverUrl ?? "").trim() || "https://api.mixpanel.com";
+      const superProperties = {
+        runtime: "comerge-studio",
+        platform: import_react_native3.Platform.OS
+      };
+      studioMixpanel = new import_mixpanel_react_native.Mixpanel(token, trackAutomaticEvents, useNative);
+      await studioMixpanel.init(false, superProperties, serverUrl);
+      studioMixpanel.setLoggingEnabled(Boolean(options.debug));
+      studioMixpanel.setFlushBatchSize(50);
+      studioAnalyticsEnabled = true;
+    } catch (error) {
+      studioMixpanel = null;
+      studioAnalyticsEnabled = false;
+      log.warn("[studio-analytics] init failed", error);
+    }
+  })();
+  return initPromise;
+}
+async function trackStudioEvent(eventName, properties) {
+  if (!studioAnalyticsEnabled || !studioMixpanel) return;
+  try {
+    await studioMixpanel.track(eventName, properties);
+  } catch (error) {
+    log.warn("[studio-analytics] track failed", { eventName, error });
+  }
+}
+async function flushStudioAnalytics() {
+  if (!studioAnalyticsEnabled || !studioMixpanel) return;
+  try {
+    await studioMixpanel.flush();
+  } catch (error) {
+    log.warn("[studio-analytics] flush failed", error);
+  }
+}
+async function identifyStudioUser(userId) {
+  if (!studioAnalyticsEnabled || !studioMixpanel || !userId) return;
+  try {
+    await studioMixpanel.identify(userId);
+  } catch (error) {
+    log.warn("[studio-analytics] identify failed", error);
+  }
+}
+async function resetStudioAnalytics() {
+  if (!studioAnalyticsEnabled || !studioMixpanel) return;
+  try {
+    await studioMixpanel.reset();
+  } catch (error) {
+    log.warn("[studio-analytics] reset failed", error);
+  }
+}
+
 // src/studio/bootstrap/useStudioBootstrap.ts
 var SUPABASE_URL = "https://xtfxwbckjpfmqubnsusu.supabase.co";
 var SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh0Znh3YmNranBmbXF1Ym5zdXN1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjA2MDEyMzAsImV4cCI6MjA3NjE3NzIzMH0.dzWGAWrK4CvrmHVHzf8w7JlUZohdap0ZPnLZnABMV8s";
@@ -323,11 +426,23 @@ function useStudioBootstrap(options) {
     (async () => {
       try {
         setClientKey(options.clientKey);
-        const requireAuth = isSupabaseClientInjected();
+        const hasInjectedSupabase = isSupabaseClientInjected();
+        const requireAuth = hasInjectedSupabase;
+        const analyticsEnabled = options.analyticsEnabled ?? hasInjectedSupabase;
+        await initStudioAnalytics({
+          enabled: analyticsEnabled,
+          token: process.env.EXPO_PUBLIC_MIXPANEL_TOKEN,
+          serverUrl: process.env.EXPO_PUBLIC_MIXPANEL_SERVER_URL,
+          debug: __DEV__
+        });
         if (!requireAuth) {
           setSupabaseConfig({ url: SUPABASE_URL, anonKey: SUPABASE_ANON_KEY });
+          await resetStudioAnalytics();
         }
         const { user } = requireAuth ? await ensureAuthenticatedSession() : await ensureAnonymousSession();
+        if (requireAuth) {
+          await identifyStudioUser(user.id);
+        }
         if (cancelled) return;
         setState({ ready: true, userId: user.id, error: null });
       } catch (e) {
@@ -339,19 +454,25 @@ function useStudioBootstrap(options) {
     return () => {
       cancelled = true;
     };
-  }, [options.clientKey]);
+  }, [options.analyticsEnabled, options.clientKey]);
   return state;
 }
 
 // src/studio/bootstrap/StudioBootstrap.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function StudioBootstrap({ children, fallback, renderError, clientKey: clientKey2 }) {
-  const { ready, error, userId } = useStudioBootstrap({ clientKey: clientKey2 });
+function StudioBootstrap({
+  children,
+  fallback,
+  renderError,
+  clientKey: clientKey2,
+  analyticsEnabled
+}) {
+  const { ready, error, userId } = useStudioBootstrap({ clientKey: clientKey2, analyticsEnabled });
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: renderError ? renderError(error) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { variant: "bodyMuted", children: error.message }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: renderError ? renderError(error) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { variant: "bodyMuted", children: error.message }) });
   }
   if (!ready) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { variant: "bodyMuted", children: "Loading\u2026" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { variant: "bodyMuted", children: "Loading\u2026" }) });
   }
   if (typeof children === "function") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: children({ userId: userId ?? "" }) });
@@ -364,36 +485,6 @@ var React3 = __toESM(require("react"));
 
 // src/core/services/http/index.ts
 var import_axios2 = __toESM(require("axios"));
-
-// src/core/logger.ts
-var import_react_native_logs = require("react-native-logs");
-var log = import_react_native_logs.logger.createLogger(
-  {
-    levels: {
-      debug: 0,
-      info: 1,
-      warn: 2,
-      error: 3
-    },
-    severity: "debug",
-    transport: import_react_native_logs.consoleTransport,
-    transportOptions: {
-      colors: {
-        info: "blueBright",
-        warn: "yellowBright",
-        error: "redBright"
-      }
-    },
-    async: true,
-    dateFormat: "time",
-    printLevel: true,
-    printDate: true,
-    fixedExtLvlLength: false,
-    enabled: true
-  }
-);
-
-// src/core/services/http/index.ts
 var RETRYABLE_MAX_ATTEMPTS = 3;
 var RETRYABLE_BASE_DELAY_MS = 500;
 var RETRYABLE_MAX_DELAY_MS = 4e3;
@@ -842,13 +933,13 @@ var appsRepository = new AppsRepositoryImpl(appsRemoteDataSource);
 
 // src/studio/hooks/useForegroundSignal.ts
 var React2 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 function useForegroundSignal(enabled = true) {
   const [signal, setSignal] = React2.useState(0);
-  const lastStateRef = React2.useRef(import_react_native4.AppState.currentState);
+  const lastStateRef = React2.useRef(import_react_native5.AppState.currentState);
   React2.useEffect(() => {
     if (!enabled) return;
-    const sub = import_react_native4.AppState.addEventListener("change", (nextState) => {
+    const sub = import_react_native5.AppState.addEventListener("change", (nextState) => {
       const prevState = lastStateRef.current;
       lastStateRef.current = nextState;
       const didResume = (prevState === "background" || prevState === "inactive") && nextState === "active";
@@ -1208,6 +1299,154 @@ var BundlesRepositoryImpl = class extends BaseRepository {
 };
 var bundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);
 
+// src/studio/analytics/events.ts
+var STUDIO_ANALYTICS_EVENT_VERSION = 1;
+
+// src/studio/analytics/track.ts
+function baseProps() {
+  return { event_version: STUDIO_ANALYTICS_EVENT_VERSION };
+}
+function normalizeError(error) {
+  if (!error) return {};
+  if (typeof error === "string") {
+    return { error_code: error.slice(0, 120), error_domain: "string" };
+  }
+  if (error instanceof Error) {
+    return {
+      error_code: error.message.slice(0, 120),
+      error_domain: error.name || "Error"
+    };
+  }
+  if (typeof error === "object") {
+    const candidate = error;
+    return {
+      error_code: String(candidate.code ?? candidate.message ?? "unknown_error").slice(0, 120),
+      error_domain: candidate.name ?? "object"
+    };
+  }
+  return { error_code: "unknown_error", error_domain: typeof error };
+}
+async function trackMutationEvent(name, payload) {
+  await trackStudioEvent(name, payload);
+  await flushStudioAnalytics();
+}
+var lastOpenCommentsKey = null;
+var lastOpenCommentsAt = 0;
+async function trackRemixApp(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("remix_app", {
+    app_id: params.appId,
+    source_app_id: params.sourceAppId,
+    thread_id: params.threadId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackEditApp(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("edit_app", {
+    app_id: params.appId,
+    thread_id: params.threadId,
+    prompt_length: params.promptLength,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackShareApp(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("share_app", {
+    app_id: params.appId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackOpenMergeRequest(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("open_merge_request", {
+    app_id: params.appId,
+    merge_request_id: params.mergeRequestId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackApproveMergeRequest(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("approve_merge_request", {
+    app_id: params.appId,
+    merge_request_id: params.mergeRequestId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackRejectMergeRequest(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("reject_merge_request", {
+    app_id: params.appId,
+    merge_request_id: params.mergeRequestId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackTestBundle(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("test_bundle", {
+    app_id: params.appId,
+    commit_id: params.commitId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackLikeApp(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("like_app", {
+    app_id: params.appId,
+    source: params.source ?? "unknown",
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackUnlikeApp(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("unlike_app", {
+    app_id: params.appId,
+    source: params.source ?? "unknown",
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+async function trackOpenComments(params) {
+  const key = `${params.appId}:${params.source ?? "unknown"}`;
+  const now = Date.now();
+  if (lastOpenCommentsKey === key && now - lastOpenCommentsAt < 1e3) return;
+  lastOpenCommentsKey = key;
+  lastOpenCommentsAt = now;
+  await trackStudioEvent("open_comments", {
+    app_id: params.appId,
+    source: params.source ?? "unknown",
+    ...baseProps()
+  });
+}
+async function trackSubmitComment(params) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent("submit_comment", {
+    app_id: params.appId,
+    comment_type: "general",
+    comment_length: params.commentLength,
+    success: params.success,
+    ...errorProps,
+    ...baseProps()
+  });
+}
+
 // src/studio/hooks/useBundleManager.ts
 function sleep2(ms) {
   return new Promise((r) => setTimeout(r, ms));
@@ -1524,7 +1763,7 @@ async function pollBundle(appId, bundleId, opts) {
     await sleep2(opts.intervalMs);
   }
 }
-async function resolveBundlePath(src, platform, mode) {
+async function resolveBundlePath(src, platform, mode, onStatus) {
   const { appId, commitId } = src;
   const dir = bundlesCacheDir();
   await ensureDir(dir);
@@ -1538,7 +1777,9 @@ async function resolveBundlePath(src, platform, mode) {
     },
     { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
   );
+  onStatus == null ? void 0 : onStatus(initiate.status);
   const finalBundle = initiate.status === "succeeded" || initiate.status === "failed" ? initiate : await pollBundle(appId, initiate.id, { timeoutMs: 3 * 60 * 1e3, intervalMs: 1200 });
+  onStatus == null ? void 0 : onStatus(finalBundle.status);
   if (finalBundle.status === "failed") {
     throw new Error("Bundle build failed.");
   }
@@ -1580,6 +1821,7 @@ function useBundleManager({
   const [renderToken, setRenderToken] = React5.useState(0);
   const [loading, setLoading] = React5.useState(false);
   const [loadingMode, setLoadingMode] = React5.useState(null);
+  const [bundleStatus, setBundleStatus] = React5.useState(null);
   const [statusLabel, setStatusLabel] = React5.useState(null);
   const [error, setError] = React5.useState(null);
   const [isTesting, setIsTesting] = React5.useState(false);
@@ -1691,16 +1933,20 @@ function useBundleManager({
     activeLoadModeRef.current = mode;
     setLoading(true);
     setLoadingMode(mode);
+    setBundleStatus(null);
     setError(null);
     setStatusLabel(mode === "test" ? "Loading test bundle\u2026" : "Loading latest build\u2026");
     if (mode === "base" && desiredModeRef.current === "base") {
       void activateCachedBase(src.appId);
     }
     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}`;
       const shouldSkipInitialBaseRemount = mode === "base" && initialHydratedBaseFromDiskRef.current && !hasCompletedFirstNetworkBaseLoadRef.current && Boolean(lastBaseFingerprintRef.current) && lastBaseFingerprintRef.current === fingerprint;
@@ -1736,6 +1982,7 @@ 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);
@@ -1751,7 +1998,22 @@ function useBundleManager({
     await load(baseRef.current, "base");
   }, [load]);
   const loadTest = React5.useCallback(async (src) => {
-    await load(src, "test");
+    try {
+      await load(src, "test");
+      await trackTestBundle({
+        appId: src.appId,
+        commitId: src.commitId ?? void 0,
+        success: true
+      });
+    } catch (error2) {
+      await trackTestBundle({
+        appId: src.appId,
+        commitId: src.commitId ?? void 0,
+        success: false,
+        error: error2
+      });
+      throw error2;
+    }
   }, [load]);
   const restoreBase = React5.useCallback(async () => {
     const src = baseRef.current;
@@ -1767,7 +2029,19 @@ function useBundleManager({
     if (!canRequestLatest) return;
     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
+  };
 }
 
 // src/studio/hooks/useMergeRequests.ts
@@ -1977,24 +2251,68 @@ function useMergeRequests(params) {
   }, [appId]);
   React6.useEffect(() => {
     void refresh();
-  }, [refresh]);
+  }, [appId, refresh]);
   const openMergeRequest = React6.useCallback(async (sourceAppId) => {
-    const mr = await mergeRequestsRepository.open({ sourceAppId });
-    await refresh();
-    return mr;
+    try {
+      const mr = await mergeRequestsRepository.open({ sourceAppId });
+      await refresh();
+      await trackOpenMergeRequest({
+        appId,
+        mergeRequestId: mr.id,
+        success: true
+      });
+      return mr;
+    } catch (error2) {
+      await trackOpenMergeRequest({
+        appId,
+        success: false,
+        error: error2
+      });
+      throw error2;
+    }
   }, [refresh]);
   const approve = React6.useCallback(async (mrId) => {
-    const mr = await mergeRequestsRepository.update(mrId, { status: "approved" });
-    await refresh();
-    const merged = await pollUntilMerged(mrId);
-    await refresh();
-    return merged ?? mr;
-  }, [pollUntilMerged, refresh]);
+    try {
+      const mr = await mergeRequestsRepository.update(mrId, { status: "approved" });
+      await refresh();
+      const merged = await pollUntilMerged(mrId);
+      await refresh();
+      await trackApproveMergeRequest({
+        appId,
+        mergeRequestId: mrId,
+        success: true
+      });
+      return merged ?? mr;
+    } catch (error2) {
+      await trackApproveMergeRequest({
+        appId,
+        mergeRequestId: mrId,
+        success: false,
+        error: error2
+      });
+      throw error2;
+    }
+  }, [appId, pollUntilMerged, refresh]);
   const reject = React6.useCallback(async (mrId) => {
-    const mr = await mergeRequestsRepository.update(mrId, { status: "rejected" });
-    await refresh();
-    return mr;
-  }, [refresh]);
+    try {
+      const mr = await mergeRequestsRepository.update(mrId, { status: "rejected" });
+      await refresh();
+      await trackRejectMergeRequest({
+        appId,
+        mergeRequestId: mrId,
+        success: true
+      });
+      return mr;
+    } catch (error2) {
+      await trackRejectMergeRequest({
+        appId,
+        mergeRequestId: mrId,
+        success: false,
+        error: error2
+      });
+      throw error2;
+    }
+  }, [appId, refresh]);
   const toSummary = React6.useCallback((mr) => {
     const stats = creatorStatsById[mr.createdBy];
     return {
@@ -2030,7 +2348,7 @@ function useMergeRequests(params) {
 
 // src/studio/hooks/useAttachmentUpload.ts
 var React7 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var FileSystem2 = __toESM(require("expo-file-system/legacy"));
 
 // src/data/attachment/remote.ts
@@ -2117,7 +2435,7 @@ function useAttachmentUpload() {
       const blobs = await Promise.all(
         dataUrls.map(async (dataUrl, idx) => {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
-          const blob = import_react_native5.Platform.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
+          const blob = import_react_native6.Platform.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
           const mimeType = getMimeTypeFromDataUrl(normalized);
           return { blob, idx, mimeType };
         })
@@ -2235,13 +2553,21 @@ function useStudioActions({
       if (sending) return;
       setSending(true);
       setError(null);
+      let forkSucceeded = false;
       try {
         let targetApp = app;
+        const sourceAppId = app.id;
         if (shouldForkOnEdit) {
           setForking(true);
-          const sourceAppId = app.id;
           const forked = await appsRepository.fork(app.id, {});
           targetApp = forked;
+          await trackRemixApp({
+            appId: forked.id,
+            sourceAppId,
+            threadId: forked.threadId ?? void 0,
+            success: true
+          });
+          forkSucceeded = true;
           onForkedApp == null ? void 0 : onForkedApp(forked.id, { keepRenderingAppId: sourceAppId });
         }
         setForking(false);
@@ -2269,9 +2595,33 @@ function useStudioActions({
           queueItemId: editResult.queueItemId ?? null,
           queuePosition: editResult.queuePosition ?? null
         });
+        await trackEditApp({
+          appId: targetApp.id,
+          threadId,
+          promptLength: prompt.trim().length,
+          success: true
+        });
       } catch (e) {
         const err = e instanceof Error ? e : new Error(String(e));
         setError(err);
+        if (shouldForkOnEdit && !forkSucceeded && (app == null ? void 0 : app.id)) {
+          await trackRemixApp({
+            appId: app.id,
+            sourceAppId: app.id,
+            threadId: app.threadId ?? void 0,
+            success: false,
+            error: err
+          });
+        }
+        if ((app == null ? void 0 : app.id) && app.threadId) {
+          await trackEditApp({
+            appId: app.id,
+            threadId: app.threadId,
+            promptLength: prompt.trim().length,
+            success: false,
+            error: err
+          });
+        }
         throw err;
       } finally {
         setForking(false);
@@ -2286,12 +2636,13 @@ function useStudioActions({
 
 // src/studio/ui/RuntimeRenderer.tsx
 var React9 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_runtime = require("@comergehq/runtime");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function RuntimeRenderer({
   appKey,
   bundlePath,
+  preparingText,
   forcePreparing,
   renderToken,
   style,
@@ -2305,11 +2656,11 @@ function RuntimeRenderer({
   }, [bundlePath]);
   if (!bundlePath || forcePreparing) {
     if (!hasRenderedOnce && !forcePreparing && !allowInitialPreparing) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1 }, style] });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: [{ flex: 1 }, style] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { variant: "bodyMuted", children: preparingText ?? "Preparing app\u2026" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_runtime.ComergeRuntimeRenderer,
     {
       appKey,
@@ -2321,17 +2672,17 @@ function RuntimeRenderer({
 }
 
 // src/studio/ui/StudioOverlay.tsx
-var React44 = __toESM(require("react"));
-var import_react_native56 = require("react-native");
+var React45 = __toESM(require("react"));
+var import_react_native59 = require("react-native");
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 var React12 = __toESM(require("react"));
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/components/studio-sheet/StudioSheetBackground.tsx
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_liquid_glass2 = require("@callstack/liquid-glass");
 
 // src/components/utils/ResettableLiquidGlassView.tsx
@@ -2340,7 +2691,7 @@ var import_liquid_glass = require("@callstack/liquid-glass");
 
 // src/components/utils/liquidGlassReset.tsx
 var React10 = __toESM(require("react"));
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var LiquidGlassResetContext = React10.createContext(0);
 function LiquidGlassResetProvider({
@@ -2349,11 +2700,11 @@ function LiquidGlassResetProvider({
 }) {
   const [token, setToken] = React10.useState(0);
   React10.useEffect(() => {
-    if (import_react_native7.Platform.OS !== "ios") return;
+    if (import_react_native8.Platform.OS !== "ios") return;
     const onChange = (state) => {
       if (state === "active") setToken((t) => t + 1);
     };
-    const sub = import_react_native7.AppState.addEventListener("change", onChange);
+    const sub = import_react_native8.AppState.addEventListener("change", onChange);
     return () => sub.remove();
   }, []);
   React10.useEffect(() => {
@@ -2390,7 +2741,7 @@ function StudioSheetBackground({
   renderBackground
 }) {
   const theme = useTheme();
-  const radius = import_react_native8.Platform.OS === "ios" ? 39 : 16;
+  const radius = import_react_native9.Platform.OS === "ios" ? 39 : 16;
   const fallbackBgColor = theme.scheme === "dark" ? "rgba(11, 8, 15, 0.85)" : "rgba(255, 255, 255, 0.85)";
   const secondaryBgBaseColor = theme.scheme === "dark" ? "rgb(24, 24, 27)" : "rgb(173, 173, 173)";
   const containerStyle = {
@@ -2411,7 +2762,7 @@ function StudioSheetBackground({
       }
     ),
     import_liquid_glass2.isLiquidGlassSupported && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native8.View,
+      import_react_native9.View,
       {
         style: [
           containerStyle,
@@ -2448,12 +2799,12 @@ function StudioBottomSheet({
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
   const resolvedSnapPoints = React12.useMemo(() => [...snapPoints], [snapPoints]);
   const currentIndexRef = React12.useRef(open ? resolvedSnapPoints.length - 1 : -1);
-  const lastAppStateRef = React12.useRef(import_react_native9.AppState.currentState);
+  const lastAppStateRef = React12.useRef(import_react_native10.AppState.currentState);
   React12.useEffect(() => {
-    const sub = import_react_native9.AppState.addEventListener("change", (state) => {
+    const sub = import_react_native10.AppState.addEventListener("change", (state) => {
       lastAppStateRef.current = state;
       if (state === "background" || state === "inactive") {
-        import_react_native9.Keyboard.dismiss();
+        import_react_native10.Keyboard.dismiss();
         return;
       }
     });
@@ -2494,19 +2845,19 @@ function StudioBottomSheet({
       ...bottomSheetProps,
       onChange: handleChange,
       onDismiss: () => onOpenChange == null ? void 0 : onOpenChange(false),
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.View, { style: { flex: 1, overflow: "hidden" }, children })
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetPager.tsx
 var React13 = __toESM(require("react"));
-var import_react_native10 = require("react-native");
+var import_react_native11 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function StudioSheetPager({ activePage, width, preview, chat, style }) {
-  const anim = React13.useRef(new import_react_native10.Animated.Value(activePage === "chat" ? 1 : 0)).current;
+  const anim = React13.useRef(new import_react_native11.Animated.Value(activePage === "chat" ? 1 : 0)).current;
   React13.useEffect(() => {
-    import_react_native10.Animated.spring(anim, {
+    import_react_native11.Animated.spring(anim, {
       toValue: activePage === "chat" ? 1 : 0,
       useNativeDriver: true,
       tension: 65,
@@ -2515,9 +2866,9 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
   }, [activePage, anim]);
   const previewTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, -width] });
   const chatTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native10.Animated.View, { style: [{ flex: 1 }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native11.Animated.View, { style: [{ flex: 1 }, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_react_native10.Animated.View,
+      import_react_native11.Animated.View,
       {
         style: [
           {
@@ -2534,7 +2885,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_react_native10.Animated.View,
+      import_react_native11.Animated.View,
       {
         style: [
           {
@@ -2555,7 +2906,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
 
 // src/components/bubble/Bubble.tsx
 var import_react = require("react");
-var import_react_native11 = require("react-native");
+var import_react_native12 = require("react-native");
 var Haptics = __toESM(require("expo-haptics"));
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_liquid_glass3 = require("@callstack/liquid-glass");
@@ -2627,7 +2978,7 @@ function Bubble({
   backgroundColor
 }) {
   const theme = useTheme();
-  const { width, height } = (0, import_react_native11.useWindowDimensions)();
+  const { width, height } = (0, import_react_native12.useWindowDimensions)();
   const isDanger = variant === "danger";
   const onPressRef = (0, import_react.useRef)(onPress);
   (0, import_react.useEffect)(() => {
@@ -2720,7 +3071,7 @@ function Bubble({
     }
   }, [forceShowTrigger, visible, animateIn]);
   const panResponder = (0, import_react.useRef)(
-    import_react_native11.PanResponder.create({
+    import_react_native12.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {
@@ -2783,24 +3134,24 @@ function Bubble({
             interactive: true,
             effect: "clear",
             children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_react_native11.Pressable,
+              import_react_native12.Pressable,
               {
                 onPress: () => {
                   if (!disabled) animateOut();
                 },
                 style: styles.buttonInner,
                 android_ripple: { color: "rgba(255, 255, 255, 0.3)", borderless: true },
-                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, {})
+                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, {})
               }
             )
           }
         ) }),
-        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
+        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
       ]
     }
   );
 }
-var styles = import_react_native11.StyleSheet.create({
+var styles = import_react_native12.StyleSheet.create({
   floatingButton: {
     position: "absolute",
     justifyContent: "center",
@@ -2837,7 +3188,7 @@ var styles = import_react_native11.StyleSheet.create({
 
 // src/components/overlays/EdgeGlowFrame.tsx
 var React14 = __toESM(require("react"));
-var import_react_native12 = require("react-native");
+var import_react_native13 = require("react-native");
 var import_expo_linear_gradient = require("expo-linear-gradient");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function baseColor(role, theme) {
@@ -2862,9 +3213,9 @@ function EdgeGlowFrame({
 }) {
   const theme = useTheme();
   const alpha = Math.max(0, Math.min(1, intensity));
-  const anim = React14.useRef(new import_react_native12.Animated.Value(visible ? 1 : 0)).current;
+  const anim = React14.useRef(new import_react_native13.Animated.Value(visible ? 1 : 0)).current;
   React14.useEffect(() => {
-    import_react_native12.Animated.timing(anim, {
+    import_react_native13.Animated.timing(anim, {
       toValue: visible ? 1 : 0,
       duration: 300,
       useNativeDriver: true
@@ -2873,8 +3224,8 @@ function EdgeGlowFrame({
   const c = baseColor(role, theme);
   const strong = withAlpha(c, 0.6 * alpha);
   const soft = withAlpha(c, 0.22 * alpha);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native13.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2883,7 +3234,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2892,7 +3243,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.View, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2901,7 +3252,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.View, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2915,12 +3266,12 @@ function EdgeGlowFrame({
 
 // src/components/draw/DrawModeOverlay.tsx
 var React17 = __toESM(require("react"));
-var import_react_native16 = require("react-native");
+var import_react_native17 = require("react-native");
 var import_react_native_view_shot = require("react-native-view-shot");
 
 // src/components/draw/DrawSurface.tsx
 var React15 = __toESM(require("react"));
-var import_react_native13 = require("react-native");
+var import_react_native14 = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 
 // src/components/draw/strokes.ts
@@ -2991,7 +3342,7 @@ function DrawSurface({
     triggerRender();
   }, [color, onAddStroke, strokeWidth, triggerRender]);
   const panResponder = React15.useMemo(
-    () => import_react_native13.PanResponder.create({
+    () => import_react_native14.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: onStart,
@@ -3003,7 +3354,7 @@ function DrawSurface({
   );
   const currentPath = pointsToSmoothPath(currentPointsRef.current);
   void renderTick;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [import_react_native13.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native_svg.default, { style: import_react_native13.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native14.View, { style: [import_react_native14.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native_svg.default, { style: import_react_native14.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
     strokes.map((s, idx) => {
       const d = pointsToSmoothPath(s.points);
       if (!d) return null;
@@ -3033,7 +3384,7 @@ function DrawSurface({
     ) : null
   ] }) });
 }
-var styles2 = import_react_native13.StyleSheet.create({
+var styles2 = import_react_native14.StyleSheet.create({
   container: {
     zIndex: 5
   }
@@ -3041,7 +3392,7 @@ var styles2 = import_react_native13.StyleSheet.create({
 
 // src/components/draw/DrawToolbar.tsx
 var React16 = __toESM(require("react"));
-var import_react_native15 = require("react-native");
+var import_react_native16 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_lucide_react_native = require("lucide-react-native");
 
@@ -3060,7 +3411,7 @@ async function impact(style) {
 }
 
 // src/components/draw/DrawColorPicker.tsx
-var import_react_native14 = require("react-native");
+var import_react_native15 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function DrawColorPicker({
   colors,
@@ -3095,10 +3446,10 @@ function DrawColorPicker({
     return { ...base, ...selectedStyle, ...whiteStyle };
   };
   if (!expanded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native15.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native14.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native15.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_native15.Pressable,
     {
       onPress: () => {
         onSelect(c);
@@ -3129,14 +3480,14 @@ function DrawToolbar({
   style
 }) {
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native15.useWindowDimensions)();
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native16.useWindowDimensions)();
   const [expanded, setExpanded] = React16.useState(false);
-  const pos = React16.useRef(new import_react_native15.Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
+  const pos = React16.useRef(new import_react_native16.Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
   const start = React16.useRef({ x: 0, y: 0 });
   const currentPos = React16.useRef({ x: 0, y: 0 });
   React16.useEffect(() => {
     if (hidden) return;
-    import_react_native15.Animated.spring(pos.y, {
+    import_react_native16.Animated.spring(pos.y, {
       toValue: insets.top + 60,
       useNativeDriver: true,
       damping: 12,
@@ -3163,7 +3514,7 @@ function DrawToolbar({
     [insets.top, screenHeight, screenWidth]
   );
   const panResponder = React16.useMemo(
-    () => import_react_native15.PanResponder.create({
+    () => import_react_native16.PanResponder.create({
       onStartShouldSetPanResponder: () => false,
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
       onPanResponderGrant: () => {
@@ -3175,7 +3526,7 @@ function DrawToolbar({
       },
       onPanResponderRelease: () => {
         const next = clamp2(currentPos.current.x, currentPos.current.y);
-        import_react_native15.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
+        import_react_native16.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
       }
     }),
     [clamp2, pos]
@@ -3192,7 +3543,7 @@ function DrawToolbar({
     const isDisabled = Boolean(disabled) || Boolean(capturingDisabled);
     const [pressed, setPressed] = React16.useState(false);
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react_native15.View,
+      import_react_native16.View,
       {
         style: {
           width: 28,
@@ -3204,7 +3555,7 @@ function DrawToolbar({
           opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react_native15.Pressable,
+          import_react_native16.Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel,
@@ -3221,7 +3572,7 @@ function DrawToolbar({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native15.Animated.View,
+    import_react_native16.Animated.View,
     {
       style: [
         {
@@ -3238,7 +3589,7 @@ function DrawToolbar({
       ],
       ...panResponder.panHandlers,
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native15.View,
+        import_react_native16.View,
         {
           style: {
             backgroundColor: "#F43F5E",
@@ -3246,7 +3597,7 @@ function DrawToolbar({
             padding: 12,
             minWidth: 220
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native15.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native16.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
             renderDragHandle ? renderDragHandle() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.GripVertical, { size: 20, color: "rgba(255, 255, 255, 0.6)" }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               DrawColorPicker,
@@ -3264,7 +3615,7 @@ function DrawToolbar({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native16.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               CircleActionButton,
               {
@@ -3302,7 +3653,7 @@ function DrawToolbar({
                   void impact("medium");
                   onDone();
                 },
-                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
+                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native16.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
               }
             )
           ] })
@@ -3387,7 +3738,7 @@ function DrawModeOverlay({
     }
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native16.View, { style: [import_react_native16.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native17.View, { style: [import_react_native17.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DrawSurface,
@@ -3418,7 +3769,7 @@ function DrawModeOverlay({
     )
   ] });
 }
-var styles3 = import_react_native16.StyleSheet.create({
+var styles3 = import_react_native17.StyleSheet.create({
   root: {
     zIndex: 9999
   }
@@ -3426,7 +3777,7 @@ var styles3 = import_react_native16.StyleSheet.create({
 
 // src/components/comments/AppCommentsSheet.tsx
 var React24 = __toESM(require("react"));
-var import_react_native22 = require("react-native");
+var import_react_native23 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var import_liquid_glass5 = require("@callstack/liquid-glass");
@@ -3434,13 +3785,13 @@ var import_lucide_react_native4 = require("lucide-react-native");
 
 // src/components/chat/ChatComposer.tsx
 var React19 = __toESM(require("react"));
-var import_react_native18 = require("react-native");
+var import_react_native19 = require("react-native");
 var import_liquid_glass4 = require("@callstack/liquid-glass");
 var import_lucide_react_native3 = require("lucide-react-native");
 
 // src/components/chat/MultilineTextInput.tsx
 var React18 = __toESM(require("react"));
-var import_react_native17 = require("react-native");
+var import_react_native18 = require("react-native");
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var MultilineTextInput = React18.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
@@ -3463,7 +3814,7 @@ var MultilineTextInput = React18.forwardRef(function MultilineTextInput2({ useBo
     style: [baseStyle, style],
     textAlignVertical: "top"
   };
-  return useBottomSheetTextInput ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_bottom_sheet2.BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native17.TextInput, { ref, ...commonProps });
+  return useBottomSheetTextInput ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_bottom_sheet2.BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native18.TextInput, { ref, ...commonProps });
 });
 
 // src/components/icons/StudioIcons.tsx
@@ -3517,9 +3868,9 @@ function AspectRatioThumbnail({
   renderRemoveIcon
 }) {
   const [aspectRatio, setAspectRatio] = React19.useState(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_native18.Image,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native19.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_native19.Image,
       {
         source: { uri },
         style: { width: "100%", height: "100%" },
@@ -3532,7 +3883,7 @@ function AspectRatioThumbnail({
       }
     ) }),
     onRemove ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_native18.Pressable,
+      import_react_native19.Pressable,
       {
         style: {
           position: "absolute",
@@ -3579,17 +3930,17 @@ function ChatComposer({
   const hasText = text.trim().length > 0;
   const composerMinHeight = hasAttachments ? THUMBNAIL_HEIGHT + 44 + 24 : 44;
   const isButtonDisabled = sending || disabled || sendDisabled;
-  const maxInputHeight = React19.useMemo(() => import_react_native18.Dimensions.get("window").height * 0.5, []);
-  const shakeAnim = React19.useRef(new import_react_native18.Animated.Value(0)).current;
+  const maxInputHeight = React19.useMemo(() => import_react_native19.Dimensions.get("window").height * 0.5, []);
+  const shakeAnim = React19.useRef(new import_react_native19.Animated.Value(0)).current;
   const [sendPressed, setSendPressed] = React19.useState(false);
   const triggerShake = React19.useCallback(() => {
     shakeAnim.setValue(0);
-    import_react_native18.Animated.sequence([
-      import_react_native18.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native18.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native18.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native18.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native18.Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
+    import_react_native19.Animated.sequence([
+      import_react_native19.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      import_react_native19.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      import_react_native19.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      import_react_native19.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      import_react_native19.Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
     ]).start();
   }, [shakeAnim]);
   const handleSend = React19.useCallback(async () => {
@@ -3606,12 +3957,12 @@ function ChatComposer({
   const placeholderTextColor = theme.scheme === "dark" ? "#A1A1AA" : "#71717A";
   const sendBg = withAlpha(theme.colors.primary, isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native18.View,
+    import_react_native19.View,
     {
       style: [{ paddingHorizontal: 16, paddingBottom: 12, paddingTop: 8 }, style],
       onLayout: (e) => onLayout == null ? void 0 : onLayout({ height: e.nativeEvent.layout.height }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native19.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           import_liquid_glass4.LiquidGlassView,
           {
             style: [
@@ -3624,7 +3975,7 @@ function ChatComposer({
             effect: "clear",
             children: [
               hasAttachments ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                import_react_native18.ScrollView,
+                import_react_native19.ScrollView,
                 {
                   horizontal: true,
                   showsHorizontalScrollIndicator: false,
@@ -3641,7 +3992,7 @@ function ChatComposer({
                       `attachment-${index}`
                     )),
                     onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      import_react_native18.Pressable,
+                      import_react_native19.Pressable,
                       {
                         style: {
                           height: THUMBNAIL_HEIGHT,
@@ -3692,7 +4043,7 @@ function ChatComposer({
             interactive: true,
             effect: "clear",
             children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              import_react_native18.View,
+              import_react_native19.View,
               {
                 style: {
                   width: 44,
@@ -3702,7 +4053,7 @@ function ChatComposer({
                   backgroundColor: sendBg
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  import_react_native18.Pressable,
+                  import_react_native19.Pressable,
                   {
                     accessibilityRole: "button",
                     accessibilityLabel: "Send",
@@ -3711,7 +4062,7 @@ function ChatComposer({
                     onPressIn: () => setSendPressed(true),
                     onPressOut: () => setSendPressed(false),
                     style: { flex: 1, alignItems: "center", justifyContent: "center" },
-                    children: sending ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
+                    children: sending ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native19.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
                   }
                 )
               }
@@ -3725,10 +4076,10 @@ function ChatComposer({
 
 // src/components/comments/CommentRow.tsx
 var React20 = __toESM(require("react"));
-var import_react_native20 = require("react-native");
+var import_react_native21 = require("react-native");
 
 // src/components/primitives/Avatar.tsx
-var import_react_native19 = require("react-native");
+var import_react_native20 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function initialsFrom(name) {
   var _a, _b;
@@ -3748,7 +4099,7 @@ function Avatar({
   const radius = size / 2;
   const fallbackBg = fallbackBackgroundColor ?? theme.colors.neutral;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_react_native19.View,
+    import_react_native20.View,
     {
       style: [
         {
@@ -3763,7 +4114,7 @@ function Avatar({
         style
       ],
       children: uri ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_react_native19.Image,
+        import_react_native20.Image,
         {
           source: { uri },
           style: [{ width: size, height: size }, imageStyle],
@@ -3814,7 +4165,7 @@ function CommentRow({ comment, showDivider }) {
     };
   }, [comment.authorId]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    import_react_native20.View,
+    import_react_native21.View,
     {
       style: {
         flexDirection: "row",
@@ -3825,8 +4176,8 @@ function CommentRow({ comment, showDivider }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Avatar, { size: 32, uri: authorAvatar, name: authorName ?? comment.authorId, style: { marginTop: 6 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native21.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native21.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { style: { fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }, children: authorName ?? "Unknown User" }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, children: formatTimeAgo(comment.createdAt) })
           ] }),
@@ -3951,7 +4302,18 @@ function useAppComments(appId) {
       try {
         const newComment = await appCommentsRepository.create(appId, { body: trimmed, commentType: "general" });
         setComments((prev) => sortByCreatedAtAsc([...prev, newComment]));
+        await trackSubmitComment({
+          appId,
+          commentLength: trimmed.length,
+          success: true
+        });
       } catch (e) {
+        await trackSubmitComment({
+          appId,
+          commentLength: trimmed.length,
+          success: false,
+          error: e
+        });
         setError(e instanceof Error ? e : new Error(String(e)));
         throw e;
       } finally {
@@ -3994,13 +4356,13 @@ function useAppDetails(appId) {
 
 // src/components/comments/useIosKeyboardSnapFix.ts
 var React23 = __toESM(require("react"));
-var import_react_native21 = require("react-native");
+var import_react_native22 = require("react-native");
 function useIosKeyboardSnapFix(sheetRef, options) {
   const [keyboardVisible, setKeyboardVisible] = React23.useState(false);
   React23.useEffect(() => {
-    if (import_react_native21.Platform.OS !== "ios") return;
-    const show = import_react_native21.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native21.Keyboard.addListener("keyboardWillHide", () => {
+    if (import_react_native22.Platform.OS !== "ios") return;
+    const show = import_react_native22.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = import_react_native22.Keyboard.addListener("keyboardWillHide", () => {
       var _a;
       setKeyboardVisible(false);
       const target = (options == null ? void 0 : options.targetIndex) ?? 1;
@@ -4076,17 +4438,17 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: import_react_native22.Platform.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: import_react_native22.Platform.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: import_react_native23.Platform.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: import_react_native23.Platform.OS === "ios" ? 39 : 16
       },
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       keyboardBehavior: "interactive",
       keyboardBlurBehavior: "restore",
       android_keyboardInputMode: "adjustResize",
       topInset: insets.top,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native22.View, { style: { flex: 1 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native23.View, { style: { flex: 1 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_react_native22.View,
+          import_react_native23.View,
           {
             style: {
               flexDirection: "row",
@@ -4122,7 +4484,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                   interactive: true,
                   effect: "clear",
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react_native22.View,
+                    import_react_native23.View,
                     {
                       style: {
                         width: 32,
@@ -4133,7 +4495,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                         justifyContent: "center"
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                        import_react_native22.Pressable,
+                        import_react_native23.Pressable,
                         {
                           disabled: !appId,
                           onPress: () => void handlePlay(),
@@ -4168,13 +4530,13 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
             },
             keyboardShouldPersistTaps: "handled",
             children: [
-              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
+              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native23.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native23.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native23.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
               error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { variant: "captionMuted", style: { marginTop: theme.spacing.lg }, children: "Failed to load comments." }) : null
             ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react_native22.View,
+          import_react_native23.View,
           {
             style: {
               position: "absolute",
@@ -4183,7 +4545,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: import_react_native22.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: import_react_native23.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
               borderTopWidth: 1,
               borderTopColor: withAlpha(theme.colors.border, 0.1),
               backgroundColor: withAlpha(theme.colors.background, 0.8)
@@ -4197,7 +4559,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                 useBottomSheetTextInput: true,
                 onSend: async (text) => {
                   await create(text);
-                  import_react_native22.Keyboard.dismiss();
+                  import_react_native23.Keyboard.dismiss();
                 }
               }
             )
@@ -4210,16 +4572,16 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
 
 // src/studio/ui/PreviewPanel.tsx
 var React35 = __toESM(require("react"));
-var import_react_native43 = require("react-native");
+var import_react_native44 = require("react-native");
 
 // src/components/preview/PreviewPage.tsx
-var import_react_native23 = require("react-native");
+var import_react_native24 = require("react-native");
 var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function PreviewPage({ header, children, contentStyle }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native23.View, { style: { flex: 1 }, children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.View, { children: header }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native24.View, { style: { flex: 1 }, children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native24.View, { children: header }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_bottom_sheet4.BottomSheetScrollView,
       {
@@ -4239,15 +4601,15 @@ function PreviewPage({ header, children, contentStyle }) {
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var import_react_native26 = require("react-native");
+var import_react_native27 = require("react-native");
 
 // src/components/studio-sheet/StudioSheetHeader.tsx
-var import_react_native24 = require("react-native");
+var import_react_native25 = require("react-native");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function StudioSheetHeader({ left, center, right, style }) {
   const theme = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    import_react_native24.View,
+    import_react_native25.View,
     {
       style: [
         {
@@ -4260,9 +4622,9 @@ function StudioSheetHeader({ left, center, right, style }) {
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.View, { style: { flex: 1, alignItems: "center" }, children: center }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: { flex: 1, alignItems: "center" }, children: center }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
       ]
     }
   );
@@ -4270,7 +4632,7 @@ function StudioSheetHeader({ left, center, right, style }) {
 
 // src/components/studio-sheet/StudioSheetHeaderIconButton.tsx
 var React25 = __toESM(require("react"));
-var import_react_native25 = require("react-native");
+var import_react_native26 = require("react-native");
 var import_liquid_glass6 = require("@callstack/liquid-glass");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function StudioSheetHeaderIconButton({
@@ -4290,14 +4652,14 @@ function StudioSheetHeaderIconButton({
   const glassInnerBg = intent === "danger" ? theme.colors.danger : theme.colors.primary;
   const resolvedOpacity = disabled ? 0.6 : pressed ? 0.9 : 1;
   const glassBg = withAlpha(glassInnerBg, resolvedOpacity);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native25.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native26.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     ResettableLiquidGlassView,
     {
       style: [{ borderRadius: 100 }, !import_liquid_glass6.isLiquidGlassSupported && { backgroundColor: glassFallbackBg }],
       interactive: true,
       effect: "clear",
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react_native25.View,
+        import_react_native26.View,
         {
           style: {
             width: size,
@@ -4308,7 +4670,7 @@ function StudioSheetHeaderIconButton({
             backgroundColor: glassBg
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react_native25.Pressable,
+            import_react_native26.Pressable,
             {
               accessibilityRole: "button",
               accessibilityLabel,
@@ -4327,7 +4689,7 @@ function StudioSheetHeaderIconButton({
       )
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react_native25.View,
+    import_react_native26.View,
     {
       style: {
         width: size,
@@ -4339,7 +4701,7 @@ function StudioSheetHeaderIconButton({
         opacity: resolvedOpacity
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react_native25.Pressable,
+        import_react_native26.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -4373,7 +4735,7 @@ function PreviewPanelHeader({
     {
       left: onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
       center: null,
-      right: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native26.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      right: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native27.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         isOwner ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           StudioSheetHeaderIconButton,
           {
@@ -4403,10 +4765,10 @@ function PreviewPanelHeader({
 }
 
 // src/components/preview/PreviewHeroCard.tsx
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 
 // src/components/primitives/Surface.tsx
-var import_react_native27 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function backgroundFor(variant, theme) {
   const { colors } = theme;
@@ -4425,7 +4787,7 @@ function backgroundFor(variant, theme) {
 function Surface({ variant = "surface", border = false, style, ...props }) {
   const theme = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_react_native27.View,
+    import_react_native28.View,
     {
       ...props,
       style: [
@@ -4481,11 +4843,11 @@ function PreviewHeroCard({
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: { flex: 1 }, children: [
-        background ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
-        image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
-        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
-        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: { flex: 1 }, children: [
+        background ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
+        image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
+        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
+        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
       ] })
     }
   );
@@ -4493,20 +4855,20 @@ function PreviewHeroCard({
 
 // src/components/preview/PreviewPlaceholder.tsx
 var React26 = __toESM(require("react"));
-var import_react_native29 = require("react-native");
+var import_react_native30 = require("react-native");
 var import_expo_linear_gradient2 = require("expo-linear-gradient");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function PreviewPlaceholder({ visible, style }) {
   if (!visible) return null;
-  const opacityAnim = React26.useRef(new import_react_native29.Animated.Value(0)).current;
+  const opacityAnim = React26.useRef(new import_react_native30.Animated.Value(0)).current;
   React26.useEffect(() => {
     if (!visible) return;
-    const animation = import_react_native29.Animated.loop(
-      import_react_native29.Animated.sequence([
-        import_react_native29.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
-        import_react_native29.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
-        import_react_native29.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
-        import_react_native29.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
+    const animation = import_react_native30.Animated.loop(
+      import_react_native30.Animated.sequence([
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
       ])
     );
     animation.start();
@@ -4517,7 +4879,7 @@ function PreviewPlaceholder({ visible, style }) {
   const opacity3 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 1, 0] });
   const opacity4 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 0, 1] });
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(98, 0, 238, 0.45)", "rgba(168, 85, 247, 0.35)"],
@@ -4526,7 +4888,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(168, 85, 247, 0.45)", "rgba(139, 92, 246, 0.35)"],
@@ -4535,7 +4897,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(139, 92, 246, 0.45)", "rgba(126, 34, 206, 0.35)"],
@@ -4544,7 +4906,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(126, 34, 206, 0.45)", "rgba(98, 0, 238, 0.35)"],
@@ -4557,12 +4919,12 @@ function PreviewPlaceholder({ visible, style }) {
 }
 
 // src/components/preview/PreviewImage.tsx
-var import_react_native30 = require("react-native");
+var import_react_native31 = require("react-native");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function PreviewImage({ uri, onLoad, style }) {
   if (!uri) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react_native30.Image,
+    import_react_native31.Image,
     {
       source: { uri },
       resizeMode: "cover",
@@ -4573,7 +4935,7 @@ function PreviewImage({ uri, onLoad, style }) {
 }
 
 // src/components/preview/StatsBar.tsx
-var import_react_native31 = require("react-native");
+var import_react_native32 = require("react-native");
 var import_liquid_glass7 = require("@callstack/liquid-glass");
 var import_lucide_react_native5 = require("lucide-react-native");
 
@@ -4606,7 +4968,7 @@ function StatsBar({
   const theme = useTheme();
   const statsBgColor = theme.scheme === "dark" ? "rgba(24, 24, 27, 0.5)" : "rgba(255, 255, 255, 0.5)";
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_react_native31.View,
+    import_react_native32.View,
     {
       style: [
         { position: "absolute", bottom: 12, width: "100%", paddingHorizontal: 12 },
@@ -4622,15 +4984,15 @@ function StatsBar({
             !import_liquid_glass7.isLiquidGlassSupported && { backgroundColor: statsBgColor }
           ],
           effect: "clear",
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              import_react_native31.Pressable,
+              import_react_native32.Pressable,
               {
                 disabled: !onPressLike,
                 onPress: onPressLike,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     import_lucide_react_native5.Heart,
                     {
@@ -4640,7 +5002,7 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { width: 4 } }),
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
@@ -4656,22 +5018,22 @@ function StatsBar({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              import_react_native31.Pressable,
+              import_react_native32.Pressable,
               {
                 disabled: !onPressComments,
                 onPress: onPressComments,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react_native5.MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { width: 4 } }),
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { width: 4 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { width: 4 } }),
               /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
@@ -4682,7 +5044,7 @@ function StatsBar({
 }
 
 // src/components/preview/PreviewStatusBadge.tsx
-var import_react_native32 = require("react-native");
+var import_react_native33 = require("react-native");
 var import_lucide_react_native6 = require("lucide-react-native");
 
 // src/data/apps/types.ts
@@ -4727,7 +5089,7 @@ function PreviewStatusBadge({ status }) {
   const IconComp = STATUS_ICON[status];
   const label = APP_STATUS_LABEL[status] ?? status;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_react_native32.View,
+    import_react_native33.View,
     {
       style: {
         flexDirection: "row",
@@ -4780,10 +5142,10 @@ function PreviewHeroSection({
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_react_native34 = require("react-native");
+var import_react_native35 = require("react-native");
 
 // src/components/preview/PreviewMetaRow.tsx
-var import_react_native33 = require("react-native");
+var import_react_native34 = require("react-native");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function PreviewMetaRow({
   avatarUri,
@@ -4795,10 +5157,10 @@ function PreviewMetaRow({
   style
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: [{ alignSelf: "stretch" }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native34.View, { style: [{ alignSelf: "stretch" }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Text,
           {
@@ -4813,9 +5175,9 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native34.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native34.View, { children: rightMetric }) : null
     ] }),
     subtitle ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Text,
@@ -4871,9 +5233,9 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
       subtitle: app.description,
       avatarUri: (creator == null ? void 0 : creator.avatar) ?? null,
       creatorName: (creator == null ? void 0 : creator.name) ?? null,
-      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#007A75" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
+      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native35.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#007A75" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
       rightMetric: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-        import_react_native34.View,
+        import_react_native35.View,
         {
           style: {
             flexDirection: "row",
@@ -4907,10 +5269,10 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_react_native36 = require("react-native");
+var import_react_native37 = require("react-native");
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
-var import_react_native35 = require("react-native");
+var import_react_native36 = require("react-native");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function PressableCardRow({
   accessibilityLabel,
@@ -4923,20 +5285,20 @@ function PressableCardRow({
   style
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react_native35.Pressable,
+    import_react_native36.Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel,
       disabled,
       onPress,
       style: ({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native36.View, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native36.View, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
@@ -4978,7 +5340,7 @@ function PreviewCustomizeSection({
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SectionTitle, { children: "Customize" }),
     showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-      import_react_native36.View,
+      import_react_native37.View,
       {
         style: {
           flexDirection: "row",
@@ -4992,7 +5354,7 @@ function PreviewCustomizeSection({
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_react_native36.View,
+            import_react_native37.View,
             {
               style: {
                 width: 40,
@@ -5003,10 +5365,10 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.ActivityIndicator, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.ActivityIndicator, { color: theme.colors.warning, size: "small" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
           ] })
@@ -5027,7 +5389,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_react_native36.View,
+          import_react_native37.View,
           {
             style: {
               width: 40,
@@ -5060,7 +5422,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_react_native36.View,
+          import_react_native37.View,
           {
             style: {
               width: 40,
@@ -5084,16 +5446,16 @@ function PreviewCustomizeSection({
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
 var React32 = __toESM(require("react"));
-var import_react_native42 = require("react-native");
+var import_react_native43 = require("react-native");
 var import_lucide_react_native9 = require("lucide-react-native");
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
 var React28 = __toESM(require("react"));
-var import_react_native38 = require("react-native");
+var import_react_native39 = require("react-native");
 var import_lucide_react_native7 = require("lucide-react-native");
 
 // src/components/primitives/MarkdownText.tsx
-var import_react_native37 = require("react-native");
+var import_react_native38 = require("react-native");
 var import_react_native_markdown_display = __toESM(require("react-native-markdown-display"));
 var import_react2 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -5137,7 +5499,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const codeTextColor = isDark ? "#FFFFFF" : theme.colors.text;
   const paragraphBottom = variant === "mergeRequest" ? 8 : 6;
   const baseLineHeight = variant === "mergeRequest" ? 22 : 20;
-  const screen = import_react_native37.Dimensions.get("window");
+  const screen = import_react_native38.Dimensions.get("window");
   const tooltipPadding = theme.spacing.sm;
   const tooltipYOffset = theme.spacing.lg + 32;
   const minTooltipY = theme.spacing.xl;
@@ -5167,7 +5529,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
       setShowCopied(false);
     }, 1200);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.Pressable, { style, onPress: import_react_native37.Keyboard.dismiss, onLongPress: handleLongPress, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native37.View, { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native38.Pressable, { style, onPress: import_react_native38.Keyboard.dismiss, onLongPress: handleLongPress, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native38.View, { style: { position: "relative" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_react_native_markdown_display.default,
       {
@@ -5181,7 +5543,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
             paddingHorizontal: variant === "mergeRequest" ? 6 : 4,
             paddingVertical: variant === "mergeRequest" ? 2 : 0,
             borderRadius: variant === "mergeRequest" ? 6 : 4,
-            fontFamily: import_react_native37.Platform.OS === "ios" ? "Menlo" : "monospace",
+            fontFamily: import_react_native38.Platform.OS === "ios" ? "Menlo" : "monospace",
             fontSize: 13
           },
           code_block: {
@@ -5202,8 +5564,8 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
         children: markdown
       }
     ),
-    showCopied && tooltipAnchor ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.Modal, { transparent: true, visible: true, statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.View, { pointerEvents: "none", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_react_native37.View,
+    showCopied && tooltipAnchor ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native38.Modal, { transparent: true, visible: true, statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native38.View, { pointerEvents: "none", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_react_native38.View,
       {
         pointerEvents: "none",
         style: {
@@ -5217,7 +5579,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
         },
         onLayout: (event) => setTooltipWidth(event.nativeEvent.layout.width),
         children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          import_react_native37.Text,
+          import_react_native38.Text,
           {
             style: {
               color: theme.colors.onSuccess,
@@ -5321,15 +5683,15 @@ function MergeRequestStatusCard({
   const createdIso = toIsoString(mergeRequest.createdAt ?? null);
   const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : "";
   const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : "";
-  const rotate = React28.useRef(new import_react_native38.Animated.Value(expanded ? 1 : 0)).current;
+  const rotate = React28.useRef(new import_react_native39.Animated.Value(expanded ? 1 : 0)).current;
   React28.useEffect(() => {
-    import_react_native38.Animated.timing(rotate, {
+    import_react_native39.Animated.timing(rotate, {
       toValue: expanded ? 1 : 0,
       duration: 200,
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Card,
     {
       padded: false,
@@ -5342,10 +5704,10 @@ function MergeRequestStatusCard({
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Text,
                 {
@@ -5364,8 +5726,8 @@ function MergeRequestStatusCard({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
           ] }),
-          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_react_native38.Animated.View,
+          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_react_native39.Animated.View,
             {
               style: {
                 transform: [
@@ -5378,7 +5740,7 @@ function MergeRequestStatusCard({
             }
           )
         ] }),
-        expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             Text,
             {
@@ -5414,16 +5776,16 @@ function MergeRequestStatusCard({
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
 var React31 = __toESM(require("react"));
-var import_react_native41 = require("react-native");
+var import_react_native42 = require("react-native");
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
 var React30 = __toESM(require("react"));
-var import_react_native40 = require("react-native");
+var import_react_native41 = require("react-native");
 var import_lucide_react_native8 = require("lucide-react-native");
 
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
 var React29 = __toESM(require("react"));
-var import_react_native39 = require("react-native");
+var import_react_native40 = require("react-native");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
@@ -5440,7 +5802,7 @@ function ReviewMergeRequestActionButton({
   const paddingVertical = iconOnly ? 0 : 8;
   const opacity = disabled ? 0.5 : pressed ? 0.9 : 1;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_react_native39.View,
+    import_react_native40.View,
     {
       style: {
         width,
@@ -5455,7 +5817,7 @@ function ReviewMergeRequestActionButton({
         justifyContent: "center"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_react_native39.Pressable,
+        import_react_native40.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -5497,12 +5859,12 @@ function ReviewMergeRequestCard({
   const theme = useTheme();
   const status = React30.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
   const canAct = mr.status === "open";
-  const rotate = React30.useRef(new import_react_native40.Animated.Value(isExpanded ? 1 : 0)).current;
+  const rotate = React30.useRef(new import_react_native41.Animated.Value(isExpanded ? 1 : 0)).current;
   React30.useEffect(() => {
-    import_react_native40.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+    import_react_native41.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
   }, [isExpanded, rotate]);
   const position = total > 1 ? `${index + 1}/${total}` : "Merge request";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Card,
     {
       padded: false,
@@ -5515,9 +5877,9 @@ function ReviewMergeRequestCard({
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Text,
               {
@@ -5533,7 +5895,7 @@ function ReviewMergeRequestCard({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            import_react_native40.Animated.View,
+            import_react_native41.Animated.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
@@ -5542,7 +5904,7 @@ function ReviewMergeRequestCard({
             }
           )
         ] }),
-        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { marginTop: 16 }, children: [
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Text,
             {
@@ -5560,9 +5922,9 @@ function ReviewMergeRequestCard({
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOrMergedMergeRequests} approved merge${creator.approvedOrMergedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
           mr.description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", gap: 8 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ReviewMergeRequestActionButton,
               {
@@ -5571,7 +5933,7 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onReject,
                 iconOnly: !isExpanded,
-                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.X, { size: 18, color: "#FFFFFF" }),
                   isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
                 ] })
@@ -5585,10 +5947,10 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onApprove,
                 iconOnly: !isExpanded,
-                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
+                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
                   isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.Check, { size: 18, color: "#FFFFFF" }),
                   isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
                 ] })
@@ -5603,7 +5965,7 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.Play, { size: 14, color: theme.colors.text }),
                 isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
               ] })
@@ -5629,32 +5991,32 @@ function ReviewMergeRequestCarousel({
   style
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native41.useWindowDimensions)();
+  const { width } = (0, import_react_native42.useWindowDimensions)();
   const [expanded, setExpanded] = React31.useState({});
-  const carouselScrollX = React31.useRef(new import_react_native41.Animated.Value(0)).current;
+  const carouselScrollX = React31.useRef(new import_react_native42.Animated.Value(0)).current;
   const peekAmount = 24;
   const gap = 16;
   const cardWidth = React31.useMemo(() => Math.max(1, width - theme.spacing.lg * 2 - peekAmount), [peekAmount, theme.spacing.lg, width]);
   const snapInterval = cardWidth + gap;
   const dotColor = theme.scheme === "dark" ? "#FFFFFF" : "#000000";
   if (mergeRequests.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native41.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_react_native41.FlatList,
+      import_react_native42.FlatList,
       {
         horizontal: true,
         data: mergeRequests,
         keyExtractor: (mr) => mr.id,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.sm },
-        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { width: peekAmount } }),
-        onScroll: import_react_native41.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
+        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: { width: peekAmount } }),
+        onScroll: import_react_native42.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
         scrollEventThrottle: 16,
@@ -5665,7 +6027,7 @@ function ReviewMergeRequestCarousel({
           const isProcessing = Boolean(processingMrId && processingMrId === item.id);
           const isAnyProcessing = Boolean(processingMrId);
           const isTestingThis = Boolean(testingMrId && testingMrId === item.id);
-          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -5686,7 +6048,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
+    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
       const inputRange = [(index - 1) * snapInterval, index * snapInterval, (index + 1) * snapInterval];
       const scale = carouselScrollX.interpolate({
         inputRange,
@@ -5699,7 +6061,7 @@ function ReviewMergeRequestCarousel({
         extrapolate: "clamp"
       });
       return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        import_react_native41.Animated.View,
+        import_react_native42.Animated.View,
         {
           style: {
             width: 8,
@@ -5766,7 +6128,7 @@ function PreviewCollaborateSection({
         accessibilityLabel: "Submit merge request",
         disabled: submittingMr,
         onPress: () => {
-          import_react_native42.Alert.alert(
+          import_react_native43.Alert.alert(
             "Submit Merge Request",
             "Are you sure you want to submit your changes to the original app?",
             [
@@ -5792,7 +6154,7 @@ function PreviewCollaborateSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_react_native42.View,
+          import_react_native43.View,
           {
             style: {
               width: 40,
@@ -5803,7 +6165,7 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
+            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
           }
         ),
         title: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
@@ -5817,7 +6179,7 @@ function PreviewCollaborateSection({
         accessibilityLabel: "Sync from original",
         disabled: isSyncing,
         onPress: () => {
-          import_react_native42.Alert.alert(
+          import_react_native43.Alert.alert(
             "Sync from Original",
             "This will pull the latest upstream changes into your remix.",
             [
@@ -5829,12 +6191,12 @@ function PreviewCollaborateSection({
                   setSyncingLocal(true);
                   Promise.resolve(onSyncUpstream()).then((result) => {
                     if ((result == null ? void 0 : result.status) === "up-to-date") {
-                      import_react_native42.Alert.alert("Up to date", "Your remix already includes the latest upstream changes.");
+                      import_react_native43.Alert.alert("Up to date", "Your remix already includes the latest upstream changes.");
                     } else {
-                      import_react_native42.Alert.alert("Sync started", "Upstream changes are being merged into your remix.");
+                      import_react_native43.Alert.alert("Sync started", "Upstream changes are being merged into your remix.");
                     }
                   }).catch(() => {
-                    import_react_native42.Alert.alert("Sync failed", "We could not start the sync. Please try again.");
+                    import_react_native43.Alert.alert("Sync failed", "We could not start the sync. Please try again.");
                   }).finally(() => setSyncingLocal(false));
                 }
               }
@@ -5850,7 +6212,7 @@ function PreviewCollaborateSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_react_native42.View,
+          import_react_native43.View,
           {
             style: {
               width: 40,
@@ -5861,7 +6223,7 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha(theme.colors.primary, 0.12),
               marginRight: theme.spacing.lg
             },
-            children: isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.ActivityIndicator, { color: theme.colors.primary, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native9.RefreshCw, { size: 18, color: theme.colors.primary })
+            children: isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.ActivityIndicator, { color: theme.colors.primary, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native9.RefreshCw, { size: 18, color: theme.colors.primary })
           }
         ),
         title: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Sync from Original" }),
@@ -5899,7 +6261,7 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
+      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
@@ -6023,7 +6385,8 @@ function useAppStats({
   initialComments = 0,
   initialForks = 0,
   initialIsLiked = false,
-  onOpenComments
+  onOpenComments,
+  interactionSource = "unknown"
 }) {
   const [likeCount, setLikeCount] = React33.useState(initialLikes);
   const [commentCount, setCommentCount] = React33.useState(initialComments);
@@ -6067,23 +6430,31 @@ function useAppStats({
       if (newIsLiked) {
         const res = await appLikesRepository.create(appId, {});
         if (typeof ((_a = res.stats) == null ? void 0 : _a.total) === "number") setLikeCount(Math.max(0, res.stats.total));
+        await trackLikeApp({ appId, source: interactionSource, success: true });
       } else {
         const res = await appLikesRepository.removeMine(appId);
         if (typeof ((_b = res.stats) == null ? void 0 : _b.total) === "number") setLikeCount(Math.max(0, res.stats.total));
+        await trackUnlikeApp({ appId, source: interactionSource, success: true });
       }
     } catch (e) {
       setIsLiked(!newIsLiked);
       setLikeCount((prev) => Math.max(0, prev + (newIsLiked ? -1 : 1)));
+      if (newIsLiked) {
+        await trackLikeApp({ appId, source: interactionSource, success: false, error: e });
+      } else {
+        await trackUnlikeApp({ appId, source: interactionSource, success: false, error: e });
+      }
     }
-  }, [appId, isLiked, likeCount]);
+  }, [appId, interactionSource, isLiked, likeCount]);
   const handleOpenComments = React33.useCallback(() => {
     if (!appId) return;
     try {
       void Haptics2.impactAsync(Haptics2.ImpactFeedbackStyle.Light);
     } catch {
     }
+    void trackOpenComments({ appId, source: interactionSource });
     onOpenComments == null ? void 0 : onOpenComments();
-  }, [appId, onOpenComments]);
+  }, [appId, interactionSource, onOpenComments]);
   return { likeCount, commentCount, forkCount, isLiked, setCommentCount, handleLike, handleOpenComments };
 }
 
@@ -6166,7 +6537,8 @@ function usePreviewPanelData(params) {
     initialForks: insights.forks,
     initialComments: commentCountOverride ?? insights.comments,
     initialIsLiked: Boolean(app == null ? void 0 : app.isLiked),
-    onOpenComments
+    onOpenComments,
+    interactionSource: "preview_panel"
   });
   const canSubmitMergeRequest = React34.useMemo(() => {
     if (!isOwner) return false;
@@ -6232,7 +6604,7 @@ ${shareUrl}` : `Check out this app on Remix
 ${shareUrl}`;
     try {
       const title = app.name ?? "Remix app";
-      const payload = import_react_native43.Platform.OS === "ios" ? {
+      const payload = import_react_native44.Platform.OS === "ios" ? {
         title,
         message
       } : {
@@ -6240,9 +6612,18 @@ ${shareUrl}`;
         message,
         url: shareUrl
       };
-      await import_react_native43.Share.share(payload);
+      await import_react_native44.Share.share(payload);
+      await trackShareApp({
+        appId: app.id,
+        success: true
+      });
     } catch (error) {
       log.warn("PreviewPanel share failed", error);
+      await trackShareApp({
+        appId: app.id,
+        success: false,
+        error
+      });
     }
   }, [app]);
   const {
@@ -6274,9 +6655,9 @@ ${shareUrl}`;
     }
   );
   if (loading || !app) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native43.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native43.ActivityIndicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native43.View, { style: { height: 12 } }),
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.ActivityIndicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: { height: 12 } }),
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
@@ -6336,25 +6717,26 @@ ${shareUrl}`;
 }
 
 // src/studio/ui/ChatPanel.tsx
-var React41 = __toESM(require("react"));
-var import_react_native53 = require("react-native");
+var React42 = __toESM(require("react"));
+var import_react_native56 = require("react-native");
 
 // src/components/chat/ChatPage.tsx
-var React38 = __toESM(require("react"));
-var import_react_native48 = require("react-native");
+var React39 = __toESM(require("react"));
+var import_react_native49 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/components/chat/ChatMessageList.tsx
-var React37 = __toESM(require("react"));
-var import_react_native47 = require("react-native");
+var React38 = __toESM(require("react"));
+var import_react_native48 = require("react-native");
 var import_bottom_sheet5 = require("@gorhom/bottom-sheet");
 
 // src/components/chat/ChatMessageBubble.tsx
-var import_react_native45 = require("react-native");
+var React36 = __toESM(require("react"));
+var import_react_native46 = require("react-native");
 var import_lucide_react_native10 = require("lucide-react-native");
 
 // src/components/primitives/Button.tsx
-var import_react_native44 = require("react-native");
+var import_react_native45 = require("react-native");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function backgroundFor2(variant, theme, pressed, disabled) {
   const { colors } = theme;
@@ -6392,7 +6774,7 @@ function Button({
   const theme = useTheme();
   const isDisabled = disabled ?? void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_react_native44.Pressable,
+    import_react_native45.Pressable,
     {
       ...props,
       disabled: isDisabled,
@@ -6418,7 +6800,19 @@ function Button({
 
 // src/components/chat/ChatMessageBubble.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry, style }) {
+function areMessageMetaEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return a === b;
+  return a.kind === b.kind && a.event === b.event && a.status === b.status && a.mergeRequestId === b.mergeRequestId && a.sourceAppId === b.sourceAppId && a.targetAppId === b.targetAppId && a.appId === b.appId && a.threadId === b.threadId;
+}
+function ChatMessageBubbleInner({
+  message,
+  renderContent,
+  isLast,
+  retrying,
+  onRetryMessage,
+  style
+}) {
   var _a, _b;
   const theme = useTheme();
   const metaEvent = ((_a = message.meta) == null ? void 0 : _a.event) ?? null;
@@ -6433,9 +6827,12 @@ function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry,
   const bubbleVariant = isHuman ? "surface" : "surfaceRaised";
   const cornerStyle = isHuman ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 };
   const bodyColor = metaStatus === "success" ? theme.colors.success : metaStatus === "error" ? theme.colors.danger : void 0;
-  const showRetry = Boolean(onRetry) && isLast && metaStatus === "error" && message.author === "human";
+  const showRetry = Boolean(onRetryMessage) && isLast && metaStatus === "error" && message.author === "human";
   const retryLabel = retrying ? "Retrying..." : "Retry";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: [align, style], children: [
+  const handleRetryPress = React36.useCallback(() => {
+    onRetryMessage == null ? void 0 : onRetryMessage(message.id);
+  }, [message.id, onRetryMessage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: [align, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Surface,
       {
@@ -6451,23 +6848,23 @@ function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry,
           },
           cornerStyle
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
           isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
           isMergeApproved || isSyncStarted ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
         ] })
       }
     ),
-    showRetry ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    showRetry ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Button,
       {
         variant: "ghost",
         size: "sm",
-        onPress: onRetry,
+        onPress: handleRetryPress,
         disabled: retrying,
         style: { borderColor: theme.colors.danger },
         accessibilityLabel: "Retry send",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
           !retrying ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react_native10.RotateCcw, { size: 14, color: theme.colors.danger }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Text,
@@ -6484,26 +6881,31 @@ function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry,
     ) }) : null
   ] });
 }
+function areEqual(prev, next) {
+  return prev.message.id === next.message.id && prev.message.author === next.message.author && prev.message.content === next.message.content && prev.message.kind === next.message.kind && String(prev.message.createdAt) === String(next.message.createdAt) && areMessageMetaEqual(prev.message.meta, next.message.meta) && prev.renderContent === next.renderContent && prev.isLast === next.isLast && prev.retrying === next.retrying && prev.onRetryMessage === next.onRetryMessage && prev.style === next.style;
+}
+var ChatMessageBubble = React36.memo(ChatMessageBubbleInner, areEqual);
+ChatMessageBubble.displayName = "ChatMessageBubble";
 
 // src/components/chat/TypingIndicator.tsx
-var React36 = __toESM(require("react"));
-var import_react_native46 = require("react-native");
+var React37 = __toESM(require("react"));
+var import_react_native47 = require("react-native");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
-  const anims = React36.useMemo(
-    () => [new import_react_native46.Animated.Value(0.3), new import_react_native46.Animated.Value(0.3), new import_react_native46.Animated.Value(0.3)],
+  const anims = React37.useMemo(
+    () => [new import_react_native47.Animated.Value(0.3), new import_react_native47.Animated.Value(0.3), new import_react_native47.Animated.Value(0.3)],
     []
   );
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = import_react_native46.Animated.sequence([
-        import_react_native46.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        import_react_native46.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      const seq = import_react_native47.Animated.sequence([
+        import_react_native47.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        import_react_native47.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
       ]);
-      const loop = import_react_native46.Animated.loop(seq);
+      const loop = import_react_native47.Animated.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -6511,8 +6913,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native46.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_react_native46.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native47.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_react_native47.Animated.View,
     {
       style: {
         width: 8,
@@ -6521,7 +6923,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: import_react_native46.Animated.multiply(import_react_native46.Animated.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: import_react_native47.Animated.multiply(import_react_native47.Animated.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -6530,7 +6932,7 @@ function TypingIndicator({ style }) {
 
 // src/components/chat/ChatMessageList.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var ChatMessageList = React37.forwardRef(
+var ChatMessageList = React38.forwardRef(
   ({
     messages,
     showTypingIndicator = false,
@@ -6543,21 +6945,22 @@ var ChatMessageList = React37.forwardRef(
     nearBottomThreshold = 200
   }, ref) => {
     const theme = useTheme();
-    const listRef = React37.useRef(null);
-    const nearBottomRef = React37.useRef(true);
-    const initialScrollDoneRef = React37.useRef(false);
-    const lastMessageIdRef = React37.useRef(null);
-    const data = React37.useMemo(() => {
+    const listRef = React38.useRef(null);
+    const nearBottomRef = React38.useRef(true);
+    const initialScrollDoneRef = React38.useRef(false);
+    const lastMessageIdRef = React38.useRef(null);
+    const data = React38.useMemo(() => {
       return [...messages].reverse();
     }, [messages]);
     const lastMessageId = messages.length > 0 ? messages[messages.length - 1].id : null;
-    const scrollToBottom = React37.useCallback((options) => {
+    const keyExtractor = React38.useCallback((m) => m.id, []);
+    const scrollToBottom = React38.useCallback((options) => {
       var _a;
       const animated = (options == null ? void 0 : options.animated) ?? true;
       (_a = listRef.current) == null ? void 0 : _a.scrollToOffset({ offset: 0, animated });
     }, []);
-    React37.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
-    const handleScroll = React37.useCallback(
+    React38.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    const handleScroll = React38.useCallback(
       (e) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
         const distanceFromBottom = Math.max(contentOffset.y - Math.max(bottomInset, 0), 0);
@@ -6569,7 +6972,7 @@ var ChatMessageList = React37.forwardRef(
       },
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       if (!initialScrollDoneRef.current) return;
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : null;
       const prevLastId = lastMessageIdRef.current;
@@ -6579,54 +6982,68 @@ var ChatMessageList = React37.forwardRef(
       const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
       return () => cancelAnimationFrame(id);
     }, [messages, scrollToBottom]);
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       if (showTypingIndicator && nearBottomRef.current) {
         const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
         return () => cancelAnimationFrame(id);
       }
       return void 0;
     }, [showTypingIndicator, scrollToBottom]);
+    const handleContentSizeChange = React38.useCallback(() => {
+      if (initialScrollDoneRef.current) return;
+      initialScrollDoneRef.current = true;
+      lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1].id : null;
+      nearBottomRef.current = true;
+      onNearBottomChange == null ? void 0 : onNearBottomChange(true);
+      requestAnimationFrame(() => scrollToBottom({ animated: false }));
+    }, [messages, onNearBottomChange, scrollToBottom]);
+    const contentContainerStyle = React38.useMemo(
+      () => [
+        {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm
+        },
+        contentStyle
+      ],
+      [contentStyle, theme.spacing.lg, theme.spacing.sm]
+    );
+    const renderSeparator = React38.useCallback(() => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
+    const listHeader = React38.useMemo(
+      () => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { children: [
+        showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TypingIndicator, {}) }) : null,
+        bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { height: bottomInset } }) : null
+      ] }),
+      [bottomInset, showTypingIndicator, theme.spacing.lg, theme.spacing.sm]
+    );
+    const renderItem = React38.useCallback(
+      ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        ChatMessageBubble,
+        {
+          message: item,
+          renderContent: renderMessageContent,
+          isLast: Boolean(lastMessageId && item.id === lastMessageId),
+          retrying: (isRetryingMessage == null ? void 0 : isRetryingMessage(item.id)) ?? false,
+          onRetryMessage
+        }
+      ),
+      [isRetryingMessage, lastMessageId, onRetryMessage, renderMessageContent]
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_bottom_sheet5.BottomSheetFlatList,
       {
         ref: listRef,
         inverted: true,
         data,
-        keyExtractor: (m) => m.id,
+        keyExtractor,
         keyboardShouldPersistTaps: "handled",
         onScroll: handleScroll,
         scrollEventThrottle: 16,
         showsVerticalScrollIndicator: false,
-        onContentSizeChange: () => {
-          if (initialScrollDoneRef.current) return;
-          initialScrollDoneRef.current = true;
-          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1].id : null;
-          nearBottomRef.current = true;
-          onNearBottomChange == null ? void 0 : onNearBottomChange(true);
-          requestAnimationFrame(() => scrollToBottom({ animated: false }));
-        },
-        contentContainerStyle: [
-          {
-            paddingHorizontal: theme.spacing.lg,
-            paddingVertical: theme.spacing.sm
-          },
-          contentStyle
-        ],
-        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native47.View, { style: { height: theme.spacing.sm } }),
-        renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          ChatMessageBubble,
-          {
-            message: item,
-            renderContent: renderMessageContent,
-            isLast: Boolean(lastMessageId && item.id === lastMessageId),
-            retrying: (isRetryingMessage == null ? void 0 : isRetryingMessage(item.id)) ?? false,
-            onRetry: onRetryMessage ? () => onRetryMessage(item.id) : void 0
-          }
-        ),
-        ListHeaderComponent: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native47.View, { children: [
-          showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native47.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TypingIndicator, {}) }) : null,
-          bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native47.View, { style: { height: bottomInset } }) : null
-        ] })
+        onContentSizeChange: handleContentSizeChange,
+        contentContainerStyle,
+        ItemSeparatorComponent: renderSeparator,
+        renderItem,
+        ListHeaderComponent: listHeader
       }
     );
   }
@@ -6653,31 +7070,31 @@ function ChatPage({
 }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const [composerHeight, setComposerHeight] = React38.useState(0);
-  const [composerTopHeight, setComposerTopHeight] = React38.useState(0);
-  const footerBottomPadding = import_react_native48.Platform.OS === "ios" ? insets.bottom - 24 : insets.bottom + 10;
+  const [composerHeight, setComposerHeight] = React39.useState(0);
+  const [composerTopHeight, setComposerTopHeight] = React39.useState(0);
+  const footerBottomPadding = import_react_native49.Platform.OS === "ios" ? insets.bottom - 24 : insets.bottom + 10;
   const totalComposerHeight = composerHeight + composerTopHeight;
   const overlayBottom = totalComposerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = totalComposerHeight + footerBottomPadding + theme.spacing.xl;
-  const resolvedOverlay = React38.useMemo(() => {
+  const resolvedOverlay = React39.useMemo(() => {
     var _a;
     if (!overlay) return null;
-    if (!React38.isValidElement(overlay)) return overlay;
+    if (!React39.isValidElement(overlay)) return overlay;
     const prevStyle = (_a = overlay.props) == null ? void 0 : _a.style;
-    return React38.cloneElement(overlay, {
+    return React39.cloneElement(overlay, {
       style: [prevStyle, { bottom: overlayBottom }]
     });
   }, [overlay, overlayBottom]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (composerTop) return;
     setComposerTopHeight(0);
   }, [composerTop]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native48.View, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native48.View, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native48.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native48.View, { style: { flex: 1 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: [{ flex: 1 }, style], children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: { flex: 1 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-        import_react_native48.View,
+        import_react_native49.View,
         {
           style: { flex: 1 },
           children: [
@@ -6699,7 +7116,7 @@ function ChatPage({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-        import_react_native48.View,
+        import_react_native49.View,
         {
           style: {
             position: "absolute",
@@ -6712,7 +7129,7 @@ function ChatPage({
           },
           children: [
             composerTop ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              import_react_native48.View,
+              import_react_native49.View,
               {
                 style: { marginBottom: theme.spacing.sm },
                 onLayout: (e) => setComposerTopHeight(e.nativeEvent.layout.height),
@@ -6735,15 +7152,15 @@ function ChatPage({
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
-var React39 = __toESM(require("react"));
-var import_react_native49 = require("react-native");
+var React40 = __toESM(require("react"));
+var import_react_native50 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = (0, import_react_native_reanimated2.useSharedValue)(visible ? 1 : 0);
-  const [pressed, setPressed] = React39.useState(false);
-  React39.useEffect(() => {
+  const [pressed, setPressed] = React40.useState(false);
+  React40.useEffect(() => {
     progress.value = (0, import_react_native_reanimated2.withTiming)(visible ? 1 : 0, { duration: 200, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.ease) });
   }, [progress, visible]);
   const animStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
@@ -6767,7 +7184,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         animStyle
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_react_native49.View,
+        import_react_native50.View,
         {
           style: {
             width: 44,
@@ -6786,7 +7203,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             opacity: pressed ? 0.85 : 1
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_react_native49.Pressable,
+            import_react_native50.Pressable,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -6803,10 +7220,10 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-var import_react_native50 = require("react-native");
+var import_react_native51 = require("react-native");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = import_react_native50.StyleSheet.flatten([
+  const flattenedStyle = import_react_native51.StyleSheet.flatten([
     {
       paddingTop: 0
     },
@@ -6824,7 +7241,7 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-var import_react_native51 = require("react-native");
+var import_react_native52 = require("react-native");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
@@ -6845,7 +7262,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { minWidth: 0 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native52.View, { style: { minWidth: 0 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Text,
           {
@@ -6878,16 +7295,16 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 }
 
 // src/components/chat/ChatQueue.tsx
-var React40 = __toESM(require("react"));
-var import_react_native52 = require("react-native");
+var React41 = __toESM(require("react"));
+var import_react_native53 = require("react-native");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function ChatQueue({ items, onRemove }) {
   const theme = useTheme();
-  const [expanded, setExpanded] = React40.useState({});
-  const [canExpand, setCanExpand] = React40.useState({});
-  const [collapsedText, setCollapsedText] = React40.useState({});
-  const [removing, setRemoving] = React40.useState({});
-  const buildCollapsedText = React40.useCallback((lines) => {
+  const [expanded, setExpanded] = React41.useState({});
+  const [canExpand, setCanExpand] = React41.useState({});
+  const [collapsedText, setCollapsedText] = React41.useState({});
+  const [removing, setRemoving] = React41.useState({});
+  const buildCollapsedText = React41.useCallback((lines) => {
     var _a, _b;
     const line1 = ((_a = lines[0]) == null ? void 0 : _a.text) ?? "";
     const line2 = ((_b = lines[1]) == null ? void 0 : _b.text) ?? "";
@@ -6903,7 +7320,7 @@ function ChatQueue({ items, onRemove }) {
     return `${line1}
 ${trimmedLine2}\u2026 `;
   }, []);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (items.length === 0) return;
     const ids = new Set(items.map((item) => item.id));
     setExpanded((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
@@ -6913,7 +7330,7 @@ ${trimmedLine2}\u2026 `;
   }, [items]);
   if (items.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-    import_react_native52.View,
+    import_react_native53.View,
     {
       style: {
         borderWidth: 1,
@@ -6925,7 +7342,7 @@ ${trimmedLine2}\u2026 `;
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native52.View, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native53.View, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
           const isExpanded = Boolean(expanded[item.id]);
           const showToggle = Boolean(canExpand[item.id]);
           const prompt = item.prompt ?? "";
@@ -6933,7 +7350,7 @@ ${trimmedLine2}\u2026 `;
           const displayPrompt = !isExpanded && showToggle && collapsedText[item.id] ? collapsedText[item.id] : prompt;
           const isRemoving = Boolean(removing[item.id]);
           return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-            import_react_native52.View,
+            import_react_native53.View,
             {
               style: {
                 flexDirection: "row",
@@ -6945,7 +7362,7 @@ ${trimmedLine2}\u2026 `;
                 backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.8 : 0.9)
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native52.View, { style: { flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native53.View, { style: { flex: 1 }, children: [
                   !canExpand[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                     Text,
                     {
@@ -6985,7 +7402,7 @@ ${trimmedLine2}\u2026 `;
                     }
                   ),
                   showToggle && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    import_react_native52.Pressable,
+                    import_react_native53.Pressable,
                     {
                       onPress: () => setExpanded((prev) => ({ ...prev, [item.id]: false })),
                       hitSlop: 6,
@@ -6995,7 +7412,7 @@ ${trimmedLine2}\u2026 `;
                   ) : null
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                  import_react_native52.Pressable,
+                  import_react_native53.Pressable,
                   {
                     onPress: () => {
                       if (!onRemove || isRemoving) return;
@@ -7010,7 +7427,7 @@ ${trimmedLine2}\u2026 `;
                     },
                     hitSlop: 8,
                     style: { alignSelf: "center" },
-                    children: isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native52.ActivityIndicator, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconClose, { size: 14, colorToken: "text" })
+                    children: isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native53.ActivityIndicator, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconClose, { size: 14, colorToken: "text" })
                   }
                 )
               ]
@@ -7023,8 +7440,137 @@ ${trimmedLine2}\u2026 `;
   );
 }
 
-// src/studio/ui/ChatPanel.tsx
+// src/components/chat/AgentProgressCard.tsx
+var import_react_native54 = require("react-native");
 var import_jsx_runtime55 = require("react/jsx-runtime");
+function titleForPhase(phase) {
+  if (phase === "planning") return "Planning";
+  if (phase === "reasoning") return "Reasoning";
+  if (phase === "analyzing") return "Analyzing";
+  if (phase === "editing") return "Editing";
+  if (phase === "executing") return "Executing";
+  if (phase === "validating") return "Validating";
+  if (phase === "finalizing") return "Finalizing";
+  if (phase === "working") return "Working";
+  return "Working";
+}
+function titleForStatus(status) {
+  if (status === "succeeded") return "Completed";
+  if (status === "failed") return "Failed";
+  if (status === "cancelled") return "Cancelled";
+  return "In Progress";
+}
+function AgentProgressCard({ progress }) {
+  const theme = useTheme();
+  const statusLabel = titleForStatus(progress.status);
+  const phaseLabel = titleForPhase(progress.phase);
+  const subtitle = progress.latestMessage || `Agent is ${phaseLabel.toLowerCase()}...`;
+  const todo = progress.todoSummary;
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    import_react_native54.View,
+    {
+      style: {
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radii.lg,
+        marginHorizontal: theme.spacing.md,
+        padding: theme.spacing.md,
+        backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native54.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { variant: "captionMuted", children: phaseLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
+        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+          "Updated files: ",
+          progress.changedFilesCount
+        ] }) : null,
+        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native54.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
+          "\u2022 ",
+          path
+        ] }, path)) }) : null,
+        todo ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+          "Todos: ",
+          todo.completed,
+          "/",
+          todo.total,
+          " complete",
+          todo.currentTask ? ` \u2022 ${todo.currentTask}` : ""
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/chat/BundleProgressCard.tsx
+var import_react_native55 = require("react-native");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function titleForStatus2(status) {
+  if (status === "succeeded") return "Completed";
+  if (status === "failed") return "Failed";
+  return "In Progress";
+}
+function BundleProgressCard({ progress }) {
+  const theme = useTheme();
+  const statusLabel = titleForStatus2(progress.status);
+  const percent = Math.round(Math.max(0, Math.min(1, progress.progressValue)) * 100);
+  const fillColor = progress.status === "failed" ? theme.colors.danger : progress.status === "succeeded" ? theme.colors.success : theme.colors.warning;
+  const detail = progress.errorMessage || progress.phaseLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    import_react_native55.View,
+    {
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: `Bundle progress ${statusLabel}`,
+      accessibilityValue: { min: 0, max: 100, now: percent, text: `${percent}%` },
+      style: {
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radii.lg,
+        marginHorizontal: theme.spacing.md,
+        padding: theme.spacing.md,
+        backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native55.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { variant: "captionMuted", children: [
+            percent,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          import_react_native55.View,
+          {
+            style: {
+              width: "100%",
+              height: 8,
+              borderRadius: 999,
+              backgroundColor: withAlpha(theme.colors.border, theme.scheme === "dark" ? 0.5 : 0.6),
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              import_react_native55.View,
+              {
+                style: {
+                  width: `${percent}%`,
+                  height: "100%",
+                  backgroundColor: fillColor
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
+      ]
+    }
+  );
+}
+
+// src/studio/ui/ChatPanel.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ChatPanel({
   title = "Chat",
   messages,
@@ -7045,11 +7591,13 @@ function ChatPanel({
   onRetryMessage,
   isRetryingMessage,
   queueItems = [],
-  onRemoveQueueItem
+  onRemoveQueueItem,
+  progress = null
 }) {
-  const listRef = React41.useRef(null);
-  const [nearBottom, setNearBottom] = React41.useState(true);
-  const handleSend = React41.useCallback(
+  const theme = useTheme();
+  const listRef = React42.useRef(null);
+  const [nearBottom, setNearBottom] = React42.useState(true);
+  const handleSend = React42.useCallback(
     async (text, composerAttachments) => {
       const all = composerAttachments ?? attachments;
       await onSend(text, all.length > 0 ? all : void 0);
@@ -7063,25 +7611,25 @@ function ChatPanel({
     },
     [attachments, nearBottom, onClearAttachments, onSend]
   );
-  const handleScrollToBottom = React41.useCallback(() => {
+  const handleScrollToBottom = React42.useCallback(() => {
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
-  const header = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native53.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+      left: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native53.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
+      right: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -7090,18 +7638,22 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native53.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native53.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { style: { height: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { children: header }),
+      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.ActivityIndicator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { style: { height: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
       ] })
     ] });
   }
-  const queueTop = queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const bundleProgress = (progress == null ? void 0 : progress.bundle) ?? null;
+  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { gap: theme.spacing.sm }, children: [
+    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AgentProgressCard, { progress }) : null,
+    queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     ChatPage,
     {
       header,
@@ -7114,13 +7666,13 @@ function ChatPanel({
       composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      overlay: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -7140,12 +7692,12 @@ function ChatPanel({
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-var React42 = __toESM(require("react"));
-var import_react_native55 = require("react-native");
+var React43 = __toESM(require("react"));
+var import_react_native58 = require("react-native");
 
 // src/components/primitives/Modal.tsx
-var import_react_native54 = require("react-native");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react_native57 = require("react-native");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Modal2({
   visible,
   onRequestClose,
@@ -7154,30 +7706,30 @@ function Modal2({
   contentStyle
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-    import_react_native54.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react_native57.Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native54.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          import_react_native54.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_react_native57.Pressable,
           {
             accessibilityRole: "button",
             onPress: dismissOnBackdropPress ? onRequestClose : void 0,
             style: { position: "absolute", inset: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
       ] })
     }
   );
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -7188,14 +7740,14 @@ function ConfirmMergeRequestDialog({
   onTestFirst
 }) {
   const theme = useTheme();
-  const close = React42.useCallback(() => onOpenChange(false), [onOpenChange]);
+  const close = React43.useCallback(() => onOpenChange(false), [onOpenChange]);
   const canConfirm = Boolean(mergeRequest) && !approveDisabled;
-  const handleConfirm = React42.useCallback(() => {
+  const handleConfirm = React43.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onConfirm();
   }, [mergeRequest, onConfirm, onOpenChange]);
-  const handleTestFirst = React42.useCallback(() => {
+  const handleTestFirst = React43.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onTestFirst(mergeRequest);
@@ -7207,7 +7759,7 @@ function ConfirmMergeRequestDialog({
     justifyContent: "center",
     alignSelf: "stretch"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     Modal2,
     {
       visible,
@@ -7218,7 +7770,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native55.View, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           Text,
           {
             style: {
@@ -7230,9 +7782,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native55.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            import_react_native55.View,
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            import_react_native58.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -7241,22 +7793,22 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                import_react_native55.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_react_native58.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native55.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            import_react_native55.View,
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            import_react_native58.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -7267,22 +7819,22 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                import_react_native55.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_react_native58.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native55.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            import_react_native55.View,
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            import_react_native58.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -7292,14 +7844,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                import_react_native55.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_react_native58.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -7311,7 +7863,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -7322,7 +7874,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -7344,7 +7896,7 @@ function ConfirmMergeFlow({
 }
 
 // src/studio/hooks/useOptimisticChatMessages.ts
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 function makeOptimisticId() {
   return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -7383,11 +7935,11 @@ function useOptimisticChatMessages({
   chatMessages,
   onSendChat
 }) {
-  const [optimisticChat, setOptimisticChat] = React43.useState([]);
-  React43.useEffect(() => {
+  const [optimisticChat, setOptimisticChat] = React44.useState([]);
+  React44.useEffect(() => {
     setOptimisticChat([]);
   }, [threadId]);
-  const messages = React43.useMemo(() => {
+  const messages = React44.useMemo(() => {
     if (!optimisticChat || optimisticChat.length === 0) return chatMessages;
     const unresolved = optimisticChat.filter((o) => !isOptimisticResolvedByServer(chatMessages, o));
     if (unresolved.length === 0) return chatMessages;
@@ -7403,7 +7955,7 @@ function useOptimisticChatMessages({
     merged.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
     return merged;
   }, [chatMessages, optimisticChat]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (optimisticChat.length === 0) return;
     setOptimisticChat((prev) => {
       if (prev.length === 0) return prev;
@@ -7411,7 +7963,7 @@ function useOptimisticChatMessages({
       return next.length === prev.length ? prev : next;
     });
   }, [chatMessages, optimisticChat.length]);
-  const onSend = React43.useCallback(
+  const onSend = React44.useCallback(
     async (text, attachments) => {
       if (shouldForkOnEdit || disableOptimistic) {
         await onSendChat(text, attachments);
@@ -7439,7 +7991,7 @@ function useOptimisticChatMessages({
     },
     [chatMessages, disableOptimistic, onSendChat, shouldForkOnEdit]
   );
-  const onRetry = React43.useCallback(
+  const onRetry = React44.useCallback(
     async (messageId) => {
       if (shouldForkOnEdit || disableOptimistic) return;
       const target = optimisticChat.find((m) => m.id === messageId);
@@ -7463,7 +8015,7 @@ function useOptimisticChatMessages({
     },
     [chatMessages, disableOptimistic, onSendChat, optimisticChat, shouldForkOnEdit]
   );
-  const isRetrying = React43.useCallback(
+  const isRetrying = React44.useCallback(
     (messageId) => {
       return optimisticChat.some((m) => m.id === messageId && m.retrying);
     },
@@ -7474,7 +8026,7 @@ function useOptimisticChatMessages({
 
 // src/studio/ui/StudioOverlay.tsx
 var import_studio_control = require("@comergehq/studio-control");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -7507,19 +8059,20 @@ function StudioOverlay({
   onSendChat,
   chatQueueItems,
   onRemoveQueueItem,
+  chatProgress,
   onNavigateHome,
   showBubble,
   studioControlOptions
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native56.useWindowDimensions)();
-  const [sheetOpen, setSheetOpen] = React44.useState(false);
-  const sheetOpenRef = React44.useRef(sheetOpen);
-  const [activePage, setActivePage] = React44.useState("preview");
-  const [drawing, setDrawing] = React44.useState(false);
-  const [chatAttachments, setChatAttachments] = React44.useState([]);
-  const [commentsAppId, setCommentsAppId] = React44.useState(null);
-  const [commentsCount, setCommentsCount] = React44.useState(null);
+  const { width } = (0, import_react_native59.useWindowDimensions)();
+  const [sheetOpen, setSheetOpen] = React45.useState(false);
+  const sheetOpenRef = React45.useRef(sheetOpen);
+  const [activePage, setActivePage] = React45.useState("preview");
+  const [drawing, setDrawing] = React45.useState(false);
+  const [chatAttachments, setChatAttachments] = React45.useState([]);
+  const [commentsAppId, setCommentsAppId] = React45.useState(null);
+  const [commentsCount, setCommentsCount] = React45.useState(null);
   const threadId = (app == null ? void 0 : app.threadId) ?? null;
   const isForking = chatForking || (app == null ? void 0 : app.status) === "forking";
   const queueItemsForChat = isForking ? [] : chatQueueItems;
@@ -7531,26 +8084,26 @@ function StudioOverlay({
     chatMessages,
     onSendChat
   });
-  const [confirmMrId, setConfirmMrId] = React44.useState(null);
-  const confirmMr = React44.useMemo(
+  const [confirmMrId, setConfirmMrId] = React45.useState(null);
+  const confirmMr = React45.useMemo(
     () => confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null,
     [confirmMrId, incomingMergeRequests]
   );
-  const handleSheetOpenChange = React44.useCallback((open) => {
+  const handleSheetOpenChange = React45.useCallback((open) => {
     setSheetOpen(open);
-    if (!open) import_react_native56.Keyboard.dismiss();
+    if (!open) import_react_native59.Keyboard.dismiss();
   }, []);
-  const closeSheet = React44.useCallback(() => {
+  const closeSheet = React45.useCallback(() => {
     handleSheetOpenChange(false);
   }, [handleSheetOpenChange]);
-  const openSheet = React44.useCallback(() => setSheetOpen(true), []);
-  const goToChat = React44.useCallback(() => {
+  const openSheet = React45.useCallback(() => setSheetOpen(true), []);
+  const goToChat = React45.useCallback(() => {
     setActivePage("chat");
     openSheet();
   }, [openSheet]);
-  const backToPreview = React44.useCallback(() => {
-    if (import_react_native56.Platform.OS !== "ios") {
-      import_react_native56.Keyboard.dismiss();
+  const backToPreview = React45.useCallback(() => {
+    if (import_react_native59.Platform.OS !== "ios") {
+      import_react_native59.Keyboard.dismiss();
       setActivePage("preview");
       return;
     }
@@ -7562,15 +8115,15 @@ function StudioOverlay({
       clearTimeout(t);
       setActivePage("preview");
     };
-    const sub = import_react_native56.Keyboard.addListener("keyboardDidHide", finalize);
+    const sub = import_react_native59.Keyboard.addListener("keyboardDidHide", finalize);
     const t = setTimeout(finalize, 350);
-    import_react_native56.Keyboard.dismiss();
+    import_react_native59.Keyboard.dismiss();
   }, []);
-  const startDraw = React44.useCallback(() => {
+  const startDraw = React45.useCallback(() => {
     setDrawing(true);
     closeSheet();
   }, [closeSheet]);
-  const handleDrawCapture = React44.useCallback(
+  const handleDrawCapture = React45.useCallback(
     (dataUrl) => {
       setChatAttachments((prev) => [...prev, dataUrl]);
       setDrawing(false);
@@ -7579,7 +8132,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React44.useCallback(async () => {
+  const toggleSheet = React45.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -7591,7 +8144,7 @@ function StudioOverlay({
       closeSheet();
     }
   }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
-  const handleTestMr = React44.useCallback(
+  const handleTestMr = React45.useCallback(
     async (mr) => {
       if (!onTestMr) return;
       await onTestMr(mr);
@@ -7599,10 +8152,10 @@ function StudioOverlay({
     },
     [closeSheet, onTestMr]
   );
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     sheetOpenRef.current = sheetOpen;
   }, [sheetOpen]);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     const poller = (0, import_studio_control.startStudioControlPolling)((action) => {
       if (action === "show" && !sheetOpenRef.current) openSheet();
       if (action === "hide" && sheetOpenRef.current) closeSheet();
@@ -7610,17 +8163,17 @@ function StudioOverlay({
     }, studioControlOptions);
     return () => poller.stop();
   }, [closeSheet, openSheet, studioControlOptions, toggleSheet]);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     void (0, import_studio_control.publishComergeStudioUIState)(sheetOpen, studioControlOptions);
   }, [sheetOpen, studioControlOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        preview: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           PreviewPanel,
           {
             app,
@@ -7649,7 +8202,7 @@ function StudioOverlay({
             commentCountOverride: commentsCount ?? void 0
           }
         ),
-        chat: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        chat: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           ChatPanel,
           {
             messages: optimistic.messages,
@@ -7670,12 +8223,13 @@ function StudioOverlay({
             onRetryMessage: optimistic.onRetry,
             isRetryingMessage: optimistic.isRetrying,
             queueItems: queueItemsForChat,
-            onRemoveQueueItem
+            onRemoveQueueItem,
+            progress: chatProgress
           }
         )
       }
     ) }),
-    showBubble && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    showBubble && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       Bubble,
       {
         visible: !sheetOpen && !drawing,
@@ -7684,10 +8238,10 @@ function StudioOverlay({
         onPress: toggleSheet,
         isLoading: (app == null ? void 0 : app.status) === "editing" || isBaseBundleDownloading,
         loadingBorderTone: isBaseBundleDownloading ? "warning" : "default",
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native56.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -7696,7 +8250,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -7710,7 +8264,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -7723,7 +8277,7 @@ function StudioOverlay({
 }
 
 // src/studio/hooks/useEditQueue.ts
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
 
 // src/data/apps/edit-queue/remote.ts
 var EditQueueRemoteDataSourceImpl = class extends BaseRemote {
@@ -7832,17 +8386,17 @@ var editQueueRepository = new EditQueueRepositoryImpl(
 
 // src/studio/hooks/useEditQueue.ts
 function useEditQueue(appId) {
-  const [items, setItems] = React45.useState([]);
-  const [loading, setLoading] = React45.useState(false);
-  const [error, setError] = React45.useState(null);
-  const activeRequestIdRef = React45.useRef(0);
+  const [items, setItems] = React46.useState([]);
+  const [loading, setLoading] = React46.useState(false);
+  const [error, setError] = React46.useState(null);
+  const activeRequestIdRef = React46.useRef(0);
   const foregroundSignal = useForegroundSignal(Boolean(appId));
-  const upsertSorted = React45.useCallback((prev, nextItem) => {
+  const upsertSorted = React46.useCallback((prev, nextItem) => {
     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 = React45.useCallback(async () => {
+  const refetch = React46.useCallback(async () => {
     if (!appId) {
       setItems([]);
       return;
@@ -7862,10 +8416,10 @@ function useEditQueue(appId) {
       if (activeRequestIdRef.current === requestId) setLoading(false);
     }
   }, [appId]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     void refetch();
   }, [refetch]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     if (!appId) return;
     const unsubscribe = editQueueRepository.subscribeEditQueue(appId, {
       onInsert: (item) => setItems((prev) => upsertSorted(prev, item)),
@@ -7874,7 +8428,7 @@ function useEditQueue(appId) {
     });
     return unsubscribe;
   }, [appId, upsertSorted, foregroundSignal]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     if (!appId) return;
     if (foregroundSignal <= 0) return;
     void refetch();
@@ -7883,16 +8437,16 @@ function useEditQueue(appId) {
 }
 
 // src/studio/hooks/useEditQueueActions.ts
-var React46 = __toESM(require("react"));
+var React47 = __toESM(require("react"));
 function useEditQueueActions(appId) {
-  const update = React46.useCallback(
+  const update = React47.useCallback(
     async (queueItemId, payload) => {
       if (!appId) return;
       await editQueueRepository.update(appId, queueItemId, payload);
     },
     [appId]
   );
-  const cancel = React46.useCallback(
+  const cancel = React47.useCallback(
     async (queueItemId) => {
       if (!appId) return;
       await editQueueRepository.cancel(appId, queueItemId);
@@ -7902,48 +8456,461 @@ function useEditQueueActions(appId) {
   return { update, cancel };
 }
 
+// src/studio/hooks/useAgentRunProgress.ts
+var React48 = __toESM(require("react"));
+
+// src/data/agent-progress/repository.ts
+function mapRun(row) {
+  return {
+    id: row.id,
+    appId: row.app_id,
+    threadId: row.thread_id,
+    queueItemId: row.queue_item_id,
+    status: row.status,
+    currentPhase: row.current_phase,
+    lastSeq: Number(row.last_seq || 0),
+    summary: row.summary || {},
+    errorCode: row.error_code,
+    errorMessage: row.error_message,
+    startedAt: row.started_at,
+    finishedAt: row.finished_at,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at
+  };
+}
+function mapEvent(row) {
+  return {
+    id: row.id,
+    runId: row.run_id,
+    appId: row.app_id,
+    threadId: row.thread_id,
+    queueItemId: row.queue_item_id,
+    seq: Number(row.seq || 0),
+    eventType: row.event_type,
+    phase: row.phase,
+    toolName: row.tool_name,
+    path: row.path,
+    payload: row.payload || {},
+    createdAt: row.created_at
+  };
+}
+var AgentProgressRepositoryImpl = class {
+  async getLatestRun(threadId) {
+    if (!threadId) return null;
+    const supabase = getSupabaseClient();
+    const { data, error } = await supabase.from("agent_run").select("*").eq("thread_id", threadId).order("started_at", { ascending: false }).limit(1).maybeSingle();
+    if (error) throw new Error(error.message || "Failed to fetch latest agent run");
+    if (!data) return null;
+    return mapRun(data);
+  }
+  async listEvents(runId, afterSeq) {
+    if (!runId) return [];
+    const supabase = getSupabaseClient();
+    let query = supabase.from("agent_run_event").select("*").eq("run_id", runId).order("seq", { ascending: true });
+    if (typeof afterSeq === "number" && Number.isFinite(afterSeq) && afterSeq > 0) {
+      query = query.gt("seq", afterSeq);
+    }
+    const { data, error } = await query;
+    if (error) throw new Error(error.message || "Failed to fetch agent run events");
+    const rows = Array.isArray(data) ? data : [];
+    return rows.map(mapEvent);
+  }
+  subscribeThreadRuns(threadId, handlers) {
+    return subscribeManagedChannel(`agent-progress:runs:thread:${threadId}`, (channel) => {
+      channel.on(
+        "postgres_changes",
+        { event: "INSERT", schema: "public", table: "agent_run", filter: `thread_id=eq.${threadId}` },
+        (payload) => {
+          var _a;
+          const row = payload.new;
+          (_a = handlers.onInsert) == null ? void 0 : _a.call(handlers, mapRun(row));
+        }
+      ).on(
+        "postgres_changes",
+        { event: "UPDATE", schema: "public", table: "agent_run", filter: `thread_id=eq.${threadId}` },
+        (payload) => {
+          var _a;
+          const row = payload.new;
+          (_a = handlers.onUpdate) == null ? void 0 : _a.call(handlers, mapRun(row));
+        }
+      );
+    });
+  }
+  subscribeRunEvents(runId, handlers) {
+    return subscribeManagedChannel(`agent-progress:events:run:${runId}`, (channel) => {
+      channel.on(
+        "postgres_changes",
+        { event: "INSERT", schema: "public", table: "agent_run_event", filter: `run_id=eq.${runId}` },
+        (payload) => {
+          var _a;
+          const row = payload.new;
+          (_a = handlers.onInsert) == null ? void 0 : _a.call(handlers, mapEvent(row));
+        }
+      ).on(
+        "postgres_changes",
+        { event: "UPDATE", schema: "public", table: "agent_run_event", filter: `run_id=eq.${runId}` },
+        (payload) => {
+          var _a;
+          const row = payload.new;
+          (_a = handlers.onUpdate) == null ? void 0 : _a.call(handlers, mapEvent(row));
+        }
+      );
+    });
+  }
+};
+var agentProgressRepository = new AgentProgressRepositoryImpl();
+
+// src/studio/hooks/useAgentRunProgress.ts
+function upsertBySeq(prev, next) {
+  const map = /* @__PURE__ */ new Map();
+  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, incoming) {
+  if (incoming.length === 0) return prev;
+  const map = /* @__PURE__ */ new Map();
+  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) {
+  if (!v) return 0;
+  const n = Date.parse(v);
+  return Number.isFinite(n) ? n : 0;
+}
+function shouldSwitchRun(current, candidate) {
+  if (!current) return true;
+  if (candidate.id === current.id) return true;
+  return toMs(candidate.startedAt) >= toMs(current.startedAt);
+}
+function toInt(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function toBundleStage(value) {
+  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) {
+  if (value === "ios" || value === "android") return value;
+  return "both";
+}
+function clamp01(value) {
+  if (value <= 0) return 0;
+  if (value >= 1) return 1;
+  return value;
+}
+function defaultBundleLabel(stage) {
+  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, startedAtMs, nowMs) {
+  if (stage === "ready") return 1;
+  if (stage === "failed") return 0.96;
+  const elapsed = Math.max(0, nowMs - startedAtMs);
+  const expectedMs = 6e4;
+  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 / 25e3)), 0.97);
+}
+function deriveView(run, events, nowMs) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const files = [];
+  const fileSeen = /* @__PURE__ */ new Set();
+  let todoSummary = null;
+  let latestMessage = null;
+  let phase = (run == null ? void 0 : run.currentPhase) ?? null;
+  let bundleStage = null;
+  let bundleLabel = null;
+  let bundleError = null;
+  let bundleProgressHint = null;
+  let bundlePlatform = "both";
+  let bundleStartedAtMs = null;
+  let lastBundleSig = null;
+  for (const ev of events) {
+    if (ev.eventType === "phase_changed") {
+      if (typeof ((_a = ev.payload) == null ? void 0 : _a.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((_b = ev.payload) == null ? void 0 : _b.total),
+        pending: toInt((_c = ev.payload) == null ? void 0 : _c.pending),
+        inProgress: toInt((_d = ev.payload) == null ? void 0 : _d.inProgress),
+        completed: toInt((_e = ev.payload) == null ? void 0 : _e.completed),
+        currentTask: typeof ((_f = ev.payload) == null ? void 0 : _f.currentTask) === "string" ? ev.payload.currentTask : null
+      };
+    }
+    const stageType = typeof ((_g = ev.payload) == null ? void 0 : _g.stage) === "string" ? ev.payload.stage : null;
+    if (stageType !== "bundle") continue;
+    const nextStage = toBundleStage((_h = ev.payload) == null ? void 0 : _h.bundlePhase);
+    if (!nextStage) continue;
+    const nextPlatform = toBundlePlatform((_i = ev.payload) == null ? void 0 : _i.platform);
+    const message = typeof ((_j = ev.payload) == null ? void 0 : _j.message) === "string" ? ev.payload.message : null;
+    const phaseLabel = message || (typeof ((_k = ev.payload) == null ? void 0 : _k.message) === "string" ? ev.payload.message : null);
+    const hintRaw = Number((_l = ev.payload) == null ? void 0 : _l.progressHint);
+    const progressHint = Number.isFinite(hintRaw) ? clamp01(hintRaw) : null;
+    const errorText = typeof ((_m = ev.payload) == null ? void 0 : _m.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 == null ? void 0 : run.status) === "succeeded" || (run == null ? void 0 : run.status) === "failed" || (run == null ? void 0 : run.status) === "cancelled";
+  let bundle = null;
+  if (bundleStage && !runFinished) {
+    const baseTime = bundleStartedAtMs ?? toMs(run == null ? void 0 : 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 == null ? void 0 : run.id) ?? null,
+    status: (run == null ? void 0 : run.status) ?? null,
+    phase,
+    latestMessage,
+    changedFilesCount: fileSeen.size,
+    recentFiles: files.slice(-5),
+    todoSummary,
+    bundle,
+    events
+  };
+}
+function useAgentRunProgress(threadId, opts) {
+  var _a;
+  const enabled = Boolean((opts == null ? void 0 : opts.enabled) ?? true);
+  const [run, setRun] = React48.useState(null);
+  const [events, setEvents] = React48.useState([]);
+  const [loading, setLoading] = React48.useState(false);
+  const [error, setError] = React48.useState(null);
+  const activeRequestIdRef = React48.useRef(0);
+  const lastSeqRef = React48.useRef(0);
+  const runRef = React48.useRef(null);
+  const foregroundSignal = useForegroundSignal(Boolean(threadId) && enabled);
+  const [bundleTick, setBundleTick] = React48.useState(0);
+  React48.useEffect(() => {
+    lastSeqRef.current = 0;
+    runRef.current = null;
+  }, [threadId]);
+  React48.useEffect(() => {
+    runRef.current = run;
+  }, [run]);
+  const refetch = React48.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]);
+  React48.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+  React48.useEffect(() => {
+    if (!threadId || !enabled) return;
+    if (foregroundSignal <= 0) return;
+    void refetch();
+  }, [enabled, foregroundSignal, refetch, threadId]);
+  React48.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) => {
+            var _a2;
+            if (((_a2 = runRef.current) == null ? void 0 : _a2.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]);
+  React48.useEffect(() => {
+    if (!enabled || !(run == null ? void 0 : run.id)) return;
+    const runId = run.id;
+    const processIncoming = (incoming) => {
+      var _a2;
+      if (((_a2 = runRef.current) == null ? void 0 : _a2.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) => {
+            var _a3;
+            if (((_a3 = runRef.current) == null ? void 0 : _a3.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 == null ? void 0 : run.id, foregroundSignal]);
+  const view = React48.useMemo(() => deriveView(run, events, Date.now()), [bundleTick, events, run]);
+  React48.useEffect(() => {
+    var _a2;
+    if (!((_a2 = view.bundle) == null ? void 0 : _a2.active)) return;
+    const interval = setInterval(() => {
+      setBundleTick((v) => v + 1);
+    }, 300);
+    return () => clearInterval(interval);
+  }, [(_a = view.bundle) == null ? void 0 : _a.active]);
+  const hasLiveProgress = Boolean(run) && (run == null ? void 0 : run.status) === "running";
+  return { run, view, loading, error, hasLiveProgress, refetch };
+}
+
 // src/studio/ComergeStudio.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function ComergeStudio({
   appId,
   clientKey: clientKey2,
   appKey = "MicroMain",
+  analyticsEnabled,
   onNavigateHome,
   style,
   showBubble = true,
+  enableAgentProgress = true,
   studioControlOptions,
   embeddedBaseBundles
 }) {
-  const [activeAppId, setActiveAppId] = React47.useState(appId);
-  const [runtimeAppId, setRuntimeAppId] = React47.useState(appId);
-  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React47.useState(null);
-  const platform = React47.useMemo(() => import_react_native57.Platform.OS === "ios" ? "ios" : "android", []);
-  React47.useEffect(() => {
+  const [activeAppId, setActiveAppId] = React49.useState(appId);
+  const [runtimeAppId, setRuntimeAppId] = React49.useState(appId);
+  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React49.useState(null);
+  const platform = React49.useMemo(() => import_react_native60.Platform.OS === "ios" ? "ios" : "android", []);
+  React49.useEffect(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
-  const captureTargetRef = React47.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StudioBootstrap, { clientKey: clientKey2, fallback: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native57.View, { style: { flex: 1 } }), children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    ComergeStudioInner,
+  const captureTargetRef = React49.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    StudioBootstrap,
     {
-      userId,
-      activeAppId,
-      setActiveAppId,
-      runtimeAppId,
-      setRuntimeAppId,
-      pendingRuntimeTargetAppId,
-      setPendingRuntimeTargetAppId,
-      appKey,
-      platform,
-      onNavigateHome,
-      captureTargetRef,
-      style,
-      showBubble,
-      studioControlOptions,
-      embeddedBaseBundles
+      clientKey: clientKey2,
+      analyticsEnabled,
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { style: { flex: 1 } }),
+      children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        ComergeStudioInner,
+        {
+          userId,
+          activeAppId,
+          setActiveAppId,
+          runtimeAppId,
+          setRuntimeAppId,
+          pendingRuntimeTargetAppId,
+          setPendingRuntimeTargetAppId,
+          appKey,
+          platform,
+          onNavigateHome,
+          captureTargetRef,
+          style,
+          showBubble,
+          enableAgentProgress,
+          studioControlOptions,
+          embeddedBaseBundles
+        }
+      ) }) })
     }
-  ) }) }) });
+  );
 }
 function ComergeStudioInner({
   userId,
@@ -7959,17 +8926,19 @@ function ComergeStudioInner({
   captureTargetRef,
   style,
   showBubble,
+  enableAgentProgress,
   studioControlOptions,
   embeddedBaseBundles
 }) {
+  var _a;
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
   const runtimeApp = runtimeAppId === activeAppId ? app : runtimeAppFromHook;
-  const sawEditingOnPendingTargetRef = React47.useRef(false);
-  React47.useEffect(() => {
+  const sawEditingOnPendingTargetRef = React49.useRef(false);
+  React49.useEffect(() => {
     sawEditingOnPendingTargetRef.current = false;
   }, [pendingRuntimeTargetAppId]);
-  React47.useEffect(() => {
+  React49.useEffect(() => {
     if (!pendingRuntimeTargetAppId) return;
     if (activeAppId !== pendingRuntimeTargetAppId) return;
     if ((app == null ? void 0 : app.status) === "editing") {
@@ -7987,13 +8956,13 @@ function ComergeStudioInner({
     canRequestLatest: (runtimeApp == null ? void 0 : runtimeApp.status) === "ready",
     embeddedBaseBundles
   });
-  const sawEditingOnActiveAppRef = React47.useRef(false);
-  const [showPostEditPreparing, setShowPostEditPreparing] = React47.useState(false);
-  React47.useEffect(() => {
+  const sawEditingOnActiveAppRef = React49.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React49.useState(false);
+  React49.useEffect(() => {
     sawEditingOnActiveAppRef.current = false;
     setShowPostEditPreparing(false);
   }, [activeAppId]);
-  React47.useEffect(() => {
+  React49.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     if (app.status === "editing") {
       sawEditingOnActiveAppRef.current = true;
@@ -8005,7 +8974,7 @@ function ComergeStudioInner({
       sawEditingOnActiveAppRef.current = false;
     }
   }, [app == null ? void 0 : app.id, app == null ? void 0 : app.status]);
-  React47.useEffect(() => {
+  React49.useEffect(() => {
     if (!showPostEditPreparing) return;
     const stillProcessingBaseBundle = bundle.loading && bundle.loadingMode === "base" && !bundle.isTesting;
     if (!stillProcessingBaseBundle) {
@@ -8015,20 +8984,21 @@ function ComergeStudioInner({
   const threadId = (app == null ? void 0 : app.threadId) ?? "";
   const thread = useThreadMessages(threadId);
   const editQueue = useEditQueue(activeAppId);
+  const agentProgress = useAgentRunProgress(threadId, { enabled: enableAgentProgress });
   const editQueueActions = useEditQueueActions(activeAppId);
-  const [lastEditQueueInfo, setLastEditQueueInfo] = React47.useState(null);
-  const lastEditQueueInfoRef = React47.useRef(null);
-  const [suppressQueueUntilResponse, setSuppressQueueUntilResponse] = React47.useState(false);
+  const [lastEditQueueInfo, setLastEditQueueInfo] = React49.useState(null);
+  const lastEditQueueInfoRef = React49.useRef(null);
+  const [suppressQueueUntilResponse, setSuppressQueueUntilResponse] = React49.useState(false);
   const mergeRequests = useMergeRequests({ appId: activeAppId });
-  const hasOpenOutgoingMr = React47.useMemo(() => {
+  const hasOpenOutgoingMr = React49.useMemo(() => {
     return mergeRequests.lists.outgoing.some((mr) => mr.status === "open");
   }, [mergeRequests.lists.outgoing]);
-  const incomingReviewMrs = React47.useMemo(() => {
+  const incomingReviewMrs = React49.useMemo(() => {
     if (!userId) return mergeRequests.lists.incoming;
     return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
   }, [mergeRequests.lists.incoming, userId]);
   const uploader = useAttachmentUpload();
-  const updateLastEditQueueInfo = React47.useCallback(
+  const updateLastEditQueueInfo = React49.useCallback(
     (info) => {
       lastEditQueueInfoRef.current = info;
       setLastEditQueueInfo(info);
@@ -8062,32 +9032,35 @@ function ComergeStudioInner({
       }
     },
     onEditFinished: () => {
-      var _a;
-      if (((_a = lastEditQueueInfoRef.current) == null ? void 0 : _a.queuePosition) !== 1) {
+      var _a2;
+      if (((_a2 = lastEditQueueInfoRef.current) == null ? void 0 : _a2.queuePosition) !== 1) {
         setSuppressQueueUntilResponse(false);
       }
     }
   });
   const chatSendDisabled = false;
-  const [processingMrId, setProcessingMrId] = React47.useState(null);
-  const [testingMrId, setTestingMrId] = React47.useState(null);
-  const [syncingUpstream, setSyncingUpstream] = React47.useState(false);
-  const [upstreamSyncStatus, setUpstreamSyncStatus] = React47.useState(null);
+  const [processingMrId, setProcessingMrId] = React49.useState(null);
+  const [testingMrId, setTestingMrId] = React49.useState(null);
+  const [syncingUpstream, setSyncingUpstream] = React49.useState(false);
+  const [upstreamSyncStatus, setUpstreamSyncStatus] = React49.useState(null);
   const isMrTestBuildInProgress = bundle.loading && bundle.loadingMode === "test";
   const isBaseBundleDownloading = bundle.loading && bundle.loadingMode === "base" && !bundle.isTesting;
-  const chatShowTypingIndicator = React47.useMemo(() => {
-    var _a;
+  const runtimePreparingText = bundle.bundleStatus === "pending" ? "Bundling app\u2026 this may take a few minutes" : "Preparing app\u2026";
+  const chatShowTypingIndicator = React49.useMemo(() => {
+    var _a2;
+    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 ((_a = last.payload) == null ? void 0 : _a.type) === "string" ? String(last.payload.type) : void 0;
+    const payloadType = typeof ((_a2 = last.payload) == null ? void 0 : _a2.type) === "string" ? String(last.payload.type) : void 0;
     return payloadType !== "outcome";
-  }, [thread.raw]);
-  React47.useEffect(() => {
+  }, [agentProgress.hasLiveProgress, thread.raw]);
+  const showChatProgress = agentProgress.hasLiveProgress || Boolean((_a = agentProgress.view.bundle) == null ? void 0 : _a.active);
+  React49.useEffect(() => {
     updateLastEditQueueInfo(null);
     setSuppressQueueUntilResponse(false);
     setUpstreamSyncStatus(null);
   }, [activeAppId, updateLastEditQueueInfo]);
-  const handleSyncUpstream = React47.useCallback(async () => {
+  const handleSyncUpstream = React49.useCallback(async () => {
     if (!(app == null ? void 0 : app.id)) {
       throw new Error("Missing app");
     }
@@ -8100,7 +9073,7 @@ function ComergeStudioInner({
       setSyncingUpstream(false);
     }
   }, [activeAppId, app == null ? void 0 : app.id]);
-  React47.useEffect(() => {
+  React49.useEffect(() => {
     if (!(lastEditQueueInfo == null ? void 0 : lastEditQueueInfo.queueItemId)) return;
     const stillPresent = editQueue.items.some((item) => item.id === lastEditQueueInfo.queueItemId);
     if (!stillPresent) {
@@ -8108,31 +9081,32 @@ function ComergeStudioInner({
       setSuppressQueueUntilResponse(false);
     }
   }, [editQueue.items, lastEditQueueInfo == null ? void 0 : lastEditQueueInfo.queueItemId]);
-  const chatQueueItems = React47.useMemo(() => {
-    var _a;
+  const chatQueueItems = React49.useMemo(() => {
+    var _a2;
     if (suppressQueueUntilResponse && editQueue.items.length <= 1) {
       return [];
     }
     if (!lastEditQueueInfo || lastEditQueueInfo.queuePosition !== 1 || !lastEditQueueInfo.queueItemId) {
       return editQueue.items;
     }
-    if (editQueue.items.length === 1 && ((_a = editQueue.items[0]) == null ? void 0 : _a.id) === lastEditQueueInfo.queueItemId) {
+    if (editQueue.items.length === 1 && ((_a2 = editQueue.items[0]) == null ? void 0 : _a2.id) === lastEditQueueInfo.queueItemId) {
       return [];
     }
     return editQueue.items;
   }, [editQueue.items, lastEditQueueInfo, suppressQueueUntilResponse]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native57.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native57.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native60.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       RuntimeRenderer,
       {
         appKey,
         bundlePath: bundle.bundlePath,
+        preparingText: runtimePreparingText,
         forcePreparing: showPostEditPreparing,
         renderToken: bundle.renderToken,
         allowInitialPreparing: !embeddedBaseBundles
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       StudioOverlay,
       {
         captureTargetRef,
@@ -8191,6 +9165,7 @@ function ComergeStudioInner({
         onSendChat: (text, attachments) => actions.sendEdit({ prompt: text, attachments }),
         chatQueueItems,
         onRemoveQueueItem: (id) => editQueueActions.cancel(id),
+        chatProgress: showChatProgress ? agentProgress.view : null,
         onNavigateHome,
         showBubble,
         studioControlOptions