Adds refresh models button for Unbound provider

.changeset/seven-kids-return.md

@@ -0,0 +1,10 @@
+---
+"roo-cline": minor
+---
+
+Adds refresh models button for Unbound provider
+Adds a button above model picker to refresh models based on the current API Key.
+
+1. Clicking the refresh button saves the API Key and calls /models endpoint using that.
+2. Gets the new models and updates the current model if it is invalid for the given API Key.
+3. The refresh button also flushes existing Unbound models and refetches them.

src/api/providers/fetchers/modelCache.ts

@@ -65,7 +65,8 @@ export const getModels = async (
 			models = await getGlamaModels()
 			break
 		case "unbound":
-			models = await getUnboundModels()
+			// Unbound models endpoint requires an API key to fetch application specific models
+			models = await getUnboundModels(apiKey)
 			break
 		case "litellm":
 			if (apiKey && baseUrl) {

src/api/providers/fetchers/unbound.ts

@@ -2,11 +2,17 @@ import axios from "axios"
 
 import { ModelInfo } from "../../../shared/api"
 
-export async function getUnboundModels(): Promise<Record<string, ModelInfo>> {
+export async function getUnboundModels(apiKey?: string | null): Promise<Record<string, ModelInfo>> {
 	const models: Record<string, ModelInfo> = {}
 
 	try {
-		const response = await axios.get("https://api.getunbound.ai/models")
+		const headers: Record<string, string> = {}
+
+		if (apiKey) {
+			headers["Authorization"] = `Bearer ${apiKey}`
+		}
+
+		const response = await axios.get("https://api.getunbound.ai/models", { headers })
 
 		if (response.data) {
 			const rawModels: Record<string, any> = response.data
@@ -40,6 +46,7 @@ export async function getUnboundModels(): Promise<Record<string, ModelInfo>> {
 		}
 	} catch (error) {
 		console.error(`Error fetching Unbound models: ${JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}`)
+		throw new Error(`Failed to fetch Unbound models: ${error instanceof Error ? error.message : "Unknown error"}`)
 	}
 
 	return models

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

@@ -1,10 +1,13 @@
-import { useCallback } from "react"
+import { useCallback, useState, useRef } from "react"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { useQueryClient } from "@tanstack/react-query"
 
 import { ProviderSettings, RouterModels, unboundDefaultModelId } from "@roo/shared/api"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { vscode } from "@src/utils/vscode"
+import { Button } from "@src/components/ui"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -17,6 +20,13 @@ type UnboundProps = {
 
 export const Unbound = ({ apiConfiguration, setApiConfigurationField, routerModels }: UnboundProps) => {
 	const { t } = useAppTranslation()
+	const [didRefetch, setDidRefetch] = useState<boolean>()
+	const [isInvalidKey, setIsInvalidKey] = useState<boolean>(false)
+	const queryClient = useQueryClient()
+
+	// Add refs to store timer IDs
+	const didRefetchTimerRef = useRef<NodeJS.Timeout>()
+	const invalidKeyTimerRef = useRef<NodeJS.Timeout>()
 
 	const handleInputChange = useCallback(
 		<K extends keyof ProviderSettings, E>(
@@ -29,6 +39,90 @@ export const Unbound = ({ apiConfiguration, setApiConfigurationField, routerMode
 		[setApiConfigurationField],
 	)
 
+	const saveConfiguration = useCallback(async () => {
+		vscode.postMessage({
+			type: "upsertApiConfiguration",
+			text: "default",
+			apiConfiguration: apiConfiguration,
+		})
+
+		const waitForStateUpdate = new Promise<void>((resolve, reject) => {
+			const timeoutId = setTimeout(() => {
+				window.removeEventListener("message", messageHandler)
+				reject(new Error("Timeout waiting for state update"))
+			}, 10000) // 10 second timeout
+
+			const messageHandler = (event: MessageEvent) => {
+				const message = event.data
+				if (message.type === "state") {
+					clearTimeout(timeoutId)
+					window.removeEventListener("message", messageHandler)
+					resolve()
+				}
+			}
+			window.addEventListener("message", messageHandler)
+		})
+
+		try {
+			await waitForStateUpdate
+		} catch (error) {
+			console.error("Failed to save configuration:", error)
+		}
+	}, [apiConfiguration])
+
+	const requestModels = useCallback(async () => {
+		vscode.postMessage({ type: "flushRouterModels", text: "unbound" })
+
+		const modelsPromise = new Promise<void>((resolve) => {
+			const messageHandler = (event: MessageEvent) => {
+				const message = event.data
+				if (message.type === "routerModels") {
+					window.removeEventListener("message", messageHandler)
+					resolve()
+				}
+			}
+			window.addEventListener("message", messageHandler)
+		})
+
+		vscode.postMessage({ type: "requestRouterModels" })
+
+		await modelsPromise
+
+		await queryClient.invalidateQueries({ queryKey: ["routerModels"] })
+
+		// After refreshing models, check if current model is in the updated list
+		// If not, select the first available model
+		const updatedModels = queryClient.getQueryData<{ unbound: RouterModels }>(["routerModels"])?.unbound
+		if (updatedModels && Object.keys(updatedModels).length > 0) {
+			const currentModelId = apiConfiguration?.unboundModelId
+			const modelExists = currentModelId && Object.prototype.hasOwnProperty.call(updatedModels, currentModelId)
+
+			if (!currentModelId || !modelExists) {
+				const firstAvailableModelId = Object.keys(updatedModels)[0]
+				setApiConfigurationField("unboundModelId", firstAvailableModelId)
+			}
+		}
+
+		if (!updatedModels || Object.keys(updatedModels).includes("error")) {
+			return false
+		} else {
+			return true
+		}
+	}, [queryClient, apiConfiguration, setApiConfigurationField])
+
+	const handleRefresh = useCallback(async () => {
+		await saveConfiguration()
+		const requestModelsResult = await requestModels()
+
+		if (requestModelsResult) {
+			setDidRefetch(true)
+			didRefetchTimerRef.current = setTimeout(() => setDidRefetch(false), 3000)
+		} else {
+			setIsInvalidKey(true)
+			invalidKeyTimerRef.current = setTimeout(() => setIsInvalidKey(false), 3000)
+		}
+	}, [saveConfiguration, requestModels])
+
 	return (
 		<>
 			<VSCodeTextField
@@ -47,6 +141,28 @@ export const Unbound = ({ apiConfiguration, setApiConfigurationField, routerMode
 					{t("settings:providers.getUnboundApiKey")}
 				</VSCodeButtonLink>
 			)}
+			<div className="flex justify-end">
+				<Button variant="outline" onClick={handleRefresh} className="w-1/2 max-w-xs">
+					<div className="flex items-center gap-2 justify-center">
+						<span className="codicon codicon-refresh" />
+						{t("settings:providers.refreshModels.label")}
+					</div>
+				</Button>
+			</div>
+			{didRefetch && (
+				<div className="flex items-center text-vscode-charts-green">
+					{t("settings:providers.refreshModels.success", {
+						defaultValue: "Models list updated! You can now select from the latest models.",
+					})}
+				</div>
+			)}
+			{isInvalidKey && (
+				<div className="flex items-center text-vscode-errorForeground">
+					{t("settings:providers.invalidApiKey", {
+						defaultValue: "Invalid API key. Please check your API key and try again.",
+					})}
+				</div>
+			)}
 			<ModelPicker
 				apiConfiguration={apiConfiguration}
 				defaultModelId={unboundDefaultModelId}