Merge pull request #46 from docker/cm/0.1.6

ColinMcNeil · web-flow · commit 320e315cf763 · 2025-02-06T17:59:41.000-05:00
0.1.6
diff --git a/src/extension/ui/src/App.tsx b/src/extension/ui/src/App.tsx
@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import AddIcon from '@mui/icons-material/Add';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
-import { Stack, Typography, Button, ButtonGroup, Grid, debounce, Card, CardContent, IconButton, Alert, DialogTitle, Dialog, DialogContent, FormControlLabel, Checkbox } from '@mui/material';
+import { Stack, Typography, Button, ButtonGroup, Grid, debounce, Card, CardContent, IconButton, Alert, DialogTitle, Dialog, DialogContent, FormControlLabel, Checkbox, CircularProgress, Paper } from '@mui/material';
 import { CatalogItem, CatalogItemCard, CatalogItemWithName } from './components/PromptCard';
 import { parse, stringify } from 'yaml';
 import { Ref } from './Refs';
 import { RegistrySyncStatus } from './components/RegistrySyncStatus';
 import { getRegistry } from './Registry';
 import { ClaudeConfigSyncStatus, setNeverShowAgain } from './components/ClaudeConfigSyncStatus';
 import { FolderOpenRounded, } from '@mui/icons-material';
+import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
 
 const NEVER_SHOW_AGAIN_KEY = 'registry-sync-never-show-again';
 
