@comergehq/studio 0.1.27 → 0.1.30

package/src/studio/analytics/track.ts

@@ -0,0 +1,279 @@
+import { flushStudioAnalytics, trackStudioEvent } from './client';
+import {
+  STUDIO_ANALYTICS_EVENT_VERSION,
+  type InteractionSource,
+  type StudioAnalyticsEventPayload,
+} from './events';
+
+function baseProps() {
+  return { event_version: STUDIO_ANALYTICS_EVENT_VERSION } as const;
+}
+
+function normalizeError(error: unknown): { error_code?: string; error_domain?: string } {
+  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 as { code?: string | number; name?: string; message?: string };
+    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<TName extends keyof Omit<{
+  remix_app: true;
+  edit_app: true;
+  share_app: true;
+  open_merge_request: true;
+  approve_merge_request: true;
+  reject_merge_request: true;
+  test_bundle: true;
+  like_app: true;
+  unlike_app: true;
+  submit_comment: true;
+  related_app_switched: true;
+  related_app_switch_failed: true;
+}, never>>(
+  name: TName,
+  payload: StudioAnalyticsEventPayload<TName>
+) {
+  await trackStudioEvent(name, payload);
+  await flushStudioAnalytics();
+}
+
+let lastOpenCommentsKey: string | null = null;
+let lastOpenCommentsAt = 0;
+
+export async function trackRemixApp(params: {
+  appId: string;
+  sourceAppId: string;
+  threadId?: string;
+  success: boolean;
+  error?: unknown;
+}) {
+  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(),
+  });
+}
+
+export async function trackEditApp(params: {
+  appId: string;
+  threadId: string;
+  promptLength: number;
+  success: boolean;
+  error?: unknown;
+}) {
+  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(),
+  });
+}
+
+export async function trackShareApp(params: {
+  appId: string;
+  success: boolean;
+  error?: unknown;
+}) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent('share_app', {
+    app_id: params.appId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps(),
+  });
+}
+
+export async function trackOpenMergeRequest(params: {
+  appId: string;
+  mergeRequestId?: string;
+  success: boolean;
+  error?: unknown;
+}) {
+  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(),
+  });
+}
+
+export async function trackApproveMergeRequest(params: {
+  appId: string;
+  mergeRequestId: string;
+  success: boolean;
+  error?: unknown;
+}) {
+  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(),
+  });
+}
+
+export async function trackRejectMergeRequest(params: {
+  appId: string;
+  mergeRequestId: string;
+  success: boolean;
+  error?: unknown;
+}) {
+  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(),
+  });
+}
+
+export async function trackTestBundle(params: {
+  appId: string;
+  commitId?: string;
+  success: boolean;
+  error?: unknown;
+}) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent('test_bundle', {
+    app_id: params.appId,
+    commit_id: params.commitId,
+    success: params.success,
+    ...errorProps,
+    ...baseProps(),
+  });
+}
+
+export async function trackLikeApp(params: {
+  appId: string;
+  source?: InteractionSource;
+  success: boolean;
+  error?: unknown;
+}) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent('like_app', {
+    app_id: params.appId,
+    source: params.source ?? 'unknown',
+    success: params.success,
+    ...errorProps,
+    ...baseProps(),
+  });
+}
+
+export async function trackUnlikeApp(params: {
+  appId: string;
+  source?: InteractionSource;
+  success: boolean;
+  error?: unknown;
+}) {
+  const errorProps = params.success ? {} : normalizeError(params.error);
+  await trackMutationEvent('unlike_app', {
+    app_id: params.appId,
+    source: params.source ?? 'unknown',
+    success: params.success,
+    ...errorProps,
+    ...baseProps(),
+  });
+}
+
+export async function trackOpenComments(params: {
+  appId: string;
+  source?: InteractionSource;
+}) {
+  const key = `${params.appId}:${params.source ?? 'unknown'}`;
+  const now = Date.now();
+  if (lastOpenCommentsKey === key && now - lastOpenCommentsAt < 1000) return;
+  lastOpenCommentsKey = key;
+  lastOpenCommentsAt = now;
+
+  await trackStudioEvent('open_comments', {
+    app_id: params.appId,
+    source: params.source ?? 'unknown',
+    ...baseProps(),
+  });
+}
+
+export async function trackSubmitComment(params: {
+  appId: string;
+  commentLength: number;
+  success: boolean;
+  error?: unknown;
+}) {
+  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(),
+  });
+}
+
+export async function trackRelatedAppsOpened(params: {
+  appId: string;
+  relatedCount: number;
+}) {
+  await trackStudioEvent('related_apps_opened', {
+    app_id: params.appId,
+    related_count: params.relatedCount,
+    ...baseProps(),
+  });
+}
+
+export async function trackRelatedAppSwitched(params: {
+  fromAppId: string;
+  toAppId: string;
+  targetType: 'original' | 'remix';
+}) {
+  await trackMutationEvent('related_app_switched', {
+    from_app_id: params.fromAppId,
+    to_app_id: params.toAppId,
+    target_type: params.targetType,
+    ...baseProps(),
+  });
+}
+
+export async function trackRelatedAppSwitchFailed(params: {
+  fromAppId: string;
+  toAppId: string;
+  reason: string;
+  error?: unknown;
+}) {
+  const errorProps = normalizeError(params.error);
+  await trackMutationEvent('related_app_switch_failed', {
+    from_app_id: params.fromAppId,
+    to_app_id: params.toAppId,
+    reason: params.reason,
+    ...errorProps,
+    ...baseProps(),
+  });
+}

