@comergehq/studio 0.1.2 → 0.1.4

package/src/data/types.ts

@@ -0,0 +1,8 @@
+export type ServiceResponse<T> = {
+  success: boolean;
+  statusCode: number;
+  message: string;
+  responseObject?: T | null;
+};
+
+

package/src/data/users/remote.ts

@@ -0,0 +1,31 @@
+import { api } from '../../core/services/http';
+import type { ServiceResponse } from '../types';
+import { BaseRemote } from '../base-remote';
+import type { UserStats, UserStatsBatchResponse } from './types';
+
+export interface UsersRemoteDataSource {
+  getStats(userId: string): Promise<ServiceResponse<UserStats>>;
+  getStatsBatch(userIds: string[]): Promise<ServiceResponse<UserStatsBatchResponse>>;
+}
+
+class UsersRemoteDataSourceImpl extends BaseRemote implements UsersRemoteDataSource {
+  async getStats(userId: string): Promise<ServiceResponse<UserStats>> {
+    const { data } = await api.get<ServiceResponse<UserStats>>(
+      `/v1/users/${encodeURIComponent(userId)}/stats`
+    );
+    return data;
+  }
+
+  async getStatsBatch(userIds: string[]): Promise<ServiceResponse<UserStatsBatchResponse>> {
+    const { data } = await api.post<ServiceResponse<UserStatsBatchResponse>>(
+      '/v1/users/stats/batch',
+      { userIds }
+    );
+    return data;
+  }
+}
+
+export const usersRemoteDataSource: UsersRemoteDataSource = new UsersRemoteDataSourceImpl();
+
+
+

package/src/data/users/repository.ts

@@ -0,0 +1,45 @@
+import type { UsersRemoteDataSource } from './remote';
+import { usersRemoteDataSource } from './remote';
+import type { UserStats, UserStatsBatchResponse } from './types';
+import { BaseRepository } from '../../data/base-repository';
+
+export interface UsersRepository {
+  getStats(userId: string): Promise<UserStats>;
+  getStatsBatch(userIds: string[]): Promise<Record<string, UserStats>>;
+}
+
+class UsersRepositoryImpl extends BaseRepository implements UsersRepository {
+  constructor(private readonly remote: UsersRemoteDataSource) {
+    super();
+  }
+
+  async getStats(userId: string): Promise<UserStats> {
+    const res = await this.remote.getStats(userId);
+    return this.unwrapOrThrow(res);
+  }
+
+  async getStatsBatch(userIds: string[]): Promise<Record<string, UserStats>> {
+    if (userIds.length === 0) return {};
+    const res = await this.remote.getStatsBatch(userIds);
+    if (res.responseObject && !res.success) {
+      return this.extractStats(res.responseObject);
+    }
+    const payload = this.unwrapOrThrow(res);
+    return this.extractStats(payload);
+  }
+
+  private extractStats(payload: UserStatsBatchResponse): Record<string, UserStats> {
+    const result: Record<string, UserStats> = {};
+    Object.entries(payload.stats).forEach(([userId, stats]) => {
+      if (stats) {
+        result[userId] = stats;
+      }
+    });
+    return result;
+  }
+}
+
+export const usersRepository: UsersRepository = new UsersRepositoryImpl(usersRemoteDataSource);
+
+
+

package/src/data/users/types.ts

@@ -0,0 +1,15 @@
+export type UserStats = {
+  userId: string;
+  name: string | null;
+  avatar: string | null;
+  approvedOpenedMergeRequests: number;
+  totalOpenedMergeRequests: number;
+};
+
+export type UserStatsBatchResponse = {
+  stats: Record<string, UserStats | null>;
+  errors?: Record<string, { message: string; statusCode: number }>;
+};
+
+
+

package/src/index.ts

@@ -0,0 +1,6 @@
+export type { ComergeStudioProps } from './studio/ComergeStudio';
+
+export { ComergeStudio } from './studio/ComergeStudio';
+export { setSupabaseClient } from './core/services/supabase';
+
+

package/src/studio/ComergeStudio.tsx

