@comergehq/studio 0.1.27 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -68,6 +68,7 @@
     "react-native": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
+    "mixpanel-react-native": "*",
     "react-native-zip-archive": "*",
     "react-native-view-shot": "*"
   },

package/src/components/comments/useAppComments.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { appCommentsRepository } from '../../data/comments/repository';
 import type { AppComment } from '../../data/comments/types';
+import { trackSubmitComment } from '../../studio/analytics/track';
 
 export type UseAppCommentsResult = {
   comments: AppComment[];
@@ -58,7 +59,18 @@ export function useAppComments(appId: string | null): UseAppCommentsResult {
       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 {

package/src/studio/ComergeStudio.tsx

@@ -24,6 +24,7 @@ export type ComergeStudioProps = {
   appId: string;
   clientKey: string;
   appKey?: string;
+  analyticsEnabled?: boolean;
   onNavigateHome?: () => void;
   style?: ViewStyle;
   showBubble?: boolean;
@@ -36,6 +37,7 @@ export function ComergeStudio({
   appId,
   clientKey,
   appKey = 'MicroMain',
+  analyticsEnabled,
   onNavigateHome,
   style,
   showBubble = true,
@@ -57,7 +59,11 @@ export function ComergeStudio({
   const captureTargetRef = React.useRef<View | null>(null);
 
   return (
-    <StudioBootstrap clientKey={clientKey} fallback={<View style={{ flex: 1 }} />}>
+    <StudioBootstrap
+      clientKey={clientKey}
+      analyticsEnabled={analyticsEnabled}
+      fallback={<View style={{ flex: 1 }} />}
+    >
       {({ userId }) => (
         <BottomSheetModalProvider>
           <LiquidGlassResetProvider resetTriggers={[appId, activeAppId, runtimeAppId]}>

package/src/studio/analytics/client.ts

@@ -0,0 +1,103 @@
+import { Platform } from 'react-native';
+import { Mixpanel } from 'mixpanel-react-native';
+
+import { log } from '../../core/logger';
+import type {
+  StudioAnalyticsEventMap,
+  StudioAnalyticsEventName,
+  StudioAnalyticsEventPayload,
+} from './events';
+
+type StudioAnalyticsInitOptions = {
+  enabled: boolean;
+  token?: string;
+  serverUrl?: string;
+  debug?: boolean;
+};
+
+let studioMixpanel: Mixpanel | null = null;
+let studioAnalyticsEnabled = false;
+let initPromise: Promise<void> | null = null;
+
+export async function initStudioAnalytics(options: StudioAnalyticsInitOptions) {
+  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: Platform.OS,
+      };
+
+      studioMixpanel = new 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;
+}
+
+export function isStudioAnalyticsEnabled() {
+  return studioAnalyticsEnabled;
+}
+
+export async function trackStudioEvent<TName extends StudioAnalyticsEventName>(
+  eventName: TName,
+  properties: StudioAnalyticsEventPayload<TName>
+) {
+  if (!studioAnalyticsEnabled || !studioMixpanel) return;
+  try {
+    await studioMixpanel.track(eventName, properties as StudioAnalyticsEventMap[TName]);
+  } catch (error) {
+    log.warn('[studio-analytics] track failed', { eventName, error });
+  }
+}
+
+export async function flushStudioAnalytics() {
+  if (!studioAnalyticsEnabled || !studioMixpanel) return;
+  try {
+    await studioMixpanel.flush();
+  } catch (error) {
+    log.warn('[studio-analytics] flush failed', error);
+  }
+}
+
+export async function identifyStudioUser(userId: string) {
+  if (!studioAnalyticsEnabled || !studioMixpanel || !userId) return;
+  try {
+    await studioMixpanel.identify(userId);
+  } catch (error) {
+    log.warn('[studio-analytics] identify failed', error);
+  }
+}
+
+export async function resetStudioAnalytics() {
+  if (!studioAnalyticsEnabled || !studioMixpanel) return;
+  try {
+    await studioMixpanel.reset();
+  } catch (error) {
+    log.warn('[studio-analytics] reset failed', error);
+  }
+}

package/src/studio/analytics/events.ts

@@ -0,0 +1,98 @@
+export const STUDIO_ANALYTICS_EVENT_VERSION = 1 as const;
+
+type ErrorMetadata = {
+  error_code?: string;
+  error_domain?: string;
+};
+
+export type InteractionSource = 'preview_panel' | 'unknown';
+
+export type RemixAppEventProperties = {
+  app_id: string;
+  source_app_id: string;
+  thread_id?: string;
+  success: boolean;
+} & ErrorMetadata;
+
+export type EditAppEventProperties = {
+  app_id: string;
+  thread_id: string;
+  prompt_length: number;
+  success: boolean;
+} & ErrorMetadata;
+
+export type ShareAppEventProperties = {
+  app_id: string;
+  success: boolean;
+} & ErrorMetadata;
+
+export type OpenMergeRequestEventProperties = {
+  app_id: string;
+  merge_request_id?: string;
+  success: boolean;
+} & ErrorMetadata;
+
+export type ApproveMergeRequestEventProperties = {
+  app_id: string;
+  merge_request_id: string;
+  success: boolean;
+} & ErrorMetadata;
+
+export type RejectMergeRequestEventProperties = {
+  app_id: string;
+  merge_request_id: string;
+  success: boolean;
+} & ErrorMetadata;
+
+export type TestBundleEventProperties = {
+  app_id: string;
+  commit_id?: string;
+  success: boolean;
+} & ErrorMetadata;
+
+export type LikeAppEventProperties = {
+  app_id: string;
+  source: InteractionSource;
+  success: boolean;
+} & ErrorMetadata;
+
+export type UnlikeAppEventProperties = {
+  app_id: string;
+  source: InteractionSource;
+  success: boolean;
+} & ErrorMetadata;
+
+export type OpenCommentsEventProperties = {
+  app_id: string;
+  source: InteractionSource;
+};
+
+export type SubmitCommentEventProperties = {
+  app_id: string;
+  comment_type: 'general';
+  comment_length: number;
+  success: boolean;
+} & ErrorMetadata;
+
+export type StudioAnalyticsEventMap = {
+  remix_app: RemixAppEventProperties;
+  edit_app: EditAppEventProperties;
+  share_app: ShareAppEventProperties;
+  open_merge_request: OpenMergeRequestEventProperties;
+  approve_merge_request: ApproveMergeRequestEventProperties;
+  reject_merge_request: RejectMergeRequestEventProperties;
+  test_bundle: TestBundleEventProperties;
+  like_app: LikeAppEventProperties;
+  unlike_app: UnlikeAppEventProperties;
+  open_comments: OpenCommentsEventProperties;
+  submit_comment: SubmitCommentEventProperties;
+};
+
+export type StudioAnalyticsEventName = keyof StudioAnalyticsEventMap;
+
+export type StudioAnalyticsBaseProperties = {
+  event_version: typeof STUDIO_ANALYTICS_EVENT_VERSION;
+};
+
+export type StudioAnalyticsEventPayload<TName extends StudioAnalyticsEventName> =
+  StudioAnalyticsEventMap[TName] & StudioAnalyticsBaseProperties;

package/src/studio/analytics/track.ts

@@ -0,0 +1,237 @@
+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;
+}, 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(),
+  });
+}

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));
@@ -762,7 +763,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 () => {