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

package/src/overlays/ask-dialog.ts

@@ -1132,7 +1132,7 @@ export class AskDialogComponent implements Component {
 		const action = question?.multi
 			? `${formatKeyHint("space")} toggle · ${enter} ${enterAction}`
 			: `${enter} select · ${formatKeyHint("n")} note`;
-		const tabs = this.#hasSubmitTab() ? ` · ${formatKeyHints(["tab", "left", "right"])}` : "";
+		const tabs = this.#hasSubmitTab() ? ` · ${formatKeyHints(["tab", "left", "right"])} question` : "";
 		const expand = this.#expandHint();
 		if (this.#questionCanPage && indicator) {
 			const pageKeys = editorKeys("tui.select.pageUp", "tui.select.pageDown");

package/src/overlays/model-browser.ts

@@ -13,7 +13,7 @@ import { buildModel } from "@oh-my-pi/pi-catalog/build";
 import { getModelPricingStatus, modelsAreEqual } from "@oh-my-pi/pi-catalog/models";
 import type { ModelKind, ModelPricingStatus } from "@oh-my-pi/pi-catalog/types";
 import type { Component } from "../tui";
-import { fuzzyRank } from "../fuzzy";
+import { FuzzyCorpus, fuzzyRank } from "../fuzzy";
 import { Input } from "../components/input";
 import { ScrollView } from "../components/scroll-view";
 import { matchesKey } from "../keys";
@@ -134,6 +134,12 @@ export interface ModelBrowserSource extends ModelRoleLookup {
 	readonly knownRoleIds: readonly string[];
 	readonly mruOrder: readonly string[];
 	readonly modelPerf: ReadonlyMap<string, ModelBrowserPerf>;
+	/**
+	 * Service tier the host would send for `model`, when it runs one. Rows with a
+	 * measured tier aggregate (`selector@tier`) then display that tier's numbers
+	 * instead of the standard aggregate.
+	 */
+	serviceTierFor?(model: Model): string | undefined;
 	getRoleInfo(role: string): ModelBrowserRoleInfo;
 	defaultRoleChain(role: string): string[];
 	resolveRoleValue(value: string | undefined, models: Model[], roleLookup?: ModelRoleLookup): ResolvedModelRoleValue;
@@ -297,13 +303,17 @@ export interface SortModelItemsOptions {
  * then per provider by priority, version, and recency.
  */
 export function sortModelItems(items: ModelBrowserItem[], options: SortModelItemsOptions = {}): void {
+	items.sort(modelItemComparator(options));
+}
+
+function modelItemComparator(options: SortModelItemsOptions): (a: ModelBrowserItem, b: ModelBrowserItem) => number {
 	const { roles = {}, mruOrder = [], skipRoleRank = false } = options;
 	const mruIndex = new Map(mruOrder.map((key, i) => [key, i]));
 
 	const dateRe = /-(\d{8})$/;
 	const latestRe = /-latest$/;
 
-	items.sort((a, b) => {
+	return (a, b) => {
 		if (!skipRoleRank) {
 			const aRank = computeModelRank(a.model, roles);
 			const bRank = computeModelRank(b.model, roles);
@@ -348,9 +358,9 @@ export function sortModelItems(items: ModelBrowserItem[], options: SortModelItem
 		// 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);
-	});
+		// Both -latest — alphabetical (a fixed -1 here made the order depend on input order)
+		return a.id.localeCompare(b.id);
+	};
 }
 
 /** Picker candidates and ordering inputs shared with composer model mentions. */
@@ -530,58 +540,100 @@ function compactModelSearchText(value: string): string {
 	return value.toLowerCase().replace(/[^\p{Letter}\p{Mark}\p{Number}]+/gu, "");
 }
 
-/** Exact id/selector → contiguous literal → fuzzy-only. */
-function modelSearchTier(query: string, item: ModelBrowserItem): number {
+/** Exact id/selector → contiguous literal → fuzzy-only, against precomputed compact forms. */
+function modelSearchTier(query: string, id: string, selector: string): number {
 	if (!query) return 2;
-	const id = compactModelSearchText(item.id);
-	const selector = compactModelSearchText(item.selector);
 	if (query === id || query === selector) return 0;
 	if (id.includes(query) || selector.includes(query)) return 1;
 	return 2;
 }
 
+/** Inputs to {@link rankModelItems} / {@link ModelItemRanker}. */
+export interface ModelRankOptions {
+	roles: RoleAssignments;
+	mruOrder: ReadonlyArray<string>;
+	affinity: SearchAffinity;
+}
+
+/** Query-independent sort keys of one candidate, computed once per ranker. */
+interface ModelRankKeys {
+	compactId: string;
+	compactSelector: string;
+	modelAffinity: number;
+	providerAffinity: number;
+	/** Position class in the MRU/version order; comparator-equal items share it. */
+	orderGroup: number;
+}
+
+/**
+ * {@link rankModelItems} prepared for one candidate list: the fuzzy index, the
+ * MRU/version order, and the affinity ranks depend only on the items and options,
+ * so per-keystroke callers (composer mentions, `/switch` arguments, the picker)
+ * hold one ranker and pay only the per-query fuzzy scan.
+ */
+export class ModelItemRanker {
+	readonly items: ReadonlyArray<ModelBrowserItem>;
+	readonly options: ModelRankOptions;
+	readonly #corpus: FuzzyCorpus<ModelBrowserItem>;
+	readonly #keys = new Map<ModelBrowserItem, ModelRankKeys>();
+
+	constructor(items: ReadonlyArray<ModelBrowserItem>, options: ModelRankOptions) {
+		this.items = items;
+		this.options = options;
+		this.#corpus = new FuzzyCorpus(items, modelSearchText);
+		const compare = modelItemComparator({ roles: options.roles, mruOrder: options.mruOrder, skipRoleRank: true });
+		const ordered = [...items].sort(compare);
+		let group = 0;
+		for (let i = 0; i < ordered.length; i++) {
+			const item = ordered[i]!;
+			if (i > 0 && compare(ordered[i - 1]!, item) !== 0) group++;
+			this.#keys.set(item, {
+				compactId: compactModelSearchText(item.id),
+				compactSelector: compactModelSearchText(item.selector),
+				modelAffinity: options.affinity.models.get(item.selector.toLowerCase()) ?? Number.MAX_SAFE_INTEGER,
+				providerAffinity: options.affinity.providers.get(item.provider.toLowerCase()) ?? Number.MAX_SAFE_INTEGER,
+				orderGroup: group,
+			});
+		}
+	}
+
+	/** Rank by text relevance, user affinity, and MRU/version order. */
+	rank(query: string): ModelBrowserItem[] {
+		if (!query.trim()) return [...this.items];
+		const queryKey = compactModelSearchText(query);
+		// Exact and contiguous matches stay ahead of fuzzy-only candidates; affinity
+		// breaks ties before fuzzy quality and the normal MRU/version ordering, and
+		// fuzzy order settles items that ordering cannot tell apart.
+		const rows = this.#corpus.rank(query).map((result, fuzzyIndex) => {
+			const keys = this.#keys.get(result.item)!;
+			return {
+				item: result.item,
+				keys,
+				tier: modelSearchTier(queryKey, keys.compactId, keys.compactSelector),
+				bucket: Math.round(result.score / 10),
+				fuzzyIndex,
+			};
+		});
+		rows.sort(
+			(a, b) =>
+				a.tier - b.tier ||
+				a.keys.modelAffinity - b.keys.modelAffinity ||
+				a.keys.providerAffinity - b.keys.providerAffinity ||
+				a.bucket - b.bucket ||
+				a.keys.orderGroup - b.keys.orderGroup ||
+				a.fuzzyIndex - b.fuzzyIndex,
+		);
+		return rows.map(row => row.item);
+	}
+}
+
 /** Rank picker and mention candidates by text relevance, user affinity, and MRU/version order. */
 export function rankModelItems(
 	query: string,
 	items: ReadonlyArray<ModelBrowserItem>,
-	options: { roles: RoleAssignments; mruOrder: ReadonlyArray<string>; affinity: SearchAffinity },
+	options: ModelRankOptions,
 ): ModelBrowserItem[] {
-	if (!query.trim()) return [...items];
-	const ranked = fuzzyRank(items, query, modelSearchText);
-	const matches = ranked.map(result => result.item);
-	// Exact and contiguous matches stay ahead of fuzzy-only candidates; affinity
-	// breaks ties before fuzzy quality and the normal MRU/version ordering.
-	sortModelItems(matches, { roles: options.roles, mruOrder: options.mruOrder, skipRoleRank: true });
-	const fallbackRanks = new Map(matches.map((item, index) => [item, index]));
-	const queryKey = compactModelSearchText(query);
-	const searchRanks = new Map<ModelBrowserItem, { tier: number; bucket: number }>();
-	for (const result of ranked) {
-		searchRanks.set(result.item, {
-			tier: modelSearchTier(queryKey, result.item),
-			bucket: Math.round(result.score / 10),
-		});
-	}
-	matches.sort((a, b) => {
-		const aSearch = searchRanks.get(a);
-		const bSearch = searchRanks.get(b);
-		const tierCmp = (aSearch?.tier ?? Number.MAX_SAFE_INTEGER) - (bSearch?.tier ?? Number.MAX_SAFE_INTEGER);
-		if (tierCmp !== 0) return tierCmp;
-
-		const modelCmp =
-			(options.affinity.models.get(a.selector.toLowerCase()) ?? Number.MAX_SAFE_INTEGER) -
-			(options.affinity.models.get(b.selector.toLowerCase()) ?? Number.MAX_SAFE_INTEGER);
-		if (modelCmp !== 0) return modelCmp;
-
-		const providerCmp =
-			(options.affinity.providers.get(a.provider.toLowerCase()) ?? Number.MAX_SAFE_INTEGER) -
-			(options.affinity.providers.get(b.provider.toLowerCase()) ?? Number.MAX_SAFE_INTEGER);
-		if (providerCmp !== 0) return providerCmp;
-
-		const bucketCmp = (aSearch?.bucket ?? Number.MAX_SAFE_INTEGER) - (bSearch?.bucket ?? Number.MAX_SAFE_INTEGER);
-		if (bucketCmp !== 0) return bucketCmp;
-		return (fallbackRanks.get(a) ?? Number.MAX_SAFE_INTEGER) - (fallbackRanks.get(b) ?? Number.MAX_SAFE_INTEGER);
-	});
-	return matches;
+	return new ModelItemRanker(items, options).rank(query);
 }
 
 /**
@@ -852,6 +904,8 @@ export class ModelBrowser implements Component {
 	#roles: RoleAssignments = {};
 	#mruOrder: ReadonlyArray<string> = [];
 	#affinity: SearchAffinity = { models: new Map(), providers: new Map() };
+	/** 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();
 	#hoveredIndex: number | null = null;
 	#maxVisible = 10;
@@ -1039,17 +1093,26 @@ export class ModelBrowser implements Component {
 	 * unfiltered when the query is blank.
 	 */
 	#filterItems(items: readonly ModelBrowserItem[], query: string): readonly ModelBrowserItem[] {
-		const base = items.filter(item => !this.#isDisabled(item));
-		const ranked = this.#preserveQueryOrder
-			? query.trim()
-				? fuzzyRank(base, query, modelSearchText).map(result => result.item)
-				: base
-			: rankModelItems(query, base, {
-					roles: this.#roles,
-					mruOrder: this.#mruOrder,
-					affinity: this.#affinity,
-				});
-		return this.#insertSeparator(ranked);
+		if (this.#preserveQueryOrder) {
+			const base = items.filter(item => !this.#isDisabled(item));
+			return this.#insertSeparator(
+				query.trim() ? fuzzyRank(base, query, modelSearchText).map(result => result.item) : base,
+			);
+		}
+		// The menu hands back the same array until `setItems`, and roles/MRU replace the
+		// affinity object, so one ranker serves every keystroke of a search.
+		let cached = this.#ranker;
+		if (cached?.source !== items || cached.ranker.options.affinity !== this.#affinity) {
+			cached = {
+				source: items,
+				ranker: new ModelItemRanker(
+					items.filter(item => !this.#isDisabled(item)),
+					{ roles: this.#roles, mruOrder: this.#mruOrder, affinity: this.#affinity },
+				),
+			};
+			this.#ranker = cached;
+		}
+		return this.#insertSeparator(cached.ranker.rank(query));
 	}
 
 	/** True when `item`'s context window is smaller than the live session token count (grayed row; hosts compact before switching). */
@@ -1270,14 +1333,40 @@ export class ModelBrowser implements Component {
 		return index;
 	}
 
+	/**
+	 * Measured perf for a row: the tier the host would send, else the standard
+	 * aggregate, else any measured tier (fastest first) so a model only ever run
+	 * 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 {
+		const tier = this.#settings.serviceTierFor?.(item.model);
+		if (tier) {
+			const tiered = this.#perf.get(`${item.selector}@${tier}`);
+			if (tiered) return { perf: tiered, tier };
+		}
+		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 best;
+	}
+
 	/** Measured TPS/TTFT, falling back to the catalog TPS as an estimated `~118t/s`. */
 	#perfCell(item: ModelBrowserItem, mode: PerfMode): string {
 		if (mode === "off") return "";
-		const perf = this.#perf.get(item.selector);
-		if (perf) {
-			const tps = formatTps(perf.tps);
-			if (mode === "full" && perf.ttftMs !== null) return `${formatTtft(perf.ttftMs)} ${tps}`;
-			return tps;
+		const measured = this.#perfFor(item);
+		if (measured) {
+			const tps = formatTps(measured.perf.tps);
+			const tier = measured.tier ? ` ${measured.tier}` : "";
+			if (mode === "full" && measured.perf.ttftMs !== null) {
+				return `${formatTtft(measured.perf.ttftMs)} ${tps}${tier}`;
+			}
+			return `${tps}${tier}`;
 		}
 		const tps = item.model.tps;
 		return tps != null && Number.isFinite(tps) && tps > 0 ? `~${formatTps(tps)}` : "";
@@ -1359,10 +1448,10 @@ export class ModelBrowser implements Component {
 		if (model.input.includes("image")) facts.push("vision");
 		const intelligence = formatIntelligence(model);
 		if (intelligence) facts.push(intelligence);
-		const perf = this.#perf.get(selected.selector);
-		if (perf) {
-			facts.push(`~${formatTps(perf.tps)}`);
-			if (perf.ttftMs !== null) facts.push(`${formatTtft(perf.ttftMs)} ttft`);
+		const measured = this.#perfFor(selected);
+		if (measured) {
+			facts.push(`~${formatTps(measured.perf.tps)}${measured.tier ? ` ${measured.tier}` : ""}`);
+			if (measured.perf.ttftMs !== null) facts.push(`${formatTtft(measured.perf.ttftMs)} ttft`);
 		} else if (model.tps != null && Number.isFinite(model.tps) && model.tps > 0) {
 			facts.push(`~${formatTps(model.tps)}`);
 		}
@@ -1627,10 +1716,10 @@ export class ModelBrowser implements Component {
 			if (model.input.includes("image")) facts.push("vision");
 			const intelligence = formatIntelligence(model);
 			if (intelligence) facts.push(intelligence);
-			const perf = this.#perf.get(selected.selector);
-			if (perf) {
-				facts.push(`~${formatTps(perf.tps)}`);
-				if (perf.ttftMs !== null) facts.push(`${formatTtft(perf.ttftMs)} ttft`);
+			const measured = this.#perfFor(selected);
+			if (measured) {
+				facts.push(`~${formatTps(measured.perf.tps)}${measured.tier ? ` ${measured.tier}` : ""}`);
+				if (measured.perf.ttftMs !== null) facts.push(`${formatTtft(measured.perf.ttftMs)} ttft`);
 			} else if (model.tps != null && Number.isFinite(model.tps) && model.tps > 0) {
 				facts.push(`~${formatTps(model.tps)}`);
 			}
@@ -1742,7 +1831,9 @@ export class ModelBrowser implements Component {
 		const facts: Record<string, TspText | number> = {};
 		const int = model.int != null && Number.isFinite(model.int) ? model.int : undefined;
 		if (int !== undefined) facts.int = String(Math.round(int));
-		const speed = this.#perfCell(item, "tps").replace(/t\/s$/, "");
+		const speed = this.#perfCell(item, "tps")
+			.replace(/\s*t\/s\s*/, " ")
+			.trim();
 		if (speed) facts.speed = speed;
 		if (model.contextWindow) facts.ctx = model.contextWindow;
 		facts.price = pickerPrice(model);
@@ -1904,7 +1995,7 @@ export class ModelBrowser implements Component {
 	modelPreview(item: ModelBrowserItem, mode: "full" | "compact", current: string | undefined): NativeChild[] {
 		const model = item.model;
 		const selector = `${model.provider}/${model.id}`;
-		const perf = this.#perf.get(selector);
+		const measured = this.#perfFor(item);
 		const ctx = model.contextWindow ?? 0;
 		const out = model.maxTokens ?? 0;
 		const overContext = this.isOverContext(item);
@@ -1964,10 +2055,12 @@ export class ModelBrowser implements Component {
 		if (badges.length > 0) children.push(row(badges, { gap: "xs", wrap: true }));
 
 		const speed: string[] = [];
-		if (perf) {
-			speed.push(`${formatTps(perf.tps).replace("t/s", " t/s")}`);
-			if (perf.ttftMs !== null) speed.push(`${formatTtft(perf.ttftMs).replace("s", " s")} TTFT`);
-			speed.push(`${perf.samples} ${perf.samples === 1 ? "sample" : "samples"}`);
+		if (measured) {
+			speed.push(
+				`${formatTps(measured.perf.tps).replace("t/s", " t/s")}${measured.tier ? ` ${measured.tier}` : ""}`,
+			);
+			if (measured.perf.ttftMs !== null) speed.push(`${formatTtft(measured.perf.ttftMs).replace("s", " s")} TTFT`);
+			speed.push(`${measured.perf.samples} ${measured.perf.samples === 1 ? "sample" : "samples"}`);
 		} else if (model.tps != null && Number.isFinite(model.tps) && model.tps > 0) {
 			speed.push(`~${formatTps(model.tps).replace("t/s", " t/s")} (catalog)`);
 		}

package/src/overlays/plan-review-overlay.ts

@@ -13,8 +13,9 @@
  * Focus regions (`toc`/`body`/`actions`) cycle with Tab/Shift+Tab; arrows move
  * within the focused region and step left into the sidebar. The default focus is
  * `actions`, so the muscle memory of the old single-target overlay carries over:
- * ↑/↓ select options, Enter confirms, ←/→ drives the slider when there is no
- * sidebar, g/G + PgUp/PgDn scroll, and the external-editor key opens the plan.
+ * ↑/↓ select options, Enter confirms, ←/→ drives the slider, g/G + PgUp/PgDn
+ * scroll, and the external-editor key opens the plan. Under Tern the options
+ * are a horizontal bar, so ←/→ select options and Shift+←/→ drive the slider.
  */
 import {
 	type Component,
@@ -58,6 +59,7 @@ import type { KeyName } from "../key-hint-format";
 import { col, item, keyed, md, node, row as rowNode, span, text } from "../native/describe";
 import { leafKey, type NativeChild, type NativeNode, type NativeUiEvent } from "../native/node";
 import { actionButton, actionHint, hintsRow, itemIndex, type NativeHint, selectList } from "../native/overlay";
+import { isNativeRendering } from "../native/state";
 import { getKeybindings } from "../keybindings";
 
 /** Title shown in the overlay's top border. */
@@ -666,6 +668,10 @@ export class PlanReviewOverlay implements Component {
 	}
 
 	#handleActions(data: string): void {
+		if (isNativeRendering()) {
+			this.#handleNativeActions(data);
+			return;
+		}
 		// Left/right always drive the slider. The sidebar sits beside the body
 		// (above this row), not the slider, so stealing left for it would strand
 		// the operator unable to step the model tier back — reach the ToC via Tab.
@@ -695,6 +701,37 @@ export class PlanReviewOverlay implements Component {
 		this.#handleBodyScroll(data);
 	}
 
+	/** Tern lays the options out as a horizontal decision bar: ←/→ step through
+	 *  it, ↑ returns to the body above, and the model slider moves to Shift+←/→. */
+	#handleNativeActions(data: string): void {
+		if (matchesKey(data, "shift+left")) {
+			this.#moveSlider(-1);
+			return;
+		}
+		if (matchesKey(data, "shift+right")) {
+			this.#moveSlider(1);
+			return;
+		}
+		if (matchesKey(data, "left") || matchesKey(data, "h")) {
+			this.#moveSelection(-1);
+			return;
+		}
+		if (matchesKey(data, "right") || matchesKey(data, "l")) {
+			this.#moveSelection(1);
+			return;
+		}
+		if (matchesSelectUp(data) || matchesKey(data, "k")) {
+			this.#setFocus("body");
+			return;
+		}
+		if (matchesSelectDown(data) || matchesKey(data, "j")) return;
+		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
+			this.#confirmSelection();
+			return;
+		}
+		this.#handleBodyScroll(data);
+	}
+
 	#handleBody(data: string): void {
 		if (data === "a") {
 			this.#startBodyAnnotate();
@@ -1686,8 +1723,8 @@ export class PlanReviewOverlay implements Component {
 		const hints: (NativeHint | undefined)[] = [];
 		switch (this.#focus) {
 			case "actions":
-				hints.push(upDown("select"), key("enter", "confirm"));
-				if (this.#slider) hints.push(key(["left", "right"], "model"));
+				hints.push(key(["left", "right"], "select"), key("enter", "confirm"));
+				if (this.#slider) hints.push(key(["shift+left", "shift+right"], "model"));
 				break;
 			case "toc":
 				hints.push(

package/src/prompt/composer.ts

@@ -15,7 +15,7 @@ import {
 	type TUIOptions,
 	type ViewportSize,
 } from "../tui";
-import { sliceWithWidth, visibleWidth } from "../utils";
+import { wrapLiteralLine } from "../utils";
 import type { NativeChild, NativeSurface, NativeSurfaceProvider } from "../native/node";
 import { sameItems } from "../native/memo";
 import { postmortem } from "@oh-my-pi/pi-utils";
@@ -803,20 +803,8 @@ export class Composer implements TerminalFrameProvider, NativeSurfaceProvider {
 		if (!lines) return [];
 		if (isInsideTerminalMultiplexer()) return lines.slice(start);
 		const reflowed: string[] = [];
-		const columns = Math.max(1, width);
 		for (let index = start; index < lines.length; index++) {
-			const line = lines[index]!;
-			const lineWidth = visibleWidth(line);
-			if (lineWidth === 0) {
-				reflowed.push("");
-				continue;
-			}
-			for (let column = 0; column < lineWidth;) {
-				let slice = sliceWithWidth(line, column, columns, true);
-				if (slice.width === 0) slice = sliceWithWidth(line, column, columns);
-				reflowed.push(slice.text);
-				column += Math.max(1, slice.width);
-			}
+			reflowed.push(...wrapLiteralLine(lines[index]!, width));
 		}
 		return reflowed;
 	}

package/src/prompt/interactive-context-helpers.ts

@@ -18,6 +18,8 @@ export interface AssistantMessageHost {
 	readonly proseOnlyThinking: boolean;
 	readonly expandThinkingBlocks: boolean;
 	readonly assistantImagesVisible: boolean;
+	/** Whether the viewed session's tables get charts: the main session's do, a focused subagent's do not. */
+	readonly tableChartsVisible: boolean;
 	readonly hideToolActivity: boolean;
 	readonly toolOutputExpanded: boolean;
 	readonly ui: { requestRender(): void; readonly imageBudget: ImageBudget };
@@ -116,6 +118,7 @@ export function createAssistantMessageComponent(
 		ctx.expandThinkingBlocks,
 	);
 	component.setImagesVisible(ctx.assistantImagesVisible);
+	component.setTableChartsVisible(ctx.tableChartsVisible);
 	component.setToolResultImagesVisible(!ctx.hideToolActivity);
 	component.setExpanded(ctx.toolOutputExpanded);
 	// A wire the `stream-revision` axis marks `possible` can rewrite text it has

package/src/prompt/model-mention-autocomplete.ts

@@ -5,9 +5,7 @@ import { modelMentionDisplayName } from "./model-mention-syntax";
 import type {
 	buildSearchAffinity as BuildSearchAffinity,
 	ModelBrowserItem,
-	rankModelItems as RankModelItems,
-	SearchAffinity,
-	SessionModelScope,
+	ModelItemRanker as ModelItemRankerClass,
 	SessionModelScopeCache as SessionModelScopeCacheClass,
 } from "../overlays/model-browser";
 import { theme } from "../theme/theme";
@@ -21,7 +19,7 @@ export type ModelMentionCandidateSource = (query: string) => ReadonlyArray<Model
 interface ModelBrowserModules {
 	SessionModelScopeCache: typeof SessionModelScopeCacheClass;
 	buildSearchAffinity: typeof BuildSearchAffinity;
-	rankModelItems: typeof RankModelItems;
+	ModelItemRanker: typeof ModelItemRankerClass;
 }
 
 /** Synchronous first-use boundary for the interactive model browser implementation. */
@@ -80,7 +78,7 @@ export function applyModelMentionCompletion(
 
 /**
  * Create a session-scoped model candidate lookup using picker ordering. The
- * scope and search affinity are reused across queries until their inputs change.
+ * scope and its prepared ranker are reused across queries until their inputs change.
  */
 export function createModelMentionSource(host: {
 	source: ModelBrowserSource;
@@ -88,20 +86,22 @@ export function createModelMentionSource(host: {
 	scopedModels: () => ReadonlyArray<Model>;
 }): ModelMentionCandidateSource {
 	let scopeCache: SessionModelScopeCacheClass | undefined;
-	let affinityScope: SessionModelScope | undefined;
-	let affinityProviderOrder: readonly string[] | undefined;
-	let affinity: SearchAffinity | undefined;
+	let ranker: ModelItemRankerClass | undefined;
+	let rankerProviderOrder: readonly string[] | undefined;
 	return query => {
-		const { SessionModelScopeCache, buildSearchAffinity, rankModelItems } = loadModelBrowser();
+		const { SessionModelScopeCache, buildSearchAffinity, ModelItemRanker } = loadModelBrowser();
 		scopeCache ??= new SessionModelScopeCache(host.source, host.registry);
 		const scope = scopeCache.get(host.scopedModels());
 		if (!query.trim()) return scope.items;
 		const providerOrder = host.source.modelProviderOrder;
-		if (!affinity || affinityScope !== scope || affinityProviderOrder !== providerOrder) {
-			affinity = buildSearchAffinity(providerOrder, scope.roles, scope.mruOrder);
-			affinityScope = scope;
-			affinityProviderOrder = providerOrder;
+		if (ranker?.items !== scope.items || rankerProviderOrder !== providerOrder) {
+			ranker = new ModelItemRanker(scope.items, {
+				roles: scope.roles,
+				mruOrder: scope.mruOrder,
+				affinity: buildSearchAffinity(providerOrder, scope.roles, scope.mruOrder),
+			});
+			rankerProviderOrder = providerOrder;
 		}
-		return rankModelItems(query, scope.items, { roles: scope.roles, mruOrder: scope.mruOrder, affinity });
+		return ranker.rank(query);
 	};
 }

package/src/render/composite.ts

@@ -0,0 +1,62 @@
+import { TERMINAL } from "../terminal-capabilities";
+import { extractSegments, sliceByColumn, sliceWithWidth, visibleWidth } from "../utils";
+
+const SEGMENT_RESET = "\x1b[0m";
+
+/** Splice overlay content into a base line at a specific column. Single-pass optimized. */
+export function compositeLineAt(
+	baseLine: string,
+	overlayLine: string,
+	startCol: number,
+	overlayWidth: number,
+	totalWidth: number,
+): string {
+	if (TERMINAL.isImageLine(baseLine)) {
+		// Full-width overlays such as /switch are opaque: replace the
+		// Unicode placeholder cells so the image cannot cover the modal.
+		// Partial overlays cannot safely splice placement control sequences.
+		if (startCol !== 0 || overlayWidth < totalWidth) return baseLine;
+		const overlay = sliceWithWidth(overlayLine, 0, totalWidth, true);
+		return SEGMENT_RESET + overlay.text + " ".repeat(Math.max(0, totalWidth - overlay.width));
+	}
+
+	// Single pass through baseLine extracts both before and after segments
+	const afterStart = startCol + overlayWidth;
+	const base = extractSegments(baseLine, startCol, afterStart, totalWidth - afterStart, true);
+
+	// Extract overlay with width tracking (strict=true to exclude wide chars at boundary)
+	const overlay = sliceWithWidth(overlayLine, 0, overlayWidth, true);
+
+	// Pad segments to target widths
+	const beforePad = Math.max(0, startCol - base.beforeWidth);
+	const overlayPad = Math.max(0, overlayWidth - overlay.width);
+	const actualBeforeWidth = Math.max(startCol, base.beforeWidth);
+	const actualOverlayWidth = Math.max(overlayWidth, overlay.width);
+	const afterTarget = Math.max(0, totalWidth - actualBeforeWidth - actualOverlayWidth);
+	const afterPad = Math.max(0, afterTarget - base.afterWidth);
+
+	// Compose result
+	const r = SEGMENT_RESET;
+	const result =
+		base.before +
+		" ".repeat(beforePad) +
+		r +
+		overlay.text +
+		" ".repeat(overlayPad) +
+		r +
+		base.after +
+		" ".repeat(afterPad);
+
+	// CRITICAL: Always verify and truncate to terminal width.
+	// This is the final safeguard against width overflow which would crash the TUI.
+	// Width tracking can drift from actual visible width due to:
+	// - Complex ANSI/OSC sequences (hyperlinks, colors)
+	// - Wide characters at segment boundaries
+	// - Edge cases in segment extraction
+	const resultWidth = visibleWidth(result);
+	if (resultWidth <= totalWidth) {
+		return result;
+	}
+	// Truncate with strict=true to ensure we don't exceed totalWidth
+	return sliceByColumn(result, 0, totalWidth, true);
+}

package/src/status-line/segments.ts

@@ -183,7 +183,9 @@ function getProjectDirDisplay(projectDir: string): ProjectDirDisplay {
 		}
 	}
 	if (!scratch) {
-		displayRoots ??= [path.join(homeDir, "Projects"), "/work"].map(normalizePathForComparison);
+		displayRoots ??= [path.join(homeDir, "Projects"), path.join(homeDir, "repos"), "/work"].map(
+			normalizePathForComparison,
+		);
 		for (const root of displayRoots) {
 			const relative = relativePathWithinNormalizedRoot(root, normalizedProjectDir);
 			if (relative) {