@@ -0,0 +1,239 @@
+import * as React from 'react';
+import { Platform as RNPlatform, View, type ViewStyle } from 'react-native';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+import type { Platform as BundlePlatform } from '../data/apps/bundles/types';
+import { StudioBootstrap } from './bootstrap/StudioBootstrap';
+import { useApp } from './hooks/useApp';
+import { useThreadMessages } from './hooks/useThreadMessages';
+import { useBundleManager } from './hooks/useBundleManager';
+import { useMergeRequests } from './hooks/useMergeRequests';
+import { useAttachmentUpload } from './hooks/useAttachmentUpload';
+import { useStudioActions } from './hooks/useStudioActions';
+import { hasNoOutcomeAfterLastHuman } from './lib/chat';
+import { RuntimeRenderer } from './ui/RuntimeRenderer';
+import { StudioOverlay } from './ui/StudioOverlay';
+
+export type ComergeStudioProps = {
+  appId: string;
+  apiKey: string;
+  appKey?: string;
+  onNavigateHome?: () => void;
+  style?: ViewStyle;
+};
+
+export function ComergeStudio({
+  appId,
+  apiKey,
+  appKey = 'MicroMain',
+  onNavigateHome,
+  style,
+}: ComergeStudioProps) {
+  const [activeAppId, setActiveAppId] = React.useState(appId);
+  const [runtimeAppId, setRuntimeAppId] = React.useState(appId);
+  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React.useState<string | null>(null);
+  const platform = React.useMemo<BundlePlatform>(() => (RNPlatform.OS === 'ios' ? 'ios' : 'android'), []);
+
+  React.useEffect(() => {
+    setActiveAppId(appId);
+    setRuntimeAppId(appId);
+    setPendingRuntimeTargetAppId(null);
+  }, [appId]);
+
+  const captureTargetRef = React.useRef<View | null>(null);
+
+  return (
+    <StudioBootstrap apiKey={apiKey}>
+      {({ userId }) => (
+        <BottomSheetModalProvider>
+          <ComergeStudioInner
+            userId={userId}
+            activeAppId={activeAppId}
+            setActiveAppId={setActiveAppId}
+            runtimeAppId={runtimeAppId}
+            setRuntimeAppId={setRuntimeAppId}
+            pendingRuntimeTargetAppId={pendingRuntimeTargetAppId}
+            setPendingRuntimeTargetAppId={setPendingRuntimeTargetAppId}
+            appKey={appKey}
+            platform={platform}
+            onNavigateHome={onNavigateHome}
+            captureTargetRef={captureTargetRef}
+            style={style}
+          />
+        </BottomSheetModalProvider>
+      )}
+    </StudioBootstrap>
+  );
+}
+
+type InnerProps = {
+  userId: string;
+  activeAppId: string;
+  setActiveAppId: (id: string) => void;
+  runtimeAppId: string;
+  setRuntimeAppId: (id: string) => void;
+  pendingRuntimeTargetAppId: string | null;
+  setPendingRuntimeTargetAppId: (id: string | null) => void;
+  appKey: string;
+  platform: BundlePlatform;
+  onNavigateHome?: () => void;
+  captureTargetRef: React.RefObject<View | null>;
+  style?: ViewStyle;
+};
+
+function ComergeStudioInner({
+  userId,
+  activeAppId,
+  setActiveAppId,
+  runtimeAppId,
+  setRuntimeAppId,
+  pendingRuntimeTargetAppId,
+  setPendingRuntimeTargetAppId,
+  appKey,
+  platform,
+  onNavigateHome,
+  captureTargetRef,
+  style,
+}: InnerProps) {
+  const { app, loading: appLoading } = useApp(activeAppId);
+  const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
+  const runtimeApp = runtimeAppId === activeAppId ? app : runtimeAppFromHook;
+
+  // When we fork+edit, we keep rendering the original app until the forked app completes the edit.
+  // We unlock the runtime switch once we observe the forked app go editing -> ready.
+  const sawEditingOnPendingTargetRef = React.useRef(false);
+  React.useEffect(() => {
+    sawEditingOnPendingTargetRef.current = false;
+  }, [pendingRuntimeTargetAppId]);
+
+  React.useEffect(() => {
+    if (!pendingRuntimeTargetAppId) return;
+    if (activeAppId !== pendingRuntimeTargetAppId) return;
+    if (app?.status === 'editing') {
+      sawEditingOnPendingTargetRef.current = true;
+    }
+    if (sawEditingOnPendingTargetRef.current && app?.status === 'ready') {
+      setRuntimeAppId(pendingRuntimeTargetAppId);
+      setPendingRuntimeTargetAppId(null);
+      sawEditingOnPendingTargetRef.current = false;
+    }
+  }, [activeAppId, app?.status, app?.id, pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId, setRuntimeAppId]);
+
+  const bundle = useBundleManager({
+    base: { appId: runtimeAppId, commitId: runtimeApp?.headCommitId ?? undefined },
+    platform,
+    canRequestLatest: runtimeApp?.status === 'ready',
+  });
+
+  const threadId = app?.threadId ?? '';
+  const thread = useThreadMessages(threadId);
+
+  const mergeRequests = useMergeRequests({ appId: activeAppId });
+  const hasOpenOutgoingMr = React.useMemo(() => {
+    return mergeRequests.lists.outgoing.some((mr) => mr.status === 'open');
+  }, [mergeRequests.lists.outgoing]);
+
+  const incomingReviewMrs = React.useMemo(() => {
+    if (!userId) return mergeRequests.lists.incoming;
+    return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
+  }, [mergeRequests.lists.incoming, userId]);
+
+  const uploader = useAttachmentUpload();
+
+  const actions = useStudioActions({
+    userId,
+    app,
+    onForkedApp: (id, opts) => {
+      setActiveAppId(id);
+      const keepRenderingAppId = opts?.keepRenderingAppId;
+      if (keepRenderingAppId) {
+        setRuntimeAppId(keepRenderingAppId);
+        setPendingRuntimeTargetAppId(id);
+      } else {
+        setRuntimeAppId(id);
+        setPendingRuntimeTargetAppId(null);
+      }
+    },
+    uploadAttachments: uploader.uploadBase64Images,
+  });
+
+  const chatSendDisabled = hasNoOutcomeAfterLastHuman(thread.raw);
+
+  const [processingMrId, setProcessingMrId] = React.useState<string | null>(null);
+  const [testingMrId, setTestingMrId] = React.useState<string | null>(null);
+
+  // Show typing dots when the last message isn't an outcome (agent still working).
+  const chatShowTypingIndicator = React.useMemo(() => {
+    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]);
+
+  return (
+      <View style={[{ flex: 1 }, style]}>
+      <View ref={captureTargetRef} style={{ flex: 1 }} collapsable={false}>
+        <RuntimeRenderer appKey={appKey} bundlePath={bundle.bundlePath} renderToken={bundle.renderToken} />
+
+        <StudioOverlay
+          captureTargetRef={captureTargetRef}
+          app={app}
+          appLoading={appLoading}
+          isOwner={actions.isOwner}
+          shouldForkOnEdit={actions.shouldForkOnEdit}
+          isTesting={bundle.isTesting}
+          onRestoreBase={async () => {
+            setTestingMrId(null);
+            await bundle.restoreBase();
+          }}
+          incomingMergeRequests={incomingReviewMrs}
+          outgoingMergeRequests={mergeRequests.lists.outgoing}
+          creatorStatsById={mergeRequests.creatorStatsById}
+          processingMrId={processingMrId}
+          isBuildingMrTest={bundle.loading}
+          testingMrId={testingMrId}
+          toMergeRequestSummary={mergeRequests.toSummary}
+          onSubmitMergeRequest={
+            app?.forkedFromAppId && actions.isOwner && !hasOpenOutgoingMr
+              ? async () => {
+                  await mergeRequests.actions.openMergeRequest(activeAppId);
+                }
+              : undefined
+          }
+          onApprove={async (mr) => {
+            if (processingMrId) return;
+            setProcessingMrId(mr.id);
+            try {
+              await mergeRequests.actions.approve(mr.id);
+            } finally {
+              setProcessingMrId(null);
+            }
+          }}
+          onReject={async (mr) => {
+            if (processingMrId) return;
+            setProcessingMrId(mr.id);
+            try {
+              await mergeRequests.actions.reject(mr.id);
+            } finally {
+              setProcessingMrId(null);
+            }
+          }}
+          onTestMr={async (mr) => {
+            setTestingMrId(mr.id);
+            await bundle.loadTest({ appId: mr.sourceAppId, commitId: mr.sourceTipCommitId ?? mr.sourceCommitId });
+          }}
+          chatMessages={thread.messages}
+          chatLoading={thread.loading}
+          chatSendDisabled={chatSendDisabled}
+          chatForking={actions.forking}
+          chatSending={actions.sending}
+          chatShowTypingIndicator={chatShowTypingIndicator}
+          onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
+          onNavigateHome={onNavigateHome}
+        />
+      </View>
+    </View>
+  );
+}
+
+

