feat(vscode): persist model selector expand/collapse state (#11824)

* feat(vscode): persist model selector expand/collapse state

Save the model picker's preview-panel expand/collapse preference via the
VS Code webview state API so it survives reload, hide/show, and restart.

* chore(vscode): add model picker changeset

* fix(vscode): address model selector review feedback

.changeset/persist-model-picker-state.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Preserve the model picker preview panel expand/collapse state across reloads and restarts.

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

@@ -30,6 +30,7 @@ import { useProvider } from "../../context/provider"
 import type { EnrichedModel } from "../../context/provider"
 import { useSession, SessionContext } from "../../context/session"
 import { useLanguage } from "../../context/language"
+import { useVSCode } from "../../context/vscode"
 import type { ModelSelection } from "../../types/messages"
 import { isEnterKeyCommitNotIme } from "../../utils/ime-enter"
 import {
@@ -138,6 +139,7 @@ export interface ModelSelectorBaseProps {
 export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   const { connected, models, findModel } = useProvider()
   const language = useLanguage()
+  const vscode = useVSCode()
   // Session context is optional — ModelSelectorBase is also used in Settings
   // where SessionProvider may not be mounted.
   const session = useContext(SessionContext)
@@ -153,7 +155,9 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
   })
 
   const [open, setOpen] = createSignal(false)
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(vscode.getModelSelectorExpanded())
+  // Persist the user's expand/collapse choice so it is restored on reopen.
+  createEffect(() => vscode.setModelSelectorExpanded(expanded()))
   const [search, setSearch] = createSignal("")
   const [debouncedSearch, setDebouncedSearch] = createSignal("")
   const [selectedKey, setSelectedKey] = createSignal(CLEAR_KEY)

packages/kilo-vscode/webview-ui/src/context/vscode.tsx

@@ -8,6 +8,7 @@ import type { VSCodeAPI, WebviewMessage, ExtensionMessage } from "../types/messa
 
 // Get the VS Code API (only available in webview context)
 let vscodeApi: VSCodeAPI | undefined
+const EXPANDED = "modelSelectorExpanded"
 
 export function getVSCodeAPI(): VSCodeAPI {
   if (!vscodeApi) {
@@ -33,6 +34,8 @@ interface VSCodeContextValue {
   onMessage: (handler: (message: ExtensionMessage) => void) => () => void
   getState: <T>() => T | undefined
   setState: <T>(state: T) => void
+  getModelSelectorExpanded: () => boolean
+  setModelSelectorExpanded: (value: boolean) => void
 }
 
 const VSCodeContext = createContext<VSCodeContextValue>()
@@ -64,6 +67,14 @@ export const VSCodeProvider: ParentComponent = (props) => {
     },
     getState: <T,>() => api.getState() as T | undefined,
     setState: <T,>(state: T) => api.setState(state),
+    getModelSelectorExpanded: () => {
+      const state = api.getState() as Record<string, unknown> | undefined
+      return state?.[EXPANDED] !== false
+    },
+    setModelSelectorExpanded: (value: boolean) => {
+      const state = (api.getState() as Record<string, unknown> | undefined) ?? {}
+      api.setState({ ...state, [EXPANDED]: value })
+    },
   }
 
   return <VSCodeContext.Provider value={value}>{props.children}</VSCodeContext.Provider>