@oh-my-pi/pi-tui 18.7.0 → 18.8.0

package/src/overlays/model-browser.ts

@@ -27,7 +27,7 @@ import {
 	parseConfiguredThinkingLevel,
 } from "../thinking";
 import { thinkingLevelGlyph } from "../render/render-utils";
-import { type ThemeColor, theme } from "../theme/theme";
+import { type Theme, type ThemeColor, theme } from "../theme/theme";
 import {
 	matchesSelectCancel,
 	matchesSelectDown,
@@ -887,6 +887,24 @@ function metaColumnsWidth(widths: readonly number[]): number {
 /** What the per-row perf column shows at the current width. */
 type PerfMode = "off" | "tps" | "full";
 
+/** A measured perf aggregate and, when it came from one, its service tier. */
+interface MeasuredPerf {
+	perf: ModelBrowserPerf;
+	tier?: string;
+}
+
+/** Plain catalog metric cells of one row and their terminal widths, valid for one model and theme. */
+interface MetricCells {
+	model: Model;
+	theme: Theme;
+	intelligence: string;
+	intelligenceWidth: number;
+	ctx: string;
+	ctxWidth: number;
+	cost: string;
+	costWidth: number;
+}
+
 /**
  * The reusable browser component. Renders a fixed-height block
  * (`maxVisible + LIST_ROW_START + DETAIL_ROWS` rows) so host mouse geometry
@@ -907,6 +925,14 @@ export class ModelBrowser implements Component {
 	/** Ranker for the menu's current item array; rebuilt when items or affinity change. */
 	#ranker?: { source: readonly ModelBrowserItem[]; ranker: ModelItemRanker };
 	#perf: ReadonlyMap<string, ModelBrowserPerf> = new Map();
+	/** Fastest tier aggregate per selector in {@link #perf}, built on the first lookup miss. */
+	#perfTiers:
+		| { perf: ReadonlyMap<string, ModelBrowserPerf>; size: number; best: Map<string, MeasuredPerf> }
+		| undefined;
+	/** Theme-formatted catalog metric cells per item; rebuilt when the item's model or the theme changes. */
+	#metricCells = new WeakMap<ModelBrowserItem, MetricCells>();
+	/** Non-separator items of the last ranked visible list, for {@link queryMatches}. */
+	#queryMatches: { visible: readonly ModelBrowserItem[]; matches: readonly ModelBrowserItem[] } | undefined;
 	#hoveredIndex: number | null = null;
 	#maxVisible = 10;
 	#showProvider: boolean;
@@ -1075,6 +1101,22 @@ export class ModelBrowser implements Component {
 		return this.#menu.visibleItems.length;
 	}
 
+	/**
+	 * Base items matching the live query, best first, without the separator
+	 * row; undefined while the query is blank. Reuses the ranking the list
+	 * already ran, so hosts can derive match counts without ranking again.
+	 */
+	get queryMatches(): readonly ModelBrowserItem[] | undefined {
+		if (!this.query.trim()) return undefined;
+		const visible = this.#menu.visibleItems;
+		let cached = this.#queryMatches;
+		if (cached?.visible !== visible) {
+			cached = { visible, matches: visible.filter(item => !this.#isDisabled(item)) };
+			this.#queryMatches = cached;
+		}
+		return cached.matches;
+	}
+
 	/** Move selection to `selector`; false when it is not in the current view. */
 	selectSelector(selector: string): boolean {
 		if (!this.#menu.setSelectedKey(selector)) return false;
@@ -1339,7 +1381,8 @@ export class ModelBrowser implements Component {
 	 * on a non-default tier still shows its real speed. `tier` is set whenever
 	 * the numbers come from a tier aggregate, for the caller to label.
 	 */
-	#perfFor(item: ModelBrowserItem): { perf: ModelBrowserPerf; tier?: string } | undefined {
+	#perfFor(item: ModelBrowserItem): MeasuredPerf | undefined {
+		if (this.#perf.size === 0) return undefined;
 		const tier = this.#settings.serviceTierFor?.(item.model);
 		if (tier) {
 			const tiered = this.#perf.get(`${item.selector}@${tier}`);
@@ -1347,13 +1390,48 @@ export class ModelBrowser implements Component {
 		}
 		const standard = this.#perf.get(item.selector);
 		if (standard) return { perf: standard };
-		const prefix = `${item.selector}@`;
-		let best: { perf: ModelBrowserPerf; tier: string } | undefined;
-		for (const [key, perf] of this.#perf) {
-			if (!key.startsWith(prefix)) continue;
-			if (!best || perf.tps > best.perf.tps) best = { perf, tier: key.slice(prefix.length) };
+		return this.#fastestTierPerf(item.selector);
+	}
+
+	/** Fastest `selector@tier` aggregate (first wins ties), from an index built once per perf map. */
+	#fastestTierPerf(selector: string): MeasuredPerf | undefined {
+		const perfMap = this.#perf;
+		let index = this.#perfTiers;
+		if (index?.perf !== perfMap || index.size !== perfMap.size) {
+			const best = new Map<string, MeasuredPerf>();
+			for (const [key, perf] of perfMap) {
+				// Every `@` may end the selector: `a@b@t` is tier `b@t` of `a` and tier `t` of `a@b`.
+				for (let at = key.indexOf("@"); at >= 0; at = key.indexOf("@", at + 1)) {
+					const owner = key.slice(0, at);
+					const current = best.get(owner);
+					if (!current || perf.tps > current.perf.tps) best.set(owner, { perf, tier: key.slice(at + 1) });
+				}
+			}
+			index = { perf: perfMap, size: perfMap.size, best };
+			this.#perfTiers = index;
 		}
-		return best;
+		return index.best.get(selector);
+	}
+
+	/** Catalog metric cells of a row, formatted once per model and theme. */
+	#metricCellsFor(item: ModelBrowserItem): MetricCells {
+		const cached = this.#metricCells.get(item);
+		if (cached?.model === item.model && cached.theme === theme) return cached;
+		const intelligence = formatIntelligence(item.model);
+		const ctx = formatContext(item.model);
+		const cost = formatCostPair(item.model);
+		const cells: MetricCells = {
+			model: item.model,
+			theme,
+			intelligence,
+			intelligenceWidth: visibleWidth(intelligence),
+			ctx,
+			ctxWidth: visibleWidth(ctx),
+			cost,
+			costWidth: visibleWidth(cost),
+		};
+		this.#metricCells.set(item, cells);
+		return cells;
 	}
 
 	/** Measured TPS/TTFT, falling back to the catalog TPS as an estimated `~118t/s`. */
@@ -1381,7 +1459,8 @@ export class ModelBrowser implements Component {
 		costWidth: number,
 		intelligenceWidth: number,
 		perfWidth: number,
-		perfMode: PerfMode,
+		metrics: MetricCells,
+		perfCell: string,
 	): string {
 		if (item.id === "separator") {
 			const dashCount = Math.max(0, width - 4);
@@ -1405,11 +1484,10 @@ export class ModelBrowser implements Component {
 
 		// Metric columns collapse when empty or when the row needs room for its name.
 		const cols: string[] = [];
-		if (intelligenceWidth > 0)
-			cols.push(theme.fg("dim", padLeftVisible(formatIntelligence(item.model), intelligenceWidth)));
-		if (perfWidth > 0) cols.push(theme.fg("dim", padLeftVisible(this.#perfCell(item, perfMode), perfWidth)));
-		if (ctxWidth > 0) cols.push(theme.fg("dim", padLeftVisible(formatContext(item.model), ctxWidth)));
-		if (costWidth > 0) cols.push(theme.fg("dim", padLeftVisible(formatCostPair(item.model), costWidth)));
+		if (intelligenceWidth > 0) cols.push(theme.fg("dim", padLeftVisible(metrics.intelligence, intelligenceWidth)));
+		if (perfWidth > 0) cols.push(theme.fg("dim", padLeftVisible(perfCell, perfWidth)));
+		if (ctxWidth > 0) cols.push(theme.fg("dim", padLeftVisible(metrics.ctx, ctxWidth)));
+		if (costWidth > 0) cols.push(theme.fg("dim", padLeftVisible(metrics.cost, costWidth)));
 		const metaWidth = metaColumnsWidth([intelligenceWidth, perfWidth, ctxWidth, costWidth]);
 		const available = Math.max(1, width - metaWidth - (cols.length > 0 ? 1 : 0));
 		left = truncateToWidth(left, available);
@@ -1515,15 +1593,22 @@ export class ModelBrowser implements Component {
 			const perfMode: PerfMode = width >= PERF_FULL_MIN_WIDTH ? "full" : width >= PERF_TPS_MIN_WIDTH ? "tps" : "off";
 			let intelligenceWidth = 0;
 			let perfWidth = 0;
+			const visible = this.#menu.visibleItems;
+			const windowMetrics: MetricCells[] = [];
+			const windowPerf: string[] = [];
 			for (let i = startIndex; i < endIndex; i++) {
-				const item = this.#menu.visibleItems[i];
+				const item = visible[i];
 				if (!item) continue;
-				ctxWidth = Math.max(ctxWidth, visibleWidth(formatContext(item.model)));
-				costWidth = Math.max(costWidth, visibleWidth(formatCostPair(item.model)));
+				const metrics = this.#metricCellsFor(item);
+				const perfCell = this.#perfCell(item, perfMode);
+				windowMetrics[i - startIndex] = metrics;
+				windowPerf[i - startIndex] = perfCell;
+				ctxWidth = Math.max(ctxWidth, metrics.ctxWidth);
+				costWidth = Math.max(costWidth, metrics.costWidth);
 				if (perfMode !== "off") {
-					intelligenceWidth = Math.max(intelligenceWidth, visibleWidth(formatIntelligence(item.model)));
+					intelligenceWidth = Math.max(intelligenceWidth, metrics.intelligenceWidth);
 				}
-				perfWidth = Math.max(perfWidth, visibleWidth(this.#perfCell(item, perfMode)));
+				perfWidth = Math.max(perfWidth, visibleWidth(perfCell));
 			}
 			// Preserve at least a readable name by dropping cost, then context.
 			let nameRoom = width - 2 - metaColumnsWidth([intelligenceWidth, perfWidth, ctxWidth, costWidth]);
@@ -1533,7 +1618,7 @@ export class ModelBrowser implements Component {
 
 			const rows: string[] = [];
 			for (let i = startIndex; i < endIndex; i++) {
-				const item = this.#menu.visibleItems[i];
+				const item = visible[i];
 				if (!item) continue;
 				rows.push(
 					this.#renderRow(
@@ -1545,7 +1630,8 @@ export class ModelBrowser implements Component {
 						costWidth,
 						intelligenceWidth,
 						perfWidth,
-						perfMode,
+						windowMetrics[i - startIndex]!,
+						windowPerf[i - startIndex]!,
 					),
 				);
 			}

package/src/overlays/model-hub.ts

@@ -28,7 +28,7 @@ import { providerEntry } from "@oh-my-pi/pi-catalog/compat/providers";
 import { MODEL_KINDS, modelKind, type ModelKind } from "@oh-my-pi/pi-catalog/types";
 import type { Component, TUI } from "../tui";
 import { extractPrintableText, matchesKey } from "../keys";
-import { fuzzyFilter } from "../fuzzy";
+import { FuzzyCorpus } from "../fuzzy";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
 import { boundKeys, editorKey, editorKeys } from "../chrome/keybinding-hints";
 import type { KeyName } from "../key-hint-format";
@@ -334,7 +334,15 @@ export class ModelHubComponent implements Component {
 	#roles: RoleAssignments = {};
 	#availableItems: ModelBrowserItem[] = [];
 	#recentItems: ModelBrowserItem[] = [];
+	/** Selectors of {@link #recentItems}, rebuilt with it, for search hit counts. */
+	#recentSelectors: ReadonlySet<string> = new Set();
 	#candidateItems: ModelBrowserItem[] = [];
+	/** {@link #availableItems} when the candidates are that whole catalog (All scope, no role filter). */
+	#candidateCatalog: readonly ModelBrowserItem[] | undefined;
+	/** {@link #availableItems} when the browser's base items are that whole catalog; its query ranking then covers every count. */
+	#browserCatalog: readonly ModelBrowserItem[] | undefined;
+	/** Fuzzy index over {@link #availableItems}, for match counts while the browser holds a narrower scope. */
+	#catalogCorpus: { items: readonly ModelBrowserItem[]; corpus: FuzzyCorpus<ModelBrowserItem> } | undefined;
 	#modelKindTab: "all" | ModelKind = "all";
 	#roleTab: RoleTab = "all";
 	#configError: string | undefined;
@@ -587,6 +595,7 @@ export class ModelHubComponent implements Component {
 			if (item) this.#recentItems.push(item);
 			if (this.#recentItems.length >= RECENT_LIMIT) break;
 		}
+		this.#recentSelectors = new Set(this.#recentItems.map(item => item.selector));
 
 		this.#buildSidebar(allModels, availableModels);
 		this.#restoreSidebarAnchor(anchor);
@@ -823,11 +832,13 @@ export class ModelHubComponent implements Component {
 				? items.filter(item => this.#settings.getRoleInfo(assigning.role).accepts(item.model))
 				: items;
 		this.#candidateItems = [...scoped];
+		this.#candidateCatalog = scoped === this.#availableItems ? this.#availableItems : undefined;
 		this.#applyModelKind();
 	}
 
 	#applyModelKind(): void {
 		const kind = this.#modelKindTab;
+		this.#browserCatalog = kind === "all" ? this.#candidateCatalog : undefined;
 		this.#browser.setItems(
 			kind === "all"
 				? [...this.#candidateItems]
@@ -936,16 +947,14 @@ export class ModelHubComponent implements Component {
 			this.#composeEntries();
 			return;
 		}
-		const matches = fuzzyFilter(this.#availableItems, query, modelSearchText);
+		const matches = this.#catalogMatches(query);
 		const counts = new Map<string, number>();
+		let recentCount = 0;
 		for (const item of matches) {
 			counts.set(item.provider, (counts.get(item.provider) ?? 0) + 1);
+			if (this.#recentSelectors.has(item.selector)) recentCount++;
 		}
-		const recentSelectors = new Set(this.#recentItems.map(item => item.selector));
-		this.#recentSearchCount = matches.reduce(
-			(total, item) => total + (recentSelectors.has(item.selector) ? 1 : 0),
-			0,
-		);
+		this.#recentSearchCount = recentCount;
 		this.#searchTotal = matches.length;
 		this.#searchCounts = counts;
 		this.#composeEntries();
@@ -959,6 +968,24 @@ export class ModelHubComponent implements Component {
 		}
 	}
 
+	/**
+	 * Catalog items matching a non-blank `query`. When the browser holds the
+	 * whole catalog its ranking for this query already ran, so reuse it;
+	 * otherwise scan a catalog index kept across keystrokes.
+	 */
+	#catalogMatches(query: string): readonly ModelBrowserItem[] {
+		if (this.#browserCatalog === this.#availableItems && this.#browser.query === query) {
+			const ranked = this.#browser.queryMatches;
+			if (ranked) return ranked;
+		}
+		let cached = this.#catalogCorpus;
+		if (cached?.items !== this.#availableItems) {
+			cached = { items: this.#availableItems, corpus: new FuzzyCorpus(this.#availableItems, modelSearchText) };
+			this.#catalogCorpus = cached;
+		}
+		return cached.corpus.rank(query).map(result => result.item);
+	}
+
 	/**
 	 * Entries the scope hop skips: separators always; while searching, also
 	 * the Roles view (not a model scope), an empty Recent, locked providers,

package/src/overlays/oauth-selector.ts

@@ -51,6 +51,8 @@ const ORIGIN_LABELS = {
  */
 export class OAuthSelectorComponent extends OverlayPanel {
 	#listContainer: Container;
+	/** Provider rows viewport of the last {@link #updateList}; spinner ticks repaint only its rows. */
+	#listView: ScrollView | undefined;
 	#menu: MenuSelection<OAuthProviderInfo>;
 	/** The provider search field; its value drives `#menu`'s query. */
 	#search = Object.assign(new Input(), { prompt: "" });
@@ -213,7 +215,13 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			if (frameCount > 0) {
 				this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
 			}
-			this.#updateList();
+			// Only the provider rows carry the spinner glyph; the window is unchanged.
+			if (this.#listView) {
+				const start = this.#scrollStart;
+				this.#listView.setLines(this.#providerRows(start, start + this.#visibleCount));
+			} else {
+				this.#updateList();
+			}
 			this.#requestRenderCallback?.();
 		}, 80);
 	}
@@ -310,37 +318,15 @@ export class OAuthSelectorComponent extends OverlayPanel {
 		this.#nativeRoot = undefined;
 		this.#pickerRoot = undefined;
 		this.#listContainer.clear();
+		this.#listView = undefined;
 
-		const items = this.#menu.visibleItems;
-		const total = items.length;
+		const total = this.#menu.visibleItems.length;
 		const maxVisible = this.#maxVisible;
 		const { start: startIndex, end: endIndex } = centeredViewportRange(this.#menu.selectedIndex, total, maxVisible);
 		this.#scrollStart = startIndex;
 		this.#visibleCount = endIndex - startIndex;
 
-		const rows: string[] = [];
-		for (let i = startIndex; i < endIndex; i++) {
-			const provider = items[i];
-			if (!provider) continue;
-			const isSelected = i === this.#menu.selectedIndex;
-			const isAvailable = provider.available;
-			const statusIndicator = this.#getStatusIndicator(provider.id);
-
-			let line = "";
-			if (isSelected) {
-				const prefix = theme.fg("accent", `${theme.nav.cursor} `);
-				const text = isAvailable ? theme.fg("accent", provider.name) : theme.fg("dim", provider.name);
-				line = prefix + text + statusIndicator;
-			} else {
-				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
-				line = text + statusIndicator;
-			}
-			if (!isSelected && i === this.#hoveredIndex) {
-				line = theme.bg("selectedBg", line);
-			}
-			rows.push(line);
-		}
-
+		const rows = this.#providerRows(startIndex, endIndex);
 		if (rows.length > 0) {
 			const sv = new ScrollView(rows, {
 				height: rows.length,
@@ -349,6 +335,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 				theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
 			});
 			sv.setScrollOffset(startIndex);
+			this.#listView = sv;
 			this.#listContainer.addChild(sv);
 		}
 
@@ -371,6 +358,34 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			this.#listContainer.addChild(new TruncatedText(theme.fg("warning", this.#statusMessage), 0, 0));
 		}
 	}
+
+	/** Styled rows for visible providers `[startIndex, endIndex)`: cursor, name, auth status and provenance. */
+	#providerRows(startIndex: number, endIndex: number): string[] {
+		const items = this.#menu.visibleItems;
+		const rows: string[] = [];
+		for (let i = startIndex; i < endIndex; i++) {
+			const provider = items[i];
+			if (!provider) continue;
+			const isSelected = i === this.#menu.selectedIndex;
+			const isAvailable = provider.available;
+			const statusIndicator = this.#getStatusIndicator(provider.id);
+
+			let line = "";
+			if (isSelected) {
+				const prefix = theme.fg("accent", `${theme.nav.cursor} `);
+				const text = isAvailable ? theme.fg("accent", provider.name) : theme.fg("dim", provider.name);
+				line = prefix + text + statusIndicator;
+			} else {
+				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
+				line = text + statusIndicator;
+			}
+			if (!isSelected && i === this.#hoveredIndex) {
+				line = theme.bg("selectedBg", line);
+			}
+			rows.push(line);
+		}
+		return rows;
+	}
 	handleInput(keyData: string): void {
 		// Escape or Ctrl+C
 		if (matchesSelectCancel(keyData)) {