@linxiraos/pi-tui 1.1.27 → 1.2.1

package/src/prompt/word-completion.ts

@@ -56,9 +56,20 @@ interface WordQuery extends WordCompletionQuery {
 
 /** Editor text before the word starting at `start`, truncated to its last {@link BEFORE_LIMIT} code units. */
 function textBefore(lines: readonly string[], cursorLine: number, start: number): string {
-	let text = (lines[cursorLine] ?? "").slice(0, start);
-	for (let line = cursorLine - 1; line >= 0 && text.length < BEFORE_LIMIT; line--) {
-		text = `${lines[line] ?? ""}\n${text}`;
+	const head = (lines[cursorLine] ?? "").slice(0, start);
+	// Find the first line the capped tail reaches, then join once.
+	let length = head.length;
+	let first = cursorLine;
+	while (first > 0 && length < BEFORE_LIMIT) {
+		first--;
+		length += (lines[first] ?? "").length + 1;
+	}
+	let text = head;
+	if (first < cursorLine) {
+		const parts: string[] = [];
+		for (let line = first; line < cursorLine; line++) parts.push(lines[line] ?? "");
+		parts.push(head);
+		text = parts.join("\n");
 	}
 	if (text.length <= BEFORE_LIMIT) return text;
 	let cut = text.length - BEFORE_LIMIT;
@@ -111,6 +122,16 @@ export class WordCompletionProvider implements EditorTextAssistProvider {
 	#lastShown: { before: string; word: string } | undefined;
 	/** What the last `getWordCompletion` returned, so a fetch repaints only when it changes that. */
 	#displayed: { key: string; suffix: string | null } | undefined;
+	/** Last {@link #query} input snapshot (lines are copied: the editor mutates its array in place). */
+	#queryMemo:
+		| {
+				method: WordCompletionMethod;
+				lines: readonly string[];
+				cursorLine: number;
+				cursorCol: number;
+				query: WordQuery | undefined;
+		  }
+		| undefined;
 
 	/** Invoked when an asynchronous answer changes the rendered ghost text. */
 	onUpdate: (() => void) | undefined;
@@ -171,11 +192,23 @@ export class WordCompletionProvider implements EditorTextAssistProvider {
 
 	#query(lines: readonly string[], cursorLine: number, cursorCol: number): WordQuery | undefined {
 		if (this.#method === "off") return undefined;
+		// Rendering asks every frame; reuse the answer until the buffer, caret, or engine changes.
+		const memo = this.#queryMemo;
+		if (
+			memo?.method === this.#method &&
+			memo.cursorLine === cursorLine &&
+			memo.cursorCol === cursorCol &&
+			memo.lines.length === lines.length &&
+			memo.lines.every((line, index) => line === lines[index])
+		) {
+			return memo.query;
+		}
 		const query = wordCompletionQuery(lines, cursorLine, cursorCol, this.#prose);
-		if (!query) return undefined;
 		// The method keeps a request still in flight for the previous engine from
 		// shadowing the same word state on the new one.
-		return { key: `${this.#method}\u0000${query.prefix}\u0000${query.before}`, ...query };
+		const result = query && { key: `${this.#method}\u0000${query.prefix}\u0000${query.before}`, ...query };
+		this.#queryMemo = { method: this.#method, lines: lines.slice(), cursorLine, cursorCol, query: result };
+		return result;
 	}
 
 	#project(query: WordQuery): string | null {

package/src/render/composite.d.ts

@@ -0,0 +1,2 @@
+/** Splice overlay content into a base line at a specific column. Single-pass optimized. */
+export declare function compositeLineAt(baseLine: string, overlayLine: string, startCol: number, overlayWidth: number, totalWidth: number): string;

package/src/render/composite.ts

@@ -0,0 +1,64 @@
+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 {
+	// A full-width image row owns its terminal row; the writer must see its exact placement shape.
+	if (startCol === 0 && overlayWidth >= totalWidth && TERMINAL.isImageLine(overlayLine)) return overlayLine;
+	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/render/output-pane.d.ts

@@ -92,6 +92,7 @@ export declare class OutputPane implements Component {
     describe(_cx: DescribeContext): NativeNode;
     render(width: number): readonly string[];
     invalidate(): void;
+    releaseRenderCaches(): void;
 }
 /** Default styling for plain tool output while preserving existing ANSI. */
 export declare function styleToolOutputLine(line: string, theme: Theme): string;

package/src/render/output-pane.ts

@@ -302,6 +302,12 @@ export class OutputPane implements Component {
 		this.#text.invalidate();
 	}
 
+	releaseRenderCaches(): void {
+		this.#renderKey = "";
+		this.#text.setText("");
+		this.#text.releaseRenderCaches();
+	}
+
 	#appendToTail(text: string): void {
 		if (!text) return;
 		if (this.#lines.length === 0) this.#lines.push("");

package/src/render/render-utils.d.ts

@@ -298,6 +298,7 @@ export interface RenderedStringCache {
 export declare function createRenderedStringCache(): RenderedStringCache;
 /** Drop the memo so the next lookup re-renders (e.g. the render function identity changed). */
 export declare function invalidateRenderedStringCache(cache: RenderedStringCache): void;
+export declare function releaseRenderedStringCache(cache: RenderedStringCache): void;
 /** Reuse a rendered string while its theme, expansion, content, and salt match. */
 export declare function cachedRenderedString(cache: RenderedStringCache | undefined, theme: Theme, expanded: boolean, salt: string, content: string, render: () => string): string;
 /**

package/src/render/render-utils.ts

@@ -1128,6 +1128,9 @@ export function createCachedComponent(
 		invalidate() {
 			cached = undefined;
 		},
+		releaseRenderCaches() {
+			cached = undefined;
+		},
 	};
 }
 
@@ -1160,6 +1163,14 @@ export function invalidateRenderedStringCache(cache: RenderedStringCache): void
 	cache.theme = null;
 }
 
+export function releaseRenderedStringCache(cache: RenderedStringCache): void {
+	cache.theme = null;
+	cache.expanded = false;
+	cache.salt = "";
+	cache.content = "";
+	cache.value = "";
+}
+
 /** Reuse a rendered string while its theme, expansion, content, and salt match. */
 export function cachedRenderedString(
 	cache: RenderedStringCache | undefined,

package/src/render/tool-card.d.ts

@@ -46,6 +46,11 @@ export interface ToolCardOptions {
     paddingY?: number;
     ignoreTight?: boolean;
     onInvalidate?: () => void;
+    /**
+     * Drop builder-owned memos the next build recomputes. Called by
+     * {@link ToolCard.releaseRenderCaches}, which never calls `onInvalidate`.
+     */
+    onReleaseRenderCaches?: () => void;
     onDispose?: () => void;
 }
 /** Map transcript lifecycle terminology onto the output frame's visual states. */
@@ -71,6 +76,7 @@ export declare class ToolCard implements Component {
     handleInput(data: string): void;
     setIgnoreTight(ignore: boolean): void;
     invalidate(): void;
+    releaseRenderCaches(): void;
     dispose(): void;
 }
 /** Construct a lazy framed tool card. */

package/src/render/tool-card.ts

@@ -69,6 +69,11 @@ export interface ToolCardOptions {
 	paddingY?: number;
 	ignoreTight?: boolean;
 	onInvalidate?: () => void;
+	/**
+	 * Drop builder-owned memos the next build recomputes. Called by
+	 * {@link ToolCard.releaseRenderCaches}, which never calls `onInvalidate`.
+	 */
+	onReleaseRenderCaches?: () => void;
 	onDispose?: () => void;
 }
 
@@ -381,6 +386,16 @@ export class ToolCard implements Component {
 		this.#options.onInvalidate?.();
 	}
 
+	releaseRenderCaches(): void {
+		this.#block.invalidate();
+		this.#lastBlockOptions = undefined;
+		this.#plainKey = "";
+		this.#plainText.setText("");
+		this.#plainText.releaseRenderCaches();
+		for (const child of this.#renderedChildren) child.releaseRenderCaches?.();
+		this.#options.onReleaseRenderCaches?.();
+	}
+
 	dispose(): void {
 		if (this.#disposed) return;
 		this.#disposed = true;

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

@@ -20,6 +20,8 @@ export declare class WidthAwareText implements Component {
     setCustomBgFn(customBgFn?: (text: string) => string): void;
     setIgnoreTight(ignore: boolean): this;
     invalidate(): void;
+    /** The formatted text stays: the inner `Text` renders from it, so dropping it would free nothing. */
+    releaseRenderCaches(): void;
     /**
      * Re-run the formatter on the next render because its inputs changed.
      * Unlike {@link invalidate}, the inner `Text` keeps its wrap cache, so a

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

@@ -51,6 +51,11 @@ export class WidthAwareText implements Component {
 		this.#inner.invalidate();
 	}
 
+	/** The formatted text stays: the inner `Text` renders from it, so dropping it would free nothing. */
+	releaseRenderCaches(): void {
+		this.#inner.releaseRenderCaches();
+	}
+
 	/**
 	 * Re-run the formatter on the next render because its inputs changed.
 	 * Unlike {@link invalidate}, the inner `Text` keeps its wrap cache, so a

package/src/setup/scenes/model.ts

@@ -1,4 +1,5 @@
 import type { Model } from "@linxiraos/pi-ai";
+import { modelKind } from "@linxiraos/pi-catalog/types";
 import type { SgrMouseEvent } from "../../mouse";
 import { Text } from "../../components/text";
 import { WizardStep } from "../../components/wizard-step";
@@ -114,7 +115,7 @@ class ModelSceneController implements SetupSceneController {
 		const { available, all, current } = this.#host.ctx.getModels();
 		const source = this.#host.ctx.modelSource;
 		const roles = resolveRoleAssignments(source, all, available);
-		const items = buildBrowserItems(available);
+		const items = buildBrowserItems(available.filter(model => modelKind(model) === "chat"));
 		sortModelItems(items, { roles, mruOrder: source.mruOrder });
 		this.#browser.setRoles(roles);
 		this.#browser.setMruOrder(source.mruOrder);

package/src/setup/scenes/splash.ts

@@ -27,18 +27,11 @@ const RESET = "\x1b[0m";
 const MIN_SCENE_WIDTH = 56;
 const MIN_SCENE_HEIGHT = 22;
 
+/** Skip affordance; built at render time so it follows the live symbol preset. */
 function skipHint(): string {
-	return `press ${formatKeyHint("enter")} to skip`;
+	return tuiText("setupSkipHint", "press {key} to skip").replace("{key}", formatKeyHint("enter"));
 }
 
-/** Density ramp for the rippling water, lightest → heaviest. */
-const WATER_RAMP = [
-	{ min: 0.62, char: "█" },
-	{ min: 0.5, char: "▓" },
-	{ min: 0.36, char: "▒" },
-	{ min: 0.24, char: "░" },
-];
-
 function starAt(x: number, y: number, frame: number): string {
 	const hash = (x * 73856093) ^ (y * 19349663) ^ (frame * 83492791);
 	const bucket = Math.abs(hash) % 97;
@@ -85,35 +78,88 @@ function waterJitter(x: number, y: number): number {
 }
 
 /**
- * Rippling water amplitude in [0,1] at (x, y): three travelling sine waves
- * interfere, then a radial edge falloff and a downward fade concentrate the
- * ripples beneath the mark and dissolve them toward the edges/bottom. `t`
- * advances each tick, so the surface drifts.
+ * Time-invariant terms of the rippling water for one screen size: three
+ * travelling sine waves interfere, then a radial edge falloff and a downward
+ * fade concentrate the ripples beneath the mark and dissolve them toward the
+ * edges/bottom. Only the sine phases move per tick, so everything else is
+ * computed once per size.
  */
-function waterAmplitude(
-	x: number,
-	y: number,
-	cx: number,
-	waterTop: number,
-	waterHeight: number,
-	width: number,
-	t: number,
-): number {
-	const dx = (x - cx) / 2;
-	const dy = y - waterTop;
-	const dist = Math.sqrt(dx * dx + dy * dy);
-	const wave =
-		0.5 * Math.sin(dist * 0.55 - t) +
-		0.3 * Math.sin(x * 0.22 + y * 0.45 - t * 0.7) +
-		0.2 * Math.sin(Math.abs(dx) * 0.8 + dy * 0.5 - t * 1.4);
-	const level = 0.5 + 0.5 * wave;
-	const edge = Math.max(0, 1 - Math.abs(x - cx) / (width * 0.5));
-	const fade = Math.max(0, 1 - (dy / Math.max(1, waterHeight)) * 0.55);
-	return level * edge ** 0.7 * fade;
+interface WaterField {
+	readonly width: number;
+	readonly height: number;
+	readonly waterTop: number;
+	/** Per cell (row-major from `waterTop`): `dist * 0.55`. */
+	readonly radial: Float64Array;
+	/** Per cell: `x * 0.22 + y * 0.45`. */
+	readonly diagonal: Float64Array;
+	/** Per cell: `|dx| * 0.8 + dy * 0.5`. */
+	readonly cross: Float64Array;
+	/** Per cell: `(waterJitter(x, y) - 0.5) * 0.06`. */
+	readonly jitter: Float64Array;
+	/** Per column: `edge ** 0.7`. */
+	readonly edge: Float64Array;
+	/** Per water row: downward fade. */
+	readonly fade: Float64Array;
+}
+
+let waterField: WaterField | undefined;
+
+function getWaterField(width: number, height: number, cx: number, waterTop: number): WaterField {
+	const cached = waterField;
+	if (cached && cached.width === width && cached.height === height && cached.waterTop === waterTop) return cached;
+	const waterHeight = Math.max(1, height - waterTop);
+	const rows = Math.max(0, height - waterTop);
+	const radial = new Float64Array(rows * width);
+	const diagonal = new Float64Array(rows * width);
+	const cross = new Float64Array(rows * width);
+	const jitter = new Float64Array(rows * width);
+	const edge = new Float64Array(width);
+	const fade = new Float64Array(rows);
+	for (let x = 0; x < width; x++) edge[x] = Math.max(0, 1 - Math.abs(x - cx) / (width * 0.5)) ** 0.7;
+	for (let row = 0; row < rows; row++) {
+		const y = waterTop + row;
+		const dy = y - waterTop;
+		fade[row] = Math.max(0, 1 - (dy / waterHeight) * 0.55);
+		for (let x = 0; x < width; x++) {
+			const i = row * width + x;
+			const dx = (x - cx) / 2;
+			radial[i] = Math.sqrt(dx * dx + dy * dy) * 0.55;
+			diagonal[i] = x * 0.22 + y * 0.45;
+			cross[i] = Math.abs(dx) * 0.8 + dy * 0.5;
+			jitter[i] = (waterJitter(x, y) - 0.5) * 0.06;
+		}
+	}
+	waterField = { width, height, waterTop, radial, diagonal, cross, jitter, edge, fade };
+	return waterField;
+}
+
+/** Water glyph for an amplitude, lightest → heaviest density ramp; undefined below the floor. */
+function waterChar(amp: number): string | undefined {
+	if (amp > 0.62) return "█";
+	if (amp > 0.5) return "▓";
+	if (amp > 0.36) return "▒";
+	if (amp > 0.24) return "░";
+	return undefined;
 }
 
+/** Reused cell grid; resized when the screen changes. */
+let splashCells: string[][] = [];
+
+function resetCells(width: number, height: number): string[][] {
+	if (splashCells.length !== height || splashCells[0]?.length !== width) {
+		// oxlint-disable-next-line unicorn/no-new-array -- length preallocation
+		splashCells = Array.from({ length: height }, () => new Array<string>(width).fill(" "));
+	} else {
+		for (const row of splashCells) row.fill(" ");
+	}
+	return splashCells;
+}
+
+/** Per-frame gradient escapes, one per screen diagonal (the gradient only varies along it). */
+let diagonalEscapes: (string | undefined)[] = [];
+
 /**
- * Animated setup splash, in the spirit of the omp landing page: the brand ζ
+ * Animated setup splash, in the spirit of the Zeta visual identity: the brand ζ
  * mark rendered with the live diagonal gradient + shine sweep, rising out of a
  * rippling, gradient-lit water surface, under a faint twinkling starfield. The
  * mark and water share one continuous gradient so the sweep reads across the
@@ -132,23 +178,46 @@ export function renderSetupSplash(width: number, height: number, elapsedMs: numb
 	const cx = Math.floor(w / 2);
 	const surfaceTime = frame * 0.13;
 
-	// [suppressed] length preallocation
-	const cells: string[][] = Array.from({ length: h }, () => new Array<string>(w).fill(" "));
+	const cells = resetCells(w, h);
 	const put = (x: number, y: number, glyph: string): void => {
 		if (y >= 0 && y < h && x >= 0 && x < w) cells[y][x] = glyph;
 	};
+	// Every cell on a diagonal shares one gradient position, so resolve each
+	// escape once per frame instead of once per cell.
+	const diagonals = w + h - 1;
+	if (diagonalEscapes.length !== diagonals) diagonalEscapes = Array.from({ length: diagonals });
+	else diagonalEscapes.fill(undefined);
+	const escapes = diagonalEscapes;
+	const gradient = (x: number, y: number): string => {
+		const d = x + (h - 1 - y);
+		let escape = escapes[d];
+		if (escape === undefined) {
+			escape = gradientEscape(screenGradientT(x, y, w, h, phase), shine);
+			escapes[d] = escape;
+		}
+		return escape;
+	};
 
 	const hx = Math.floor((w - LOGO_WIDTH) / 2);
 	const hy = Math.max(2, Math.floor(h * 0.16));
 	const waterTop = hy + LOGO_HEIGHT;
-	const waterHeight = Math.max(1, h - waterTop);
 
 	// 1. rippling water surface (shares the screen-wide gradient with the mark)
+	const field = getWaterField(w, h, cx, waterTop);
+	const tDiagonal = surfaceTime * 0.7;
+	const tCross = surfaceTime * 1.4;
 	for (let y = waterTop; y < h; y++) {
+		const row = y - waterTop;
+		const fade = field.fade[row];
 		for (let x = 0; x < w; x++) {
-			const amp = waterAmplitude(x, y, cx, waterTop, waterHeight, w, surfaceTime) + (waterJitter(x, y) - 0.5) * 0.06;
-			const cell = WATER_RAMP.find(step => amp > step.min);
-			if (cell) put(x, y, gradientEscape(screenGradientT(x, y, w, h, phase), shine) + cell.char + RESET);
+			const i = row * w + x;
+			const wave =
+				0.5 * Math.sin(field.radial[i] - surfaceTime) +
+				0.3 * Math.sin(field.diagonal[i] - tDiagonal) +
+				0.2 * Math.sin(field.cross[i] - tCross);
+			const level = 0.5 + 0.5 * wave;
+			const char = waterChar(level * field.edge[x] * fade + field.jitter[i]);
+			if (char) cells[y][x] = gradient(x, y) + char + RESET;
 		}
 	}
 	// 2. twinkling starfield in the sky above the water
@@ -162,18 +231,15 @@ export function renderSetupSplash(width: number, height: number, elapsedMs: numb
 	LARGE_LOGO.forEach((line, row) => {
 		let col = 0;
 		for (const ch of line) {
-			if (ch !== " ") {
-				put(
-					hx + col,
-					hy + row,
-					gradientEscape(screenGradientT(hx + col, hy + row, w, h, phase), shine) + ch + RESET,
-				);
-			}
+			const x = hx + col;
+			const y = hy + row;
+			if (ch !== " " && y >= 0 && y < h && x >= 0 && x < w) cells[y][x] = gradient(x, y) + ch + RESET;
 			col++;
 		}
 	});
-	// 4. skip hint on a cleared strip at the bottom so it stays legible over the water
-	const hint = tuiText("setupSkipHint", "press enter to skip");
+	// 4. skip hint on a cleared strip at the bottom so it stays legible over the water.
+	// `formatKeyHint` yields plain glyphs (no ANSI), so per-character dim styling is safe.
+	const hint = skipHint();
 	const hintWidth = visibleWidth(hint);
 	const hintStart = Math.floor((w - hintWidth) / 2);
 	const hintRow = h - 1;
@@ -219,9 +285,6 @@ function renderCompactSplash(width: number, height: number, phase: number, shine
 		lines.push(width > 0 ? padToWidth(item !== undefined ? centerLine(item, width) : "", width) : "");
 	}
 	if (height > 2)
-		lines[height - 2] =
-			width > 0
-				? padToWidth(centerLine(theme.fg("dim", tuiText("setupSkipHint", "press enter to skip")), width), width)
-				: "";
+		lines[height - 2] = width > 0 ? padToWidth(centerLine(theme.fg("dim", skipHint()), width), width) : "";
 	return lines;
 }

package/src/setup/scenes/types.ts

@@ -29,6 +29,7 @@ export interface SetupHost extends SetupUiHost {
 	readonly disabledProviders: readonly string[];
 	readonly authStorage: AuthStorage;
 	readonly modelSource: ModelBrowserSource;
+	/** Available and catalog models of every kind; role chips resolve over all of them, rows list chat models. */
 	getModels(): { available: Model[]; all: Model[]; current: Model | undefined };
 	refreshModels(): Promise<void>;
 	selectModel(model: Model, selector: string): Promise<void>;