fix(vscode): restore prompt focus after model picker escape (#9679)

.changeset/model-selector-escape-focus.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Restore prompt focus when the model selector is dismissed with Escape.

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

@@ -80,6 +80,8 @@ export interface ModelSelectorBaseProps {
   onSelect: (providerID: string, modelID: string) => void
   /** Called after a pick closes the popover */
   onPick?: () => void
+  /** Called after Escape closes the popover without picking */
+  onCancel?: () => void
   /** Popover placement — defaults to "top-start" */
   placement?: "top-start" | "bottom-start" | "bottom-end" | "top-end"
   /** Allow clearing the selection (shows a "Not set" option) */
@@ -363,6 +365,17 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   window.addEventListener("openModelPicker", onTrigger)
   onCleanup(() => window.removeEventListener("openModelPicker", onTrigger))
 
+  const onEscape = (e: KeyboardEvent) => {
+    if (!open() || e.key !== "Escape") return
+    e.preventDefault()
+    cancel()
+  }
+  createEffect(() => {
+    if (!open()) return
+    window.addEventListener("keydown", onEscape, true)
+    onCleanup(() => window.removeEventListener("keydown", onEscape, true))
+  })
+
   function pick(model: EnrichedModel) {
     props.onSelect(model.providerID, model.id)
     setOpen(false)
@@ -378,6 +391,12 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
     props.onPick?.()
   }
 
+  function cancel() {
+    if (!open()) return
+    setOpen(false)
+    props.onCancel?.()
+  }
+
   function setRow(key: string) {
     setSelectedKey(key)
     setPreActiveKey(key)
@@ -439,7 +458,7 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
 
     if (e.key === "Escape") {
       e.preventDefault()
-      setOpen(false)
+      cancel()
       return
     }
 
@@ -723,6 +742,9 @@ export const ModelSelector: Component = () => {
       onPick={() => {
         requestAnimationFrame(() => window.dispatchEvent(new CustomEvent("focusPrompt", { detail: { restore: true } })))
       }}
+      onCancel={() => {
+        requestAnimationFrame(() => window.dispatchEvent(new CustomEvent("focusPrompt", { detail: { restore: true } })))
+      }}
     />
   )
 }