@comergehq/studio 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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/core/services/supabase/realtimeManager.ts

@@ -0,0 +1,112 @@
+import { log } from '../../logger';
+import { getSupabaseClient } from './client';
+
+type SupabaseClient = ReturnType<typeof getSupabaseClient>;
+type RealtimeChannel = ReturnType<SupabaseClient['channel']>;
+type ChannelConfigurer = (channel: RealtimeChannel) => void;
+
+type ChannelEntry = {
+  key: string;
+  channel: RealtimeChannel | null;
+  subscribers: Map<number, ChannelConfigurer>;
+  backoffMs: number;
+  timer: ReturnType<typeof setTimeout> | null;
+};
+
+const INITIAL_BACKOFF_MS = 1000;
+const MAX_BACKOFF_MS = 30000;
+
+const realtimeLog = log.extend('realtime');
+const entries = new Map<string, ChannelEntry>();
+let subscriberIdCounter = 0;
+
+function clearTimer(entry: ChannelEntry) {
+  if (!entry.timer) return;
+  clearTimeout(entry.timer);
+  entry.timer = null;
+}
+
+function buildChannel(entry: ChannelEntry): RealtimeChannel {
+  const supabase = getSupabaseClient();
+  const channel = supabase.channel(entry.key);
+  entry.subscribers.forEach((configure) => {
+    configure(channel);
+  });
+  return channel;
+}
+
+function scheduleResubscribe(entry: ChannelEntry, reason: string) {
+  if (entry.timer) return;
+  const delay = entry.backoffMs;
+  entry.backoffMs = Math.min(entry.backoffMs * 2, MAX_BACKOFF_MS);
+  realtimeLog.warn(`[realtime] channel ${entry.key} ${reason}; resubscribe in ${delay}ms`);
+  entry.timer = setTimeout(() => {
+    entry.timer = null;
+    if (!entries.has(entry.key)) return;
+    if (entry.subscribers.size === 0) return;
+    subscribeChannel(entry);
+  }, delay);
+}
+
+function handleStatus(entry: ChannelEntry, status: string) {
+  if (status === 'SUBSCRIBED') {
+    entry.backoffMs = INITIAL_BACKOFF_MS;
+    clearTimer(entry);
+    return;
+  }
+  if (status === 'CLOSED' || status === 'TIMED_OUT' || status === 'CHANNEL_ERROR') {
+    scheduleResubscribe(entry, status);
+  }
+}
+
+function subscribeChannel(entry: ChannelEntry) {
+  try {
+    const supabase = getSupabaseClient();
+    if (entry.channel) supabase.removeChannel(entry.channel);
+    const channel = buildChannel(entry);
+    entry.channel = channel;
+    channel.subscribe((status) => handleStatus(entry, status));
+  } catch (error) {
+    realtimeLog.warn('[realtime] subscribe failed', error);
+    scheduleResubscribe(entry, 'SUBSCRIBE_FAILED');
+  }
+}
+
+export function subscribeManagedChannel(key: string, configure: ChannelConfigurer): () => void {
+  let entry = entries.get(key);
+  if (!entry) {
+    entry = {
+      key,
+      channel: null,
+      subscribers: new Map(),
+      backoffMs: INITIAL_BACKOFF_MS,
+      timer: null,
+    };
+    entries.set(key, entry);
+  }
+
+  const subscriberId = ++subscriberIdCounter;
+  entry.subscribers.set(subscriberId, configure);
+
+  if (!entry.channel) {
+    subscribeChannel(entry);
+  } else {
+    configure(entry.channel);
+  }
+
+  return () => {
+    const current = entries.get(key);
+    if (!current) return;
+    current.subscribers.delete(subscriberId);
+    if (current.subscribers.size === 0) {
+      clearTimer(current);
+      try {
+        if (current.channel) getSupabaseClient().removeChannel(current.channel);
+      } finally {
+        entries.delete(key);
+      }
+      return;
+    }
+    subscribeChannel(current);
+  };
+}

package/src/data/apps/edit-queue/repository.ts

@@ -2,7 +2,7 @@ import type { EditQueueRemoteDataSource } from './remote';
 import { editQueueRemoteDataSource } from './remote';
 import type { EditQueueItem, EditQueueListResponse, UpdateEditQueueItemRequest } from './types';
 import { BaseRepository } from '../../base-repository';
