Show modal selector after configuring a provider (#6005)

ui/desktop/src/components/ProviderGuard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useConfig } from './ConfigContext';
 import { SetupModal } from './SetupModal';
@@ -8,6 +8,8 @@ import WelcomeGooseLogo from './WelcomeGooseLogo';
 import { toastService } from '../toasts';
 import { OllamaSetup } from './OllamaSetup';
 import ApiKeyTester from './ApiKeyTester';
+import { SwitchModelModal } from './settings/models/subcomponents/SwitchModelModal';
+import { createNavigationHandler } from '../utils/navigationUtils';
 
 import { Goose, OpenRouter, Tetrate } from './icons';
 
@@ -24,6 +26,10 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
   const [showFirstTimeSetup, setShowFirstTimeSetup] = useState(false);
   const [showOllamaSetup, setShowOllamaSetup] = useState(false);
   const [userInActiveSetup, setUserInActiveSetup] = useState(false);
+  const [showSwitchModelModal, setShowSwitchModelModal] = useState(false);
+  const [switchModelProvider, setSwitchModelProvider] = useState<string | null>(null);
+
+  const setView = useMemo(() => createNavigationHandler(navigate), [navigate]);
 
   const [openRouterSetupState, setOpenRouterSetupState] = useState<{
     show: boolean;
@@ -45,18 +51,8 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
     try {
       const result = await startTetrateSetup();
       if (result.success) {
-        setTetrateSetupState({
+        setSwitchModelProvider('tetrate');
-          show: true,
+        setShowSwitchModelModal(true);
-          title: 'Setup Complete!',
-          message: result.message,
-          showRetry: false,
-          autoClose: 3000,
-        });
-        setTimeout(() => {
-          setShowFirstTimeSetup(false);
-          setHasProvider(true);
-          navigate('/', { replace: true });
-        }, 3000);
       } else {
         setTetrateSetupState({
           show: true,
@@ -76,34 +72,33 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
     }
   };
 
-  const handleApiKeySuccess = async (provider: string, model: string, apiKey: string) => {
+  const handleApiKeySuccess = async (provider: string, _model: string, apiKey: string) => {
     const keyName = `${provider.toUpperCase()}_API_KEY`;
     await upsert(keyName, apiKey, true);
     await upsert('GOOSE_PROVIDER', provider, false);
-    await upsert('GOOSE_MODEL', model, false);
 
+    setSwitchModelProvider(provider);
+    setShowSwitchModelModal(true);
+  };
+
+  const handleModelSelected = () => {
+    setShowSwitchModelModal(false);
     setUserInActiveSetup(false);
     setShowFirstTimeSetup(false);
     setHasProvider(true);
     navigate('/', { replace: true });
   };
 
+  const handleSwitchModelClose = () => {
+    setShowSwitchModelModal(false);
+  };
+
   const handleOpenRouterSetup = async () => {
     try {
       const result = await startOpenRouterSetup();
       if (result.success) {
-        setOpenRouterSetupState({
+        setSwitchModelProvider('openrouter');
-          show: true,
+        setShowSwitchModelModal(true);
-          title: 'Setup Complete!',
-          message: result.message,
-          showRetry: false,
-          autoClose: 3000,
-        });
-        setTimeout(() => {
-          setShowFirstTimeSetup(false);
-          setHasProvider(true);
-          navigate('/', { replace: true });
-        }, 3000);
       } else {
         setOpenRouterSetupState({
           show: true,
@@ -337,6 +332,17 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
             autoClose={tetrateSetupState.autoClose}
           />
         )}
+
+        {showSwitchModelModal && (
+          <SwitchModelModal
+            sessionId={null}
+            onClose={handleSwitchModelClose}
+            setView={setView}
+            onModelSelected={handleModelSelected}
+            initialProvider={switchModelProvider}
+            titleOverride="Choose Model"
+          />
+        )}
       </div>
     );
   }

ui/desktop/src/components/settings/models/subcomponents/SwitchModelModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import { ArrowLeftRight, ExternalLink } from 'lucide-react';
+import { Bot, ExternalLink } from 'lucide-react';
 
 import {
   Dialog,
@@ -20,18 +20,66 @@ import Model, { getProviderMetadata, fetchModelsForProviders } from '../modelInt
 import { getPredefinedModelsFromEnv, shouldShowPredefinedModels } from '../predefinedModelsUtils';
 import { ProviderType } from '../../../../api';
 
+const PREFERRED_MODEL_PATTERNS = [
+  /claude-sonnet-4/i,
+  /claude-4/i,
+  /gpt-4o(?!-mini)/i,
+  /claude-3-5-sonnet/i,
+  /claude-3\.5-sonnet/i,
+  /gpt-4-turbo/i,
+  /gpt-4(?!-|o)/i,
+  /claude-3-opus/i,
+  /claude-3-sonnet/i,
+  /gemini-pro/i,
+  /llama-3/i,
+  /gpt-4o-mini/i,
+  /claude-3-haiku/i,
+  /gemini/i,
+];
+
+function findPreferredModel(
+  models: { value: string; label: string; provider: string }[]
+): string | null {
+  if (models.length === 0) return null;
+
+  const validModels = models.filter(
+    (m) => m.value !== 'custom' && m.value !== '__loading__' && !m.value.startsWith('__')
+  );
+
+  if (validModels.length === 0) return null;
+
+  for (const pattern of PREFERRED_MODEL_PATTERNS) {
+    const match = validModels.find((m) => pattern.test(m.value));
+    if (match) {
+      return match.value;
+    }
+  }
+
+  return validModels[0].value;
+}
+
 type SwitchModelModalProps = {
   sessionId: string | null;
   onClose: () => void;
   setView: (view: View) => void;
+  onModelSelected?: () => void;
+  initialProvider?: string | null;
+  titleOverride?: string;
 };
-export const SwitchModelModal = ({ sessionId, onClose, setView }: SwitchModelModalProps) => {
+export const SwitchModelModal = ({
+  sessionId,
+  onClose,
+  setView,
+  onModelSelected,
+  initialProvider,
+  titleOverride,
+}: SwitchModelModalProps) => {
   const { getProviders, getProviderModels, read } = useConfig();
   const { changeModel } = useModelAndProvider();
   const [providerOptions, setProviderOptions] = useState<{ value: string; label: string }[]>([]);
   type ModelOption = { value: string; label: string; provider: string; isDisabled?: boolean };
   const [modelOptions, setModelOptions] = useState<{ options: ModelOption[] }[]>([]);
-  const [provider, setProvider] = useState<string | null>(null);
+  const [provider, setProvider] = useState<string | null>(initialProvider || null);
   const [model, setModel] = useState<string>('');
   const [isCustomModel, setIsCustomModel] = useState(false);
   const [validationErrors, setValidationErrors] = useState({
@@ -95,6 +143,9 @@ export const SwitchModelModal = ({ sessionId, onClose, setView }: SwitchModelMod
       }
 
       await changeModel(sessionId, modelObj);
+      if (onModelSelected) {
+        onModelSelected();
+      }
       onClose();
     }
   };
@@ -209,11 +260,25 @@ export const SwitchModelModal = ({ sessionId, onClose, setView }: SwitchModelMod
     })();
   }, [getProviders, getProviderModels, usePredefinedModels, read]);
 
-  // Filter model options based on selected provider
   const filteredModelOptions = provider
     ? modelOptions.filter((group) => group.options[0]?.provider === provider)
     : [];
 
+  useEffect(() => {
+    if (!provider || loadingModels || model || isCustomModel) return;
+
+    const providerModels = modelOptions
+      .filter((group) => group.options[0]?.provider === provider)
+      .flatMap((group) => group.options);
+
+    if (providerModels.length > 0) {
+      const preferredModel = findPreferredModel(providerModels);
+      if (preferredModel) {
+        setModel(preferredModel);
+      }
+    }
+  }, [provider, modelOptions, loadingModels, model, isCustomModel]);
+
   // Handle model selection change
   const handleModelChange = (newValue: unknown) => {
     const selectedOption = newValue as { value: string; label: string; provider: string } | null;
@@ -277,30 +342,16 @@ export const SwitchModelModal = ({ sessionId, onClose, setView }: SwitchModelMod
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <ArrowLeftRight size={24} className="text-textStandard" />
+            <Bot size={24} className="text-textStandard" />
-            Switch models
+            {titleOverride || 'Switch models'}
           </DialogTitle>
           <DialogDescription>
-            Configure your AI model providers by adding their API keys. Your keys are stored
+            Select a provider and model to use for your conversations.
-            securely and encrypted locally.
           </DialogDescription>
         </DialogHeader>
 
         <div className="flex flex-col gap-4 py-4">
-          <div>
-            <a
-              href={QUICKSTART_GUIDE_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center text-textStandard font-medium text-sm"
-            >
-              <ExternalLink size={16} className="mr-1" />
-              View quick start guide
-            </a>
-          </div>
-
           {usePredefinedModels ? (
-            /* Predefined Models Section */
             <div className="w-full flex flex-col gap-4">
               <div className="flex justify-between items-center">
                 <label className="text-sm font-medium text-textStandard">Choose a model:</label>
@@ -448,13 +499,24 @@ export const SwitchModelModal = ({ sessionId, onClose, setView }: SwitchModelMod
           )}
         </div>
 
-        <DialogFooter className="pt-2">
+        <DialogFooter className="pt-4 flex-col sm:flex-row gap-3">
-          <Button variant="outline" onClick={handleClose} type="button">
+          <a
-            Cancel
+            href={QUICKSTART_GUIDE_URL}
-          </Button>
+            target="_blank"
-          <Button onClick={handleSubmit} disabled={!isValid}>
+            rel="noopener noreferrer"
-            Select model
+            className="inline-flex items-center text-text-muted hover:text-textStandard text-sm mr-auto"
-          </Button>
+          >
+            <ExternalLink size={14} className="mr-1" />
+            Quick start guide
+          </a>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleClose} type="button">
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit} disabled={!isValid}>
+              Select model
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -10,6 +10,8 @@ import {
 import { Plus } from 'lucide-react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/dialog';
 import CustomProviderForm from './modal/subcomponents/forms/CustomProviderForm';
+import { SwitchModelModal } from '../models/subcomponents/SwitchModelModal';
+import type { View } from '../../../utils/navigationUtils';
 
 const GridLayout = memo(function GridLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -50,21 +52,30 @@ function ProviderCards({
   providers,
   isOnboarding,
   refreshProviders,
-  onProviderLaunch,
+  setView,
+  onModelSelected,
 }: {
   providers: ProviderDetails[];
   isOnboarding: boolean;
   refreshProviders?: () => void;
-  onProviderLaunch: (provider: ProviderDetails) => void;
+  setView?: (view: View) => void;
+  onModelSelected?: () => void;
 }) {
   const [configuringProvider, setConfiguringProvider] = useState<ProviderDetails | null>(null);
   const [showCustomProviderModal, setShowCustomProviderModal] = useState(false);
+  const [showSwitchModelModal, setShowSwitchModelModal] = useState(false);
+  const [switchModelProvider, setSwitchModelProvider] = useState<string | null>(null);
   const [editingProvider, setEditingProvider] = useState<{
     id: string;
     config: DeclarativeProviderConfig;
     isEditable: boolean;
   } | null>(null);
 
+  const handleProviderLaunchWithModelSelection = useCallback((provider: ProviderDetails) => {
+    setSwitchModelProvider(provider.name);
+    setShowSwitchModelModal(true);
+  }, []);
+
   const openModal = useCallback(
     (provider: ProviderDetails) => setConfiguringProvider(provider),
     []
@@ -101,11 +112,14 @@ function ProviderCards({
         body: data,
         throwOnError: true,
       });
+      const providerId = editingProvider.id;
       setShowCustomProviderModal(false);
       setEditingProvider(null);
       if (refreshProviders) {
         refreshProviders();
       }
+      setSwitchModelProvider(providerId);
+      setShowSwitchModelModal(true);
     },
     [editingProvider, refreshProviders]
   );
@@ -122,6 +136,32 @@ function ProviderCards({
     }
   }, [refreshProviders]);
 
+  const onProviderConfigured = useCallback(
+    (provider: ProviderDetails) => {
+      setConfiguringProvider(null);
+      if (refreshProviders) {
+        refreshProviders();
+      }
+      setSwitchModelProvider(provider.name);
+      setShowSwitchModelModal(true);
+    },
+    [refreshProviders]
+  );
+
+  const onCloseSwitchModelModal = useCallback(() => {
+    setShowSwitchModelModal(false);
+  }, []);
+
+  const handleSetView = useCallback(
+    (view: View) => {
+      setShowSwitchModelModal(false);
+      if (setView) {
+        setView(view);
+      }
+    },
+    [setView]
+  );
+
   const handleCreateCustomProvider = useCallback(
     async (data: UpdateCustomProviderRequest) => {
       const { createCustomProvider } = await import('../../../api');
@@ -130,6 +170,7 @@ function ProviderCards({
       if (refreshProviders) {
         refreshProviders();
       }
+      setShowSwitchModelModal(true);
     },
     [refreshProviders]
   );
@@ -144,7 +185,7 @@ function ProviderCards({
         key={provider.name}
         provider={provider}
         onConfigure={() => configureProviderViaModal(provider)}
-        onLaunch={() => onProviderLaunch(provider)}
+        onLaunch={() => handleProviderLaunchWithModelSelection(provider)}
         isOnboarding={isOnboarding}
       />
     ));
@@ -154,7 +195,7 @@ function ProviderCards({
     );
 
     return cards;
-  }, [providers, isOnboarding, configureProviderViaModal, onProviderLaunch]);
+  }, [providers, isOnboarding, configureProviderViaModal, handleProviderLaunchWithModelSelection]);
 
   const initialData = editingProvider && {
     engine: editingProvider.config.engine.toLowerCase() + '_compatible',
@@ -187,6 +228,17 @@ function ProviderCards({
         <ProviderConfigurationModal
           provider={configuringProvider}
           onClose={onCloseProviderConfig}
+          onConfigured={onProviderConfigured}
+        />
+      )}
+      {showSwitchModelModal && (
+        <SwitchModelModal
+          sessionId={null}
+          onClose={onCloseSwitchModelModal}
+          setView={handleSetView}
+          onModelSelected={onModelSelected}
+          initialProvider={switchModelProvider}
+          titleOverride="Choose Model"
         />
       )}
     </>
@@ -197,12 +249,14 @@ export default function ProviderGrid({
   providers,
   isOnboarding,
   refreshProviders,
-  onProviderLaunch,
+  setView,
+  onModelSelected,
 }: {
   providers: ProviderDetails[];
   isOnboarding: boolean;
   refreshProviders?: () => void;
-  onProviderLaunch?: (provider: ProviderDetails) => void;
+  setView?: (view: View) => void;
+  onModelSelected?: () => void;
 }) {
   return (
     <GridLayout>
@@ -210,7 +264,8 @@ export default function ProviderGrid({
         providers={providers}
         isOnboarding={isOnboarding}
         refreshProviders={refreshProviders}
-        onProviderLaunch={onProviderLaunch || (() => {})}
+        setView={setView}
+        onModelSelected={onModelSelected}
       />
     </GridLayout>
   );

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

@@ -1,10 +1,11 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { ScrollArea } from '../../ui/scroll-area';
 import BackButton from '../../ui/BackButton';
 import ProviderGrid from './ProviderGrid';
 import { useConfig } from '../../ConfigContext';
-import { ProviderDetails, setConfigProvider } from '../../../api';
+import { ProviderDetails } from '../../../api';
-import { toastService } from '../../../toasts';
+import { createNavigationHandler } from '../../../utils/navigationUtils';
 
 interface ProviderSettingsProps {
   onClose: () => void;
@@ -18,10 +19,13 @@ export default function ProviderSettings({
   onProviderLaunched,
 }: ProviderSettingsProps) {
   const { getProviders } = useConfig();
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
   const [providers, setProviders] = useState<ProviderDetails[]>([]);
   const initialLoadDone = useRef(false);
 
+  const setView = useMemo(() => createNavigationHandler(navigate), [navigate]);
+
   // Create a function to load providers that can be called multiple times
   const loadProviders = useCallback(async () => {
     setLoading(true);
@@ -54,47 +58,6 @@ export default function ProviderSettings({
     }
   }, [getProviders]);
 
-  // Handler for when a provider is launched if this component is used as part of onboarding page
-  const handleProviderLaunch = useCallback(
-    async (provider: ProviderDetails) => {
-      const provider_name = provider.name;
-      const model = provider.metadata.default_model;
-
-      try {
-        await setConfigProvider({
-          body: {
-            provider: provider_name,
-            model,
-          },
-          throwOnError: true,
-        });
-
-        toastService.configure({ silent: false });
-        toastService.success({
-          title: 'Success!',
-          msg: `Started goose with ${model} by ${provider.metadata.display_name}. You can change the model via the dropdown.`,
-        });
-
-        if (onProviderLaunched) {
-          onProviderLaunched();
-        } else {
-          onClose();
-        }
-      } catch (error) {
-        console.error(`Failed to initialize with provider ${provider_name}:`, error);
-
-        // Show error toast
-        toastService.configure({ silent: false });
-        toastService.error({
-          title: 'Initialization Failed',
-          msg: `Failed to initialize with ${provider.metadata.display_name}: ${error instanceof Error ? error.message : String(error)}`,
-          traceback: error instanceof Error ? error.stack || '' : '',
-        });
-      }
-    },
-    [onClose, onProviderLaunched]
-  );
-
   return (
     <div className="h-screen w-full flex flex-col bg-background-default text-text-default">
       <ScrollArea className="flex-1 w-full">
@@ -127,8 +90,9 @@ export default function ProviderSettings({
                 <ProviderGrid
                   providers={providers}
                   isOnboarding={isOnboarding}
-                  onProviderLaunch={handleProviderLaunch}
                   refreshProviders={refreshProviders}
+                  setView={setView}
+                  onModelSelected={onProviderLaunched}
                 />
               )}
             </div>

ui/desktop/src/components/settings/providers/modal/ProviderConfiguationModal.tsx

@@ -23,11 +23,13 @@ import { Button } from '../../../../components/ui/button';
 interface ProviderConfigurationModalProps {
   provider: ProviderDetails;
   onClose: () => void;
+  onConfigured?: (provider: ProviderDetails) => void;
 }
 
 export default function ProviderConfigurationModal({
   provider,
   onClose,
+  onConfigured,
 }: ProviderConfigurationModalProps) {
   const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
   const { upsert, remove } = useConfig();
@@ -83,7 +85,11 @@ export default function ProviderConfigurationModal({
 
     try {
       await providerConfigSubmitHandler(upsert, provider, toSubmit);
-      onClose();
+      if (onConfigured) {
+        onConfigured(provider);
+      } else {
+        onClose();
+      }
     } catch (error) {
       setError(`${error}`);
     }