@greppleai/grip 0.1.4 → 0.1.5

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,oBAAoB,CAAC;AAChE,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EAGd,KAAK,EAGL,KAAK,GAAG,EACR,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAWzE,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,aAAa,CAAgB;IACrC,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,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,cAAc,CAAU;IAEzC,YACC,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,EACpC,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,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,cAAc,UAAO,EA+DrB;YAEa,UAAU;IAoDxB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,UAAU;IA6ClB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,sBAAsB;IAK9B,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAwBjC;IAED,OAAO,CAAC,YAAY;IAMpB,cAAc,IAAI,KAAK,CAEtB;CACD","sourcesContent":["import { type Model, modelsAreEqual } from \"@greppleai/grip-ai\";\nimport {\n\tContainer,\n\ttype Focusable,\n\tfuzzyFilter,\n\tgetKeybindings,\n\tInput,\n\tSpacer,\n\tText,\n\ttype TUI,\n} from \"@greppleai/grip-tui\";\nimport type { ModelRegistry } from \"../../../core/model-registry.ts\";\nimport type { SettingsManager } from \"../../../core/settings-manager.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 modelRegistry: ModelRegistry;\n\tprivate onSelectCallback: (model: Model<any>) => void;\n\tprivate onCancelCallback: () => void;\n\tprivate errorMessage?: string;\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 persistDefault: boolean;\n\n\tconstructor(\n\t\ttui: TUI,\n\t\tcurrentModel: Model<any> | undefined,\n\t\tsettingsManager: SettingsManager,\n\t\tmodelRegistry: ModelRegistry,\n\t\tscopedModels: ReadonlyArray<ScopedModelItem>,\n\t\tonSelect: (model: Model<any>) => void,\n\t\tonCancel: () => void,\n\t\tinitialSearchInput?: string,\n\t\tpersistDefault = true,\n\t) {\n\t\tsuper();\n\n\t\tthis.tui = tui;\n\t\tthis.currentModel = currentModel;\n\t\tthis.settingsManager = settingsManager;\n\t\tthis.modelRegistry = modelRegistry;\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\t\tthis.persistDefault = persistDefault;\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// Load models and do initial render\n\t\tthis.loadModels().then(() => {\n\t\t\tif (initialSearchInput) {\n\t\t\t\tthis.filterModels(initialSearchInput);\n\t\t\t} else {\n\t\t\t\tthis.updateList();\n\t\t\t}\n\t\t\t// Request re-render after models are loaded\n\t\t\tthis.tui.requestRender();\n\t\t});\n\t}\n\n\tprivate async loadModels(): Promise<void> {\n\t\tlet models: ModelItem[];\n\n\t\t// Refresh to pick up any changes to models.json\n\t\tthis.modelRegistry.refresh();\n\n\t\t// Check for models.json errors\n\t\tconst loadError = this.modelRegistry.getError();\n\t\tif (loadError) {\n\t\t\tthis.errorMessage = loadError;\n\t\t}\n\n\t\t// Load available models (built-in models still work even if models.json failed)\n\t\ttry {\n\t\t\tconst availableModels = await this.modelRegistry.getAvailable();\n\t\t\tmodels = availableModels.map((model: Model<any>) => ({\n\t\t\t\tprovider: model.provider,\n\t\t\t\tid: model.id,\n\t\t\t\tmodel,\n\t\t\t}));\n\t\t} catch (error) {\n\t\t\tthis.allModels = [];\n\t\t\tthis.scopedModelItems = [];\n\t\t\tthis.activeModels = [];\n\t\t\tthis.filteredModels = [];\n\t\t\tthis.errorMessage = error instanceof Error ? error.message : String(error);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.allModels = this.sortModels(models);\n\t\tconst registeredModels = new Map<string, Map<string, Model<any>>>();\n\t\tfor (const model of this.modelRegistry.getAll()) {\n\t\t\tconst providerModels = registeredModels.get(model.provider) ?? new Map<string, Model<any>>();\n\t\t\tif (!providerModels.has(model.id)) providerModels.set(model.id, model);\n\t\t\tregisteredModels.set(model.provider, providerModels);\n\t\t}\n\t\tthis.scopedModels = this.scopedModels.map((scoped) => {\n\t\t\tconst refreshed = registeredModels.get(scoped.model.provider)?.get(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 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(\n\t\t\t\t\tthis.activeModels,\n\t\t\t\t\tquery,\n\t\t\t\t\t({ id, provider }) => `${id} ${provider} ${provider}/${id} ${provider} ${id}`,\n\t\t\t\t)\n\t\t\t: this.activeModels;\n\t\t// A query changes fuzzy-match ranking, so select the best match. When the query\n\t\t// is cleared, preserve the current position and only clamp it to the restored list.\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 appendModelListStatus(): void {\n\t\tif (this.errorMessage) {\n\t\t\tfor (const line of this.errorMessage.split(\"\\n\")) {\n\t\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"error\", line), 0, 0));\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tif (this.filteredModels.length === 0) {\n\t\t\tthis.listContainer.addChild(new Text(theme.fg(\"muted\", \"  No matching models\"), 0, 0));\n\t\t\treturn;\n\t\t}\n\t\tconst selected = this.filteredModels[this.selectedIndex];\n\t\tthis.listContainer.addChild(new Spacer(1));\n\t\tthis.listContainer.addChild(new Text(theme.fg(\"muted\", `  Model Name: ${selected.model.name}`), 0, 0));\n\t}\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\tthis.appendModelListStatus();\n\t}\n\n\tprivate toggleModelScope(): void {\n\t\tif (this.scopedModelItems.length === 0) return;\n\t\tconst nextScope: ModelScope = this.scope === \"all\" ? \"scoped\" : \"all\";\n\t\tthis.setScope(nextScope);\n\t\tthis.scopeHintText?.setText(this.getScopeHintText());\n\t}\n\n\tprivate moveSelection(direction: -1 | 1): void {\n\t\tif (this.filteredModels.length === 0) return;\n\t\tif (direction < 0) {\n\t\t\tthis.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;\n\t\t} else {\n\t\t\tthis.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;\n\t\t}\n\t\tthis.updateList();\n\t}\n\n\tprivate selectHighlightedModel(): void {\n\t\tconst selectedModel = this.filteredModels[this.selectedIndex];\n\t\tif (selectedModel) this.handleSelect(selectedModel.model);\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\tthis.toggleModelScope();\n\t\t\treturn;\n\t\t}\n\t\tif (kb.matches(keyData, \"tui.select.up\")) {\n\t\t\tthis.moveSelection(-1);\n\t\t\treturn;\n\t\t}\n\t\tif (kb.matches(keyData, \"tui.select.down\")) {\n\t\t\tthis.moveSelection(1);\n\t\t\treturn;\n\t\t}\n\t\tif (kb.matches(keyData, \"tui.select.confirm\")) {\n\t\t\tthis.selectHighlightedModel();\n\t\t\treturn;\n\t\t}\n\t\tif (kb.matches(keyData, \"tui.select.cancel\")) {\n\t\t\tthis.onCancelCallback();\n\t\t\treturn;\n\t\t}\n\t\tthis.searchInput.handleInput(keyData);\n\t\tthis.filterModels(this.searchInput.getValue());\n\t}\n\n\tprivate handleSelect(model: Model<any>): void {\n\t\t// Save as new default\n\t\tif (this.persistDefault) this.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,GAAG,EAAE,KAAK,KAAK,EAAkB,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EAGd,KAAK,EAGL,KAAK,GAAG,EAER,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAWzE,UAAU,eAAe;IACxB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD,gFAAgF;AAChF,qBAAa,sBAAuB,SAAQ,SAAU,YAAW,SAAS;IACzE,OAAO,CAAC,WAAW,CAAQ;IAC3B,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,SAAS,CAAsB;IACvC,OAAO,CAAC,iBAAiB,CAAsB;IAC/C,OAAO,CAAC,gBAAgB,CAA6B;IACrD,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,cAAc,CAAO;IAC7B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAU;IAEzC,YACC,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,EACpC,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,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,cAAc,UAAO,EA+BrB;YAEa,UAAU;IAwCxB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,WAAW;IAIV,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAMvC;IAED,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;IAoBxB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CA8BjC;IAED,cAAc,IAAI,KAAK,CAEtB;CACD","sourcesContent":["import { type Api, type Model, modelsAreEqual } from \"@greppleai/grip-ai\";\nimport {\n\tContainer,\n\ttype Focusable,\n\tfuzzyFilter,\n\tgetKeybindings,\n\tInput,\n\tSpacer,\n\tText,\n\ttype TUI,\n\ttruncateToWidth,\n} from \"@greppleai/grip-tui\";\nimport type { ModelRegistry } from \"../../../core/model-registry.ts\";\nimport type { SettingsManager } from \"../../../core/settings-manager.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<Api>;\n}\n\ninterface ScopedModelItem {\n\tmodel: Model<Api>;\n\tthinkingLevel?: string;\n}\n\ninterface ProviderItem {\n\tid: string;\n\tname: string;\n\tmodels: ModelItem[];\n}\n\ntype ModelScope = \"all\" | \"scoped\";\ntype PickerView = \"providers\" | \"models\" | \"search\";\n\n/** Native provider/model navigation, with a global model-search entry point. */\nexport class ModelSelectorComponent extends Container implements Focusable {\n\tprivate searchInput: Input;\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 providers: ProviderItem[] = [];\n\tprivate filteredProviders: ProviderItem[] = [];\n\tprivate selectedProvider: ProviderItem | null = null;\n\tprivate providerQuery = \"\";\n\tprivate providerIndex = 0;\n\tprivate view: PickerView;\n\tprivate selectedIndex = 0;\n\tprivate currentModel: Model<Api> | undefined;\n\tprivate settingsManager: SettingsManager;\n\tprivate modelRegistry: ModelRegistry;\n\tprivate onSelectCallback: (model: Model<Api>) => void;\n\tprivate onCancelCallback: () => void;\n\tprivate errorMessage: string | undefined;\n\tprivate loading = true;\n\tprivate listWidth = 80;\n\tprivate tui: TUI;\n\tprivate scopedModels: ReadonlyArray<ScopedModelItem>;\n\tprivate scope: ModelScope;\n\tprivate scopeText: Text;\n\tprivate navigationText: Text;\n\tprivate readonly persistDefault: boolean;\n\n\tconstructor(\n\t\ttui: TUI,\n\t\tcurrentModel: Model<Api> | undefined,\n\t\tsettingsManager: SettingsManager,\n\t\tmodelRegistry: ModelRegistry,\n\t\tscopedModels: ReadonlyArray<ScopedModelItem>,\n\t\tonSelect: (model: Model<Api>) => void,\n\t\tonCancel: () => void,\n\t\tinitialSearchInput?: string,\n\t\tpersistDefault = true,\n\t) {\n\t\tsuper();\n\t\tthis.tui = tui;\n\t\tthis.currentModel = currentModel;\n\t\tthis.settingsManager = settingsManager;\n\t\tthis.modelRegistry = modelRegistry;\n\t\tthis.scopedModels = scopedModels;\n\t\tthis.scope = scopedModels.length > 0 ? \"scoped\" : \"all\";\n\t\tthis.view = initialSearchInput ? \"search\" : \"providers\";\n\t\tthis.onSelectCallback = onSelect;\n\t\tthis.onCancelCallback = onCancel;\n\t\tthis.persistDefault = persistDefault;\n\t\tthis.addChild(new DynamicBorder());\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.scopeText = new Text(\"\", 0, 0);\n\t\tthis.addChild(this.scopeText);\n\t\tthis.navigationText = new Text(\"\", 0, 0);\n\t\tthis.addChild(this.navigationText);\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.searchInput = new Input();\n\t\tthis.searchInput.setValue(initialSearchInput ?? \"\");\n\t\tthis.searchInput.onSubmit = () => this.confirmSelection();\n\t\tthis.addChild(this.searchInput);\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.listContainer = new Container();\n\t\tthis.addChild(this.listContainer);\n\t\tthis.addChild(new Spacer(1));\n\t\tthis.addChild(new DynamicBorder());\n\t\tthis.updateList();\n\t\tvoid this.loadModels();\n\t}\n\n\tprivate async loadModels(): Promise<void> {\n\t\ttry {\n\t\t\t// Refresh without introducing provider/network validation.\n\t\t\tthis.modelRegistry.refresh();\n\t\t\tthis.errorMessage = this.modelRegistry.getError();\n\t\t\tconst available = await this.modelRegistry.getAvailable();\n\t\t\tthis.allModels = available.map((model) => ({ provider: model.provider, id: model.id, model }));\n\t\t\tthis.allModels.sort((a, b) => {\n\t\t\t\tconst aCurrent = modelsAreEqual(this.currentModel, a.model);\n\t\t\t\tconst bCurrent = modelsAreEqual(this.currentModel, b.model);\n\t\t\t\tif (aCurrent !== bCurrent) return aCurrent ? -1 : 1;\n\t\t\t\treturn a.provider.localeCompare(b.provider) || a.id.localeCompare(b.id);\n\t\t\t});\n\t\t\tconst registered = new Map<string, Map<string, Model<Api>>>();\n\t\t\tfor (const model of this.modelRegistry.getAll()) {\n\t\t\t\tlet models = registered.get(model.provider);\n\t\t\t\tif (!models) {\n\t\t\t\t\tmodels = new Map();\n\t\t\t\t\tregistered.set(model.provider, models);\n\t\t\t\t}\n\t\t\t\tif (!models.has(model.id)) models.set(model.id, model);\n\t\t\t}\n\t\t\t// Keep scoped order, reconciling stale instances after registry refresh.\n\t\t\tthis.scopedModelItems = this.scopedModels.map(({ model }) => ({\n\t\t\t\tprovider: model.provider,\n\t\t\t\tid: model.id,\n\t\t\t\tmodel: registered.get(model.provider)?.get(model.id) ?? model,\n\t\t\t}));\n\t\t} catch (error) {\n\t\t\tthis.allModels = [];\n\t\t\tthis.scopedModelItems = [];\n\t\t\tthis.errorMessage = error instanceof Error ? error.message : String(error);\n\t\t}\n\t\tthis.loading = false;\n\t\tthis.rebuildProviders();\n\t\tthis.selectCurrent();\n\t\tthis.filterItems(this.searchInput.getValue());\n\t\tthis.tui.requestRender();\n\t}\n\n\tprivate rebuildProviders(): void {\n\t\tthis.activeModels = this.scope === \"scoped\" ? this.scopedModelItems : this.allModels;\n\t\tconst groups = new Map<string, ProviderItem>();\n\t\tfor (const item of this.activeModels) {\n\t\t\tlet provider = groups.get(item.provider);\n\t\t\tif (!provider) {\n\t\t\t\tprovider = {\n\t\t\t\t\tid: item.provider,\n\t\t\t\t\tname: this.modelRegistry.getProviderDisplayName(item.provider),\n\t\t\t\t\tmodels: [],\n\t\t\t\t};\n\t\t\t\tgroups.set(item.provider, provider);\n\t\t\t}\n\t\t\tprovider.models.push(item);\n\t\t}\n\t\tthis.providers = [...groups.values()].sort((a, b) => a.name.localeCompare(b.name) || a.id.localeCompare(b.id));\n\t}\n\n\tprivate selectCurrent(): void {\n\t\tconst index =\n\t\t\tthis.view === \"providers\"\n\t\t\t\t? this.providers.findIndex((item) => item.id === this.currentModel?.provider)\n\t\t\t\t: this.getModelItems().findIndex((item) => modelsAreEqual(this.currentModel, item.model));\n\t\tthis.selectedIndex = Math.max(0, index);\n\t}\n\n\tprivate getModelItems(): ModelItem[] {\n\t\treturn this.view === \"models\" ? (this.selectedProvider?.models ?? []) : this.activeModels;\n\t}\n\n\tprivate filterItems(query: string): void {\n\t\tif (this.view === \"providers\") {\n\t\t\tthis.filteredProviders = query\n\t\t\t\t? fuzzyFilter(this.providers, query, ({ id, name }) => `${name} ${id}`)\n\t\t\t\t: this.providers;\n\t\t} else {\n\t\t\tconst items = this.getModelItems();\n\t\t\tthis.filteredModels = query\n\t\t\t\t? fuzzyFilter(\n\t\t\t\t\t\titems,\n\t\t\t\t\t\tquery,\n\t\t\t\t\t\t({ id, provider, model }) => `${id} ${provider} ${provider}/${id} ${model.name}`,\n\t\t\t\t\t)\n\t\t\t\t: items;\n\t\t}\n\t\t// Query edits select the best match; clearing only clamps the position (7209).\n\t\tthis.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.itemCount() - 1));\n\t\tthis.updateList();\n\t}\n\n\tprivate itemCount(): number {\n\t\treturn this.view === \"providers\" ? this.filteredProviders.length : this.filteredModels.length;\n\t}\n\n\tprivate updateHeader(): void {\n\t\tconst all = this.scope === \"all\" ? theme.fg(\"accent\", \"all\") : theme.fg(\"muted\", \"all\");\n\t\tconst scoped = this.scope === \"scoped\" ? theme.fg(\"accent\", \"scoped\") : theme.fg(\"muted\", \"scoped\");\n\t\tconst scopeHint =\n\t\t\tthis.scopedModels.length > 0 ? ` · ${keyHint(\"tui.input.tab\", \"scope\")} (${all}/${scoped})` : \"\";\n\t\tconst title =\n\t\t\tthis.view === \"providers\"\n\t\t\t\t? \"Providers\"\n\t\t\t\t: this.view === \"search\"\n\t\t\t\t\t? \"Search all providers\"\n\t\t\t\t\t: `${this.selectedProvider?.name} [${this.selectedProvider?.id}]`;\n\t\tthis.scopeText.setText(theme.fg(\"muted\", title) + scopeHint);\n\t\tthis.navigationText.setText(\n\t\t\tkeyHint(\"tui.select.up\", \"up\") +\n\t\t\t\t\" · \" +\n\t\t\t\tkeyHint(\"tui.select.down\", \"down\") +\n\t\t\t\t\" · \" +\n\t\t\t\tkeyHint(\"tui.select.confirm\", this.view === \"providers\" ? \"models\" : \"select\") +\n\t\t\t\t\" · \" +\n\t\t\t\tkeyHint(\"tui.select.cancel\", this.view === \"models\" ? \"providers\" : \"cancel\"),\n\t\t);\n\t}\n\n\tprivate updateList(): void {\n\t\tthis.updateHeader();\n\t\tthis.listContainer.clear();\n\t\tconst count = this.itemCount();\n\t\tconst maxVisible = 10;\n\t\tconst start = Math.max(0, Math.min(this.selectedIndex - Math.floor(maxVisible / 2), count - maxVisible));\n\t\tconst end = Math.min(start + maxVisible, count);\n\t\tfor (let i = start; i < end; i++) {\n\t\t\tlet label: string;\n\t\t\tlet current: boolean;\n\t\t\tif (this.view === \"providers\") {\n\t\t\t\tconst item = this.filteredProviders[i];\n\t\t\t\tlabel = `${item.name} [${item.id}] (${item.models.length} models)`;\n\t\t\t\tcurrent = item.id === this.currentModel?.provider;\n\t\t\t} else {\n\t\t\t\tconst item = this.filteredModels[i];\n\t\t\t\tlabel = `${item.id} [${item.provider}]`;\n\t\t\t\tcurrent = modelsAreEqual(this.currentModel, item.model);\n\t\t\t}\n\t\t\tconst selected = i === this.selectedIndex;\n\t\t\tconst prefix = selected ? theme.fg(\"accent\", \"→ \") : \"  \";\n\t\t\tconst marker = current ? theme.fg(\"success\", \" ✓\") : \"\";\n\t\t\tthis.addListLine(prefix + (selected ? theme.fg(\"accent\", label) : label) + marker);\n\t\t}\n\t\tif (start > 0 || end < count) this.addListLine(theme.fg(\"muted\", `  (${this.selectedIndex + 1}/${count})`));\n\t\tthis.appendListStatus(count);\n\t}\n\n\tprivate appendListStatus(count: number): void {\n\t\tif (this.loading) {\n\t\t\tthis.addListLine(theme.fg(\"muted\", \"  Loading models…\"));\n\t\t} else if (count === 0) {\n\t\t\tconst empty =\n\t\t\t\tthis.view === \"providers\" ? \"No matching providers. Use /login to add providers.\" : \"No matching models\";\n\t\t\tthis.addListLine(theme.fg(\"muted\", `  ${empty}`));\n\t\t} else if (this.view !== \"providers\") {\n\t\t\tthis.listContainer.addChild(new Spacer(1));\n\t\t\tthis.addListLine(theme.fg(\"muted\", `  Model Name: ${this.filteredModels[this.selectedIndex].model.name}`));\n\t\t}\n\t\tif (this.errorMessage) {\n\t\t\tfor (const line of this.errorMessage.split(\"\\n\")) this.addListLine(theme.fg(\"error\", line));\n\t\t}\n\t}\n\n\tprivate addListLine(line: string): void {\n\t\tthis.listContainer.addChild(new Text(truncateToWidth(line, this.listWidth), 0, 0));\n\t}\n\n\toverride render(width: number): string[] {\n\t\tif (this.listWidth !== width) {\n\t\t\tthis.listWidth = width;\n\t\t\tthis.updateList();\n\t\t}\n\t\treturn super.render(width);\n\t}\n\n\tprivate toggleModelScope(): void {\n\t\tif (this.scopedModels.length === 0) return;\n\t\tthis.scope = this.scope === \"all\" ? \"scoped\" : \"all\";\n\t\tif (this.view !== \"search\") {\n\t\t\tthis.view = \"providers\";\n\t\t\tthis.selectedProvider = null;\n\t\t\tthis.providerQuery = \"\";\n\t\t\tthis.providerIndex = 0;\n\t\t\tthis.searchInput.setValue(\"\");\n\t\t}\n\t\tthis.rebuildProviders();\n\t\tthis.selectCurrent();\n\t\tthis.filterItems(this.searchInput.getValue());\n\t}\n\n\tprivate moveSelection(delta: number): void {\n\t\tconst count = this.itemCount();\n\t\tif (count === 0) return;\n\t\tthis.selectedIndex = (this.selectedIndex + delta + count) % count;\n\t\tthis.updateList();\n\t}\n\n\tprivate confirmSelection(): void {\n\t\tif (this.loading) return;\n\t\tif (this.view === \"providers\") {\n\t\t\tconst provider = this.filteredProviders[this.selectedIndex];\n\t\t\tif (!provider) return;\n\t\t\tthis.providerQuery = this.searchInput.getValue();\n\t\t\tthis.providerIndex = this.selectedIndex;\n\t\t\tthis.selectedProvider = provider;\n\t\t\tthis.view = \"models\";\n\t\t\tthis.searchInput.setValue(\"\");\n\t\t\tthis.selectCurrent();\n\t\t\tthis.filterItems(\"\");\n\t\t\treturn;\n\t\t}\n\t\tconst item = this.filteredModels[this.selectedIndex];\n\t\tif (!item) return;\n\t\tif (this.persistDefault) this.settingsManager.setDefaultModelAndProvider(item.provider, item.id);\n\t\tthis.onSelectCallback(item.model);\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\tthis.toggleModelScope();\n\t\t} else if (kb.matches(keyData, \"tui.select.up\")) {\n\t\t\tthis.moveSelection(-1);\n\t\t} else if (kb.matches(keyData, \"tui.select.down\")) {\n\t\t\tthis.moveSelection(1);\n\t\t} else if (kb.matches(keyData, \"tui.select.pageUp\")) {\n\t\t\tthis.moveSelection(-Math.min(10, Math.max(0, this.itemCount() - 1)));\n\t\t} else if (kb.matches(keyData, \"tui.select.pageDown\")) {\n\t\t\tthis.moveSelection(Math.min(10, Math.max(0, this.itemCount() - 1)));\n\t\t} else if (kb.matches(keyData, \"tui.select.confirm\")) {\n\t\t\tthis.confirmSelection();\n\t\t} else if (kb.matches(keyData, \"tui.select.cancel\")) {\n\t\t\tif (this.view === \"models\") {\n\t\t\t\tthis.view = \"providers\";\n\t\t\t\tthis.selectedProvider = null;\n\t\t\t\tthis.searchInput.setValue(this.providerQuery);\n\t\t\t\tthis.filterItems(this.providerQuery);\n\t\t\t\tthis.selectedIndex = Math.min(this.providerIndex, Math.max(0, this.itemCount() - 1));\n\t\t\t\tthis.updateList();\n\t\t\t} else {\n\t\t\t\tthis.onCancelCallback();\n\t\t\t}\n\t\t} else {\n\t\t\tconst query = this.searchInput.getValue();\n\t\t\tthis.searchInput.handleInput(keyData);\n\t\t\tif (query !== this.searchInput.getValue()) this.filterItems(this.searchInput.getValue());\n\t\t}\n\t}\n\n\tgetSearchInput(): Input {\n\t\treturn this.searchInput;\n\t}\n}\n"]}

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

