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,53 @@ 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("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

@@ -3,7 +3,12 @@ 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,
+  WordBoundaryFzf,
+  buildMatchSegments,
+} from "../src/components/shared/model-selector-utils"
 import {
   type ModelAllocations,
   MAX_MULTI_VERSIONS,
@@ -19,7 +24,11 @@ export { MAX_MULTI_VERSIONS, totalAllocations, allocationsToArray } from "./mult
 
 interface ModelGroup {
   providerName: string
-  models: EnrichedModel[]
+  models: FilteredModel[]
+}
+
+interface FilteredModel extends EnrichedModel {
+  matchingPositions?: Set<number>
 }
 
 const COUNT_OPTIONS = Array.from({ length: MAX_MULTI_VERSIONS }, (_, i) => i + 1)
@@ -38,13 +47,36 @@ 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<FilteredModel[]>(() => {
+    const query = search().trim()
+    if (!query) {
+      return visibleModels().map((model) => ({ ...model, matchingPositions: new Set<number>() }))
+    }
+
+    const finder = new WordBoundaryFzf(visibleModels(), (model) => model.name)
+    const nameMatches = finder.find(query)
+    const nameMatchesByKey = new Map(
+      nameMatches.map(({ item, positions }) => [`${item.providerID}/${item.id}`, positions] as const),
     )
+    const normalized = query.toLowerCase()
+
+    return visibleModels().reduce<FilteredModel[]>((result, model) => {
+      const key = `${model.providerID}/${model.id}`
+      const positions = nameMatchesByKey.get(key)
+
+      if (positions) {
+        result.push({ ...model, matchingPositions: positions })
+        return result
+      }
+
+      const fallbackMatch =
+        model.providerName.toLowerCase().includes(normalized) || model.id.toLowerCase().includes(normalized)
+      if (fallbackMatch) {
+        result.push({ ...model, matchingPositions: new Set<number>() })
+      }
+
+      return result
+    }, [])
   })
 
   const groups = createMemo<ModelGroup[]>(() => {
@@ -106,7 +138,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

@@ -14,11 +14,22 @@ import { useProvider, EnrichedModel } 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,
+  WordBoundaryFzf,
+  buildMatchSegments,
+} from "./model-selector-utils"
 
 interface ModelGroup {
   providerName: string
-  models: EnrichedModel[]
+  models: FilteredModel[]
+}
+
+interface FilteredModel extends EnrichedModel {
+  matchingPositions?: Set<number>
 }
 
 // ---------------------------------------------------------------------------
@@ -59,15 +70,36 @@ 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()
+  const filtered = createMemo<FilteredModel[]>(() => {
+    const query = search().trim()
+    if (!query) {
+      return visibleModels().map((model) => ({ ...model, matchingPositions: new Set<number>() }))
     }
-    return visibleModels().filter(
-      (m) =>
-        m.name.toLowerCase().includes(q) || m.providerName.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
+
+    const finder = new WordBoundaryFzf(visibleModels(), (model) => model.name)
+    const nameMatches = finder.find(query)
+    const nameMatchesByKey = new Map(
+      nameMatches.map(({ item, positions }) => [`${item.providerID}/${item.id}`, positions] as const),
     )
+    const normalized = query.toLowerCase()
+
+    return visibleModels().reduce<FilteredModel[]>((result, model) => {
+      const key = `${model.providerID}/${model.id}`
+      const positions = nameMatchesByKey.get(key)
+
+      if (positions) {
+        result.push({ ...model, matchingPositions: positions })
+        return result
+      }
+
+      const fallbackMatch =
+        model.providerName.toLowerCase().includes(normalized) || model.id.toLowerCase().includes(normalized)
+      if (fallbackMatch) {
+        result.push({ ...model, matchingPositions: new Set<number>() })
+      }
+
+      return result
+    }, [])
   })
 
   // Grouped for rendering
@@ -106,7 +138,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 +191,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 +281,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>