package/src/studio/bootstrap/StudioBootstrap.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '../../components/primitives/Text';
+import { useStudioBootstrap, type UseStudioBootstrapOptions } from './useStudioBootstrap';
+
+export type StudioBootstrapProps = UseStudioBootstrapOptions & {
+  children: React.ReactNode | ((params: { userId: string }) => React.ReactNode);
+  /**
+   * Optional custom loading UI.
+   */
+  fallback?: React.ReactNode;
+  /**
+   * Optional custom error UI. If not provided, a minimal message is shown.
+   */
+  renderError?: (error: Error) => React.ReactNode;
+};
+
+export function StudioBootstrap({ children, fallback, renderError, apiKey }: StudioBootstrapProps) {
+  const { ready, error, userId } = useStudioBootstrap({ apiKey });
+
+  if (error) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
+        {renderError ? renderError(error) : <Text variant="bodyMuted">{error.message}</Text>}
+      </View>
+    );
+  }
+
+  if (!ready) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
+        {fallback ?? <Text variant="bodyMuted">Loading…</Text>}
+      </View>
+    );
+  }
+
+  if (typeof children === 'function') {
+    return <>{children({ userId: userId ?? '' })}</>;
+  }
+
+  return <>{children}</>;
+}
+
+

package/src/studio/bootstrap/useStudioBootstrap.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { setClientApiKey } 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';
+
+export type UseStudioBootstrapOptions = {
+  apiKey: string;
+};
+
+export type StudioBootstrapState = {
+  ready: boolean;
+  userId: string | null;
+  error: Error | null;
+};
+
+export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBootstrapState {
+  const [state, setState] = React.useState<StudioBootstrapState>({
+    ready: false,
+    userId: null,
+    error: null,
+  });
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      try {
+        setClientApiKey(options.apiKey);
+        const requireAuth = isSupabaseClientInjected();
+        if (!requireAuth) {
+          const cfg = await studioConfigRepository.get();
+          setSupabaseConfig(cfg);
+        }
+        const { user } = requireAuth ? await ensureAuthenticatedSession() : await ensureAnonymousSession();
+
+        if (cancelled) return;
+        setState({ ready: true, userId: user.id, error: null });
+      } catch (e) {
+        if (cancelled) return;
+        const err = e instanceof Error ? e : new Error(String(e));
+        setState({ ready: false, userId: null, error: err });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [options.apiKey]);
+
+  return state;
+}
+
+

