Merge pull request #265 from dgageot/fixes-ui

Fixes to the UI

Author: dgageot

src/extension/ui/src/components/tabs/ToolCatalog.tsx

@@ -25,16 +25,16 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
   // Memoize the filtered catalog items to prevent unnecessary recalculations
   const all = useMemo(() => {
     const filteredItems = catalogItems.filter((item) => {
-      return item.name.toLowerCase().includes(search.toLowerCase());
+      return item.title.toLowerCase().includes(search.toLowerCase());
     });
 
     return sort === 'name-asc'
       ? filteredItems.sort((a, b) => {
-        return a.name.localeCompare(b.name);
+        return a.title.localeCompare(b.title);
       })
       : sort === 'name-desc'
         ? filteredItems.sort((a, b) => {
-          return b.name.localeCompare(a.name);
+          return b.title.localeCompare(a.title);
         })
         : filteredItems;
   }, [catalogItems, search, sort]);

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

@@ -195,12 +195,12 @@ const ConfigurationModal = ({
               }}
             />
           }
-          {catalogItem.title ?? catalogItem.name}
+          {catalogItem.title}
           <Tooltip
             placement="right"
             title={
               !catalogItem.canRegister
-                ? 'You must assign all secrets and configure the item before it can be used.'
+                ? 'You must configure the item before it can be used.'
                 : ''
             }
           >
@@ -217,12 +217,12 @@ const ConfigurationModal = ({
               />
             </span>
           </Tooltip>
+          {catalogItem.missingConfig && (
+            <Chip label="Requires parameters" color="warning" />
+          )}
           {catalogItem.missingSecrets && (
             <Chip label="Requires secrets" color="warning" />
           )}
-          {catalogItem.missingConfig && (
-            <Chip label="Requires configuration" color="warning" />
-          )}
         </Stack>
       </DialogTitle>
       <IconButton

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

@@ -52,7 +52,7 @@ export default function Top({ item, onToggleRegister }: TopProps) {
             color: 'text.primary',
           }}
         >
-          {item.title ?? item.name}
+          {item.title}
         </Typography>
       }
       action={
@@ -74,7 +74,7 @@ export default function Top({ item, onToggleRegister }: TopProps) {
             />
           </Tooltip>
         ) : (
-          <Tooltip title={`Enabling ${item.name} requires configuration`}>
+          <Tooltip title={`Enabling ${item.title} requires configuration`}>
             <span>
               <Switch checked={false} disabled />
             </span>

src/extension/ui/src/mcp-clients/ClaudeDesktop.ts

@@ -5,7 +5,6 @@ class ClaudeDesktopClient implements MCPClient {
   name = "Claude Desktop";
   url = "https://claude.ai/download";
   manualConfigSteps = [
-    "Open Claude Desktop",
     "Select <strong>Claude Settings</strong>",
     "Click on the <strong>Developer</strong> tab",
     "Click on the <strong>Edit Config</strong> button",

src/extension/ui/src/mcp-clients/ContinueDotDev.ts

@@ -6,9 +6,9 @@ class ContinueDotDev implements MCPClient {
   name = "Continue.dev";
   url = "https://continue.dev/";
   manualConfigSteps = [
-    "Open <strong>Continue.dev Settings </strong>",
-    "in your global .continue folder (~/.continue on Mac, %USERPROFILE%.continue) within .continue/assistants. The name of the file will be used as the display name of the assistant, e.g. My Assistant.yaml",
-    "Add block mcpServers:",
+    "Open <strong>Continue.dev Settings</strong>",
+    "In your global .continue folder (~/.continue on Mac/Linux, %USERPROFILE%.continue on Windows), within .continue/assistants. The name of the file will be used as the display name of the assistant, e.g. My Assistant.yaml",
+    "Add block <code>mcpServers</code>:",
     stringify(SAMPLE_MCP_CONFIG),
   ];
   expectedConfigPath = {

src/extension/ui/src/mcp-clients/Gordon.ts

@@ -17,7 +17,7 @@ class GordonMCPClient implements MCPClient {
     url = 'https://docs.docker.com/desktop/features/gordon/mcp/yaml/';
     manualConfigSteps = [
         'Enable Gordon in Docker Desktop',
-        'Write gordon-mcp.yml to the directory you want to connect to',
+        'Write <code>gordon-mcp.yml</code> to the directory you want to connect to',
         'Add MCP_DOCKER to the <code>services</code> section:' +
         '<pre style="font-family: monospace; overflow: auto; width: 80%; background-color: grey.200; padding: 1; border-radius: 1; font-size: 12px;">' +
         DOCKER_MCP_CONFIG_YAML +

src/extension/ui/src/types/catalog/index.ts

@@ -5,7 +5,7 @@ import { JsonSchema } from "json-schema-library";
  */
 export interface CatalogItem {
   description?: string;
-  title?: string;
+  title: string;
   source?: string;
   icon?: string;
   secrets?: { name: string }[];