apex-code 0.0.1-alpha.1 → 0.0.1-alpha.11

package/dist/modes/interactive/components/model-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/model-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAkB,MAAM,uBAAuB,CAAC;AACnE,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EAGd,KAAK,EAGL,KAAK,GAAG,EACR,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAYzE,UAAU,eAAe;IACxB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAID;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAU,YAAW,SAAS;IACzE,OAAO,CAAC,WAAW,CAAQ;IAG3B,OAAO,CAAC,QAAQ,CAAS;IACzB,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IACD,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,YAAY,CAAC,CAAa;IAClC,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,oBAAoB,CAAgC;IAC5D,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,SAAS,CAAC,CAAO;IACzB,OAAO,CAAC,aAAa,CAAC,CAAO;IAC7B,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAyB;IAChE,OAAO,CAAC,cAAc,CAAC,CAAgC;IACvD,OAAO,CAAC,MAAM,CAAS;IAEvB,YACC,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,EACpC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,aAAa,CAAC,eAAe,CAAC,EAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EACrC,QAAQ,EAAE,MAAM,IAAI,EACpB,kBAAkB,CAAC,EAAE,MAAM,EA2D3B;IAED,OAAO,CAAC,sBAAsB;YAuBhB,aAAa;IAwC3B,OAAO,IAAI,IAAI,CAKd;IAED,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,UAAU;IA+DlB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAyCjC;IAED,OAAO,CAAC,YAAY;IAOpB,cAAc,IAAI,KAAK,CAEtB;CACD","sourcesContent":["import { type Model, modelsAreEqual } from \"@earendil-works/pi-ai\";\nimport {\n\tContainer,\n\ttype Focusable,\n\tfuzzyFilter,\n\tgetKeybindings,\n\tInput,\n\tSpacer,\n\tText,\n\ttype TUI,\n} from \"@earendil-works/pi-tui\";\nimport type { ModelRuntime } from \"../../../core/model-runtime.ts\";\nimport type { SettingsManager } from \"../../../core/settings-manager.ts\";\nimport { getModelSelectorSearchText } from \"../model-search.ts\";\nimport { theme } from \"../theme/theme.ts\";\nimport { DynamicBorder } from \"./dynamic-border.ts\";\nimport { keyHint } from \"./keybinding-hints.ts\";\n\ninterface ModelItem {\n\tprovider: string;\n\tid: string;\n\tmodel: Model<any>;\n}\n\ninterface ScopedModelItem {\n\tmodel: Model<any>;\n\tthinkingLevel?: string;\n}\n\ntype ModelScope = \"all\" | \"scoped\";\n\n/**\n * Component that renders a model selector with search\n */\nexport class ModelSelectorComponent extends Container implements Focusable {\n\tprivate searchInput: Input;\n\n\t// Focusable implementation - propagate to searchInput for IME cursor positioning\n\tprivate _focused = false;\n\tget focused(): boolean {\n\t\treturn this._focused;\n\t}\n\tset focused(value: boolean) {\n\t\tthis._focused = value;\n\t\tthis.searchInput.focused = value;\n\t}\n\tprivate listContainer: Container;\n\tprivate allModels: ModelItem[] = [];\n\tprivate scopedModelItems: ModelItem[] = [];\n\tprivate activeModels: ModelItem[] = [];\n\tprivate filteredModels: ModelItem[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate currentModel?: Model<any>;\n\tprivate settingsManager: SettingsManager;\n\tprivate modelRuntime: ModelRuntime;\n\tprivate onSelectCallback: (model: Model<any>) => void;\n\tprivate onCancelCallback: () => void;\n\tprivate errorMessage?: string;\n\tprivate refreshStatusMessage = \"Refreshing model catalogs…\";\n\tprivate refreshStatusSuccess = false;\n\tprivate tui: TUI;\n\tprivate scopedModels: ReadonlyArray<ScopedModelItem>;\n\tprivate scope: ModelScope = \"all\";\n\tprivate scopeText?: Text;\n\tprivate scopeHintText?: Text;\n\tprivate readonly refreshAbortController = new AbortController();\n\tprivate refreshTimeout?: ReturnType<typeof setTimeout>;\n\tprivate closed = false;\n\n\tconstructor(\n\t\ttui: TUI,\n\t\tcurrentModel: Model<any> | undefined,\n\t\tsettingsManager: SettingsManager,\n\t\tmodelRuntime: ModelRuntime,\n\t\tscopedModels: ReadonlyArray<ScopedModelItem>,\n\t\tonSelect: (model: Model<any>) => void,\n\t\tonCancel: () => void,\n\t\tinitialSearchInput?: string,\n\t) {\n\t\tsuper();\n\n\t\tthis.tui = tui;\n\t\tthis.currentModel = currentModel;\n\t\tthis.settingsManager = settingsManager;\n\t\tthis.modelRuntime = modelRuntime;\n\t\tthis.scopedModels = scopedModels;\n\t\tthis.scope = scopedModels.length > 0 ? \"scoped\" : \"all\";\n\t\tthis.onSelectCallback = onSelect;\n\t\tthis.onCancelCallback = onCancel;\n\n\t\t// Add top border\n\t\tthis.addChild(new DynamicBorder());\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Add hint about model filtering\n\t\tif (scopedModels.length > 0) {\n\t\t\tthis.scopeText = new Text(this.getScopeText(), 0, 0);\n\t\t\tthis.addChild(this.scopeText);\n\t\t\tthis.scopeHintText = new Text(this.getScopeHintText(), 0, 0);\n\t\t\tthis.addChild(this.scopeHintText);\n\t\t} else {\n\t\t\tconst hintText = \"Only showing models from configured providers. Use /login to add providers.\";\n\t\t\tthis.addChild(new Text(theme.fg(\"warning\", hintText), 0, 0));\n\t\t}\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create search input\n\t\tthis.searchInput = new Input();\n\t\tif (initialSearchInput) {\n\t\t\tthis.searchInput.setValue(initialSearchInput);\n\t\t}\n\t\tthis.searchInput.onSubmit = () => {\n\t\t\t// Enter on search input selects the first filtered item\n\t\t\tif (this.filteredModels[this.selectedIndex]) {\n\t\t\t\tthis.handleSelect(this.filteredModels[this.selectedIndex].model);\n\t\t\t}\n\t\t};\n\t\tthis.addChild(this.searchInput);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create list container\n\t\tthis.listContainer = new Container();\n\t\tthis.addChild(this.listContainer);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Add bottom border\n\t\tthis.addChild(new DynamicBorder());\n\n\t\t// Render the current snapshot immediately, then refresh in the background.\n\t\tthis.loadModelsFromSnapshot();\n\t\tif (initialSearchInput) this.filterModels(initialSearchInput);\n\t\telse this.updateList();\n\t\tthis.tui.requestRender();\n\t\tvoid this.refreshModels();\n\t}\n\n\tprivate loadModelsFromSnapshot(): void {\n\t\tconst models = this.modelRuntime.getAvailableSnapshot().map((model: Model<any>) => ({\n\t\t\tprovider: model.provider,\n\t\t\tid: model.id,\n\t\t\tmodel,\n\t\t}));\n\t\tthis.allModels = this.sortModels(models);\n\t\tthis.scopedModels = this.scopedModels.map((scoped) => {\n\t\t\tconst refreshed = this.modelRuntime.getModel(scoped.model.provider, scoped.model.id);\n\t\t\treturn refreshed ? { ...scoped, model: refreshed } : scoped;\n\t\t});\n\t\tthis.scopedModelItems = this.scopedModels.map((scoped) => ({\n\t\t\tprovider: scoped.model.provider,\n\t\t\tid: scoped.model.id,\n\t\t\tmodel: scoped.model,\n\t\t}));\n\t\tthis.activeModels = this.scope === \"scoped\" ? this.scopedModelItems : this.allModels;\n\t\tthis.filteredModels = this.activeModels;\n\t\tconst currentIndex = this.filteredModels.findIndex((item) => modelsAreEqual(this.currentModel, item.model));\n\t\tthis.selectedIndex =\n\t\t\tcurrentIndex >= 0 ? currentIndex : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));\n\t}\n\n\tprivate async refreshModels(): Promise<void> {\n\t\tconst timeoutMs = 15_000;\n\t\tlet timedOut = false;\n\t\tthis.refreshTimeout = setTimeout(() => {\n\t\t\ttimedOut = true;\n\t\t\tthis.refreshAbortController.abort();\n\t\t}, timeoutMs);\n\t\ttry {\n\t\t\tconst result = await this.modelRuntime.refresh({ signal: this.refreshAbortController.signal });\n\t\t\tif (this.closed) return;\n\t\t\tthis.refreshStatusMessage = \"\";\n\t\t\tif (result.aborted && timedOut) {\n\t\t\t\tthis.errorMessage = \"Model refresh timed out; showing cached models.\";\n\t\t\t} else if (result.errors.size === 1) {\n\t\t\t\tthis.errorMessage = `Could not refresh ${result.errors.keys().next().value}; showing cached models.`;\n\t\t\t} else if (result.errors.size > 1) {\n\t\t\t\tthis.errorMessage = `Could not refresh ${result.errors.size} model catalogs (${[...result.errors.keys()].join(\", \")}); showing cached models.`;\n\t\t\t} else {\n\t\t\t\tthis.errorMessage = this.modelRuntime.getError();\n\t\t\t\tif (!this.errorMessage) {\n\t\t\t\t\tthis.refreshStatusMessage = \"Model catalogs refreshed.\";\n\t\t\t\t\tthis.refreshStatusSuccess = true;\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.loadModelsFromSnapshot();\n\t\t\tthis.filterModels(this.searchInput.getValue());\n\t\t\tthis.tui.requestRender();\n\t\t} catch (error) {\n\t\t\tif (this.closed) return;\n\t\t\tthis.refreshStatusMessage = \"\";\n\t\t\tthis.errorMessage = timedOut\n\t\t\t\t? \"Model refresh timed out; showing cached models.\"\n\t\t\t\t: `Could not refresh model catalogs: ${error instanceof Error ? error.message : String(error)}`;\n\t\t\tthis.updateList();\n\t\t\tthis.tui.requestRender();\n\t\t} finally {\n\t\t\tif (this.refreshTimeout) clearTimeout(this.refreshTimeout);\n\t\t}\n\t}\n\n\tdispose(): void {\n\t\tif (this.closed) return;\n\t\tthis.closed = true;\n\t\tif (this.refreshTimeout) clearTimeout(this.refreshTimeout);\n\t\tthis.refreshAbortController.abort();\n\t}\n\n\tprivate sortModels(models: ModelItem[]): ModelItem[] {\n\t\tconst sorted = [...models];\n\t\t// Sort: current model first, then by provider\n\t\tsorted.sort((a, b) => {\n\t\t\tconst aIsCurrent = modelsAreEqual(this.currentModel, a.model);\n\t\t\tconst bIsCurrent = modelsAreEqual(this.currentModel, b.model);\n\t\t\tif (aIsCurrent && !bIsCurrent) return -1;\n\t\t\tif (!aIsCurrent && bIsCurrent) return 1;\n\t\t\treturn a.provider.localeCompare(b.provider);\n\t\t});\n\t\treturn sorted;\n\t}\n\n\tprivate getScopeText(): string {\n\t\tconst allText = this.scope === \"all\" ? theme.fg(\"accent\", \"all\") : theme.fg(\"muted\", \"all\");\n\t\tconst scopedText = this.scope === \"scoped\" ? theme.fg(\"accent\", \"scoped\") : theme.fg(\"muted\", \"scoped\");\n\t\treturn `${theme.fg(\"muted\", \"Scope: \")}${allText}${theme.fg(\"muted\", \" | \")}${scopedText}`;\n\t}\n\n\tprivate getScopeHintText(): string {\n\t\treturn keyHint(\"tui.input.tab\", \"scope\") + theme.fg(\"muted\", \" (all/scoped)\");\n\t}\n\n\tprivate setScope(scope: ModelScope): void {\n\t\tif (this.scope === scope) return;\n\t\tthis.scope = scope;\n\t\tthis.activeModels = this.scope === \"scoped\" ? this.scopedModelItems : this.allModels;\n\t\tconst currentIndex = this.activeModels.findIndex((item) => modelsAreEqual(this.currentModel, item.model));\n\t\tthis.selectedIndex = currentIndex >= 0 ? currentIndex : 0;\n\t\tthis.filterModels(this.searchInput.getValue());\n\t\tif (this.scopeText) {\n\t\t\tthis.scopeText.setText(this.getScopeText());\n\t\t}\n\t}\n\n\tprivate filterModels(query: string): void {\n\t\tthis.filteredModels = query\n\t\t\t? fuzzyFilter(this.activeModels, query, ({ id, provider, model }) =>\n\t\t\t\t\tgetModelSelectorSearchText({ id, provider, name: model.name }),\n\t\t\t\t)\n\t\t\t: this.activeModels;\n\t\t// When filtering by a query, move the selector to the top row so the best\n\t\t// match is highlighted. When the query is cleared, keep the current position\n\t\t// clamped to the (restored) list length.\n\t\tthis.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));\n\t\tthis.updateList();\n\t}\n\n\tprivate updateList(): void {\n\t\tthis.listContainer.clear();\n\n\t\tconst maxVisible = 10;\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(maxVisible / 2), this.filteredModels.length - maxVisible),\n\t\t);\n\t\tconst endIndex = Math.min(startIndex + maxVisible, this.filteredModels.length);\n\n\t\t// Show visible slice of filtered models\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst item = this.filteredModels[i];\n\t\t\tif (!item) continue;\n\n\t\t\tconst isSelected = i === this.selectedIndex;\n\t\t\tconst isCurrent = modelsAreEqual(this.currentModel, item.model);\n\n\t\t\tlet line = \"\";\n\t\t\tif (isSelected) {\n\t\t\t\tconst prefix = theme.fg(\"accent\", \"→ \");\n\t\t\t\tconst modelText = `${item.id}`;\n\t\t\t\tconst providerBadge = theme.fg(\"muted\", `[${item.provider}]`);\n\t\t\t\tconst checkmark = isCurrent ? theme.fg(\"success\", \" ✓\") : \"\";\n\t\t\t\tline = `${prefix + theme.fg(\"accent\", modelText)} ${providerBadge}${checkmark}`;\n\t\t\t} else {\n\t\t\t\tconst modelText = `  ${item.id}`;\n\t\t\t\tconst providerBadge = theme.fg(\"muted\", `[${item.provider}]`);\n\t\t\t\tconst checkmark = isCurrent ? theme.fg(\"success\", \" ✓\") : \"\";\n\t\t\t\tline = `${modelText} ${providerBadge}${checkmark}`;\n\t\t\t}\n\n\t\t\tthis.listContainer.addChild(new Text(line, 0, 0));\n\t\t}\n\n\t\t// Add scroll indicator if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredModels.length) {\n\t\t\tconst scrollInfo = theme.fg(\"muted\", `  (${this.selectedIndex + 1}/${this.filteredModels.length})`);\n\t\t\tthis.listContainer.addChild(new Text(scrollInfo, 0, 0));\n\t\t}\n\n\t\t// Show error message or \"no results\" if empty\n\t\tif (this.errorMessage) {\n\t\t\t// Show error in red\n\t\t\tconst errorLines = this.errorMessage.split(\"\\n\");\n\t\t\tfor (const line of errorLines) {\n\t\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"error\", line), 0, 0));\n\t\t\t}\n\t\t} else if (this.filteredModels.length === 0) {\n\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"muted\", \"  No matching models\"), 0, 0));\n\t\t} else {\n\t\t\tconst selected = this.filteredModels[this.selectedIndex];\n\t\t\tthis.listContainer.addChild(new Spacer(1));\n\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"muted\", `  Model Name: ${selected.model.name}`), 0, 0));\n\t\t}\n\t\tif (this.refreshStatusMessage) {\n\t\t\tthis.listContainer.addChild(new Spacer(1));\n\t\t\tthis.listContainer.addChild(\n\t\t\t\tnew Text(theme.fg(this.refreshStatusSuccess ? \"success\" : \"muted\", `  ${this.refreshStatusMessage}`), 0, 0),\n\t\t\t);\n\t\t}\n\t}\n\n\thandleInput(keyData: string): void {\n\t\tconst kb = getKeybindings();\n\t\tif (kb.matches(keyData, \"tui.input.tab\")) {\n\t\t\tif (this.scopedModelItems.length > 0) {\n\t\t\t\tconst nextScope: ModelScope = this.scope === \"all\" ? \"scoped\" : \"all\";\n\t\t\t\tthis.setScope(nextScope);\n\t\t\t\tif (this.scopeHintText) {\n\t\t\t\t\tthis.scopeHintText.setText(this.getScopeHintText());\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\t// Up arrow - wrap to bottom when at top\n\t\tif (kb.matches(keyData, \"tui.select.up\")) {\n\t\t\tif (this.filteredModels.length === 0) return;\n\t\t\tthis.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Down arrow - wrap to top when at bottom\n\t\telse if (kb.matches(keyData, \"tui.select.down\")) {\n\t\t\tif (this.filteredModels.length === 0) return;\n\t\t\tthis.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Enter\n\t\telse if (kb.matches(keyData, \"tui.select.confirm\")) {\n\t\t\tconst selectedModel = this.filteredModels[this.selectedIndex];\n\t\t\tif (selectedModel) {\n\t\t\t\tthis.handleSelect(selectedModel.model);\n\t\t\t}\n\t\t}\n\t\t// Escape or Ctrl+C\n\t\telse if (kb.matches(keyData, \"tui.select.cancel\")) {\n\t\t\tthis.dispose();\n\t\t\tthis.onCancelCallback();\n\t\t}\n\t\t// Pass everything else to search input\n\t\telse {\n\t\t\tthis.searchInput.handleInput(keyData);\n\t\t\tthis.filterModels(this.searchInput.getValue());\n\t\t}\n\t}\n\n\tprivate handleSelect(model: Model<any>): void {\n\t\tthis.dispose();\n\t\t// Save as new default\n\t\tthis.settingsManager.setDefaultModelAndProvider(model.provider, model.id);\n\t\tthis.onSelectCallback(model);\n\t}\n\n\tgetSearchInput(): Input {\n\t\treturn this.searchInput;\n\t}\n}\n"]}
+{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../../../src/modes/interactive/components/model-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAkB,MAAM,uBAAuB,CAAC;AACnE,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EAGd,KAAK,EAKL,KAAK,GAAG,EACR,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAanE,UAAU,eAAe;IACxB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,qBAAqB;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACX;AAgBD;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,SAAU,YAAW,SAAS;IACzE,OAAO,CAAC,WAAW,CAAQ;IAG3B,OAAO,CAAC,QAAQ,CAAS;IACzB,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IACD,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,YAAY,CAAC,CAAa;IAClC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,yBAAyB,CAAC,CAA8B;IAChE,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,oBAAoB,CAAgC;IAC5D,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,YAAY,CAAC,CAAwB;IAC7C,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,IAAI,CAA+B;IAC3C,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAyB;IAChE,OAAO,CAAC,cAAc,CAAC,CAAgC;IACvD,OAAO,CAAC,MAAM,CAAS;IAEvB,YACC,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,EACpC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,aAAa,CAAC,eAAe,CAAC,EAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EACrC,QAAQ,EAAE,MAAM,IAAI,EACpB,kBAAkB,CAAC,EAAE,MAAM,EAC3B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EAC/C,YAAY,CAAC,EAAE,qBAAqB,EAwDpC;IAED,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,sBAAsB;YAmBhB,aAAa;IA0C3B,OAAO,IAAI,IAAI,CAKd;IAED,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,WAAW;IAInB,gGAAgG;IAChG,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,UAAU;IA8ClB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CA+CjC;IAED,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,YAAY;IAKpB,cAAc,IAAI,KAAK,CAEtB;CACD","sourcesContent":["import { type Model, modelsAreEqual } from \"@earendil-works/pi-ai\";\nimport {\n\tContainer,\n\ttype Focusable,\n\tfuzzyFilter,\n\tgetKeybindings,\n\tInput,\n\tKey,\n\tmatchesKey,\n\tSpacer,\n\tText,\n\ttype TUI,\n} from \"@earendil-works/pi-tui\";\nimport type { ModelRuntime } from \"../../../core/model-runtime.ts\";\nimport { refreshModelCatalogs } from \"../model-catalog-refresh.ts\";\nimport { getModelSelectorSearchText } from \"../model-search.ts\";\nimport { theme } from \"../theme/theme.ts\";\nimport { DynamicBorder } from \"./dynamic-border.ts\";\nimport { keyHint, keyText, rawKeyHint } from \"./keybinding-hints.ts\";\n\ninterface ModelItem {\n\tprovider: string;\n\tid: string;\n\tmodel: Model<any>;\n}\n\ninterface ScopedModelItem {\n\tmodel: Model<any>;\n\tthinkingLevel?: string;\n}\n\ninterface DefaultModelReference {\n\tprovider: string;\n\tid: string;\n}\n\ntype ModelScope = \"all\" | \"scoped\";\n\n/**\n * Which of the two steps the selector is on. `provider: null` lists every provider's models at once,\n * which is how a `/model <search>` invocation and a single-provider setup both open.\n */\ntype Step = { kind: \"providers\" } | { kind: \"models\"; provider: string | null };\n\ntype Row =\n\t| { kind: \"provider\"; provider: string; count: number; hasCurrent: boolean }\n\t| { kind: \"model\"; item: ModelItem };\n\nconst MAX_VISIBLE_ROWS = 10;\n\n/**\n * Component that renders a two-step model selector: provider first, then that provider's models.\n */\nexport class ModelSelectorComponent extends Container implements Focusable {\n\tprivate searchInput: Input;\n\n\t// Focusable implementation - propagate to searchInput for IME cursor positioning\n\tprivate _focused = false;\n\tget focused(): boolean {\n\t\treturn this._focused;\n\t}\n\tset focused(value: boolean) {\n\t\tthis._focused = value;\n\t\tthis.searchInput.focused = value;\n\t}\n\tprivate headerContainer: Container;\n\tprivate listContainer: Container;\n\tprivate footerContainer: Container;\n\tprivate allModels: ModelItem[] = [];\n\tprivate scopedModelItems: ModelItem[] = [];\n\tprivate activeModels: ModelItem[] = [];\n\tprivate rows: Row[] = [];\n\tprivate filteredRows: Row[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate currentModel?: Model<any>;\n\tprivate modelRuntime: ModelRuntime;\n\tprivate onSelectCallback: (model: Model<any>) => void;\n\tprivate onSelectAsDefaultCallback?: (model: Model<any>) => void;\n\tprivate onCancelCallback: () => void;\n\tprivate errorMessage?: string;\n\tprivate refreshStatusMessage = \"Refreshing model catalogs…\";\n\tprivate refreshStatusSuccess = false;\n\tprivate tui: TUI;\n\tprivate scopedModels: ReadonlyArray<ScopedModelItem>;\n\tprivate defaultModel?: DefaultModelReference;\n\tprivate scope: ModelScope = \"all\";\n\tprivate step: Step = { kind: \"providers\" };\n\tprivate readonly refreshAbortController = new AbortController();\n\tprivate refreshTimeout?: ReturnType<typeof setTimeout>;\n\tprivate closed = false;\n\n\tconstructor(\n\t\ttui: TUI,\n\t\tcurrentModel: Model<any> | undefined,\n\t\tmodelRuntime: ModelRuntime,\n\t\tscopedModels: ReadonlyArray<ScopedModelItem>,\n\t\tonSelect: (model: Model<any>) => void,\n\t\tonCancel: () => void,\n\t\tinitialSearchInput?: string,\n\t\tonSelectAsDefault?: (model: Model<any>) => void,\n\t\tdefaultModel?: DefaultModelReference,\n\t) {\n\t\tsuper();\n\n\t\tthis.tui = tui;\n\t\tthis.currentModel = currentModel;\n\t\tthis.modelRuntime = modelRuntime;\n\t\tthis.scopedModels = scopedModels;\n\t\tthis.defaultModel = defaultModel;\n\t\tthis.scope = scopedModels.length > 0 ? \"scoped\" : \"all\";\n\t\tthis.onSelectCallback = onSelect;\n\t\tthis.onSelectAsDefaultCallback = onSelectAsDefault;\n\t\tthis.onCancelCallback = onCancel;\n\n\t\t// Add top border\n\t\tthis.addChild(new DynamicBorder());\n\t\tthis.addChild(new Spacer(1));\n\n\t\tthis.headerContainer = new Container();\n\t\tthis.addChild(this.headerContainer);\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create search input\n\t\tthis.searchInput = new Input();\n\t\tif (initialSearchInput) {\n\t\t\tthis.searchInput.setValue(initialSearchInput);\n\t\t}\n\t\tthis.searchInput.onSubmit = () => this.confirmSelection();\n\t\tthis.addChild(this.searchInput);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Create list container\n\t\tthis.listContainer = new Container();\n\t\tthis.addChild(this.listContainer);\n\n\t\tthis.addChild(new Spacer(1));\n\n\t\t// Keybindings live under the list, where the eye already is once it has\n\t\t// finished reading. Above the list they were the first thing read and the\n\t\t// least useful.\n\t\tthis.footerContainer = new Container();\n\t\tthis.addChild(this.footerContainer);\n\n\t\t// Add bottom border\n\t\tthis.addChild(new DynamicBorder());\n\n\t\t// Render the current snapshot immediately, then refresh in the background.\n\t\tthis.loadModelsFromSnapshot();\n\t\tthis.step = this.initialStep(initialSearchInput);\n\t\tthis.rebuildRows();\n\t\tthis.selectedIndex = this.defaultSelectedIndex();\n\t\tthis.renderHeader();\n\t\tthis.filterRows(this.searchInput.getValue());\n\t\tthis.tui.requestRender();\n\t\tvoid this.refreshModels();\n\t}\n\n\tprivate initialStep(initialSearchInput: string | undefined): Step {\n\t\tconst providers = this.activeProviders();\n\t\tif (initialSearchInput) return { kind: \"models\", provider: null };\n\t\tif (providers.length <= 1) return { kind: \"models\", provider: providers[0] ?? null };\n\t\treturn { kind: \"providers\" };\n\t}\n\n\tprivate activeProviders(): string[] {\n\t\treturn [...new Set(this.activeModels.map((item) => item.provider))];\n\t}\n\n\tprivate loadModelsFromSnapshot(): void {\n\t\tconst models = this.modelRuntime.getAvailableSnapshot().map((model: Model<any>) => ({\n\t\t\tprovider: model.provider,\n\t\t\tid: model.id,\n\t\t\tmodel,\n\t\t}));\n\t\tthis.allModels = this.sortModels(models);\n\t\tthis.scopedModels = this.scopedModels.map((scoped) => {\n\t\t\tconst refreshed = this.modelRuntime.getModel(scoped.model.provider, scoped.model.id);\n\t\t\treturn refreshed ? { ...scoped, model: refreshed } : scoped;\n\t\t});\n\t\tthis.scopedModelItems = this.scopedModels.map((scoped) => ({\n\t\t\tprovider: scoped.model.provider,\n\t\t\tid: scoped.model.id,\n\t\t\tmodel: scoped.model,\n\t\t}));\n\t\tthis.activeModels = this.scope === \"scoped\" ? this.scopedModelItems : this.allModels;\n\t}\n\n\tprivate async refreshModels(): Promise<void> {\n\t\tconst timeoutMs = 15_000;\n\t\tlet timedOut = false;\n\t\tthis.refreshTimeout = setTimeout(() => {\n\t\t\ttimedOut = true;\n\t\t\tthis.refreshAbortController.abort();\n\t\t}, timeoutMs);\n\t\ttry {\n\t\t\tconst result = await refreshModelCatalogs(this.modelRuntime, this.refreshAbortController.signal);\n\t\t\tif (this.closed) return;\n\t\t\tthis.refreshStatusMessage = \"\";\n\t\t\tif (result.aborted && timedOut) {\n\t\t\t\tthis.errorMessage = \"Model refresh timed out; showing cached models.\";\n\t\t\t} else if (result.errors.size === 1) {\n\t\t\t\tthis.errorMessage = `Could not refresh ${result.errors.keys().next().value}; showing cached models.`;\n\t\t\t} else if (result.errors.size > 1) {\n\t\t\t\tthis.errorMessage = `Could not refresh ${result.errors.size} model catalogs (${[...result.errors.keys()].join(\", \")}); showing cached models.`;\n\t\t\t} else {\n\t\t\t\tthis.errorMessage = this.modelRuntime.getError();\n\t\t\t\tif (!this.errorMessage) {\n\t\t\t\t\tthis.refreshStatusMessage = \"Model catalogs refreshed.\";\n\t\t\t\t\tthis.refreshStatusSuccess = true;\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.loadModelsFromSnapshot();\n\t\t\tthis.rebuildRows();\n\t\t\tthis.renderHeader();\n\t\t\tthis.filterRows(this.searchInput.getValue());\n\t\t\tthis.tui.requestRender();\n\t\t} catch (error) {\n\t\t\tif (this.closed) return;\n\t\t\tthis.refreshStatusMessage = \"\";\n\t\t\tthis.errorMessage = timedOut\n\t\t\t\t? \"Model refresh timed out; showing cached models.\"\n\t\t\t\t: `Could not refresh model catalogs: ${error instanceof Error ? error.message : String(error)}`;\n\t\t\tthis.updateList();\n\t\t\tthis.tui.requestRender();\n\t\t} finally {\n\t\t\tif (this.refreshTimeout) clearTimeout(this.refreshTimeout);\n\t\t}\n\t}\n\n\tdispose(): void {\n\t\tif (this.closed) return;\n\t\tthis.closed = true;\n\t\tif (this.refreshTimeout) clearTimeout(this.refreshTimeout);\n\t\tthis.refreshAbortController.abort();\n\t}\n\n\tprivate sortModels(models: ModelItem[]): ModelItem[] {\n\t\tconst sorted = [...models];\n\t\t// Sort: current model first, default model second, then by provider.\n\t\tsorted.sort((a, b) => {\n\t\t\tconst aIsCurrent = modelsAreEqual(this.currentModel, a.model);\n\t\t\tconst bIsCurrent = modelsAreEqual(this.currentModel, b.model);\n\t\t\tif (aIsCurrent && !bIsCurrent) return -1;\n\t\t\tif (!aIsCurrent && bIsCurrent) return 1;\n\t\t\tconst aIsDefault = this.isDefaultModel(a.model);\n\t\t\tconst bIsDefault = this.isDefaultModel(b.model);\n\t\t\tif (aIsDefault && !bIsDefault) return -1;\n\t\t\tif (!aIsDefault && bIsDefault) return 1;\n\t\t\treturn a.provider.localeCompare(b.provider);\n\t\t});\n\t\treturn sorted;\n\t}\n\n\tprivate rebuildRows(): void {\n\t\tif (this.step.kind === \"providers\") {\n\t\t\tconst byProvider = new Map<string, ModelItem[]>();\n\t\t\tfor (const item of this.activeModels) {\n\t\t\t\tconst existing = byProvider.get(item.provider);\n\t\t\t\tif (existing) existing.push(item);\n\t\t\t\telse byProvider.set(item.provider, [item]);\n\t\t\t}\n\t\t\tconst providerRows: Row[] = [...byProvider].map(([provider, items]) => ({\n\t\t\t\tkind: \"provider\",\n\t\t\t\tprovider,\n\t\t\t\tcount: items.length,\n\t\t\t\thasCurrent: items.some((item) => modelsAreEqual(this.currentModel, item.model)),\n\t\t\t}));\n\t\t\tproviderRows.sort((a, b) => {\n\t\t\t\tif (a.kind !== \"provider\" || b.kind !== \"provider\") return 0;\n\t\t\t\tif (a.hasCurrent !== b.hasCurrent) return a.hasCurrent ? -1 : 1;\n\t\t\t\treturn a.provider.localeCompare(b.provider);\n\t\t\t});\n\t\t\tthis.rows = providerRows;\n\t\t\treturn;\n\t\t}\n\t\tconst provider = this.step.provider;\n\t\tconst models = provider === null ? this.activeModels : this.activeModels.filter((m) => m.provider === provider);\n\t\tthis.rows = models.map((item) => ({ kind: \"model\", item }));\n\t}\n\n\tprivate defaultSelectedIndex(): number {\n\t\tconst index = this.rows.findIndex((row) =>\n\t\t\trow.kind === \"provider\" ? row.hasCurrent : modelsAreEqual(this.currentModel, row.item.model),\n\t\t);\n\t\treturn index >= 0 ? index : 0;\n\t}\n\n\tprivate setStep(step: Step): void {\n\t\tthis.step = step;\n\t\tthis.searchInput.setValue(\"\");\n\t\tthis.rebuildRows();\n\t\tthis.selectedIndex = this.defaultSelectedIndex();\n\t\tthis.renderHeader();\n\t\tthis.filterRows(\"\");\n\t\tthis.tui.requestRender();\n\t}\n\n\tprivate isDrilledIn(): boolean {\n\t\treturn this.step.kind === \"models\" && this.step.provider !== null;\n\t}\n\n\t/** Escape returns to the provider list whenever there is a provider list worth returning to. */\n\tprivate canGoBack(): boolean {\n\t\treturn this.step.kind === \"models\" && this.activeProviders().length > 1;\n\t}\n\n\tprivate renderHeader(): void {\n\t\tthis.headerContainer.clear();\n\n\t\tif (this.step.kind === \"providers\") {\n\t\t\tthis.headerContainer.addChild(new Text(theme.bold(theme.fg(\"accent\", \"Select a provider\")), 0, 0));\n\t\t} else {\n\t\t\tconst label = this.step.provider ?? \"All providers\";\n\t\t\tconst crumb = `${theme.bold(theme.fg(\"accent\", label))}${theme.fg(\"muted\", \" › select a model\")}`;\n\t\t\tthis.headerContainer.addChild(new Text(crumb, 0, 0));\n\t\t}\n\n\t\tif (this.scopedModelItems.length > 0) {\n\t\t\tthis.headerContainer.addChild(new Text(this.getScopeText(), 0, 0));\n\t\t} else if (!this.isDrilledIn()) {\n\t\t\tconst hintText = \"Only showing models from configured providers. Use /login to add providers.\";\n\t\t\tthis.headerContainer.addChild(new Text(theme.fg(\"warning\", hintText), 0, 0));\n\t\t}\n\n\t\tthis.renderFooter();\n\t}\n\n\tprivate renderFooter(): void {\n\t\tthis.footerContainer.clear();\n\t\tthis.footerContainer.addChild(new Text(this.getHintText(), 0, 0));\n\t}\n\n\tprivate getScopeText(): string {\n\t\tconst allText = this.scope === \"all\" ? theme.fg(\"accent\", \"all\") : theme.fg(\"muted\", \"all\");\n\t\tconst scopedText = this.scope === \"scoped\" ? theme.fg(\"accent\", \"scoped\") : theme.fg(\"muted\", \"scoped\");\n\t\treturn `${theme.fg(\"muted\", \"Scope: \")}${allText}${theme.fg(\"muted\", \" | \")}${scopedText}`;\n\t}\n\n\tprivate getHintText(): string {\n\t\tconst hints: string[] = [\n\t\t\t// Both arrows, since either one moves the selection.\n\t\t\trawKeyHint(`${keyText(\"tui.select.up\")}/${keyText(\"tui.select.down\")}`, \"move\"),\n\t\t\tkeyHint(\"tui.select.confirm\", \"select\"),\n\t\t];\n\t\tif (this.scopedModelItems.length > 0) {\n\t\t\thints.push(keyHint(\"tui.input.tab\", \"scope\") + theme.fg(\"muted\", \" (all/scoped)\"));\n\t\t}\n\t\tif (this.onSelectAsDefaultCallback) hints.push(rawKeyHint(\"ctrl+s\", \"set as default\"));\n\t\tif (this.canGoBack()) hints.push(rawKeyHint(\"escape\", \"providers\"), rawKeyHint(\"ctrl+c\", \"close\"));\n\t\telse hints.push(keyHint(\"tui.select.cancel\", \"close\"));\n\t\treturn hints.join(theme.fg(\"borderMuted\", \" · \"));\n\t}\n\n\tprivate isDefaultModel(model: Model<any>): boolean {\n\t\treturn this.defaultModel?.provider === model.provider && this.defaultModel.id === model.id;\n\t}\n\n\tprivate isDefaultSearch(query: string): boolean {\n\t\tconst normalized = query.trim().toLowerCase();\n\t\treturn normalized.length > 0 && \"default\".startsWith(normalized);\n\t}\n\n\tprivate setScope(scope: ModelScope): void {\n\t\tif (this.scope === scope) return;\n\t\tthis.scope = scope;\n\t\tthis.activeModels = this.scope === \"scoped\" ? this.scopedModelItems : this.allModels;\n\t\tthis.rebuildRows();\n\t\tthis.selectedIndex = this.defaultSelectedIndex();\n\t\tthis.renderHeader();\n\t\tthis.filterRows(this.searchInput.getValue());\n\t}\n\n\tprivate rowSearchText(row: Row): string {\n\t\tif (row.kind === \"provider\") return row.provider;\n\t\tconst defaultText = this.isDefaultModel(row.item.model) ? \" default\" : \"\";\n\t\treturn `${getModelSelectorSearchText({ id: row.item.id, provider: row.item.provider, name: row.item.model.name })}${defaultText}`;\n\t}\n\n\tprivate isDefaultRow(row: Row): boolean {\n\t\treturn row.kind === \"model\" && this.isDefaultModel(row.item.model);\n\t}\n\n\tprivate filterRows(query: string): void {\n\t\tif (!query) {\n\t\t\tthis.filteredRows = this.rows;\n\t\t} else {\n\t\t\tconst filtered = fuzzyFilter(this.rows, query, (row) => this.rowSearchText(row));\n\t\t\tif (this.isDefaultSearch(query)) {\n\t\t\t\t// Typing \"default\" (or a prefix of it) surfaces the default model even\n\t\t\t\t// when its name doesn't otherwise fuzzy-match the query.\n\t\t\t\tconst defaultRows = this.rows.filter((row) => this.isDefaultRow(row));\n\t\t\t\tthis.filteredRows = [...defaultRows, ...filtered.filter((row) => !this.isDefaultRow(row))];\n\t\t\t} else {\n\t\t\t\tthis.filteredRows = filtered;\n\t\t\t}\n\t\t}\n\t\t// When filtering by a query, move the selector to the top row so the best\n\t\t// match is highlighted. When the query is cleared, keep the current position\n\t\t// clamped to the (restored) list length.\n\t\tthis.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.filteredRows.length - 1));\n\t\tthis.updateList();\n\t}\n\n\tprivate renderRow(row: Row, isSelected: boolean): string {\n\t\tconst prefix = isSelected ? theme.fg(\"accent\", \"→ \") : \"  \";\n\t\tif (row.kind === \"provider\") {\n\t\t\tconst label = isSelected ? theme.fg(\"accent\", row.provider) : row.provider;\n\t\t\tconst count = theme.fg(\"muted\", ` (${row.count} model${row.count === 1 ? \"\" : \"s\"})`);\n\t\t\tconst checkmark = row.hasCurrent ? theme.fg(\"success\", \" ✓\") : \"\";\n\t\t\treturn `${prefix}${label}${count}${checkmark}`;\n\t\t}\n\t\tconst label = isSelected ? theme.fg(\"accent\", row.item.id) : row.item.id;\n\t\tconst showProvider = this.step.kind === \"models\" && this.step.provider === null;\n\t\tconst badge = showProvider ? ` ${theme.fg(\"muted\", `[${row.item.provider}]`)}` : \"\";\n\t\tconst defaultBadge = this.isDefaultModel(row.item.model) ? theme.fg(\"muted\", \" · default\") : \"\";\n\t\tconst checkmark = modelsAreEqual(this.currentModel, row.item.model) ? theme.fg(\"success\", \" ✓\") : \"\";\n\t\treturn `${prefix}${label}${badge}${defaultBadge}${checkmark}`;\n\t}\n\n\tprivate updateList(): void {\n\t\tthis.listContainer.clear();\n\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(MAX_VISIBLE_ROWS / 2), this.filteredRows.length - MAX_VISIBLE_ROWS),\n\t\t);\n\t\tconst endIndex = Math.min(startIndex + MAX_VISIBLE_ROWS, this.filteredRows.length);\n\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst row = this.filteredRows[i];\n\t\t\tif (!row) continue;\n\t\t\tthis.listContainer.addChild(new Text(this.renderRow(row, i === this.selectedIndex), 0, 0));\n\t\t}\n\n\t\t// Add scroll indicator if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredRows.length) {\n\t\t\tconst scrollInfo = theme.fg(\"muted\", `  (${this.selectedIndex + 1}/${this.filteredRows.length})`);\n\t\t\tthis.listContainer.addChild(new Text(scrollInfo, 0, 0));\n\t\t}\n\n\t\t// Show error message or \"no results\" if empty\n\t\tif (this.errorMessage) {\n\t\t\t// Show error in red\n\t\t\tconst errorLines = this.errorMessage.split(\"\\n\");\n\t\t\tfor (const line of errorLines) {\n\t\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"error\", line), 0, 0));\n\t\t\t}\n\t\t} else if (this.filteredRows.length === 0) {\n\t\t\tconst empty = this.step.kind === \"providers\" ? \"  No matching providers\" : \"  No matching models\";\n\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"muted\", empty), 0, 0));\n\t\t} else {\n\t\t\tconst selected = this.filteredRows[this.selectedIndex];\n\t\t\tif (selected?.kind === \"model\") {\n\t\t\t\tthis.listContainer.addChild(new Spacer(1));\n\t\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"muted\", `  Model Name: ${selected.item.model.name}`), 0, 0));\n\t\t\t}\n\t\t}\n\t\tif (this.refreshStatusMessage) {\n\t\t\tthis.listContainer.addChild(new Spacer(1));\n\t\t\tthis.listContainer.addChild(\n\t\t\t\tnew Text(theme.fg(this.refreshStatusSuccess ? \"success\" : \"muted\", `  ${this.refreshStatusMessage}`), 0, 0),\n\t\t\t);\n\t\t}\n\t}\n\n\thandleInput(keyData: string): void {\n\t\tconst kb = getKeybindings();\n\t\tif (kb.matches(keyData, \"tui.input.tab\")) {\n\t\t\tif (this.scopedModelItems.length > 0) {\n\t\t\t\tthis.setScope(this.scope === \"all\" ? \"scoped\" : \"all\");\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\t// Up arrow - wrap to bottom when at top\n\t\tif (kb.matches(keyData, \"tui.select.up\")) {\n\t\t\tif (this.filteredRows.length === 0) return;\n\t\t\tthis.selectedIndex = this.selectedIndex === 0 ? this.filteredRows.length - 1 : this.selectedIndex - 1;\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Down arrow - wrap to top when at bottom\n\t\telse if (kb.matches(keyData, \"tui.select.down\")) {\n\t\t\tif (this.filteredRows.length === 0) return;\n\t\t\tthis.selectedIndex = this.selectedIndex === this.filteredRows.length - 1 ? 0 : this.selectedIndex + 1;\n\t\t\tthis.updateList();\n\t\t}\n\t\t// Enter\n\t\telse if (kb.matches(keyData, \"tui.select.confirm\")) {\n\t\t\tthis.confirmSelection();\n\t\t}\n\t\t// Escape or Ctrl+C\n\t\telse if (kb.matches(keyData, \"tui.select.cancel\")) {\n\t\t\t// Escape steps back through the two levels; Ctrl+C always closes.\n\t\t\tif (matchesKey(keyData, Key.escape) && this.canGoBack()) {\n\t\t\t\tthis.setStep({ kind: \"providers\" });\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.dispose();\n\t\t\tthis.onCancelCallback();\n\t\t}\n\t\t// Ctrl+S — select and save as default\n\t\telse if (matchesKey(keyData, \"ctrl+s\") && this.onSelectAsDefaultCallback) {\n\t\t\tconst row = this.filteredRows[this.selectedIndex];\n\t\t\tif (row?.kind === \"model\") {\n\t\t\t\tthis.dispose();\n\t\t\t\tthis.onSelectAsDefaultCallback(row.item.model);\n\t\t\t}\n\t\t}\n\t\t// Pass everything else to search input\n\t\telse {\n\t\t\tthis.searchInput.handleInput(keyData);\n\t\t\tthis.filterRows(this.searchInput.getValue());\n\t\t}\n\t}\n\n\tprivate confirmSelection(): void {\n\t\tconst row = this.filteredRows[this.selectedIndex];\n\t\tif (!row) return;\n\t\tif (row.kind === \"provider\") {\n\t\t\tthis.setStep({ kind: \"models\", provider: row.provider });\n\t\t\treturn;\n\t\t}\n\t\tthis.handleSelect(row.item.model);\n\t}\n\n\tprivate handleSelect(model: Model<any>): void {\n\t\tthis.dispose();\n\t\tthis.onSelectCallback(model);\n\t}\n\n\tgetSearchInput(): Input {\n\t\treturn this.searchInput;\n\t}\n}\n"]}