package/src/studio/hooks/useApp.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import type { App } from '../../data/apps/types';
+import { appsRepository } from '../../data/apps/repository';
+
+export type UseAppResult = {
+  app: App | null;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+};
+
+export type UseAppOptions = {
+  /**
+   * When false, this hook won't fetch or subscribe.
+   * Useful to avoid duplicate Supabase channel subscriptions for the same app id.
+   */
+  enabled?: boolean;
+};
+
+export function useApp(appId: string, options?: UseAppOptions): UseAppResult {
+  const enabled = options?.enabled ?? true;
+  const [app, setApp] = React.useState<App | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const mergeApp = React.useCallback((prev: App | null, next: App): App => {
+    // Realtime (Supabase) rows don't include "viewer-specific" fields like `isLiked`,
+    // and may omit derived fields like `insights`. Preserve those from the last REST fetch.
+    const merged: App = {
+      ...(prev ?? ({} as App)),
+      ...next,
+      isLiked: next.isLiked ?? prev?.isLiked,
+      insights: next.insights ?? prev?.insights,
+    };
+    return merged;
+  }, []);
+
+  const fetchOnce = React.useCallback(async () => {
+    if (!enabled) return;
+    if (!appId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await appsRepository.getById(appId);
+      setApp((prev) => mergeApp(prev, next));
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setApp(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [appId, enabled]);
+
+  React.useEffect(() => {
+    if (!enabled) return;
+    void fetchOnce();
+  }, [enabled, fetchOnce]);
+
+  React.useEffect(() => {
+    if (!enabled) return;
+    if (!appId) return;
+    const unsubscribe = appsRepository.subscribeApp(appId, {
+      onInsert: (a) => {
+        console.log('[useApp] onInsert', a);
+        setApp((prev) => mergeApp(prev, a));
+      },
+      onUpdate: (a) => {
+        console.log('[useApp] onUpdate', a);
+        setApp((prev) => mergeApp(prev, a));
+      },
+      onDelete: () => {
+        console.log('[useApp] onDelete');
+        setApp(null);
+      },
+    });
+    return unsubscribe;
+  }, [appId, enabled, mergeApp]);
+
+  return { app, loading, error, refetch: fetchOnce };
+}
+
+

package/src/studio/hooks/useAppStats.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import * as Haptics from 'expo-haptics';
+
+import type { App } from '../../data/apps/types';
+import { appLikesRepository } from '../../data/likes/repository';
+
+export type UseAppStatsParams = {
+  appId: string;
+  initialLikes?: number;
+  initialComments?: number;
+  initialForks?: number;
+  initialIsLiked?: boolean;
+  onOpenComments?: () => void;
+};
+
+export type AppStatsResult = {
+  likeCount: number;
+  commentCount: number;
+  forkCount: number;
+  isLiked: boolean;
+  setCommentCount: (count: number) => void;
+  handleLike: () => Promise<void>;
+  handleOpenComments: () => void;
+};
+
+export function useAppStats({
+  appId,
+  initialLikes = 0,
+  initialComments = 0,
+  initialForks = 0,
+  initialIsLiked = false,
+  onOpenComments,
+}: UseAppStatsParams): AppStatsResult {
+  const [likeCount, setLikeCount] = React.useState(initialLikes);
+  const [commentCount, setCommentCount] = React.useState(initialComments);
+  const [forkCount, setForkCount] = React.useState(initialForks);
+  const [isLiked, setIsLiked] = React.useState(initialIsLiked);
+
+  const didMutateRef = React.useRef(false);
+  const lastAppIdRef = React.useRef<string>('');
+  React.useEffect(() => {
+    if (lastAppIdRef.current === appId) return;
+    lastAppIdRef.current = appId;
+    didMutateRef.current = false;
+  }, [appId]);
+
+  React.useEffect(() => {
+    if (didMutateRef.current) return;
+    setLikeCount(initialLikes);
+  }, [appId, initialLikes]);
+  React.useEffect(() => {
+    if (didMutateRef.current) return;
+    setCommentCount(initialComments);
+  }, [appId, initialComments]);
+  React.useEffect(() => {
+    if (didMutateRef.current) return;
+    setForkCount(initialForks);
+  }, [appId, initialForks]);
+  React.useEffect(() => {
+    if (didMutateRef.current) return;
+    setIsLiked(initialIsLiked);
+  }, [appId, initialIsLiked]);
+
+  const handleLike = React.useCallback(async () => {
+    if (!appId) return;
+    didMutateRef.current = true;
+    try {
+      void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    } catch {
+    }
+
+    const newIsLiked = !isLiked;
+    setIsLiked(newIsLiked);
+    setLikeCount((prev) => Math.max(0, prev + (newIsLiked ? 1 : -1)));
+
+    try {
+      if (newIsLiked) {
+        const res = await appLikesRepository.create(appId, {});
+        if (typeof res.stats?.total === 'number') setLikeCount(Math.max(0, res.stats.total));
+      } else {
+        const res = await appLikesRepository.removeMine(appId);
+        if (typeof res.stats?.total === 'number') setLikeCount(Math.max(0, res.stats.total));
+      }
+    } catch (e) {
+      setIsLiked(!newIsLiked);
+      setLikeCount((prev) => Math.max(0, prev + (newIsLiked ? -1 : 1)));
+    }
+  }, [appId, isLiked, likeCount]);
+
+  const handleOpenComments = React.useCallback(() => {
+    if (!appId) return;
+    try {
+      void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    } catch {
+    }
+    onOpenComments?.();
+  }, [appId, onOpenComments]);
+
+  return { likeCount, commentCount, forkCount, isLiked, setCommentCount, handleLike, handleOpenComments };
+}
+
+export function getAppStatsFromApp(app: App | null): Omit<UseAppStatsParams, 'appId'> {
+  return {
+    initialLikes: app?.insights?.totalLikes ?? 0,
+    initialComments: app?.insights?.totalComments ?? 0,
+    initialForks: app?.insights?.totalForks ?? 0,
+    initialIsLiked: Boolean(app?.isLiked),
+  };
+}
+
+