From a9b8c6df669fde24876ad3290ae06fe53f181902 Mon Sep 17 00:00:00 2001
From: Lily Delalande <ldelalande@squareup.com>
Date: Mon, 24 Mar 2025 21:38:16 -0400
Subject: [PATCH 1/2] add description field  to modal

---
 .../extensions/modal/ExtensionInfoFields.tsx  | 73 ++++++++++++-------
 .../subcomponents/ExtensionList.tsx           |  4 +-
 .../settings_v2/extensions/utils.ts           |  6 ++
 3 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx
index b0bf0b7414b4..46ac6855aa58 100644
--- a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx
+++ b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx
@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 interface ExtensionInfoFieldsProps {
   name: string;
   type: 'stdio' | 'sse' | 'builtin';
+  description: string;
   onChange: (key: string, value: any) => void;
   submitAttempted: boolean;
 }
@@ -12,6 +13,7 @@ interface ExtensionInfoFieldsProps {
 export default function ExtensionInfoFields({
   name,
   type,
+  description,
   onChange,
   submitAttempted,
 }: ExtensionInfoFieldsProps) {
@@ -20,38 +22,55 @@ export default function ExtensionInfoFields({
   };
 
   return (
-    <div className="flex justify-between gap-4 mb-6">
-      <div className="flex-1">
-        <label className="text-sm font-medium mb-2 block text-textStandard">Extension Name</label>
+    <div className="flex flex-col gap-4 mb-6">
+      {/* Top row with Name and Type side by side */}
+      <div className="flex justify-between gap-4">
+        <div className="flex-1">
+          <label className="text-sm font-medium mb-2 block text-textStandard">Extension Name</label>
+          <div className="relative">
+            <Input
+              value={name}
+              onChange={(e) => onChange('name', e.target.value)}
+              placeholder="Enter extension name..."
+              className={`${!submitAttempted || isNameValid() ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`}
+            />
+            {submitAttempted && !isNameValid() && (
+              <div className="absolute text-xs text-red-500 mt-1">Name is required</div>
+            )}
+          </div>
+        </div>
+
+        {/* Type Dropdown */}
+        <div className="w-[200px]">
+          <label className="text-sm font-medium mb-2 block text-textStandard">Type</label>
+          <Select
+            value={{ value: type, label: type.toUpperCase() }}
+            onChange={(option: { value: string; label: string } | null) => {
+              if (option) {
+                onChange('type', option.value);
+              }
+            }}
+            options={[
+              { value: 'stdio', label: 'Standard IO (STDIO)' },
+              { value: 'sse', label: 'Security Service Edge (SSE)' },
+            ]}
+            isSearchable={false}
+          />
+        </div>
+      </div>
+
+      {/* Bottom row with Description spanning full width */}
+      <div className="w-full">
+        <label className="text-sm font-medium mb-2 block text-textStandard">Description</label>
         <div className="relative">
           <Input
-            value={name}
-            onChange={(e) => onChange('name', e.target.value)}
-            placeholder="Enter extension name..."
-            className={`${!submitAttempted || isNameValid() ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`}
+            value={description}
+            onChange={(e) => onChange('description', e.target.value)}
+            placeholder="Optional description..."
+            className={`text-textStandard focus:border-borderStandard`}
           />
-          {submitAttempted && !isNameValid() && (
-            <div className="absolute text-xs text-red-500 mt-1">Name is required</div>
-          )}
         </div>
       </div>
-      {/* Type Dropdown */}
-      <div className="w-[200px]">
-        <label className="text-sm font-medium mb-2 block text-textStandard">Type</label>
-        <Select
-          value={{ value: type, label: type.toUpperCase() }}
-          onChange={(option: { value: string; label: string } | null) => {
-            if (option) {
-              onChange('type', option.value);
-            }
-          }}
-          options={[
-            { value: 'stdio', label: 'Standard IO (STDIO)' },
-            { value: 'sse', label: 'Security Service Edge (SSE)' },
-          ]}
-          isSearchable={false}
-        />
-      </div>
     </div>
   );
 }
diff --git a/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx b/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx
index 587a8c957568..6a0c2b5540f7 100644
--- a/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx
+++ b/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx
@@ -59,10 +59,10 @@ export function getSubtitle(config: ExtensionConfig): string {
   }
   if (config.type === 'stdio') {
     const full_command = combineCmdAndArgs(config.cmd, config.args);
-    return `STDIO extension${full_command ? `\n${full_command}` : ''}`;
+    return `STDIO extension${config.description ? `: ${config.description}` : ''}${full_command ? `\n${full_command}` : ''}`;
   }
   if (config.type === 'sse') {
-    return `SSE extension${config.uri ? ` (${config.uri})` : ''}`;
+    return `SSE extension${config.description ? `: ${config.description}` : ''}${config.uri ? ` (${config.uri})` : ''}`;
   }
   return `Unknown type of extension`;
 }
diff --git a/ui/desktop/src/components/settings_v2/extensions/utils.ts b/ui/desktop/src/components/settings_v2/extensions/utils.ts
index 000f84f011be..8804f14969ed 100644
--- a/ui/desktop/src/components/settings_v2/extensions/utils.ts
+++ b/ui/desktop/src/components/settings_v2/extensions/utils.ts
@@ -3,6 +3,7 @@ import { ExtensionConfig } from '../../../api/types.gen';
 
 export interface ExtensionFormData {
   name: string;
+  description: string;
   type: 'stdio' | 'sse' | 'builtin';
   cmd?: string;
   endpoint?: string;
@@ -13,6 +14,7 @@ export interface ExtensionFormData {
 export function getDefaultFormData(): ExtensionFormData {
   return {
     name: '',
+    description: '',
     type: 'stdio',
     cmd: '',
     endpoint: '',
@@ -35,6 +37,8 @@ export function extensionToFormData(extension: FixedExtensionEntry): ExtensionFo
 
   return {
     name: extension.name,
+    description:
+      extension.type === 'stdio' || extension.type === 'sse' ? extension.description : undefined,
     type: extension.type,
     cmd: extension.type === 'stdio' ? combineCmdAndArgs(extension.cmd, extension.args) : undefined,
     endpoint: extension.type === 'sse' ? extension.uri : undefined,
@@ -61,6 +65,7 @@ export function createExtensionConfig(formData: ExtensionFormData): ExtensionCon
     return {
       type: 'stdio',
       name: formData.name,
+      description: formData.description,
       cmd: cmd,
       args: args,
       ...(Object.keys(envs).length > 0 ? { envs } : {}),
@@ -69,6 +74,7 @@ export function createExtensionConfig(formData: ExtensionFormData): ExtensionCon
     return {
       type: 'sse',
       name: formData.name,
+      description: formData.description,
       uri: formData.endpoint, // Assuming endpoint maps to uri for SSE type
       ...(Object.keys(envs).length > 0 ? { envs } : {}),
     };

From d305c715b6a8b84fb1316a22051d435dbb821089 Mon Sep 17 00:00:00 2001
From: Lily Delalande <ldelalande@squareup.com>
Date: Mon, 24 Mar 2025 21:43:46 -0400
Subject: [PATCH 2/2] i dont remember what i did

---
 .../components/settings_v2/extensions/modal/ExtensionModal.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
index 49026af924c5..5434177a556f 100644
--- a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
+++ b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
@@ -177,6 +177,7 @@ export default function ExtensionModal({
           <ExtensionInfoFields
             name={formData.name}
             type={formData.type}
+            description={formData.description}
             onChange={(key, value) => setFormData({ ...formData, [key]: value })}
             submitAttempted={submitAttempted}
           />