@oh-my-pi/pi-tui 18.4.0 → 18.4.2

package/src/prompt/composer.ts

@@ -1,5 +1,8 @@
-import type { EditorTopBorder } from "../components/composer/types";
+import { getComposerStyle } from "../components/composer/registry";
 import { Spacer } from "../components/spacer";
+import type { StatusLineComponent } from "../status-line/component";
+import type { StatusLineSession } from "../status-line/host";
+import { createStartupStatusLine, type StatusLineStartupData } from "../status-line/startup";
 import { isInsideTerminalMultiplexer } from "../terminal-multiplexer";
 import { ProcessTerminal, type Terminal } from "../terminal";
 import {
@@ -12,7 +15,7 @@ import {
 	type TUIOptions,
 	type ViewportSize,
 } from "../tui";
-import { sliceWithWidth, truncateToWidth, visibleWidth } from "../utils";
+import { sliceWithWidth, visibleWidth } from "../utils";
 import { postmortem } from "@oh-my-pi/pi-utils";
 import { CustomEditor } from "./custom-editor";
 import type { WordCompletionMethod } from "./word-completion";
@@ -56,28 +59,22 @@ export interface ComposerWelcomeUpdate {
 	readonly modelName?: string;
 	readonly providerName?: string;
 	readonly recentSessions?: readonly RecentSession[];
-	readonly lspServers?: readonly LspServerInfo[];
+	/** Detected project servers; `null` means LSP is disabled and hides the welcome section. */
+	readonly lspServers?: readonly LspServerInfo[] | null;
 }
 
 /**
- * Placeholder-only status chrome replayed on the next first frame so the
- * status band/border exists before the session-aware status line attaches.
- * Bound to the composer shape it was rendered for; a different shape drops it.
+ * Status-bar inputs persisted by the last session. The first frame renders
+ * them through a startup {@link StatusLineComponent} at the live width until
+ * the session-aware status line attaches.
  */
-export interface ComposerStatusSnapshot {
-	readonly shape: string;
-	/** ANSI wrapper of the editor border at snapshot time (session accent or thinking color). */
+export interface ComposerStatusCache {
+	/** ANSI wrapper of the editor border when persisted (session accent or thinking color). */
 	readonly borderColor?: {
 		readonly prefix: string;
 		readonly suffix: string;
 	};
-	/** Status content embedded in the editor's top chrome (`top-border`, `top-band`, `top-rule-chip`). */
-	readonly topBorder?: {
-		readonly content: string;
-		readonly width: number;
-	};
-	/** Standalone bottom-bar rows (`pi`/`claude` shapes), gap row included. */
-	readonly bottomLines: readonly string[];
+	readonly statusLine: StatusLineStartupData;
 }
 
 /** Optional dependencies and initial state for a standalone composer. */
@@ -87,7 +84,7 @@ export interface ComposerOptions {
 	readonly tuiOptions?: TUIOptions;
 	readonly preferences?: Partial<ComposerPreferences>;
 	readonly welcome?: ComposerWelcomeUpdate;
-	readonly status?: ComposerStatusSnapshot;
+	readonly status?: ComposerStatusCache;
 	readonly exit?: (code: number) => void;
 	readonly now?: () => number;
 }
@@ -117,30 +114,16 @@ export interface ComposerStartOptions {
 	readonly deferInput?: boolean;
 }
 
-/**
- * Mount slot for the session-aware status component below the editor. Shows
- * placeholder rows during startup until the real component mounts.
- */
+/** Mount slot below the editor: the startup status line, then the session-aware one. */
 class StatusHost implements Component {
-	#lines: readonly string[] = [];
 	#component: Component | undefined;
 
-	get mounted(): boolean {
-		return this.#component !== undefined;
-	}
-
-	setLines(lines: readonly string[]): void {
-		this.#lines = lines;
-	}
-
 	setComponent(component: Component): void {
 		this.#component = component;
-		this.#lines = [];
 	}
 
 	render(width: number): readonly string[] {
-		if (this.#component) return this.#component.render(width);
-		return this.#lines.map(line => truncateToWidth(line, width));
+		return this.#component?.render(width) ?? [];
 	}
 }
 
@@ -220,11 +203,12 @@ export class Composer implements TerminalFrameProvider {
 	#modelName = "";
 	#providerName = "";
 	#recentSessions: RecentSession[] = [];
-	#lspServers: LspServerInfo[] = [];
+	#lspServers: LspServerInfo[] | null = [];
 	#headerBefore: readonly Component[] = [];
 	#headerAfter: readonly Component[] = [];
 	#runtimeChildren: readonly Component[] = [];
-	#statusSnapshot: ComposerStatusSnapshot | undefined;
+	/** Cache-driven status line shown until {@link setStatusComponent} mounts the session's. */
+	#startupStatus: StatusLineComponent | undefined;
 	#runtimeMounted = false;
 	// Composer-owned history id space. Transcript batch ids restart across
 	// container clears/swaps; the composer translates them into one monotonic
@@ -291,7 +275,6 @@ export class Composer implements TerminalFrameProvider {
 		this.#exit = options.exit ?? (code => postmortem.exitProcess(code));
 		this.#now = options.now ?? Date.now;
 		this.#preferences = { ...COMPOSER_DEFAULTS, ...options.preferences };
-		this.#statusSnapshot = options.status;
 		this.#applyWelcomeUpdate(options.welcome ?? {});
 
 		this.ui = new TUI(
@@ -318,7 +301,13 @@ export class Composer implements TerminalFrameProvider {
 		} catch {
 			// Extension-defined styles arrive with the session; InteractiveMode reapplies them.
 		}
-		this.#applyStatusSnapshot();
+		if (options.status) {
+			const { borderColor, statusLine } = options.status;
+			if (borderColor) this.editor.borderColor = text => `${borderColor.prefix}${text}${borderColor.suffix}`;
+			this.#startupStatus = createStartupStatusLine(statusLine);
+			this.#statusHost.setComponent(this.#startupStatus);
+			this.#startupStatus.attachToEditor(this.editor, getComposerStyle(this.#preferences.composerShape));
+		}
 		// Emergency controls stay active until InteractiveMode installs configured bindings.
 		// They deliberately mirror the interactive editor's contract so a stalled startup
 		// never behaves differently from a healthy one: Ctrl+C clears the draft and a second
@@ -380,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.
@@ -635,7 +627,9 @@ export class Composer implements TerminalFrameProvider {
 			// retires first so transcript prefixes can follow in order.
 			const renderedHeader = this.#header.render(width);
 			if (renderedHeader.length > 0) {
-				const liveRows = transcript.liveRowCount(width);
+				// Only the comparison below reads the height, so the walk stops at
+				// the budget instead of rendering every replayed block (#12933).
+				const liveRows = transcript.liveRowCount(width, Math.max(0, rows - renderedHeader.length - chromeRows));
 				if (!this.#historyFlush && renderedHeader.length + chromeRows + liveRows <= rows) return undefined;
 				this.#offeredHistory = {
 					id: this.#nextHistoryId++,
@@ -789,7 +783,7 @@ export class Composer implements TerminalFrameProvider {
 			autocomplete: this.#preferences.spellingAutocomplete,
 			autocorrect: this.#preferences.spellingAutocorrect,
 		});
-		this.#applyStatusSnapshot();
+		this.#startupStatus?.attachToEditor(this.editor, getComposerStyle(this.#preferences.composerShape));
 		if (this.#preferences.quiet) {
 			this.#welcome?.stopIntro();
 			this.#welcome = undefined;
@@ -834,42 +828,20 @@ export class Composer implements TerminalFrameProvider {
 	}
 
 	/**
-	 * Mount the session-aware status component into the slot below the editor.
-	 * Drops the speculative snapshot; the caller installs the real top-border
+	 * Mount the session-aware status component into the slot below the editor,
+	 * retiring the startup status line; the caller installs the real top-border
 	 * provider through its composer-shape sync.
 	 */
-	setStatusComponent(component: Component): void {
+	setStatusComponent<TSession extends StatusLineSession>(component: StatusLineComponent<TSession>): void {
+		if (this.#startupStatus) component.adoptGitStatus(this.#startupStatus);
+		this.#disposeStartupStatus();
 		this.#statusHost.setComponent(component);
-		this.#statusSnapshot = undefined;
 		this.editor.setTopBorderProvider(undefined);
 	}
 
-	/** Cached placeholder top-border content fitted to the current editor width. */
-	#speculativeTopBorder(availableWidth: number): EditorTopBorder | undefined {
-		const border = this.#statusSnapshot?.topBorder;
-		if (!border) return undefined;
-		if (border.width <= availableWidth) return { content: border.content, width: border.width };
-		const content = truncateToWidth(border.content, availableWidth);
-		return { content, width: visibleWidth(content) };
-	}
-
-	/** Install the cached chrome for the current shape; a shape mismatch clears it. */
-	#applyStatusSnapshot(): void {
-		if (this.#statusHost.mounted) return;
-		const snapshot = this.#statusSnapshot;
-		if (!snapshot || snapshot.shape !== this.#preferences.composerShape) {
-			this.editor.setTopBorderProvider(undefined);
-			this.#statusHost.setLines([]);
-			return;
-		}
-		if (snapshot.borderColor) {
-			const { prefix, suffix } = snapshot.borderColor;
-			this.editor.borderColor = text => `${prefix}${text}${suffix}`;
-		}
-		this.editor.setTopBorderProvider(
-			snapshot.topBorder ? availableWidth => this.#speculativeTopBorder(availableWidth) : undefined,
-		);
-		this.#statusHost.setLines(snapshot.bottomLines);
+	#disposeStartupStatus(): void {
+		this.#startupStatus?.dispose();
+		this.#startupStatus = undefined;
 	}
 
 	/** Mount or replace session-aware root children while preserving the header and status hosts. */
@@ -908,6 +880,7 @@ export class Composer implements TerminalFrameProvider {
 	stop(): void {
 		if (!this.#started || this.#stopped || this.#transferred) return;
 		this.#welcome?.stopIntro();
+		this.#disposeStartupStatus();
 		this.ui.stop();
 		this.#stopped = true;
 	}
@@ -917,7 +890,7 @@ export class Composer implements TerminalFrameProvider {
 		if (update.modelName !== undefined) this.#modelName = update.modelName;
 		if (update.providerName !== undefined) this.#providerName = update.providerName;
 		if (update.recentSessions !== undefined) this.#recentSessions = [...update.recentSessions];
-		if (update.lspServers !== undefined) this.#lspServers = [...update.lspServers];
+		if (update.lspServers !== undefined) this.#lspServers = update.lspServers && [...update.lspServers];
 	}
 
 	#ensureWelcome(): void {

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/prompt/welcome.ts

@@ -186,7 +186,8 @@ export class WelcomeComponent implements Component {
 		private modelName: string,
 		private providerName: string,
 		private recentSessions: RecentSession[] = [],
-		private lspServers: LspServerInfo[] = [],
+		/** Detected project servers; `null` means LSP is disabled and hides the section. */
+		private lspServers: LspServerInfo[] | null = [],
 	) {}
 	get tip(): string | undefined {
 		this.#nagRoll ??= Math.random();
@@ -272,7 +273,7 @@ export class WelcomeComponent implements Component {
 		this.invalidate();
 	}
 
-	setLspServers(servers: LspServerInfo[]): void {
+	setLspServers(servers: LspServerInfo[] | null): void {
 		this.lspServers = servers;
 		this.invalidate();
 	}
@@ -365,29 +366,6 @@ export class WelcomeComponent implements Component {
 			sessionLines.push("");
 		}
 
-		// LSP servers content
-		const lspLines: string[] = [];
-		if (this.lspServers.length === 0) {
-			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
-		} else {
-			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
-				const icon =
-					server.status === "ready"
-						? theme.styledSymbol("status.enabled", "success")
-						: server.status === "available"
-							? theme.styledSymbol("status.enabled", "dim")
-							: server.status === "connecting"
-								? theme.styledSymbol("status.pending", "muted")
-								: theme.styledSymbol("status.error", "error");
-				const exts = server.fileTypes.slice(0, 3).join(" ");
-				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
-			}
-		}
-		// Pad to the fixed slot count so the box height doesn't depend on server count.
-		while (lspLines.length < WELCOME_LSP_SLOTS) {
-			lspLines.push("");
-		}
-
 		// Right column
 		const rightLines = [
 			` ${theme.bold(theme.fg("accent", "Tips"))}`,
@@ -395,9 +373,7 @@ export class WelcomeComponent implements Component {
 			` ${theme.fg("dim", "/")}${theme.fg("muted", " for commands")}`,
 			` ${theme.fg("dim", "!")}${theme.fg("muted", " to run bash")}`,
 			` ${theme.fg("dim", "$")}${theme.fg("muted", " to run python")}`,
-			separator,
-			` ${theme.bold(theme.fg("accent", "LSP Servers"))}`,
-			...lspLines,
+			...this.#renderLspSection(separator),
 			separator,
 			` ${theme.bold(theme.fg("accent", "Recent sessions"))}`,
 			...sessionLines,
@@ -452,6 +428,33 @@ export class WelcomeComponent implements Component {
 		return lines;
 	}
 
+	/** Right-column LSP rows padded to a fixed height; empty when LSP is disabled. */
+	#renderLspSection(separator: string): string[] {
+		if (this.lspServers === null) return [];
+		const lspLines: string[] = [];
+		if (this.lspServers.length === 0) {
+			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
+		} else {
+			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
+				const icon =
+					server.status === "ready"
+						? theme.styledSymbol("status.enabled", "success")
+						: server.status === "available"
+							? theme.styledSymbol("status.enabled", "dim")
+							: server.status === "connecting"
+								? theme.styledSymbol("status.pending", "muted")
+								: theme.styledSymbol("status.error", "error");
+				const exts = server.fileTypes.slice(0, 3).join(" ");
+				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
+			}
+		}
+		// Pad to the fixed slot count so the box height doesn't depend on server count.
+		while (lspLines.length < WELCOME_LSP_SLOTS) {
+			lspLines.push("");
+		}
+		return [separator, ` ${theme.bold(theme.fg("accent", "LSP Servers"))}`, ...lspLines];
+	}
+
 	/**
 	 * Render the per-instance tip line: the `customMessageLabel`-themed `Tip:`
 	 * label followed by a `muted` body, the whole line italicized. Returns `[]`

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);