@@ -1,14 +1,11 @@
 import { modelsAreEqual } from "@greppleai/grip-ai";
-import { Container, fuzzyFilter, getKeybindings, Input, Spacer, Text, } from "@greppleai/grip-tui";
+import { Container, fuzzyFilter, getKeybindings, Input, Spacer, Text, truncateToWidth, } from "@greppleai/grip-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 import { keyHint } from "./keybinding-hints.js";
-/**
- * Component that renders a model selector with search
- */
+/** Native provider/model navigation, with a global model-search entry point. */
 export class ModelSelectorComponent extends Container {
     searchInput;
-    // Focusable implementation - propagate to searchInput for IME cursor positioning
     _focused = false;
     get focused() {
         return this._focused;
@@ -22,6 +19,12 @@ export class ModelSelectorComponent extends Container {
     scopedModelItems = [];
     activeModels = [];
     filteredModels = [];
+    providers = [];
+    filteredProviders = [];
+    selectedProvider = null;
+    providerQuery = "";
+    providerIndex = 0;
+    view;
     selectedIndex = 0;
     currentModel;
     settingsManager;
@@ -29,11 +32,13 @@ export class ModelSelectorComponent extends Container {
     onSelectCallback;
     onCancelCallback;
     errorMessage;
+    loading = true;
+    listWidth = 80;
     tui;
     scopedModels;
-    scope = "all";
+    scope;
     scopeText;
-    scopeHintText;
+    navigationText;
     persistDefault;
     constructor(tui, currentModel, settingsManager, modelRegistry, scopedModels, onSelect, onCancel, initialSearchInput, persistDefault = true) {
         super();
@@ -43,251 +48,274 @@ export class ModelSelectorComponent extends Container {
         this.modelRegistry = modelRegistry;
         this.scopedModels = scopedModels;
         this.scope = scopedModels.length > 0 ? "scoped" : "all";
+        this.view = initialSearchInput ? "search" : "providers";
         this.onSelectCallback = onSelect;
         this.onCancelCallback = onCancel;
         this.persistDefault = persistDefault;
-        // 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.scopeText = new Text("", 0, 0);
+        this.addChild(this.scopeText);
+        this.navigationText = new Text("", 0, 0);
+        this.addChild(this.navigationText);
         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.setValue(initialSearchInput ?? "");
+        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));
-        // Add bottom border
         this.addChild(new DynamicBorder());
-        // Load models and do initial render
-        this.loadModels().then(() => {
-            if (initialSearchInput) {
-                this.filterModels(initialSearchInput);
-            }
-            else {
-                this.updateList();
-            }
-            // Request re-render after models are loaded
-            this.tui.requestRender();
-        });
+        this.updateList();
+        void this.loadModels();
     }
     async loadModels() {
-        let models;
-        // Refresh to pick up any changes to models.json
-        this.modelRegistry.refresh();
-        // Check for models.json errors
-        const loadError = this.modelRegistry.getError();
-        if (loadError) {
-            this.errorMessage = loadError;
-        }
-        // Load available models (built-in models still work even if models.json failed)
         try {
-            const availableModels = await this.modelRegistry.getAvailable();
-            models = availableModels.map((model) => ({
+            // Refresh without introducing provider/network validation.
+            this.modelRegistry.refresh();
+            this.errorMessage = this.modelRegistry.getError();
+            const available = await this.modelRegistry.getAvailable();
+            this.allModels = available.map((model) => ({ provider: model.provider, id: model.id, model }));
+            this.allModels.sort((a, b) => {
+                const aCurrent = modelsAreEqual(this.currentModel, a.model);
+                const bCurrent = modelsAreEqual(this.currentModel, b.model);
+                if (aCurrent !== bCurrent)
+                    return aCurrent ? -1 : 1;
+                return a.provider.localeCompare(b.provider) || a.id.localeCompare(b.id);
+            });
+            const registered = new Map();
+            for (const model of this.modelRegistry.getAll()) {
+                let models = registered.get(model.provider);
+                if (!models) {
+                    models = new Map();
+                    registered.set(model.provider, models);
+                }
+                if (!models.has(model.id))
+                    models.set(model.id, model);
+            }
+            // Keep scoped order, reconciling stale instances after registry refresh.
+            this.scopedModelItems = this.scopedModels.map(({ model }) => ({
                 provider: model.provider,
                 id: model.id,
-                model,
+                model: registered.get(model.provider)?.get(model.id) ?? model,
             }));
         }
         catch (error) {
             this.allModels = [];
             this.scopedModelItems = [];
-            this.activeModels = [];
-            this.filteredModels = [];
             this.errorMessage = error instanceof Error ? error.message : String(error);
-            return;
-        }
-        this.allModels = this.sortModels(models);
-        const registeredModels = new Map();
-        for (const model of this.modelRegistry.getAll()) {
-            const providerModels = registeredModels.get(model.provider) ?? new Map();
-            if (!providerModels.has(model.id))
-                providerModels.set(model.id, model);
-            registeredModels.set(model.provider, providerModels);
         }
-        this.scopedModels = this.scopedModels.map((scoped) => {
-            const refreshed = registeredModels.get(scoped.model.provider)?.get(scoped.model.id);
-            return refreshed ? { ...scoped, model: refreshed } : scoped;
-        });
-        this.scopedModelItems = this.scopedModels.map((scoped) => ({
-            provider: scoped.model.provider,
-            id: scoped.model.id,
-            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));
-    }
-    sortModels(models) {
-        const sorted = [...models];
-        // Sort: current model first, then by provider
-        sorted.sort((a, b) => {
-            const aIsCurrent = modelsAreEqual(this.currentModel, a.model);
-            const bIsCurrent = modelsAreEqual(this.currentModel, b.model);
-            if (aIsCurrent && !bIsCurrent)
-                return -1;
-            if (!aIsCurrent && bIsCurrent)
-                return 1;
-            return a.provider.localeCompare(b.provider);
-        });
-        return sorted;
+        this.loading = false;
+        this.rebuildProviders();
+        this.selectCurrent();
+        this.filterItems(this.searchInput.getValue());
+        this.tui.requestRender();
     }
-    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)");
-    }
-    setScope(scope) {
-        if (this.scope === scope)
-            return;
-        this.scope = scope;
+    rebuildProviders() {
         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());
+        const groups = new Map();
+        for (const item of this.activeModels) {
+            let provider = groups.get(item.provider);
+            if (!provider) {
+                provider = {
+                    id: item.provider,
+                    name: this.modelRegistry.getProviderDisplayName(item.provider),
+                    models: [],
+                };
+                groups.set(item.provider, provider);
+            }
+            provider.models.push(item);
         }
+        this.providers = [...groups.values()].sort((a, b) => a.name.localeCompare(b.name) || a.id.localeCompare(b.id));
     }
-    filterModels(query) {
-        this.filteredModels = query
-            ? fuzzyFilter(this.activeModels, query, ({ id, provider }) => `${id} ${provider} ${provider}/${id} ${provider} ${id}`)
-            : this.activeModels;
-        // A query changes fuzzy-match ranking, so select the best match. When the query
-        // is cleared, preserve the current position and only clamp it to the restored list.
-        this.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
-        this.updateList();
+    selectCurrent() {
+        const index = this.view === "providers"
+            ? this.providers.findIndex((item) => item.id === this.currentModel?.provider)
+            : this.getModelItems().findIndex((item) => modelsAreEqual(this.currentModel, item.model));
+        this.selectedIndex = Math.max(0, index);
     }
-    appendModelListStatus() {
-        if (this.errorMessage) {
-            for (const line of this.errorMessage.split("\n")) {
-                this.listContainer.addChild(new Text(theme.fg("error", line), 0, 0));
-            }
-            return;
+    getModelItems() {
+        return this.view === "models" ? (this.selectedProvider?.models ?? []) : this.activeModels;
+    }
+    filterItems(query) {
+        if (this.view === "providers") {
+            this.filteredProviders = query
+                ? fuzzyFilter(this.providers, query, ({ id, name }) => `${name} ${id}`)
+                : this.providers;
         }
-        if (this.filteredModels.length === 0) {
-            this.listContainer.addChild(new Text(theme.fg("muted", "  No matching models"), 0, 0));
-            return;
+        else {
+            const items = this.getModelItems();
+            this.filteredModels = query
+                ? fuzzyFilter(items, query, ({ id, provider, model }) => `${id} ${provider} ${provider}/${id} ${model.name}`)
+                : items;
         }
-        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));
+        // Query edits select the best match; clearing only clamps the position (7209).
+        this.selectedIndex = query ? 0 : Math.min(this.selectedIndex, Math.max(0, this.itemCount() - 1));
+        this.updateList();
+    }
+    itemCount() {
+        return this.view === "providers" ? this.filteredProviders.length : this.filteredModels.length;
+    }
+    updateHeader() {
+        const all = this.scope === "all" ? theme.fg("accent", "all") : theme.fg("muted", "all");
+        const scoped = this.scope === "scoped" ? theme.fg("accent", "scoped") : theme.fg("muted", "scoped");
+        const scopeHint = this.scopedModels.length > 0 ? ` · ${keyHint("tui.input.tab", "scope")} (${all}/${scoped})` : "";
+        const title = this.view === "providers"
+            ? "Providers"
+            : this.view === "search"
+                ? "Search all providers"
+                : `${this.selectedProvider?.name} [${this.selectedProvider?.id}]`;
+        this.scopeText.setText(theme.fg("muted", title) + scopeHint);
+        this.navigationText.setText(keyHint("tui.select.up", "up") +
+            " · " +
+            keyHint("tui.select.down", "down") +
+            " · " +
+            keyHint("tui.select.confirm", this.view === "providers" ? "models" : "select") +
+            " · " +
+            keyHint("tui.select.cancel", this.view === "models" ? "providers" : "cancel"));
     }
     updateList() {
+        this.updateHeader();
         this.listContainer.clear();
+        const count = this.itemCount();
         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
-        for (let i = startIndex; i < endIndex; i++) {
-            const item = this.filteredModels[i];
-            if (!item)
-                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}`;
+        const start = Math.max(0, Math.min(this.selectedIndex - Math.floor(maxVisible / 2), count - maxVisible));
+        const end = Math.min(start + maxVisible, count);
+        for (let i = start; i < end; i++) {
+            let label;
+            let current;
+            if (this.view === "providers") {
+                const item = this.filteredProviders[i];
+                label = `${item.name} [${item.id}] (${item.models.length} models)`;
+                current = item.id === this.currentModel?.provider;
             }
             else {
-                const modelText = `  ${item.id}`;
-                const providerBadge = theme.fg("muted", `[${item.provider}]`);
-                const checkmark = isCurrent ? theme.fg("success", " ✓") : "";
-                line = `${modelText} ${providerBadge}${checkmark}`;
+                const item = this.filteredModels[i];
+                label = `${item.id} [${item.provider}]`;
+                current = modelsAreEqual(this.currentModel, item.model);
             }
-            this.listContainer.addChild(new Text(line, 0, 0));
+            const selected = i === this.selectedIndex;
+            const prefix = selected ? theme.fg("accent", "→ ") : "  ";
+            const marker = current ? theme.fg("success", " ✓") : "";
+            this.addListLine(prefix + (selected ? theme.fg("accent", label) : label) + marker);
+        }
+        if (start > 0 || end < count)
+            this.addListLine(theme.fg("muted", `  (${this.selectedIndex + 1}/${count})`));
+        this.appendListStatus(count);
+    }
+    appendListStatus(count) {
+        if (this.loading) {
+            this.addListLine(theme.fg("muted", "  Loading models…"));
+        }
+        else if (count === 0) {
+            const empty = this.view === "providers" ? "No matching providers. Use /login to add providers." : "No matching models";
+            this.addListLine(theme.fg("muted", `  ${empty}`));
+        }
+        else if (this.view !== "providers") {
+            this.listContainer.addChild(new Spacer(1));
+            this.addListLine(theme.fg("muted", `  Model Name: ${this.filteredModels[this.selectedIndex].model.name}`));
+        }
+        if (this.errorMessage) {
+            for (const line of this.errorMessage.split("\n"))
+                this.addListLine(theme.fg("error", line));
         }
-        // Add scroll indicator if needed
-        if (startIndex > 0 || endIndex < this.filteredModels.length) {
-            const scrollInfo = theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredModels.length})`);
-            this.listContainer.addChild(new Text(scrollInfo, 0, 0));
+    }
+    addListLine(line) {
+        this.listContainer.addChild(new Text(truncateToWidth(line, this.listWidth), 0, 0));
+    }
+    render(width) {
+        if (this.listWidth !== width) {
+            this.listWidth = width;
+            this.updateList();
         }
-        // Show error message or "no results" if empty
-        this.appendModelListStatus();
+        return super.render(width);
     }
     toggleModelScope() {
-        if (this.scopedModelItems.length === 0)
+        if (this.scopedModels.length === 0)
             return;
-        const nextScope = this.scope === "all" ? "scoped" : "all";
-        this.setScope(nextScope);
-        this.scopeHintText?.setText(this.getScopeHintText());
+        this.scope = this.scope === "all" ? "scoped" : "all";
+        if (this.view !== "search") {
+            this.view = "providers";
+            this.selectedProvider = null;
+            this.providerQuery = "";
+            this.providerIndex = 0;
+            this.searchInput.setValue("");
+        }
+        this.rebuildProviders();
+        this.selectCurrent();
+        this.filterItems(this.searchInput.getValue());
     }
-    moveSelection(direction) {
-        if (this.filteredModels.length === 0)
+    moveSelection(delta) {
+        const count = this.itemCount();
+        if (count === 0)
             return;
-        if (direction < 0) {
-            this.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;
-        }
-        else {
-            this.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;
-        }
+        this.selectedIndex = (this.selectedIndex + delta + count) % count;
         this.updateList();
     }
-    selectHighlightedModel() {
-        const selectedModel = this.filteredModels[this.selectedIndex];
-        if (selectedModel)
-            this.handleSelect(selectedModel.model);
+    confirmSelection() {
+        if (this.loading)
+            return;
+        if (this.view === "providers") {
+            const provider = this.filteredProviders[this.selectedIndex];
+            if (!provider)
+                return;
+            this.providerQuery = this.searchInput.getValue();
+            this.providerIndex = this.selectedIndex;
+            this.selectedProvider = provider;
+            this.view = "models";
+            this.searchInput.setValue("");
+            this.selectCurrent();
+            this.filterItems("");
+            return;
+        }
+        const item = this.filteredModels[this.selectedIndex];
+        if (!item)
+            return;
+        if (this.persistDefault)
+            this.settingsManager.setDefaultModelAndProvider(item.provider, item.id);
+        this.onSelectCallback(item.model);
     }
     handleInput(keyData) {
         const kb = getKeybindings();
         if (kb.matches(keyData, "tui.input.tab")) {
             this.toggleModelScope();
-            return;
         }
-        if (kb.matches(keyData, "tui.select.up")) {
+        else if (kb.matches(keyData, "tui.select.up")) {
             this.moveSelection(-1);
-            return;
         }
-        if (kb.matches(keyData, "tui.select.down")) {
+        else if (kb.matches(keyData, "tui.select.down")) {
             this.moveSelection(1);
-            return;
         }
-        if (kb.matches(keyData, "tui.select.confirm")) {
-            this.selectHighlightedModel();
-            return;
+        else if (kb.matches(keyData, "tui.select.pageUp")) {
+            this.moveSelection(-Math.min(10, Math.max(0, this.itemCount() - 1)));
         }
-        if (kb.matches(keyData, "tui.select.cancel")) {
-            this.onCancelCallback();
-            return;
+        else if (kb.matches(keyData, "tui.select.pageDown")) {
+            this.moveSelection(Math.min(10, Math.max(0, this.itemCount() - 1)));
+        }
+        else if (kb.matches(keyData, "tui.select.confirm")) {
+            this.confirmSelection();
+        }
+        else if (kb.matches(keyData, "tui.select.cancel")) {
+            if (this.view === "models") {
+                this.view = "providers";
+                this.selectedProvider = null;
+                this.searchInput.setValue(this.providerQuery);
+                this.filterItems(this.providerQuery);
+                this.selectedIndex = Math.min(this.providerIndex, Math.max(0, this.itemCount() - 1));
+                this.updateList();
+            }
+            else {
+                this.onCancelCallback();
+            }
+        }
+        else {
+            const query = this.searchInput.getValue();
+            this.searchInput.handleInput(keyData);
+            if (query !== this.searchInput.getValue())
+                this.filterItems(this.searchInput.getValue());
         }
-        this.searchInput.handleInput(keyData);
-        this.filterModels(this.searchInput.getValue());
-    }
-    handleSelect(model) {
-        // Save as new default
-        if (this.persistDefault)
-            this.settingsManager.setDefaultModelAndProvider(model.provider, model.id);
-        this.onSelectCallback(model);
     }
     getSearchInput() {
         return this.searchInput;