Fix infinite sync issue

Author: colinmcneil

src/extension/ui/src/App.tsx

@@ -12,6 +12,7 @@ import { useRequiredImages } from './queries/useRequiredImages';
 import { useMCPClient } from './queries/useMCPClient';
 import { useConfig } from './queries/useConfig';
 import { useSecrets } from './queries/useSecrets';
+import { syncConfigWithRegistry, syncRegistryWithConfig } from './Registry';
 
 export const client = createDockerDesktopClient();
 
@@ -52,15 +53,9 @@ export function App() {
     secrets.isLoading;
 
   useEffect(() => {
-    if (catalogAll.registryItems && config.config) {
-      config.syncConfigWithRegistry(catalogAll.registryItems);
-    }
-  }, [catalogAll.registryItems]);
-
-  useEffect(() => {
-    if (config.config) {
+    if (config.config && catalogAll.registryItems) {
       console.log('registryItems', catalogAll.registryItems)
-      catalogAll.syncRegistryWithConfig();
+      syncRegistryWithConfig(client, catalogAll.registryItems, config.config);
     }
   }, [config.config]);
 

src/extension/ui/src/Registry.ts

@@ -73,7 +73,7 @@ export const syncConfigWithRegistry = async (client: v1.DockerDesktopClient, reg
         return;
     }
     console.log('SYNC STARTED. REGISTRY -> CONFIG', registry, config)
-    const oldConfigString = JSON.stringify({ config })
+    const oldConfigString = JSON.stringify(config)
     for (const [registryItemName, registryItem] of Object.entries(registry)) {
         const configInRegistry = registryItem.config
         const configInConfigFile = config[registryItemName]
@@ -82,7 +82,7 @@ export const syncConfigWithRegistry = async (client: v1.DockerDesktopClient, reg
             config[registryItemName][registryItemName] = mergedConfig
         }
     }
-    const newConfigString = JSON.stringify({ config })
+    const newConfigString = JSON.stringify(config)
     if (oldConfigString !== newConfigString) {
         console.log('Updating config with new registry.', 'oldConfigString', oldConfigString, 'newConfigString', newConfigString)
         await writeFileToPromptsVolume(client, JSON.stringify({ files: [{ path: 'config.yaml', content: stringify(config) }] }))

src/extension/ui/src/queries/useConfig.ts

@@ -20,25 +20,6 @@ export function useConfig(client: v1.DockerDesktopClient) {
     const queryClient = useQueryClient();
     const configRef = useRef<any>(null);
 
-
-    // Sync config with registry - use the exact types from Registry.ts
-    const syncConfigWithRegistryMutation = useMutation({
-        mutationFn: async (registryItems: { [key: string]: { ref: string; config: any } }) => {
-            try {
-                if (!config) return { success: false };
-                await syncConfigWithRegistry(client, registryItems, config);
-                return { success: true };
-            } catch (error) {
-                console.error('Failed to sync config with registry:', error);
-                throw error;
-            }
-        },
-        onSuccess: async () => {
-            // Refetch config to ensure UI is in sync after registry sync
-            await refetchConfig();
-        }
-    });
-
     const {
         data: config = undefined,
         refetch: refetchConfig,
@@ -121,6 +102,5 @@ export function useConfig(client: v1.DockerDesktopClient) {
         configLoading,
         tryLoadConfig,
         saveConfig,
-        syncConfigWithRegistry: syncConfigWithRegistryMutation.mutateAsync
     };
 }