feat(webview): add Firmware provider settings UI with quota display

- Add firmwareQuota and requestFirmwareQuota message types
- Create useFirmwareQuota hook for fetching quota info
- Create FirmwareQuotaDisplay component showing remaining balance
- Create Firmware settings component with API key, model picker, and quota
- Add firmwareModelId to ModelPicker's ModelIdKey type
- Export Firmware component from providers index

Author: xavieroyj

packages/types/src/vscode-extension-host.ts

@@ -77,6 +77,7 @@ export interface ExtensionMessage {
 		| "condenseTaskContextResponse"
 		| "singleRouterModelFetchResponse"
 		| "rooCreditBalance"
+		| "firmwareQuota"
 		| "indexingStatusUpdate"
 		| "indexCleared"
 		| "codebaseIndexConfig"
@@ -468,6 +469,7 @@ export interface WebviewMessage {
 		| "requestLmStudioModels"
 		| "requestRooModels"
 		| "requestRooCreditBalance"
+		| "requestFirmwareQuota"
 		| "requestVsCodeLmModels"
 		| "requestHuggingFaceModels"
 		| "openImage"

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

@@ -36,6 +36,7 @@ type ModelIdKey = keyof Pick<
 	| "deepInfraModelId"
 	| "ioIntelligenceModelId"
 	| "vercelAiGatewayModelId"
+	| "firmwareModelId"
 	| "apiModelId"
 	| "ollamaModelId"
 	| "lmStudioModelId"

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

@@ -0,0 +1,103 @@
+import { useCallback, useState } from "react"
+import { VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+
+import { type OrganizationAllowList, type ProviderSettings, type RouterModels } from "@roo-code/types"
+
+import { vscode } from "@src/utils/vscode"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { Button } from "@src/components/ui"
+
+import { inputEventTransform } from "../transforms"
+import { ModelPicker } from "../ModelPicker"
+import { FirmwareQuotaDisplay } from "./FirmwareQuotaDisplay"
+
+const FIRMWARE_DEFAULT_MODEL_ID = "claude-sonnet-4-5"
+
+type FirmwareProps = {
+	apiConfiguration: ProviderSettings
+	setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
+	routerModels?: RouterModels
+	refetchRouterModels: () => void
+	organizationAllowList: OrganizationAllowList
+	modelValidationError?: string
+	simplifySettings?: boolean
+}
+
+export const Firmware = ({
+	apiConfiguration,
+	setApiConfigurationField,
+	routerModels,
+	refetchRouterModels,
+	organizationAllowList,
+	modelValidationError,
+	simplifySettings,
+}: FirmwareProps) => {
+	const { t } = useAppTranslation()
+
+	const [didRefetch, setDidRefetch] = useState<boolean>()
+
+	const handleInputChange = useCallback(
+		<K extends keyof ProviderSettings, E>(
+			field: K,
+			transform: (event: E) => ProviderSettings[K] = inputEventTransform,
+		) =>
+			(event: E | Event) => {
+				setApiConfigurationField(field, transform(event as E))
+			},
+		[setApiConfigurationField],
+	)
+
+	return (
+		<>
+			<div className="flex flex-col gap-1">
+				<div className="flex items-center justify-between">
+					<label className="block font-medium">{t("settings:providers.apiKey")}</label>
+					<div className="flex items-center gap-3">
+						<FirmwareQuotaDisplay />
+						<VSCodeLink href="https://app.firmware.ai/api-keys">
+							{t("settings:providers.getApiKey")}
+						</VSCodeLink>
+					</div>
+				</div>
+				<VSCodeTextField
+					value={apiConfiguration?.firmwareApiKey || ""}
+					type="password"
+					onInput={handleInputChange("firmwareApiKey")}
+					placeholder={t("settings:placeholders.apiKey")}
+					className="w-full"
+				/>
+			</div>
+
+			<Button
+				variant="outline"
+				onClick={() => {
+					vscode.postMessage({ type: "flushRouterModels", text: "firmware" })
+					refetchRouterModels()
+					setDidRefetch(true)
+				}}>
+				<div className="flex items-center gap-2">
+					<span className="codicon codicon-refresh" />
+					{t("settings:providers.refreshModels.label")}
+				</div>
+			</Button>
+			{didRefetch && (
+				<div className="flex items-center text-vscode-errorForeground">
+					{t("settings:providers.refreshModels.hint")}
+				</div>
+			)}
+
+			<ModelPicker
+				apiConfiguration={apiConfiguration}
+				setApiConfigurationField={setApiConfigurationField}
+				defaultModelId={FIRMWARE_DEFAULT_MODEL_ID}
+				models={routerModels?.firmware ?? {}}
+				modelIdKey="firmwareModelId"
+				serviceName="Firmware"
+				serviceUrl="https://app.firmware.ai/models"
+				organizationAllowList={organizationAllowList}
+				errorMessage={modelValidationError}
+				simplifySettings={simplifySettings}
+			/>
+		</>
+	)
+}

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

@@ -0,0 +1,20 @@
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+
+import { useFirmwareQuota } from "@/components/ui/hooks/useFirmwareQuota"
+
+export const FirmwareQuotaDisplay = () => {
+	const { data: quota } = useFirmwareQuota()
+
+	if (quota === null || quota === undefined) {
+		return null
+	}
+
+	const formattedRemaining = quota.remaining.toFixed(2)
+	const billingUrl = "https://app.firmware.ai/billing"
+
+	return (
+		<VSCodeLink href={billingUrl} className="text-vscode-foreground hover:underline whitespace-nowrap">
+			${formattedRemaining} remaining
+		</VSCodeLink>
+	)
+}

webview-ui/src/components/settings/providers/index.ts

@@ -27,6 +27,7 @@ export { XAI } from "./XAI"
 export { ZAi } from "./ZAi"
 export { LiteLLM } from "./LiteLLM"
 export { Fireworks } from "./Fireworks"
+export { Firmware } from "./Firmware"
 export { Featherless } from "./Featherless"
 export { VercelAiGateway } from "./VercelAiGateway"
 export { DeepInfra } from "./DeepInfra"

webview-ui/src/components/ui/hooks/useFirmwareQuota.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react"
+
+import type { ExtensionMessage } from "@roo-code/types"
+
+import { vscode } from "@src/utils/vscode"
+
+export interface FirmwareQuotaInfo {
+	remaining: number
+	windowHours: number
+}
+
+export const useFirmwareQuota = () => {
+	const [quota, setQuota] = useState<FirmwareQuotaInfo | null>(null)
+	const [isLoading, setIsLoading] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+
+	useEffect(() => {
+		setIsLoading(true)
+		const requestId = `firmware-quota-${Date.now()}`
+
+		const handleMessage = (event: MessageEvent) => {
+			const message: ExtensionMessage = event.data
+
+			if (message.type === "firmwareQuota" && message.requestId === requestId) {
+				window.removeEventListener("message", handleMessage)
+				clearTimeout(timeout)
+
+				if (message.values?.remaining !== undefined) {
+					setQuota({
+						remaining: message.values.remaining,
+						windowHours: message.values.windowHours ?? 5,
+					})
+					setError(null)
+				} else if (message.values?.error) {
+					setError(message.values.error)
+					setQuota(null)
+				}
+
+				setIsLoading(false)
+			}
+		}
+
+		const timeout = setTimeout(() => {
+			window.removeEventListener("message", handleMessage)
+			setIsLoading(false)
+			setError("Request timed out")
+		}, 10000)
+
+		window.addEventListener("message", handleMessage)
+
+		vscode.postMessage({ type: "requestFirmwareQuota", requestId })
+
+		return () => {
+			window.removeEventListener("message", handleMessage)
+			clearTimeout(timeout)
+		}
+	}, [])
+
+	return { data: quota, isLoading, error }
+}