improve model search matching and highlight hits in selectors

packages/kilo-vscode/tests/unit/model-selector-utils.test.ts

@@ -3,6 +3,8 @@ import {
   providerSortKey,
   isFree,
   buildTriggerLabel,
+  WordBoundaryFzf,
+  buildMatchSegments,
   KILO_GATEWAY_ID,
   PROVIDER_ORDER,
 } from "../../webview-ui/src/components/shared/model-selector-utils"
@@ -103,3 +105,58 @@ describe("buildTriggerLabel", () => {
     expect(buildTriggerLabel(undefined, raw, false, "", true, labels)).toBe("Select model")
   })
 })
+
+describe("WordBoundaryFzf", () => {
+  const items = ["Claude Sonnet", "gpt-5", "OpenAI o3", "Gemini Flash"]
+  const finder = new WordBoundaryFzf(items, (item) => item)
+
+  it("returns all items with empty positions for empty query", () => {
+    const result = finder.find("")
+    expect(result).toHaveLength(items.length)
+    expect(result.every((entry) => entry.positions.size === 0)).toBe(true)
+  })
+
+  it("matches acronym across words and captures matching positions", () => {
+    const result = finder.find("clso")
+    expect(result).toHaveLength(1)
+    expect(result[0].item).toBe("Claude Sonnet")
+    expect(Array.from(result[0].positions).sort((a, b) => a - b)).toEqual([0, 1, 7, 8])
+  })
+
+  it("supports punctuation in the query by splitting at boundaries", () => {
+    const result = finder.find("gpt-")
+    expect(result).toHaveLength(1)
+    expect(result[0].item).toBe("gpt-5")
+  })
+
+  it("does not treat separator-only queries as empty search", () => {
+    const result = finder.find("-")
+    expect(result).toHaveLength(0)
+  })
+
+  it("requires matches to start at word boundaries", () => {
+    const result = finder.find("aude")
+    expect(result).toHaveLength(0)
+  })
+
+  it("requires all words in multi-word queries to match", () => {
+    const result = finder.find("claude flash")
+    expect(result).toHaveLength(0)
+  })
+})
+
+describe("buildMatchSegments", () => {
+  it("returns a single non-highlighted segment without matches", () => {
+    expect(buildMatchSegments("Claude Sonnet")).toEqual([{ text: "Claude Sonnet", highlight: false }])
+  })
+
+  it("splits contiguous highlight groups into segments", () => {
+    const segments = buildMatchSegments("Claude Sonnet", new Set([0, 1, 7, 8]))
+    expect(segments).toEqual([
+      { text: "Cl", highlight: true },
+      { text: "aude ", highlight: false },
+      { text: "So", highlight: true },
+      { text: "nnet", highlight: false },
+    ])
+  })
+})

packages/kilo-vscode/webview-ui/agent-manager/MultiModelSelector.tsx

@@ -1,9 +1,14 @@
 import { type Component, createSignal, createMemo, For, Show, onMount } from "solid-js"
 import { Icon } from "@kilocode/kilo-ui/icon"
 import { useProvider } from "../src/context/provider"
-import type { EnrichedModel } from "../src/context/provider"
 import { useLanguage } from "../src/context/language"
-import { KILO_GATEWAY_ID, providerSortKey } from "../src/components/shared/model-selector-utils"
+import {
+  KILO_GATEWAY_ID,
+  providerSortKey,
+  filterModels,
+  type FilteredModel,
+  buildMatchSegments,
+} from "../src/components/shared/model-selector-utils"
 import {
   type ModelAllocations,
   MAX_MULTI_VERSIONS,
@@ -19,7 +24,7 @@ export { MAX_MULTI_VERSIONS, totalAllocations, allocationsToArray } from "./mult
 
 interface ModelGroup {
   providerName: string
-  models: EnrichedModel[]
+  models: FilteredModel[]
 }
 
 const COUNT_OPTIONS = Array.from({ length: MAX_MULTI_VERSIONS }, (_, i) => i + 1)
@@ -38,14 +43,7 @@ export const MultiModelSelector: Component<{
     return models().filter((m) => m.providerID === KILO_GATEWAY_ID || c.includes(m.providerID))
   })
 
