@comergehq/studio 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/components/chat/ChatMessageBubble.tsx

@@ -25,6 +25,9 @@ export function ChatMessageBubble({ message, renderContent, style }: ChatMessage
   const isMergeRejected = metaEvent === 'merge_request.rejected';
   const isMergeCompleted = metaEvent === 'merge.completed';
 
+  const isSyncStarted = metaEvent === 'sync.started';
+  const isSyncCompleted = metaEvent === 'sync.completed';
+
   const isHuman = message.author === 'human' || isMergeApproved || isMergeRejected;
 
   const align: ViewStyle = { alignSelf: isHuman ? 'flex-end' : 'flex-start' };
@@ -51,10 +54,10 @@ export function ChatMessageBubble({ message, renderContent, style }: ChatMessage
         ]}
       >
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {isMergeCompleted ? (
+          {isMergeCompleted || isSyncCompleted ? (
             <CheckCheck size={16} color={theme.colors.success} style={{ marginRight: theme.spacing.sm }} />
           ) : null}
-          {isMergeApproved ? (
+          {isMergeApproved || isSyncStarted ? (
             <GitMerge size={16} color={theme.colors.text} style={{ marginRight: theme.spacing.sm }} />
           ) : null}
           <View style={{ flexShrink: 1, minWidth: 0 }}>

package/src/data/apps/remote.ts

@@ -14,6 +14,7 @@ import type {
   ListLikedAppsParams,
   ListPublicAppsParams,
   LikedAppsList,
+  SyncUpstreamResponse,
 } from './types';
 
 export interface AppsRemoteDataSource {
@@ -26,6 +27,7 @@ export interface AppsRemoteDataSource {
   getInsights(appId: string): Promise<ServiceResponse<AppInsights>>;
   getAnalytics(appId: string, params: AppAnalyticsParams): Promise<ServiceResponse<AppAnalyticsPoint[]>>;
   importFromGithub(payload: ImportGithubAppRequest): Promise<ServiceResponse<ImportGithubAppResponse>>;
+  syncUpstream(appId: string): Promise<ServiceResponse<SyncUpstreamResponse>>;
 }
 
 class AppsRemoteDataSourceImpl extends BaseRemote implements AppsRemoteDataSource {
@@ -90,6 +92,13 @@ class AppsRemoteDataSourceImpl extends BaseRemote implements AppsRemoteDataSourc
     );
     return data;
   }
+
+  async syncUpstream(appId: string): Promise<ServiceResponse<SyncUpstreamResponse>> {
+    const { data } = await api.post<ServiceResponse<SyncUpstreamResponse>>(
+      `/v1/apps/${encodeURIComponent(appId)}/sync-upstream`,
+    );
+    return data;
+  }
 }
 
 export const appsRemoteDataSource: AppsRemoteDataSource = new AppsRemoteDataSourceImpl();

package/src/data/apps/repository.ts

@@ -11,6 +11,7 @@ import type {
   ListLikedAppsParams,
   ListPublicAppsParams,
   LikedAppsList,
+  SyncUpstreamResponse,
 } from './types';
 import { appsRemoteDataSource } from './remote';
 import type { AppsRemoteDataSource } from './remote';
@@ -82,6 +83,7 @@ export interface AppsRepository {
   subscribeCreatedApps(userId: string, handlers: AppSubscriptionHandlers): () => void;
   subscribeApp(appId: string, handlers: AppSubscriptionHandlers): () => void;
   importFromGithub(payload: ImportGithubAppRequest): Promise<ImportGithubAppResponse>;
+  syncUpstream(appId: string): Promise<SyncUpstreamResponse>;
 }
 
 class AppsRepositoryImpl extends BaseRepository implements AppsRepository {
@@ -134,6 +136,11 @@ class AppsRepositoryImpl extends BaseRepository implements AppsRepository {
     return this.unwrapOrThrow(res);
   }
 
+  async syncUpstream(appId: string): Promise<SyncUpstreamResponse> {
+    const res = await this.remote.syncUpstream(appId);
+    return this.unwrapOrThrow(res);
+  }
+
   subscribeCreatedApps(userId: string, handlers: AppSubscriptionHandlers): () => void {
     if (!userId) return () => {};
     return this.subscribeToAppChannel(`apps:createdBy:${userId}`, `created_by=eq.${userId}`, handlers);

package/src/data/apps/types.ts

@@ -29,6 +29,8 @@ export type MergeRequestEntry = {
   createdAt: string;
 };
 
+export type SyncRequestEntry = MergeRequestEntry;
+
 export type LikeEntry = {
   userId: string;
   createdAt: string;
@@ -63,6 +65,12 @@ export type AppInsights = {
     merged: number;
     entries: MergeRequestEntry[];
   };
+  syncs: {
+    total: number;
+    approved: number;
+    merged: number;
+    entries: SyncRequestEntry[];
+  };
   likes: {
     total: number;
     entries: LikeEntry[];
@@ -137,6 +145,13 @@ export type ForkAppRequest = {
   forkedFromCommitId?: string;
 };
 
+export type SyncUpstreamStatus = 'up-to-date' | 'queued';
+
+export type SyncUpstreamResponse = {
+  status: SyncUpstreamStatus;
+  mergeRequestId?: string;
+};
+
 export type ImportGithubAppRequest = {
   repoFullName: string;
   branch?: string;

package/src/studio/ComergeStudio.tsx

@@ -16,6 +16,8 @@ import { StudioOverlay } from './ui/StudioOverlay';
 import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
 import { useEditQueue } from './hooks/useEditQueue';
 import { useEditQueueActions } from './hooks/useEditQueueActions';
+import { appsRepository } from '../data/apps/repository';
+import type { SyncUpstreamStatus } from '../data/apps/types';
 
 export type ComergeStudioProps = {
   appId: string;
@@ -245,6 +247,8 @@ function ComergeStudioInner({
 
   const [processingMrId, setProcessingMrId] = React.useState<string | null>(null);
   const [testingMrId, setTestingMrId] = React.useState<string | null>(null);
+  const [syncingUpstream, setSyncingUpstream] = React.useState(false);
+  const [upstreamSyncStatus, setUpstreamSyncStatus] = React.useState<SyncUpstreamStatus | null>(null);
 
   // Show typing dots when the last message isn't an outcome (agent still working).
   const chatShowTypingIndicator = React.useMemo(() => {
@@ -257,8 +261,23 @@ function ComergeStudioInner({
   React.useEffect(() => {
     updateLastEditQueueInfo(null);
     setSuppressQueueUntilResponse(false);
+    setUpstreamSyncStatus(null);
   }, [activeAppId, updateLastEditQueueInfo]);
 
+  const handleSyncUpstream = React.useCallback(async () => {
+    if (!app?.id) {
+      throw new Error('Missing app');
+    }
+    setSyncingUpstream(true);
+    try {
+      const result = await appsRepository.syncUpstream(activeAppId);
+      setUpstreamSyncStatus(result.status);
+      return result;
+    } finally {
+      setSyncingUpstream(false);
+    }
+  }, [activeAppId, app?.id]);
+
   React.useEffect(() => {
     if (!lastEditQueueInfo?.queueItemId) return;
     const stillPresent = editQueue.items.some((item) => item.id === lastEditQueueInfo.queueItemId);
@@ -320,6 +339,9 @@ function ComergeStudioInner({
                 }
               : undefined
           }
+          onSyncUpstream={actions.isOwner && app?.forkedFromAppId ? handleSyncUpstream : undefined}
+          syncingUpstream={syncingUpstream}
+          upstreamSyncStatus={upstreamSyncStatus}
           onApprove={async (mr) => {
             if (processingMrId) return;
             setProcessingMrId(mr.id);

package/src/studio/ui/PreviewPanel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ActivityIndicator, Platform, Share, View } from 'react-native';
 
-import type { App } from '../../data/apps/types';
+import type { App, SyncUpstreamStatus } from '../../data/apps/types';
 import type { MergeRequest } from '../../data/merge-requests/types';
 import { log } from '../../core/logger';
 import { PreviewPage } from '../../components/preview/PreviewPage';
@@ -30,6 +30,9 @@ export type PreviewPanelProps = {
   onGoToChat: () => void;
   onStartDraw?: () => void;
   onSubmitMergeRequest?: () => void | Promise<void>;
+  onSyncUpstream?: () => Promise<{ status: SyncUpstreamStatus }>;
+  syncingUpstream?: boolean;
+  upstreamSyncStatus?: SyncUpstreamStatus | null;
   onRequestApprove?: (mr: MergeRequest) => void;
   onReject?: (mr: MergeRequest) => void | Promise<void>;
   onTestMr?: (mr: MergeRequest) => void | Promise<void>;
@@ -54,6 +57,9 @@ export function PreviewPanel({
   onGoToChat,
   onStartDraw,
   onSubmitMergeRequest,
+  onSyncUpstream,
+  syncingUpstream,
+  upstreamSyncStatus,
   onRequestApprove,
   onReject,
   onTestMr,
@@ -63,9 +69,9 @@ export function PreviewPanel({
   const handleShare = React.useCallback(async () => {
     if (!app || !app.isPublic) return;
     const shareUrl = `https://remix.one/app/${app.id}`;
-    const message = app.name ? `${app.name} on Comerge\n${shareUrl}` : `Check out this app on Comerge\n${shareUrl}`;
+    const message = app.name ? `${app.name} on Remix\n${shareUrl}` : `Check out this app on Remix\n${shareUrl}`;
     try {
-      const title = app.name ?? 'Comerge app';
+      const title = app.name ?? 'Remix app';
       const payload =
         Platform.OS === 'ios'
           ? {
@@ -83,7 +89,17 @@ export function PreviewPanel({
     }
   }, [app]);
 
-  const { imageUrl, imageLoaded, setImageLoaded, creator, insights, stats, showProcessing, canSubmitMergeRequest } = usePreviewPanelData({
+  const {
+    imageUrl,
+    imageLoaded,
+    setImageLoaded,
+    creator,
+    insights,
+    stats,
+    showProcessing,
+    canSubmitMergeRequest,
+    canSyncUpstream,
+  } = usePreviewPanelData({
     app,
     isOwner,
     outgoingMergeRequests,
@@ -145,6 +161,9 @@ export function PreviewPanel({
 
       <PreviewCollaborateSection
         canSubmitMergeRequest={canSubmitMergeRequest}
+        canSyncUpstream={canSyncUpstream}
+        syncingUpstream={syncingUpstream}
+        upstreamSyncStatus={upstreamSyncStatus}
         incomingMergeRequests={incomingMergeRequests}
         outgoingMergeRequests={outgoingMergeRequests}
         creatorStatsById={creatorStatsById}
@@ -153,6 +172,7 @@ export function PreviewPanel({
         testingMrId={testingMrId}
         toMergeRequestSummary={toMergeRequestSummary}
         onSubmitMergeRequest={onSubmitMergeRequest}
+        onSyncUpstream={onSyncUpstream}
         onRequestApprove={onRequestApprove}
         onReject={onReject}
         onTestMr={onTestMr}

package/src/studio/ui/StudioOverlay.tsx

@@ -46,6 +46,9 @@ export type StudioOverlayProps = {
   testingMrId?: string | null;
   toMergeRequestSummary: (mr: MergeRequest) => MergeRequestSummary;
   onSubmitMergeRequest?: () => void | Promise<void>;
+  onSyncUpstream?: () => Promise<{ status: import('../../data/apps/types').SyncUpstreamStatus }>;
+  syncingUpstream?: boolean;
+  upstreamSyncStatus?: import('../../data/apps/types').SyncUpstreamStatus | null;
   onApprove?: (mr: MergeRequest) => void | Promise<void>;
   onReject?: (mr: MergeRequest) => void | Promise<void>;
   onTestMr?: (mr: MergeRequest) => void | Promise<void>;
@@ -85,6 +88,9 @@ export function StudioOverlay({
   testingMrId,
   toMergeRequestSummary,
   onSubmitMergeRequest,
+  onSyncUpstream,
+  syncingUpstream,
+  upstreamSyncStatus,
   onApprove,
   onReject,
   onTestMr,
@@ -248,6 +254,9 @@ export function StudioOverlay({
               onGoToChat={goToChat}
               onStartDraw={isOwner ? startDraw : undefined}
               onSubmitMergeRequest={onSubmitMergeRequest}
+              onSyncUpstream={onSyncUpstream}
+              syncingUpstream={syncingUpstream}
+              upstreamSyncStatus={upstreamSyncStatus}
               onRequestApprove={(mr) => setConfirmMrId(mr.id)}
               onReject={onReject}
               onTestMr={handleTestMr}

package/src/studio/ui/preview-panel/PreviewCollaborateSection.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ActivityIndicator, Alert, View } from 'react-native';
-import { Send } from 'lucide-react-native';
+import { RefreshCw, Send } from 'lucide-react-native';
 
 import type { MergeRequest } from '../../../data/merge-requests/types';
 import type { UserStats } from '../../../data/users/types';
+import type { SyncUpstreamStatus } from '../../../data/apps/types';
 import { MergeRequestStatusCard } from '../../../components/merge-requests/MergeRequestStatusCard';
 import { ReviewMergeRequestCarousel } from '../../../components/merge-requests/ReviewMergeRequestCarousel';
 import { Text } from '../../../components/primitives/Text';
@@ -16,6 +17,9 @@ import { MergeIcon } from '../../../components/icons/MergeIcon';
 
 export type PreviewCollaborateSectionProps = {
   canSubmitMergeRequest: boolean;
+  canSyncUpstream: boolean;
+  syncingUpstream?: boolean;
+  upstreamSyncStatus?: SyncUpstreamStatus | null;
   incomingMergeRequests: MergeRequest[];
   outgoingMergeRequests: MergeRequest[];
   creatorStatsById: Record<string, UserStats>;
@@ -24,6 +28,7 @@ export type PreviewCollaborateSectionProps = {
   testingMrId?: string | null;
   toMergeRequestSummary: (mr: MergeRequest) => import('../../../components/models/types').MergeRequestSummary;
   onSubmitMergeRequest?: () => void | Promise<void>;
+  onSyncUpstream?: () => Promise<{ status: SyncUpstreamStatus }>;
   onRequestApprove?: (mr: MergeRequest) => void;
   onReject?: (mr: MergeRequest) => void | Promise<void>;
   onTestMr?: (mr: MergeRequest) => void | Promise<void>;
@@ -31,6 +36,9 @@ export type PreviewCollaborateSectionProps = {
 
 export function PreviewCollaborateSection({
   canSubmitMergeRequest,
+  canSyncUpstream,
+  syncingUpstream,
+  upstreamSyncStatus,
   incomingMergeRequests,
   outgoingMergeRequests,
   creatorStatsById,
@@ -39,17 +47,24 @@ export function PreviewCollaborateSection({
   testingMrId,
   toMergeRequestSummary,
   onSubmitMergeRequest,
+  onSyncUpstream,
   onRequestApprove,
   onReject,
   onTestMr,
 }: PreviewCollaborateSectionProps) {
   const theme = useTheme();
   const [submittingMr, setSubmittingMr] = React.useState(false);
+  const [syncingLocal, setSyncingLocal] = React.useState(false);
 
-  const hasSection = canSubmitMergeRequest || incomingMergeRequests.length > 0 || outgoingMergeRequests.length > 0;
+  const hasSection =
+    canSubmitMergeRequest || canSyncUpstream || incomingMergeRequests.length > 0 || outgoingMergeRequests.length > 0;
   if (!hasSection) return null;
 
-  const showActionsSubtitle = (canSubmitMergeRequest && onSubmitMergeRequest) || (onTestMr && incomingMergeRequests.length > 0);
+  const isSyncing = Boolean(syncingUpstream || syncingLocal);
+  const showActionsSubtitle =
+    (canSubmitMergeRequest && onSubmitMergeRequest) ||
+    (canSyncUpstream && onSyncUpstream) ||
+    (onTestMr && incomingMergeRequests.length > 0);
 
   return (
     <>
@@ -131,6 +146,83 @@ export function PreviewCollaborateSection({
         />
       ) : null}
 
+      {canSyncUpstream && onSyncUpstream ? (
+        <PressableCardRow
+          accessibilityLabel="Sync from original"
+          disabled={isSyncing}
+          onPress={() => {
+            Alert.alert(
+              'Sync from Original',
+              'This will pull the latest upstream changes into your remix.',
+              [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                  text: 'Sync',
+                  style: 'destructive',
+                  onPress: () => {
+                    setSyncingLocal(true);
+                    Promise.resolve(onSyncUpstream())
+                      .then((result) => {
+                        if (result?.status === 'up-to-date') {
+                          Alert.alert('Up to date', 'Your remix already includes the latest upstream changes.');
+                        } else {
+                          Alert.alert('Sync started', 'Upstream changes are being merged into your remix.');
+                        }
+                      })
+                      .catch(() => {
+                        Alert.alert('Sync failed', 'We could not start the sync. Please try again.');
+                      })
+                      .finally(() => setSyncingLocal(false));
+                  },
+                },
+              ]
+            );
+          }}
+          style={{
+            padding: theme.spacing.lg,
+            borderRadius: theme.radii.lg,
+            backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+            borderWidth: 1,
+            borderColor: withAlpha(theme.colors.primary, 0.25),
+            marginBottom: theme.spacing.sm,
+          }}
+          left={
+            <View
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: 999,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: withAlpha(theme.colors.primary, 0.12),
+                marginRight: theme.spacing.lg,
+              }}
+            >
+              {isSyncing ? (
+                <ActivityIndicator color={theme.colors.primary} size="small" />
+              ) : (
+                <RefreshCw size={18} color={theme.colors.primary} />
+              )}
+            </View>
+          }
+          title={
+            <Text style={{ color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }}>
+              Sync from Original
+            </Text>
+          }
+          subtitle={
+            <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }}>
+              {isSyncing
+                ? 'Syncing upstream changes...'
+                : upstreamSyncStatus === 'up-to-date'
+                  ? 'You are already up to date with the original app'
+                  : 'Pull the latest upstream changes into this remix'}
+            </Text>
+          }
+          right={<RefreshCw size={16} color={theme.colors.primary} />}
+        />
+      ) : null}
+
       {onTestMr && incomingMergeRequests.length > 0 ? (
         <ReviewMergeRequestCarousel
           mergeRequests={incomingMergeRequests}

package/src/studio/ui/preview-panel/usePreviewPanelData.ts

@@ -115,6 +115,13 @@ export function usePreviewPanelData(params: {
     return false;
   }, [app, isOwner, outgoingMergeRequests]);
 
+  const canSyncUpstream = React.useMemo(() => {
+    if (!isOwner) return false;
+    if (!app) return false;
+    if (!app.forkedFromAppId) return false;
+    return app.status === 'ready';
+  }, [app, isOwner]);
+
   const showProcessing = app ? app.status !== 'ready' : false;
 
   return {
@@ -126,6 +133,7 @@ export function usePreviewPanelData(params: {
     stats,
     showProcessing,
     canSubmitMergeRequest,
+    canSyncUpstream,
   };
 }