@oh-my-pi/pi-tui 18.4.1 → 18.4.3

package/src/overlays/model-picker.ts

@@ -28,7 +28,8 @@ export interface ResolvedRoleModel {
 
 /** Catalog refresh capability used by the session picker. */
 export interface ModelPickerRegistry extends ModelBrowserRegistry {
-	refresh(strategy: "offline"): Promise<void>;
+	/** Bring the catalog up to date without rebuilding a current one; `true` when the picker must re-read it. */
+	refreshIfStale(): Promise<boolean>;
 }
 
 export interface ModelPickerCallbacks {
@@ -172,13 +173,15 @@ export class ModelPickerComponent implements Component {
 			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.
+		// Re-read only if the catalog moves (startup discovery landing, a
+		// models.yml edit): rebuilding a current catalog on every open blocks
+		// the first paint for seconds. A --models scope is registry-independent.
 		if (this.#scopedModels.length === 0) {
 			this.#registry
-				.refresh("offline")
-				.then(() => this.#syncFromRegistryState())
+				.refreshIfStale()
+				.then(changed => {
+					if (changed) this.#syncFromRegistryState();
+				})
 				.catch(error => {
 					this.#configError = error instanceof Error ? error.message : String(error);
 				})

package/src/overlays/rewind-selector.ts

@@ -22,7 +22,8 @@
  * variants at a fork and jump between user turns elsewhere, `f` opens a
  * filter (typing narrows the current path to matching items; Esc leaves the
  * filter with the selection kept), Enter rewinds to the outlined item, A loads
- * earlier turns without changing selection, Esc cancels.
+ * earlier turns without changing selection (stepping above the oldest replayed
+ * turn loads them too), Esc cancels.
  */
 import type { AgentTool } from "@oh-my-pi/pi-agent-core";
 import {
@@ -471,7 +472,10 @@ export class RewindSelectorComponent implements Component {
 		this.#move(delta, () => true);
 	}
 
-	/** Step the main selection by `delta` to the nearest visible target passing `accept`. */
+	/**
+	 * Step the main selection by `delta` to the nearest visible target passing
+	 * `accept`; stepping above the replayed tail loads the earlier history first.
+	 */
 	#move(delta: -1 | 1, accept: (target: OutlineTarget) => boolean): void {
 		let index = this.#selected + delta;
 		while (index >= 0 && index < this.#targets.length) {
@@ -485,6 +489,10 @@ export class RewindSelectorComponent implements Component {
 			}
 			index += delta;
 		}
+		if (delta < 0 && this.#truncated) {
+			this.#loadFullHistory();
+			this.#move(delta, accept);
+		}
 	}
 
 	#isMainSelectable(index: number): boolean {

package/src/overlays/settings-selector.ts

@@ -1139,15 +1139,7 @@ export class SettingsSelectorComponent implements Component {
 		return entries.map(([provider, limit]) => `${provider}: ${limit}`).join(", ");
 	}
 
-	#getMultiSelectOptions(def: SettingDef & { type: "multiselect" }) {
-		if (def.path !== "providers.webSearchOrder") return def.options;
-		const excluded: unknown = this.#context.settings.get("providers.webSearchExclude");
-		if (!Array.isArray(excluded)) return def.options;
-		return def.options.filter(option => !excluded.includes(option.value));
-	}
-
 	#createMultiSelect(def: SettingDef & { type: "multiselect" }, done: (value?: string) => void): Container {
-		const options = this.#getMultiSelectOptions(def);
 		const current: unknown = this.#context.settings.get(def.path);
 		const initial = Array.isArray(current)
 			? current.filter((entry): entry is string => typeof entry === "string")
@@ -1155,7 +1147,7 @@ export class SettingsSelectorComponent implements Component {
 		return new MultiSelectSubmenu(
 			def.label,
 			def.description,
-			options,
+			def.options,
 			initial,
 			def.ordered,
 			value => {
@@ -1167,7 +1159,7 @@ export class SettingsSelectorComponent implements Component {
 	}
 
 	#formatMultiSelectValue(def: SettingDef & { type: "multiselect" }, value: unknown): string {
-		const options = this.#getMultiSelectOptions(def);
+		const { options } = def;
 		const labels = Array.isArray(value)
 			? value.flatMap(entry => {
 					if (typeof entry !== "string") return [];

package/src/prompt/composer-attachments.ts

@@ -50,9 +50,12 @@ const SKILL_ICONS = [...new Set(Object.values(SYMBOL_PRESETS).map(m => m["icon.e
 /** Skill names as they appear in chips: word characters and dashes, dots only between segments. */
 const SKILL_NAME_SOURCE = "[\\w-]+(?:\\.[\\w-]+)*";
 
-const SKILL_CHIP_SOURCE = `(?:${SKILL_ICONS.map(icon =>
-	/^[a-z]+$/i.test(icon) ? `(?<![A-Za-z])${RegExp.escape(icon)}` : RegExp.escape(icon),
-).join("|")}) (${SKILL_NAME_SOURCE})(?![\\w-])`;
+/** Regex source for a chip glyph; word glyphs (ASCII preset) must not continue a preceding word. */
+function glyphSource(icon: string): string {
+	return /^[a-z]+$/i.test(icon) ? `(?<![A-Za-z])${RegExp.escape(icon)}` : RegExp.escape(icon);
+}
+
+const SKILL_CHIP_SOURCE = `(?:${SKILL_ICONS.map(glyphSource).join("|")}) (${SKILL_NAME_SOURCE})(?![\\w-])`;
 
 /**
  * Replaces `/skill:<name>` tokens for known skills with compact chip labels and
@@ -96,11 +99,16 @@ export function collapseModelMentions(
 
 const CHIP_ICON_KEY = { image: "chip.image", video: "chip.video", paste: "chip.paste" } as const;
 
+/** Chip glyph the active theme renders for `kind`, including `symbols.overrides`. */
+function activeChipIcon(kind: ChipKind): string {
+	return typeof theme === "undefined"
+		? SYMBOL_PRESETS.unicode[CHIP_ICON_KEY[kind]]
+		: theme.symbol(CHIP_ICON_KEY[kind]);
+}
+
 /** Compact atomic composer token for attachment `n` in the active symbol preset. */
 export function chipLabel(kind: ChipKind, n: number): string {
-	const icon =
-		typeof theme === "undefined" ? SYMBOL_PRESETS.unicode[CHIP_ICON_KEY[kind]] : theme.symbol(CHIP_ICON_KEY[kind]);
-	return `${icon} #${n}`;
+	return `${activeChipIcon(kind)} #${n}`;
 }
 
 /** Every glyph a chip token may start with, across all symbol presets. */
@@ -111,7 +119,7 @@ const CHIP_ICONS: Record<ChipKind, readonly string[]> = {
 };
 
 const CHIP_TOKEN_SOURCE = `(?:${[...CHIP_ICONS.image, ...CHIP_ICONS.video, ...CHIP_ICONS.paste]
-	.map(icon => (/^[a-z]+$/i.test(icon) ? `(?<![A-Za-z])${RegExp.escape(icon)}` : RegExp.escape(icon)))
+	.map(glyphSource)
 	.join("|")}) #[1-9]\\d*`;
 
 /** Infers an attachment kind from a chip label emitted by any configured symbol preset. */
@@ -155,6 +163,45 @@ export const COMPOSER_TOKEN_REGEX = new RegExp(
 	"gu",
 );
 
+/**
+ * Attachment indices referenced by a composer buffer, per kind. Image/video count compact chips
+ * and expanded markers; paste counts compact chips only, since `[Paste #N]` markers number the
+ * base editor's separate paste buffer. Registered labels take precedence over theme glyphs so
+ * tokens created before a theme switch keep their kind; full numbers prevent `#1` matching `#10`.
+ */
+export function referencedAttachments(
+	text: string,
+	recorded: ReadonlyMap<string, ChipKind>,
+): Record<ChipKind, Set<number>> {
+	const kinds: readonly ChipKind[] = ["image", "video", "paste"];
+	const kindByIcon = new Map<string, ChipKind>();
+	for (const kind of kinds) for (const icon of CHIP_ICONS[kind]) kindByIcon.set(icon, kind);
+	for (const kind of kinds) kindByIcon.set(activeChipIcon(kind), kind);
+	const icons = [...kindByIcon.keys()].sort((a, b) => b.length - a.length).map(glyphSource);
+	const labels = [...recorded.keys()].sort((a, b) => b.length - a.length).map(label => RegExp.escape(label));
+	const recordedSource = labels.length > 0 ? labels.join("|") : "(?!)";
+	const scanner = new RegExp(
+		`${PLACEHOLDER_REGEX.source}|(${recordedSource})(?!\\d)|(${icons.join("|")}) #([1-9]\\d*)`,
+		"gu",
+	);
+
+	const refs: Record<ChipKind, Set<number>> = { image: new Set(), video: new Set(), paste: new Set() };
+	for (const match of text.matchAll(scanner)) {
+		if (match[1] === "Image") refs.image.add(Number(match[2]));
+		else if (match[1] === "Video") refs.video.add(Number(match[2]));
+		const label = match[3];
+		if (label !== undefined) {
+			const kind = recorded.get(label);
+			if (kind !== undefined) refs[kind].add(Number(label.slice(label.lastIndexOf("#") + 1)));
+		} else {
+			const icon = match[4];
+			const kind = icon === undefined ? undefined : kindByIcon.get(icon);
+			if (kind !== undefined) refs[kind].add(Number(match[5]));
+		}
+	}
+	return refs;
+}
+
 /** Add the registered model-chip labels to the composer placeholder matcher. */
 export function composerTokenRegex(mentionLabels: Iterable<string>): RegExp {
 	const labels = [...new Set(mentionLabels)].sort((a, b) => b.length - a.length);

package/src/prompt/composer.ts

@@ -369,12 +369,15 @@ export class Composer implements TerminalFrameProvider {
 		// editor drifts up above a band of blank rows (#11007).
 		this.#transientChromeFloor = Math.min(this.#transientChromeFloor ?? transientRows, transientRows);
 		const belowFloor = after.length - transientRows + this.#transientChromeFloor;
+		const now = performance.now();
+		const frame: AnimationFrame = { now, tick: Math.floor(now / 80) };
+		// Retirement measures the same live blocks the viewport lays out below;
+		// one open frame renders each of them once for both.
+		transcript.beginFrame(frame);
 		const history = this.#offerHistory(transcript, width, rows, preRoots.length + belowFloor);
 		const headerVisible = !this.#headerRetired && this.#offeredHistory?.source !== "header";
 		const headerRows = headerVisible ? this.#header.render(width) : [];
 		const before = [...headerRows, ...preRoots];
-		const now = performance.now();
-		const frame: AnimationFrame = { now, tick: Math.floor(now / 80) };
 		// The live tail is laid out against the same baseline retirement is
 		// billed against, so its compaction allocator (one row per block, no
 		// inter-block blanks) engages only when a block genuinely cannot retire.

package/src/prompt/custom-editor.ts

@@ -14,6 +14,7 @@ import { imageAttachmentSource } from "./image-source";
 import { isVideoPath } from "./video";
 import {
 	attachmentSgr,
+	type ChipKind,
 	COMPOSER_TOKEN_REGEX,
 	chipLabel,
 	collapseImageMarkers,
@@ -21,6 +22,8 @@ import {
 	collapseSkillTokens,
 	composerTokenRegex,
 	modelChipStyle,
+	PLACEHOLDER_REGEX,
+	referencedAttachments,
 	renderPlaceholders,
 	skillChipLabel,
 	skillChipStyle,
@@ -662,14 +665,29 @@ export class CustomEditor extends Editor {
 		) {
 			return cached.chips;
 		}
-		const text = this.getText();
+		const recorded = new Map<string, ChipKind>();
+		if (this.pendingImages.length > 0) {
+			for (const [label, expansion] of this.atoms) {
+				const kind = expansion.startsWith("[Image #")
+					? "image"
+					: expansion.startsWith("[Video #")
+						? "video"
+						: undefined;
+				if (kind !== undefined && expansion.match(PLACEHOLDER_REGEX)?.[0] === expansion) {
+					recorded.set(label, kind);
+				}
+			}
+		}
+		for (const entry of this.pendingTexts) {
+			// A reused label belongs to the atom currently expanding it, not a deleted paste.
+			if (!recorded.has(entry.label)) recorded.set(entry.label, "paste");
+		}
+		const refs = referencedAttachments(this.getText(), recorded);
 		const chips: ComposerChipDescriptor[] = [];
 		for (let i = 0; i < this.pendingImages.length; i++) {
 			const n = i + 1;
-			const video =
-				text.includes(chipLabel("video", n)) || text.includes(`[Video #${n}]`) || text.includes(`[Video #${n},`);
-			const image =
-				text.includes(chipLabel("image", n)) || text.includes(`[Image #${n}]`) || text.includes(`[Image #${n},`);
+			const video = refs.video.has(n);
+			const image = refs.image.has(n);
 			if (!video && !image) continue;
 			chips.push({
 				kind: video ? "video" : "image",
@@ -679,7 +697,7 @@ export class CustomEditor extends Editor {
 			});
 		}
 		for (const entry of this.pendingTexts) {
-			if (!text.includes(entry.label)) continue;
+			if (!refs.paste.has(entry.n)) continue;
 			chips.push({ kind: "paste", n: entry.n, text: entry });
 		}
 		this.#composerChipsCache = {

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

@@ -4,9 +4,11 @@ import type { ModelBrowserRegistry, ModelBrowserSource } from "../overlays/model
 import { modelMentionDisplayName } from "./model-mention-syntax";
 import type {
 	buildSearchAffinity as BuildSearchAffinity,
-	buildSessionModelScope as BuildSessionModelScope,
 	ModelBrowserItem,
 	rankModelItems as RankModelItems,
+	SearchAffinity,
+	SessionModelScope,
+	SessionModelScopeCache as SessionModelScopeCacheClass,
 } from "../overlays/model-browser";
 import { theme } from "../theme/theme";
 
@@ -17,7 +19,7 @@ const MAX_MODEL_MENTION_SUGGESTIONS = 20;
 export type ModelMentionCandidateSource = (query: string) => ReadonlyArray<ModelBrowserItem>;
 
 interface ModelBrowserModules {
-	buildSessionModelScope: typeof BuildSessionModelScope;
+	SessionModelScopeCache: typeof SessionModelScopeCacheClass;
 	buildSearchAffinity: typeof BuildSearchAffinity;
 	rankModelItems: typeof RankModelItems;
 }
@@ -75,20 +77,30 @@ export function applyModelMentionCompletion(
 	};
 }
 
-/** Create a fresh session-scoped model candidate lookup using picker ordering. */
+/**
+ * Create a session-scoped model candidate lookup using picker ordering. The
+ * scope and search affinity are reused across queries until their inputs change.
+ */
 export function createModelMentionSource(host: {
 	source: ModelBrowserSource;
 	registry: ModelBrowserRegistry;
 	scopedModels: () => ReadonlyArray<Model>;
 }): ModelMentionCandidateSource {
+	let scopeCache: SessionModelScopeCacheClass | undefined;
+	let affinityScope: SessionModelScope | undefined;
+	let affinityProviderOrder: readonly string[] | undefined;
+	let affinity: SearchAffinity | undefined;
 	return query => {
-		const { buildSearchAffinity, buildSessionModelScope, rankModelItems } = loadModelBrowser();
-		const scope = buildSessionModelScope(host.source, host.registry, host.scopedModels());
+		const { SessionModelScopeCache, buildSearchAffinity, rankModelItems } = loadModelBrowser();
+		scopeCache ??= new SessionModelScopeCache(host.source, host.registry);
+		const scope = scopeCache.get(host.scopedModels());
 		if (!query.trim()) return scope.items;
-		return rankModelItems(query, scope.items, {
-			roles: scope.roles,
-			mruOrder: scope.mruOrder,
-			affinity: buildSearchAffinity(host.source.modelProviderOrder, scope.roles, scope.mruOrder),
-		});
+		const providerOrder = host.source.modelProviderOrder;
+		if (!affinity || affinityScope !== scope || affinityProviderOrder !== providerOrder) {
+			affinity = buildSearchAffinity(providerOrder, scope.roles, scope.mruOrder);
+			affinityScope = scope;
+			affinityProviderOrder = providerOrder;
+		}
+		return rankModelItems(query, scope.items, { roles: scope.roles, mruOrder: scope.mruOrder, affinity });
 	};
 }

package/src/render/width-aware-text.ts

@@ -47,6 +47,15 @@ export class WidthAwareText implements Component {
 		this.#inner.invalidate();
 	}
 
+	/**
+	 * Re-run the formatter on the next render because its inputs changed.
+	 * Unlike {@link invalidate}, the inner `Text` keeps its wrap cache, so a
+	 * reformat that yields the same string skips re-wrapping and re-tinting.
+	 */
+	reformat(): void {
+		this.#cachedText = undefined;
+	}
+
 	render(width: number): readonly string[] {
 		const paddingX = this.#ignoreTight ? this.#paddingX : getPaddingX(this.#paddingX);
 		const contentWidth = Math.max(1, width - paddingX * 2);

package/src/setup/scenes/sign-in.ts

@@ -14,7 +14,7 @@ import { wrapTextWithAnsi } from "../../utils";
 import { getAgentDbPath } from "@oh-my-pi/pi-utils";
 import { OAuthSelectorComponent } from "../../overlays/oauth-selector";
 import { theme } from "../../theme/theme";
-import type { SetupSceneHost, SetupTab } from "./types";
+import type { SetupScene, SetupSceneController, SetupSceneHost } from "./types";
 
 function loginUrlLink(url: string): string {
 	return `\x1b]8;;${url}\x07Open login URL\x1b]8;;\x07`;
@@ -69,13 +69,15 @@ interface PromptState {
 }
 
 /**
- * "Sign in" panel: lets the user authenticate one or more model providers via
- * OAuth. Unlike a standalone scene it never auto-advances the wizard — the user
- * may sign in to several providers and then continue with Esc.
+ * "Sign in" scene: lets the user authenticate one or more model providers via
+ * OAuth. It never auto-advances the wizard — the user may sign in to several
+ * providers and then continue with Esc.
  */
-export class SignInTab implements SetupTab {
-	readonly id = "sign-in";
-	readonly label = "Sign in";
+export class SignInScene implements SetupSceneController {
+	readonly title = "Sign in to your providers";
+	get subtitle(): string {
+		return `Sign in to one or more providers. Press ${editorKey("tui.select.cancel")} when you're done.`;
+	}
 
 	#authStorage: AuthStorage;
 	#selector: OAuthSelectorComponent;
@@ -99,11 +101,6 @@ export class SignInTab implements SetupTab {
 		this.#selector = this.#createSelector();
 	}
 
-	/** Modal while an OAuth flow is running so the scene won't switch tabs or finish. */
-	get modal(): boolean {
-		return this.#loggingInProvider !== undefined;
-	}
-
 	dispose(): void {
 		this.#disposed = true;
 		this.#selector.stopValidation();
@@ -373,3 +370,11 @@ export class SignInTab implements SetupTab {
 		this.#host.requestRender();
 	}
 }
+
+/** Onboarding scene for provider sign-in. */
+export const providersSetupScene: SetupScene = {
+	id: "providers",
+	title: "Sign in to your providers",
+	minVersion: 1,
+	mount: host => new SignInScene(host),
+};

package/src/setup/scenes/types.ts

@@ -5,7 +5,6 @@ import type { ComposerPreviewStatusSource } from "../../overlays/composer-shape-
 import type { ComposerShape } from "../../overlays/composer-shape-registry";
 import type { ModelBrowserSource } from "../../overlays/model-browser";
 import type { SymbolPreset } from "../../theme/theme";
-import type { SearchProviderId } from "../../tools/web-search";
 import type { Component, TUI } from "../../tui";
 
 /** Terminal capabilities used by setup overlays and the startup splash. */
@@ -21,7 +20,6 @@ export interface SetupHost extends SetupUiHost {
 	readonly composerShape: ComposerShape;
 	readonly symbolPreset: SymbolPreset;
 	readonly colorBlindMode: boolean;
-	readonly webSearchOrder: readonly string[];
 	readonly disabledProviders: readonly string[];
 	readonly authStorage: AuthStorage;
 	readonly modelSource: ModelBrowserSource;
@@ -33,8 +31,6 @@ export interface SetupHost extends SetupUiHost {
 	saveSymbolPreset(preset: SymbolPreset): void;
 	saveColorBlindMode(enabled: boolean): void;
 	saveTheme(mode: "dark" | "light", name: string): void;
-	isSearchProviderAvailable(id: SearchProviderId): Promise<boolean>;
-	saveSearchProvider(id: SearchProviderId | "auto"): void;
 	captureBrowserSession(request: OAuthBrowserSessionRequest, signal?: AbortSignal): Promise<string>;
 	copyToClipboard(text: string): Promise<void>;
 	openInBrowser(url: string): void;
@@ -78,29 +74,6 @@ export interface SetupSceneController extends Component {
 	routeMouse?(event: SgrMouseEvent, line: number, col: number): void;
 }
 
-/**
- * A single panel inside a tabbed setup scene. The host scene owns the tab bar
- * and forwards rendering/input to the active tab.
- */
-export interface SetupTab {
-	readonly id: string;
-	readonly label: string;
-	/**
-	 * While `true` the tab owns all keyboard input (e.g. an in-progress OAuth
-	 * login). The parent scene MUST NOT switch tabs or finish while modal.
-	 */
-	readonly modal: boolean;
-	/** See {@link SetupSceneController.render}: `maxLines` is the tab-local row budget. */
-	render(width: number, maxLines?: number): readonly string[];
-	handleInput(data: string): void;
-	invalidate(): void;
-	/** Called when the tab becomes active (including initial mount). */
-	onActivate?(): void;
-	/** Mouse routing at tab-local coordinates; see {@link SetupSceneController.routeMouse}. */
-	routeMouse?(event: SgrMouseEvent, line: number, col: number): void;
-	dispose(): void;
-}
-
 /** Versioned onboarding scene definition. */
 export interface SetupScene {
 	id: string;

package/src/setup/wizard.ts

@@ -3,7 +3,7 @@ import type { SetupHost } from "./scenes/types";
 import { composerSetupScene } from "./scenes/composer";
 import { glyphSetupScene } from "./scenes/glyph";
 import { modelSetupScene } from "./scenes/model";
-import { providersSetupScene } from "./scenes/providers";
+import { providersSetupScene } from "./scenes/sign-in";
 import { themeSetupScene } from "./scenes/theme";
 import type { SetupScene } from "./scenes/types";
 import { SetupWizardComponent } from "./wizard-overlay";