Feature Description

Add fuzzy search/filtering to the model picker in both the WebUI dashboard (ModelPickerDialog) and the TUI (modelPicker.tsx).

Currently:

• WebUI (web/src/components/ModelPickerDialog.tsx): Has a search bar but uses exact substring matching (String.includes()). Typing g4o will NOT match gpt-4o.
• TUI (ui-tui/src/components/modelPicker.tsx): Has no search at all — only arrow-key up/down navigation through provider and model lists.

Motivation

With 100+ models across 15+ providers, finding a specific model is painful:

• WebUI: Users must type exact substrings. Searching sonnet works, but son4 or clad snnt do not.
• TUI: Users must scroll through potentially long lists with arrow keys — no way to jump or filter at all.

This is especially frustrating when switching models frequently (e.g., comparing outputs across providers).

Proposed Solution

WebUI (ModelPickerDialog.tsx)

1. Replace the current String.includes() filtering with a fuzzy matching library (e.g., fuse.js or a lightweight inline scorer).
2. Rank results by match quality — exact matches first, then fuzzy matches by score.
3. Highlight matched characters in the results so users see why a model matched.

TUI (modelPicker.tsx)

1. Add a filter/search input to the model selection stage (similar to how key stage already has text input).
2. Typing characters filters the model list in real-time with fuzzy matching.
3. Arrow keys navigate the filtered list; Enter selects.
4. Backspace removes filter characters; Esc clears filter or goes back.

Suggested libraries

• WebUI: fuse.js (already common in React apps, ~6KB gzipped) or cmdk/fzy.js for lighter weight
• TUI: A minimal JS fuzzy scorer (can be a ~30-line utility, no external dep needed)

Alternatives Considered

1. Prefix-only matching — simpler but still misses cases like 4o → gpt-4o.
2. Regex search — powerful but hostile to casual users who just want to type partial names.
3. Server-side filtering — overkill; the model list is already loaded client-side.