refactor(OpenAPISyncTab): streamline component logic and enhance user feedback (#7483)

- Removed unused props and improved error handling in OpenAPISyncTab components.
- Updated messaging in CollectionStatusSection and OverviewSection for clarity.
- Enhanced the SpecDiffModal to provide better visual feedback on changes.
- Refactored sync flow logic to ensure accurate endpoint categorization and improved performance.
- Added new utility functions for better handling of spec changes and endpoint comparisons.

Author: abhishek-bruno

packages/bruno-app/src/components/OpenAPISyncTab/CollectionStatusSection/index.js

@@ -71,6 +71,8 @@ const CollectionStatusSection = ({
         variant: 'muted',
         message: 'Collection has changes since last sync',
         badges: { modifiedCount, missingCount, localOnlyCount },
+        version,
+        lastSyncDate,
         actions: ['revert-all']
       };
     }
@@ -244,7 +246,7 @@ const CollectionStatusSection = ({
         <div className="sync-review-empty-state mt-5">
           <IconCheck size={40} className="empty-state-icon" />
           <h4>No changes in collection</h4>
-          <p>The collection matches the last synced spec. Nothing to review.</p>
+          <p>The collection endpoints match the last synced spec. Nothing to review.</p>
         </div>
       )}
       {/* Action confirmation modal */}

packages/bruno-app/src/components/OpenAPISyncTab/OverviewSection/index.js

@@ -6,7 +6,6 @@ import { countEndpoints } from '../utils';
 import moment from 'moment';
 import { IconCheck } from '@tabler/icons';
 import Button from 'ui/Button';
-import StatusBadge from 'ui/StatusBadge';
 import Help from 'components/Help';
 
 const capitalize = (str) => str ? str.charAt(0).toUpperCase() + str.slice(1) : str;
@@ -40,14 +39,16 @@ const SUMMARY_CARDS = [
   }
 ];
 
-const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, remoteDrift, onTabSelect, error, fileNotFound, onOpenSettings }) => {
+const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, remoteDrift, onTabSelect, error, onOpenSettings }) => {
   const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];
 
   const reduxError = useSelector((state) => state.openapiSync?.collectionUpdates?.[collection.uid]?.error);
   const specMeta = useSelector(selectStoredSpecMeta(collection.uid));
   const activeError = error || reduxError;
 
   const version = storedSpec?.info?.version ?? specMeta?.version;
+  const newVersion = specDrift?.newVersion;
+  const hasVersionChange = version && newVersion && version !== newVersion;
   const endpointCount = countEndpoints(storedSpec) ?? specMeta?.endpointCount ?? null;
   const lastSyncDate = openApiSyncConfig?.lastSyncDate;
   const groupBy = openApiSyncConfig?.groupBy || 'tags';
