fix(zoo-gateway): settings UI sign-in button, validation tests, defer auth

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

Author: James Mtendamema

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

@@ -9,6 +9,7 @@ import {
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { getZooCodeAuthUrl } from "@src/oauth/urls"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 
 import { ModelPicker } from "../ModelPicker"
 
@@ -92,11 +93,9 @@ export const ZooGateway = ({
 						<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">
+						<VSCodeButtonLink href={authUrl} appearance="primary">
 							{t("settings:providers.zooGateway.signInButton")}
-						</a>
+						</VSCodeButtonLink>
 					</div>
 				) : (
 					<div className="flex items-center gap-1">

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

@@ -211,6 +211,54 @@ describe("Model Validation Functions", () => {
 			expect(result).toBe("settings:validation.modelId")
 		})
 	})
+
+	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")
+		})
+
+		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("validateBedrockArn", () => {

webview-ui/vite.config.ts

@@ -51,7 +51,7 @@ const persistPortPlugin = (): Plugin => ({
 	},
 })
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig(({ mode }) => {
 	let outDir = "../src/webview-ui/build"
 
@@ -98,79 +98,39 @@ export default defineConfig(({ mode }) => {
 	return {
 		plugins,
 		resolve: {
-			alias: {
-				"@": resolve(__dirname, "./src"),
-				"@src": resolve(__dirname, "./src"),
-				"@roo": resolve(__dirname, "../src/shared"),
-			},
+			tsconfigPaths: true,
 		},
 		build: {
 			outDir,
 			emptyOutDir: true,
 			reportCompressedSize: false,
 			// Generate complete source maps with original TypeScript sources
 			sourcemap: true,
-			// Ensure source maps are properly included in the build
-			minify: mode === "production" ? "esbuild" : false,
+			// Vite 8 uses Rolldown/Oxc by default; keep non-production modes readable.
+			minify: mode === "production",
 			// Use a single combined CSS bundle so all webviews share styles
 			cssCodeSplit: false,
-			rollupOptions: {
+			rolldownOptions: {
 				// Externalize vscode module - it's imported by file-search.ts which is
 				// dynamically imported by roo-config/index.ts, but should never be bundled
 				// in the webview since it's not available in the browser context
 				external: ["vscode"],
-				input: {
-					index: resolve(__dirname, "index.html"),
-				},
+				input: resolve(__dirname, "index.html"),
 				output: {
-					entryFileNames: `assets/[name].js`,
-					chunkFileNames: (chunkInfo) => {
-						if (chunkInfo.name === "mermaid-bundle") {
-							return `assets/mermaid-bundle.js`
-						}
-						// Default naming for other chunks, ensuring uniqueness from entry
-						return `assets/chunk-[hash].js`
-					},
+					entryFileNames: "assets/[name].js",
+					chunkFileNames: "assets/[name]-[hash].js",
 					assetFileNames: (assetInfo) => {
-						const name = assetInfo.name || ""
+						const name = assetInfo.name ?? ""
 
-						// Force all CSS into a single predictable file used by both webviews
 						if (name.endsWith(".css")) {
 							return "assets/index.css"
 						}
 
-						if (name.endsWith(".woff2") || name.endsWith(".woff") || name.endsWith(".ttf")) {
+						if (/\.(woff2?|ttf)$/.test(name)) {
 							return "assets/fonts/[name][extname]"
 						}
-						// Ensure source maps are included in the build
-						if (name.endsWith(".map")) {
-							return "assets/[name]"
-						}
-						return "assets/[name][extname]"
-					},
-					manualChunks: (id, { getModuleInfo }) => {
-						// Consolidate all mermaid code and its direct large dependencies (like dagre)
-						// into a single chunk. The 'channel.js' error often points to dagre.
-						if (
-							id.includes("node_modules/mermaid") ||
-							id.includes("node_modules/dagre") || // dagre is a common dep for graph layout
-							id.includes("node_modules/cytoscape") // another potential graph lib
-							// Add other known large mermaid dependencies if identified
-						) {
-							return "mermaid-bundle"
-						}
 
-						// Check if the module is part of any explicitly defined mermaid-related dynamic import
-						// This is a more advanced check if simple path matching isn't enough.
-						const moduleInfo = getModuleInfo(id)
-						if (moduleInfo?.importers.some((importer) => importer.includes("node_modules/mermaid"))) {
-							return "mermaid-bundle"
-						}
-						if (
-							moduleInfo?.dynamicImporters.some((importer) => importer.includes("node_modules/mermaid"))
-						) {
-							return "mermaid-bundle"
-						}
+						return "assets/[name][extname]"
 					},
 				},
 			},
@@ -188,11 +148,6 @@ export default defineConfig(({ mode }) => {
 		},
 		define,
 		optimizeDeps: {
-			include: [
-				"mermaid",
-				"dagre", // Explicitly include dagre for pre-bundling
-				// Add other known large mermaid dependencies if identified
-			],
 			exclude: ["@vscode/codicons", "vscode-oniguruma", "shiki"],
 		},
 		assetsInclude: ["**/*.wasm", "**/*.wav"],