extensions: add a display name field (#1759)

ui/desktop/openapi.json

@@ -392,6 +392,10 @@
               "type"
             ],
             "properties": {
+              "display_name": {
+                "type": "string",
+                "nullable": true
+              },
               "name": {
                 "type": "string",
                 "description": "The name used to identify this extension"

ui/desktop/src/api/types.gen.ts

@@ -43,6 +43,7 @@ export type ExtensionConfig = {
     timeout?: number | null;
     type: 'stdio';
 } | {
+    display_name?: string | null;
     /**
      * The name used to identify this extension
      */

ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx

@@ -118,7 +118,7 @@ export default function ExtensionsSection() {
 
         <div className="flex gap-4 pt-4 w-full">
           <Button
-            className="flex items-center gap-2 flex-1 justify-center text-textSubtle bg-black dark:bg-white hover:bg-subtle"
+            className="flex items-center gap-2 flex-1 justify-center text-white dark:text-textSubtle bg-black dark:bg-white hover:bg-subtle"
             onClick={() => setIsAddModalOpen(true)}
           >
             <Plus className="h-4 w-4" />

ui/desktop/src/components/settings_v2/extensions/LoadBuiltins.tsx

@@ -1,11 +1,12 @@
 import type { ExtensionConfig } from '../../../api/types.gen';
-import builtInExtensionsData from '../../../built-in-extensions.json';
-import { FixedExtensionEntry } from '@/src/components/ConfigContext';
+import builtInExtensionsData from './built-in-extensions.json';
+import { FixedExtensionEntry } from '../../ConfigContext';
 
 // Type definition for built-in extensions from JSON
 type BuiltinExtension = {
   id: string;
   name: string;
+  display_name: string;
   description: string;
   enabled: boolean;
   type: 'builtin';
@@ -50,13 +51,14 @@ export async function syncBuiltInExtensions(
 
     // Check each built-in extension
     for (const builtinExt of builtinExtensions) {
-      // Only add if the extension doesn't already exist
+      // Only add if the extension doesn't already exist -- use the id
       if (!existingExtensionKeys.has(builtinExt.id)) {
         console.log(`Adding built-in extension: ${builtinExt.id}`);
 
         // Convert to the ExtensionConfig format
         const extConfig: ExtensionConfig = {
           name: builtinExt.name,
+          display_name: builtinExt.display_name,
           type: 'builtin',
           timeout: builtinExt.timeout ?? 300,
         };

ui/desktop/src/components/settings_v2/extensions/built-in-extensions.json

@@ -0,0 +1,51 @@
+[
+  {
+    "id": "developer",
+    "name": "developer",
+    "display_name": "Developer",
+    "description": "General development tools useful for software engineering.",
+    "enabled": true,
+    "type": "builtin",
+    "env_keys": [],
+    "timeout": 300
+  },
+  {
+    "id": "computercontroller",
+    "name": "computercontroller",
+    "display_name": "Computer Controller",
+    "description": "General computer control tools that don't require you to be a developer or engineer.",
+    "enabled": false,
+    "type": "builtin",
+    "env_keys": [],
+    "timeout": 300
+  },
+  {
+    "id": "memory",
+    "name": "memory",
+    "display_name": "Memory",
+    "description": "Teach goose your preferences as you go.",
+    "enabled": false,
+    "type": "builtin",
+    "env_keys": [],
+    "timeout": 300
+  },
+  {
+    "id": "jetbrains",
+    "display_name": "Jetbrains",
+    "name": "jetbrains",
+    "description": "Integration with any Jetbrains IDE",
+    "enabled": false,
+    "type": "builtin",
+    "env_keys": [],
+    "timeout": 300
+  },
+  {
+    "id": "tutorial",
+    "name": "tutorial",
+    "display_name": "Tutorial",
+    "description": "Access interactive tutorials and guides",
+    "enabled": false,
+    "type": "builtin",
+    "env_keys": []
+  }
+]

ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionItem.tsx

@@ -24,7 +24,7 @@ export default function ExtensionItem({ extension, onToggle, onConfigure }: Exte
   return (
     <div className="rounded-lg border border-borderSubtle p-4 mb-2">
       <div className="flex items-center justify-between mb-2">
-        <h3 className="font-medium text-textStandard">{getFriendlyTitle(extension.name)}</h3>
+        <h3 className="font-medium text-textStandard">{getFriendlyTitle(extension)}</h3>
         <div className="flex items-center gap-2">
           {/* Only show config button for non-builtin extensions */}
           {extension.type !== 'builtin' && (

ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx

@@ -28,9 +28,21 @@ export default function ExtensionList({ extensions, onToggle, onConfigure }: Ext
 
 // Helper functions
 // Helper function to get a friendly title from extension name
-export function getFriendlyTitle(name: string): string {
+export function getFriendlyTitle(extension: FixedExtensionEntry): string {
+  let name = '';
+
+  // if it's a builtin, check if there's a display_name (old configs didn't have this field)
+  if (extension.type === 'builtin' && 'display_name' in extension && extension.display_name) {
+    // If we have a display_name for a builtin, use it directly
+    return extension.display_name;
+  } else {
+    // For non-builtins or builtins without display_name
+    name = extension.name;
+  }
+
+  // Format the name to be more readable
   return name
-    .split('-')
+    .split(/[-_]/) // Split on hyphens and underscores
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 }