@@ -89,7 +90,7 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
   };
 
   const details = [
-    { label: 'Spec Version', value: version ? `v${version}` : '–' },
+    { label: 'Spec Version', value: hasVersionChange ? `v${version} → v${newVersion}` : version ? `v${version}` : '–' },
     { label: 'Endpoints in Spec', value: endpointCount != null ? endpointCount : '–' },
     { label: 'Last Synced At', value: lastSyncDate ? moment(lastSyncDate).fromNow() : '–', tooltip: lastSyncDate ? moment(lastSyncDate).format('MMMM D, YYYY [at] h:mm A') : undefined },
     { label: 'Folder Grouping', value: capitalize(groupBy) },
@@ -100,6 +101,10 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
   const hasSpecUpdates = specUpdatesPending > 0;
 
   const bannerState = useMemo(() => {
+    const versionInfo = (specDrift?.storedVersion && specDrift?.newVersion && specDrift.storedVersion !== specDrift.newVersion)
+      ? ` (v${specDrift.storedVersion} → v${specDrift.newVersion})`
+      : '';
+
     if (activeError) {
       return {
         variant: 'danger',
@@ -128,15 +133,15 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
     if (hasSpecUpdates && hasCollectionChanges) {
       return {
         variant: 'warning',
-        title: 'The API spec has new updates and the collection has changes',
+        title: `The API spec has new updates${versionInfo} and the collection has changes`,
         subtitle: 'New or changed requests are available. Some collection changes may be overwritten.',
         buttons: ['sync', 'changes']
       };
     }
     if (hasSpecUpdates) {
       return {
         variant: 'warning',
-        title: 'The API spec has new updates',
+        title: `The API spec has new updates${versionInfo}`,
         subtitle: 'New or changed requests are available.',
         buttons: ['sync']
       };
@@ -156,7 +161,7 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
     //   buttons: []
     // };
     return null;
-  }, [activeError, fileNotFound, hasDriftData, hasSpecUpdates, hasCollectionChanges, specDrift?.storedSpecMissing, lastSyncDate]);
+  }, [activeError, hasDriftData, hasSpecUpdates, hasCollectionChanges, specDrift?.storedSpecMissing, specDrift?.storedVersion, specDrift?.newVersion, lastSyncDate]);
 
   return (
     <div className="overview-section">
@@ -168,12 +173,6 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
                 ? <IconCheck size={16} className="status-check-icon" />
                 : <div className={`status-dot ${bannerState.variant}`} />}
               <span className="banner-title">{bannerState.title}</span>
-              {bannerState.showBadge && (
-                <StatusBadge status="info" radius="full">{specUpdatesPending} {specUpdatesPending === 1 ? 'spec update' : 'spec updates'}</StatusBadge>
-              )}
-              {bannerState.showChangesBadge && (
-                <StatusBadge status="warning" radius="full">{changedInCollection} {changedInCollection === 1 ? 'collection change' : 'collection changes'}</StatusBadge>
-              )}
             </div>
             {bannerState.subtitle && (
               <p className="banner-subtitle">{bannerState.subtitle}</p>
@@ -201,6 +200,11 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
                   Restore Spec File
                 </Button>
               )}
+              {bannerState.buttons.includes('spec-details') && (
+                <Button variant="outline" size="sm" onClick={() => onTabSelect('spec-updates')}>
+                  View Details
+                </Button>
+              )}
               {bannerState.buttons.includes('open-settings') && (
                 <Button variant="outline" size="sm" onClick={onOpenSettings}>
                   Update connection settings

packages/bruno-app/src/components/OpenAPISyncTab/SpecDiffModal/index.js

@@ -47,8 +47,8 @@ const SpecDiffModal = ({ specDrift, onClose }) => {
     >
       <div className="spec-diff-modal">
         <div className="spec-diff-badges">
+          {modifiedCount > 0 && <StatusBadge status="warning">Updated: {modifiedCount}</StatusBadge>}
           {addedCount > 0 && <StatusBadge status="success">Added: {addedCount}</StatusBadge>}
-          {modifiedCount > 0 && <StatusBadge status="info">Updated: {modifiedCount}</StatusBadge>}
           {removedCount > 0 && <StatusBadge status="danger">Removed: {removedCount}</StatusBadge>}
           {versionLabel && <StatusBadge>{versionLabel}</StatusBadge>}
         </div>

packages/bruno-app/src/components/OpenAPISyncTab/SpecStatusSection/index.js

@@ -2,7 +2,8 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import {
   IconCheck,
-  IconRefresh
+  IconRefresh,
+  IconAlertTriangle
 } from '@tabler/icons';
 import Button from 'ui/Button';
 import StatusBadge from 'ui/StatusBadge';
@@ -35,28 +36,19 @@ const SpecStatusSection = ({
       return { variant: 'danger', message: `Source file not found at ${sourceUrl}`, actions: ['open-settings'] };
     }
     if (error || specDrift?.isValid === false) {
-      return { variant: 'danger', message: error || specDrift?.error || 'Invalid OpenAPI specification', actions: [] };
+      return { variant: 'danger', message: error || specDrift?.error || 'Invalid OpenAPI specification', actions: ['open-settings'] };
     }
     if (!specDrift) {
       return null;
-      // TODO: re-enable success banner
-      // if (!lastSyncedAt) return null;
-      // return {
-      //   variant: 'success', message: 'Spec is up to date', actions: [],
-      //   version: storedSpec?.info?.version,
-      //   lastChecked: moment(lastCheckedAt || lastSyncedAt).fromNow()
-      // };
     }
     if (specDrift.storedSpecMissing) {
       if (!lastSyncedAt) {
         return { variant: 'warning', message: 'Initial sync required — your collection differs from the spec', actions: [] };
       }
-      if (specDrift.hasRemoteChanges) {
-        return { variant: 'warning', message: 'Last synced spec not found — Restore the latest spec from the source to track future changes.', actions: [] };
-      }
       return { variant: 'warning', message: 'Last synced spec not found — Restore the latest spec from the source to track future changes.', actions: [] };
     }
-    if (specDrift.hasRemoteChanges) {
+    const hasEndpointUpdates = (specDrift.added?.length || 0) + (specDrift.modified?.length || 0) + (specDrift.removed?.length || 0) > 0;
+    if (hasEndpointUpdates) {
       const versionInfo = (specDrift.storedVersion && specDrift.newVersion && specDrift.storedVersion !== specDrift.newVersion)
         ? ` (v${specDrift.storedVersion} → v${specDrift.newVersion})`
         : '';
@@ -71,7 +63,7 @@ const SpecStatusSection = ({
     //   lastChecked: lastCheckedAt ? moment(lastCheckedAt).fromNow() : 'just now'
     // };
     return null;
-  }, [isLoading, fileNotFound, error, sourceUrl, specDrift, lastSyncedAt, storedSpec, lastCheckedAt]);
+  }, [fileNotFound, error, sourceUrl, specDrift, lastSyncedAt, storedSpec, lastCheckedAt]);
   return (
     <>
       {bannerState && (
@@ -93,8 +85,8 @@ const SpecStatusSection = ({
               </span>
               {bannerState.changes && (
                 <span className="banner-details">
+                  {bannerState.changes.modified > 0 && <StatusBadge key="modified" status="warning" radius="full">{bannerState.changes.modified} {bannerState.changes.modified > 1 ? 'endpoints' : 'endpoint'} updated</StatusBadge>}
                   {bannerState.changes.added > 0 && <StatusBadge key="added" status="success" radius="full">{bannerState.changes.added} {bannerState.changes.added > 1 ? 'endpoints' : 'endpoint'} added</StatusBadge>}
-                  {bannerState.changes.modified > 0 && <StatusBadge key="modified" status="info" radius="full">{bannerState.changes.modified} {bannerState.changes.modified > 1 ? 'endpoints' : 'endpoint'} updated</StatusBadge>}
                   {bannerState.changes.removed > 0 && <StatusBadge key="removed" status="danger" radius="full">{bannerState.changes.removed} {bannerState.changes.removed > 1 ? 'endpoints' : 'endpoint'} removed</StatusBadge>}
                 </span>
               )}
@@ -113,7 +105,13 @@ const SpecStatusSection = ({
         </div>
       )}
 
-      {specDrift?.storedSpecMissing && openApiSyncConfig?.lastSyncDate ? (
+      {(error || fileNotFound || specDrift?.isValid === false) ? (
+        <div className="sync-review-empty-state mt-5">
+          <IconAlertTriangle size={40} className="empty-state-icon" />
+          <h4>Unable to check for updates</h4>
+          <p>Fix the connection issue above and check again.</p>
+        </div>
+      ) : specDrift?.storedSpecMissing && openApiSyncConfig?.lastSyncDate ? (
         <div className="sync-review-empty-state mt-5">
           <IconRefresh size={40} className="empty-state-icon" />
           <h4>Last Synced Spec not found in storage</h4>

packages/bruno-app/src/components/OpenAPISyncTab/SyncReviewPage/index.js

@@ -28,8 +28,18 @@ import { setReviewDecision, setReviewDecisions, selectTabUiState } from 'provide
  *  - specRemovedEndpoints: removed from spec, still in collection
  */
 const categorizeEndpoints = (remoteDrift, specDrift, collectionDrift) => {
-  const specAddedEndpoints = remoteDrift.missing || [];
-  const specRemovedEndpoints = remoteDrift.localOnly || [];
+  // Only show endpoints as "New in Spec" if they were actually added to the spec
+  // (i.e., they appear in specDrift.added). Endpoints the user deleted locally that
+  // still exist in both stored and remote spec should not appear here — they belong
+  // in "Collection Changes" only.
+  const specAddedIds = new Set((specDrift?.added || []).map((ep) => ep.id));
+  const specAddedEndpoints = (remoteDrift.missing || []).filter((ep) => specAddedIds.has(ep.id));
+
+  // Only show endpoints as "Removed from Spec" if they were actually in the stored spec
+  // (i.e., they appear in specDrift.removed). Locally-added endpoints that were never in
+  // the spec should not appear here — they belong in "Collection Changes" only.
+  const specRemovedIds = new Set((specDrift?.removed || []).map((ep) => ep.id));
+  const specRemovedEndpoints = (remoteDrift.localOnly || []).filter((ep) => specRemovedIds.has(ep.id));
 
   // Build lookup sets to determine who changed each modified endpoint
   const specModifiedIds = new Set((specDrift?.modified || []).map((ep) => ep.id));
@@ -154,10 +164,7 @@ const SyncReviewPage = ({
 
     // Accepted — changes that will be applied
     addGroup('New endpoints to add', 'add', specAddedEndpoints.filter(isAccepted));
-    addGroup('Endpoints to update', 'update', [
-      ...specUpdatedEndpoints.filter(isAccepted),
-      ...localUpdatedEndpoints.filter(isAccepted)
-    ]);
+    addGroup('Endpoints to update', 'update', specUpdatedEndpoints.filter(isAccepted));
     addGroup('Endpoints to delete', 'remove', specRemovedEndpoints.filter(isAccepted));
 
     // Skipped — changes that will be preserved as-is
@@ -167,7 +174,7 @@ const SyncReviewPage = ({
     addGroup('Keeping current version (skipped updates)', 'keep', specUpdatedEndpoints.filter((ep) => !ep.conflict && isSkipped(ep)));
 
     return groups;
-  }, [specAddedEndpoints, specUpdatedEndpoints, localUpdatedEndpoints, specRemovedEndpoints, decisions]);
+  }, [specAddedEndpoints, specUpdatedEndpoints, specRemovedEndpoints, decisions]);
 
   const handleConfirmApply = () => {
     setShowConfirmation(false);
@@ -187,7 +194,6 @@ const SyncReviewPage = ({
 
     onApplySync({
       endpointDecisions: decisions,
-      removedIds: [],
       localOnlyIds,
       // Pass filtered categorized endpoints for performSync to construct the right backend diff
       newToCollection: filteredAddedEndpoints,

packages/bruno-app/src/components/OpenAPISyncTab/hooks/useOpenAPISync.js

@@ -90,6 +90,7 @@ const useOpenAPISync = (collection) => {
 
   const prevItemCountRef = useRef(httpItemCount);
   const isDriftLoadingRef = useRef(false);
+  const specDriftRef = useRef(specDrift);
 
   const loadCollectionDrift = async ({ clear = false } = {}) => {
     if (isDriftLoadingRef.current && !clear) return;
@@ -328,8 +329,31 @@ const useOpenAPISync = (collection) => {
     }
   };
 
-  // Reload drift — passed to useEndpointActions so it can refresh after actions
-  const reloadDrift = () => loadCollectionDrift({ clear: true });
+  // Keep ref in sync so reloadDrift always reads the latest specDrift
+  specDriftRef.current = specDrift;
+
+  // Reload both drifts — passed to useEndpointActions so it can refresh after actions.
+  // Uses specDriftRef to avoid stale closure over specDrift state.
+  const reloadDrift = async () => {
+    await loadCollectionDrift({ clear: true });
+    // Refresh remoteDrift if we have a remote spec cached from the last check
+    const currentSpecDrift = specDriftRef.current;
+    if (currentSpecDrift?.newSpec) {
+      try {
+        const { ipcRenderer } = window;
+        const remoteComparison = await ipcRenderer.invoke('renderer:get-collection-drift', {
+          collectionPath: collection.pathname,
+          brunoConfig: collection.brunoConfig,
+          compareSpec: currentSpecDrift.newSpec
+        });
+        if (!remoteComparison.error) {
+          setRemoteDrift(remoteComparison);
+        }
+      } catch (err) {
+        console.error('Error reloading remote drift:', err);
+      }
+    }
+  };
 
   // Save connection settings from the modal
   const handleSaveSettings = async ({ sourceUrl: newUrl, autoCheck, autoCheckInterval }) => {

packages/bruno-app/src/components/OpenAPISyncTab/hooks/useSyncFlow.js

@@ -14,13 +14,13 @@ const useSyncFlow = ({
   const [showConfirmModal, setShowConfirmModal] = useState(false);
   const [isSyncing, setIsSyncing] = useState(false);
 
-  const performSync = async (selections = { removedIds: [], localOnlyIds: [], endpointDecisions: {} }, mode = 'sync') => {
+  const performSync = async (selections = { localOnlyIds: [], endpointDecisions: {} }, mode = 'sync') => {
     setShowConfirmModal(false);
     setIsSyncing(true);
     setError(null);
 
     const {
-      removedIds = [], localOnlyIds = [], endpointDecisions: decisions = {},
+      localOnlyIds = [], endpointDecisions: decisions = {},
       newToCollection, specUpdates, resolvedConflicts, localChangesToReset
     } = selections;
 
@@ -49,9 +49,7 @@ const useSyncFlow = ({
         // Called from "Sync Now" (skip review) or ConfirmSyncModal — use specDrift directly
         filteredDiff = {
           ...specDrift,
-          removed: removedIds.length > 0
-            ? (specDrift?.removed || []).filter((ep) => removedIds.includes(ep.id))
-            : []
+          removed: [] // Removals handled via localOnlyToRemove
         };
 
         localOnlyToRemove = localOnlyIds.length > 0
@@ -69,7 +67,7 @@ const useSyncFlow = ({
         collectionPath: collection.pathname,
         sourceUrl: sourceUrl.trim(),
         addNewRequests: mode !== 'spec-only',
-        removeDeletedRequests: removedIds.length > 0 || localOnlyIds.length > 0,
+        removeDeletedRequests: localOnlyIds.length > 0,
         diff: filteredDiff,
         localOnlyToRemove,
         driftedToReset,
@@ -113,10 +111,21 @@ const useSyncFlow = ({
     setPendingSyncMode(null);
   };
 
+  // Only treat endpoints as spec changes if they actually changed in the spec
+  // (not locally-added/deleted endpoints that were never in or removed from the spec)
+  const specAddedIds = useMemo(() => {
+    return new Set((specDrift?.added || []).map((ep) => ep.id));
+  }, [specDrift]);
+
+  const specRemovedIds = useMemo(() => {
+    return new Set((specDrift?.removed || []).map((ep) => ep.id));
+  }, [specDrift]);
+
   const handleConfirmModalSync = () => {
-    const localOnlyIds = (remoteDrift?.localOnly || []).map((ep) => ep.id);
+    const localOnlyIds = (remoteDrift?.localOnly || [])
+      .filter((ep) => specRemovedIds.has(ep.id))
+      .map((ep) => ep.id);
     performSync({
-      removedIds: [],
       localOnlyIds,
       endpointDecisions: {}
     }, pendingSyncMode || 'sync');
@@ -125,17 +134,19 @@ const useSyncFlow = ({
   const confirmGroups = useMemo(() => {
     if (!remoteDrift) return [];
     const groups = [];
-    if (remoteDrift.missing?.length > 0) {
-      groups.push({ label: 'New endpoints to add', type: 'add', endpoints: remoteDrift.missing });
+    const actuallyAdded = (remoteDrift.missing || []).filter((ep) => specAddedIds.has(ep.id));
+    if (actuallyAdded.length > 0) {
+      groups.push({ label: 'New endpoints to add', type: 'add', endpoints: actuallyAdded });
     }
     if (remoteDrift.modified?.length > 0) {
       groups.push({ label: 'Endpoints to update', type: 'update', endpoints: remoteDrift.modified });
     }
-    if (remoteDrift.localOnly?.length > 0) {
-      groups.push({ label: 'Endpoints to delete', type: 'remove', endpoints: remoteDrift.localOnly });
+    const actuallyRemoved = (remoteDrift.localOnly || []).filter((ep) => specRemovedIds.has(ep.id));
+    if (actuallyRemoved.length > 0) {
+      groups.push({ label: 'Endpoints to delete', type: 'remove', endpoints: actuallyRemoved });
     }
     return groups;
-  }, [remoteDrift]);
+  }, [remoteDrift, specAddedIds, specRemovedIds]);
 
   return {
     isSyncing, showConfirmModal, confirmGroups,

packages/bruno-app/src/components/OpenAPISyncTab/index.js

@@ -130,7 +130,6 @@ const OpenAPISyncTab = ({ collection }) => {
                   onTabSelect={setActiveTab}
                   error={error}
                   isLoading={isLoading}
-                  fileNotFound={fileNotFound}
                   onOpenSettings={() => setShowSettingsModal(true)}
                 />
                 <p className="beta-feedback-inline">