fix: resolve provider switching issues and model display problems

🔧 Provider Switching Fixes:
- Fix useSelectedModel hook with React useMemo for proper dependency management
- Resolve Gemini and static providers model display issues when switching
- Optimize apiModelId update logic to only apply to static providers
- Ensure correct model values are displayed when switching between API providers

🚀 Performance Improvements:
- Improve provider switching responsiveness
- Fix React Hook dependency warnings in useSelectedModel

Based on upstream v3.18.3 with proper Git merge

Author: indiesewell

webview-ui/src/components/settings/ApiOptions.tsx

@@ -125,11 +125,32 @@ const ApiOptions = ({
 	const { data: routerModels, refetch: refetchRouterModels } = useRouterModels()
 
 	// Update `apiModelId` whenever `selectedModelId` changes.
+	// Only for static providers that use apiModelId field.
 	useEffect(() => {
-		if (selectedModelId) {
-			setApiConfigurationField("apiModelId", selectedModelId)
+		if (selectedModelId && selectedProvider) {
+			// Only update apiModelId for static providers, not router providers
+			const staticProviders = [
+				"gemini",
+				"anthropic",
+				"openai-native",
+				"bedrock",
+				"vertex",
+				"deepseek",
+				"mistral",
+				"xai",
+				"groq",
+				"chutes",
+			]
+
+			if (staticProviders.includes(selectedProvider)) {
+				// Only update if the current apiModelId is different from selectedModelId
+				// This prevents overwriting user-saved values during provider switching
+				if (apiConfiguration.apiModelId !== selectedModelId) {
+					setApiConfigurationField("apiModelId", selectedModelId)
+				}
+			}
 		}
-	}, [selectedModelId, setApiConfigurationField])
+	}, [selectedModelId, selectedProvider, apiConfiguration.apiModelId, setApiConfigurationField])
 
 	// Debounced refresh model updates, only executed 250ms after the user
 	// stops typing.
@@ -226,6 +247,8 @@ const ApiOptions = ({
 					}
 					break
 			}
+			// Handle static providers that use apiModelId
+			// Don't modify apiModelId during provider switching - let useSelectedModel handle it
 
 			setApiConfigurationField("apiProvider", value)
 		},

webview-ui/src/components/ui/hooks/useSelectedModel.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react"
 import {
 	type ProviderName,
 	type ProviderSettings,
@@ -43,17 +44,33 @@ export const useSelectedModel = (apiConfiguration?: ProviderSettings) => {
 	const routerModels = useRouterModels()
 	const openRouterModelProviders = useOpenRouterModelProviders(openRouterModelId)
 
-	const { id, info } =
-		apiConfiguration &&
-		typeof routerModels.data !== "undefined" &&
-		typeof openRouterModelProviders.data !== "undefined"
+	// Create a default empty router models structure
+	const emptyRouterModels: RouterModels = useMemo(
+		() => ({
+			openrouter: {},
+			requesty: {},
+			glama: {},
+			unbound: {},
+			litellm: {},
+		}),
+		[],
+	)
+
+	const { id, info } = useMemo(() => {
+		return apiConfiguration && routerModels.data && openRouterModelProviders.data
 			? getSelectedModel({
 					provider,
 					apiConfiguration,
-					routerModels: routerModels.data,
+					routerModels: (routerModels.data as RouterModels) || emptyRouterModels,
 					openRouterModelProviders: openRouterModelProviders.data,
 				})
-			: { id: anthropicDefaultModelId, info: undefined }
+			: getSelectedModel({
+					provider,
+					apiConfiguration: apiConfiguration || {},
+					routerModels: emptyRouterModels,
+					openRouterModelProviders: {},
+				})
+	}, [provider, apiConfiguration, routerModels.data, openRouterModelProviders.data, emptyRouterModels])
 
 	return {
 		provider,