@gajae-code/coding-agent 0.18.11 → 0.19.0

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

@@ -9,6 +9,7 @@ import {
 import {
 	Container,
 	fuzzyFilter,
+	fuzzyMatch,
 	getKeybindings,
 	Input,
 	matchesKey,
@@ -99,6 +100,150 @@ function computeModelRank(model: Model, roles: Record<string, RoleAssignment | u
 	return roles.default && modelsAreEqual(roles.default.model, model) ? 0 : 1;
 }
 
+/**
+ * Compute and assign fuzzy scores to model items based on a query.
+ * Scores are based on fuzzy matching against the model's searchable text.
+ */
+function fuzzyTokensScore(query: string, text: string): number | undefined {
+	const tokens = query
+		.trim()
+		.split(/\s+/)
+		.filter(token => token.length > 0);
+	if (tokens.length === 0) return undefined;
+	let total = 0;
+	for (const token of tokens) {
+		const match = fuzzyMatch(token, text);
+		if (!match.matches) return undefined;
+		total += match.score;
+	}
+	return total;
+}
+
+export function assignFuzzyScoresToModels(items: ModelItem[], query: string): void {
+	if (!query.trim()) {
+		for (const item of items) item.fuzzyScore = undefined;
+		return;
+	}
+	for (const item of items) {
+		// Overwrite every item so a raw-query miss cannot retain an earlier score.
+		item.fuzzyScore = fuzzyTokensScore(query, `${item.id} ${item.provider}`);
+	}
+}
+
+/**
+ * Compute and assign fuzzy scores to canonical model items based on a query.
+ */
+export function assignFuzzyScoresToCanonicalModels(items: CanonicalModelItem[], query: string): void {
+	if (!query.trim()) {
+		for (const item of items) item.fuzzyScore = undefined;
+		return;
+	}
+	for (const item of items) {
+		item.fuzzyScore = fuzzyTokensScore(query, item.searchText);
+	}
+}
+
+export interface RankedModelOrderContext {
+	roles: RoleAssignments;
+	mruIndex: ReadonlyMap<string, number>;
+	providerAuthStateById: ReadonlyMap<string, ProviderAuthState>;
+}
+
+const MODEL_DATE_RE = /-(\d{8})$/;
+const MODEL_LATEST_RE = /-latest$/;
+
+/** Ranking shared by the provider view: fuzzy quality, default, MRU, provider, recency. */
+export function compareModelItemsForRanking(a: ModelItem, b: ModelItem, context: RankedModelOrderContext): number {
+	const { roles, mruIndex, providerAuthStateById } = context;
+	const aHasFuzzyScore = a.fuzzyScore !== undefined;
+	const bHasFuzzyScore = b.fuzzyScore !== undefined;
+	if (aHasFuzzyScore || bHasFuzzyScore) {
+		const aScore = a.fuzzyScore ?? Number.MAX_SAFE_INTEGER;
+		const bScore = b.fuzzyScore ?? Number.MAX_SAFE_INTEGER;
+		if (aScore !== bScore) return aScore - bScore;
+		// Ties keep the established default-first, then MRU/provider ordering.
+	}
+
+	const aRank = computeModelRank(a.model, roles);
+	const bRank = computeModelRank(b.model, roles);
+	if (aRank !== bRank) return aRank - bRank;
+
+	const aMru = mruIndex.get(a.selector) ?? Number.MAX_SAFE_INTEGER;
+	const bMru = mruIndex.get(b.selector) ?? Number.MAX_SAFE_INTEGER;
+	if (aMru !== bMru) return aMru - bMru;
+
+	const providerCmp = compareRankedProviders(
+		{ id: a.provider, label: a.provider, authState: providerAuthStateById.get(a.provider) ?? "none" },
+		{ id: b.provider, label: b.provider, authState: providerAuthStateById.get(b.provider) ?? "none" },
+	);
+	if (providerCmp !== 0) return providerCmp;
+
+	// Priority field (lower = better, e.g. OpenAI code backend priority values)
+	const aPri = a.model.priority ?? Number.MAX_SAFE_INTEGER;
+	const bPri = b.model.priority ?? Number.MAX_SAFE_INTEGER;
+	if (aPri !== bPri) return aPri - bPri;
+
+	// Version number descending (higher version = better model)
+	const aVer = extractVersionNumber(a.id);
+	const bVer = extractVersionNumber(b.id);
+	if (aVer !== bVer) return bVer - aVer;
+
+	const aIsLatest = MODEL_LATEST_RE.test(a.id);
+	const bIsLatest = MODEL_LATEST_RE.test(b.id);
+	const aDate = a.id.match(MODEL_DATE_RE)?.[1] ?? "";
+	const bDate = b.id.match(MODEL_DATE_RE)?.[1] ?? "";
+
+	const aHasRecency = aIsLatest || aDate !== "";
+	const bHasRecency = bIsLatest || bDate !== "";
+	if (aHasRecency !== bHasRecency) return aHasRecency ? -1 : 1;
+	if (!aHasRecency) return a.id.localeCompare(b.id);
+	if (aIsLatest !== bIsLatest) return aIsLatest ? -1 : 1;
+	if (aDate && bDate) return bDate.localeCompare(aDate);
+	return aIsLatest ? -1 : bIsLatest ? 1 : a.id.localeCompare(b.id);
+}
+
+/** Ranking shared by the canonical view: fuzzy quality, default, MRU, provider, then id. */
+export function compareCanonicalModelItemsForRanking(
+	a: CanonicalModelItem,
+	b: CanonicalModelItem,
+	context: RankedModelOrderContext,
+): number {
+	const { roles, mruIndex, providerAuthStateById } = context;
+	const aHasFuzzyScore = a.fuzzyScore !== undefined;
+	const bHasFuzzyScore = b.fuzzyScore !== undefined;
+	if (aHasFuzzyScore || bHasFuzzyScore) {
+		const aScore = a.fuzzyScore ?? Number.MAX_SAFE_INTEGER;
+		const bScore = b.fuzzyScore ?? Number.MAX_SAFE_INTEGER;
+		if (aScore !== bScore) return aScore - bScore;
+		// Ties keep the established default-first, then MRU/provider ordering.
+	}
+
+	const aRank = computeModelRank(a.model, roles);
+	const bRank = computeModelRank(b.model, roles);
+	if (aRank !== bRank) return aRank - bRank;
+
+	const aKey = `${a.model.provider}/${a.model.id}`;
+	const bKey = `${b.model.provider}/${b.model.id}`;
+	const aMru = mruIndex.get(aKey) ?? Number.MAX_SAFE_INTEGER;
+	const bMru = mruIndex.get(bKey) ?? Number.MAX_SAFE_INTEGER;
+	if (aMru !== bMru) return aMru - bMru;
+
+	const providerCmp = compareRankedProviders(
+		{
+			id: a.model.provider,
+			label: a.model.provider,
+			authState: providerAuthStateById.get(a.model.provider) ?? "none",
+		},
+		{
+			id: b.model.provider,
+			label: b.model.provider,
+			authState: providerAuthStateById.get(b.model.provider) ?? "none",
+		},
+	);
+	if (providerCmp !== 0) return providerCmp;
+	return a.id.localeCompare(b.id);
+}
+
 interface ModelItem {
 	kind: "provider";
 	provider: string;
@@ -107,6 +252,7 @@ interface ModelItem {
 	selector: string;
 	thinkingLevel?: ThinkingLevel;
 	explicitThinkingLevel?: boolean;
+	fuzzyScore?: number;
 }
 
 interface CanonicalModelItem {
@@ -120,6 +266,7 @@ interface CanonicalModelItem {
 	compactSearchText: string;
 	thinkingLevel?: ThinkingLevel;
 	explicitThinkingLevel?: boolean;
+	fuzzyScore?: number;
 }
 
 type ScopedModelItem = ScopedModelSelection;
@@ -646,7 +793,7 @@ export class ModelSelectorComponent extends Container {
 			this.#configuredDefaultChain ?? normalizeModelSelectorValue(this.#settings.getModelRole("default"));
 		if (configuredChain.length < 2) return false;
 
-		const allModels = this.#modelRegistry.getAll();
+		const allModels = this.#modelRegistry.getAll(this.#authSessionId);
 		const matchPreferences = { usageOrder: this.#settings.getStorage()?.getModelUsageOrder() };
 		return configuredChain.slice(1).some(selector => {
 			const resolved = resolveModelRoleValue(selector, allModels, {
@@ -662,7 +809,7 @@ export class ModelSelectorComponent extends Container {
 
 	#loadRoleModels(): RoleAssignments {
 		const roles: RoleAssignments = {};
-		const allModels = this.#modelRegistry.getAll();
+		const allModels = this.#modelRegistry.getAll(this.#authSessionId);
 		const matchPreferences = { usageOrder: this.#settings.getStorage()?.getModelUsageOrder() };
 		const agentModelOverrides = this.#settings.get("task.agentModelOverrides");
 		const activeProfile = this.#activeModelProfile
@@ -738,7 +885,6 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#sortModels(models: ModelItem[], roles: RoleAssignments = this.#roles): void {
-		// Sort: default-tagged model first, then MRU, then provider ranking
 		const mruOrder = this.#settings.getStorage()?.getModelUsageOrder() ?? [];
 		const mruIndex = new Map(mruOrder.map((key, i) => [key, i]));
 		const providerAuthStateById = new Map<string, ProviderAuthState>();
@@ -747,74 +893,7 @@ export class ModelSelectorComponent extends Container {
 				providerAuthStateById.set(item.provider, this.#resolveProviderAuthState(item.provider));
 			}
 		}
-
-		const modelRank = (item: ModelItem) => computeModelRank(item.model, roles);
-
-		const dateRe = /-(\d{8})$/;
-		const latestRe = /-latest$/;
-
-		models.sort((a, b) => {
-			const aKey = a.selector;
-			const bKey = b.selector;
-
-			const aRank = modelRank(a);
-			const bRank = modelRank(b);
-			if (aRank !== bRank) return aRank - bRank;
-
-			// Then MRU order (models in mruIndex come before those not in it)
-			const aMru = mruIndex.get(aKey) ?? Number.MAX_SAFE_INTEGER;
-			const bMru = mruIndex.get(bKey) ?? Number.MAX_SAFE_INTEGER;
-			if (aMru !== bMru) return aMru - bMru;
-
-			// By provider, then recency within provider
-			const providerCmp = compareRankedProviders(
-				{
-					id: a.provider,
-					label: a.provider,
-					authState: providerAuthStateById.get(a.provider) ?? "none",
-				},
-				{
-					id: b.provider,
-					label: b.provider,
-					authState: providerAuthStateById.get(b.provider) ?? "none",
-				},
-			);
-			if (providerCmp !== 0) return providerCmp;
-
-			// Priority field (lower = better, e.g. OpenAI code backend priority values)
-			const aPri = a.model.priority ?? Number.MAX_SAFE_INTEGER;
-			const bPri = b.model.priority ?? Number.MAX_SAFE_INTEGER;
-			if (aPri !== bPri) return aPri - bPri;
-
-			// Version number descending (higher version = better model)
-			const aVer = extractVersionNumber(a.id);
-			const bVer = extractVersionNumber(b.id);
-			if (aVer !== bVer) return bVer - aVer;
-
-			const aIsLatest = latestRe.test(a.id);
-			const bIsLatest = latestRe.test(b.id);
-			const aDate = a.id.match(dateRe)?.[1] ?? "";
-			const bDate = b.id.match(dateRe)?.[1] ?? "";
-
-			// Both have dates or latest tags — sort by recency
-			const aHasRecency = aIsLatest || aDate !== "";
-			const bHasRecency = bIsLatest || bDate !== "";
-
-			// Models with recency info come before those without
-			if (aHasRecency !== bHasRecency) return aHasRecency ? -1 : 1;
-
-			// If neither has recency info, fall back to alphabetical
-			if (!aHasRecency) return a.id.localeCompare(b.id);
-
-			// -latest always sorts first within recency group
-			if (aIsLatest !== bIsLatest) return aIsLatest ? -1 : 1;
-
-			// Both have dates — descending (newest first)
-			if (aDate && bDate) return bDate.localeCompare(aDate);
-
-			// One has date, other is latest — latest first
-			return aIsLatest ? -1 : bIsLatest ? 1 : a.id.localeCompare(b.id);
-		});
+		models.sort((a, b) => compareModelItemsForRanking(a, b, { roles, mruIndex, providerAuthStateById }));
 	}
 
 	#sortCanonicalModels(models: CanonicalModelItem[], roles: RoleAssignments = this.#roles): void {
@@ -826,34 +905,7 @@ export class ModelSelectorComponent extends Container {
 				providerAuthStateById.set(item.model.provider, this.#resolveProviderAuthState(item.model.provider));
 			}
 		}
-
-		const modelRank = (item: CanonicalModelItem) => computeModelRank(item.model, roles);
-
-		models.sort((a, b) => {
-			const aRank = modelRank(a);
-			const bRank = modelRank(b);
-			if (aRank !== bRank) return aRank - bRank;
-
-			const aMru = mruIndex.get(`${a.model.provider}/${a.model.id}`) ?? Number.MAX_SAFE_INTEGER;
-			const bMru = mruIndex.get(`${b.model.provider}/${b.model.id}`) ?? Number.MAX_SAFE_INTEGER;
-			if (aMru !== bMru) return aMru - bMru;
-
-			const providerCmp = compareRankedProviders(
-				{
-					id: a.model.provider,
-					label: a.model.provider,
-					authState: providerAuthStateById.get(a.model.provider) ?? "none",
-				},
-				{
-					id: b.model.provider,
-					label: b.model.provider,
-					authState: providerAuthStateById.get(b.model.provider) ?? "none",
-				},
-			);
-			if (providerCmp !== 0) return providerCmp;
-
-			return a.id.localeCompare(b.id);
-		});
+		models.sort((a, b) => compareCanonicalModelItemsForRanking(a, b, { roles, mruIndex, providerAuthStateById }));
 	}
 
 	#buildScopedModelItems(): ModelItem[] {
@@ -869,7 +921,7 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#buildAvailableModelItems(): ModelItem[] {
-		return this.#modelRegistry.getAvailable().map((model: Model) => ({
+		return this.#modelRegistry.getAvailable(this.#authSessionId).map((model: Model) => ({
 			kind: "provider",
 			provider: model.provider,
 			id: model.id,
@@ -1205,10 +1257,12 @@ export class ModelSelectorComponent extends Container {
 							? alphaFiltered
 							: baseCanonicalModels;
 				const fuzzyMatches = fuzzyFilter(fuzzySource, query, ({ searchText }) => searchText);
+				assignFuzzyScoresToCanonicalModels(fuzzyMatches, query);
 				this.#sortCanonicalModels(fuzzyMatches);
 				this.#filteredCanonicalModels = fuzzyMatches;
 			} else {
 				const fuzzyMatches = fuzzyFilter(baseModels, query, ({ id, provider }) => `${id} ${provider}`);
+				assignFuzzyScoresToModels(fuzzyMatches, query);
 				this.#sortModels(fuzzyMatches);
 				this.#filteredModels = fuzzyMatches;
 			}
@@ -1256,7 +1310,7 @@ export class ModelSelectorComponent extends Container {
 			if (isInheritedRoleSelector(configuredSelector)) continue;
 			const selectors = resolveConfiguredModelPatterns(configuredSelector, this.#settings);
 			for (const selector of selectors.length > 0 ? selectors : [configuredSelector]) {
-				const resolved = resolveModelRoleValue(selector, this.#modelRegistry.getAll(), {
+				const resolved = resolveModelRoleValue(selector, this.#modelRegistry.getAll(this.#authSessionId), {
 					settings: this.#settings,
 					matchPreferences: { usageOrder: this.#settings.getStorage()?.getModelUsageOrder() },
 					modelRegistry: this.#modelRegistry,
@@ -1369,7 +1423,7 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#getProfileAvailableModels(): Model[] {
-		return this.#modelRegistry.getAvailable();
+		return this.#modelRegistry.getAvailable(this.#authSessionId);
 	}
 
 	#createProfileResolutionRegistry(availableModels: readonly Model[]) {
@@ -2108,7 +2162,7 @@ export class ModelSelectorComponent extends Container {
 		for (const role of PROFILE_ROLE_PREVIEW_ORDER) {
 			const selector = profile.modelMapping[role];
 			if (!selector) continue;
-			const resolved = resolveModelRoleValue(selector, this.#modelRegistry.getAll(), {
+			const resolved = resolveModelRoleValue(selector, this.#modelRegistry.getAll(this.#authSessionId), {
 				settings: this.#settings,
 				matchPreferences: { usageOrder: this.#settings.getStorage()?.getModelUsageOrder() },
 				modelRegistry: this.#modelRegistry,

package/src/modes/components/settings-selector.ts

@@ -108,9 +108,9 @@ class SelectSubmenu extends Container {
 		description: string,
 		options: ReadonlyArray<SelectItem>,
 		currentValue: string,
-		onSelect: (value: string) => void,
-		onCancel: () => void,
-		onSelectionChange?: (value: string) => void | Promise<void>,
+		private readonly onSelect: (value: string) => void,
+		private readonly onCancel: () => void,
+		private readonly onSelectionChange?: (value: string) => void | Promise<void>,
 		private readonly getPreview?: () => string,
 	) {
 		super();
@@ -137,46 +137,54 @@ class SelectSubmenu extends Container {
 		// Spacer
 		this.addChild(new Spacer(1));
 
-		// Select list
-		this.#selectList = new SelectList(options, Math.min(options.length, 10), () => getSelectListTheme());
-
-		// Pre-select current value
-		const currentIndex = options.findIndex(o => o.value === currentValue);
-		if (currentIndex !== -1) {
-			this.#selectList.setSelectedIndex(currentIndex);
-		}
-
-		this.#selectList.onSelect = item => {
-			onSelect(item.value);
-		};
+		this.#selectList = this.#createSelectList(options, currentValue);
+		this.addChild(this.#selectList);
 
-		this.#selectList.onCancel = onCancel;
+		// Hint
+		this.addChild(new Spacer(1));
+		this.addChild(
+			new DynamicThemeText(() => theme.fg("dim", uiString(settings.get("ui.language"), "settings.selectHint"))),
+		);
+	}
 
-		if (onSelectionChange) {
-			this.#selectList.onSelectionChange = item => {
+	#createSelectList(options: ReadonlyArray<SelectItem>, selectedValue?: string): SelectList {
+		const selectList = new SelectList(options, Math.min(options.length, 10), () => getSelectListTheme());
+		const selectedIndex = options.findIndex(option => option.value === selectedValue);
+		if (selectedIndex !== -1) selectList.setSelectedIndex(selectedIndex);
+		selectList.onSelect = item => this.onSelect(item.value);
+		selectList.onCancel = this.onCancel;
+		if (this.onSelectionChange) {
+			selectList.onSelectionChange = item => {
 				const requestId = ++this.#previewUpdateRequestId;
-				const result = onSelectionChange(item.value);
+				const result = this.onSelectionChange?.(item.value);
 				if (result && typeof (result as Promise<void>).then === "function") {
 					void (result as Promise<void>).finally(() => {
-						if (requestId === this.#previewUpdateRequestId) {
-							this.#updatePreview();
-						}
+						if (requestId === this.#previewUpdateRequestId) this.#updatePreview();
 					});
 					return;
 				}
-				if (requestId === this.#previewUpdateRequestId) {
-					this.#updatePreview();
-				}
+				if (requestId === this.#previewUpdateRequestId) this.#updatePreview();
 			};
 		}
+		return selectList;
+	}
 
-		this.addChild(this.#selectList);
+	refreshOptions(options: ReadonlyArray<SelectItem>, retainMissingSelection = false): void {
+		const previous = this.#selectList;
+		const selectedItem = previous.getSelectedItem();
+		if (retainMissingSelection && selectedItem && !options.some(option => option.value === selectedItem.value)) {
+			const label = selectedItem.label.endsWith(" (unavailable)")
+				? selectedItem.label
+				: `${selectedItem.label} (unavailable)`;
+			options = [...options, { ...selectedItem, label }];
+		}
+		const selectedValue = selectedItem?.value;
+		this.#selectList = this.#createSelectList(options, selectedValue);
+		this.replaceChildren(this.children.map(child => (child === previous ? this.#selectList : child)));
+	}
 
-		// Hint
-		this.addChild(new Spacer(1));
-		this.addChild(
-			new DynamicThemeText(() => theme.fg("dim", uiString(settings.get("ui.language"), "settings.selectHint"))),
-		);
+	refreshPreview(): void {
+		this.#updatePreview();
 	}
 
 	#updatePreview(): void {
@@ -1528,6 +1536,10 @@ export interface SettingsCallbacks {
 	onPetCommit?: (mode: string) => boolean;
 	/** Called for status line preview while configuring */
 	onStatusLinePreview?: (settings: StatusLinePreviewSettings) => void;
+	/** Called when a status-line submenu begins an uncommitted preview. */
+	onStatusLinePreviewStart?: () => void;
+	/** Called when a status-line preview is committed, cancelled, or disposed. */
+	onStatusLinePreviewEnd?: () => void;
 	/** Get current rendered status line for inline preview */
 	getStatusLinePreview?: (width?: number) => string;
 	/** Render a status-line preview for supplied draft settings without mutating the live status line. */
@@ -1582,6 +1594,8 @@ export class SettingsSelectorComponent extends Container {
 	#currentTabId: SettingTab | "plugins" | "gjc-bundles" = "appearance";
 	#textInputActive = false;
 	#activeProviderOrderEditor: Container | null = null;
+	#activeSelectSubmenu: SelectSubmenu | null = null;
+	#activeModelProfileSubmenu: SelectSubmenu | null = null;
 
 	constructor(
 		private readonly context: SettingsRuntimeContext,
@@ -1634,9 +1648,15 @@ export class SettingsSelectorComponent extends Container {
 	}
 
 	#switchToTab(tabId: SettingTab | "plugins" | "gjc-bundles"): void {
+		if (this.#currentTabId === "appearance" && tabId !== "appearance") {
+			this.callbacks.onStatusLinePreviewEnd?.();
+		}
 		if (this.#currentTabId === "notifications" && tabId !== "notifications" && !this.#disposeNotificationsEditor()) {
 			return;
 		}
+		this.#activeSelectSubmenu?.dispose();
+		this.#activeSelectSubmenu = null;
+		this.#activeModelProfileSubmenu = null;
 		// Release an open provider-order editor (and its context subscriptions)
 		// before switching tabs; the submenu's done() never runs on tab change,
 		// so without this the abandoned editor's listeners would survive.
@@ -1833,6 +1853,18 @@ export class SettingsSelectorComponent extends Container {
 		// Preview handlers
 		let onPreview: ((value: string) => void | Promise<void>) | undefined;
 		let onPreviewCancel: (() => void) | undefined;
+		let onPreviewEnd: (() => void) | undefined;
+		let statusLinePreviewStarted = false;
+		const startStatusLinePreview = (): void => {
+			if (statusLinePreviewStarted) return;
+			statusLinePreviewStarted = true;
+			this.callbacks.onStatusLinePreviewStart?.();
+		};
+		const endStatusLinePreview = (): void => {
+			if (!statusLinePreviewStarted) return;
+			statusLinePreviewStarted = false;
+			this.callbacks.onStatusLinePreviewEnd?.();
+		};
 
 		if (def.path === "theme.dark" || def.path === "theme.light") {
 			const activeThemeBeforePreview = getCurrentThemeName() ?? currentValue;
@@ -1844,6 +1876,7 @@ export class SettingsSelectorComponent extends Container {
 			};
 		} else if (def.path === "statusLine.preset") {
 			onPreview = value => {
+				startStatusLinePreview();
 				const presetDef = getPreset(value as StatusLinePreset);
 				this.callbacks.onStatusLinePreview?.({
 					preset: value as StatusLinePreset,
@@ -1854,6 +1887,7 @@ export class SettingsSelectorComponent extends Container {
 				});
 				this.#updateStatusPreview();
 			};
+			onPreviewEnd = endStatusLinePreview;
 			onPreviewCancel = () => {
 				const currentPreset = settings.get("statusLine.preset");
 				const presetDef = getPreset(currentPreset);
@@ -1880,9 +1914,11 @@ export class SettingsSelectorComponent extends Container {
 			};
 		} else if (def.path === "statusLine.separator") {
 			onPreview = value => {
+				startStatusLinePreview();
 				this.callbacks.onStatusLinePreview?.({ separator: value as StatusLineSeparatorStyle });
 				this.#updateStatusPreview();
 			};
+			onPreviewEnd = endStatusLinePreview;
 			onPreviewCancel = () => {
 				const separator = settings.get("statusLine.separator");
 				this.callbacks.onStatusLinePreview?.({ separator, previewHighlightSegment: undefined });
@@ -1890,9 +1926,11 @@ export class SettingsSelectorComponent extends Container {
 			};
 		} else if (def.path === "statusLine.maxRows") {
 			onPreview = value => {
+				startStatusLinePreview();
 				this.callbacks.onStatusLinePreview?.({ maxRows: Number(value) });
 				this.#updateStatusPreview();
 			};
+			onPreviewEnd = endStatusLinePreview;
 			onPreviewCancel = () => {
 				this.callbacks.onStatusLinePreview?.({
 					maxRows: settings.get("statusLine.maxRows"),
@@ -1914,7 +1952,14 @@ export class SettingsSelectorComponent extends Container {
 		const isThemeSetting = def.path === "theme.dark" || def.path === "theme.light";
 		const getPreview = isThemeSetting ? this.callbacks.getStatusLinePreview : undefined;
 
-		return new SelectSubmenu(
+		let submenu: SelectSubmenu;
+		const finish = (value?: string): void => {
+			if (this.#activeSelectSubmenu === submenu) this.#activeSelectSubmenu = null;
+			if (this.#activeModelProfileSubmenu === submenu) this.#activeModelProfileSubmenu = null;
+			submenu.dispose();
+			done(value);
+		};
+		submenu = new SelectSubmenu(
 			title,
 			description,
 			options,
@@ -1922,7 +1967,7 @@ export class SettingsSelectorComponent extends Container {
 			value => {
 				if (def.path === "modelProfile.default") {
 					this.callbacks.onChange(def.path, value);
-					done(value);
+					finish(value);
 					return;
 				}
 				if (def.path === "theme.dark" || def.path === "theme.light") {
@@ -1937,7 +1982,7 @@ export class SettingsSelectorComponent extends Container {
 					}
 					if (!this.callbacks.onThemeCommit) return;
 					void this.callbacks.onThemeCommit(def.path, value, currentValue).then(accepted => {
-						if (accepted) done(value);
+						if (accepted) finish(value);
 					});
 					return;
 				}
@@ -1953,21 +1998,26 @@ export class SettingsSelectorComponent extends Container {
 					) {
 						return;
 					}
-					done(accepted ? value : undefined);
+					finish(accepted ? value : undefined);
 					return;
 				}
 				if (!commitInteractiveSettings(this.callbacks, () => this.#setSettingValue(def.path, value))) return;
 				this.callbacks.onChange(def.path, value);
 				if (def.path === "ui.language") this.#refreshTabBarLanguage();
-				done(value);
+				onPreviewEnd?.();
+				finish(value);
 			},
 			() => {
 				onPreviewCancel?.();
-				done();
+				onPreviewEnd?.();
+				finish();
 			},
 			onPreview,
 			getPreview,
 		);
+		this.#activeSelectSubmenu = submenu;
+		if (def.path === "modelProfile.default") this.#activeModelProfileSubmenu = submenu;
+		return submenu;
 	}
 
 	/**
@@ -2277,8 +2327,24 @@ export class SettingsSelectorComponent extends Container {
 		return (this.#currentList || this.#pluginComponent || this.#gjcBundleComponent || this.#notificationsEditor)!;
 	}
 
+	/** Refresh saved rows and model-profile choices without replacing active editors. */
+	refreshFromConfiguration(availableModelProfiles: readonly string[]): void {
+		this.context.availableModelProfiles = [...availableModelProfiles];
+		this.#refreshCurrentTabItems();
+		this.#activeModelProfileSubmenu?.refreshOptions(
+			this.context.availableModelProfiles.map(profile => ({ value: profile, label: profile })),
+			true,
+		);
+		this.#activeSelectSubmenu?.refreshPreview();
+		this.#updateStatusPreview();
+	}
+
 	override dispose(): void {
 		if (this.#notificationsEditor?.navigationLocked) return;
+		this.callbacks.onStatusLinePreviewEnd?.();
+		this.#activeSelectSubmenu?.dispose();
+		this.#activeSelectSubmenu = null;
+		this.#activeModelProfileSubmenu = null;
 		// Release an open provider-order editor (and its context subscriptions)
 		// when the whole selector is torn down without a normal close.
 		this.#activeProviderOrderEditor?.dispose();

package/src/modes/components/welcome.ts

@@ -3,6 +3,7 @@ import { APP_NAME } from "@gajae-code/utils";
 import { formatBuildLabel } from "../../build-metadata";
 import { formatKeyHint, type KeyDisplayContext } from "../../config/keybindings";
 import { type ThemeColor, theme } from "../../modes/theme/theme";
+import { sanitizeStatusText } from "../shared";
 
 export interface RecentSession {
 	name: string;
@@ -536,7 +537,8 @@ export class WelcomeComponent implements Component {
 	}
 
 	#pill(icon: string, text: string, color: ThemeColor): string {
-		return `${theme.fg("borderMuted", "[")} ${theme.fg(color, icon)} ${theme.fg("muted", text)} ${theme.fg(
+		const safeText = sanitizeStatusText(text);
+		return `${theme.fg("borderMuted", "[")} ${theme.fg(color, icon)} ${theme.fg("muted", safeText)} ${theme.fg(
 			"borderMuted",
 			"]",
 		)}`;