Change Ollama model selector to filterable dropdown (RooCodeInc#3999)

* use dropdown for Ollama model list when possible

Code changes by Qwen3 30B A3B, based on OpenRouterModelPicker

* Document libasound2 and libnss3 test dependencies, sort list

* add test for OllamaModelPicker

Code by Claude Sonnet 3.7

* Add changeset

Author: paulgear

.changeset/cool-comics-change.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Ollama: Use a filterable dropdown instead of radio selection

CONTRIBUTING.md

@@ -34,18 +34,20 @@ If you're planning to work on a bigger feature, please create a [feature request
 3. **Linux-specific Setup**
     VS Code extension tests on Linux require the following system libraries:
 
-    - `libatk1.0-0`
+    - `dbus`
+    - `libasound2`
     - `libatk-bridge2.0-0`
-    - `libxkbfile1`
+    - `libatk1.0-0`
+    - `libdrm2`
+    - `libgbm1`
+    - `libgtk-3-0`
+    - `libnss3`
     - `libx11-xcb1`
     - `libxcomposite1`
     - `libxdamage1`
     - `libxfixes3`
+    - `libxkbfile1`
     - `libxrandr2`
-    - `libgbm1`
-    - `libdrm2`
-    - `libgtk-3-0`
-    - `dbus`
     - `xvfb`
 
     These libraries provide necessary GUI components and system services for the test environment.
@@ -54,9 +56,21 @@ If you're planning to work on a bigger feature, please create a [feature request
     ```bash
     sudo apt update
     sudo apt install -y \
-      libatk1.0-0 libatk-bridge2.0-0 libxkbfile1 libx11-xcb1 \
-      libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 \
-      libdrm2 libgtk-3-0 dbus xvfb
+      dbus \
+      libasound2 \
+      libatk-bridge2.0-0 \
+      libatk1.0-0 \
+      libdrm2 \
+      libgbm1 \
+      libgtk-3-0 \
+      libnss3 \
+      libx11-xcb1 \
+      libxcomposite1 \
+      libxdamage1 \
+      libxfixes3 \
+      libxkbfile1 \
+      libxrandr2 \
+      xvfb
     ```
 
     - Run `npm run test:ci` to run tests locally

src/core/controller/models/getOllamaModels.ts

@@ -18,7 +18,7 @@ export async function getOllamaModels(controller: Controller, request: StringReq
 
 		const response = await axios.get(`${baseUrl}/api/tags`)
 		const modelsArray = response.data?.models?.map((model: any) => model.name) || []
-		const models = [...new Set<string>(modelsArray)]
+		const models = [...new Set<string>(modelsArray)].sort()
 
 		return StringArray.create({ values: models })
 	} catch (error) {

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

@@ -65,6 +65,7 @@ import styled from "styled-components"
 import * as vscodemodels from "vscode"
 import { useOpenRouterKeyInfo } from "../ui/hooks/useOpenRouterKeyInfo"
 import { ClineAccountInfoCard } from "./ClineAccountInfoCard"
+import OllamaModelPicker from "./OllamaModelPicker"
 import OpenRouterModelPicker, { ModelDescriptionMarkdown, OPENROUTER_MODEL_PICKER_Z_INDEX } from "./OpenRouterModelPicker"
 import RequestyModelPicker from "./RequestyModelPicker"
 import ThinkingBudgetSlider from "./ThinkingBudgetSlider"
@@ -1845,56 +1846,57 @@ const ApiOptions = ({
 						placeholder={"Default: http://localhost:11434"}>
 						<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
 					</VSCodeTextField>
-					<VSCodeTextField
-						value={apiConfiguration?.ollamaModelId || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("ollamaModelId")}
-						placeholder={"e.g. llama3.1"}>
-						<span style={{ fontWeight: 500 }}>Model ID</span>
-					</VSCodeTextField>
+
+					{/* Model selection - use filterable picker */}
+					<label htmlFor="ollama-model-selection">
+						<span style={{ fontWeight: 500 }}>Model</span>
+					</label>
+					<OllamaModelPicker
+						ollamaModels={ollamaModels}
+						selectedModelId={apiConfiguration?.ollamaModelId || ""}
+						onModelChange={(modelId) => {
+							setApiConfiguration({
+								...apiConfiguration,
+								ollamaModelId: modelId,
+							})
+						}}
+						placeholder={ollamaModels.length > 0 ? "Search and select a model..." : "e.g. llama3.1"}
+					/>
+
+					{/* Show status message based on model availability */}
+					{ollamaModels.length === 0 && (
+						<p
+							style={{
+								fontSize: "12px",
+								marginTop: "3px",
+								color: "var(--vscode-descriptionForeground)",
+								fontStyle: "italic",
+							}}>
+							Unable to fetch models from Ollama server. Please ensure Ollama is running and accessible, or enter
+							the model ID manually above.
+						</p>
+					)}
+
 					<VSCodeTextField
 						value={apiConfiguration?.ollamaApiOptionsCtxNum || "32768"}
 						style={{ width: "100%" }}
 						onInput={handleInputChange("ollamaApiOptionsCtxNum")}
 						placeholder={"e.g. 32768"}>
 						<span style={{ fontWeight: 500 }}>Model Context Window</span>
 					</VSCodeTextField>
-					{ollamaModels.length > 0 && (
-						<VSCodeRadioGroup
-							value={
-								ollamaModels.includes(apiConfiguration?.ollamaModelId || "")
-									? apiConfiguration?.ollamaModelId
-									: ""
-							}
-							onChange={(e) => {
-								const value = (e.target as HTMLInputElement)?.value
-								// need to check value first since radio group returns empty string sometimes
-								if (value) {
-									handleInputChange("ollamaModelId")({
-										target: { value },
-									})
-								}
-							}}>
-							{ollamaModels.map((model) => (
-								<VSCodeRadio key={model} value={model} checked={apiConfiguration?.ollamaModelId === model}>
-									{model}
-								</VSCodeRadio>
-							))}
-						</VSCodeRadioGroup>
-					)}
 					<p
 						style={{
 							fontSize: "12px",
 							marginTop: "5px",
 							color: "var(--vscode-descriptionForeground)",
 						}}>
 						Ollama allows you to run models locally on your computer. For instructions on how to get started, see
-						their
+						their{" "}
 						<VSCodeLink
 							href="https://github.com/ollama/ollama/blob/main/README.md"
 							style={{ display: "inline", fontSize: "inherit" }}>
 							quickstart guide.
-						</VSCodeLink>
+						</VSCodeLink>{" "}
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
 							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
 							models. Less capable models may not work as expected.)

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

@@ -0,0 +1,221 @@
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import Fuse from "fuse.js"
+import React, { KeyboardEvent, memo, useEffect, useMemo, useRef, useState } from "react"
+import styled from "styled-components"
+import { highlight } from "../history/HistoryView"
+
+export const OLLAMA_MODEL_PICKER_Z_INDEX = 1_000
+
+export interface OllamaModelPickerProps {
+	ollamaModels: string[]
+	selectedModelId: string
+	onModelChange: (modelId: string) => void
+	placeholder?: string
+}
+
+const OllamaModelPicker: React.FC<OllamaModelPickerProps> = ({
+	ollamaModels,
+	selectedModelId,
+	onModelChange,
+	placeholder = "Search and select a model...",
+}) => {
+	const [searchTerm, setSearchTerm] = useState(selectedModelId || "")
+	const [isDropdownVisible, setIsDropdownVisible] = useState(false)
+	const [selectedIndex, setSelectedIndex] = useState(-1)
+	const dropdownRef = useRef<HTMLDivElement>(null)
+	const itemRefs = useRef<(HTMLDivElement | null)[]>([])
+	const dropdownListRef = useRef<HTMLDivElement>(null)
+
+	const handleModelChange = (newModelId: string) => {
+		onModelChange(newModelId)
+		setSearchTerm(newModelId)
+	}
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+				setIsDropdownVisible(false)
+			}
+		}
+
+		document.addEventListener("mousedown", handleClickOutside)
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside)
+		}
+	}, [])
+
+	const searchableItems = useMemo(() => {
+		return ollamaModels.map((id) => ({
+			id,
+			html: id,
+		}))
+	}, [ollamaModels])
+
+	const fuse = useMemo(() => {
+		return new Fuse(searchableItems, {
+			keys: ["html"],
+			threshold: 0.6,
+			shouldSort: true,
+			isCaseSensitive: false,
+			ignoreLocation: false,
+			includeMatches: true,
+			minMatchCharLength: 1,
+		})
+	}, [searchableItems])
+
+	const modelSearchResults = useMemo(() => {
+		return searchTerm ? highlight(fuse.search(searchTerm), "ollama-model-item-highlight") : searchableItems
+	}, [searchableItems, searchTerm, fuse])
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+		if (!isDropdownVisible) return
+
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault()
+				setSelectedIndex((prev) => (prev < modelSearchResults.length - 1 ? prev + 1 : prev))
+				break
+			case "ArrowUp":
+				event.preventDefault()
+				setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev))
+				break
+			case "Enter":
+				event.preventDefault()
+				if (selectedIndex >= 0 && selectedIndex < modelSearchResults.length) {
+					handleModelChange(modelSearchResults[selectedIndex].id)
+					setIsDropdownVisible(false)
+				}
+				break
+			case "Escape":
+				setIsDropdownVisible(false)
+				setSelectedIndex(-1)
+				break
+		}
+	}
+
+	useEffect(() => {
+		setSelectedIndex(-1)
+		if (dropdownListRef.current) {
+			dropdownListRef.current.scrollTop = 0
+		}
+	}, [searchTerm])
+
+	useEffect(() => {
+		if (selectedIndex >= 0 && itemRefs.current[selectedIndex]) {
+			itemRefs.current[selectedIndex]?.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth",
+			})
+		}
+	}, [selectedIndex])
+
+	// Update search term when selectedModelId changes externally
+	useEffect(() => {
+		if (selectedModelId !== searchTerm) {
+			setSearchTerm(selectedModelId || "")
+		}
+	}, [selectedModelId])
+
+	return (
+		<div style={{ width: "100%" }}>
+			<style>
+				{`
+				.ollama-model-item-highlight {
+					background-color: var(--vscode-editor-findMatchHighlightBackground);
+					color: inherit;
+				}
+				`}
+			</style>
+			<DropdownWrapper ref={dropdownRef}>
+				<VSCodeTextField
+					id="ollama-model-search"
+					placeholder={placeholder}
+					value={searchTerm}
+					onInput={(e) => {
+						const value = (e.target as HTMLInputElement)?.value || ""
+						handleModelChange(value)
+						setIsDropdownVisible(true)
+					}}
+					onFocus={() => setIsDropdownVisible(true)}
+					onKeyDown={handleKeyDown}
+					style={{
+						width: "100%",
+						zIndex: OLLAMA_MODEL_PICKER_Z_INDEX,
+						position: "relative",
+					}}>
+					{searchTerm && (
+						<div
+							className="input-icon-button codicon codicon-close"
+							aria-label="Clear search"
+							onClick={() => {
+								handleModelChange("")
+								setIsDropdownVisible(true)
+							}}
+							slot="end"
+							style={{
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center",
+								height: "100%",
+							}}
+						/>
+					)}
+				</VSCodeTextField>
+				{isDropdownVisible && modelSearchResults.length > 0 && (
+					<DropdownList ref={dropdownListRef}>
+						{modelSearchResults.map((item, index) => (
+							<DropdownItem
+								key={item.id}
+								ref={(el) => (itemRefs.current[index] = el)}
+								isSelected={index === selectedIndex}
+								onMouseEnter={() => setSelectedIndex(index)}
+								onClick={() => {
+									handleModelChange(item.id)
+									setIsDropdownVisible(false)
+								}}>
+								<span dangerouslySetInnerHTML={{ __html: item.html }} />
+							</DropdownItem>
+						))}
+					</DropdownList>
+				)}
+			</DropdownWrapper>
+		</div>
+	)
+}
+
+export default memo(OllamaModelPicker)
+
+// Dropdown styling
+
+const DropdownWrapper = styled.div`
+	position: relative;
+	width: 100%;
+`
+
+const DropdownList = styled.div`
+	position: absolute;
+	top: calc(100% - 3px);
+	left: 0;
+	width: calc(100% - 2px);
+	max-height: 200px;
+	overflow-y: auto;
+	background-color: var(--vscode-dropdown-background);
+	border: 1px solid var(--vscode-list-activeSelectionBackground);
+	z-index: ${OLLAMA_MODEL_PICKER_Z_INDEX - 1};
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+`
+
+const DropdownItem = styled.div<{ isSelected: boolean }>`
+	padding: 5px 10px;
+	cursor: pointer;
+	word-break: break-all;
+	white-space: normal;
+
+	background-color: ${({ isSelected }) => (isSelected ? "var(--vscode-list-activeSelectionBackground)" : "inherit")};
+
+	&:hover {
+		background-color: var(--vscode-list-activeSelectionBackground);
+	}
+`