fix(webview): keep an unlisted IO Intelligence model id as the picker selection

A custom id stored through ModelPicker's "Use custom model" path was
replaced by the default id in useSelectedModel when the fetched catalog
did not list it, so the picker displayed a different model from the one
the handler sends requests with (RouterProvider.getModel resolves
modelId || defaultModelId). Preserve the configured id and only fall back
the metadata, mirroring the litellm and kimi-code cases. Covered by a
hook test and a real-ModelPicker selection test.

Author: smiraldr

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

@@ -6,6 +6,7 @@ import { QueryClient } from "@tanstack/react-query"
 import { type Mock } from "vitest"
 
 import {
+	ioIntelligenceDefaultModelId,
 	litellmDefaultModelId,
 	type ModelInfo,
 	type ProviderSettings,
@@ -364,4 +365,84 @@ describe("ModelPicker", () => {
 			expect(screen.getByTestId("model-picker-button")).not.toHaveTextContent(litellmDefaultModelId)
 		})
 	})
+
+	describe("IO Intelligence custom model selection", () => {
+		const ioIntelligenceModels: Record<string, ModelInfo> = {
+			"meta-llama/Llama-3.3-70B-Instruct": { description: "Catalog model", ...modelInfo },
+		}
+
+		const renderIOIntelligencePicker = (apiConfiguration: ProviderSettings, setField: SetApiConfigurationField) =>
+			renderWithExtensionState(
+				<ModelPicker
+					apiConfiguration={apiConfiguration}
+					defaultModelId={ioIntelligenceDefaultModelId}
+					models={ioIntelligenceModels}
+					modelIdKey="ioIntelligenceModelId"
+					serviceName="IO Intelligence"
+					serviceUrl="https://io.net/intelligence"
+					setApiConfigurationField={setField}
+					organizationAllowList={{ allowAll: true, providers: {} }}
+				/>,
+				{ queryClient },
+			)
+
+		beforeEach(() => {
+			mockUseRouterModels.mockReturnValue(createRouterModelsResult({ "io-intelligence": ioIntelligenceModels }))
+		})
+
+		it("keeps a custom model ID in the picker instead of reverting to the default", async () => {
+			// The stored id is what the handler sends requests with, so the picker
+			// must keep displaying it even though the fetched catalog lacks it.
+			const customModelId = "custom-org/custom-model"
+			let apiConfiguration: ProviderSettings = { apiProvider: providerIdentifiers.ioIntelligence }
+			const setField = vi.fn(function <K extends keyof ProviderSettings>(field: K, value: ProviderSettings[K]) {
+				apiConfiguration = { ...apiConfiguration, [field]: value }
+			})
+
+			const { rerender } = await act(async () => {
+				return renderIOIntelligencePicker(apiConfiguration, setField)
+			})
+
+			expect(screen.getByTestId("model-picker-button")).toHaveTextContent(ioIntelligenceDefaultModelId)
+
+			await act(async () => {
+				fireEvent.click(screen.getByTestId("model-picker-button"))
+			})
+			await act(async () => {
+				vi.advanceTimersByTime(100)
+			})
+			await act(async () => {
+				fireEvent.input(screen.getByTestId("model-input"), { target: { value: customModelId } })
+			})
+			await act(async () => {
+				vi.advanceTimersByTime(100)
+			})
+			await act(async () => {
+				fireEvent.click(screen.getByTestId("use-custom-model"))
+			})
+			await act(async () => {
+				vi.advanceTimersByTime(100)
+			})
+
+			expect(setField).toHaveBeenCalledWith("ioIntelligenceModelId", customModelId)
+
+			await act(async () => {
+				rerender(
+					<ModelPicker
+						apiConfiguration={apiConfiguration}
+						defaultModelId={ioIntelligenceDefaultModelId}
+						models={ioIntelligenceModels}
+						modelIdKey="ioIntelligenceModelId"
+						serviceName="IO Intelligence"
+						serviceUrl="https://io.net/intelligence"
+						setApiConfigurationField={setField}
+						organizationAllowList={{ allowAll: true, providers: {} }}
+					/>,
+				)
+			})
+
+			expect(screen.getByTestId("model-picker-button")).toHaveTextContent(customModelId)
+			expect(screen.getByTestId("model-picker-button")).not.toHaveTextContent(ioIntelligenceDefaultModelId)
+		})
+	})
 })

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

@@ -1163,14 +1163,43 @@ describe("useSelectedModel", () => {
 				() =>
 					useSelectedModel({
 						apiProvider: providerIdentifiers.ioIntelligence,
-						ioIntelligenceModelId: "missing-model",
+						// ioIntelligenceModelId intentionally omitted
 					}),
 				{ wrapper: createWrapper() },
 			)
 
 			expect(result.current.id).toBe(ioIntelligenceDefaultModelId)
 			expect(result.current.info).toEqual(ioIntelligenceDefaultModelInfo)
 		})
+
+		it("preserves a configured model ID that is absent from the fetched catalog", () => {
+			mockUseRouterModels.mockReturnValue(
+				createRouterModelsResult({
+					"io-intelligence": {
+						"meta-llama/Llama-3.3-70B-Instruct": {
+							maxTokens: 8_192,
+							contextWindow: 131_072,
+							supportsPromptCache: false,
+						},
+					},
+				}),
+			)
+			mockUseOpenRouterModelProviders.mockReturnValue(createOpenRouterModelProvidersResult({}))
+
+			const { result } = renderHook(
+				() =>
+					useSelectedModel({
+						apiProvider: providerIdentifiers.ioIntelligence,
+						ioIntelligenceModelId: "custom-org/custom-model",
+					}),
+				{ wrapper: createWrapper() },
+			)
+
+			// The stored id is what requests are sent with, so the picker must show it
+			// rather than the default; only the metadata falls back.
+			expect(result.current.id).toBe("custom-org/custom-model")
+			expect(result.current.info).toEqual(ioIntelligenceDefaultModelInfo)
+		})
 	})
 
 	describe("openai provider", () => {

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

@@ -453,11 +453,11 @@ function getSelectedModel({
 			return { id, info }
 		}
 		case providerIdentifiers.ioIntelligence: {
-			const id = getValidatedModelId(
-				apiConfiguration.ioIntelligenceModelId,
-				routerModels[providerIdentifiers.ioIntelligence],
-				defaultModelId,
-			)
+			// A configured id is the user's explicit selection (ModelPicker's
+			// "Use custom model" path stores ids absent from the fetched catalog)
+			// and the handler sends requests with it, so keep it instead of
+			// displaying a default model that requests do not use.
+			const id = apiConfiguration.ioIntelligenceModelId || defaultModelId
 			const info = routerModels[providerIdentifiers.ioIntelligence]?.[id] ?? ioIntelligenceDefaultModelInfo
 			return { id, info }
 		}