package/src/studio/bootstrap/StudioBootstrap.tsx

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

package/src/studio/bootstrap/useStudioBootstrap.ts

@@ -3,11 +3,13 @@ import * as React from 'react';
 import { setClientKey } from '../../core/services/http/public';
 import { ensureAuthenticatedSession, ensureAnonymousSession } from '../../core/services/supabase/auth';
 import { isSupabaseClientInjected, setSupabaseConfig } from '../../core/services/supabase/client';
+import { identifyStudioUser, initStudioAnalytics, resetStudioAnalytics } from '../analytics/client';
 const SUPABASE_URL = 'https://xtfxwbckjpfmqubnsusu.supabase.co';
 const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh0Znh3YmNranBmbXF1Ym5zdXN1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjA2MDEyMzAsImV4cCI6MjA3NjE3NzIzMH0.dzWGAWrK4CvrmHVHzf8w7JlUZohdap0ZPnLZnABMV8s';
 
 export type UseStudioBootstrapOptions = {
   clientKey: string;
+  analyticsEnabled?: boolean;
 };
 
 export type StudioBootstrapState = {
@@ -29,11 +31,25 @@ export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBo
     (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 });
@@ -47,7 +63,7 @@ export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBo
     return () => {
       cancelled = true;
     };
-  }, [options.clientKey]);
+  }, [options.analyticsEnabled, options.clientKey]);
 
   return state;
 }

package/src/studio/hooks/useAppStats.ts

@@ -3,6 +3,8 @@ import * as Haptics from 'expo-haptics';
 
 import type { App } from '../../data/apps/types';
 import { appLikesRepository } from '../../data/likes/repository';
