dsh-model-picker-search
DSH Web GUI plugin. Adds a live search field inside the model picker menu
of the composer, plus the Effort (reasoning) selector that the native
ModelSelect ships with.
When you click the Model button in the composer, the menu now opens
already focused on a search box at the top. As you type, the list of
models is filtered in real time across every provider — matching against
the model id, model name, provider displayName, and provider name
(case-insensitive substring). The two-level (Model / Effort) submenu from
the native picker is preserved, so switching reasoning effort on a model
that supports it still works as before.
The plugin reads and writes the same per-session ModelDirectory the
native ModelSelect and /model popup consume, so every entry surface
stays consistent: select a model in the composer picker, and the
/model command in the chat shows the same selection; change effort
here, and the trigger label updates to show it.
No source code of DSH is modified — the plugin composes a new occupant
for the conversation.input.model slot, which DSH was designed to allow.
Install
dsh plugin --profile web add link:/path/to/dsh-model-picker-search
Then restart dsh web (or refresh the page so the new bundle is picked
up).
How it works
- Client (
lib/client.js): registers a single occupant for the
conversation.input.model slot. The component renders:
- a trigger button matching the native
_7KE1Ra_trigger look (label +
optional effort caption + chevron that rotates 180° when open);
- a two-pane menu (Model / Effort) styled with the same theme tokens as
the shipped menu;
- on the Model pane, a
<input type="text"> at the top that filters
the model list as the user types;
- on the Effort pane, the list of reasoning effort levels for the
current model, plus a "Provider default" option when the model
declares no default.
- Host (
lib/index.js): two harness.handle RPCs.
model-search/list returns { groups, flat } where each group
carries its advertised models. Built from ctx.llm.listProviders()
and ctx.llm.listModels(provider). Provider listModels failures
are caught so one broken provider doesn't drop the whole list.model-search/select is an acknowledgement only — the actual
selection is applied by the client half through the per-session
ModelDirectory it shares with the native ModelSelect, so no
host-side state is duplicated.
The injected ModelDirectory (ctx.modelDirectories.directoryFor(sessionId))
is the same instance the native seat uses, which is what makes the two
entry surfaces share their state.
UX details
- Auto-focus. The search input is focused as soon as the Model pane
opens, so the user can start typing without an extra click. The focus
call uses
requestAnimationFrame to ensure the input is fully mounted
and focus({ preventScroll: true }) to avoid pushing the page.
- Back button. Each sub-pane has a "‹ Back" button that returns to
the root pane, matching the native two-level menu.
- Outside click. Clicking outside the menu closes it and resets the
query. ESC and the chevron toggle behave like the native picker.
- Effort preservation. When you pick a model, the plugin preserves
the current
reasoningEffort if it's still valid for the new model
(matches the way the native seat handles it).
Compatibility
- DSH 0.1.0-rc.8 or newer (uses the
dsh.client package metadata,
ctx.modelDirectories, and the conversation.input.model slot).
- Themes: all colors and spacing come from DSH theme tokens
(
--dsw-alias-*, --dsw-specific-menu, --dsw-shadow-lv3,
--dsw-alias-scrollbar-bg-l2), so it follows light/dark and the
brand overrides.
License
MIT.
