From 63353644bd65b71fffa173d7bcf727e79bce8a84 Mon Sep 17 00:00:00 2001
From: joshistoast <joshwcorbett@icloud.com>
Date: Tue, 26 May 2026 15:18:01 -0600
Subject: [PATCH 1/2] feat(model manager): external providers UI tweaks

---
 .../ExternalProvidersForm.tsx                 | 103 +++++++++++++-----
 1 file changed, 77 insertions(+), 26 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx
index 9e1b861cce4..c4a000c5c7f 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import {
   Badge,
   Button,
@@ -8,6 +9,7 @@ import {
   FormLabel,
   Heading,
   Input,
+  Switch,
   Text,
   Tooltip,
 } from '@invoke-ai/ui-library';
@@ -19,7 +21,9 @@ import { $installModelsTabIndex } from 'features/modelManagerV2/store/installMod
 import type { ChangeEvent } from 'react';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import type { IconType } from 'react-icons';
 import { PiCheckBold, PiWarningBold } from 'react-icons/pi';
+import { SiAlibabacloud, SiBytedance, SiGooglegemini, SiOpenai } from 'react-icons/si';
 import {
   useGetExternalProviderConfigsQuery,
   useResetExternalProviderConfigMutation,
@@ -30,9 +34,33 @@ import type { ExternalProviderConfig, StarterModel } from 'services/api/types';
 
 const PROVIDER_SORT_ORDER = ['gemini', 'openai', 'seedream', 'alibabacloud'];
 
+function resolveProviderIcon(providerId: string): IconType | null {
+  const provider = providerId.toLowerCase();
+
+  switch (provider) {
+    case 'openai':
+      return SiOpenai;
+    case 'gemini':
+      return SiGooglegemini;
+    case 'seedream':
+      return SiBytedance;
+    case 'alibabacloud':
+      return SiAlibabacloud;
+    default:
+      return null;
+  }
+}
+
+const FORM_CONTROL_SX: SystemStyleObject = {
+  flexDir: 'column',
+  alignItems: 'flex-start',
+  gap: 2,
+};
+
 type ProviderCardProps = {
   provider: ExternalProviderConfig;
   onInstallModels: (providerId: string) => void;
+  iconResolver: (providerId: string) => IconType | null;
 };
 
 type UpdatePayload = {
@@ -47,7 +75,6 @@ export const ExternalProvidersForm = memo(() => {
   const { data: starterModels } = useGetStarterModelsQuery();
   const [installModel] = useInstallModel();
   const { getIsInstalled, buildModelInstallArg } = useBuildModelInstallArg();
-  const tabIndex = useStore($installModelsTabIndex);
 
   const externalModelsByProvider = useMemo(() => {
     const groups = new Map<string, StarterModel[]>();
@@ -107,8 +134,9 @@ export const ExternalProvidersForm = memo(() => {
   return (
     <Flex flexDir="column" height="100%" gap={4}>
       <Flex flexDir="column" gap={1}>
-        <Heading size="sm">{t('modelManager.externalSetupTitle')}</Heading>
-        <Text color="base.300">{t('modelManager.externalSetupDescription')}</Text>
+        <Heading size="md">{t('modelManager.externalSetupTitle')}</Heading>
+        <Text variant="subtext">{t('modelManager.externalSetupDescription')}</Text>
+        <Text variant="subtext">{t('modelManager.externalSetupFooter')}</Text>
       </Flex>
       <ScrollableContent>
         <Flex flexDir="column" gap={4}>
@@ -120,31 +148,29 @@ export const ExternalProvidersForm = memo(() => {
             <ProviderCard
               key={provider.provider_id}
               provider={provider}
+              iconResolver={resolveProviderIcon}
               onInstallModels={handleInstallProviderModels}
             />
           ))}
         </Flex>
       </ScrollableContent>
-      {tabIndex === 3 && (
-        <Text variant="subtext" color="base.400">
-          {t('modelManager.externalSetupFooter')}
-        </Text>
-      )}
     </Flex>
   );
 });
 
 ExternalProvidersForm.displayName = 'ExternalProvidersForm';
 
-const ProviderCard = memo(({ provider, onInstallModels }: ProviderCardProps) => {
+const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: ProviderCardProps) => {
   const { t } = useTranslation();
   const [apiKey, setApiKey] = useState('');
   const [baseUrl, setBaseUrl] = useState(provider.base_url ?? '');
   const [saveConfig, { isLoading }] = useSetExternalProviderConfigMutation();
   const [resetConfig, { isLoading: isResetting }] = useResetExternalProviderConfigMutation();
+  const [overrideBaseUrl, setOverrideBaseUrl] = useState(!!provider.base_url);
 
   useEffect(() => {
     setBaseUrl(provider.base_url ?? '');
+    setOverrideBaseUrl(!!provider.base_url);
   }, [provider.base_url]);
 
   const handleSave = useCallback(() => {
@@ -173,6 +199,7 @@ const ProviderCard = memo(({ provider, onInstallModels }: ProviderCardProps) =>
         }
         if (result.base_url !== undefined) {
           setBaseUrl(result.base_url ?? '');
+          setOverrideBaseUrl(!!result.base_url);
         }
       });
   }, [apiKey, baseUrl, onInstallModels, provider.base_url, provider.provider_id, saveConfig]);
@@ -183,6 +210,7 @@ const ProviderCard = memo(({ provider, onInstallModels }: ProviderCardProps) =>
       .then((result) => {
         setApiKey('');
         setBaseUrl(result.base_url ?? '');
+        setOverrideBaseUrl(!!result.base_url);
       });
   }, [provider.provider_id, resetConfig]);
 
@@ -206,21 +234,34 @@ const ProviderCard = memo(({ provider, onInstallModels }: ProviderCardProps) =>
     </Badge>
   );
 
+  const handleOverrideBaseUrlChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    setOverrideBaseUrl(event.target.checked);
+    if (!event.target.checked) {
+      setBaseUrl('');
+    }
+  }, []);
+
+  const ProviderIcon = iconResolver(provider.provider_id);
+
   return (
-    <Card p={4} gap={4} variant="outline">
+    <Card p={4} gap={2} layerStyle="second">
       <Flex justifyContent="space-between" alignItems="center" flexWrap="wrap" gap={3}>
-        <Flex flexDir="column" gap={1}>
-          <Heading size="xs" textTransform="capitalize">
-            {provider.provider_id}
-          </Heading>
-          <Text variant="subtext">
-            {t('modelManager.externalProviderCardDescription', { providerId: provider.provider_id })}
-          </Text>
+        <Flex alignItems="start" gap="4">
+          {ProviderIcon && <ProviderIcon />}
+          <Flex flexDir="column" gap={1} mt="-0.5">
+            <Heading size="xs" textTransform="capitalize" display="flex" alignItems="center" gap={2}>
+              {provider.provider_id}
+            </Heading>
+            <Text variant="subtext">
+              {t('modelManager.externalProviderCardDescription', { providerId: provider.provider_id })}
+            </Text>
+          </Flex>
         </Flex>
         {statusBadge}
       </Flex>
       <Flex flexDir="column" gap={4}>
-        <FormControl>
+        <FormControl sx={FORM_CONTROL_SX}>
           <FormLabel>{t('modelManager.externalApiKey')}</FormLabel>
           <Input
             type="password"
@@ -235,16 +276,26 @@ const ProviderCard = memo(({ provider, onInstallModels }: ProviderCardProps) =>
           />
           <FormHelperText>{t('modelManager.externalApiKeyHelper')}</FormHelperText>
         </FormControl>
-        <FormControl>
-          <FormLabel>{t('modelManager.externalBaseUrl')}</FormLabel>
-          <Input
-            placeholder={t('modelManager.externalBaseUrlPlaceholder')}
-            value={baseUrl}
-            onChange={handleBaseUrlChange}
+        <FormControl display="flex" alignItems="center">
+          <Switch
+            id={`${provider.provider_id}-override-baseurl`}
+            isChecked={overrideBaseUrl}
+            onChange={handleOverrideBaseUrlChange}
           />
-          <FormHelperText>{t('modelManager.externalBaseUrlHelper')}</FormHelperText>
+          <FormLabel htmlFor={`${provider.provider_id}-override-baseurl`}>Override Base URL</FormLabel>
         </FormControl>
-        <Flex gap={2} justifyContent="flex-end" flexWrap="wrap">
+        <Flex hidden={!overrideBaseUrl ? true : undefined}>
+          <FormControl sx={FORM_CONTROL_SX}>
+            <FormLabel>{t('modelManager.externalBaseUrl')}</FormLabel>
+            <Input
+              placeholder={t('modelManager.externalBaseUrlPlaceholder')}
+              value={baseUrl}
+              onChange={handleBaseUrlChange}
+            />
+            <FormHelperText>{t('modelManager.externalBaseUrlHelper')}</FormHelperText>
+          </FormControl>
+        </Flex>
+        <Flex gap={2} justifyContent="flex-end" flexWrap="wrap" borderTopWidth="1px" pt="4">
           <Tooltip label={t('modelManager.externalResetHelper')}>
             <Button variant="ghost" onClick={handleReset} isLoading={isResetting}>
               {t('common.reset')}

From a7e6107467cc278726f4f520041a48bec79a05ad Mon Sep 17 00:00:00 2001
From: joshistoast <joshwcorbett@icloud.com>
Date: Tue, 26 May 2026 15:24:28 -0600
Subject: [PATCH 2/2] feat(model manager): external providers form UX

- use toasts for updates
- improve state update handling
- pass linting
---
 invokeai/frontend/web/public/locales/en.json  |  3 +
 .../ExternalProvidersForm.tsx                 | 66 ++++++++++++++-----
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 3e88d460e55..8d4503460af 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1165,9 +1165,12 @@
         "externalApiKeyPlaceholderSet": "API key configured",
         "externalApiKeyHelper": "Stored in api_keys.yaml in your InvokeAI root directory.",
         "externalBaseUrl": "Base URL (optional)",
+        "externalOverrideBaseUrl": "Override Base URL",
         "externalBaseUrlPlaceholder": "https://...",
         "externalBaseUrlHelper": "Override the default API base URL if needed.",
         "externalResetHelper": "Clear API key and base URL.",
+        "externalProviderSaveFailed": "Failed to save external provider configuration.",
+        "externalProviderResetFailed": "Failed to reset external provider configuration.",
         "height": "Height",
         "huggingFace": "HuggingFace",
         "huggingFacePlaceholder": "owner/model-name",
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx
index c4a000c5c7f..b4bbe8d6335 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ExternalProviders/ExternalProvidersForm.tsx
@@ -12,12 +12,11 @@ import {
   Switch,
   Text,
   Tooltip,
+  useToast,
 } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { useBuildModelInstallArg } from 'features/modelManagerV2/hooks/useBuildModelsToInstall';
 import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
-import { $installModelsTabIndex } from 'features/modelManagerV2/store/installModelsStore';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -66,7 +65,7 @@ type ProviderCardProps = {
 type UpdatePayload = {
   provider_id: string;
   api_key?: string;
-  base_url?: string;
+  base_url?: string | null;
 };
 
 export const ExternalProvidersForm = memo(() => {
@@ -82,7 +81,7 @@ export const ExternalProvidersForm = memo(() => {
       if (!model.source.startsWith('external://')) {
         continue;
       }
-      const providerId = model.source.replace('external://', '').split('/')[0];
+      const providerId = model.source.slice('external://'.length).split('/')[0];
       if (!providerId) {
         continue;
       }
@@ -162,6 +161,7 @@ ExternalProvidersForm.displayName = 'ExternalProvidersForm';
 
 const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: ProviderCardProps) => {
   const { t } = useTranslation();
+  const toast = useToast();
   const [apiKey, setApiKey] = useState('');
   const [baseUrl, setBaseUrl] = useState(provider.base_url ?? '');
   const [saveConfig, { isLoading }] = useSetExternalProviderConfigMutation();
@@ -169,9 +169,17 @@ const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: Provider
   const [overrideBaseUrl, setOverrideBaseUrl] = useState(!!provider.base_url);
 
   useEffect(() => {
+    setApiKey('');
     setBaseUrl(provider.base_url ?? '');
     setOverrideBaseUrl(!!provider.base_url);
-  }, [provider.base_url]);
+  }, [provider.base_url, provider.provider_id]);
+
+  const hasBaseUrlChange = useMemo(() => {
+    if (!overrideBaseUrl) {
+      return provider.base_url !== null;
+    }
+    return baseUrl.trim() !== (provider.base_url ?? '');
+  }, [baseUrl, overrideBaseUrl, provider.base_url]);
 
   const handleSave = useCallback(() => {
     const trimmedApiKey = apiKey.trim();
@@ -182,7 +190,9 @@ const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: Provider
     if (trimmedApiKey) {
       updatePayload.api_key = trimmedApiKey;
     }
-    if (trimmedBaseUrl !== (provider.base_url ?? '')) {
+    if (!overrideBaseUrl && provider.base_url !== null) {
+      updatePayload.base_url = null;
+    } else if (overrideBaseUrl && trimmedBaseUrl !== (provider.base_url ?? '')) {
       updatePayload.base_url = trimmedBaseUrl;
     }
 
@@ -193,16 +203,31 @@ const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: Provider
     saveConfig(updatePayload)
       .unwrap()
       .then((result) => {
-        if (result.api_key_configured) {
+        if (trimmedApiKey && result.api_key_configured) {
           setApiKey('');
           onInstallModels(provider.provider_id);
         }
-        if (result.base_url !== undefined) {
-          setBaseUrl(result.base_url ?? '');
-          setOverrideBaseUrl(!!result.base_url);
-        }
+        setBaseUrl(result.base_url ?? '');
+        setOverrideBaseUrl(!!result.base_url);
+      })
+      .catch(() => {
+        toast({
+          id: `EXTERNAL_PROVIDER_SAVE_FAILED_${provider.provider_id}`,
+          title: t('modelManager.externalProviderSaveFailed'),
+          status: 'error',
+        });
       });
-  }, [apiKey, baseUrl, onInstallModels, provider.base_url, provider.provider_id, saveConfig]);
+  }, [
+    apiKey,
+    baseUrl,
+    onInstallModels,
+    overrideBaseUrl,
+    provider.base_url,
+    provider.provider_id,
+    saveConfig,
+    t,
+    toast,
+  ]);
 
   const handleReset = useCallback(() => {
     resetConfig(provider.provider_id)
@@ -211,8 +236,15 @@ const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: Provider
         setApiKey('');
         setBaseUrl(result.base_url ?? '');
         setOverrideBaseUrl(!!result.base_url);
+      })
+      .catch(() => {
+        toast({
+          id: `EXTERNAL_PROVIDER_RESET_FAILED_${provider.provider_id}`,
+          title: t('modelManager.externalProviderResetFailed'),
+          status: 'error',
+        });
       });
-  }, [provider.provider_id, resetConfig]);
+  }, [provider.provider_id, resetConfig, t, toast]);
 
   const handleApiKeyChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setApiKey(event.target.value);
@@ -282,9 +314,11 @@ const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: Provider
             isChecked={overrideBaseUrl}
             onChange={handleOverrideBaseUrlChange}
           />
-          <FormLabel htmlFor={`${provider.provider_id}-override-baseurl`}>Override Base URL</FormLabel>
+          <FormLabel htmlFor={`${provider.provider_id}-override-baseurl`}>
+            {t('modelManager.externalOverrideBaseUrl')}
+          </FormLabel>
         </FormControl>
-        <Flex hidden={!overrideBaseUrl ? true : undefined}>
+        <Flex hidden={!overrideBaseUrl}>
           <FormControl sx={FORM_CONTROL_SX}>
             <FormLabel>{t('modelManager.externalBaseUrl')}</FormLabel>
             <Input
@@ -305,7 +339,7 @@ const ProviderCard = memo(({ provider, onInstallModels, iconResolver }: Provider
             colorScheme="invokeYellow"
             onClick={handleSave}
             isLoading={isLoading}
-            isDisabled={!apiKey.trim() && baseUrl.trim() === (provider.base_url ?? '')}
+            isDisabled={!apiKey.trim() && !hasBaseUrlChange}
           >
             {t('common.save')}
           </Button>