-import { getSupabaseClient } from '../../../core/services/supabase';
+import { subscribeManagedChannel } from '../../../core/services/supabase/realtimeManager';
 import type { AttachmentMeta } from '../../attachment/types';
 
 type DbAppJobQueueRow = {
@@ -89,45 +89,40 @@ class EditQueueRepositoryImpl extends BaseRepository implements EditQueueReposit
       onDelete?: (item: EditQueueItem) => void;
     }
   ): () => void {
-    const supabase = getSupabaseClient();
-    const channel = supabase
-      .channel(`edit-queue:app:${appId}`)
-      .on(
-        'postgres_changes',
-        { event: 'INSERT', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
-        (payload) => {
-          const row = payload.new as DbAppJobQueueRow;
-          if (row.kind !== 'edit') return;
-          const item = mapQueueItem(row);
-          if (!ACTIVE_STATUSES.includes(item.status)) return;
-          handlers.onInsert?.(item);
-        }
-      )
-      .on(
-        'postgres_changes',
-        { event: 'UPDATE', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
-        (payload) => {
-          const row = payload.new as DbAppJobQueueRow;
-          if (row.kind !== 'edit') return;
-          const item = mapQueueItem(row);
-          if (ACTIVE_STATUSES.includes(item.status)) handlers.onUpdate?.(item);
-          else handlers.onDelete?.(item);
-        }
-      )
-      .on(
-        'postgres_changes',
-        { event: 'DELETE', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
-        (payload) => {
-          const row = payload.old as DbAppJobQueueRow;
-          if (row.kind !== 'edit') return;
-          handlers.onDelete?.(mapQueueItem(row));
-        }
-      )
-      .subscribe();
-
-    return () => {
-      supabase.removeChannel(channel);
-    };
+    return subscribeManagedChannel(`edit-queue:app:${appId}`, (channel) => {
+      channel
+        .on(
+          'postgres_changes',
+          { event: 'INSERT', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
+          (payload) => {
+            const row = payload.new as DbAppJobQueueRow;
+            if (row.kind !== 'edit') return;
+            const item = mapQueueItem(row);
+            if (!ACTIVE_STATUSES.includes(item.status)) return;
+            handlers.onInsert?.(item);
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'UPDATE', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
+          (payload) => {
+            const row = payload.new as DbAppJobQueueRow;
+            if (row.kind !== 'edit') return;
+            const item = mapQueueItem(row);
+            if (ACTIVE_STATUSES.includes(item.status)) handlers.onUpdate?.(item);
+            else handlers.onDelete?.(item);
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'DELETE', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
+          (payload) => {
+            const row = payload.old as DbAppJobQueueRow;
+            if (row.kind !== 'edit') return;
+            handlers.onDelete?.(mapQueueItem(row));
+          }
+        );
+    });
   }
 }
 

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,11 +11,12 @@ import type {
   ListLikedAppsParams,
   ListPublicAppsParams,
   LikedAppsList,
+  SyncUpstreamResponse,
 } from './types';
 import { appsRemoteDataSource } from './remote';
 import type { AppsRemoteDataSource } from './remote';
 import { BaseRepository } from '../../data/base-repository';
-import { getSupabaseClient } from '../../core/services/supabase';
+import { subscribeManagedChannel } from '../../core/services/supabase/realtimeManager';
 
 type DbAppRow = {
   id: string;
@@ -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);
@@ -145,38 +152,33 @@ class AppsRepositoryImpl extends BaseRepository implements AppsRepository {
   }
 
   private subscribeToAppChannel(channelKey: string, filter: string, handlers: AppSubscriptionHandlers): () => void {
-    const supabase = getSupabaseClient();
-    const channel = supabase
-      .channel(channelKey)
-      .on(
-        'postgres_changes',
-        { event: 'INSERT', schema: 'public', table: 'app', filter },
-        (payload) => {
-          console.log('[subscribeToAppChannel] onInsert', payload);
-          handlers.onInsert?.(mapDbAppRow(payload.new as DbAppRow));
-        }
-      )
-      .on(
-        'postgres_changes',
-        { event: 'UPDATE', schema: 'public', table: 'app', filter },
-        (payload) => {
-          console.log('[subscribeToAppChannel] onUpdate', payload);
-          handlers.onUpdate?.(mapDbAppRow(payload.new as DbAppRow));
-        }
-      )
-      .on(
-        'postgres_changes',
-        { event: 'DELETE', schema: 'public', table: 'app', filter },
-        (payload) => {
-          console.log('[subscribeToAppChannel] onDelete', payload);
-          handlers.onDelete?.(mapDbAppRow(payload.old as DbAppRow));
-        }
-      )
-      .subscribe();
-
-    return () => {
-      supabase.removeChannel(channel);
-    };
+    return subscribeManagedChannel(channelKey, (channel) => {
+      channel
+        .on(
+          'postgres_changes',
+          { event: 'INSERT', schema: 'public', table: 'app', filter },
+          (payload) => {
+            console.log('[subscribeToAppChannel] onInsert', payload);
+            handlers.onInsert?.(mapDbAppRow(payload.new as DbAppRow));
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'UPDATE', schema: 'public', table: 'app', filter },
+          (payload) => {
+            console.log('[subscribeToAppChannel] onUpdate', payload);
+            handlers.onUpdate?.(mapDbAppRow(payload.new as DbAppRow));
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'DELETE', schema: 'public', table: 'app', filter },
+          (payload) => {
+            console.log('[subscribeToAppChannel] onDelete', payload);
+            handlers.onDelete?.(mapDbAppRow(payload.old as DbAppRow));
+          }
+        );
+    });
   }
 }
 

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/data/messages/repository.ts

@@ -2,7 +2,7 @@ import type { MessagesRemoteDataSource } from './remote';
 import { messagesRemoteDataSource } from './remote';
 import type { Message } from './types';
 import { BaseRepository } from '../../data/base-repository';
-import { getSupabaseClient } from '../../core/services/supabase';
+import { subscribeManagedChannel } from '../../core/services/supabase/realtimeManager';
 
 type DbMessageRow = {
   id: string;
@@ -64,38 +64,33 @@ class MessagesRepositoryImpl extends BaseRepository implements MessagesRepositor
       onDelete?: (m: Message) => void;
     }
   ): () => void {
-    const supabase = getSupabaseClient();
-    const channel = supabase
-      .channel(`messages:thread:${threadId}`)
-      .on(
-        'postgres_changes',
-        { event: 'INSERT', schema: 'public', table: 'message', filter: `thread_id=eq.${threadId}` },
-        (payload) => {
-          const row = payload.new as DbMessageRow;
-          handlers.onInsert?.(mapDbRowToMessage(row));
-        }
-      )
-      .on(
-        'postgres_changes',
-        { event: 'UPDATE', schema: 'public', table: 'message', filter: `thread_id=eq.${threadId}` },
-        (payload) => {
-          const row = payload.new as DbMessageRow;
-          handlers.onUpdate?.(mapDbRowToMessage(row));
-        }
-      )
-      .on(
-        'postgres_changes',
-        { event: 'DELETE', schema: 'public', table: 'message', filter: `thread_id=eq.${threadId}` },
-        (payload) => {
-          const row = payload.old as DbMessageRow;
-          handlers.onDelete?.(mapDbRowToMessage(row));
-        }
-      )
-      .subscribe();
-
-    return () => {
-      supabase.removeChannel(channel);
-    };
+    return subscribeManagedChannel(`messages:thread:${threadId}`, (channel) => {
+      channel
+        .on(
+          'postgres_changes',
+          { event: 'INSERT', schema: 'public', table: 'message', filter: `thread_id=eq.${threadId}` },
+          (payload) => {
+            const row = payload.new as DbMessageRow;
+            handlers.onInsert?.(mapDbRowToMessage(row));
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'UPDATE', schema: 'public', table: 'message', filter: `thread_id=eq.${threadId}` },
+          (payload) => {
+            const row = payload.new as DbMessageRow;
+            handlers.onUpdate?.(mapDbRowToMessage(row));
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'DELETE', schema: 'public', table: 'message', filter: `thread_id=eq.${threadId}` },
+          (payload) => {
+            const row = payload.old as DbMessageRow;
+            handlers.onDelete?.(mapDbRowToMessage(row));
+          }
+        );
+    });
   }
 }
 

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,
@@ -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}