package/dist/modes/interactive/components/model-selector.js

@@ -1,11 +1,13 @@
 import { modelsAreEqual } from "@earendil-works/pi-ai";
-import { Container, fuzzyFilter, getKeybindings, Input, Spacer, Text, } from "@earendil-works/pi-tui";
+import { Container, fuzzyFilter, getKeybindings, Input, Key, matchesKey, Spacer, Text, } from "@earendil-works/pi-tui";
+import { refreshModelCatalogs } from "../model-catalog-refresh.js";
 import { getModelSelectorSearchText } from "../model-search.js";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
-import { keyHint } from "./keybinding-hints.js";
+import { keyHint, keyText, rawKeyHint } from "./keybinding-hints.js";
+const MAX_VISIBLE_ROWS = 10;
 /**
- * Component that renders a model selector with search
+ * Component that renders a two-step model selector: provider first, then that provider's models.
  */
 export class ModelSelectorComponent extends Container {
     searchInput;
@@ -18,81 +20,88 @@ export class ModelSelectorComponent extends Container {
         this._focused = value;
         this.searchInput.focused = value;
     }
+    headerContainer;
     listContainer;
+    footerContainer;
     allModels = [];
     scopedModelItems = [];
     activeModels = [];
-    filteredModels = [];
+    rows = [];
+    filteredRows = [];
     selectedIndex = 0;
     currentModel;
-    settingsManager;
     modelRuntime;
     onSelectCallback;
+    onSelectAsDefaultCallback;
     onCancelCallback;
     errorMessage;
     refreshStatusMessage = "Refreshing model catalogs…";
     refreshStatusSuccess = false;
     tui;
     scopedModels;
+    defaultModel;
     scope = "all";
-    scopeText;
-    scopeHintText;
+    step = { kind: "providers" };
     refreshAbortController = new AbortController();
     refreshTimeout;
     closed = false;
-    constructor(tui, currentModel, settingsManager, modelRuntime, scopedModels, onSelect, onCancel, initialSearchInput) {
+    constructor(tui, currentModel, modelRuntime, scopedModels, onSelect, onCancel, initialSearchInput, onSelectAsDefault, defaultModel) {
         super();
         this.tui = tui;
         this.currentModel = currentModel;
-        this.settingsManager = settingsManager;
         this.modelRuntime = modelRuntime;
         this.scopedModels = scopedModels;
+        this.defaultModel = defaultModel;
         this.scope = scopedModels.length > 0 ? "scoped" : "all";
         this.onSelectCallback = onSelect;
+        this.onSelectAsDefaultCallback = onSelectAsDefault;
         this.onCancelCallback = onCancel;
         // Add top border
         this.addChild(new DynamicBorder());
         this.addChild(new Spacer(1));
-        // Add hint about model filtering
-        if (scopedModels.length > 0) {
-            this.scopeText = new Text(this.getScopeText(), 0, 0);
-            this.addChild(this.scopeText);
-            this.scopeHintText = new Text(this.getScopeHintText(), 0, 0);
-            this.addChild(this.scopeHintText);
-        }
-        else {
-            const hintText = "Only showing models from configured providers. Use /login to add providers.";
-            this.addChild(new Text(theme.fg("warning", hintText), 0, 0));
-        }
+        this.headerContainer = new Container();
+        this.addChild(this.headerContainer);
         this.addChild(new Spacer(1));
         // Create search input
         this.searchInput = new Input();
         if (initialSearchInput) {
             this.searchInput.setValue(initialSearchInput);
         }
-        this.searchInput.onSubmit = () => {
-            // Enter on search input selects the first filtered item
-            if (this.filteredModels[this.selectedIndex]) {
-                this.handleSelect(this.filteredModels[this.selectedIndex].model);
-            }
-        };
+        this.searchInput.onSubmit = () => this.confirmSelection();
         this.addChild(this.searchInput);
         this.addChild(new Spacer(1));
         // Create list container
         this.listContainer = new Container();
         this.addChild(this.listContainer);
         this.addChild(new Spacer(1));
+        // Keybindings live under the list, where the eye already is once it has
+        // finished reading. Above the list they were the first thing read and the
+        // least useful.
+        this.footerContainer = new Container();
+        this.addChild(this.footerContainer);
         // Add bottom border
         this.addChild(new DynamicBorder());
         // Render the current snapshot immediately, then refresh in the background.
         this.loadModelsFromSnapshot();
-        if (initialSearchInput)
-            this.filterModels(initialSearchInput);
-        else
-            this.updateList();
+        this.step = this.initialStep(initialSearchInput);
+        this.rebuildRows();
+        this.selectedIndex = this.defaultSelectedIndex();
+        this.renderHeader();
+        this.filterRows(this.searchInput.getValue());
         this.tui.requestRender();
         void this.refreshModels();
     }
+    initialStep(initialSearchInput) {
+        const providers = this.activeProviders();
+        if (initialSearchInput)
+            return { kind: "models", provider: null };
+        if (providers.length <= 1)
+            return { kind: "models", provider: providers[0] ?? null };
+        return { kind: "providers" };
+    }
+    activeProviders() {
+        return [...new Set(this.activeModels.map((item) => item.provider))];
+    }
     loadModelsFromSnapshot() {
         const models = this.modelRuntime.getAvailableSnapshot().map((model) => ({
             provider: model.provider,
@@ -110,10 +119,6 @@ export class ModelSelectorComponent extends Container {
             model: scoped.model,
         }));
         this.activeModels = this.scope === "scoped" ? this.scopedModelItems : this.allModels;
-        this.filteredModels = this.activeModels;
-        const currentIndex = this.filteredModels.findIndex((item) => modelsAreEqual(this.currentModel, item.model));
-        this.selectedIndex =
-            currentIndex >= 0 ? currentIndex : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
     }
     async refreshModels() {
         const timeoutMs = 15_000;
@@ -123,7 +128,7 @@ export class ModelSelectorComponent extends Container {
             this.refreshAbortController.abort();
         }, timeoutMs);
         try {
-            const result = await this.modelRuntime.refresh({ signal: this.refreshAbortController.signal });
+            const result = await refreshModelCatalogs(this.modelRuntime, this.refreshAbortController.signal);
             if (this.closed)
                 return;
             this.refreshStatusMessage = "";
@@ -144,7 +149,9 @@ export class ModelSelectorComponent extends Container {
                 }
             }
             this.loadModelsFromSnapshot();
-            this.filterModels(this.searchInput.getValue());
+            this.rebuildRows();
+            this.renderHeader();
+            this.filterRows(this.searchInput.getValue());
             this.tui.requestRender();
         }
         catch (error) {
@@ -172,7 +179,7 @@ export class ModelSelectorComponent extends Container {
     }
     sortModels(models) {
         const sorted = [...models];
-        // Sort: current model first, then by provider
+        // Sort: current model first, default model second, then by provider.
         sorted.sort((a, b) => {
             const aIsCurrent = modelsAreEqual(this.currentModel, a.model);
             const bIsCurrent = modelsAreEqual(this.currentModel, b.model);
@@ -180,71 +187,187 @@ export class ModelSelectorComponent extends Container {
                 return -1;
             if (!aIsCurrent && bIsCurrent)
                 return 1;
+            const aIsDefault = this.isDefaultModel(a.model);
+            const bIsDefault = this.isDefaultModel(b.model);
+            if (aIsDefault && !bIsDefault)
+                return -1;
+            if (!aIsDefault && bIsDefault)
+                return 1;
             return a.provider.localeCompare(b.provider);
         });
         return sorted;
     }
+    rebuildRows() {
+        if (this.step.kind === "providers") {
+            const byProvider = new Map();
+            for (const item of this.activeModels) {
+                const existing = byProvider.get(item.provider);
+                if (existing)
+                    existing.push(item);
+                else
+                    byProvider.set(item.provider, [item]);
+            }
+            const providerRows = [...byProvider].map(([provider, items]) => ({
+                kind: "provider",
+                provider,
+                count: items.length,
+                hasCurrent: items.some((item) => modelsAreEqual(this.currentModel, item.model)),
+            }));
+            providerRows.sort((a, b) => {
+                if (a.kind !== "provider" || b.kind !== "provider")
+                    return 0;
+                if (a.hasCurrent !== b.hasCurrent)
+                    return a.hasCurrent ? -1 : 1;
+                return a.provider.localeCompare(b.provider);
+            });
+            this.rows = providerRows;
+            return;
+        }
+        const provider = this.step.provider;
+        const models = provider === null ? this.activeModels : this.activeModels.filter((m) => m.provider === provider);
+        this.rows = models.map((item) => ({ kind: "model", item }));
+    }
+    defaultSelectedIndex() {
+        const index = this.rows.findIndex((row) => row.kind === "provider" ? row.hasCurrent : modelsAreEqual(this.currentModel, row.item.model));
+        return index >= 0 ? index : 0;
+    }
+    setStep(step) {
+        this.step = step;
+        this.searchInput.setValue("");
+        this.rebuildRows();
+        this.selectedIndex = this.defaultSelectedIndex();
+        this.renderHeader();
+        this.filterRows("");
+        this.tui.requestRender();
+    }
+    isDrilledIn() {
+        return this.step.kind === "models" && this.step.provider !== null;
+    }
+    /** Escape returns to the provider list whenever there is a provider list worth returning to. */
+    canGoBack() {
+        return this.step.kind === "models" && this.activeProviders().length > 1;
+    }
+    renderHeader() {
+        this.headerContainer.clear();
+        if (this.step.kind === "providers") {
+            this.headerContainer.addChild(new Text(theme.bold(theme.fg("accent", "Select a provider")), 0, 0));
+        }
+        else {
+            const label = this.step.provider ?? "All providers";
+            const crumb = `${theme.bold(theme.fg("accent", label))}${theme.fg("muted", " › select a model")}`;
+            this.headerContainer.addChild(new Text(crumb, 0, 0));
+        }
+        if (this.scopedModelItems.length > 0) {
+            this.headerContainer.addChild(new Text(this.getScopeText(), 0, 0));
+        }
+        else if (!this.isDrilledIn()) {
+            const hintText = "Only showing models from configured providers. Use /login to add providers.";
+            this.headerContainer.addChild(new Text(theme.fg("warning", hintText), 0, 0));
+        }
+        this.renderFooter();
+    }
+    renderFooter() {
+        this.footerContainer.clear();
+        this.footerContainer.addChild(new Text(this.getHintText(), 0, 0));
+    }
     getScopeText() {
         const allText = this.scope === "all" ? theme.fg("accent", "all") : theme.fg("muted", "all");
         const scopedText = this.scope === "scoped" ? theme.fg("accent", "scoped") : theme.fg("muted", "scoped");
         return `${theme.fg("muted", "Scope: ")}${allText}${theme.fg("muted", " | ")}${scopedText}`;
     }
-    getScopeHintText() {
-        return keyHint("tui.input.tab", "scope") + theme.fg("muted", " (all/scoped)");
+    getHintText() {
+        const hints = [
+            // Both arrows, since either one moves the selection.
+            rawKeyHint(`${keyText("tui.select.up")}/${keyText("tui.select.down")}`, "move"),
+            keyHint("tui.select.confirm", "select"),
+        ];
+        if (this.scopedModelItems.length > 0) {
+            hints.push(keyHint("tui.input.tab", "scope") + theme.fg("muted", " (all/scoped)"));
+        }
+        if (this.onSelectAsDefaultCallback)
+            hints.push(rawKeyHint("ctrl+s", "set as default"));
+        if (this.canGoBack())
+            hints.push(rawKeyHint("escape", "providers"), rawKeyHint("ctrl+c", "close"));
+        else
+            hints.push(keyHint("tui.select.cancel", "close"));
+        return hints.join(theme.fg("borderMuted", " · "));
+    }
+    isDefaultModel(model) {
+        return this.defaultModel?.provider === model.provider && this.defaultModel.id === model.id;
+    }
+    isDefaultSearch(query) {
+        const normalized = query.trim().toLowerCase();
+        return normalized.length > 0 && "default".startsWith(normalized);
     }
     setScope(scope) {
         if (this.scope === scope)
             return;
         this.scope = scope;
         this.activeModels = this.scope === "scoped" ? this.scopedModelItems : this.allModels;
-        const currentIndex = this.activeModels.findIndex((item) => modelsAreEqual(this.currentModel, item.model));
-        this.selectedIndex = currentIndex >= 0 ? currentIndex : 0;
-        this.filterModels(this.searchInput.getValue());
-        if (this.scopeText) {
-            this.scopeText.setText(this.getScopeText());
-        }
+        this.rebuildRows();
+        this.selectedIndex = this.defaultSelectedIndex();
+        this.renderHeader();
+        this.filterRows(this.searchInput.getValue());
+    }
+    rowSearchText(row) {
+        if (row.kind === "provider")
+            return row.provider;
+        const defaultText = this.isDefaultModel(row.item.model) ? " default" : "";
+        return `${getModelSelectorSearchText({ id: row.item.id, provider: row.item.provider, name: row.item.model.name })}${defaultText}`;
     }
-    filterModels(query) {
-        this.filteredModels = query
-            ? fuzzyFilter(this.activeModels, query, ({ id, provider, model }) => getModelSelectorSearchText({ id, provider, name: model.name }))
-            : this.activeModels;
+    isDefaultRow(row) {
+        return row.kind === "model" && this.isDefaultModel(row.item.model);
+    }
+    filterRows(query) {
+        if (!query) {
+            this.filteredRows = this.rows;
+        }
+        else {
+            const filtered = fuzzyFilter(this.rows, query, (row) => this.rowSearchText(row));
+            if (this.isDefaultSearch(query)) {
+                // Typing "default" (or a prefix of it) surfaces the default model even
+                // when its name doesn't otherwise fuzzy-match the query.
+                const defaultRows = this.rows.filter((row) => this.isDefaultRow(row));
+                this.filteredRows = [...defaultRows, ...filtered.filter((row) => !this.isDefaultRow(row))];
+            }
+            else {
+                this.filteredRows = filtered;
+            }
+        }
         // When filtering by a query, move the selector to the top row so the best
         // match is highlighted. When the query is cleared, keep the current position
         // clamped to the (restored) list length.
-        this.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
+        this.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.filteredRows.length - 1));
         this.updateList();
     }
+    renderRow(row, isSelected) {
+        const prefix = isSelected ? theme.fg("accent", "→ ") : "  ";
+        if (row.kind === "provider") {
+            const label = isSelected ? theme.fg("accent", row.provider) : row.provider;
+            const count = theme.fg("muted", ` (${row.count} model${row.count === 1 ? "" : "s"})`);
+            const checkmark = row.hasCurrent ? theme.fg("success", " ✓") : "";
+            return `${prefix}${label}${count}${checkmark}`;
+        }
+        const label = isSelected ? theme.fg("accent", row.item.id) : row.item.id;
+        const showProvider = this.step.kind === "models" && this.step.provider === null;
+        const badge = showProvider ? ` ${theme.fg("muted", `[${row.item.provider}]`)}` : "";
+        const defaultBadge = this.isDefaultModel(row.item.model) ? theme.fg("muted", " · default") : "";
+        const checkmark = modelsAreEqual(this.currentModel, row.item.model) ? theme.fg("success", " ✓") : "";
+        return `${prefix}${label}${badge}${defaultBadge}${checkmark}`;
+    }
     updateList() {
         this.listContainer.clear();
-        const maxVisible = 10;
-        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(maxVisible / 2), this.filteredModels.length - maxVisible));
-        const endIndex = Math.min(startIndex + maxVisible, this.filteredModels.length);
-        // Show visible slice of filtered models
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(MAX_VISIBLE_ROWS / 2), this.filteredRows.length - MAX_VISIBLE_ROWS));
+        const endIndex = Math.min(startIndex + MAX_VISIBLE_ROWS, this.filteredRows.length);
         for (let i = startIndex; i < endIndex; i++) {
-            const item = this.filteredModels[i];
-            if (!item)
+            const row = this.filteredRows[i];
+            if (!row)
                 continue;
-            const isSelected = i === this.selectedIndex;
-            const isCurrent = modelsAreEqual(this.currentModel, item.model);
-            let line = "";
-            if (isSelected) {
-                const prefix = theme.fg("accent", "→ ");
-                const modelText = `${item.id}`;
-                const providerBadge = theme.fg("muted", `[${item.provider}]`);
-                const checkmark = isCurrent ? theme.fg("success", " ✓") : "";
-                line = `${prefix + theme.fg("accent", modelText)} ${providerBadge}${checkmark}`;
-            }
-            else {
-                const modelText = `  ${item.id}`;
-                const providerBadge = theme.fg("muted", `[${item.provider}]`);
-                const checkmark = isCurrent ? theme.fg("success", " ✓") : "";
-                line = `${modelText} ${providerBadge}${checkmark}`;
-            }
-            this.listContainer.addChild(new Text(line, 0, 0));
+            this.listContainer.addChild(new Text(this.renderRow(row, i === this.selectedIndex), 0, 0));
         }
         // Add scroll indicator if needed
-        if (startIndex > 0 || endIndex < this.filteredModels.length) {
-            const scrollInfo = theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredModels.length})`);
+        if (startIndex > 0 || endIndex < this.filteredRows.length) {
+            const scrollInfo = theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredRows.length})`);
             this.listContainer.addChild(new Text(scrollInfo, 0, 0));
         }
         // Show error message or "no results" if empty
