fix: show model id error below model selector

Author: elianiva

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

@@ -14,7 +14,7 @@ import {
 } from "@roo-code/types"
 
 import { vscode } from "@src/utils/vscode"
-import { validateApiConfiguration } from "@src/utils/validate"
+import { validateApiConfigurationExcludingModelErrors, getModelValidationError } from "@src/utils/validate"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useRouterModels } from "@src/components/ui/hooks/useRouterModels"
 import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
@@ -176,8 +176,11 @@ const ApiOptions = ({
 	)
 
 	useEffect(() => {
-		const apiValidationResult = validateApiConfiguration(apiConfiguration, routerModels, organizationAllowList)
-
+		const apiValidationResult = validateApiConfigurationExcludingModelErrors(
+			apiConfiguration,
+			routerModels,
+			organizationAllowList,
+		)
 		setErrorMessage(apiValidationResult)
 	}, [apiConfiguration, routerModels, organizationAllowList, setErrorMessage])
 
@@ -197,51 +200,58 @@ const ApiOptions = ({
 
 	const onProviderChange = useCallback(
 		(value: ProviderName) => {
-			// It would be much easier to have a single attribute that stores
-			// the modelId, but we have a separate attribute for each of
-			// OpenRouter, Glama, Unbound, and Requesty.
-			// If you switch to one of these providers and the corresponding
-			// modelId is not set then you immediately end up in an error state.
-			// To address that we set the modelId to the default value for th
-			// provider if it's not already set.
+			setApiConfigurationField("apiProvider", value)
+
+			// Helper function to validate and reset model if invalid
+			const validateAndResetModel = (
+				modelId: string | undefined,
+				field: keyof ProviderSettings,
+				defaultValue?: string,
+			) => {
+				if (modelId) {
+					const tempConfig = { ...apiConfiguration, apiProvider: value, apiModelId: modelId }
+					const modelError = getModelValidationError(tempConfig, routerModels, organizationAllowList)
+					if (modelError) {
+						setApiConfigurationField(field, "")
+					}
+				} else if (defaultValue) {
+					setApiConfigurationField(field, defaultValue)
+				}
+			}
+
+			// Validate current model for the new provider
 			switch (value) {
 				case "openrouter":
-					if (!apiConfiguration.openRouterModelId) {
-						setApiConfigurationField("openRouterModelId", openRouterDefaultModelId)
-					}
+					validateAndResetModel(
+						apiConfiguration.openRouterModelId,
+						"openRouterModelId",
+						openRouterDefaultModelId,
+					)
 					break
 				case "glama":
-					if (!apiConfiguration.glamaModelId) {
-						setApiConfigurationField("glamaModelId", glamaDefaultModelId)
-					}
+					validateAndResetModel(apiConfiguration.glamaModelId, "glamaModelId", glamaDefaultModelId)
 					break
 				case "unbound":
-					if (!apiConfiguration.unboundModelId) {
-						setApiConfigurationField("unboundModelId", unboundDefaultModelId)
-					}
+					validateAndResetModel(apiConfiguration.unboundModelId, "unboundModelId", unboundDefaultModelId)
 					break
 				case "requesty":
-					if (!apiConfiguration.requestyModelId) {
-						setApiConfigurationField("requestyModelId", requestyDefaultModelId)
-					}
+					validateAndResetModel(apiConfiguration.requestyModelId, "requestyModelId", requestyDefaultModelId)
 					break
 				case "litellm":
-					if (!apiConfiguration.litellmModelId) {
-						setApiConfigurationField("litellmModelId", litellmDefaultModelId)
-					}
+					validateAndResetModel(apiConfiguration.litellmModelId, "litellmModelId", litellmDefaultModelId)
+					break
+				case "openai":
+					validateAndResetModel(apiConfiguration.openAiModelId, "openAiModelId")
+					break
+				case "ollama":
+					validateAndResetModel(apiConfiguration.ollamaModelId, "ollamaModelId")
+					break
+				case "lmstudio":
+					validateAndResetModel(apiConfiguration.lmStudioModelId, "lmStudioModelId")
 					break
 			}
-
-			setApiConfigurationField("apiProvider", value)
 		},
-		[
-			setApiConfigurationField,
-			apiConfiguration.openRouterModelId,
-			apiConfiguration.glamaModelId,
-			apiConfiguration.unboundModelId,
-			apiConfiguration.requestyModelId,
-			apiConfiguration.litellmModelId,
-		],
+		[setApiConfigurationField, apiConfiguration, routerModels, organizationAllowList],
 	)
 
 	const docs = useMemo(() => {

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

@@ -23,6 +23,7 @@ import {
 } from "@src/components/ui"
 
 import { ModelInfoView } from "./ModelInfoView"
+import { ApiErrorMessage } from "./ApiErrorMessage"
 
 type ModelIdKey = keyof Pick<
 	ProviderSettings,
@@ -38,6 +39,7 @@ interface ModelPickerProps {
 	apiConfiguration: ProviderSettings
 	setApiConfigurationField: <K extends keyof ProviderSettings>(field: K, value: ProviderSettings[K]) => void
 	organizationAllowList: OrganizationAllowList
+	errorMessage?: string
 }
 
 export const ModelPicker = ({
@@ -49,6 +51,7 @@ export const ModelPicker = ({
 	apiConfiguration,
 	setApiConfigurationField,
 	organizationAllowList,
+	errorMessage,
 }: ModelPickerProps) => {
 	const { t } = useAppTranslation()
 
@@ -177,6 +180,7 @@ export const ModelPicker = ({
 					</PopoverContent>
 				</Popover>
 			</div>
+			{errorMessage && <ApiErrorMessage errorMessage={errorMessage} />}
 			{selectedModelId && selectedModelInfo && (
 				<ModelInfoView
 					apiProvider={apiConfiguration.apiProvider}

webview-ui/src/components/settings/providers/Glama.tsx

@@ -10,6 +10,7 @@ import { getGlamaAuthUrl } from "@src/oauth/urls"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 
 import { inputEventTransform } from "../transforms"
+import { getModelValidationError } from "@src/utils/validate"
 import { ModelPicker } from "../ModelPicker"
 
 type GlamaProps = {
@@ -67,6 +68,7 @@ export const Glama = ({
 				serviceName="Glama"
 				serviceUrl="https://glama.ai/models"
 				organizationAllowList={organizationAllowList}
+				errorMessage={getModelValidationError(apiConfiguration, routerModels, organizationAllowList)}
 			/>
 		</>
 	)

webview-ui/src/components/settings/providers/LiteLLM.tsx

@@ -12,6 +12,7 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
 
 import { inputEventTransform } from "../transforms"
+import { getModelValidationError } from "@src/utils/validate"
 import { ModelPicker } from "../ModelPicker"
 
 type LiteLLMProps = {
@@ -143,6 +144,7 @@ export const LiteLLM = ({ apiConfiguration, setApiConfigurationField, organizati
 				serviceUrl="https://docs.litellm.ai/"
 				setApiConfigurationField={setApiConfigurationField}
 				organizationAllowList={organizationAllowList}
+				errorMessage={getModelValidationError(apiConfiguration, routerModels, organizationAllowList)}
 			/>
 		</>
 	)

webview-ui/src/components/settings/providers/OpenAICompatible.tsx

@@ -19,6 +19,7 @@ import { Button } from "@src/components/ui"
 
 import { convertHeadersToObject } from "../utils/headers"
 import { inputEventTransform, noTransform } from "../transforms"
+import { getModelValidationError } from "@src/utils/validate"
 import { ModelPicker } from "../ModelPicker"
 import { R1FormatSetting } from "../R1FormatSetting"
 import { ThinkingBudget } from "../ThinkingBudget"
@@ -144,6 +145,7 @@ export const OpenAICompatible = ({
 				serviceName="OpenAI"
 				serviceUrl="https://platform.openai.com"
 				organizationAllowList={organizationAllowList}
+				errorMessage={getModelValidationError(apiConfiguration, undefined, organizationAllowList)}
 			/>
 			<R1FormatSetting
 				onChange={handleInputChange("openAiR1FormatEnabled", noTransform)}

webview-ui/src/components/settings/providers/OpenRouter.tsx

@@ -18,6 +18,7 @@ import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
 
 import { inputEventTransform, noTransform } from "../transforms"
+import { getModelValidationError } from "@src/utils/validate"
 
 import { ModelPicker } from "../ModelPicker"
 import { OpenRouterBalanceDisplay } from "./OpenRouterBalanceDisplay"
@@ -135,6 +136,7 @@ export const OpenRouter = ({
 				serviceName="OpenRouter"
 				serviceUrl="https://openrouter.ai/models"
 				organizationAllowList={organizationAllowList}
+				errorMessage={getModelValidationError(apiConfiguration, routerModels, organizationAllowList)}
 			/>
 			{openRouterModelProviders && Object.keys(openRouterModelProviders).length > 0 && (
 				<div>

webview-ui/src/components/settings/providers/Requesty.tsx

@@ -11,6 +11,7 @@ import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 import { Button } from "@src/components/ui"
 
 import { inputEventTransform } from "../transforms"
+import { getModelValidationError } from "@src/utils/validate"
 import { ModelPicker } from "../ModelPicker"
 import { RequestyBalanceDisplay } from "./RequestyBalanceDisplay"
 
@@ -96,6 +97,7 @@ export const Requesty = ({
 				serviceName="Requesty"
 				serviceUrl="https://requesty.ai"
 				organizationAllowList={organizationAllowList}
+				errorMessage={getModelValidationError(apiConfiguration, routerModels, organizationAllowList)}
 			/>
 		</>
 	)

webview-ui/src/components/settings/providers/Unbound.tsx

@@ -12,6 +12,7 @@ import { vscode } from "@src/utils/vscode"
 import { Button } from "@src/components/ui"
 
 import { inputEventTransform } from "../transforms"
+import { getModelValidationError } from "@src/utils/validate"
 import { ModelPicker } from "../ModelPicker"
 
 type UnboundProps = {
@@ -176,6 +177,7 @@ export const Unbound = ({
 				serviceUrl="https://api.getunbound.ai/models"
 				setApiConfigurationField={setApiConfigurationField}
 				organizationAllowList={organizationAllowList}
+				errorMessage={getModelValidationError(apiConfiguration, routerModels, organizationAllowList)}
 			/>
 		</>
 	)

webview-ui/src/utils/validate.ts

@@ -233,3 +233,55 @@ export function validateModelId(apiConfiguration: ProviderSettings, routerModels
 
 	return undefined
 }
+
+/**
+ * Extracts model-specific validation errors from the API configuration
+ * This is used to show model errors specifically in the model selector components
+ */
+export function getModelValidationError(
+	apiConfiguration: ProviderSettings,
+	routerModels?: RouterModels,
+	organizationAllowList?: OrganizationAllowList,
+): string | undefined {
+	const modelId = getModelIdForProvider(apiConfiguration, apiConfiguration.apiProvider || "")
+	const configWithModelId = {
+		...apiConfiguration,
+		apiModelId: modelId || "",
+	}
+
+	const orgError = validateProviderAgainstOrganizationSettings(configWithModelId, organizationAllowList)
+	if (orgError && orgError.includes("model")) {
+		return orgError
+	}
+
+	return validateModelId(configWithModelId, routerModels)
+}
+
+/**
+ * Validates API configuration but excludes model-specific errors
+ * This is used for the general API error display to prevent duplication
+ * when model errors are shown in the model selector
+ */
+export function validateApiConfigurationExcludingModelErrors(
+	apiConfiguration: ProviderSettings,
+	_routerModels?: RouterModels, // keeping this for compatibility with the old function
+	organizationAllowList?: OrganizationAllowList,
+): string | undefined {
+	const keysAndIdsPresentErrorMessage = validateModelsAndKeysProvided(apiConfiguration)
+	if (keysAndIdsPresentErrorMessage) {
+		return keysAndIdsPresentErrorMessage
+	}
+
+	const organizationAllowListErrorMessage = validateProviderAgainstOrganizationSettings(
+		apiConfiguration,
+		organizationAllowList,
+	)
+
+	// only return organization errors if they're not model-specific
+	if (organizationAllowListErrorMessage && !organizationAllowListErrorMessage.includes("model")) {
+		return organizationAllowListErrorMessage
+	}
+
+	// skip model validation errors as they'll be shown in the model selector
+	return undefined
+}