@comergehq/studio 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "axios": "^1.13.1",
+    "@comergehq/studio-control": "^0.1.5",
     "react-native-markdown-display": "^7.0.2",
     "react-native-logs": "^5.5.0"
   },
@@ -56,6 +57,7 @@
     "@gorhom/bottom-sheet": "*",
     "@comergehq/runtime": "^0.1.1",
     "expo": "*",
+    "expo-asset": "*",
     "expo-file-system": "*",
     "expo-haptics": "*",
     "expo-linear-gradient": "*",

package/src/components/{floating-draggable-button/FloatingDraggableButton.tsx → bubble/Bubble.tsx}

@@ -23,7 +23,7 @@ import Animated, {
 import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 
 import { DEFAULT_EDGE_PADDING, DEFAULT_OFFSET, DEFAULT_SIZE, ENTER_ROTATION_FROM_DEG, ENTER_SCALE_FROM, PULSE_DURATION_MS } from './constants';
-import type { FloatingDraggableButtonProps } from './types';
+import type { BubbleProps } from './types';
 import { useTheme } from '../../theme';
 import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
@@ -53,7 +53,7 @@ function getFinalTranslateY(height: number, size: number, bottomOffset: number)
   return height - size - bottomOffset;
 }
 
-export function FloatingDraggableButton({
+export function Bubble({
   onPress,
   size = DEFAULT_SIZE,
   disabled = false,
@@ -69,7 +69,7 @@ export function FloatingDraggableButton({
   testID,
   edgePadding = DEFAULT_EDGE_PADDING,
   backgroundColor,
-}: FloatingDraggableButtonProps) {
+}: BubbleProps) {
   const theme = useTheme();
   const { width, height } = useWindowDimensions();
   const isDanger = variant === 'danger';

package/src/components/{floating-draggable-button → bubble}/constants.ts

@@ -1,9 +1,9 @@
-import type { FloatingButtonOffset } from './types';
+import type { BubbleOffset } from './types';
 
 export const DEFAULT_SIZE = 48;
 export const DEFAULT_EDGE_PADDING = 10;
 
-export const DEFAULT_OFFSET: Required<FloatingButtonOffset> = {
+export const DEFAULT_OFFSET: Required<BubbleOffset> = {
   left: 20,
   bottom: 60,
 };

package/src/components/bubble/index.ts

@@ -0,0 +1,4 @@
+export { Bubble } from './Bubble';
+export type { BubbleProps, BubbleOffset } from './types';
+
+

package/src/components/{floating-draggable-button → bubble}/types.ts

@@ -1,14 +1,14 @@
 import type * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-export type FloatingButtonOffset = {
+export type BubbleOffset = {
   /** Distance from the left edge (in px). */
   left?: number;
   /** Distance from the bottom edge (in px). */
   bottom?: number;
 };
 
-export type FloatingDraggableButtonProps = {
+export type BubbleProps = {
   /**
    * Whether the button should be shown. When toggled, the button animates in/out.
    * The component stays mounted to preserve its last drag position.
@@ -30,7 +30,7 @@ export type FloatingDraggableButtonProps = {
    * Initial placement when it animates in.
    * `left` is measured from the left edge; `bottom` from the bottom edge.
    */
-  offset?: FloatingButtonOffset;
+  offset?: BubbleOffset;
 
   /** Accessible label for screen readers (kept as `ariaLabel` for compatibility). */
   ariaLabel?: string;

package/src/components/index.ts

@@ -1,5 +1,5 @@
-export { FloatingDraggableButton } from './floating-draggable-button';
-export type { FloatingDraggableButtonProps, FloatingButtonOffset } from './floating-draggable-button';
+export { Bubble } from './bubble';
+export type { BubbleProps, BubbleOffset } from './bubble';
 
 export * from './icons/StudioIcons';
 

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

@@ -1,3 +1,3 @@
-export const BASE_URL = "https://comerge.ai";
+export const BASE_URL = "https://api.comerge.ai";
 
 

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

@@ -3,7 +3,7 @@ import axios from "axios";
 import { BASE_URL } from "./baseUrl";
 
 const CLIENT_KEY_HEADER = "x-comerge-api-key";
-let clientApiKey: string | null = null;
+let clientKey: string | null = null;
 
 export const publicApi = axios.create({
 	baseURL: BASE_URL,
@@ -14,19 +14,19 @@ export const publicApi = axios.create({
 	},
 });
 
-export function setClientApiKey(apiKey: string) {
-	const trimmed = apiKey?.trim?.() ?? "";
+export function setClientKey(clientKeyInput: string) {
+	const trimmed = clientKeyInput?.trim?.() ?? "";
 	if (!trimmed) {
-		throw new Error("comerge-studio: apiKey is required");
+		throw new Error("comerge-studio: clientKey is required");
 	}
-	clientApiKey = trimmed;
+	clientKey = trimmed;
 	publicApi.defaults.headers.common[CLIENT_KEY_HEADER] = trimmed;
 }
 
 publicApi.interceptors.request.use((config) => {
-	if (!clientApiKey) return config;
+	if (!clientKey) return config;
 	config.headers = config.headers ?? {};
-	(config.headers as any)[CLIENT_KEY_HEADER] = clientApiKey;
+	(config.headers as any)[CLIENT_KEY_HEADER] = clientKey;
 	return config;
 });
 

package/src/studio/ComergeStudio.tsx

@@ -7,6 +7,7 @@ import { StudioBootstrap } from './bootstrap/StudioBootstrap';
 import { useApp } from './hooks/useApp';
 import { useThreadMessages } from './hooks/useThreadMessages';
 import { useBundleManager } from './hooks/useBundleManager';
+import type { EmbeddedBaseBundles } from './hooks/useBundleManager';
 import { useMergeRequests } from './hooks/useMergeRequests';
 import { useAttachmentUpload } from './hooks/useAttachmentUpload';
 import { useStudioActions } from './hooks/useStudioActions';
@@ -17,18 +18,24 @@ import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
 
 export type ComergeStudioProps = {
   appId: string;
-  apiKey: string;
+  clientKey: string;
   appKey?: string;
   onNavigateHome?: () => void;
   style?: ViewStyle;
+  showBubble?: boolean;
+  studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
+  embeddedBaseBundles?: EmbeddedBaseBundles;
 };
 
 export function ComergeStudio({
   appId,
-  apiKey,
+  clientKey,
   appKey = 'MicroMain',
   onNavigateHome,
   style,
+  showBubble = true,
+  studioControlOptions,
+  embeddedBaseBundles,
 }: ComergeStudioProps) {
   const [activeAppId, setActiveAppId] = React.useState(appId);
   const [runtimeAppId, setRuntimeAppId] = React.useState(appId);
@@ -44,7 +51,7 @@ export function ComergeStudio({
   const captureTargetRef = React.useRef<View | null>(null);
 
   return (
-    <StudioBootstrap apiKey={apiKey}>
+    <StudioBootstrap clientKey={clientKey} fallback={<View style={{ flex: 1 }} />}>
       {({ userId }) => (
         <BottomSheetModalProvider>
           <LiquidGlassResetProvider resetTriggers={[appId, activeAppId, runtimeAppId]}>
@@ -61,6 +68,9 @@ export function ComergeStudio({
               onNavigateHome={onNavigateHome}
               captureTargetRef={captureTargetRef}
               style={style}
+              showBubble={showBubble}
+              studioControlOptions={studioControlOptions}
+              embeddedBaseBundles={embeddedBaseBundles}
             />
           </LiquidGlassResetProvider>
         </BottomSheetModalProvider>
@@ -82,6 +92,9 @@ type InnerProps = {
   onNavigateHome?: () => void;
   captureTargetRef: React.RefObject<View | null>;
   style?: ViewStyle;
+  showBubble: boolean;
+  studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
+  embeddedBaseBundles?: EmbeddedBaseBundles;
 };
 
 function ComergeStudioInner({
@@ -97,6 +110,9 @@ function ComergeStudioInner({
   onNavigateHome,
   captureTargetRef,
   style,
+  showBubble,
+  studioControlOptions,
+  embeddedBaseBundles,
 }: InnerProps) {
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
@@ -126,6 +142,7 @@ function ComergeStudioInner({
     base: { appId: runtimeAppId, commitId: runtimeApp?.headCommitId ?? undefined },
     platform,
     canRequestLatest: runtimeApp?.status === 'ready',
+    embeddedBaseBundles,
   });
 
   const sawEditingOnActiveAppRef = React.useRef(false);
@@ -209,6 +226,7 @@ function ComergeStudioInner({
           bundlePath={bundle.bundlePath}
           forcePreparing={showPostEditPreparing}
           renderToken={bundle.renderToken}
+          allowInitialPreparing={!embeddedBaseBundles}
         />
 
         <StudioOverlay
@@ -266,6 +284,8 @@ function ComergeStudioInner({
           chatShowTypingIndicator={chatShowTypingIndicator}
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
           onNavigateHome={onNavigateHome}
+          showBubble={showBubble}
+          studioControlOptions={studioControlOptions}
         />
       </View>
     </View>

package/src/studio/bootstrap/StudioBootstrap.tsx

@@ -16,8 +16,8 @@ export type StudioBootstrapProps = UseStudioBootstrapOptions & {
   renderError?: (error: Error) => React.ReactNode;
 };
 
-export function StudioBootstrap({ children, fallback, renderError, apiKey }: StudioBootstrapProps) {
-  const { ready, error, userId } = useStudioBootstrap({ apiKey });
+export function StudioBootstrap({ children, fallback, renderError, clientKey }: StudioBootstrapProps) {
+  const { ready, error, userId } = useStudioBootstrap({ clientKey });
 
   if (error) {
     return (

package/src/studio/bootstrap/useStudioBootstrap.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
-import { setClientApiKey } from '../../core/services/http/public';
+import { setClientKey } from '../../core/services/http/public';
 import { ensureAuthenticatedSession, ensureAnonymousSession } from '../../core/services/supabase/auth';
 import { isSupabaseClientInjected, setSupabaseConfig } from '../../core/services/supabase/client';
-import { studioConfigRepository } from '../../data/public/studio-config/repository';
+const SUPABASE_URL = 'https://xtfxwbckjpfmqubnsusu.supabase.co';
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh0Znh3YmNranBmbXF1Ym5zdXN1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjA2MDEyMzAsImV4cCI6MjA3NjE3NzIzMH0.dzWGAWrK4CvrmHVHzf8w7JlUZohdap0ZPnLZnABMV8s';
 
 export type UseStudioBootstrapOptions = {
-  apiKey: string;
+  clientKey: string;
 };
 
 export type StudioBootstrapState = {
@@ -27,11 +28,10 @@ export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBo
 
     (async () => {
       try {
-        setClientApiKey(options.apiKey);
+        setClientKey(options.clientKey);
         const requireAuth = isSupabaseClientInjected();
         if (!requireAuth) {
-          const cfg = await studioConfigRepository.get();
-          setSupabaseConfig(cfg);
+          setSupabaseConfig({ url: SUPABASE_URL, anonKey: SUPABASE_ANON_KEY });
         }
         const { user } = requireAuth ? await ensureAuthenticatedSession() : await ensureAnonymousSession();
 
@@ -47,7 +47,7 @@ export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBo
     return () => {
       cancelled = true;
     };
-  }, [options.apiKey]);
+  }, [options.clientKey]);
 
   return state;
 }

package/src/studio/hooks/useBundleManager.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as FileSystem from 'expo-file-system/legacy';
+import { Asset } from 'expo-asset';
 
 import type { Platform as BundlePlatform, Bundle } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
@@ -60,6 +61,7 @@ export type UseBundleManagerParams = {
    * Test bundles (merge request previews) are NOT gated by this.
    */
   canRequestLatest?: boolean;
+  embeddedBaseBundles?: EmbeddedBaseBundles;
 };
 
 export type BundleLoadState = {
@@ -85,6 +87,16 @@ export type UseBundleManagerResult = BundleLoadState & {
   restoreBase: () => Promise<void>;
 };
 
+export type EmbeddedBaseBundle = {
+  module: number;
+  meta?: BaseBundleMeta | null;
+};
+
+export type EmbeddedBaseBundles = {
+  ios?: EmbeddedBaseBundle;
+  android?: EmbeddedBaseBundle;
+};
+
 function safeName(s: string) {
   return s.replace(/[^a-zA-Z0-9._-]/g, '_');
 }
@@ -183,6 +195,31 @@ async function deleteFileIfExists(fileUri: string) {
   }
 }
 
+async function hydrateBaseFromEmbeddedAsset(
+  appId: string,
+  platform: BundlePlatform,
+  embedded: EmbeddedBaseBundle | undefined
+): Promise<{ bundlePath: string; meta?: BaseBundleMeta | null } | null> {
+  if (!embedded?.module) return null;
+  const key = baseBundleKey(appId, platform);
+  const targetUri = toBundleFileUri(key);
+  const existing = await getExistingNonEmptyFileUri(targetUri);
+  if (existing) return { bundlePath: existing, meta: embedded.meta ?? null };
+
+  const asset = Asset.fromModule(embedded.module);
+  await asset.downloadAsync();
+  const sourceUri = asset.localUri ?? asset.uri;
+  if (!sourceUri) return null;
+  const info = await FileSystem.getInfoAsync(sourceUri);
+  if (!info.exists) return null;
+
+  await deleteFileIfExists(targetUri);
+  await FileSystem.copyAsync({ from: sourceUri, to: targetUri });
+  const finalUri = await getExistingNonEmptyFileUri(targetUri);
+  if (!finalUri) return null;
+  return { bundlePath: finalUri, meta: embedded.meta ?? null };
+}
+
 async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: string): Promise<string> {
   const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
   try {
@@ -275,6 +312,7 @@ export function useBundleManager({
   base,
   platform,
   canRequestLatest = true,
+  embeddedBaseBundles,
 }: UseBundleManagerParams): UseBundleManagerResult {
   const [bundlePath, setBundlePath] = React.useState<string | null>(null);
   const [renderToken, setRenderToken] = React.useState(0);
@@ -287,6 +325,9 @@ export function useBundleManager({
   const baseRef = React.useRef(base);
   baseRef.current = base;
 
+  const embeddedBaseBundlesRef = React.useRef<EmbeddedBaseBundles | undefined>(embeddedBaseBundles);
+  embeddedBaseBundlesRef.current = embeddedBaseBundles;
+
   // Monotonic operation ids to prevent stale async loads from overwriting newer ones.
   const baseOpIdRef = React.useRef(0);
   const testOpIdRef = React.useRef(0);
@@ -320,11 +361,23 @@ export function useBundleManager({
         await ensureDir(dir);
         const key = baseBundleKey(appId, platform);
         const uri = toBundleFileUri(key);
-        const existing = await getExistingNonEmptyFileUri(uri);
+        let existing = await getExistingNonEmptyFileUri(uri);
+        let embeddedMeta: BaseBundleMeta | null = null;
+        if (!existing) {
+          const embedded = embeddedBaseBundlesRef.current?.[platform];
+          const hydrated = await hydrateBaseFromEmbeddedAsset(appId, platform, embedded);
+          if (hydrated?.bundlePath) {
+            existing = hydrated.bundlePath;
+            embeddedMeta = hydrated.meta ?? null;
+            if (embeddedMeta) {
+              await writeJsonFile(toBundleMetaFileUri(key), embeddedMeta);
+            }
+          }
+        }
         if (existing) {
           lastBaseBundlePathRef.current = existing;
           setBundlePath(existing);
-          const meta = await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key));
+          const meta = embeddedMeta ?? (await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key)));
           if (meta?.fingerprint) {
             lastBaseFingerprintRef.current = meta.fingerprint;
           }

package/src/studio/ui/RuntimeRenderer.tsx

@@ -13,6 +13,10 @@ export type RuntimeRendererProps = {
    * Used to avoid briefly rendering an outdated bundle during post-edit base refresh.
    */
   forcePreparing?: boolean;
+  /**
+   * When false, suppress "Preparing app…" on the very first load.
+   */
+  allowInitialPreparing?: boolean;
   /**
    * Used to force a runtime remount even when bundlePath stays constant
    * (e.g. base bundle replaced in-place).
@@ -21,8 +25,27 @@ export type RuntimeRendererProps = {
   style?: ViewStyle;
 };
 
-export function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }: RuntimeRendererProps) {
+export function RuntimeRenderer({
+  appKey,
+  bundlePath,
+  forcePreparing,
+  renderToken,
+  style,
+  allowInitialPreparing = true,
+}: RuntimeRendererProps) {
+  const [hasRenderedOnce, setHasRenderedOnce] = React.useState(false);
+
+  React.useEffect(() => {
+    if (bundlePath) {
+      setHasRenderedOnce(true);
+    }
+  }, [bundlePath]);
+
   if (!bundlePath || forcePreparing) {
+    if (!hasRenderedOnce && !forcePreparing && !allowInitialPreparing) {
+      return <View style={[{ flex: 1 }, style]} />;
+    }
+
     return (
       <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }, style]}>
         <Text variant="bodyMuted">Preparing app…</Text>

package/src/studio/ui/StudioOverlay.tsx

@@ -5,7 +5,7 @@ import type { App } from '../../data/apps/types';
 import type { MergeRequest } from '../../data/merge-requests/types';
 import { StudioBottomSheet } from '../../components/studio-sheet/StudioBottomSheet';
 import { StudioSheetPager } from '../../components/studio-sheet/StudioSheetPager';
-import { FloatingDraggableButton } from '../../components/floating-draggable-button/FloatingDraggableButton';
+import { Bubble } from '../../components/bubble/Bubble';
 import { EdgeGlowFrame } from '../../components/overlays/EdgeGlowFrame';
 import { DrawModeOverlay } from '../../components/draw/DrawModeOverlay';
 import { AppCommentsSheet } from '../../components/comments/AppCommentsSheet';
@@ -15,6 +15,11 @@ import { ConfirmMergeFlow } from './ConfirmMergeFlow';
 import type { MergeRequestSummary } from '../../components/models/types';
 import { useTheme } from '../../theme';
 import { useOptimisticChatMessages } from '../hooks/useOptimisticChatMessages';
+import {
+  publishComergeStudioUIState,
+  startStudioControlPolling,
+  type StudioControlOptions,
+} from '@comergehq/studio-control';
 
 import { MergeIcon } from '../../components/icons/MergeIcon';
 
@@ -56,6 +61,8 @@ export type StudioOverlayProps = {
 
   // Navigation callbacks
   onNavigateHome?: () => void;
+  showBubble: boolean;
+  studioControlOptions?: StudioControlOptions;
 };
 
 type SheetPage = 'preview' | 'chat';
@@ -87,11 +94,14 @@ export function StudioOverlay({
   chatShowTypingIndicator,
   onSendChat,
   onNavigateHome,
+  showBubble,
+  studioControlOptions,
 }: StudioOverlayProps) {
   const theme = useTheme();
   const { width } = useWindowDimensions();
 
   const [sheetOpen, setSheetOpen] = React.useState(false);
+  const sheetOpenRef = React.useRef(sheetOpen);
   const [activePage, setActivePage] = React.useState<SheetPage>('preview');
 
   const [drawing, setDrawing] = React.useState(false);
@@ -186,6 +196,23 @@ export function StudioOverlay({
     [closeSheet, onTestMr]
   );
 
+  React.useEffect(() => {
+    sheetOpenRef.current = sheetOpen;
+  }, [sheetOpen]);
+
+  React.useEffect(() => {
+    const poller = startStudioControlPolling((action) => {
+      if (action === 'show' && !sheetOpenRef.current) openSheet();
+      if (action === 'hide' && sheetOpenRef.current) closeSheet();
+      if (action === 'toggle') toggleSheet();
+    }, studioControlOptions);
+    return () => poller.stop();
+  }, [closeSheet, openSheet, studioControlOptions, toggleSheet]);
+
+  React.useEffect(() => {
+    void publishComergeStudioUIState(sheetOpen, studioControlOptions);
+  }, [sheetOpen, studioControlOptions]);
+
   return (
     <>
       {/* Testing glow around runtime */}
@@ -243,17 +270,19 @@ export function StudioOverlay({
         />
       </StudioBottomSheet>
 
-      <FloatingDraggableButton
-        visible={!sheetOpen && !drawing}
-        ariaLabel={sheetOpen ? 'Hide studio' : 'Show studio'}
-        badgeCount={incomingMergeRequests.length}
-        onPress={toggleSheet}
-        isLoading={app?.status === 'editing'}
-      >
-        <View style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
-          <MergeIcon width={24} height={24} color={theme.colors.floatingContent} />
-        </View>
-      </FloatingDraggableButton>
+      {showBubble && (
+        <Bubble
+          visible={!sheetOpen && !drawing}
+          ariaLabel={sheetOpen ? 'Hide studio' : 'Show studio'}
+          badgeCount={incomingMergeRequests.length}
+          onPress={toggleSheet}
+          isLoading={app?.status === 'editing'}
+        >
+          <View style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
+            <MergeIcon width={24} height={24} color={theme.colors.floatingContent} />
+          </View>
+        </Bubble>
+      )}
 
       <DrawModeOverlay
         visible={drawing}

package/src/components/floating-draggable-button/index.ts

@@ -1,4 +0,0 @@
-export { FloatingDraggableButton } from './FloatingDraggableButton';
-export type { FloatingDraggableButtonProps, FloatingButtonOffset } from './types';
-
-