diff --git a/.changeset/open-model-selector-faster.md b/.changeset/open-model-selector-faster.md
new file mode 100644
index 0000000000..789dabdc2a
--- /dev/null
+++ b/.changeset/open-model-selector-faster.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Open the model selector instantly, even with large model catalogs.
diff --git a/packages/kilo-vscode/tests/model-selector-accessibility.spec.ts b/packages/kilo-vscode/tests/model-selector-accessibility.spec.ts
index 527380a880..45a7a339fd 100644
--- a/packages/kilo-vscode/tests/model-selector-accessibility.spec.ts
+++ b/packages/kilo-vscode/tests/model-selector-accessibility.spec.ts
@@ -183,6 +183,24 @@ test("selected favorite remains selected when its duplicate group is collapsed",
   await expect(combobox).toHaveAttribute("aria-activedescendant", await favorites.getAttribute("id"))
 })
 
+test("large catalogs keep the rendered tree bounded and navigate to distant models", async ({ page }) => {
+  await load(page, "shared--model-selector-large-catalog")
+
+  await page.getByRole("button", { name: "Select model: Provider 0 / Model 300" }).click()
+  const combobox = page.getByRole("combobox", { name: "Select model: Provider 0 / Model 300. Search models" })
+  const tree = page.getByRole("tree", { name: "Select model" })
+
+  // The window mounts before we measure it, yet stays far smaller than the catalog.
+  await expect.poll(() => tree.getByRole("treeitem").count()).toBeGreaterThan(0)
+  await expect.poll(() => tree.getByRole("treeitem").count()).toBeLessThan(50)
+
+  // Reaching a distant model scrolls it into the mounted window and activates it.
+  await combobox.fill("Model 599")
+  const last = page.getByRole("treeitem", { name: "Model 599" })
+  await expect(last).toBeVisible()
+  await expect(combobox).toHaveAttribute("aria-activedescendant", await last.getAttribute("id"))
+})
+
 test("Enter selects the active option and Escape restores selector focus", async ({ page }) => {
   await load(page, "shared--model-selector-accessible")
 
@@ -252,6 +270,35 @@ test("settings and mode editing expose distinct model field purposes", async ({
   )
 })
 
+test("mode picker focuses the selected mode as it opens", async ({ page }) => {
+  await load(page, "prompt-input--default-420")
+
+  await page.getByRole("button", { name: "Code", exact: true }).click()
+  await expect(page.locator(".mode-switcher-item.selected")).toBeFocused()
+})
+
+test("variant picker focuses the selected effort as it opens", async ({ page }) => {
+  await load(page, "prompt-input--with-thinking-420")
+
+  await page.getByRole("button", { name: "Medium", exact: true }).click()
+  await expect(page.locator(".thinking-selector-item.selected")).toBeFocused()
+})
+
+test("slash mode picker Escape returns focus to the prompt", async ({ page }) => {
+  await load(page, "prompt-input--default-420")
+
+  const prompt = page.locator("textarea.prompt-input")
+  await prompt.evaluate((el) => el.setAttribute("aria-disabled", "false"))
+  await prompt.fill("/agents")
+  await prompt.press("Enter")
+
+  const selected = page.locator(".mode-switcher-item.selected")
+  await expect(selected).toBeFocused()
+  await selected.press("Escape")
+
+  await expect(prompt).toBeFocused()
+})
+
 test("chat picker Escape returns focus to the prompt", async ({ page }) => {
   await load(page, "prompt-input--default-420")
 
diff --git a/packages/kilo-vscode/webview-ui/src/components/shared/ModeSwitcher.tsx b/packages/kilo-vscode/webview-ui/src/components/shared/ModeSwitcher.tsx
index 6e237dbdda..d078192110 100644
--- a/packages/kilo-vscode/webview-ui/src/components/shared/ModeSwitcher.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/shared/ModeSwitcher.tsx
@@ -44,9 +44,15 @@ export const ModeSwitcherBase: Component<ModeSwitcherBaseProps> = (props) => {
   const [focused, setFocused] = createSignal(-1)
   const language = useLanguage()
   let listRef: HTMLDivElement | undefined
+  // True while the picker was opened by the slash command rather than a click,
+  // so dismissal returns focus to the prompt like the model/variant pickers.
+  let slash = false
 
   // Listen for slash command trigger
-  const onTrigger = () => setOpen(true)
+  const onTrigger = () => {
+    slash = true
+    openSelected()
+  }
   window.addEventListener("openModePicker", onTrigger)
   onCleanup(() => window.removeEventListener("openModePicker", onTrigger))
 
@@ -65,11 +71,23 @@ export const ModeSwitcherBase: Component<ModeSwitcherBaseProps> = (props) => {
     items[clamped]?.focus()
   }
 
+  function openSelected() {
+    const idx = props.agents.findIndex((a) => a.name === props.value)
+    setFocused(idx >= 0 ? idx : 0)
+    setOpen(true)
+  }
+
   function onOpen(val: boolean) {
-    setOpen(val)
     if (val) {
-      const idx = props.agents.findIndex((a) => a.name === props.value)
-      requestAnimationFrame(() => focusItem(idx >= 0 ? idx : 0))
+      // A click on the trigger opens without the slash flag.
+      slash = false
+      openSelected()
+      return
+    }
+    setOpen(false)
+    if (slash) {
+      slash = false
+      requestAnimationFrame(() => window.dispatchEvent(new CustomEvent("focusPrompt", { detail: { restore: true } })))
     }
   }
 
@@ -135,6 +153,7 @@ export const ModeSwitcherBase: Component<ModeSwitcherBaseProps> = (props) => {
                   role="option"
                   aria-selected={agent.name === props.value}
                   tabindex={focused() === i() ? 0 : -1}
+                  data-autofocus={focused() === i() ? "" : undefined}
                   onClick={() => pick(agent.name)}
                   onFocus={() => setFocused(i())}
                 >
diff --git a/packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx b/packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx
index 1e44e6115c..73e1b684bc 100644
--- a/packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx
@@ -13,13 +13,13 @@ import {
   createEffect,
   createUniqueId,
   onCleanup,
-  For,
   Show,
   createSelector,
   useContext,
   untrack,
 } from "solid-js"
 import type { Accessor, Component } from "solid-js"
+import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
 import { PopupSelector } from "./PopupSelector"
 import { Button } from "@kilocode/kilo-ui/button"
 import { IconButton } from "@kilocode/kilo-ui/icon-button"
@@ -94,7 +94,9 @@ interface ModelNode {
 
 interface ScrollAnchor {
   key: string
-  top: number | undefined
+  // Virtual content offset of the anchored row before the list mutates.
+  // Works even when the row is scrolled out of the mounted window.
+  offset: number | undefined
   scroll: number
 }
 
@@ -144,11 +146,11 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   const previewID = `${uid}-preview`
   const descriptionID = `${uid}-description`
   const optionID = (key: string) => `${uid}-option-${encodeURIComponent(key)}`
-  const activeModel = () => {
+  const activeModel = createMemo(() => {
     const items = props.models
     if (items) return items.find((m) => m.providerID === props.value?.providerID && m.id === props.value?.modelID)
     return findModel(props.value)
-  }
+  })
 
   const [open, setOpen] = createSignal(false)
   const [expanded, setExpanded] = createSignal(true)
@@ -175,10 +177,8 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   let listRef: HTMLDivElement | undefined
   let bodyRef: HTMLDivElement | undefined
   let previewTimer: ReturnType<typeof setTimeout> | undefined
+  const [virtualizer, setVirtualizer] = createSignal<VirtualizerHandle>()
   const [pointer, setPointer] = createSignal(true)
-  // Ref map: row key → DOM element. Populated by each row's ref callback,
-  // avoids DOM queries for scroll anchoring and scrollIntoView.
-  const refs = new Map<string, HTMLElement>()
 
   function onSplitterMouseDown(e: MouseEvent) {
     e.preventDefault()
@@ -382,6 +382,13 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   const nodeMap = createMemo(() => new Map(nodes().map((node) => [node.key, node] as const)))
   const nodeIndex = createMemo(() => new Map(nodes().map((node, i) => [node.key, i] as const)))
   const rowMap = createMemo(() => new Map(rows().map((row) => [row.key, row] as const)))
+  const mounted = createMemo(() => {
+    const map = nodeIndex()
+    const indexes = [selectedKey(), preActiveKey(), previewKey()]
+      .map((key) => (key ? map.get(key) : undefined))
+      .filter((idx): idx is number => idx !== undefined)
+    return [...new Set(indexes)]
+  })
   const canonicalKey = (m: EnrichedModel) => rowKey("model", m.providerID, m.id)
   const favoriteKey = (m: EnrichedModel) => rowKey("favorite", m.providerID, m.id)
   const defaultKey = () => nodes()[0]?.key ?? CLEAR_KEY
@@ -421,18 +428,17 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
 
   createEffect(() => {
     const saved = anchor()
-    rows()
-    if (!saved || !listRef) return
+    nodes()
+    if (!saved) return
     requestAnimationFrame(() => {
-      if (!listRef) {
-        setAnchor(null)
-        return
-      }
-      const el = refs.get(saved.key)
-      if (el && saved.top !== undefined) {
-        listRef.scrollTop += el.getBoundingClientRect().top - saved.top
+      const handle = virtualizer()
+      const idx = nodeIndex().get(saved.key)
+      if (handle && idx !== undefined && saved.offset !== undefined) {
+        // Keep the anchored row pinned to the same viewport position after
+        // rows above it appear or disappear, even while it is virtualized out.
+        handle.scrollTo(handle.getItemOffset(idx) - (saved.offset - saved.scroll))
       } else {
-        listRef.scrollTop = saved.scroll
+        handle?.scrollTo(saved.scroll)
       }
       setAnchor(null)
     })
@@ -543,7 +549,11 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   }
 
   function scrollRow(key: string | null | undefined, block: ScrollLogicalPosition = "nearest") {
-    if (key) refs.get(key)?.scrollIntoView({ block })
+    if (!key) return
+    const idx = nodeIndex().get(key)
+    if (idx === undefined) return
+    const align = block === "center" || block === "start" || block === "end" ? block : "nearest"
+    virtualizer()?.scrollToIndex(idx, { align })
   }
 
   function activate(key: string) {
@@ -609,10 +619,10 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
     // disappear — anchor to the canonical provider row instead so the
     // scroll restore finds an element that still exists after rerender.
     const key = row.kind === "favorite" ? canon : row.key
-    const el = refs.get(key)
+    const idx = nodeIndex().get(key)
     setAnchor({
       key,
-      top: el?.getBoundingClientRect().top,
+      offset: idx !== undefined ? virtualizer()?.getItemOffset(idx) : undefined,
       scroll: listRef?.scrollTop ?? 0,
     })
     if (row.kind === "favorite") {
@@ -837,198 +847,186 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
                   </div>
                 </Show>
 
-                <Show when={props.allowClear}>
-                  <div
-                    id={optionID(CLEAR_KEY)}
-                    ref={(el) => {
-                      refs.set(CLEAR_KEY, el)
-                      onCleanup(() => refs.delete(CLEAR_KEY))
-                    }}
-                    class={`model-selector-item${isSelected(CLEAR_KEY) && !pointer() ? " keyboard-focused" : ""}${isSelected(CLEAR_KEY) ? " selected" : ""}${!props.value?.providerID ? " active" : ""}`}
-                    role="treeitem"
-                    aria-selected={!props.value?.providerID}
-                    onClick={() => pickClear()}
-                    onMouseMove={() => {
-                      setPointer(true)
-                    }}
-                    onMouseEnter={() => {
-                      if (pointer()) setSelectedKey(CLEAR_KEY)
-                    }}
-                  >
-                    <span class="model-selector-item-name" style={{ "font-style": "italic", opacity: 0.7 }}>
-                      {props.clearLabel ?? language.t("dialog.model.notSet")}
-                    </span>
-                  </div>
-                </Show>
-
-                <For each={groups()}>
-                  {(group) => {
-                    const shown = () => isGroupOpen(group.key)
-                    return (
-                      <div class="model-selector-group" role="presentation">
-                        <div
-                          id={optionID(groupKey(group.key))}
-                          ref={(el) => {
-                            refs.set(groupKey(group.key), el)
-                            onCleanup(() => refs.delete(groupKey(group.key)))
-                          }}
-                          class={`model-selector-group-label${isSelected(groupKey(group.key)) ? " selected" : ""}${isSelected(groupKey(group.key)) && !pointer() ? " keyboard-focused" : ""}`}
-                          role="treeitem"
-                          aria-expanded={shown()}
-                          onMouseDown={(e) => e.preventDefault()}
-                          onClick={() => toggleGroup(group.key)}
-                          onMouseMove={() => setPointer(true)}
-                          onMouseEnter={() => {
-                            if (pointer()) setSelectedKey(groupKey(group.key))
-                          }}
-                        >
-                          <svg
-                            class={`model-selector-group-chevron${shown() ? "" : " model-selector-group-chevron--collapsed"}`}
-                            width="10"
-                            height="10"
-                            viewBox="0 0 16 16"
-                            fill="currentColor"
-                            aria-hidden="true"
-                          >
-                            <path d="M4 6l4 5 4-5H4z" />
-                          </svg>
-                          <span>{group.label}</span>
-                          <Show when={!shown() && !!debouncedSearch()}>
-                            <span class="model-selector-group-match-dot" aria-hidden="true" />
-                          </Show>
-                        </div>
-                        <Show when={shown()}>
-                          <div role="group" aria-label={group.label}>
-                            <For each={group.rows}>
-                              {(row) => {
-                                if (!row.model) return null
-                                const model = row.model
-                                const hovered = () => isSelected(row.key)
-                                const preActive = () => isPreActive(row.key)
-                                const starred = () => favoriteKeys().has(modelKey(model.providerID, model.id))
-                                const showProvider = () => row.kind === "favorite"
-                                const showSelect = () => expanded() && preActive() && !isActive(model)
-                                const starLabel = () =>
-                                  `${starred() ? language.t("model.favorite.remove") : language.t("model.favorite.add")}: ${sanitizeName(model.name)}`
-                                return (
-                                  <div
-                                    role="presentation"
-                                    class={`model-selector-row${hovered() || preActive() ? " selected" : ""}`}
-                                  >
-                                    <div
-                                      id={optionID(row.key)}
-                                      ref={(el) => {
-                                        refs.set(row.key, el)
-                                        onCleanup(() => refs.delete(row.key))
-                                      }}
-                                      class={`model-selector-item${(hovered() && !pointer()) || preActive() ? " keyboard-focused" : ""}${hovered() || preActive() ? " selected" : ""}${chosen(row) ? " active" : ""}`}
-                                      role="treeitem"
-                                      aria-selected={chosen(row)}
-                                      onClick={() => {
-                                        if (!expanded()) {
-                                          selectRow(row)
-                                          return
-                                        }
-                                        setRow(row.key)
-                                        setPreviewKey(row.key)
-                                        searchRef?.focus()
-                                      }}
-                                      onDblClick={() => {
-                                        if (expanded()) selectRow(row)
-                                      }}
-                                      onMouseMove={() => {
-                                        setPointer(true)
-                                      }}
-                                      onMouseEnter={() => {
-                                        if (pointer()) setSelectedKey(row.key)
-                                      }}
-                                    >
-                                      <div class="model-selector-item-left">
-                                        <span class="model-selector-item-name">
-                                          {(() => {
-                                            const full = sanitizeName(model.name)
-                                            const sep = full.indexOf(": ")
-                                            if (sep < 0)
-                                              return <span class="model-selector-item-name-main">{full}</span>
-                                            return (
-                                              <>
-                                                <span class="model-selector-item-name-provider">
-                                                  {full.slice(0, sep)}
-                                                </span>
-                                                <span class="model-selector-item-name-main">{full.slice(sep + 2)}</span>
-                                              </>
-                                            )
-                                          })()}
-                                        </span>
-                                        <Show when={isAuto(model)}>
-                                          <Tooltip value={autoLabel(model)} placement="top">
-                                            <span class="model-selector-auto-icon" aria-label={autoLabel(model)}>
-                                              <Icon name="branch" size="small" />
-                                            </span>
-                                          </Tooltip>
-                                        </Show>
-                                        <Show when={isFree(model) || hasByok(model) || isDataCollectedModel(model)}>
-                                          <span class="model-selector-free-data">
-                                            <Show when={isFree(model) && !hasByok(model)}>
-                                              <span class="model-selector-data-badge">
-                                                <Tag data-variant="member">{freeLabel()}</Tag>
-                                              </span>
-                                            </Show>
-                                            <Show when={hasByok(model)}>
-                                              <span class="model-selector-data-badge model-selector-data-badge--byok">
-                                                <Tag data-variant="member">BYOK</Tag>
-                                              </span>
-                                            </Show>
-                                            <Show when={isDataCollectedModel(model)}>
-                                              <Tooltip value={dataLabel()} placement="top">
-                                                <span class="model-selector-free-data-icon" aria-label={dataLabel()}>
-                                                  <Icon name="book-open-check" size="small" />
-                                                </span>
-                                              </Tooltip>
-                                            </Show>
-                                          </span>
-                                        </Show>
-                                        <Show when={showProvider()}>
-                                          <span class="model-selector-item-provider-tag">{model.providerName}</span>
-                                        </Show>
-                                      </div>
-                                    </div>
-                                    <Show when={session && props.favorites !== false}>
-                                      <button
-                                        type="button"
-                                        class={`model-selector-star${starred() ? " model-selector-star--active" : ""}`}
-                                        aria-label={starLabel()}
-                                        aria-pressed={starred()}
-                                        onMouseDown={(e) => e.preventDefault()}
-                                        onClick={(e) => {
-                                          e.stopPropagation()
-                                          toggleFavorite(model, row)
-                                          searchRef?.focus()
-                                        }}
-                                      >
-                                        <Icon name={starred() ? "star-filled" : "star"} size="small" />
-                                      </button>
-                                    </Show>
-                                    <Show when={showSelect()}>
-                                      <button
-                                        type="button"
-                                        class="model-selector-item-select-btn"
-                                        aria-label={`${language.t("dialog.model.select")}: ${sanitizeName(model.name)}`}
-                                        onClick={() => selectRow(row)}
-                                      >
-                                        {language.t("dialog.model.select")}
-                                      </button>
-                                    </Show>
-                                  </div>
-                                )
+                <Show when={nodes().length > 0}>
+                  <Virtualizer ref={setVirtualizer} data={nodes()} keepMounted={mounted()} overscan={4} itemSize={30}>
+                    {
+                      // eslint-disable-next-line complexity
+                      (node) => {
+                        if (node.kind === "group" && node.group) {
+                          const group = node.group
+                          const key = groupKey(group.key)
+                          const shown = () => isGroupOpen(group.key)
+                          return (
+                            <div
+                              id={optionID(key)}
+                              class={`model-selector-group-label${props.allowClear || group.key !== groups()[0]?.key ? " model-selector-group-label--divided" : ""}${isSelected(key) ? " selected" : ""}${isSelected(key) && !pointer() ? " keyboard-focused" : ""}`}
+                              role="treeitem"
+                              aria-level={1}
+                              aria-expanded={shown()}
+                              onMouseDown={(e) => e.preventDefault()}
+                              onClick={() => toggleGroup(group.key)}
+                              onMouseMove={() => setPointer(true)}
+                              onMouseEnter={() => {
+                                if (pointer()) setSelectedKey(key)
                               }}
-                            </For>
+                            >
+                              <svg
+                                class={`model-selector-group-chevron${shown() ? "" : " model-selector-group-chevron--collapsed"}`}
+                                width="10"
+                                height="10"
+                                viewBox="0 0 16 16"
+                                fill="currentColor"
+                                aria-hidden="true"
+                              >
+                                <path d="M4 6l4 5 4-5H4z" />
+                              </svg>
+                              <span>{group.label}</span>
+                              <Show when={!shown() && !!debouncedSearch()}>
+                                <span class="model-selector-group-match-dot" aria-hidden="true" />
+                              </Show>
+                            </div>
+                          )
+                        }
+
+                        const row = node.row
+                        if (!row) return null
+                        if (row.kind === "clear") {
+                          return (
+                            <div
+                              id={optionID(CLEAR_KEY)}
+                              class={`model-selector-item${isSelected(CLEAR_KEY) && !pointer() ? " keyboard-focused" : ""}${isSelected(CLEAR_KEY) ? " selected" : ""}${!props.value?.providerID ? " active" : ""}`}
+                              role="treeitem"
+                              aria-level={1}
+                              aria-selected={!props.value?.providerID}
+                              onClick={() => pickClear()}
+                              onMouseMove={() => setPointer(true)}
+                              onMouseEnter={() => {
+                                if (pointer()) setSelectedKey(CLEAR_KEY)
+                              }}
+                            >
+                              <span class="model-selector-item-name" style={{ "font-style": "italic", opacity: 0.7 }}>
+                                {props.clearLabel ?? language.t("dialog.model.notSet")}
+                              </span>
+                            </div>
+                          )
+                        }
+                        if (!row.model) return null
+
+                        const model = row.model
+                        const hovered = () => isSelected(row.key)
+                        const preActive = () => isPreActive(row.key)
+                        const starred = () => favoriteKeys().has(modelKey(model.providerID, model.id))
+                        const showProvider = () => row.kind === "favorite"
+                        const showSelect = () => expanded() && preActive() && !isActive(model)
+                        const starLabel = () =>
+                          `${starred() ? language.t("model.favorite.remove") : language.t("model.favorite.add")}: ${sanitizeName(model.name)}`
+                        return (
+                          <div
+                            role="presentation"
+                            class={`model-selector-row${hovered() || preActive() ? " selected" : ""}`}
+                          >
+                            <div
+                              id={optionID(row.key)}
+                              class={`model-selector-item${(hovered() && !pointer()) || preActive() ? " keyboard-focused" : ""}${hovered() || preActive() ? " selected" : ""}${chosen(row) ? " active" : ""}`}
+                              role="treeitem"
+                              aria-level={2}
+                              aria-selected={chosen(row)}
+                              onClick={() => {
+                                if (!expanded()) {
+                                  selectRow(row)
+                                  return
+                                }
+                                setRow(row.key)
+                                setPreviewKey(row.key)
+                                searchRef?.focus()
+                              }}
+                              onDblClick={() => {
+                                if (expanded()) selectRow(row)
+                              }}
+                              onMouseMove={() => setPointer(true)}
+                              onMouseEnter={() => {
+                                if (pointer()) setSelectedKey(row.key)
+                              }}
+                            >
+                              <div class="model-selector-item-left">
+                                <span class="model-selector-item-name">
+                                  {(() => {
+                                    const full = sanitizeName(model.name)
+                                    const sep = full.indexOf(": ")
+                                    if (sep < 0) return <span class="model-selector-item-name-main">{full}</span>
+                                    return (
+                                      <>
+                                        <span class="model-selector-item-name-provider">{full.slice(0, sep)}</span>
+                                        <span class="model-selector-item-name-main">{full.slice(sep + 2)}</span>
+                                      </>
+                                    )
+                                  })()}
+                                </span>
+                                <Show when={isAuto(model)}>
+                                  <Tooltip value={autoLabel(model)} placement="top">
+                                    <span class="model-selector-auto-icon" aria-label={autoLabel(model)}>
+                                      <Icon name="branch" size="small" />
+                                    </span>
+                                  </Tooltip>
+                                </Show>
+                                <Show when={isFree(model) || hasByok(model) || isDataCollectedModel(model)}>
+                                  <span class="model-selector-free-data">
+                                    <Show when={isFree(model) && !hasByok(model)}>
+                                      <span class="model-selector-data-badge">
+                                        <Tag data-variant="member">{freeLabel()}</Tag>
+                                      </span>
+                                    </Show>
+                                    <Show when={hasByok(model)}>
+                                      <span class="model-selector-data-badge model-selector-data-badge--byok">
+                                        <Tag data-variant="member">BYOK</Tag>
+                                      </span>
+                                    </Show>
+                                    <Show when={isDataCollectedModel(model)}>
+                                      <Tooltip value={dataLabel()} placement="top">
+                                        <span class="model-selector-free-data-icon" aria-label={dataLabel()}>
+                                          <Icon name="book-open-check" size="small" />
+                                        </span>
+                                      </Tooltip>
+                                    </Show>
+                                  </span>
+                                </Show>
+                                <Show when={showProvider()}>
+                                  <span class="model-selector-item-provider-tag">{model.providerName}</span>
+                                </Show>
+                              </div>
+                            </div>
+                            <Show when={session && props.favorites !== false}>
+                              <button
+                                type="button"
+                                class={`model-selector-star${starred() ? " model-selector-star--active" : ""}`}
+                                aria-label={starLabel()}
+                                aria-pressed={starred()}
+                                onMouseDown={(e) => e.preventDefault()}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  toggleFavorite(model, row)
+                                  searchRef?.focus()
+                                }}
+                              >
+                                <Icon name={starred() ? "star-filled" : "star"} size="small" />
+                              </button>
+                            </Show>
+                            <Show when={showSelect()}>
+                              <button
+                                type="button"
+                                class="model-selector-item-select-btn"
+                                aria-label={`${language.t("dialog.model.select")}: ${sanitizeName(model.name)}`}
+                                onClick={() => selectRow(row)}
+                              >
+                                {language.t("dialog.model.select")}
+                              </button>
+                            </Show>
                           </div>
-                        </Show>
-                      </div>
-                    )
-                  }}
-                </For>
+                        )
+                      }
+                    }
+                  </Virtualizer>
+                </Show>
               </div>
 
               <Show when={expanded()}>
diff --git a/packages/kilo-vscode/webview-ui/src/components/shared/PopupSelector.tsx b/packages/kilo-vscode/webview-ui/src/components/shared/PopupSelector.tsx
index 541c3f81db..349a853211 100644
--- a/packages/kilo-vscode/webview-ui/src/components/shared/PopupSelector.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/shared/PopupSelector.tsx
@@ -57,6 +57,7 @@ export function PopupSelector<T extends ValidComponent = ValidComponent>(props:
     "minWidth",
     "minHeight",
     "deferDismiss",
+    "class",
     "children",
   ])
 
@@ -113,6 +114,7 @@ export function PopupSelector<T extends ValidComponent = ValidComponent>(props:
       overflowPadding={local.padding ?? 8}
       deferDismiss={local.deferDismiss}
       {...(rest as PopoverProps)}
+      class={`popup-selector${local.class ? ` ${local.class}` : ""}`}
       style={
         popoverW().width !== undefined
           ? { width: `${popoverW().width}px`, "max-width": `${popoverW().max}px` }
diff --git a/packages/kilo-vscode/webview-ui/src/components/shared/ThinkingSelector.tsx b/packages/kilo-vscode/webview-ui/src/components/shared/ThinkingSelector.tsx
index a6f05f0691..45f9b827ae 100644
--- a/packages/kilo-vscode/webview-ui/src/components/shared/ThinkingSelector.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/shared/ThinkingSelector.tsx
@@ -64,13 +64,14 @@ export const ThinkingSelectorBase: Component<ThinkingSelectorBaseProps> = (props
   }
 
   function onOpen(val: boolean) {
-    setOpen(val)
     if (val) {
       const items = rows()
       const idx = items.findIndex((v) => v === props.value)
-      requestAnimationFrame(() => focusItem(idx >= 0 ? idx : 0))
+      setFocused(idx >= 0 ? idx : 0)
+      setOpen(true)
       return
     }
+    setOpen(false)
     refocus()
   }
 
@@ -166,6 +167,7 @@ export const ThinkingSelectorBase: Component<ThinkingSelectorBaseProps> = (props
                   role="option"
                   aria-selected={props.value === v}
                   tabindex={focused() === i() ? 0 : -1}
+                  data-autofocus={focused() === i() ? "" : undefined}
                   onClick={() => pick(v)}
                   onFocus={() => setFocused(i())}
                 >
diff --git a/packages/kilo-vscode/webview-ui/src/stories/shared.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/shared.stories.tsx
index ca1c3abe40..bf3a16f7dc 100644
--- a/packages/kilo-vscode/webview-ui/src/stories/shared.stories.tsx
+++ b/packages/kilo-vscode/webview-ui/src/stories/shared.stories.tsx
@@ -108,3 +108,28 @@ export const ModelSelectorSelectedFavorite: Story = {
     )
   },
 }
+
+const LARGE_MODELS: EnrichedModel[] = Array.from({ length: 600 }, (_, i) => {
+  const id = String(i).padStart(3, "0")
+  const provider = `provider-${i % 12}`
+  return {
+    id: `model-${id}`,
+    name: `Model ${id}`,
+    providerID: provider,
+    providerName: `Provider ${i % 12}`,
+  }
+})
+
+export const ModelSelectorLargeCatalog: Story = {
+  name: "ModelSelector — large catalog",
+  render: () => (
+    <StoryProviders>
+      <ModelSelectorBase
+        value={{ providerID: "provider-0", modelID: "model-300" }}
+        models={LARGE_MODELS}
+        placement="bottom-start"
+        onSelect={() => {}}
+      />
+    </StoryProviders>
+  ),
+}
diff --git a/packages/kilo-vscode/webview-ui/src/styles/model-selector.css b/packages/kilo-vscode/webview-ui/src/styles/model-selector.css
index e16816425e..dcd5988b84 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/model-selector.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/model-selector.css
@@ -2,6 +2,11 @@
    Model Selector (uses kilo-ui Popover)
    ============================================ */
 
+.popup-selector[data-expanded],
+.popup-selector[data-closed] {
+  animation: none;
+}
+
 .model-selector-popover {
   transition:
     width 0.2s ease,
@@ -383,7 +388,7 @@
   outline-offset: -1px;
 }
 
-.model-selector-group:not(:first-child) > .model-selector-group-label {
+.model-selector-group-label--divided {
   border-top: 1px solid var(--border-weak-base, var(--vscode-panel-border));
   margin-top: 4px;
   padding-top: 8px;