+import type { InteractionSource } from '../analytics/events';
+import { trackLikeApp, trackOpenComments, trackUnlikeApp } from '../analytics/track';
 
 export type UseAppStatsParams = {
   appId: string;
@@ -11,6 +13,7 @@ export type UseAppStatsParams = {
   initialForks?: number;
   initialIsLiked?: boolean;
   onOpenComments?: () => void;
+  interactionSource?: InteractionSource;
 };
 
 export type AppStatsResult = {
@@ -30,6 +33,7 @@ export function useAppStats({
   initialForks = 0,
   initialIsLiked = false,
   onOpenComments,
+  interactionSource = 'unknown',
 }: UseAppStatsParams): AppStatsResult {
   const [likeCount, setLikeCount] = React.useState(initialLikes);
   const [commentCount, setCommentCount] = React.useState(initialComments);
@@ -77,15 +81,22 @@ export function useAppStats({
       if (newIsLiked) {
         const res = await appLikesRepository.create(appId, {});
         if (typeof res.stats?.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 res.stats?.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 = React.useCallback(() => {
     if (!appId) return;
@@ -93,8 +104,9 @@ export function useAppStats({
       void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     } catch {
     }
+    void trackOpenComments({ appId, source: interactionSource });
     onOpenComments?.();
-  }, [appId, onOpenComments]);
+  }, [appId, interactionSource, onOpenComments]);
 
   return { likeCount, commentCount, forkCount, isLiked, setCommentCount, handleLike, handleOpenComments };
 }

package/src/studio/hooks/useBundleManager.ts

@@ -5,6 +5,7 @@ import { unzip } from 'react-native-zip-archive';
 
 import type { Platform as BundlePlatform, Bundle, BundleAsset, BundleStatus } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
+import { trackTestBundle } from '../analytics/track';
 
 function sleep(ms: number): Promise<void> {
   return new Promise((r) => setTimeout(r, ms));
@@ -554,6 +555,7 @@ export function useBundleManager({
   const [statusLabel, setStatusLabel] = React.useState<string | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const [isTesting, setIsTesting] = React.useState(false);
+  const didHydrateColdStartRef = React.useRef(false);
 
   const baseRef = React.useRef(base);
   baseRef.current = base;
@@ -583,20 +585,27 @@ export function useBundleManager({
   }, [canRequestLatest]);
   // Track the most recently successfully loaded base bundle so we can instantly exit test mode.
   const lastBaseBundlePathRef = React.useRef<string | null>(null);
+  const lastBaseAppIdRef = React.useRef<string | null>(null);
   const lastBaseFingerprintRef = React.useRef<string | null>(null);
+  const activeBundleAppIdRef = React.useRef<string | null>(null);
   // Only used to suppress an unnecessary remount on cold start when the network bundle matches the disk bundle.
   const initialHydratedBaseFromDiskRef = React.useRef(false);
   const hasCompletedFirstNetworkBaseLoadRef = React.useRef(false);
 
   const hydrateBaseFromDisk = React.useCallback(
-    async (appId: string, reason: 'initial' | 'fallback') => {
+    async (
+      appId: string,
+      reason: 'initial' | 'fallback',
+      options?: { allowEmbeddedFallback?: boolean }
+    ) => {
       try {
         const dir = bundlesCacheDir();
         await ensureDir(dir);
         const key = baseBundleKey(appId, platform);
         let existing = await getExistingBundleFileUri(key, platform);
         let embeddedMeta: BaseBundleMeta | null = null;
-        if (!existing) {
+        const allowEmbeddedFallback = options?.allowEmbeddedFallback ?? false;
+        if (!existing && allowEmbeddedFallback) {
           const embedded = embeddedBaseBundlesRef.current?.[platform];
           const hydrated = await hydrateBaseFromEmbeddedAsset(appId, platform, embedded);
           if (hydrated?.bundlePath) {
@@ -611,6 +620,8 @@ export function useBundleManager({
         }
         if (existing) {
           lastBaseBundlePathRef.current = existing;
+          lastBaseAppIdRef.current = appId;
+          activeBundleAppIdRef.current = appId;
           setBundlePath(existing);
           const meta =
             embeddedMeta ??
@@ -633,6 +644,9 @@ export function useBundleManager({
             initialHydratedBaseFromDiskRef.current = true;
             hasCompletedFirstNetworkBaseLoadRef.current = false;
           }
+        } else if (activeBundleAppIdRef.current !== appId) {
+          activeBundleAppIdRef.current = null;
+          setBundlePath(null);
         }
       } catch {
 
@@ -641,24 +655,42 @@ export function useBundleManager({
     [platform]
   );
 
-  // On cold reopen, try to load the last base bundle from disk as early as possible.
+  // On cold open, hydrate from disk and allow embedded fallback once.
+  // On subsequent app switches, hydrate only app-specific disk cache (no embedded fallback).
   React.useEffect(() => {
     if (!base.appId) return;
     initialHydratedBaseFromDiskRef.current = false;
     hasCompletedFirstNetworkBaseLoadRef.current = false;
-    void hydrateBaseFromDisk(base.appId, 'initial');
+    const isColdStart = !didHydrateColdStartRef.current;
+    didHydrateColdStartRef.current = true;
+    void hydrateBaseFromDisk(base.appId, isColdStart ? 'initial' : 'fallback', {
+      allowEmbeddedFallback: isColdStart,
+    });
   }, [base.appId, platform, hydrateBaseFromDisk]);
 
+  // Never keep rendering a bundle that belongs to a different app.
+  React.useEffect(() => {
+    if (!base.appId) return;
+    if (activeBundleAppIdRef.current && activeBundleAppIdRef.current !== base.appId) {
+      activeBundleAppIdRef.current = null;
+      setBundlePath(null);
+      setIsTesting(false);
+      setError(null);
+      setStatusLabel(null);
+    }
+  }, [base.appId]);
+
   const activateCachedBase = React.useCallback(
     async (appId: string) => {
       setIsTesting(false);
       setStatusLabel(null);
       setError(null);
-      const cachedBase = lastBaseBundlePathRef.current;
+      const cachedBase = lastBaseAppIdRef.current === appId ? lastBaseBundlePathRef.current : null;
       if (cachedBase) {
+        activeBundleAppIdRef.current = appId;
         setBundlePath(cachedBase);
       } else {
-        await hydrateBaseFromDisk(appId, 'fallback');
+        await hydrateBaseFromDisk(appId, 'fallback', { allowEmbeddedFallback: false });
       }
     },
     [hydrateBaseFromDisk]
@@ -699,6 +731,7 @@ export function useBundleManager({
       if (mode === 'test' && opId !== testOpIdRef.current) return;
       if (desiredModeRef.current !== mode) return;
       setBundleStatus(bundle.status);
+      activeBundleAppIdRef.current = src.appId;
       setBundlePath(path);
       const fingerprint = bundle.checksumSha256 ?? `id:${bundle.id}`;
 
@@ -717,6 +750,7 @@ export function useBundleManager({
 
       if (mode === 'base') {
         lastBaseBundlePathRef.current = path;
+        lastBaseAppIdRef.current = src.appId;
         lastBaseFingerprintRef.current = fingerprint;
         hasCompletedFirstNetworkBaseLoadRef.current = true;
         initialHydratedBaseFromDiskRef.current = false;
@@ -762,7 +796,22 @@ export function useBundleManager({
   }, [load]);
 
   const loadTest = React.useCallback(async (src: BundleSource) => {
-    await load(src, 'test');
+    try {
+      await load(src, 'test');
+      await trackTestBundle({
+        appId: src.appId,
+        commitId: src.commitId ?? undefined,
+        success: true,
+      });
+    } catch (error) {
+      await trackTestBundle({
+        appId: src.appId,
+        commitId: src.commitId ?? undefined,
+        success: false,
+        error,
+      });
+      throw error;
+    }
   }, [load]);
 
   const restoreBase = React.useCallback(async () => {

package/src/studio/hooks/useMergeRequests.ts

@@ -5,6 +5,11 @@ import { mergeRequestsRepository } from '../../data/merge-requests/repository';
 import type { MergeRequestSummary } from '../../components/models/types';
 import { usersRepository } from '../../data/users/repository';
 import type { UserStats } from '../../data/users/types';
+import {
+  trackApproveMergeRequest,
+  trackOpenMergeRequest,
+  trackRejectMergeRequest,
+} from '../analytics/track';
 
 export type MergeRequestLists = {
   /**
@@ -118,27 +123,71 @@ export function useMergeRequests(params: { appId: string }): UseMergeRequestsRes
 
   React.useEffect(() => {
     void refresh();
-  }, [refresh]);
+  }, [appId, refresh]);
 
   const openMergeRequest = React.useCallback(async (sourceAppId: string) => {
-    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 (error) {
+      await trackOpenMergeRequest({
+        appId,
+        success: false,
+        error,
+      });
+      throw error;
+    }
   }, [refresh]);
 
   const approve = React.useCallback(async (mrId: string) => {
-    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 (error) {
+      await trackApproveMergeRequest({
+        appId,
+        mergeRequestId: mrId,
+        success: false,
+        error,
+      });
+      throw error;
+    }
+  }, [appId, pollUntilMerged, refresh]);
 
   const reject = React.useCallback(async (mrId: string) => {
-    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 (error) {
+      await trackRejectMergeRequest({
+        appId,
+        mergeRequestId: mrId,
+        success: false,
+        error,
+      });
+      throw error;
+    }
+  }, [appId, refresh]);
 
   const toSummary = React.useCallback((mr: MergeRequest): MergeRequestSummary => {
     const stats = creatorStatsById[mr.createdBy];