fix auth in settings for zoo gateway

Author: James Mtendamema

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

@@ -134,7 +134,7 @@ const ApiOptions = ({
 	setErrorMessage,
 }: ApiOptionsProps) => {
 	const { t } = useAppTranslation()
-	const { organizationAllowList, openAiCodexIsAuthenticated } = useExtensionState()
+	const { organizationAllowList, openAiCodexIsAuthenticated, zooCodeIsAuthenticated } = useExtensionState()
 
 	const [customHeaders, setCustomHeaders] = useState<[string, string][]>(() => {
 		const headers = apiConfiguration?.openAiHeaders || {}
@@ -273,9 +273,17 @@ const ApiOptions = ({
 			apiConfiguration,
 			routerModels,
 			organizationAllowList,
+			zooCodeIsAuthenticated,
 		)
 		setErrorMessage(apiValidationResult)
-	}, [apiConfiguration, routerModels, organizationAllowList, setErrorMessage, isRetiredSelectedProvider])
+	}, [
+		apiConfiguration,
+		routerModels,
+		organizationAllowList,
+		setErrorMessage,
+		isRetiredSelectedProvider,
+		zooCodeIsAuthenticated,
+	])
 
 	const onProviderChange = useCallback(
 		(value: ProviderName) => {

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

@@ -1,12 +1,12 @@
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-
 import {
 	type ProviderSettings,
 	type OrganizationAllowList,
 	type RouterModels,
 	zooGatewayDefaultModelId,
 } from "@roo-code/types"
 
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { getZooCodeAuthUrl } from "@src/oauth/urls"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 
 import { ModelPicker } from "../ModelPicker"
@@ -29,24 +29,42 @@ export const ZooGateway = ({
 	simplifySettings,
 }: ZooGatewayProps) => {
 	const { t } = useAppTranslation()
+	const { zooCodeIsAuthenticated, zooCodeUserEmail, zooCodeUserName, zooCodeBaseUrl, uriScheme, deviceName } =
+		useExtensionState()
+
+	const authUrl = getZooCodeAuthUrl(uriScheme, zooCodeBaseUrl, deviceName)
 
 	return (
 		<>
-			{/* Zoo Gateway auth is managed exclusively through the "Sign in with Zoo Code"
-			    OAuth flow — the token is set automatically and must not be editable by users.
-			    Showing the field as read-only lets users confirm they are signed in. */}
-			<VSCodeTextField
-				value={apiConfiguration?.zooSessionToken ? "••••••••••••••••" : ""}
-				type="text"
-				readOnly
-				placeholder={t("settings:placeholders.sessionToken")}
-				className="w-full">
-				<label className="block font-medium mb-1">Zoo Session Token</label>
-			</VSCodeTextField>
-			<div className="text-sm text-vscode-descriptionForeground -mt-2">
-				{apiConfiguration?.zooSessionToken
-					? "Signed in via Zoo Code"
-					: "Sign in via the Zoo Code button to authenticate"}
+			{/* Zoo Code Authentication Section */}
+			<div className="flex flex-col gap-1 rounded-md border border-vscode-panel-border p-2">
+				<div className="flex items-center justify-between">
+					<label className="block text-sm font-medium">{t("settings:providers.zooGateway.account")}</label>
+					{zooCodeIsAuthenticated && zooCodeUserEmail && (
+						<span className="text-xs text-vscode-descriptionForeground">{zooCodeUserEmail}</span>
+					)}
+				</div>
+				{!zooCodeIsAuthenticated ? (
+					<div className="flex flex-col gap-1">
+						<p className="text-xs text-vscode-descriptionForeground">
+							{t("settings:providers.zooGateway.signInDescription")}
+						</p>
+						<a
+							href={authUrl}
+							className="inline-flex w-fit items-center rounded-sm bg-vscode-button-background px-3 py-1 text-xs text-vscode-button-foreground no-underline hover:bg-vscode-button-hoverBackground">
+							{t("settings:providers.zooGateway.signInButton")}
+						</a>
+					</div>
+				) : (
+					<div className="flex items-center gap-1">
+						<span className="codicon codicon-check text-vscode-charts-green" />
+						<span className="text-xs text-vscode-descriptionForeground">
+							{zooCodeUserName
+								? t("settings:providers.zooGateway.authenticatedAs", { name: zooCodeUserName })
+								: t("settings:providers.zooGateway.authenticated")}
+						</span>
+					</div>
+				)}
 			</div>
 			<ModelPicker
 				apiConfiguration={apiConfiguration}

webview-ui/src/components/welcome/WelcomeViewProvider.tsx

@@ -16,7 +16,8 @@ import { Trans } from "react-i18next"
 import { ArrowLeft, Brain } from "lucide-react"
 
 const WelcomeViewProvider = () => {
-	const { apiConfiguration, currentApiConfigName, setApiConfiguration, uriScheme } = useExtensionState()
+	const { apiConfiguration, currentApiConfigName, setApiConfiguration, uriScheme, zooCodeIsAuthenticated } =
+		useExtensionState()
 	const { t } = useAppTranslation()
 	const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
 	const [showProviderSetup, setShowProviderSetup] = useState(false)
@@ -36,7 +37,9 @@ const WelcomeViewProvider = () => {
 			return
 		}
 
-		const error = apiConfiguration ? validateApiConfiguration(apiConfiguration) : undefined
+		const error = apiConfiguration
+			? validateApiConfiguration(apiConfiguration, undefined, undefined, zooCodeIsAuthenticated)
+			: undefined
 
 		if (error) {
 			setErrorMessage(error)
@@ -45,7 +48,7 @@ const WelcomeViewProvider = () => {
 
 		setErrorMessage(undefined)
 		vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
-	}, [showProviderSetup, apiConfiguration, currentApiConfigName])
+	}, [showProviderSetup, apiConfiguration, currentApiConfigName, zooCodeIsAuthenticated])
 
 	const handleBackToLanding = useCallback(() => {
 		setShowProviderSetup(false)

webview-ui/src/i18n/locales/ca/settings.json

@@ -545,6 +545,13 @@
 				"learnMore": "Learn more about provider routing"
 			}
 		},
+		"zooGateway": {
+			"account": "Zoo Code Account",
+			"signInButton": "Sign in to Zoo Code",
+			"signInDescription": "Sign in to use Zoo Gateway with your account",
+			"authenticated": "Authenticated",
+			"authenticatedAs": "Authenticated as {{name}}"
+		},
 		"customModel": {
 			"capabilities": "Configure the capabilities and pricing for your custom OpenAI-compatible model. Be careful when specifying the model capabilities, as they can affect how Zoo Code performs.",
 			"maxTokens": {