fix(dashboard): settle remote sync button state

Author: christso

apps/dashboard/src/lib/api.ts

@@ -12,6 +12,7 @@ import {
   useQuery,
 } from '@tanstack/react-query';
 
+import { shouldPollRemoteStatus } from './project-sync-status';
 import type {
   CategoriesResponse,
   CombineDuplicateConflict,
@@ -232,6 +233,7 @@ export function remoteStatusOptions(projectId?: string) {
     queryKey: ['remote-status', projectId ?? ''],
     queryFn: () => fetchJson<RemoteStatusResponse>(url),
     staleTime: 5_000,
+    refetchInterval: (query) => (shouldPollRemoteStatus(query.state.data) ? 1_000 : false),
   });
 }
 

apps/dashboard/src/lib/project-sync-status.test.ts

@@ -6,6 +6,7 @@ import {
   buildRemoteStatusItems,
   formatRemoteRunCount,
   getProjectSyncView,
+  shouldPollRemoteStatus,
 } from './project-sync-status';
 
 describe('getProjectSyncView', () => {
@@ -50,6 +51,25 @@ describe('getProjectSyncView', () => {
     });
   });
 
+  it('returns to a clean sync action when a status refetch settles an overlapping sync', () => {
+    const view = getProjectSyncView(
+      {
+        configured: true,
+        available: true,
+        sync_status: 'clean',
+        run_count: 1,
+        dirty_paths: [],
+      },
+      false,
+    );
+
+    expect(view).toMatchObject({
+      state: 'clean',
+      actionLabel: 'Sync Project',
+      canSync: true,
+    });
+  });
+
   it('treats diverged history as a conflict-safe blocked state', () => {
     expect(
       getProjectSyncView({
@@ -154,3 +174,15 @@ describe('buildRemoteStatusItems', () => {
     expect(items.some((item) => item.startsWith('Last synced '))).toBe(true);
   });
 });
+
+describe('shouldPollRemoteStatus', () => {
+  it('polls only while the server reports an overlapping sync in progress', () => {
+    expect(
+      shouldPollRemoteStatus({ configured: true, available: true, sync_status: 'syncing' }),
+    ).toBe(true);
+    expect(
+      shouldPollRemoteStatus({ configured: true, available: true, sync_status: 'clean' }),
+    ).toBe(false);
+    expect(shouldPollRemoteStatus(undefined)).toBe(false);
+  });
+});

apps/dashboard/src/lib/project-sync-status.ts

@@ -63,6 +63,10 @@ export function buildRemoteStatusItems(
   ].filter((item): item is string => item !== undefined);
 }
 
+export function shouldPollRemoteStatus(status: RemoteStatusResponse | undefined): boolean {
+  return status?.sync_status === 'syncing';
+}
+
 export function getProjectSyncView(
   status: RemoteStatusResponse | undefined,
   syncInFlight = false,

apps/dashboard/src/routes/index.tsx

@@ -19,6 +19,7 @@ import { type RunSourceFilter, RunSourceToolbar } from '~/components/RunSourceTo
 import { TargetsTab } from '~/components/TargetsTab';
 import {
   addProjectApi,
+  remoteStatusOptions,
   syncRemoteResultsApi,
   useCompare,
   useEvalRuns,
@@ -248,17 +249,20 @@ function SingleProjectHome() {
     setSyncFeedback(null);
     try {
       const result = await syncRemoteResultsApi();
+      queryClient.setQueryData(remoteStatusOptions().queryKey, result);
       setSyncFeedback(buildProjectSyncFeedback(result));
-      await Promise.all([
+      void Promise.all([
         queryClient.invalidateQueries({ queryKey: ['runs'] }),
         queryClient.invalidateQueries({ queryKey: ['experiments'] }),
         queryClient.invalidateQueries({ queryKey: ['compare'] }),
         queryClient.invalidateQueries({ queryKey: ['targets'] }),
         queryClient.invalidateQueries({ queryKey: ['remote-status', ''] }),
-      ]);
+      ]).catch(() => undefined);
     } catch (err) {
       setSyncFeedback(buildProjectSyncErrorFeedback(err, remoteStatus));
-      await queryClient.invalidateQueries({ queryKey: ['remote-status', ''] });
+      void queryClient
+        .invalidateQueries({ queryKey: ['remote-status', ''] })
+        .catch(() => undefined);
     } finally {
       setSyncInFlight(false);
     }

apps/dashboard/src/routes/projects/$projectId.tsx

@@ -17,6 +17,7 @@ import { type RunSourceFilter, RunSourceToolbar } from '~/components/RunSourceTo
 import { TargetsTab } from '~/components/TargetsTab';
 import {
   projectCompareOptions,
+  remoteStatusOptions,
   syncRemoteResultsApi,
   useEvalRuns,
   useInfiniteProjectRunList,
@@ -150,18 +151,21 @@ function ProjectRunsTab({
     setSyncFeedback(null);
     try {
       const result = await syncRemoteResultsApi(projectId);
+      queryClient.setQueryData(remoteStatusOptions(projectId).queryKey, result);
       const feedback = buildProjectSyncFeedback(result);
       setSyncFeedback(feedback);
-      await Promise.all([
+      void Promise.all([
         queryClient.invalidateQueries({ queryKey: ['projects', projectId, 'runs'] }),
         queryClient.invalidateQueries({ queryKey: ['projects', projectId, 'experiments'] }),
         queryClient.invalidateQueries({ queryKey: ['projects', projectId, 'compare'] }),
         queryClient.invalidateQueries({ queryKey: ['projects', projectId, 'targets'] }),
         queryClient.invalidateQueries({ queryKey: ['remote-status', projectId] }),
-      ]);
+      ]).catch(() => undefined);
     } catch (err) {
       setSyncFeedback(buildProjectSyncErrorFeedback(err, remoteStatus));
-      await queryClient.invalidateQueries({ queryKey: ['remote-status', projectId] });
+      void queryClient
+        .invalidateQueries({ queryKey: ['remote-status', projectId] })
+        .catch(() => undefined);
     } finally {
       setSyncInFlight(false);
     }