New request
#2791: feat: fuzzy search for model selection dropdown
We'll provision a sandbox, run an agent against the issue, and open a draft PR. You can pull the branch and iterate from there.
Feature Description
Add fuzzy search / filtering to the model selection UI so users can quickly find and switch models by typing partial names, provider prefixes, or abbreviations instead of scrolling through a long dropdown list.
Motivation
The model list in the WebUI continues to grow as new providers and model variants are added (OpenAI, Anthropic, Google, open-source models, custom providers, etc.). Currently, users must scroll through the full list to find the model they want, which is slow and error-prone — especially when:
- The list contains 50+ models across providers
- Users know the model name they want but not its exact position in the list
- Switching models frequently during a session (e.g., using a cheap model for simple tasks and a powerful one for complex ones)
This is a common UX pattern in modern developer tools — VS Code command palette, Obsidian file switcher, and Raycast all use fuzzy matching to great effect.
Proposed Solution
Add a text input at the top of the model dropdown that supports:
- Substring matching — typing
sonnetfilters toclaude-sonnet-4,claude-sonnet-3.5, etc. - Fuzzy matching — typing
g4omatchesgpt-4o,cs4matchesclaude-sonnet-4 - Provider prefix filtering — typing
anthropic/oropenai/filters to that provider - Keyboard navigation — arrow keys to move through filtered results, Enter to select
- Highlight matched characters in the results so users can see why a model matched
A lightweight library like Fuse.js (~6KB) or a simple custom scorer would be sufficient — no heavy dependencies needed.
┌──────────────────────────────────────┐
│ 🔍 Search models... │
├──────────────────────────────────────┤
│ ✓ claude-sonnet-4 anthropic │
│ claude-sonnet-3.5 anthropic │
│ claude-sonnet-3.5-turbo anthropic │
└──────────────────────────────────────┘
Alternatives Considered
- Provider submenus — groups models by provider but still requires scrolling within each group; does not help when you know the model name
- Recent models section — helpful but does not solve the general search problem; could complement fuzzy search
- Browser autocomplete — native autocomplete is inconsistent across browsers and not styleable
Scope / Effort Estimate
Small / Medium — touches the model selector component (likely in static/), adds a lightweight fuzzy matching utility. No backend changes needed since the model list is already available client-side.
Additional Context
- Related: #698 (model modals), #1240 (provider/model source of truth)
- VS Code, Raycast, and Slack all use this pattern for similar dropdown/palette UX
- Would also benefit mobile users where scrolling long lists is especially painful
Self-contained frontend enhancement adding fuzzy filtering and keyboard navigation to the existing model selection dropdown.
- static/index.html
- static/app.js
- static/panels.js