@comergehq/studio 0.1.26 → 0.1.28

package/src/studio/ComergeStudio.tsx

@@ -16,6 +16,7 @@ import { StudioOverlay } from './ui/StudioOverlay';
 import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
 import { useEditQueue } from './hooks/useEditQueue';
 import { useEditQueueActions } from './hooks/useEditQueueActions';
+import { useAgentRunProgress } from './hooks/useAgentRunProgress';
 import { appsRepository } from '../data/apps/repository';
 import type { SyncUpstreamStatus } from '../data/apps/types';
 
@@ -23,9 +24,11 @@ export type ComergeStudioProps = {
   appId: string;
   clientKey: string;
   appKey?: string;
+  analyticsEnabled?: boolean;
   onNavigateHome?: () => void;
   style?: ViewStyle;
   showBubble?: boolean;
+  enableAgentProgress?: boolean;
   studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
   embeddedBaseBundles?: EmbeddedBaseBundles;
 };
@@ -34,9 +37,11 @@ export function ComergeStudio({
   appId,
   clientKey,
   appKey = 'MicroMain',
+  analyticsEnabled,
   onNavigateHome,
   style,
   showBubble = true,
+  enableAgentProgress = true,
   studioControlOptions,
   embeddedBaseBundles,
 }: ComergeStudioProps) {
@@ -54,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]}>
@@ -72,6 +81,7 @@ export function ComergeStudio({
               captureTargetRef={captureTargetRef}
               style={style}
               showBubble={showBubble}
+              enableAgentProgress={enableAgentProgress}
               studioControlOptions={studioControlOptions}
               embeddedBaseBundles={embeddedBaseBundles}
             />
@@ -96,6 +106,7 @@ type InnerProps = {
   captureTargetRef: React.RefObject<View | null>;
   style?: ViewStyle;
   showBubble: boolean;
+  enableAgentProgress: boolean;
   studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
   embeddedBaseBundles?: EmbeddedBaseBundles;
 };
@@ -114,6 +125,7 @@ function ComergeStudioInner({
   captureTargetRef,
   style,
   showBubble,
+  enableAgentProgress,
   studioControlOptions,
   embeddedBaseBundles,
 }: InnerProps) {
@@ -179,6 +191,7 @@ function ComergeStudioInner({
   const threadId = app?.threadId ?? '';
   const thread = useThreadMessages(threadId);
   const editQueue = useEditQueue(activeAppId);
+  const agentProgress = useAgentRunProgress(threadId, { enabled: enableAgentProgress });
   const editQueueActions = useEditQueueActions(activeAppId);
   const [lastEditQueueInfo, setLastEditQueueInfo] = React.useState<{
     queueItemId?: string | null;
@@ -251,14 +264,20 @@ function ComergeStudioInner({
   const [upstreamSyncStatus, setUpstreamSyncStatus] = React.useState<SyncUpstreamStatus | null>(null);
   const isMrTestBuildInProgress = bundle.loading && bundle.loadingMode === 'test';
   const isBaseBundleDownloading = bundle.loading && bundle.loadingMode === 'base' && !bundle.isTesting;
+  const runtimePreparingText =
+    bundle.bundleStatus === 'pending'
+      ? 'Bundling app… this may take a few minutes'
+      : 'Preparing app…';
 
   // Show typing dots when the last message isn't an outcome (agent still working).
   const chatShowTypingIndicator = React.useMemo(() => {
+    if (agentProgress.hasLiveProgress) return false;
     if (!thread.raw || thread.raw.length === 0) return false;
     const last = thread.raw[thread.raw.length - 1];
     const payloadType = typeof (last.payload as any)?.type === 'string' ? String((last.payload as any).type) : undefined;
     return payloadType !== 'outcome';
-  }, [thread.raw]);
+  }, [agentProgress.hasLiveProgress, thread.raw]);
+  const showChatProgress = agentProgress.hasLiveProgress || Boolean(agentProgress.view.bundle?.active);
 
   React.useEffect(() => {
     updateLastEditQueueInfo(null);
@@ -311,6 +330,7 @@ function ComergeStudioInner({
         <RuntimeRenderer
           appKey={appKey}
           bundlePath={bundle.bundlePath}
+          preparingText={runtimePreparingText}
           forcePreparing={showPostEditPreparing}
           renderToken={bundle.renderToken}
           allowInitialPreparing={!embeddedBaseBundles}
@@ -377,6 +397,7 @@ function ComergeStudioInner({
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
           chatQueueItems={chatQueueItems}
           onRemoveQueueItem={(id) => editQueueActions.cancel(id)}
+          chatProgress={showChatProgress ? agentProgress.view : null}
           onNavigateHome={onNavigateHome}
           showBubble={showBubble}
           studioControlOptions={studioControlOptions}

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;
 }