@comergehq/studio 0.1.33 → 0.1.35

package/dist/index.d.mts

@@ -26,6 +26,7 @@ type BaseBundleMeta = {
     updatedAt: string;
 };
 
+type ActiveAppChangedSource = 'initial' | 'fork_edit' | 'related_apps' | 'host_route_sync';
 type ComergeStudioProps = {
     appId: string;
     clientKey: string;
@@ -38,6 +39,11 @@ type ComergeStudioProps = {
         threadId?: string;
         source?: string;
     }) => void;
+    onActiveAppChanged?: (params: {
+        appId: string;
+        appKey?: string;
+        source: ActiveAppChangedSource;
+    }) => void;
     style?: ViewStyle;
     showBubble?: boolean;
     enableAgentProgress?: boolean;
@@ -45,7 +51,7 @@ type ComergeStudioProps = {
     embeddedBaseBundles?: EmbeddedBaseBundles;
     onSystemEvent?: (event: ComergeRuntimeSystemEventEnvelope) => void;
 };
-declare function ComergeStudio({ appId, clientKey, appKey, analyticsEnabled, onNavigateHome, onOpenAppRequested, style, showBubble, enableAgentProgress, studioControlOptions, embeddedBaseBundles, onSystemEvent, }: ComergeStudioProps): react_jsx_runtime.JSX.Element;
+declare function ComergeStudio({ appId, clientKey, appKey, analyticsEnabled, onNavigateHome, onOpenAppRequested, onActiveAppChanged, style, showBubble, enableAgentProgress, studioControlOptions, embeddedBaseBundles, onSystemEvent, }: ComergeStudioProps): react_jsx_runtime.JSX.Element;
 
 declare function setSupabaseClient(client: SupabaseClient): void;
 

package/dist/index.d.ts

@@ -26,6 +26,7 @@ type BaseBundleMeta = {
     updatedAt: string;
 };
 
+type ActiveAppChangedSource = 'initial' | 'fork_edit' | 'related_apps' | 'host_route_sync';
 type ComergeStudioProps = {
     appId: string;
     clientKey: string;
@@ -38,6 +39,11 @@ type ComergeStudioProps = {
         threadId?: string;
         source?: string;
     }) => void;
+    onActiveAppChanged?: (params: {
+        appId: string;
+        appKey?: string;
+        source: ActiveAppChangedSource;
+    }) => void;
     style?: ViewStyle;
     showBubble?: boolean;
     enableAgentProgress?: boolean;
@@ -45,7 +51,7 @@ type ComergeStudioProps = {
     embeddedBaseBundles?: EmbeddedBaseBundles;
     onSystemEvent?: (event: ComergeRuntimeSystemEventEnvelope) => void;
 };
-declare function ComergeStudio({ appId, clientKey, appKey, analyticsEnabled, onNavigateHome, onOpenAppRequested, style, showBubble, enableAgentProgress, studioControlOptions, embeddedBaseBundles, onSystemEvent, }: ComergeStudioProps): react_jsx_runtime.JSX.Element;
+declare function ComergeStudio({ appId, clientKey, appKey, analyticsEnabled, onNavigateHome, onOpenAppRequested, onActiveAppChanged, style, showBubble, enableAgentProgress, studioControlOptions, embeddedBaseBundles, onSystemEvent, }: ComergeStudioProps): react_jsx_runtime.JSX.Element;
 
 declare function setSupabaseClient(client: SupabaseClient): void;
 

package/dist/index.js

