Add Cursor Support (#73)

* Make UX more consistent with DD

* Refactor MCP client states

* Fix cursor path

* Implement new MCP client and catalog UI

* Remove unsupported sort options for now

* Fix JSON payload escaping for windows

* Improve notifications for client connection changes

* Implement sort

Author: ColinMcNeil

src/extension/ui/src/App.tsx

@@ -1,17 +1,35 @@
 import React, { useEffect, useState, Suspense } from 'react';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
-import { Stack, Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box } from '@mui/material';
+import { Stack, Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box, SvgIcon, useTheme } from '@mui/material';
 import { CatalogItemWithName } from './components/tile/Tile';
 import { Close } from '@mui/icons-material';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
-import MCPCatalogLogo from './MCP Catalog.svg'
-import { getMCPClientStates, MCPClientState } from './MCPClients';
 import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
+import { MCPClientProvider } from './context/MCPClientContext';
 import ConfigurationModal from './components/ConfigurationModal';
+import { Settings as SettingsIcon } from '@mui/icons-material';
 
 const Settings = React.lazy(() => import('./components/Settings'));
 
+// Create lazy-loaded logo components
+const LazyDarkLogo = React.lazy(() => import('./components/DarkLogo'));
+const LazyLightLogo = React.lazy(() => import('./components/LightLogo'));
+
+// Logo component that uses Suspense for conditional loading
+const Logo = () => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  return (
+    <Suspense fallback={<Box sx={{ height: '5em', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CircularProgress size={24} /></Box>}>
+      <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+        {isDarkMode ? <LazyDarkLogo /> : <LazyLightLogo />}
+      </Box>
+    </Suspense>
+  );
+}
+
 export const client = createDockerDesktopClient();
 
 const DEFAULT_SETTINGS = {
@@ -21,58 +39,31 @@ const DEFAULT_SETTINGS = {
 
 export function App() {
   const [settings, setSettings] = useState<{ showModal: boolean, pollIntervalSeconds: number }>(localStorage.getItem('settings') ? JSON.parse(localStorage.getItem('settings') || '{}') : DEFAULT_SETTINGS);
-  const [mcpClientStates, setMcpClientStates] = useState<{ [name: string]: MCPClientState }>({});
   const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
-
-  const updateMCPClientStates = async () => {
-    const oldStates = mcpClientStates;
-    const states = await getMCPClientStates(client)
-    setMcpClientStates(states);
-    // Whenever a client connection changes, show toast to user
-    if (Object.values(oldStates).some(state => state.exists && !state.configured) && Object.values(states).every(state => state.configured)) {
-      client.desktopUI.toast.success('MCP Client Connected. Restart it to load the Catalog.');
-    }
-    if (Object.values(oldStates).some(state => state.exists && state.configured) && Object.values(states).every(state => !state.configured)) {
-      client.desktopUI.toast.error('MCP Client Disconnected. Restart it to remove the Catalog.');
-    }
-  }
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-    updateMCPClientStates();
-    interval = setInterval(() => {
-      updateMCPClientStates();
-    }, POLL_INTERVAL);
-    return () => clearInterval(interval);
-  }, []);
-
-  // Wrap the entire application with our CatalogProvider
+  // Wrap the entire application with our providers
   return (
     <CatalogProvider client={client}>
-      <AppContent
-        settings={settings}
-        setSettings={setSettings}
-        mcpClientStates={mcpClientStates}
-        configuringItem={configuringItem}
-        setConfiguringItem={setConfiguringItem}
-        updateMCPClientStates={updateMCPClientStates}
-      />
+      <MCPClientProvider client={client}>
+        <AppContent
+          settings={settings}
+          setSettings={setSettings}
+          configuringItem={configuringItem}
+          setConfiguringItem={setConfiguringItem}
+        />
+      </MCPClientProvider>
     </CatalogProvider>
   );
 }
 
 interface AppContentProps {
   settings: { showModal: boolean, pollIntervalSeconds: number };
   setSettings: React.Dispatch<React.SetStateAction<{ showModal: boolean, pollIntervalSeconds: number }>>;
-  mcpClientStates: { [name: string]: MCPClientState };
   configuringItem: CatalogItemWithName | null;
   setConfiguringItem: React.Dispatch<React.SetStateAction<CatalogItemWithName | null>>;
-  updateMCPClientStates: () => Promise<void>;
 }
 
-function AppContent({ settings, setSettings, mcpClientStates, configuringItem, setConfiguringItem, updateMCPClientStates }: AppContentProps) {
-  const { imagesLoadingResults, loadImagesIfNeeded, secrets, catalogItems, registryItems, tryLoadSecrets } = useCatalogContext();
-
+function AppContent({ settings, setSettings, configuringItem, setConfiguringItem }: AppContentProps) {
+  const { imagesLoadingResults, loadImagesIfNeeded, secrets, catalogItems, registryItems, } = useCatalogContext();
   if (!imagesLoadingResults || imagesLoadingResults.stderr) {
     return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
       {!imagesLoadingResults && <CircularProgress sx={{ marginBottom: 2 }} />}
@@ -103,8 +94,6 @@ function AppContent({ settings, setSettings, mcpClientStates, configuringItem, s
     </Paper>
   }
 
-  const hasMCPConfigured = Object.values(mcpClientStates).some(state => state.exists && state.configured);
-
   return (
     <>
       {settings.showModal && (
@@ -124,8 +113,6 @@ function AppContent({ settings, setSettings, mcpClientStates, configuringItem, s
               <Settings
                 settings={settings}
                 setSettings={setSettings}
-                mcpClientStates={mcpClientStates}
-                onUpdate={updateMCPClientStates}
               />
             </Suspense>
           </DialogContent>
@@ -143,20 +130,13 @@ function AppContent({ settings, setSettings, mcpClientStates, configuringItem, s
       )}
 
       <Stack direction="column" spacing={1} justifyContent='center' alignItems='center'>
-        <img src={MCPCatalogLogo} alt="MCP Catalog" height={100} />
-        {hasMCPConfigured ? <></> : <Alert action={<Button variant='outlined' color='secondary' onClick={() => setSettings({ ...settings, showModal: true })}>Configure</Button>} severity="error" sx={{ fontWeight: 'bold' }}>MCP Clients are not configured.  Please configure MCP Clients to use the MCP Catalog.</Alert>}
+        <Stack direction="row" spacing={1} justifyContent='space-evenly' alignItems='center' sx={{ width: '100%', maxWidth: '1000px' }}>
+          <Logo />
+          <IconButton sx={{ ml: 2, alignSelf: 'flex-end', justifyContent: 'flex-end' }} onClick={() => setSettings({ ...settings, showModal: true })}>
+            <SettingsIcon sx={{ fontSize: '1.5em' }} />
+          </IconButton>
+        </Stack>
         <CatalogGrid
-          settingsBadgeProps={hasMCPConfigured ? {} : {
-            color: hasMCPConfigured ? 'default' : 'error',
-            badgeContent: '0 MCP Clients',
-            sx: {
-              width: 80,
-              height: '100%',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            },
-          }}
           setConfiguringItem={setConfiguringItem}
           showSettings={() => setSettings({ ...settings, showModal: true })}
         />

src/extension/ui/src/FileWatcher.ts

@@ -4,8 +4,7 @@
  */
 import { v1 } from "@docker/extension-api-client-types"
 import { ExecResult } from "@docker/extension-api-client-types/dist/v0"
-
-const allWatches: { [key: string]: any } = {}
+import { Serializable } from "child_process"
 
 export const tryRunImageSync = async (client: v1.DockerDesktopClient, args: string[], ignoreError = false) => {
     const showError = ignoreError ? () => { } : client.desktopUI.toast.error
@@ -42,63 +41,12 @@ export const writeFileToPromptsVolume = async (client: v1.DockerDesktopClient, c
     return tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'vonwig/function_write_files:latest', `'${content}'`])
 }
 
-export const writeFilesToHost = async (client: v1.DockerDesktopClient, files: { path: string, content: string }[], hostPaths: { source: string, target: string }[], workdir: string) => {
-    const bindArgs = hostPaths.map(path => `--mount type=bind,source="${path.source}",target="${path.target}"`)
-    const args = ['--rm', ...bindArgs, '--workdir', workdir, 'vonwig/function_write_files:latest', `'${JSON.stringify({ files })}'`]
-    return tryRunImageSync(client, args)
-}
-
-export const watchFile = async (client: v1.DockerDesktopClient, path: string, stream: { onOutput: (data: { stdout?: string; stderr?: string }) => void, onError: (error: string) => void, onClose: (exitCode: number) => void }, host = false) => {
-    let user: string | undefined
-    if (host) {
-        user = await getUser(client)
-    }
-    return new Promise((resolve, reject) => {
-        let args = ['--rm', 'vonwig/inotifywait:latest', '-e', 'modify', '-e', 'create', '-e', 'delete', '-q', '-m']
-        if (host) {
-            const replacedPath = path.replace(`$USER`, user!)
-            args = ['--mount', `type=bind,source=${replacedPath},target=/config.json`, ...args, '/config.json']
-        }
-        else {
-            args = ['-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', ...args, path]
-        }
-        console.log('starting watch', path)
-        if (path in allWatches) {
-            console.log('stopping duplicate watch', path)
-            allWatches[path].close()
-            delete allWatches[path]
-        }
-        allWatches[path] = client.docker.cli.exec('run', args, {
-            stream: {
-                onOutput: (data) => {
-                    stream.onOutput(data)
-                },
-                onError: (error) => {
-                    stream.onError(error)
-                    console.log('error', error)
-                },
-                onClose: (exitCode: number) => {
-                    stream.onClose(exitCode)
-                    console.log('close', exitCode)
-                }
-            }
-        })
-        console.log('allWatches', allWatches)
-    })
-
-}
-
-export const stopWatch = (path: string) => {
-    if (allWatches[path]) {
-        console.log('stopping watch', path)
-        allWatches[path].close()
-        delete allWatches[path]
+export const escapeJSONForPlatformShell = (json: Serializable, platform: string) => {
+    const jsonString = JSON.stringify(json)
+    if (platform === 'win32') {
+        // Use triple quotes to escape quotes
+        return `"${jsonString.replace(/"/g, '\\"')}"`
     }
+    return `'${jsonString}'`
 }
 
-export const stopAllWatches = () => {
-    Object.keys(allWatches).forEach(path => {
-        console.log('stopping watch', path)
-        stopWatch(path)
-    })
-}

src/extension/ui/src/MCP Catalog.svg

@@ -1,6 +1,6 @@
 import { v1 } from "@docker/extension-api-client-types";
 import { SUPPORTED_MCP_CLIENTS } from "./mcp-clients";
-import { MCPClient } from "./mcp-clients";
+import { MCPClient } from "./mcp-clients/MCPTypes";
 
 export type MCPClientState = {
     client: MCPClient;
@@ -26,9 +26,6 @@ export const getMCPClientStates = async (ddClient: v1.DockerDesktopClient) => {
         else {
             mcpClientStates[mcpClient.name] = { exists: true, configured: mcpClient.validateConfig(content), path: path, client: mcpClient };
         }
-        if (mcpClient.name === 'Cursor') {
-            mcpClientStates[mcpClient.name].preventAutoConnectMessage = 'Connecting Cursor automatically is not yet supported. Please configure manually in Cursor Settings.';
-        }
     }
     return mcpClientStates;
 }