Skip to content

feat(vscode): add search to model selector popover#107

Open
zeug-zz wants to merge 1 commit into
ktmage:developmentfrom
zeug-zz:feat/model-selector-search
Open

feat(vscode): add search to model selector popover#107
zeug-zz wants to merge 1 commit into
ktmage:developmentfrom
zeug-zz:feat/model-selector-search

Conversation

@zeug-zz

@zeug-zz zeug-zz commented Jun 10, 2026

Copy link
Copy Markdown

Adds a case-insensitive search input to the ModelSelector popover so users with many providers/models can quickly filter by text. Search matches against provider name/id and model name/id; a matching provider shows all of its models.

The search input is anchored at the bottom of the upward-opening popover so it stays adjacent to the model button regardless of viewport. While searching, the connected-only filter applies, the footer is hidden, and collapse state is ignored so matching providers are always expanded. An empty state is shown when no matches exist.

Changes

  • New i18n keys model.searchPlaceholder and model.noSearchResults across all 8 locales.
  • Search input styled to align with the existing Show all providers LinkButton:
    • Font size 11px matches the footer LinkButton.
    • Padding tuned (1px 6px) so the input box height matches the LinkButton's ~19px.
    • .searchBox wrapper uses symmetric 8px padding so the input is vertically centered.
  • Placeholder uses --vscode-input-placeholderForeground with a light-grey fallback.

Tests

06-model-selection.test.tsx adds three scenarios:

  • Filtering by query narrows the displayed models.
  • Disconnected providers are excluded from search results.
  • Empty state is shown when no models match.

The filter assertion is scoped to the panel via within(...) since the trigger button always shows the selected model name.

Adds a case-insensitive search input to the ModelSelector popover so
users with many providers/models can quickly filter by text. Search
matches against provider name/id and model name/id; a matching
provider shows all of its models.

The search input is anchored at the bottom of the upward-opening
popover so it stays adjacent to the model button regardless of
viewport. While searching, the connected-only filter applies, the
footer is hidden, and collapse state is ignored so matching providers
are always expanded. An empty state is shown when no matches exist.

- New keys model.searchPlaceholder and model.noSearchResults across
  all 8 locales.
- Search input font reduced to 11px to match the existing LinkButton
  in the footer; placeholder uses --vscode-input-placeholderForeground
  with a light-grey fallback.
- Test 06-model-selection adds three scenarios; the filter assertion
  is scoped to the panel via within(...) since the trigger button
  always shows the selected model name.
@zeug-zz zeug-zz force-pushed the feat/model-selector-search branch from 3f7b0d8 to dbb1d6d Compare June 14, 2026 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant