Improve API config picker layout

Author: avaritiachaos

.changeset/two-column-api-config-selector.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Improve the chat API configuration picker with a two-column provider and model layout.

webview-ui/src/components/chat/ApiConfigSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from "react"
+import { useState, useMemo, useCallback, useEffect } from "react"
 import { Fzf } from "fzf"
 
 import { cn } from "@/lib/utils"
@@ -10,14 +10,68 @@ import { Button } from "@/components/ui"
 
 import { IconButton } from "./IconButton"
 
+type ApiConfigMeta = {
+	id: string
+	name: string
+	apiProvider?: string
+	modelId?: string
+}
+
+type ProviderGroup = {
+	key: string
+	label: string
+	configs: ApiConfigMeta[]
+}
+
+const PROVIDER_LABELS: Record<string, string> = {
+	anthropic: "Anthropic",
+	bedrock: "Amazon Bedrock",
+	deepseek: "DeepSeek",
+	gemini: "Google Gemini",
+	"gemini-cli": "Gemini CLI",
+	vertex: "Vertex AI",
+	openai: "OpenAI Compatible",
+	"openai-native": "OpenAI",
+	"openai-codex": "OpenAI Codex",
+	openrouter: "OpenRouter",
+	ollama: "Ollama",
+	lmstudio: "LM Studio",
+	mistral: "Mistral",
+	moonshot: "Moonshot",
+	minimax: "MiniMax",
+	requesty: "Requesty",
+	unbound: "Unbound",
+	poe: "Poe",
+	xai: "xAI",
+	baseten: "Baseten",
+	litellm: "LiteLLM",
+	sambanova: "SambaNova",
+	zai: "Z.ai",
+	fireworks: "Fireworks AI",
+	"qwen-code": "Qwen Code",
+	roo: "Roo",
+	"vscode-lm": "VS Code LM",
+	"vercel-ai-gateway": "Vercel AI Gateway",
+}
+
+const getProviderKey = (config?: ApiConfigMeta) => config?.apiProvider ?? "unknown"
+
+const getProviderLabel = (apiProvider?: string) => {
+	if (!apiProvider) {
+		return "Other"
+	}
+
+	return PROVIDER_LABELS[apiProvider] ?? apiProvider
+}
+
 interface ApiConfigSelectorProps {
 	value: string
 	displayName: string
 	disabled?: boolean
 	title: string
 	onChange: (value: string) => void
 	triggerClassName?: string
-	listApiConfigMeta: Array<{ id: string; name: string; modelId?: string }>
+	listApiConfigMeta: ApiConfigMeta[]
 	pinnedApiConfigs?: Record<string, boolean>
 	togglePinnedApiConfig: (id: string) => void
 	lockApiConfigAcrossModes: boolean
@@ -40,14 +94,17 @@ export const ApiConfigSelector = ({
 	const { t } = useAppTranslation()
 	const [open, setOpen] = useState(false)
 	const [searchValue, setSearchValue] = useState("")
+	const [activeProviderKey, setActiveProviderKey] = useState<string>("")
 	const portalContainer = useRooPortal("roo-portal")
 
 	// Create searchable items for fuzzy search.
 	const searchableItems = useMemo(
 		() =>
 			listApiConfigMeta.map((config) => ({
 				original: config,
-				searchStr: config.name,
+				searchStr: [config.name, config.modelId, config.apiProvider, getProviderLabel(config.apiProvider)]
+					.filter(Boolean)
+					.join(" "),
 			})),
 		[listApiConfigMeta],
 	)
@@ -68,54 +125,129 @@ export const ApiConfigSelector = ({
 		return matchingItems
 	}, [listApiConfigMeta, searchValue, fzfInstance])
 
-	// Separate pinned and unpinned configs.
-	const { pinnedConfigs, unpinnedConfigs } = useMemo(() => {
-		const pinned = filteredConfigs.filter((config) => pinnedApiConfigs?.[config.id])
-		const unpinned = filteredConfigs.filter((config) => !pinnedApiConfigs?.[config.id])
-		return { pinnedConfigs: pinned, unpinnedConfigs: unpinned }
+	const providerGroups = useMemo<ProviderGroup[]>(() => {
+		const groups = new Map<string, ProviderGroup>()
+
+		for (const config of filteredConfigs) {
+			const key = getProviderKey(config)
+
+			if (!groups.has(key)) {
+				groups.set(key, {
+					key,
+					label: getProviderLabel(config.apiProvider),
+					configs: [],
+				})
+			}
+
+			groups.get(key)!.configs.push(config)
+		}
+
+		return Array.from(groups.values()).map((group) => ({
+			...group,
+			configs: [...group.configs].sort((a, b) => {
+				const pinnedDelta = Number(!!pinnedApiConfigs?.[b.id]) - Number(!!pinnedApiConfigs?.[a.id])
+
+				return pinnedDelta
+			}),
+		}))
 	}, [filteredConfigs, pinnedApiConfigs])
 
+	const currentConfig = useMemo(
+		() => listApiConfigMeta.find((config) => config.id === value),
+		[listApiConfigMeta, value],
+	)
+
+	const currentProviderKey = getProviderKey(currentConfig)
+	const preferredProviderKey = providerGroups.some((group) => group.key === currentProviderKey)
+		? currentProviderKey
+		: (providerGroups[0]?.key ?? "")
+
+	useEffect(() => {
+		if (!providerGroups.length) {
+			setActiveProviderKey("")
+			return
+		}
+
+		if (!providerGroups.some((group) => group.key === activeProviderKey)) {
+			setActiveProviderKey(preferredProviderKey)
+		}
+	}, [activeProviderKey, preferredProviderKey, providerGroups])
+
+	const activeProviderGroup = providerGroups.find((group) => group.key === activeProviderKey) ?? providerGroups[0]
+
 	const handleSelect = useCallback(
 		(configId: string) => {
+			const selectedConfig = listApiConfigMeta.find((config) => config.id === configId)
+
+			if (selectedConfig) {
+				setActiveProviderKey(getProviderKey(selectedConfig))
+			}
+
 			onChange(configId)
 			setOpen(false)
 			setSearchValue("")
 		},
-		[onChange],
+		[listApiConfigMeta, onChange],
 	)
 
 	const handleEditClick = useCallback(() => {
 		vscode.postMessage({ type: "switchTab", tab: "settings" })
 		setOpen(false)
 	}, [])
 
-	const renderConfigItem = useCallback(
-		(config: { id: string; name: string; modelId?: string }, isPinned: boolean) => {
+	const renderProviderItem = useCallback(
+		(group: ProviderGroup) => {
+			const isActive = group.key === activeProviderGroup?.key
+			const currentCount = group.configs.filter((config) => config.id === value).length
+			const pinnedCount = group.configs.filter((config) => pinnedApiConfigs?.[config.id]).length
+
+			return (
+				<button
+					key={group.key}
+					type="button"
+					onClick={() => setActiveProviderKey(group.key)}
+					className={cn(
+						"w-full px-2 py-1.5 text-left text-sm cursor-pointer flex items-center gap-2",
+						"hover:bg-vscode-list-hoverBackground",
+						isActive &&
+							"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground",
+					)}>
+					<span className="truncate flex-1 min-w-0">{group.label}</span>
+					<div className="flex items-center gap-1 flex-shrink-0">
+						{pinnedCount > 0 && <span className="codicon codicon-pin text-[10px] opacity-60" />}
+						{currentCount > 0 && <span className="codicon codicon-check text-xs" />}
+						<span className="text-[10px] opacity-70">{group.configs.length}</span>
+					</div>
+				</button>
+			)
+		},
+		[activeProviderGroup?.key, pinnedApiConfigs, value],
+	)
+
+	const renderModelItem = useCallback(
+		(config: ApiConfigMeta) => {
 			const isCurrentConfig = config.id === value
+			const isPinned = !!pinnedApiConfigs?.[config.id]
 
 			return (
 				<div
 					key={config.id}
 					onClick={() => handleSelect(config.id)}
 					className={cn(
-						"px-3 py-1.5 text-sm cursor-pointer flex items-center group",
+						"px-3 py-1.5 text-sm cursor-pointer flex items-center group gap-2",
 						"hover:bg-vscode-list-hoverBackground",
 						isCurrentConfig &&
 							"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground",
 					)}>
-					<div className="flex-1 min-w-0 flex items-center gap-1 overflow-hidden">
-						<span className="flex-shrink-0">{config.name}</span>
+					<div className="flex-1 min-w-0 flex flex-col overflow-hidden leading-tight">
+						<span className="truncate">{config.modelId || config.name}</span>
 						{config.modelId && (
-							<>
-								<span
-									className="text-vscode-descriptionForeground opacity-70 min-w-0 overflow-hidden"
-									style={{ direction: "rtl", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-									{config.modelId}
-								</span>
-							</>
+							<span className="text-xs text-vscode-descriptionForeground opacity-80 truncate">
+								{config.name}
+							</span>
 						)}
 					</div>
-					<div className="flex items-center gap-1">
+					<div className="flex items-center gap-1 flex-shrink-0">
 						{isCurrentConfig && (
 							<div className="size-5 p-1 flex items-center justify-center">
 								<span className="codicon codicon-check text-xs" />
@@ -142,7 +274,7 @@ export const ApiConfigSelector = ({
 				</div>
 			)
 		},
-		[value, handleSelect, t, togglePinnedApiConfig],
+		[value, pinnedApiConfigs, handleSelect, t, togglePinnedApiConfig],
 	)
 
 	return (
@@ -167,7 +299,7 @@ export const ApiConfigSelector = ({
 				align="start"
 				sideOffset={4}
 				container={portalContainer}
-				className="p-0 overflow-hidden w-[300px]">
+				className="p-0 overflow-hidden w-[520px] max-w-[calc(100vw-24px)]">
 				<div className="flex flex-col w-full">
 					{/* Search input or info blurb */}
 					{listApiConfigMeta.length > 6 ? (
@@ -197,29 +329,29 @@ export const ApiConfigSelector = ({
 						</div>
 					)}
 
-					{/* Config list - single scroll container */}
+					{/* Provider/model picker */}
 					{filteredConfigs.length === 0 && searchValue ? (
 						<div className="py-2 px-3 text-sm text-vscode-foreground/70">{t("common:ui.no_results")}</div>
 					) : (
-						<div className="max-h-[300px] overflow-y-auto">
-							{/* Pinned configs - sticky header */}
-							{pinnedConfigs.length > 0 && (
-								<div
-									className={cn(
-										"sticky top-0 z-10 bg-vscode-dropdown-background py-1",
-										unpinnedConfigs.length > 0 && "border-b border-vscode-dropdown-foreground/10",
-									)}
-									aria-label="Pinned configurations">
-									{pinnedConfigs.map((config) => renderConfigItem(config, true))}
+						<div className="grid grid-cols-[170px_minmax(0,1fr)] max-h-[320px] overflow-hidden">
+							<div
+								className="border-r border-vscode-dropdown-border overflow-y-auto"
+								data-testid="api-provider-column"
+								aria-label={t("settings:providers.apiProvider")}>
+								<div className="sticky top-0 z-10 bg-vscode-dropdown-background px-2 py-1 text-[10px] uppercase tracking-wide text-vscode-descriptionForeground border-b border-vscode-dropdown-border">
+									{t("settings:providers.apiProvider")}
 								</div>
-							)}
-
-							{/* Unpinned configs */}
-							{unpinnedConfigs.length > 0 && (
-								<div className="py-1" aria-label="All configurations">
-									{unpinnedConfigs.map((config) => renderConfigItem(config, false))}
+								<div className="py-1">{providerGroups.map(renderProviderItem)}</div>
+							</div>
+							<div
+								className="overflow-y-auto"
+								data-testid="api-model-column"
+								aria-label={t("settings:providers.model")}>
+								<div className="sticky top-0 z-10 bg-vscode-dropdown-background px-3 py-1 text-[10px] uppercase tracking-wide text-vscode-descriptionForeground border-b border-vscode-dropdown-border">
+									{activeProviderGroup?.label ?? t("settings:providers.model")}
 								</div>
-							)}
+								<div className="py-1">{activeProviderGroup?.configs.map(renderModelItem)}</div>
+							</div>
 						</div>
 					)}