refactor(zoo-gateway): localize auth-state UX to provider component

Move the zoo-gateway sign-in error out of the shared form-validation effect
in ApiOptions and into ZooGateway.tsx, where it renders inline via
ApiErrorMessage. ApiOptions can then drop zooCodeIsAuthenticated from its
useEffect dependency list, and validateApiConfigurationExcludingModelErrors
short-circuits zoo-gateway entirely.

Also rename the inline isSonnet45ModelId helper to isClaudeSonnetModelId
and let pickZooGatewayDefaultModelId express the version-priority order
directly, so the helper has no version baked into its name.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: JamesRobert20

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

@@ -137,7 +137,7 @@ const ApiOptions = ({
 	setErrorMessage,
 }: ApiOptionsProps) => {
 	const { t } = useAppTranslation()
-	const { organizationAllowList, openAiCodexIsAuthenticated, zooCodeIsAuthenticated } = useExtensionState()
+	const { organizationAllowList, openAiCodexIsAuthenticated } = useExtensionState()
 
 	const [customHeaders, setCustomHeaders] = useState<[string, string][]>(() => {
 		const headers = apiConfiguration?.openAiHeaders || {}
@@ -270,21 +270,21 @@ const ApiOptions = ({
 			return
 		}
 
+		// Zoo Gateway renders its own auth-state error inline (sign-in card in
+		// ZooGateway.tsx) so it can react to zooCodeIsAuthenticated changes
+		// without re-running this effect or threading auth state through validation.
+		if (apiConfiguration.apiProvider === "zoo-gateway") {
+			setErrorMessage(undefined)
+			return
+		}
+
 		const apiValidationResult = validateApiConfigurationExcludingModelErrors(
 			apiConfiguration,
 			routerModels,
 			organizationAllowList,
-			zooCodeIsAuthenticated,
 		)
 		setErrorMessage(apiValidationResult)
-	}, [
-		apiConfiguration,
-		routerModels,
-		organizationAllowList,
-		setErrorMessage,
-		isRetiredSelectedProvider,
-		zooCodeIsAuthenticated,
-	])
+	}, [apiConfiguration, routerModels, organizationAllowList, setErrorMessage, isRetiredSelectedProvider])
 
 	const onProviderChange = useCallback(
 		(value: ProviderName) => {

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

@@ -12,6 +12,7 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 
 import { ModelPicker } from "../ModelPicker"
+import { ApiErrorMessage } from "../ApiErrorMessage"
 
 type ZooGatewayProps = {
 	apiConfiguration: ProviderSettings
@@ -22,31 +23,29 @@ type ZooGatewayProps = {
 	simplifySettings?: boolean
 }
 
-function isSonnet45ModelId(id: string) {
-	return /sonnet-4[.-]5|sonnet-4\.5/i.test(id)
+function isClaudeSonnetModelId(id: string) {
+	return /claude.*sonnet/i.test(id)
 }
 
-// Exported for unit tests.
+// Exported for unit tests. Picks the default Zoo Gateway model id, preferring
+// Claude Sonnet 4.5 → Sonnet 4 → first available Sonnet → first model overall.
 export function pickZooGatewayDefaultModelId(modelIds: string[]) {
 	if (modelIds.length === 0) {
 		return zooGatewayDefaultModelId
 	}
 
-	const sonnet45 = modelIds.filter(isSonnet45ModelId)
-	if (sonnet45.length > 0) {
-		return (
-			sonnet45.find((id) => id === "anthropic/claude-sonnet-4.5") ??
-			sonnet45.find((id) => id.includes("claude-sonnet-4.5")) ??
-			sonnet45[0]
-		)
+	const sonnets = modelIds.filter(isClaudeSonnetModelId)
+	if (sonnets.length === 0) {
+		return modelIds[0]
 	}
 
-	const sonnet4 = modelIds.filter((id) => /claude/i.test(id) && /sonnet/i.test(id) && /sonnet-4/i.test(id))
-	if (sonnet4.length > 0) {
-		return sonnet4[0]
-	}
-
-	return modelIds[0]
+	return (
+		sonnets.find((id) => id === "anthropic/claude-sonnet-4.5") ??
+		sonnets.find((id) => id.includes("claude-sonnet-4.5")) ??
+		sonnets.find((id) => /sonnet-4[.-]5/i.test(id)) ??
+		sonnets.find((id) => /sonnet-4(?![.-]?\d)/i.test(id)) ??
+		sonnets[0]
+	)
 }
 
 export const ZooGateway = ({
@@ -90,6 +89,7 @@ export const ZooGateway = ({
 				</div>
 				{!zooCodeIsAuthenticated ? (
 					<div className="flex flex-col gap-1">
+						<ApiErrorMessage errorMessage={t("settings:validation.zooGatewaySignIn")} />
 						<p className="text-xs text-vscode-descriptionForeground">
 							{t("settings:providers.zooGateway.signInDescription")}
 						</p>

webview-ui/src/components/settings/providers/__tests__/ZooGateway.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, waitFor } from "@/utils/test-utils"
+import { render, screen, waitFor } from "@/utils/test-utils"
 import type { ModelInfo, ProviderSettings, RouterModels } from "@roo-code/types"
 
 import { ZooGateway, pickZooGatewayDefaultModelId } from "../ZooGateway"
@@ -10,15 +10,17 @@ vi.mock("@src/i18n/TranslationContext", () => ({
 	}),
 }))
 
+const extensionStateMock = {
+	zooCodeIsAuthenticated: true,
+	zooCodeUserEmail: "user@example.com",
+	zooCodeUserName: "User",
+	zooCodeBaseUrl: "https://www.zoocode.dev",
+	uriScheme: "vscode",
+	deviceName: "Test Device",
+}
+
 vi.mock("@src/context/ExtensionStateContext", () => ({
-	useExtensionState: () => ({
-		zooCodeIsAuthenticated: true,
-		zooCodeUserEmail: "user@example.com",
-		zooCodeUserName: "User",
-		zooCodeBaseUrl: "https://www.zoocode.dev",
-		uriScheme: "vscode",
-		deviceName: "Test Device",
-	}),
+	useExtensionState: () => extensionStateMock,
 }))
 
 vi.mock("@src/oauth/urls", () => ({
@@ -165,4 +167,23 @@ describe("ZooGateway component", () => {
 
 		expect(setApiConfigurationField).not.toHaveBeenCalled()
 	})
+
+	it("renders the sign-in validation error inline when not authenticated", () => {
+		const original = extensionStateMock.zooCodeIsAuthenticated
+		extensionStateMock.zooCodeIsAuthenticated = false
+		try {
+			render(
+				<ZooGateway
+					apiConfiguration={{ apiProvider: "zoo-gateway" } as ProviderSettings}
+					setApiConfigurationField={vi.fn()}
+					routerModels={buildRouterModels(["anthropic/claude-sonnet-4"])}
+					organizationAllowList={baseProps.organizationAllowList}
+				/>,
+			)
+
+			expect(screen.getByText("settings:validation.zooGatewaySignIn")).toBeInTheDocument()
+		} finally {
+			extensionStateMock.zooCodeIsAuthenticated = original
+		}
+	})
 })

webview-ui/src/utils/__tests__/validate.spec.ts

@@ -16,7 +16,12 @@ vi.mock("i18next", () => ({
 	},
 }))
 
-import { getModelValidationError, validateApiConfigurationExcludingModelErrors, validateBedrockArn } from "../validate"
+import {
+	getModelValidationError,
+	validateApiConfiguration,
+	validateApiConfigurationExcludingModelErrors,
+	validateBedrockArn,
+} from "../validate"
 
 describe("Model Validation Functions", () => {
 	const mockRouterModels: RouterModels = {
@@ -213,50 +218,71 @@ describe("Model Validation Functions", () => {
 	})
 
 	describe("Zoo Gateway validation", () => {
-		it("returns a sign-in error when neither profile token nor Zoo auth is present", () => {
-			const config: ProviderSettings = {
-				apiProvider: "zoo-gateway",
-				zooGatewayModelId: "anthropic/claude-sonnet-4",
-			}
-
-			const result = validateApiConfigurationExcludingModelErrors(
-				config,
-				mockRouterModels,
-				allowAllOrganization,
-				false,
-			)
-			expect(result).toBe("settings:validation.zooGatewaySignIn")
+		describe("validateApiConfiguration (welcome-view entry point)", () => {
+			it("returns a sign-in error when neither profile token nor Zoo auth is present", () => {
+				const config: ProviderSettings = {
+					apiProvider: "zoo-gateway",
+					zooGatewayModelId: "anthropic/claude-sonnet-4",
+				}
+
+				const result = validateApiConfiguration(config, mockRouterModels, allowAllOrganization, false)
+				expect(result).toBe("settings:validation.zooGatewaySignIn")
+			})
+
+			it("returns undefined when Zoo Code auth is active without a profile token", () => {
+				const config: ProviderSettings = {
+					apiProvider: "zoo-gateway",
+					zooGatewayModelId: "anthropic/claude-sonnet-4",
+				}
+
+				const result = validateApiConfiguration(config, mockRouterModels, allowAllOrganization, true)
+				expect(result).toBeUndefined()
+			})
+
+			it("returns undefined when a profile session token is set", () => {
+				const config: ProviderSettings = {
+					apiProvider: "zoo-gateway",
+					zooGatewayModelId: "anthropic/claude-sonnet-4",
+					zooSessionToken: "zoo_ext_test_token",
+				}
+
+				const result = validateApiConfiguration(config, mockRouterModels, allowAllOrganization, false)
+				expect(result).toBeUndefined()
+			})
 		})
 
-		it("returns undefined when Zoo Code auth is active without a profile token", () => {
-			const config: ProviderSettings = {
-				apiProvider: "zoo-gateway",
-				zooGatewayModelId: "anthropic/claude-sonnet-4",
-			}
-
-			const result = validateApiConfigurationExcludingModelErrors(
-				config,
-				mockRouterModels,
-				allowAllOrganization,
-				true,
-			)
-			expect(result).toBeUndefined()
-		})
-
-		it("returns undefined when a profile session token is set", () => {
-			const config: ProviderSettings = {
-				apiProvider: "zoo-gateway",
-				zooGatewayModelId: "anthropic/claude-sonnet-4",
-				zooSessionToken: "zoo_ext_test_token",
-			}
-
-			const result = validateApiConfigurationExcludingModelErrors(
-				config,
-				mockRouterModels,
-				allowAllOrganization,
-				false,
-			)
-			expect(result).toBeUndefined()
+		describe("validateApiConfigurationExcludingModelErrors (settings form)", () => {
+			// The settings form short-circuits zoo-gateway and renders the sign-in
+			// error inline in `ZooGateway.tsx`, so this entry point must never
+			// surface a zoo-gateway-specific error regardless of auth state.
+			it("returns undefined for zoo-gateway when unauthenticated and no token", () => {
+				const config: ProviderSettings = {
+					apiProvider: "zoo-gateway",
+					zooGatewayModelId: "anthropic/claude-sonnet-4",
+				}
+
+				const result = validateApiConfigurationExcludingModelErrors(
+					config,
+					mockRouterModels,
+					allowAllOrganization,
+				)
+				expect(result).toBeUndefined()
+			})
+
+			it("returns undefined for zoo-gateway when a profile token is set", () => {
+				const config: ProviderSettings = {
+					apiProvider: "zoo-gateway",
+					zooGatewayModelId: "anthropic/claude-sonnet-4",
+					zooSessionToken: "zoo_ext_test_token",
+				}
+
+				const result = validateApiConfigurationExcludingModelErrors(
+					config,
+					mockRouterModels,
+					allowAllOrganization,
+				)
+				expect(result).toBeUndefined()
+			})
 		})
 	})
 })

webview-ui/src/utils/validate.ts

@@ -291,14 +291,21 @@ export function getModelValidationError(
  * 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.
+ *
+ * Zoo Gateway intentionally short-circuits here — its sign-in error is rendered
+ * inline by the `ZooGateway` provider component so the form-level error effect
+ * does not need to track Zoo Code auth state.
  */
 export function validateApiConfigurationExcludingModelErrors(
 	apiConfiguration: ProviderSettings,
 	_routerModels?: RouterModels, // Keeping this for compatibility with the old function.
 	organizationAllowList?: OrganizationAllowList,
-	zooCodeIsAuthenticated?: boolean,
 ): string | undefined {
-	const keysAndIdsPresentErrorMessage = validateModelsAndKeysProvided(apiConfiguration, zooCodeIsAuthenticated)
+	if (apiConfiguration.apiProvider === "zoo-gateway") {
+		return undefined
+	}
+
+	const keysAndIdsPresentErrorMessage = validateModelsAndKeysProvided(apiConfiguration)
 
 	if (keysAndIdsPresentErrorMessage) {
 		return keysAndIdsPresentErrorMessage