@oh-my-pi/pi-coding-agent 16.4.6 → 16.5.0

package/src/modes/components/model-hub.ts

@@ -6,7 +6,8 @@
  * {@link ModelBrowser} body. The Roles view manages assignments directly:
  * pick a role, pick a model, adjust thinking in an inline strip, or clear the
  * role back to auto-selection. Locked providers forward to the /login flow.
- * Fully mouse-navigable (hover, wheel, click).
+ * Fully mouse-navigable (hover, wheel, click). Session-only switching lives
+ * in the compact alt+p picker ({@link ./model-picker}).
  */
 import { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import type { Model } from "@oh-my-pi/pi-ai";
@@ -27,15 +28,9 @@ import {
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
 import type { ModelRegistry } from "../../config/model-registry";
-import { getModelMatchPreferences, resolveModelRoleValue } from "../../config/model-resolver";
 import { getKnownRoleIds, getRoleInfo } from "../../config/model-roles";
 import type { Settings } from "../../config/settings";
-import {
-	AUTO_THINKING,
-	type ConfiguredThinkingLevel,
-	getConfiguredThinkingLevelMetadata,
-	parseConfiguredThinkingLevel,
-} from "../../thinking";
+import { AUTO_THINKING, type ConfiguredThinkingLevel, getConfiguredThinkingLevelMetadata } from "../../thinking";
 import { theme } from "../theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../utils/keybinding-matchers";
 import {
@@ -43,15 +38,13 @@ import {
 	ModelBrowser,
 	type ModelBrowserItem,
 	type RoleAssignments,
+	resolveRoleAssignments,
 	sortModelItems,
 	thinkingLevelGlyph,
 } from "./model-browser";
 import { bottomBorder, dividerSplit, row, splitBodyWidth, splitRow, topBorderSplit } from "./overlay-box";
 import { renderSegmentTrack } from "./segment-track";
 
-/** `roles` is the full /models hub; `pick` is a one-shot session/embedded picker. */
-export type ModelHubMode = "roles" | "pick";
-
 /**
  * A row of the Roles view: a role, a model/wildcard chain-key header, one of a
  * chain's fallback entries, or the trailing "+ New role…". Fallback rows under
@@ -89,8 +82,6 @@ export interface ModelHubCallbacks {
 	onUnassign: (role: string) => void;
 	/** Persist a `retry.fallbackChains` entry — keyed by a role, `provider/model-id`, or `provider/*`; an empty chain clears the key. */
 	onFallbackChainChange?: (role: string, chain: string[]) => void;
-	/** Pick-mode activation: session-only switch or embedded pick. */
-	onPick?: (model: Model, selector: string) => void;
 	/** Locked provider activation: forward to the /login flow. */
 	onLoginRequest?: (providerId: string) => void;
 	/** Persist a new quick-switch cycle order (the ctrl+p role cycle). */
@@ -99,14 +90,8 @@ export interface ModelHubCallbacks {
 }
 
 export interface ModelHubOptions {
-	mode?: ModelHubMode;
-	/** Session token count; in pick mode, models with smaller context windows are disabled. */
-	currentContextTokens?: number;
 	/** Preselect this provider's sidebar entry (e.g. when reopening after /login). */
 	initialProviderId?: string;
-	/** Status-row hint shown in pick mode. */
-	pickerHint?: string;
-	initialQuery?: string;
 }
 
 interface SidebarEntry {
@@ -158,8 +143,6 @@ const RECENT_LIMIT = 15;
 const SIDEBAR_MIN_WIDTH = 18;
 const SIDEBAR_MAX_WIDTH = 26;
 
-const PICK_MODE_HINT = "Session-only switch — role models stay unchanged";
-
 /**
  * Providers already auto-refreshed this process. Selecting a provider fetches
  * its live model list at most once per application lifetime (surviving hub
@@ -182,8 +165,6 @@ export class ModelHubComponent implements Component {
 	#registry: ModelRegistry;
 	#scopedModels: ReadonlyArray<ScopedModelItem>;
 	#callbacks: ModelHubCallbacks;
-	#mode: ModelHubMode;
-	#pickerHint: string;
 
 	#browser: ModelBrowser;
 	#roles: RoleAssignments = {};
@@ -250,14 +231,9 @@ export class ModelHubComponent implements Component {
 		this.#registry = registry;
 		this.#scopedModels = scopedModels;
 		this.#callbacks = callbacks;
-		this.#mode = options.mode ?? "roles";
-		this.#pickerHint = options.pickerHint ?? PICK_MODE_HINT;
 
 		this.#browser = new ModelBrowser(settings, {
-			currentContextTokens: options.currentContextTokens,
-			disableOverContext: this.#mode === "pick",
 			emptyText: () => this.#emptyStateMessage(),
-			initialQuery: options.initialQuery,
 		});
 		this.#browser.onActivate = item => this.#activateItem(item);
 		this.#browser.onCancel = () => this.#callbacks.onCancel();
@@ -275,10 +251,6 @@ export class ModelHubComponent implements Component {
 			this.#setActiveEntry("all");
 		}
 
-		if (this.#mode === "pick") {
-			this.#focus = "list";
-		}
-
 		// Reconcile with cached discovery state in the background. A --models
 		// scope is registry-independent, so the offline reload would only repeat
 		// the synchronous hydration above.
@@ -314,62 +286,10 @@ export class ModelHubComponent implements Component {
 		return getKnownRoleIds(this.#settings).filter(role => !getRoleInfo(role, this.#settings).hidden);
 	}
 
-	#getResolvedRoleThinkingLevel(
-		role: string,
-		resolved: { explicitThinkingLevel: boolean; thinkingLevel?: ConfiguredThinkingLevel },
-	): ConfiguredThinkingLevel {
-		if (resolved.explicitThinkingLevel && resolved.thinkingLevel !== undefined) {
-			return resolved.thinkingLevel;
-		}
-		if (role === "default") {
-			return parseConfiguredThinkingLevel(this.#settings.get("defaultThinkingLevel")) ?? ThinkingLevel.Inherit;
-		}
-		return ThinkingLevel.Inherit;
-	}
-
 	/** Resolve every known role: configured values first, auto-selection for the rest. */
 	#reloadRoles(autoCandidates: ReadonlyArray<Model>): void {
-		const nextRoles: RoleAssignments = {};
-		const allModels = this.#scopedModels.length > 0 ? [...autoCandidates] : this.#registry.getAll();
-		const matchPreferences = getModelMatchPreferences(this.#settings);
-		const knownRoles = getKnownRoleIds(this.#settings);
-		const configuredRoles = new Set<string>();
-
-		for (const role of knownRoles) {
-			const roleValue = this.#settings.getModelRole(role);
-			if (!roleValue) continue;
-			configuredRoles.add(role);
-			const resolved = resolveModelRoleValue(roleValue, allModels, {
-				settings: this.#settings,
-				matchPreferences,
-			});
-			if (resolved.model) {
-				nextRoles[role] = {
-					model: resolved.model,
-					thinkingLevel: this.#getResolvedRoleThinkingLevel(role, resolved),
-					autoSelected: false,
-				};
-			}
-		}
-
-		if (autoCandidates.length > 0) {
-			const candidates = [...autoCandidates];
-			for (const role of knownRoles) {
-				if (configuredRoles.has(role)) continue;
-				const resolved = resolveModelRoleValue(`pi/${role}`, candidates, {
-					settings: this.#settings,
-					matchPreferences,
-				});
-				if (!resolved.model) continue;
-				nextRoles[role] = {
-					model: resolved.model,
-					thinkingLevel: this.#getResolvedRoleThinkingLevel(role, resolved),
-					autoSelected: true,
-				};
-			}
-		}
-
-		this.#roles = nextRoles;
+		const allModels = this.#scopedModels.length > 0 ? autoCandidates : this.#registry.getAll();
+		this.#roles = resolveRoleAssignments(this.#settings, allModels, autoCandidates);
 	}
 
 	/** Rebuild items, roles, and the sidebar from the registry's in-memory state. */
@@ -461,7 +381,7 @@ export class ModelHubComponent implements Component {
 			label: providerId,
 			providerId,
 			locked: isLocked,
-			annotation: isLocked ? "login" : String(availableCounts.get(providerId) ?? 0),
+			annotation: isLocked ? undefined : String(availableCounts.get(providerId) ?? 0),
 			oauth: oauthIds.has(providerId),
 			catalogCount: catalogCounts.get(providerId) ?? 0,
 		});
@@ -475,16 +395,15 @@ export class ModelHubComponent implements Component {
 
 		// Roles leads the fixed section so downward hops from Recent head into
 		// model scopes instead of being captured by the roles view.
-		const fixed: SidebarEntry[] = [];
-		if (this.#mode === "roles") {
-			fixed.push({
+		const fixed: SidebarEntry[] = [
+			{
 				id: "roles",
 				kind: "roles",
 				label: "Roles",
 				annotation: `${assignedCount}/${visibleRoles.length}`,
-			});
-		}
-		fixed.push({ id: "all", kind: "all", label: "All models", annotation: String(availableModels.length) });
+			},
+			{ id: "all", kind: "all", label: "All models", annotation: String(availableModels.length) },
+		];
 
 		this.#fixedEntries = fixed;
 		this.#unlockedProviderEntries = [...unlocked]
@@ -811,10 +730,6 @@ export class ModelHubComponent implements Component {
 	// ═══════════════════════════════════════════════════════════════════════
 
 	#activateItem(item: ModelBrowserItem): void {
-		if (this.#mode === "pick") {
-			this.#callbacks.onPick?.(item.model, item.selector);
-			return;
-		}
 		if (this.#assigning) {
 			const target = this.#assigning;
 			this.#assigning = null;
@@ -917,7 +832,7 @@ export class ModelHubComponent implements Component {
 		const strip = this.#strip;
 		this.#strip = null;
 		this.#chipRanges = [];
-		if (strip?.kind === "thinking" && strip.returnToRoles && this.#mode === "roles") {
+		if (strip?.kind === "thinking" && strip.returnToRoles) {
 			this.#setActiveEntry("roles");
 			this.#focus = "list";
 		}
@@ -1030,14 +945,12 @@ export class ModelHubComponent implements Component {
 		}
 		this.#setFallbackChain(target.role, chain);
 		this.#browser.setQuery("");
-		if (this.#mode === "roles") {
-			this.#setActiveEntry("roles");
-			this.#focus = "list";
-			const rowIndex = this.#rolesRows.findIndex(
-				row => row.kind === "fallback" && row.role === target.role && row.selector === selector,
-			);
-			if (rowIndex >= 0) this.#roleIndex = rowIndex;
-		}
+		this.#setActiveEntry("roles");
+		this.#focus = "list";
+		const rowIndex = this.#rolesRows.findIndex(
+			row => row.kind === "fallback" && row.role === target.role && row.selector === selector,
+		);
+		if (rowIndex >= 0) this.#roleIndex = rowIndex;
 	}
 
 	/** Persist `role`'s chain through the host callback and rebuild dependent state. */
@@ -1076,10 +989,8 @@ export class ModelHubComponent implements Component {
 	#cancelAssign(): void {
 		this.#assigning = null;
 		this.#browser.setQuery("");
-		if (this.#mode === "roles") {
-			this.#setActiveEntry("roles");
-			this.#focus = "list";
-		}
+		this.#setActiveEntry("roles");
+		this.#focus = "list";
 	}
 
 	// ═══════════════════════════════════════════════════════════════════════
@@ -1468,6 +1379,10 @@ export class ModelHubComponent implements Component {
 				this.#roleHover = null;
 				if (overBody && this.#isBrowserView(entry)) {
 					this.#browser.routeMouse(event, bodyLine);
+				} else {
+					// Pointer left the browser pane: without this, the last
+					// hovered row keeps its band while the sidebar hovers too.
+					this.#browser.clearHover();
 				}
 			}
 			return true;
@@ -1578,11 +1493,10 @@ export class ModelHubComponent implements Component {
 			// While searching, entries the hop skips gray out: locked and
 			// zero-match providers, an empty Recent, and the Roles view.
 			const muted = entry.locked || matchCount === 0 || (searching && entry.kind === "roles");
-			const cursor = active
-				? this.#focus === "scope"
-					? theme.fg("accent", theme.nav.cursor)
-					: theme.fg("dim", theme.nav.cursor)
-				: " ";
+			// The sidebar's active entry is state, not a cursor: accent label
+			// plus a cursor glyph while the sidebar owns the arrows. The band
+			// stays in the body pane so the two never look alike.
+			const cursor = active && this.#focus === "scope" ? theme.fg("accent", theme.nav.cursor) : " ";
 
 			let icon: string;
 			if (entry.kind === "recent") {
@@ -1597,7 +1511,7 @@ export class ModelHubComponent implements Component {
 			const labelStyled = muted
 				? theme.fg("dim", entry.label)
 				: active
-					? theme.fg("accent", entry.label)
+					? theme.bold(theme.fg("accent", entry.label))
 					: entry.label;
 
 			const refreshing = entry.providerId ? this.#refreshingProviders.has(entry.providerId) : false;
@@ -1614,8 +1528,10 @@ export class ModelHubComponent implements Component {
 				line = `${left}${" ".repeat(width - leftWidth - annWidth)}${annotationStyled}`;
 			} else {
 				line = truncateToWidth(left, width);
+				const lineWidth = visibleWidth(line);
+				if (lineWidth < width) line += " ".repeat(width - lineWidth);
 			}
-			if (hovered && !active) {
+			if (hovered) {
 				line = theme.bg("selectedBg", line);
 			}
 			lines.push(line);
@@ -1650,7 +1566,7 @@ export class ModelHubComponent implements Component {
 		let text: string;
 		switch (entry.kind) {
 			case "recent":
-				text = this.#mode === "pick" ? this.#pickerHint : `Recently used models${scopedSuffix}`;
+				text = `Recently used models${scopedSuffix}`;
 				break;
 			case "roles":
 				text = "Model roles — f adds a retry fallback, cleared roles fall back to auto-selection";
@@ -1665,7 +1581,7 @@ export class ModelHubComponent implements Component {
 				}
 				break;
 			default:
-				text = this.#mode === "pick" ? this.#pickerHint : `All available models${scopedSuffix}`;
+				text = `All available models${scopedSuffix}`;
 				break;
 		}
 		if (this.#configError && entry.kind !== "provider") {
@@ -1675,6 +1591,17 @@ export class ModelHubComponent implements Component {
 		return truncateToWidth(theme.fg("muted", ` ${text}`), width);
 	}
 
+	/** Clamp a roles row to `width`; the bg band is reserved for mouse hover. */
+	#finishRolesRow(line: string, width: number, hovered: boolean): string {
+		let out = truncateToWidth(line, width);
+		if (hovered) {
+			const w = visibleWidth(out);
+			if (w < width) out += " ".repeat(width - w);
+			return theme.bg("selectedBg", out);
+		}
+		return out;
+	}
+
 	#renderRolesView(width: number, rows: number): string[] {
 		const lines: string[] = [];
 		lines.push("");
@@ -1691,12 +1618,14 @@ export class ModelHubComponent implements Component {
 		}
 
 		const cycleOrder = this.#cycleOrder();
+		const listFocused = this.#focus === "list";
 		for (let i = 0; i < this.#rolesRows.length && lines.length < rows - 2; i++) {
 			const rowDef = this.#rolesRows[i];
 			if (!rowDef) continue;
 			const selected = i === this.#roleIndex;
 			const hovered = i === this.#roleHover;
-			const cursor = selected ? theme.fg("accent", theme.nav.cursor) : " ";
+			// The unfocused pane draws no cursor; accent text still marks the row.
+			const cursor = selected && listFocused ? theme.fg("accent", theme.nav.cursor) : " ";
 
 			if (rowDef.kind === "separator") {
 				lines.push(`   ${theme.fg("border", "─".repeat(Math.max(1, width - 6)))}`);
@@ -1706,10 +1635,7 @@ export class ModelHubComponent implements Component {
 			if (rowDef.kind === "newRole" || rowDef.kind === "newFallback") {
 				const label = rowDef.kind === "newRole" ? "+ New role…" : "+ New fallback…";
 				let line = ` ${cursor} ${theme.fg(selected ? "accent" : "dim", label)}`;
-				line = truncateToWidth(line, width);
-				if (hovered && !selected) {
-					line = theme.bg("selectedBg", line);
-				}
+				line = this.#finishRolesRow(line, width, hovered);
 				lines.push(line);
 				continue;
 			}
@@ -1720,10 +1646,7 @@ export class ModelHubComponent implements Component {
 				const tail = key.slice(slash + 1);
 				const keyStyled = theme.fg("dim", key.slice(0, slash + 1)) + (selected ? theme.fg("accent", tail) : tail);
 				let line = ` ${cursor} ${theme.fg("dim", theme.status.shadowed)} ${keyStyled}`;
-				line = truncateToWidth(line, width);
-				if (hovered && !selected) {
-					line = theme.bg("selectedBg", line);
-				}
+				line = this.#finishRolesRow(line, width, hovered);
 				lines.push(line);
 				continue;
 			}
@@ -1732,10 +1655,7 @@ export class ModelHubComponent implements Component {
 				const branch = theme.fg("dim", `${"".padEnd(tagWidth + 3)}↳`);
 				const selector = selected ? theme.fg("accent", rowDef.selector) : theme.fg("muted", rowDef.selector);
 				let line = ` ${cursor} ${branch} ${selector}`;
-				line = truncateToWidth(line, width);
-				if (hovered && !selected) {
-					line = theme.bg("selectedBg", line);
-				}
+				line = this.#finishRolesRow(line, width, hovered);
 				lines.push(line);
 				continue;
 			}
@@ -1778,12 +1698,8 @@ export class ModelHubComponent implements Component {
 			const lineWidth = visibleWidth(line);
 			if (rightWidth > 0 && lineWidth + rightWidth + 2 <= width) {
 				line = `${line}${" ".repeat(width - lineWidth - rightWidth - 1)}${right}`;
-			} else {
-				line = truncateToWidth(line, width);
-			}
-			if (hovered && !selected) {
-				line = theme.bg("selectedBg", line);
 			}
+			line = this.#finishRolesRow(line, width, hovered);
 			lines.push(line);
 		}
 
@@ -1890,9 +1806,6 @@ export class ModelHubComponent implements Component {
 		}
 		const arrows = this.#focus === "scope" ? "↑/↓ providers · → models" : "↑/↓ models · ← providers";
 		const refresh = entry.kind === "provider" ? " · F5 refresh" : "";
-		if (this.#mode === "pick") {
-			return `Enter use for this session · ${arrows} · type to search${refresh} · Esc close`;
-		}
 		return `Enter assign roles · ${arrows} · type to search${refresh} · Esc close`;
 	}
 
@@ -1981,14 +1894,14 @@ export class ModelHubComponent implements Component {
 			bodyLines.push(...this.#renderLockedView(entry, bodyWidth, contentRows - 1));
 		} else {
 			this.#browser.setMaxVisible(contentRows - 1 - 5);
+			this.#browser.setFocused(this.#focus === "list");
 			bodyLines.push(...this.#browser.render(bodyWidth));
 		}
 
 		const sidebarLines = this.#renderSidebar(sidebarWidth, contentRows);
 
-		const title = this.#mode === "pick" ? "Switch Model" : "Models";
 		const out: string[] = [];
-		out.push(topBorderSplit(width, title, sidebarWidth));
+		out.push(topBorderSplit(width, "Models", sidebarWidth));
 		this.#contentRowStart = out.length;
 		for (let i = 0; i < contentRows; i++) {
 			out.push(splitRow(sidebarLines[i] ?? "", bodyLines[i] ?? "", width, sidebarWidth));

package/src/modes/components/model-picker.ts

@@ -0,0 +1,233 @@
+/**
+ * Compact session-model picker (alt+p / `/switch`): a bottom-anchored
+ * floating overlay hosting just a {@link ModelBrowser} — no provider sidebar.
+ * Model entries switch the current session only; a search beginning with `@`
+ * exposes the configured ctrl+p quick roles.
+ */
+import type { Model } from "@oh-my-pi/pi-ai";
+import type { Component, TUI } from "@oh-my-pi/pi-tui";
+import type { ModelRegistry } from "../../config/model-registry";
+import type { Settings } from "../../config/settings";
+import type { ResolvedRoleModel } from "../../session/agent-session";
+import { theme } from "../theme/theme";
+import {
+	buildBrowserItems,
+	ModelBrowser,
+	type ModelBrowserItem,
+	resolveRoleAssignments,
+	sortModelItems,
+} from "./model-browser";
+import type { ScopedModelItem } from "./model-hub";
+import { bottomBorder, row, topBorder } from "./overlay-box";
+import { resolveSegmentPalette } from "./segment-track";
+
+export interface ModelPickerCallbacks {
+	/** A model was chosen for a session-only switch. `selector` is `provider/id`. */
+	onPick: (model: Model, selector: string) => void;
+	/** A configured ctrl+p quick role was chosen. */
+	onPickRole?: (entry: ResolvedRoleModel) => void;
+	/** The picker was dismissed. */
+	onCancel: () => void;
+}
+
+export interface ModelPickerOptions {
+	/** Session token count; models with smaller context windows are disabled. */
+	currentContextTokens?: number;
+	/** `provider/id` of the session's active model; highlighted and preselected. */
+	currentSelector?: string;
+	/** Resolved role models in the same order used by the ctrl+p quick-role cycle. */
+	quickRoles?: ReadonlyArray<ResolvedRoleModel>;
+	/** Complete ctrl+p order, including unavailable roles, to preserve segment colors. */
+	quickRoleOrder?: ReadonlyArray<string>;
+	/** Active quick role, highlighted when the search begins with `@`. */
+	currentQuickRole?: string;
+}
+
+/** Fixed chrome rows: top border, status row, footer, bottom border. */
+const CHROME_ROWS = 4;
+/** Rows the browser renders around its list window (search + blank, blank + two detail rows). */
+const BROWSER_FRAME_ROWS = 5;
+/** Minimum rows for the browser list window on short terminals. */
+const MIN_VISIBLE = 5;
+/** Fraction of the terminal height the floating overlay occupies. */
+const HEIGHT_FRACTION = 0.4;
+
+const STATUS_HINT = "Session-only switch — role models stay unchanged";
+const QUICK_ROLE_STATUS_HINT = "Quick role switch — applies its model and thinking for this session";
+const FOOTER_HINT = "↑/↓ models · Enter use for this session · type to search · @ quick roles · Esc close";
+const QUICK_ROLE_FOOTER_HINT = "↑/↓ roles · Enter apply role model · type to search · Esc close";
+
+/**
+ * The alt+p picker component. Hosted as a non-fullscreen bottom-anchored
+ * overlay (`ui.showOverlay(..., { anchor: "bottom-center" })`); keyboard-only,
+ * since mouse tracking is reserved for fullscreen overlays.
+ */
+export class ModelPickerComponent implements Component {
+	#tui: TUI;
+	#settings: Settings;
+	#registry: ModelRegistry;
+	#scopedModels: ReadonlyArray<ScopedModelItem>;
+	#browser: ModelBrowser;
+	#configError: string | undefined;
+	#currentSelector: string | undefined;
+	#currentQuickRoleSelector: string | undefined;
+	#modelItems: ModelBrowserItem[] = [];
+	#quickRoleItems: ModelBrowserItem[] = [];
+	#quickRoles = new Map<string, ResolvedRoleModel>();
+	#roleMode = false;
+
+	constructor(
+		tui: TUI,
+		settings: Settings,
+		registry: ModelRegistry,
+		scopedModels: ReadonlyArray<ScopedModelItem>,
+		callbacks: ModelPickerCallbacks,
+		options: ModelPickerOptions = {},
+	) {
+		this.#tui = tui;
+		this.#settings = settings;
+		this.#registry = registry;
+		this.#scopedModels = scopedModels;
+		this.#currentSelector = options.currentSelector;
+		this.#currentQuickRoleSelector = options.currentQuickRole ? `@${options.currentQuickRole}` : undefined;
+		this.#quickRoleItems = this.#buildQuickRoleItems(
+			options.quickRoles ?? [],
+			options.quickRoleOrder ?? options.quickRoles?.map(entry => entry.role) ?? [],
+		);
+
+		this.#browser = new ModelBrowser(settings, {
+			currentContextTokens: options.currentContextTokens,
+			disableOverContext: true,
+			emptyText: () => (this.#roleMode ? "  No quick roles in the Ctrl+P cycle" : undefined),
+		});
+		this.#browser.onActivate = item => {
+			const quickRole = this.#quickRoles.get(item.selector);
+			if (quickRole) {
+				callbacks.onPickRole?.(quickRole);
+				return;
+			}
+			callbacks.onPick(item.model, item.selector);
+		};
+		this.#browser.onCancel = () => callbacks.onCancel();
+		this.#browser.onQueryChange = query => this.#syncItemsForQuery(query);
+
+		// Hydrate synchronously from the current registry snapshot so the first
+		// Enter after opening acts on cached models instead of being dropped
+		// while the offline refresh promise is still pending.
+		this.#syncFromRegistryState();
+		if (options.currentSelector) {
+			this.#browser.selectSelector(options.currentSelector);
+		}
+
+		// Reconcile with cached discovery state in the background. A --models
+		// scope is registry-independent, so the offline reload would only repeat
+		// the synchronous hydration above.
+		if (this.#scopedModels.length === 0) {
+			this.#registry
+				.refresh("offline")
+				.then(() => this.#syncFromRegistryState())
+				.catch(error => {
+					this.#configError = error instanceof Error ? error.message : String(error);
+				})
+				.finally(() => this.#tui.requestRender());
+		}
+	}
+
+	invalidate(): void {}
+
+	/** Rebuild model items and role chips from the registry's in-memory state. */
+	#syncFromRegistryState(): void {
+		let models: ReadonlyArray<Model>;
+		if (this.#scopedModels.length > 0) {
+			models = this.#scopedModels.map(scoped => scoped.model);
+			this.#configError = undefined;
+		} else {
+			const loadError = this.#registry.getError();
+			this.#configError = loadError ? String(loadError) : undefined;
+			try {
+				models = this.#registry.getAvailable();
+			} catch (error) {
+				this.#configError = error instanceof Error ? error.message : String(error);
+				models = [];
+			}
+		}
+
+		const allModels = this.#scopedModels.length > 0 ? models : this.#registry.getAll();
+		const roles = resolveRoleAssignments(this.#settings, allModels, models);
+		const storage = this.#settings.getStorage();
+		const mruOrder = storage?.getModelUsageOrder() ?? [];
+		this.#modelItems = buildBrowserItems(models);
+		sortModelItems(this.#modelItems, { roles, mruOrder });
+		this.#browser.setRoles(roles);
+		this.#browser.setMruOrder(mruOrder);
+		this.#browser.setPerfStats(storage?.getModelPerf() ?? new Map());
+		this.#syncItemsForQuery(this.#browser.query, true);
+	}
+
+	/** Build virtual `@role` rows, colored by their ctrl+p segment position. */
+	#buildQuickRoleItems(
+		quickRoles: ReadonlyArray<ResolvedRoleModel>,
+		quickRoleOrder: ReadonlyArray<string>,
+	): ModelBrowserItem[] {
+		const order = quickRoleOrder.length > 0 ? quickRoleOrder : quickRoles.map(entry => entry.role);
+		const palette = resolveSegmentPalette(order.length);
+		return quickRoles.map((entry, index) => {
+			const selector = `@${entry.role}`;
+			this.#quickRoles.set(selector, entry);
+			const orderIndex = order.indexOf(entry.role);
+			return {
+				provider: "",
+				id: selector,
+				model: entry.model,
+				selector,
+				labelColor: palette[(orderIndex >= 0 ? orderIndex : index) % palette.length],
+			};
+		});
+	}
+
+	/** Switch browser content only when a leading `@` changes the search mode. */
+	#syncItemsForQuery(query: string, refresh = false): void {
+		const roleMode = query.startsWith("@");
+		const modeChanged = roleMode !== this.#roleMode;
+		if (!modeChanged && !refresh) return;
+
+		this.#roleMode = roleMode;
+		this.#browser.setShowProvider(!roleMode);
+		this.#browser.setDisableOverContext(!roleMode);
+		this.#browser.setPreserveQueryOrder(roleMode);
+		const currentSelector = roleMode ? this.#currentQuickRoleSelector : this.#currentSelector;
+		this.#browser.setCurrentSelector(currentSelector);
+		this.#browser.setItems(roleMode ? this.#quickRoleItems : this.#modelItems);
+		if (modeChanged && currentSelector) {
+			this.#browser.selectSelector(currentSelector);
+		}
+	}
+
+	handleInput(data: string): void {
+		// Mouse tracking is off outside fullscreen overlays; drop any stray SGR
+		// reports instead of feeding them to the search input.
+		if (data.startsWith("\x1b[<")) return;
+		this.#browser.handleInput(data);
+	}
+
+	render(width: number): string[] {
+		const termRows = Math.max(16, this.#tui.terminal?.rows || process.stdout.rows || 40);
+		const listBudget = Math.floor(termRows * HEIGHT_FRACTION) - CHROME_ROWS - BROWSER_FRAME_ROWS;
+		this.#browser.setMaxVisible(Math.max(MIN_VISIBLE, listBudget));
+
+		const inner = Math.max(1, width - 4);
+		const status = this.#configError
+			? theme.fg("error", ` ${this.#configError}`)
+			: theme.fg("muted", ` ${this.#roleMode ? QUICK_ROLE_STATUS_HINT : STATUS_HINT}`);
+
+		const out: string[] = [];
+		out.push(topBorder(width, "Switch Model"));
+		out.push(row(status, width));
+		for (const line of this.#browser.render(inner)) {
+			out.push(row(line, width));
+		}
+		out.push(row(theme.fg("dim", this.#roleMode ? QUICK_ROLE_FOOTER_HINT : FOOTER_HINT), width));
+		out.push(bottomBorder(width));
+		return out;
+	}
+}