Desktop: - No Custom Headers field for custom OpenAI-compatible providers

crates/goose/src/config/declarative_providers.rs

@@ -207,7 +207,11 @@ pub fn update_custom_provider(params: UpdateCustomProviderParams) -> Result<()>
             api_key_env,
             base_url: params.api_url,
             models: model_infos,
-            headers: params.headers.or(existing_config.headers),
+            headers: match params.headers {
+                Some(h) if h.is_empty() => None,
+                Some(h) => Some(h),
+                None => existing_config.headers,
+            },
             timeout_seconds: existing_config.timeout_seconds,
             supports_streaming: params.supports_streaming,
             requires_auth: params.requires_auth,

ui/desktop/src/components/ChatInput.tsx

@@ -126,6 +126,7 @@ export default function ChatInput({
   const [displayValue, setDisplayValue] = useState(initialValue); // For immediate visual feedback
   const [isFocused, setIsFocused] = useState(false);
   const [pastedImages, setPastedImages] = useState<PastedImage[]>([]);
+  const [isFilePickerOpen, setIsFilePickerOpen] = useState(false);
 
   // Derived state - chatState != Idle means we're in some form of loading state
   const isLoading = chatState !== ChatState.Idle;
@@ -148,7 +149,6 @@ export default function ChatInput({
   const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
   const [showCreateRecipeModal, setShowCreateRecipeModal] = useState(false);
   const [showEditRecipeModal, setShowEditRecipeModal] = useState(false);
-  const [isFilePickerOpen, setIsFilePickerOpen] = useState(false);
   const [sessionWorkingDir, setSessionWorkingDir] = useState<string | null>(null);
 
   useEffect(() => {
@@ -1190,13 +1190,11 @@ export default function ChatInput({
 
   return (
     <div
-      className={`flex flex-col relative h-auto p-4 transition-colors ${
-        disableAnimation ? '' : 'page-transition'
-      } ${
-        isFocused
+      className={`flex flex-col relative h-auto p-4 transition-colors ${disableAnimation ? '' : 'page-transition'
+        } ${isFocused
           ? 'border-border-strong hover:border-border-strong'
           : 'border-border-default hover:border-border-default'
-      } bg-background-default z-10 rounded-t-2xl`}
+        } bg-background-default z-10 rounded-t-2xl`}
       data-drop-zone="true"
       onDrop={handleLocalDrop}
       onDragOver={handleLocalDragOver}
@@ -1265,7 +1263,7 @@ export default function ChatInput({
                           size="sm"
                           shape="round"
                           variant="outline"
-                          onClick={() => {}}
+                          onClick={() => { }}
                           disabled={true}
                           className="bg-slate-600 text-white cursor-not-allowed opacity-50 border-slate-600 rounded-full px-6 py-2"
                         >
@@ -1312,13 +1310,12 @@ export default function ChatInput({
                           }
                         }}
                         disabled={isTranscribing}
-                        className={`rounded-full px-6 py-2 ${
-                          isRecording
-                            ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
-                            : isTranscribing
-                              ? 'bg-slate-600 text-white cursor-not-allowed animate-pulse border-slate-600'
-                              : 'bg-slate-600 text-white hover:bg-slate-700 border-slate-600'
-                        }`}
+                        className={`rounded-full px-6 py-2 ${isRecording
+                          ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
+                          : isTranscribing
+                            ? 'bg-slate-600 text-white cursor-not-allowed animate-pulse border-slate-600'
+                            : 'bg-slate-600 text-white hover:bg-slate-700 border-slate-600'
+                          }`}
                       >
                         <Microphone />
                       </Button>
@@ -1356,11 +1353,10 @@ export default function ChatInput({
                       shape="round"
                       variant="outline"
                       disabled={isSubmitButtonDisabled}
-                      className={`rounded-full px-10 py-2 flex items-center gap-2 ${
-                        isSubmitButtonDisabled
-                          ? 'bg-slate-600 text-white cursor-not-allowed opacity-50 border-slate-600'
-                          : 'bg-slate-600 text-white hover:bg-slate-700 border-slate-600 hover:cursor-pointer'
-                      }`}
+                      className={`rounded-full px-10 py-2 flex items-center gap-2 ${isSubmitButtonDisabled
+                        ? 'bg-slate-600 text-white cursor-not-allowed opacity-50 border-slate-600'
+                        : 'bg-slate-600 text-white hover:bg-slate-700 border-slate-600 hover:cursor-pointer'
+                        }`}
                     >
                       <Send className="w-4 h-4" />
                       <span className="text-sm">Send</span>

ui/desktop/src/components/settings/extensions/modal/ExtensionModal.tsx

@@ -156,6 +156,19 @@ export default function ExtensionModal({
   };
 
   const handleHeaderChange = (index: number, field: 'key' | 'value', value: string) => {
+    if (field === 'key') {
+      if (value.includes(' ')) {
+        return;
+      }
+      const trimmedNewKey = value.trim();
+      const normalizedNewKey = trimmedNewKey.toLowerCase();
+      const isDuplicate = formData.headers.some(
+        (h, i) => i !== index && h.key.trim().toLowerCase() === normalizedNewKey,
+      );
+      if (isDuplicate && trimmedNewKey !== '') {
+        return;
+      }
+    }
     const newHeaders = [...formData.headers];
     newHeaders[index][field] = value;
 

ui/desktop/src/components/settings/extensions/modal/HeadersSection.tsx

@@ -44,6 +44,10 @@ export default function HeadersSection({
     const keyEmpty = !newKey.trim();
     const valueEmpty = !newValue.trim();
     const keyHasSpaces = newKey.includes(' ');
+    const normalizedNewKey = newKey.trim().toLowerCase();
+    const isDuplicate = headers.some(
+      h => h.key.trim().toLowerCase() === normalizedNewKey
+    );
 
     if (keyEmpty || valueEmpty) {
       setInvalidFields({
@@ -63,6 +67,15 @@ export default function HeadersSection({
       return;
     }
 
+    if (isDuplicate) {
+      setInvalidFields({
+        key: true,
+        value: false,
+      });
+      setValidationError('A header with this name already exists');
+      return;
+    }
+
     setValidationError(null);
     setInvalidFields({ key: false, value: false });
     onAdd(newKey, newValue);

ui/desktop/src/components/settings/extensions/utils.ts

@@ -100,8 +100,8 @@ export function extensionToFormData(extension: FixedExtensionEntry): ExtensionFo
     description: extension.description || '',
     type:
       extension.type === 'frontend' ||
-      extension.type === 'inline_python' ||
-      extension.type === 'platform'
+        extension.type === 'inline_python' ||
+        extension.type === 'platform'
         ? 'stdio'
         : extension.type,
     cmd: extension.type === 'stdio' ? quoteShell([extension.cmd, ...extension.args]) : undefined,
@@ -155,7 +155,7 @@ export function createExtensionConfig(formData: ExtensionFormData): ExtensionCon
       timeout: formData.timeout,
       uri: formData.endpoint || '',
       ...(env_keys.length > 0 ? { env_keys } : {}),
-      ...(Object.keys(headers).length > 0 ? { headers } : {}),
+      headers,
     };
   } else {
     // For other types

ui/desktop/src/components/settings/providers/ProviderGrid.tsx

@@ -238,6 +238,7 @@ function ProviderCards({
     models: editingProvider.config.models.map((m) => m.name),
     supports_streaming: editingProvider.config.supports_streaming ?? true,
     requires_auth: editingProvider.config.requires_auth ?? true,
+    headers: editingProvider.config.headers ?? undefined,
   };
 
   const editable = editingProvider ? editingProvider.isEditable : true;
@@ -246,7 +247,7 @@ function ProviderCards({
     <>
       {providerCards}
       <Dialog open={showCustomProviderModal} onOpenChange={handleCloseModal}>
-        <DialogContent className="sm:max-w-[600px]">
+        <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>{title}</DialogTitle>
           </DialogHeader>