@@ -8361,7 +8361,26 @@ ${trimmedLine2}\u2026 `;
 
 // src/components/chat/AgentProgressCard.tsx
 var import_react_native56 = require("react-native");
+
+// src/components/icons/RemixXLoopLottie.tsx
+var import_lottie_react_native = __toESM(require("lottie-react-native"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
+var remixXLoopSource = require_remix_x_loop_lottie();
+var Lottie = import_lottie_react_native.default;
+function RemixXLoopLottie({ size = 24, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    Lottie,
+    {
+      source: remixXLoopSource,
+      autoPlay: true,
+      loop: true,
+      style: [{ width: size, height: size }, style]
+    }
+  );
+}
+
+// src/components/chat/AgentProgressCard.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function titleForPhase(phase) {
   if (phase === "planning") return "Planning";
   if (phase === "reasoning") return "Reasoning";
@@ -8383,9 +8402,10 @@ function AgentProgressCard({ progress }) {
   const theme = useTheme();
   const statusLabel = titleForStatus(progress.status);
   const phaseLabel = titleForPhase(progress.phase);
+  const showAnimatedStatusIcon = progress.status === "running";
   const subtitle = progress.latestMessage || `Agent is ${phaseLabel.toLowerCase()}...`;
   const todo = progress.todoSummary;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     import_react_native56.View,
     {
       style: {
@@ -8397,20 +8417,23 @@ function AgentProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "captionMuted", children: phaseLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "captionMuted", children: phaseLabel }),
+            showAnimatedStatusIcon ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RemixXLoopLottie, { size: 20, style: { marginLeft: 8 } }) : null
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
-        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
+        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Updated files: ",
           progress.changedFilesCount
         ] }) : null,
-        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
+        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native56.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
           "\u2022 ",
           path
         ] }, path)) }) : null,
-        todo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        todo ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Todos: ",
           todo.completed,
           "/",
@@ -8425,7 +8448,7 @@ function AgentProgressCard({ progress }) {
 
 // src/components/chat/BundleProgressCard.tsx
 var import_react_native57 = require("react-native");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function titleForStatus2(status) {
   if (status === "succeeded") return "Completed";
   if (status === "failed") return "Failed";
@@ -8437,7 +8460,7 @@ function BundleProgressCard({ progress }) {
   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_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     import_react_native57.View,
     {
       accessible: true,
@@ -8453,14 +8476,14 @@ function BundleProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { variant: "captionMuted", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Text, { variant: "captionMuted", children: [
             percent,
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           import_react_native57.View,
           {
             style: {
@@ -8470,7 +8493,7 @@ function BundleProgressCard({ progress }) {
               backgroundColor: withAlpha(theme.colors.border, theme.scheme === "dark" ? 0.5 : 0.6),
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               import_react_native57.View,
               {
                 style: {
@@ -8482,14 +8505,14 @@ function BundleProgressCard({ progress }) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
       ]
     }
   );
 }
 
 // src/studio/ui/ChatPanel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ChatPanel({
   title = "Chat",
   messages,
@@ -8534,21 +8557,21 @@ function ChatPanel({
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
-  const header = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+      left: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
+      right: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -8557,22 +8580,22 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native58.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native58.View, { children: header }),
+      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native58.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native58.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native58.ActivityIndicator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native58.View, { style: { height: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
       ] })
     ] });
   }
   const bundleProgress = (progress == null ? void 0 : progress.bundle) ?? null;
-  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { gap: theme.spacing.sm }, children: [
-    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AgentProgressCard, { progress }) : null,
-    !progress && queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
+  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native58.View, { style: { gap: theme.spacing.sm }, children: [
+    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AgentProgressCard, { progress }) : null,
+    !progress && queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
   ] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     ChatPage,
     {
       header,
@@ -8585,13 +8608,13 @@ function ChatPanel({
       composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      overlay: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -8613,7 +8636,7 @@ function ChatPanel({
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
 var React44 = __toESM(require("react"));
 var import_react_native59 = require("react-native");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -8643,7 +8666,7 @@ function ConfirmMergeRequestDialog({
     justifyContent: "center",
     alignSelf: "stretch"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     Modal,
     {
       visible,
@@ -8654,7 +8677,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Text,
           {
             style: {
@@ -8666,8 +8689,8 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native59.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_native59.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             import_react_native59.View,
             {
               style: [
@@ -8677,7 +8700,7 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 import_react_native59.Pressable,
                 {
                   accessibilityRole: "button",
@@ -8685,13 +8708,13 @@ function ConfirmMergeRequestDialog({
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             import_react_native59.View,
             {
               style: [
@@ -8703,7 +8726,7 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 import_react_native59.Pressable,
                 {
                   accessibilityRole: "button",
@@ -8711,13 +8734,13 @@ function ConfirmMergeRequestDialog({
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             import_react_native59.View,
             {
               style: [
@@ -8728,14 +8751,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 import_react_native59.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -8747,7 +8770,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -8758,7 +8781,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -8913,24 +8936,24 @@ var import_studio_control = require("@comergehq/studio-control");
 
 // src/components/icons/RemixUpIcon.tsx
 var import_react_native_svg3 = __toESM(require("react-native-svg"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function RemixUpIcon({ width = 24, height = 24, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native_svg3.default, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react_native_svg3.default, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       import_react_native_svg3.Path,
       {
         d: "M34.706 7.62939e-05L34.7656 2.28882e-05L21.44 13.2661L0 34.8401L13.266 48.1061L34.706 26.5321L21.44 13.2661L34.706 7.62939e-05Z",
         fill: "#00CBC0"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       import_react_native_svg3.Path,
       {
         d: "M47.972 13.266L34.7656 2.28882e-05L34.706 7.62939e-05L47.972 13.266L34.706 26.5321L56.28 48.106L69.546 34.84L47.972 13.266Z",
         fill: "#FF1820"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       import_react_native_svg3.Path,
       {
         d: "M34.7656 2.28882e-05L21.44 13.2661L34.706 26.5321L47.972 13.266L34.7656 2.28882e-05Z",
@@ -8940,23 +8963,6 @@ function RemixUpIcon({ width = 24, height = 24, ...props }) {
   ] });
 }
 
-// src/components/icons/RemixXLoopLottie.tsx
-var import_lottie_react_native = __toESM(require("lottie-react-native"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var remixXLoopSource = require_remix_x_loop_lottie();
-var Lottie = import_lottie_react_native.default;
-function RemixXLoopLottie({ size = 24, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    Lottie,
-    {
-      source: remixXLoopSource,
-      autoPlay: true,
-      loop: true,
-      style: [{ width: size, height: size }, style]
-    }
-  );
-}
-
 // src/studio/ui/StudioOverlay.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function StudioOverlay({
@@ -9891,6 +9897,7 @@ function ComergeStudio({
   analyticsEnabled,
   onNavigateHome,
   onOpenAppRequested,
+  onActiveAppChanged,
   style,
   showBubble = true,
   enableAgentProgress = true,
@@ -9901,12 +9908,36 @@ function ComergeStudio({
   const [activeAppId, setActiveAppId] = React51.useState(appId);
   const [runtimeAppId, setRuntimeAppId] = React51.useState(appId);
   const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React51.useState(null);
+  const didSyncFromHostRef = React51.useRef(false);
+  const lastNotifiedRef = React51.useRef(null);
   const platform = React51.useMemo(() => import_react_native61.Platform.OS === "ios" ? "ios" : "android", []);
+  const notifyActiveAppChanged = React51.useCallback(
+    (nextAppId, source) => {
+      if (!onActiveAppChanged) return;
+      const trimmedAppId = nextAppId.trim();
+      if (!trimmedAppId) return;
+      const nextAppKey = (appKey == null ? void 0 : appKey.trim()) || "MicroMain";
+      const dedupeKey = `${trimmedAppId}:${nextAppKey}`;
+      if (lastNotifiedRef.current === dedupeKey) return;
+      lastNotifiedRef.current = dedupeKey;
+      onActiveAppChanged({ appId: trimmedAppId, appKey: nextAppKey, source });
+    },
+    [appKey, onActiveAppChanged]
+  );
+  const setActiveAppIdWithSource = React51.useCallback(
+    (nextAppId, source) => {
+      setActiveAppId(nextAppId);
+      notifyActiveAppChanged(nextAppId, source);
+    },
+    [notifyActiveAppChanged]
+  );
   React51.useEffect(() => {
-    setActiveAppId(appId);
+    const source = didSyncFromHostRef.current ? "host_route_sync" : "initial";
+    didSyncFromHostRef.current = true;
+    setActiveAppIdWithSource(appId, source);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
-  }, [appId]);
+  }, [appId, setActiveAppIdWithSource]);
   const captureTargetRef = React51.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     StudioBootstrap,
@@ -9919,7 +9950,7 @@ function ComergeStudio({
         {
           userId,
           activeAppId,
-          setActiveAppId,
+          setActiveAppId: setActiveAppIdWithSource,
           runtimeAppId,
           setRuntimeAppId,
           pendingRuntimeTargetAppId,
@@ -10039,7 +10070,7 @@ function ComergeStudioInner({
     userId,
     app,
     onForkedApp: (id, opts) => {
-      setActiveAppId(id);
+      setActiveAppId(id, "fork_edit");
       const keepRenderingAppId = opts == null ? void 0 : opts.keepRenderingAppId;
       if (keepRenderingAppId) {
         setRuntimeAppId(keepRenderingAppId);
@@ -10184,7 +10215,7 @@ function ComergeStudioInner({
             source: "related_apps_switcher"
           });
         } else {
-          setActiveAppId(targetAppId);
+          setActiveAppId(targetAppId, "related_apps");
           setRuntimeAppId(targetAppId);
           setPendingRuntimeTargetAppId(null);
         }