@@ -255,13 +378,16 @@ export class ModelSelectorComponent extends Container {
                 this.listContainer.addChild(new Text(theme.fg("error", line), 0, 0));
             }
         }
-        else if (this.filteredModels.length === 0) {
-            this.listContainer.addChild(new Text(theme.fg("muted", "  No matching models"), 0, 0));
+        else if (this.filteredRows.length === 0) {
+            const empty = this.step.kind === "providers" ? "  No matching providers" : "  No matching models";
+            this.listContainer.addChild(new Text(theme.fg("muted", empty), 0, 0));
         }
         else {
-            const selected = this.filteredModels[this.selectedIndex];
-            this.listContainer.addChild(new Spacer(1));
-            this.listContainer.addChild(new Text(theme.fg("muted", `  Model Name: ${selected.model.name}`), 0, 0));
+            const selected = this.filteredRows[this.selectedIndex];
+            if (selected?.kind === "model") {
+                this.listContainer.addChild(new Spacer(1));
+                this.listContainer.addChild(new Text(theme.fg("muted", `  Model Name: ${selected.item.model.name}`), 0, 0));
+            }
         }
         if (this.refreshStatusMessage) {
             this.listContainer.addChild(new Spacer(1));
@@ -272,50 +398,64 @@ export class ModelSelectorComponent extends Container {
         const kb = getKeybindings();
         if (kb.matches(keyData, "tui.input.tab")) {
             if (this.scopedModelItems.length > 0) {
-                const nextScope = this.scope === "all" ? "scoped" : "all";
-                this.setScope(nextScope);
-                if (this.scopeHintText) {
-                    this.scopeHintText.setText(this.getScopeHintText());
-                }
+                this.setScope(this.scope === "all" ? "scoped" : "all");
             }
             return;
         }
         // Up arrow - wrap to bottom when at top
         if (kb.matches(keyData, "tui.select.up")) {
-            if (this.filteredModels.length === 0)
+            if (this.filteredRows.length === 0)
                 return;
-            this.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;
+            this.selectedIndex = this.selectedIndex === 0 ? this.filteredRows.length - 1 : this.selectedIndex - 1;
             this.updateList();
         }
         // Down arrow - wrap to top when at bottom
         else if (kb.matches(keyData, "tui.select.down")) {
-            if (this.filteredModels.length === 0)
+            if (this.filteredRows.length === 0)
                 return;
-            this.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;
+            this.selectedIndex = this.selectedIndex === this.filteredRows.length - 1 ? 0 : this.selectedIndex + 1;
             this.updateList();
         }
         // Enter
         else if (kb.matches(keyData, "tui.select.confirm")) {
-            const selectedModel = this.filteredModels[this.selectedIndex];
-            if (selectedModel) {
-                this.handleSelect(selectedModel.model);
-            }
+            this.confirmSelection();
         }
         // Escape or Ctrl+C
         else if (kb.matches(keyData, "tui.select.cancel")) {
+            // Escape steps back through the two levels; Ctrl+C always closes.
+            if (matchesKey(keyData, Key.escape) && this.canGoBack()) {
+                this.setStep({ kind: "providers" });
+                return;
+            }
             this.dispose();
             this.onCancelCallback();
         }
+        // Ctrl+S — select and save as default
+        else if (matchesKey(keyData, "ctrl+s") && this.onSelectAsDefaultCallback) {
+            const row = this.filteredRows[this.selectedIndex];
+            if (row?.kind === "model") {
+                this.dispose();
+                this.onSelectAsDefaultCallback(row.item.model);
+            }
+        }
         // Pass everything else to search input
         else {
             this.searchInput.handleInput(keyData);
-            this.filterModels(this.searchInput.getValue());
+            this.filterRows(this.searchInput.getValue());
+        }
+    }
+    confirmSelection() {
+        const row = this.filteredRows[this.selectedIndex];
+        if (!row)
+            return;
+        if (row.kind === "provider") {
+            this.setStep({ kind: "models", provider: row.provider });
+            return;
         }
+        this.handleSelect(row.item.model);
     }
     handleSelect(model) {
         this.dispose();
-        // Save as new default
-        this.settingsManager.setDefaultModelAndProvider(model.provider, model.id);
         this.onSelectCallback(model);
     }
     getSearchInput() {