-  const filtered = createMemo(() => {
-    const q = search().toLowerCase()
-    if (!q) return visibleModels()
-    return visibleModels().filter(
-      (m) =>
-        m.name.toLowerCase().includes(q) || m.providerName.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
-    )
-  })
+  const filtered = createMemo(() => filterModels(visibleModels(), search()))
 
   const groups = createMemo<ModelGroup[]>(() => {
     const map = new Map<string, ModelGroup>()
@@ -106,7 +104,13 @@ export const MultiModelSelector: Component<{
                             props.onChange(toggleModel(props.allocations, model.providerID, model.id, model.name))
                           }
                         />
-                        <span class="am-mm-item-name">{model.name}</span>
+                        <span class="am-mm-item-name">
+                          <For each={buildMatchSegments(model.name, model.matchingPositions)}>
+                            {(segment) => (
+                              <span classList={{ "am-mm-item-name-highlight": segment.highlight }}>{segment.text}</span>
+                            )}
+                          </For>
+                        </span>
                       </label>
                       <Show when={checked()}>
                         <select

packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css

@@ -1705,6 +1705,11 @@ button.am-section-toggle:hover .am-section-label {
   white-space: nowrap;
 }
 
+.am-mm-item-name-highlight {
+  font-weight: 700;
+  color: var(--vscode-textLink-foreground, var(--text-link, var(--text-base)));
+}
+
 .am-mm-count-select {
   flex-shrink: 0;
   padding: 2px 4px;

packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx

@@ -10,15 +10,23 @@
 import { Component, createSignal, createMemo, createEffect, For, Show } from "solid-js"
 import { Popover } from "@kilocode/kilo-ui/popover"
 import { Button } from "@kilocode/kilo-ui/button"
-import { useProvider, EnrichedModel } from "../../context/provider"
+import { useProvider } from "../../context/provider"
 import { useSession } from "../../context/session"
 import { useLanguage } from "../../context/language"
 import type { ModelSelection } from "../../types/messages"
-import { KILO_GATEWAY_ID, providerSortKey, isFree, buildTriggerLabel } from "./model-selector-utils"
+import {
+  KILO_GATEWAY_ID,
+  providerSortKey,
+  isFree,
+  buildTriggerLabel,
+  filterModels,
+  type FilteredModel,
+  buildMatchSegments,
+} from "./model-selector-utils"
 
 interface ModelGroup {
   providerName: string
-  models: EnrichedModel[]
+  models: FilteredModel[]
 }
 
 // ---------------------------------------------------------------------------
@@ -59,16 +67,7 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   const hasProviders = () => visibleModels().length > 0
 
   // Flat filtered list for keyboard navigation
-  const filtered = createMemo(() => {
-    const q = search().toLowerCase()
-    if (!q) {
-      return visibleModels()
-    }
-    return visibleModels().filter(
-      (m) =>
-        m.name.toLowerCase().includes(q) || m.providerName.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
-    )
-  })
+  const filtered = createMemo(() => filterModels(visibleModels(), search()))
 
   // Grouped for rendering
   const groups = createMemo<ModelGroup[]>(() => {
@@ -106,7 +105,7 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
     }
   })
 
-  function pick(model: EnrichedModel) {
+  function pick(model: FilteredModel) {
     props.onSelect(model.providerID, model.id)
     setOpen(false)
   }
@@ -159,13 +158,13 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
     })
   }
 
-  function isSelected(model: EnrichedModel): boolean {
+  function isSelected(model: FilteredModel): boolean {
     const sel = selectedModel()
     return sel !== undefined && sel.providerID === model.providerID && sel.id === model.id
   }
 
   // Track flat index across groups for active highlighting
-  function flatIndex(model: EnrichedModel): number {
+  function flatIndex(model: FilteredModel): number {
     return flatFiltered().indexOf(model) + clearOffset()
   }
 
@@ -249,7 +248,15 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
                       onClick={() => pick(model)}
                       onMouseEnter={() => setActiveIndex(flatIndex(model))}
                     >
-                      <span class="model-selector-item-name">{model.name}</span>
+                      <span class="model-selector-item-name">
+                        <For each={buildMatchSegments(model.name, model.matchingPositions)}>
+                          {(segment) => (
+                            <span classList={{ "model-selector-item-name-highlight": segment.highlight }}>
+                              {segment.text}
+                            </span>
+                          )}
+                        </For>
+                      </span>
                       <Show when={isFree(model)}>
                         <span class="model-selector-tag">{language.t("model.tag.free")}</span>
                       </Show>