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.