0.2.38 (#126)

* Enabled tool toggle copy change

* Resolve #96 - Pretty-serialize mcp configs

* Attempt secret deletion in host binary

* Update toggle lock state

* Improve loading state

* Improve tile modal design & overflow

Author: ColinMcNeil

src/extension/host-binary/cmd/main.go

@@ -89,7 +89,7 @@ func DeleteSecret(ctx context.Context) *cobra.Command {
 	cmd := &cobra.Command{
 		Use:   "delete",	
 		Short: "Delete a secret",
-		Args:  cobra.ExactArgs(1),
+		Args:  cobra.NoArgs,
 		RunE: func(*cobra.Command, []string) error {
 			return runDeleteSecret(ctx, *opts)
 		},

src/extension/ui/src/App.tsx

@@ -8,7 +8,9 @@ import { POLL_INTERVAL } from './Constants';
 import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
 import { ConfigProvider } from './context/ConfigContext';
 import { MCPClientProvider, useMCPClientContext } from './context/MCPClientContext';
+import { RequiredImagesProvider, useRequiredImagesContext } from './context/RequiredImageContext';
 import ConfigurationModal from './components/tile/Modal';
+import LoadingState from './components/LoadingState';
 
 export const client = createDockerDesktopClient();
 
@@ -23,16 +25,18 @@ export function App() {
   // Wrap the entire application with our providers
   return (
     <ConfigProvider client={client}>
-      <CatalogProvider client={client}>
-        <MCPClientProvider client={client}>
-          <AppContent
-            settings={settings}
-            setSettings={setSettings}
-            configuringItem={configuringItem}
-            setConfiguringItem={setConfiguringItem}
-          />
-        </MCPClientProvider>
-      </CatalogProvider>
+      <RequiredImagesProvider client={client}>
+        <CatalogProvider client={client}>
+          <MCPClientProvider client={client}>
+            <AppContent
+              settings={settings}
+              setSettings={setSettings}
+              configuringItem={configuringItem}
+              setConfiguringItem={setConfiguringItem}
+            />
+          </MCPClientProvider>
+        </CatalogProvider>
+      </RequiredImagesProvider>
     </ConfigProvider>
   );
 }
@@ -44,53 +48,22 @@ interface AppContentProps {
   setConfiguringItem: React.Dispatch<React.SetStateAction<CatalogItemWithName | null>>;
 }
 
-function AppContent({ settings, setSettings, configuringItem, setConfiguringItem }: AppContentProps) {
-  const {
-    imagesLoadingResults,
-    loadImagesIfNeeded,
-    catalogItems,
-  } = useCatalogContext();
+function AppContent({ settings, setSettings, setConfiguringItem }: AppContentProps) {
+  const { secretsLoading, catalogLoading, registryLoading } = useCatalogContext();
+  const { isLoading: imagesLoading } = useRequiredImagesContext();
 
-  // Instead of showing full-page loading states for each resource, let's implement a more unified approach
-  // Only show full-page loading during initial load, not during background refetching
-  const isInitialLoading = !catalogItems;
+  const isLoading = secretsLoading || catalogLoading || registryLoading || imagesLoading;
 
-  // Critical error check - only for images as they're required for the app to function
-  if (imagesLoadingResults?.stderr) {
-    return (
-      <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-        <Alert
-          sx={{ fontSize: '1.5em' }}
-          action={
-            <Button variant='outlined' color='secondary' onClick={() => loadImagesIfNeeded()}>
-              Retry
-            </Button>
-          }
-          title="Error loading images"
-          severity="error"
-        >
-          {imagesLoadingResults.stderr}
-        </Alert>
-        <Typography>{imagesLoadingResults?.stdout}</Typography>
-      </Paper>
-    );
-  }
-
-  // Show one unified loading screen during initial load
-  if (isInitialLoading) {
-    return (
-      <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-        <CircularProgress sx={{ marginBottom: 2 }} />
-        <Typography>Loading application...</Typography>
-      </Paper>
-    );
-  }
   return (
     <>
-      <CatalogGrid
-        setConfiguringItem={setConfiguringItem}
-        showSettings={() => setSettings({ ...settings, showModal: true })}
-      />
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <CatalogGrid
+          setConfiguringItem={setConfiguringItem}
+          showSettings={() => setSettings({ ...settings, showModal: true })}
+        />
+      )}
     </>
   );
 }

src/extension/ui/src/Constants.ts

@@ -10,7 +10,7 @@ export const DOCKER_MCP_IMAGE = 'alpine/socat'
 export const DOCKER_MCP_CONTAINER_ARGS = 'STDIO TCP:host.docker.internal:8811'
 export const DOCKER_MCP_COMMAND = `docker run -i --rm ${DOCKER_MCP_IMAGE} ${DOCKER_MCP_CONTAINER_ARGS}`
 
-export const TILE_DESCRIPTION_MAX_LENGTH = 180;
+export const TILE_DESCRIPTION_MAX_LENGTH = 120;
 
 export const CATALOG_LAYOUT_SX = {
     width: '90vw',

src/extension/ui/src/Secrets.ts

@@ -37,7 +37,7 @@ namespace Secrets {
 
     export async function deleteSecret(client: v1.DockerDesktopClient, name: string): Promise<void> {
         try {
-            const response = await client.extension.host?.cli.exec('host-binary', ['delete', name]);
+            const response = await client.extension.host?.cli.exec('host-binary', ['delete', '--name', name]);
             client.desktopUI.toast.success('Secret deleted successfully')
             if (!response) {
                 client.desktopUI.toast.error('Failed to delete secret. Could not get response from host-binary.')

src/extension/ui/src/components/CatalogGrid.tsx

@@ -167,7 +167,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                                     <FormControlLabel control={<Switch checked={showMine} onChange={(e) => {
                                         setShowMine(e.target.checked)
                                         localStorage.setItem('showMine', e.target.checked.toString())
-                                    }} />} label="Show only my tools" />
+                                    }} />} label="Show only enabled tools" />
                                 </Stack>
                             </FormGroup>
 

src/extension/ui/src/components/LoadingState.tsx

@@ -0,0 +1,82 @@
+import { LinearProgress, LinearProgressProps, Box, Typography, Paper, Stack } from "@mui/material";
+import { useConfigContext } from "../context/ConfigContext";
+import { useEffect, useState } from "react";
+import { useCatalogContext } from "../context/CatalogContext";
+import { useRequiredImagesContext } from "../context/RequiredImageContext";
+
+const LoadingState = () => {
+    const { secretsLoading, catalogLoading, registryLoading } = useCatalogContext();
+    const { imageStates, isLoading: imagesLoading } = useRequiredImagesContext();
+    const { configLoading } = useConfigContext();
+
+    // Determine if any loading is happening
+    const isLoading = secretsLoading || catalogLoading || registryLoading || imagesLoading || configLoading;
+
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        const imageProgressTotal = (() => {
+            const total = 5;
+            const loaded = Object.values(imageStates).filter(state => state.status === 'success').length;
+            return Math.round((loaded / total) * 100);
+        })()
+
+        const configProgressTotal = configLoading ? 100 : 0;
+
+        const secretsProgressTotal = secretsLoading ? 100 : 0;
+
+        const catalogProgressTotal = catalogLoading ? 100 : 0;
+
+        const registryProgressTotal = registryLoading ? 100 : 0;
+
+        const totalLoadedProgress = imageProgressTotal + configProgressTotal + secretsProgressTotal + catalogProgressTotal + registryProgressTotal;
+        const totalPossibleProgress = 500;
+        setProgress(Math.round((totalLoadedProgress / totalPossibleProgress) * 100));
+    }, [isLoading]);
+
+    if (!isLoading) return null;
+
+    const getLoadingText = () => {
+        if (imagesLoading) return 'Loading required Docker images';
+        if (configLoading) return 'Loading configuration';
+        if (secretsLoading) return 'Loading secrets';
+        if (catalogLoading) return 'Loading catalog';
+        if (registryLoading) return 'Loading registry';
+    }
+
+    return (
+        <Box sx={{ maxWidth: '500px', width: '100%', position: 'sticky', zIndex: 1000, border: '1px solid red', left: '50%', transform: 'translateX(-50%)', top: '10vh', p: 2 }}>
+            <Stack direction="column" alignItems="center" width="100%" justifyContent="space-between">
+                <LinearProgress sx={{ width: '100%' }} variant="determinate" value={progress} />
+                <Typography>
+                    {progress}%
+                </Typography>
+            </Stack>
+            {imagesLoading && (
+                <Paper elevation={2} sx={{ m: 2, p: 2, maxWidth: '500px', mx: 'auto' }}>
+                    <Typography variant="subtitle1" gutterBottom>
+                        {getLoadingText()}
+                    </Typography>
+
+                    <Stack spacing={1}>
+                        {Object.entries(imageStates).map(([imageName, state]) => (
+                            <Box key={imageName} sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                                <Typography variant="body2">{imageName}:</Typography>
+                                <Typography variant="body2" color={
+                                    state.status === 'loading' ? 'primary' :
+                                        state.status === 'error' ? 'error' :
+                                            state.status === 'success' ? 'success' :
+                                                'text.secondary'
+                                }>
+                                    {state.status}
+                                </Typography>
+                            </Box>
+                        ))}
+                    </Stack>
+                </Paper>
+            )}
+        </Box>
+    );
+}
+
+export default LoadingState;    

src/extension/ui/src/components/tile/Bottom.tsx

@@ -10,11 +10,10 @@ type BottomProps = {
 const Bottom = ({ item, needsConfiguration }: BottomProps) => {
     return (
         <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-            {<Chip label={
-                <Stack direction="row" spacing={1} alignItems="center" sx={{ fontSize: '1.2em' }}>
-                    <Hardware sx={{ fontSize: '1.2em' }} />
-                    {`${(item.tools || []).length || 1} tool` + ((item.tools || []).length || 1 !== 1 ? 's' : '')}
-
+            {<Chip sx={{ fontSize: '1.2em', p: '4px 8px' }} label={
+                <Stack direction="row" alignItems="center" sx={{ fontSize: '1.2em' }}>
+                    <Hardware sx={{ fontSize: '1.2em', mr: '2px' }} />
+                    {item.tools?.length || 1}
                 </Stack>
             } color="primary" />}
             {!item.tools?.length && !!item.prompts && <Chip label={`${item.prompts} prompt` + (item.prompts !== 1 ? 's' : '')} color="secondary" />}

src/extension/ui/src/components/tile/Index.tsx

@@ -11,6 +11,7 @@ import Center from "./Center";
 import Bottom from "./Bottom";
 import { Secret } from "../../types";
 import { v1 } from "@docker/extension-api-client-types";
+import { useConfigContext } from "../../context/ConfigContext";
 
 
 type TileProps = {
@@ -33,8 +34,7 @@ const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedCon
     const [changedSecrets, setChangedSecrets] = useState<{ [key: string]: string | undefined }>({})
     const [secretLoading, setSecretLoading] = useState(false)
 
-    const { registryLoading } = useCatalogContext()
-    const { registerCatalogItem, unregisterCatalogItem } = useCatalogContext();
+    const { registryLoading, registerCatalogItem, unregisterCatalogItem } = useCatalogContext()
     const [showConfigModal, setShowConfigModal] = useState(false)
 
     useEffect(() => {
@@ -104,6 +104,7 @@ const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedCon
                     }
                 }}
                 onSecretChange={onSecretChange}
+                unAssignedSecrets={unAssignedSecrets}
             />
             <Card onClick={(e) => {
                 if ((e.target as HTMLElement).tagName !== 'INPUT') {