@@ -24,6 +25,7 @@ export function App() {
   const [registryItems, setRegistryItems] = useState<{ [key: string]: { ref: string } }>({});
   const [showReloadModal, setShowReloadModal] = useState(false);
   const [hasConfig, setHasConfig] = useState(false);
+  const [imagesLoadingResults, setImagesLoadingResults] = useState<ExecResult | null>(null);
 
   const loadCatalog = async (showNotification = true) => {
     const cachedCatalog = localStorage.getItem('catalog');
@@ -108,8 +110,24 @@ export function App() {
 
   }
 
+  const startImagesLoading = async () => {
+    setImagesLoadingResults(null);
+    try {
+      const result = await client.docker.cli.exec('pull', ['vonwig/function_write_files:latest'])
+      setImagesLoadingResults(result);
+    }
+    catch (error) {
+      console.error(error)
+      if (error) {
+        setImagesLoadingResults(error as ExecResult)
+      }
+
+    }
+  }
+
   useEffect(() => {
     loadCatalog();
+    startImagesLoading();
     loadRegistry();
     const interval = setInterval(() => {
       loadCatalog(false);
@@ -124,9 +142,22 @@ export function App() {
     catalogItems.some((c) => c.name === i)
   )
 
+  if (!imagesLoadingResults || imagesLoadingResults.stderr) {
+    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+      {!imagesLoadingResults && <CircularProgress sx={{ marginBottom: 2 }} />}
+      {!imagesLoadingResults && <Typography>Loading images...</Typography>}
+      {imagesLoadingResults && <Alert sx={{ fontSize: '1.5em' }} action={<Button variant='outlined' color='secondary' onClick={() => startImagesLoading()}>Retry</Button>} title="Error loading images" severity="error">{imagesLoadingResults.stderr}</Alert>}
+      <Typography>{imagesLoadingResults?.stdout}</Typography>
+    </Paper>
+  }
+
+
+
+
   return (
     <div>
       <Dialog open={showReloadModal} onClose={() => setShowReloadModal(false)}>
+
         <DialogTitle>Registry Updated</DialogTitle>
         <DialogContent>
           <Typography sx={{ marginBottom: 2 }}>
@@ -144,7 +175,6 @@ export function App() {
 
       <Stack direction="column" spacing={1}>
         <div>
-
           <ButtonGroup>
             <Button onClick={() => loadCatalog(true)}>Refresh catalog</Button>
             <Button onClick={loadRegistry}>Refresh registry</Button>
@@ -188,8 +218,7 @@ export function App() {
           </Grid>
         </Grid>
       </Stack>
-
-
     </div>
   )
+
 }
diff --git a/src/extension/ui/src/Usage.tsx b/src/extension/ui/src/Usage.tsx
@@ -21,7 +21,7 @@ export interface RegistryChangedRecord extends Record {
 export interface ClaudeConfigChangedRecord extends Record {
     event: 'claude-config-changed';
     properties: {
-        action: 'add' | 'remove';
+        action: 'add' | 'remove' | 'write' | 'delete';
     };
 };
 
diff --git a/src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx b/src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx
@@ -3,6 +3,7 @@ import { Badge, Button, Checkbox, Dialog, DialogContent, DialogContentText, Dial
 import { useEffect, useState } from "react";
 import { writeFilesToHost } from "../FileWatcher";
 import { trackEvent } from "../Usage";
+import { ExecResult } from "@docker/extension-api-client-types/dist/v1";
 
 const DOCKER_MCP_CONFIG = {
     "command": "docker",
@@ -61,23 +62,33 @@ const getNeverShowAgain = () => {
 }
 
 export const ClaudeConfigSyncStatus = ({ client, setHasConfig }: { client: v1.DockerDesktopClient, setHasConfig: (hasConfig: boolean) => void }) => {
-    const [claudeConfig, setClaudeConfig] = useState<{ mcpServers: { [key: string]: any } } | null>(null)
+    const [claudeConfig, setClaudeConfig] = useState<{ mcpServers: { [key: string]: any } } | null | undefined>(null)
     const [showConfigModal, setShowConfigModal] = useState<boolean>(false)
+
     const [showRestartModal, setShowRestartModal] = useState<boolean>(false)
     const [status, setStatus] = useState<ClaudeConfigStatus>({ state: 'loading', message: '...', color: 'default' })
     const [configPath, setConfigPath] = useState<string | null>(null)
-    useEffect(() => {
-        const refreshConfig = async () => {
-            try {
-                const config = await getClaudeConfig(client)
-                const newConfig = JSON.parse(config)
-                setClaudeConfig(newConfig)
 
-            } catch (error) {
+    const [deleteReady, setDeleteReady] = useState<boolean>(false)
+    const refreshConfig = async () => {
+        try {
+            const config = await getClaudeConfig(client)
+            const newConfig = JSON.parse(config)
+            setClaudeConfig(newConfig)
+
+        } catch (error) {
+            if ((error as ExecResult).stderr && (error as ExecResult).stderr.includes('bind source path does not exist')) {
+                setClaudeConfig(undefined)
+            }
+            else {
                 console.error('Error parsing config. Using cached config if available.', error)
             }
 
+
         }
+
+    }
+    useEffect(() => {
         refreshConfig()
         const interval = setInterval(() => {
             refreshConfig()
@@ -93,6 +104,9 @@ export const ClaudeConfigSyncStatus = ({ client, setHasConfig }: { client: v1.Do
 
 
     useEffect(() => {
+        if (claudeConfig === undefined) {
+            return setStatus({ state: 'missing claude config', message: 'No claude desktop config found', color: 'error' })
+        }
         if (claudeConfig) {
             const servers = claudeConfig.mcpServers
             if (!servers) {
@@ -113,39 +127,83 @@ export const ClaudeConfigSyncStatus = ({ client, setHasConfig }: { client: v1.Do
 
     return <Badge badgeContent={status.state} color={status.color} sx={{ ml: 4 }}>
         <Dialog open={Boolean(showConfigModal && configPath)} onClose={() => setShowConfigModal(false)} maxWidth="lg">
-            <DialogTitle>Current Claude Desktop Config</DialogTitle>
 
-            {status.state === 'has docker_mcp' && <Button onClick={async () => {
-                trackEvent('claude-config-changed', { action: 'remove' })
-                // Remove docker_mcp from config
-                if (claudeConfig && claudeConfig.mcpServers) {
-                    const newConfig = { ...claudeConfig }
-                    delete newConfig.mcpServers.mcp_docker
-                    setClaudeConfig(newConfig)
-                    await writeFilesToHost(client, [{ path: 'config.json', content: JSON.stringify(newConfig, null, 2) }], [{ source: configPath!, target: '/claude_desktop_config/config.json' }], '/claude_desktop_config')
-                    setShowRestartModal(!getNeverShowAgain())
-                    setShowConfigModal(false)
+            <DialogTitle>Current Claude Desktop Config</DialogTitle>
+            <Stack direction="column" spacing={2} sx={{ p: 2 }}>
+                {
+                    status.state === 'has docker_mcp' && <Button onClick={async () => {
+                        trackEvent('claude-config-changed', { action: 'remove' })
+                        // Remove docker_mcp from config
+                        if (claudeConfig && claudeConfig.mcpServers) {
+                            const newConfig = { ...claudeConfig }
+                            delete newConfig.mcpServers.mcp_docker
+                            setClaudeConfig(newConfig)
+                            await writeFilesToHost(client, [{ path: 'config.json', content: JSON.stringify(newConfig, null, 2) }], [{ source: configPath!, target: '/claude_desktop_config/config.json' }], '/claude_desktop_config')
+                            setShowRestartModal(!getNeverShowAgain())
+                        }
+                    }}>Remove Docker MCP</Button>}
+                {
+                    status.state === 'missing docker_mcp' && <Button onClick={() => {
+                        trackEvent('claude-config-changed', { action: 'add' })
+                        // Add docker_mcp to config
+                        if (claudeConfig && claudeConfig.mcpServers) {
+                            const newConfig = { ...claudeConfig }
+                            newConfig.mcpServers.mcp_docker = DOCKER_MCP_CONFIG
+                            setClaudeConfig(newConfig)
+                            writeFilesToHost(client, [{ path: 'config.json', content: JSON.stringify(newConfig, null, 2) }], [{ source: configPath!, target: '/claude_desktop_config/config.json' }], '/claude_desktop_config')
+                            setShowRestartModal(!getNeverShowAgain())
+                        }
+                    }}>Add Docker MCP</Button>
                 }
-            }}>Remove Docker MCP</Button>}
-
-            {status.state === 'missing docker_mcp' && <Button onClick={() => {
-                trackEvent('claude-config-changed', { action: 'add' })
-                // Add docker_mcp to config
-                if (claudeConfig && claudeConfig.mcpServers) {
-                    const newConfig = { ...claudeConfig }
-                    newConfig.mcpServers.mcp_docker = DOCKER_MCP_CONFIG
-                    setClaudeConfig(newConfig)
-                    writeFilesToHost(client, [{ path: 'config.json', content: JSON.stringify(newConfig, null, 2) }], [{ source: configPath!, target: '/claude_desktop_config/config.json' }], '/claude_desktop_config')
-                    setShowRestartModal(!getNeverShowAgain())
-                    setShowConfigModal(false)
+                {
+                    status.state === 'missing claude config' && <Button onClick={async () => {
+                        trackEvent('claude-config-changed', { action: 'write' })
+                        await writeFilesToHost(client, [{
+                            path: 'claude_desktop_config.json', content: JSON.stringify({
+                                mcpServers: {
+                                    mcp_docker: DOCKER_MCP_CONFIG
+                                }
+                            }, null, 2)
+                        }], [{ source: configPath!.split('/').slice(0, -1).join('/'), target: '/claude_desktop_config' }], '/claude_desktop_config')
+                        refreshConfig()
+                        client.desktopUI.toast.success('Claude Desktop Config written')
+                    }
+                    }>Write Claude Desktop Config</Button>
                 }
-            }}>Add Docker MCP</Button>
-            }
+                {status.state !== 'missing claude config' && <Button color="error" variant={deleteReady ? 'contained' : 'outlined'} onClick={async () => {
+                    if (!deleteReady) {
+                        setDeleteReady(true)
+                        setTimeout(() => {
+                            setDeleteReady(false)
+                        }, 10000)
+                    }
+                    else {
+                        trackEvent('claude-config-changed', { action: 'delete' })
+                        try {
+                            await client.docker.cli.exec('run', ['--rm', '--mount', `type=bind,source="${configPath!.split('/').slice(0, -1).join('/')}",target=/claude_desktop_config`, 'alpine:latest', 'sh', '-c', '"rm -f /claude_desktop_config/claude_desktop_config.json"'])
+                            refreshConfig()
+                            setDeleteReady(false)
+                        } catch (error) {
+
+                            if ((error as ExecResult).stderr) {
+                                client.desktopUI.toast.error('Error deleting config' + (error as ExecResult).stderr)
+                                console.error('Error deleting config', error)
+                            }
+
+
+                        }
+                    }
+                }
+                }>{deleteReady ? 'Click again to confirm deletion' : 'Delete Claude Desktop Config'}</Button>}
+
+            </Stack>
             <DialogContent>
                 <DialogContentText component='pre'>
-                    <Typography >{JSON.stringify(claudeConfig, null, 2)}</Typography>
+                    {!claudeConfig && <Typography>No config found</Typography>}
+                    {claudeConfig && <Typography sx={{ fontSize: '1.1em', minWidth: 700, fontFamily: 'monospace', backgroundColor: 'black', color: 'white', padding: 2, borderRadius: 2 }}>{JSON.stringify(claudeConfig, null, 2)}</Typography>}
                 </DialogContentText>
             </DialogContent>
+
         </Dialog >
 
         <Dialog open={showRestartModal} onClose={() => setShowRestartModal(false)} >
@@ -165,5 +223,5 @@ export const ClaudeConfigSyncStatus = ({ client, setHasConfig }: { client: v1.Do
         <Button sx={{ width: 150, height: 'auto', cursor: 'pointer' }} onClick={() => { setShowConfigModal(!showConfigModal) }} color='primary' variant="outlined">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 40" fill="currentColor"><path shapeRendering="optimizeQuality" fill="#D97757" d="m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z"></path><path shapeRendering="optimizeQuality" d="M64.48 33.54c-5.02 0-8.45-2.8-10.07-7.11a19.19 19.19 0 0 1-1.23-7.03c0-7.23 3.24-12.25 10.4-12.25 4.81 0 7.78 2.1 9.47 7.11h2.06l-.28-6.91c-2.88-1.86-6.48-2.8-10.86-2.8-6.17 0-11.42 2.76-14.34 7.74a16.77 16.77 0 0 0-2.22 8.65c0 5.53 2.61 10.43 7.51 13.15a17.51 17.51 0 0 0 8.73 2.06c4.78 0 8.57-.91 11.93-2.5l.87-7.62h-2.1c-1.26 3.48-2.76 5.57-5.25 6.68-1.22.55-2.76.83-4.62.83ZM86.13 7.15l.2-3.4h-1.42l-6.32 1.9v1.03l2.8 1.3v23.78c0 1.62-.83 1.98-3 2.25v1.74h10.75v-1.74c-2.18-.27-3-.63-3-2.25V7.16Zm42.75 29h.83l7.27-1.38v-1.78l-1.02-.08c-1.7-.16-2.14-.51-2.14-1.9V18.33l.2-4.07h-1.15l-6.87.99v1.74l.67.12c1.86.27 2.41.79 2.41 2.09v11.3c-1.78 1.38-3.48 2.25-5.5 2.25-2.24 0-3.63-1.14-3.63-3.8V18.34l.2-4.07h-1.18l-6.88.99v1.74l.71.12c1.86.27 2.41.79 2.41 2.09v10.43c0 4.42 2.5 6.52 6.48 6.52 3.04 0 5.53-1.62 7.4-3.87l-.2 3.87ZM108.9 22.08c0-5.65-3-7.82-8.42-7.82-4.78 0-8.25 1.98-8.25 5.26 0 .98.35 1.73 1.06 2.25l3.64-.48c-.16-1.1-.24-1.77-.24-2.05 0-1.86.99-2.8 3-2.8 2.97 0 4.47 2.09 4.47 5.45v1.1l-7.5 2.25c-2.5.68-3.92 1.27-4.87 2.65a5 5 0 0 0-.7 2.8c0 3.2 2.2 5.46 5.96 5.46 2.72 0 5.13-1.23 7.23-3.56.75 2.33 1.9 3.56 3.95 3.56 1.66 0 3.16-.67 4.5-1.98l-.4-1.38c-.58.16-1.14.24-1.73.24-1.15 0-1.7-.91-1.7-2.69v-8.26Zm-9.6 10.87c-2.05 0-3.32-1.19-3.32-3.28 0-1.42.67-2.25 2.1-2.73l6.08-1.93v5.84c-1.94 1.47-3.08 2.1-4.86 2.1Zm63.3 1.82v-1.78l-1.03-.08c-1.7-.16-2.13-.51-2.13-1.9V7.15l.2-3.4h-1.43l-6.32 1.9v1.03l2.8 1.3v7.82a8.83 8.83 0 0 0-5.37-1.54c-6.28 0-11.18 4.78-11.18 11.93 0 5.89 3.52 9.96 9.32 9.96 3 0 5.61-1.46 7.23-3.72l-.2 3.72h.84l7.27-1.38Zm-13.16-18.14c3 0 5.25 1.74 5.25 4.94v9a7.2 7.2 0 0 1-5.21 2.1c-4.3 0-6.48-3.4-6.48-7.94 0-5.1 2.49-8.1 6.44-8.1Zm28.53 4.5c-.56-2.64-2.18-4.14-4.43-4.14-3.36 0-5.69 2.53-5.69 6.16 0 5.37 2.84 8.85 7.43 8.85a8.6 8.6 0 0 0 7.39-4.35l1.34.36c-.6 4.66-4.82 8.14-10 8.14-6.08 0-10.27-4.5-10.27-10.9 0-6.45 4.55-10.99 10.63-10.99 4.54 0 7.74 2.73 8.77 7.47l-15.84 4.86v-2.14l10.67-3.31Z"></path></svg>
         </Button>
-    </Badge>
+    </Badge >
 }
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
