fix more

Author: adilhafeez

src/api/providers/archgw.ts

@@ -21,6 +21,7 @@ import { RouterProvider } from "./router-provider"
  */
 export class ArchGwHandler extends RouterProvider implements SingleCompletionHandler {
 	preferenceConfig?: string // Declare the property
+	archgwUsePreferences: boolean
 
 	constructor(options: ApiHandlerOptions) {
 		console.log("ArchGwHandler constructor called with options:", options)
@@ -34,6 +35,7 @@ export class ArchGwHandler extends RouterProvider implements SingleCompletionHan
 			defaultModelInfo: archgwDefaultModelInfo,
 		})
 		this.preferenceConfig = options.archgwPreferenceConfig // Store the new parameter
+		this.archgwUsePreferences = options.archgwUsePreferences || false // Store the preference flag
 	}
 
 	override async *createMessage(
@@ -61,7 +63,7 @@ export class ArchGwHandler extends RouterProvider implements SingleCompletionHan
 			},
 		}
 
-		if (this.preferenceConfig) {
+		if (this.archgwUsePreferences && this.preferenceConfig) {
 			if (!requestOptions.metadata) {
 				requestOptions.metadata = {}
 			}

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

@@ -1,9 +1,7 @@
-import { useCallback, useState, useEffect, useRef } from "react"
+import { useCallback, useState, useEffect, useRef, useMemo } from "react"
 import { VSCodeTextArea, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { Checkbox } from "vscrui"
 
-import * as yaml from "yaml"
-
 import { type ProviderSettings, type OrganizationAllowList, archgwDefaultModelId } from "@roo-code/types"
 
 import { RouterName } from "@roo/api"
@@ -23,10 +21,17 @@ type ArchGwProps = {
 	organizationAllowList: OrganizationAllowList
 }
 
+import { validateArchGwPreferenceConfig } from "@src/utils/validate"
+
 export const ArchGw = ({ apiConfiguration, setApiConfigurationField, organizationAllowList }: ArchGwProps) => {
 	const { t } = useAppTranslation()
 
-	// No local default; always pull from URL
+	const validateArchGwPreferences = useMemo(() => {
+		const { archgwPreferenceConfig } = apiConfiguration
+		return archgwPreferenceConfig
+			? validateArchGwPreferenceConfig(archgwPreferenceConfig)
+			: { isValid: true, errorMessage: undefined }
+	}, [apiConfiguration])
 
 	const { routerModels } = useExtensionState()
 	const [refreshStatus, setRefreshStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
@@ -36,8 +41,6 @@ export const ArchGw = ({ apiConfiguration, setApiConfigurationField, organizatio
 	const [archgwBaseUrlSelected, setArchgwBaseUrlSelected] = useState(!!apiConfiguration?.archgwBaseUrl)
 	const [archgwUsePreferencesSelected, setArchgwUsePreferences] = useState(!!apiConfiguration?.archgwUsePreferences)
 
-	const [archgwPreferenceConfigError, setArchgwPreferenceConfigError] = useState<string | null>(null)
-
 	useEffect(() => {
 		const handleMessage = (event: MessageEvent<ExtensionMessage>) => {
 			const message = event.data
@@ -77,48 +80,6 @@ export const ArchGw = ({ apiConfiguration, setApiConfigurationField, organizatio
 		[setApiConfigurationField],
 	)
 
-	const handleArchgwPreferenceConfigInput = useCallback(
-		(event: any) => {
-			const value = event?.target?.value ?? ""
-			try {
-				// Only validate if not empty
-				if (value.trim() !== "") {
-					const parsed = yaml.parse(value)
-					if (!Array.isArray(parsed)) {
-						throw new Error(
-							t("settings:providers.archgwPreferenceConfig.schemaError", {
-								error: "YAML must be a list of objects with 'name', 'model' and 'usage'.",
-							}),
-						)
-					}
-					for (const item of parsed) {
-						if (
-							typeof item !== "object" ||
-							typeof item.name !== "string" ||
-							typeof item.model !== "string" ||
-							typeof item.usage !== "string"
-						) {
-							throw new Error(
-								t("settings:providers.archgwPreferenceConfig.schemaError", {
-									error: "Each item must have 'name', 'model' and 'usage' as strings.",
-								}),
-							)
-						}
-					}
-				}
-				setArchgwPreferenceConfigError(null)
-				setApiConfigurationField("archgwPreferenceConfig", value)
-			} catch (err: any) {
-				setArchgwPreferenceConfigError(
-					t("settings:providers.archgwPreferenceConfig.yamlError", {
-						error: err.message || String(err),
-					}),
-				)
-			}
-		},
-		[setApiConfigurationField, t],
-	)
-
 	const handleRefreshModels = useCallback(() => {
 		archgwErrorJustReceived.current = false // Reset flag on new refresh action
 		setRefreshStatus("loading")
@@ -217,20 +178,46 @@ export const ArchGw = ({ apiConfiguration, setApiConfigurationField, organizatio
 
 					setApiConfigurationField("archgwUsePreferences", checked)
 				}}>
-				{t("settings:providers.usePreferenceModel1")}
+				{t("settings:providers.usePreferenceBasedRouting")}
 			</Checkbox>
 
 			{archgwUsePreferencesSelected && (
 				<>
 					<div className="text-sm text-vscode-foreground">{t("settings:providers.routingConfig")}</div>
 					<VSCodeTextArea
 						value={apiConfiguration?.archgwPreferenceConfig || ""}
-						onInput={handleArchgwPreferenceConfigInput}
+						onInput={(e) =>
+							setApiConfigurationField("archgwPreferenceConfig", (e.target as HTMLInputElement).value)
+						}
 						className="w-full font-mono text-sm"
 						resize="vertical"
 					/>
-					{archgwPreferenceConfigError && (
-						<div className="text-sm text-vscode-errorForeground mt-1">{archgwPreferenceConfigError}</div>
+
+					<div className="text-sm text-vscode-descriptionForeground -mt-2">
+						{t("settings:providers.archgwPreferenceConfigUse")}
+						<div>
+							<pre style={{ whiteSpace: "pre-wrap" }}>
+								{`- name: code generation
+  model: openai/gpt-4.1
+  usage: generating new code snippets
+- name: code understanding
+  model: openai/gpt-4o-mini
+  usage: understand and explain existing code snippets`}
+							</pre>
+						</div>
+						{t("settings:providers.archgwPreferenceConfigDesc")}
+					</div>
+
+					{!validateArchGwPreferences.isValid ? (
+						<div className="text-sm text-vscode-errorForeground mt-2">
+							{validateArchGwPreferences.errorMessage || t("settings:providers.invalidRoutingConfig")}
+						</div>
+					) : (
+						validateArchGwPreferences.errorMessage && (
+							<div className="text-sm text-vscode-errorForeground mt-2">
+								{validateArchGwPreferences.errorMessage}
+							</div>
+						)
 					)}
 				</>
 			)}

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

@@ -144,6 +144,7 @@
 		"nameExists": "A profile with this name already exists",
 		"deleteProfile": "Delete Profile",
 		"invalidArnFormat": "Invalid ARN format. Please check the examples above.",
+		"invalidRoutingConfig": "Invalid routing config format.",
 		"enterNewName": "Enter new name",
 		"addProfile": "Add Profile",
 		"renameProfile": "Rename Profile",
@@ -156,13 +157,15 @@
 		"vscodeLmDescription": " The VS Code Language Model API allows you to run models provided by other VS Code extensions (including but not limited to GitHub Copilot). The easiest way to get started is to install the Copilot and Copilot Chat extensions from the VS Code Marketplace.",
 		"awsCustomArnUse": "Enter a valid Amazon Bedrock ARN for the model you want to use. Format examples:",
 		"awsCustomArnDesc": "Make sure the region in the ARN matches your selected AWS Region above.",
+		"archgwPreferenceConfigUse": "Enter a valid YAML configuration for Arch Gateway preference-based routing. The configuration should include the route name, model ID and the usage preferences. For example:",
+		"archgwPreferenceConfigDesc": "Make sure the model ID exists in your arch gateway configuration.",
 		"openRouterApiKey": "OpenRouter API Key",
 		"getOpenRouterApiKey": "Get OpenRouter API Key",
 		"apiKeyStorageNotice": "API keys are stored securely in VSCode's Secret Storage",
 		"glamaApiKey": "Glama API Key",
 		"getGlamaApiKey": "Get Glama API Key",
 		"useCustomBaseUrl": "Use custom base URL",
-		"usePreferenceModel1": "Use preference based routing",
+		"usePreferenceBasedRouting": "Use preference based routing",
 		"routingConfig": "Routing Config",
 		"archgwPreferenceConfig": {
 			"schemaError": "Invalid routing config schema. Error: {{error}}",

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

@@ -4,6 +4,8 @@ import type { ProviderSettings, OrganizationAllowList } from "@roo-code/types"
 
 import { isRouterName, RouterModels } from "@roo/api"
 
+import * as yaml from "yaml"
+
 export function validateApiConfiguration(
 	apiConfiguration: ProviderSettings,
 	routerModels?: RouterModels,
@@ -305,3 +307,34 @@ export function validateApiConfigurationExcludingModelErrors(
 	// skip model validation errors as they'll be shown in the model selector
 	return undefined
 }
+
+export function validateArchGwPreferenceConfig(archgwPreferenceConfig: string) {
+	try {
+		// Only validate if not empty
+		if (archgwPreferenceConfig.trim() !== "") {
+			const parsed = yaml.parse(archgwPreferenceConfig)
+			if (!Array.isArray(parsed)) {
+				return {
+					isValid: false,
+					errorMessage: "YAML must be a list of objects with 'name', 'model' and 'usage'.",
+				}
+			}
+			for (const item of parsed) {
+				if (
+					typeof item !== "object" ||
+					typeof item.name !== "string" ||
+					typeof item.model !== "string" ||
+					typeof item.usage !== "string"
+				) {
+					return {
+						isValid: false,
+						errorMessage: "Each item must have 'name', 'model' and 'usage' as strings.",
+					}
+				}
+			}
+		}
+	} catch (err: any) {
+		return { isValid: false, errorMessage: err.message || String(err) }
+	}
+	return { isValid: true, errorMessage: undefined }
+}