pi-zentui 0.29.1 → 0.29.2

package/docs/configuration.md

@@ -776,7 +776,7 @@ Rail, Tree, and Streaming share one private `AssistantMessageComponent` wrapper.
 
 Rail parses each native contiguous thinking run and shows every label in that run. Tree shows the latest five in each run; neither aggregates across intervening text or tool blocks. Both follow Pi's thinking visibility. Labels come from headings, top-level list items, and blank-line-separated prose. Complete strict 7-bit CSI SGR styling is stripped before parsing; every other terminal control, unsafe or unstructured content, malformed or over-limit input, unterminated fences/math, and unsupported structure leave that complete run native. Fenced code, Mermaid, display math, and indented nested content remain opaque bodies.
 
-Each selected SGR-free label is rendered as Markdown by a fresh Pi `Markdown` with the host child's exact theme, default `thinkingText`/italic style, and transform options. Native emphasis, code, links, HTML, LaTeX, and custom theme/transform callbacks therefore remain authoritative. Host horizontal padding is applied externally. Each label is exactly one terminal row; Pi TUI's ANSI/OSC/grapheme-aware width utilities crop the first rendered row and reserve one cell for `…` only when required. Empty, image, non-text, impossible-width, or throwing output restores the whole native run. Connectors are separate from Markdown and call the current `theme.fg("accent", connector)` every render, so custom themes directly control their appearance. Visible forms are:
+Each selected SGR-free label is rendered as Markdown by a fresh Pi `Markdown` with the host child's exact theme, default `thinkingText`/italic style, and transform options. Native emphasis, code, links, HTML, LaTeX, and custom theme/transform callbacks therefore remain authoritative. Host horizontal padding is applied externally. Each label is exactly one terminal row; Pi TUI's ANSI/OSC/grapheme-aware width utilities crop the first rendered row and reserve one cell for `…` only when required. Empty, image, non-text, impossible-width, or throwing output restores the whole native run. Connectors are separate from Markdown and call the current `theme.fg("accent", connector)` when building a layout, so custom themes directly control their appearance. Successful layouts are reused while width and connector-theme identity are unchanged; a width or theme identity change or invalidation refreshes them. Same-object theme mutations require invalidation. Visible forms are:
 
 ```text
 │ Thinking       ┆ Thinking

package/extensions/zentui/thinking-experimental.ts

@@ -218,6 +218,8 @@ function croppedMarkdownRow(markdown: Markdown, source: string, width: number):
 /** A width-bounded private replacement for one native contiguous thinking run. */
 export class ThinkingStepsRows implements Component {
 	private readonly title: Markdown;
+	// Content and presentation are constructor-fixed; retain only the last successful layout.
+	private renderedCache: { width: number; theme: AccentTheme; rows: string[] } | undefined;
 	private readonly labels: Array<{ source: string; markdown: Markdown }>;
 
 	constructor(
@@ -246,12 +248,23 @@ export class ThinkingStepsRows implements Component {
 	}
 
 	private renderNative(width: number): string[] {
+		this.renderedCache = undefined;
 		this.onPresentation?.(false);
 		return this.native.render(width);
 	}
 
 	render(width: number): string[] {
 		try {
+			let theme: AccentTheme | undefined;
+			const cached = this.renderedCache;
+			if (cached?.width === width) {
+				// The host theme getter is a read-only lookup, including on cache hits.
+				theme = this.getTheme();
+				if (cached.theme === theme) {
+					this.onPresentation?.(true);
+					return [...cached.rows];
+				}
+			}
 			const outer = this.shape.paddingX;
 			const innerWidth = Math.floor(width) - outer * 2;
 			const titleConnector = this.mode === "rail" ? "│ " : "┆ ";
@@ -276,7 +289,7 @@ export class ThinkingStepsRows implements Component {
 				if (!label) return this.renderNative(width);
 				renderedLabels.push({ connector, label });
 			}
-			const theme = this.getTheme();
+			theme ??= this.getTheme();
 			const left = " ".repeat(outer);
 			const right = " ".repeat(outer);
 			const rows = [
@@ -286,14 +299,17 @@ export class ThinkingStepsRows implements Component {
 				),
 			];
 			if (!rows.every((row) => visibleWidth(row) <= width)) return this.renderNative(width);
+			this.renderedCache = { width, theme, rows };
 			this.onPresentation?.(true);
-			return rows;
+			// Containers and decorators may mutate their returned array.
+			return [...rows];
 		} catch {
 			return this.renderNative(width);
 		}
 	}
 
 	invalidate(): void {
+		this.renderedCache = undefined;
 		this.onInvalidate?.();
 		this.native.invalidate();
 		this.title.invalidate();

package/extensions/zentui/user-message.ts

@@ -54,7 +54,7 @@ function isNativeMarkdown(renderer: unknown): boolean {
 
 const sanitizedMarkdownCache = new WeakMap<
 	object,
-	{ lines: unknown; text: string; options: unknown }
+	{ lines: unknown; sourceText: string; text: string; options: unknown }
 >();
 
 // Framing eligibility is deliberately narrower than the source trust boundary.
@@ -74,7 +74,14 @@ function withSanitizedMarkdownSources<T>(instance: unknown, render: (adapted: bo
 			if (!isRecord(options.value)) return;
 			const transform = options.value.transform;
 			if (transform !== undefined && typeof transform !== "function") return;
-			const source = sanitizeUserMessageSourceText(text.value);
+			const cached = sanitizedMarkdownCache.get(value);
+			// Source sanitization depends only on the immutable raw string, not on
+			// width, theme, options or native output invalidation. Reuse just that
+			// result; the guarded native render and its cache checks still run.
+			const source =
+				cached && cached.sourceText === text.value
+					? cached.text
+					: sanitizeUserMessageSourceText(text.value);
 			const safeOptions = {
 				...options.value,
 				...(transform
@@ -86,7 +93,6 @@ function withSanitizedMarkdownSources<T>(instance: unknown, render: (adapted: bo
 						}
 					: {}),
 			};
-			const cached = sanitizedMarkdownCache.get(value);
 			restore.push(() => {
 				Object.defineProperty(value, "text", text);
 				Object.defineProperty(value, "options", options);
@@ -95,6 +101,7 @@ function withSanitizedMarkdownSources<T>(instance: unknown, render: (adapted: bo
 				// them normally, and cleanup needs no retained component references.
 				sanitizedMarkdownCache.set(value, {
 					lines: value.cachedText === source ? value.cachedLines : undefined,
+					sourceText: text.value,
 					text: source,
 					options: options.value,
 				});

package/extensions/zentui/working-line.ts

@@ -434,20 +434,26 @@ export function normalizeWorkingLineStyleSpec(value: ColorSpec | undefined): Col
 	return tokens.join(" ");
 }
 
-function renderTier(
+function workingLineTierRenderer(
 	theme: ThemeLike,
 	config: WorkingLineComponentConfig,
 	colors: PolishedTuiColors,
-	tier: Tier,
-	text: string,
-): string {
-	return renderStyleForSourceOrFallback(
-		theme,
-		config.colorSource,
-		normalizeWorkingLineStyleSpec(workingLineColor(config, colors, tier)),
-		WORKING_LINE_FALLBACKS[tier],
-		text,
-	);
+): (tier: Tier, text: string) => string {
+	// Palette validation is invariant within this build, but must not survive a
+	// metric/config/theme rebuild. Resolve lazily so unused tiers remain untouched.
+	const tierStyles = new Map<Tier, ColorSpec | undefined>();
+	return (tier, text) => {
+		if (!tierStyles.has(tier)) {
+			tierStyles.set(tier, normalizeWorkingLineStyleSpec(workingLineColor(config, colors, tier)));
+		}
+		return renderStyleForSourceOrFallback(
+			theme,
+			config.colorSource,
+			tierStyles.get(tier),
+			WORKING_LINE_FALLBACKS[tier],
+			text,
+		);
+	};
 }
 
 /** Resolve the fixed, nonanimated high-tier style used by persisted Turn summaries. */
@@ -484,9 +490,7 @@ export function snapshotWorkingLineHighStyle(
 }
 
 function renderAnimatedText(
-	theme: ThemeLike,
-	config: WorkingLineComponentConfig,
-	colors: PolishedTuiColors,
+	render: (tier: Tier, text: string) => string,
 	cells: GraphemeCell[],
 	width: number,
 	tick: number,
@@ -504,7 +508,7 @@ function renderAnimatedText(
 		if (previous?.tier === tier) previous.text += cell.text;
 		else runs.push({ tier, text: cell.text });
 	}
-	return runs.map((run) => renderTier(theme, config, colors, run.tier, run.text)).join("");
+	return runs.map((run) => render(run.tier, run.text)).join("");
 }
 
 export type WorkingLineRuntimeSegments = {
@@ -813,8 +817,7 @@ function spinnerRowCells(
 function renderWorkingLineSchedule(
 	definition: ScheduleDefinition,
 	config: WorkingLineComponentConfig,
-	colors: PolishedTuiColors,
-	theme: ThemeLike,
+	render: (tier: Tier, text: string) => string,
 	rowCells: GraphemeCell[],
 	spinnerCells: Map<string, GraphemeCell[]> | undefined,
 	width: number,
@@ -834,15 +837,7 @@ function renderWorkingLineSchedule(
 	const renderTextForTick = (tick: number): string => {
 		let cachedText = textRenderCache.get(tick);
 		if (cachedText === undefined) {
-			cachedText = renderAnimatedText(
-				theme,
-				config,
-				colors,
-				rowCells,
-				width,
-				tick,
-				config.textAnimation,
-			);
+			cachedText = renderAnimatedText(render, rowCells, width, tick, config.textAnimation);
 			textRenderCache.set(tick, cachedText);
 		}
 		return cachedText;
@@ -856,7 +851,7 @@ function renderWorkingLineSchedule(
 		let cachedSpinner = spinnerRenderCache.get(index);
 		if (cachedSpinner === undefined) {
 			const glyph = spinner.frames[index] ?? spinner.frames[0];
-			cachedSpinner = renderTier(theme, config, colors, "high", glyph);
+			cachedSpinner = render("high", glyph);
 			spinnerRenderCache.set(index, cachedSpinner);
 		}
 		return cachedSpinner;
@@ -874,9 +869,7 @@ function renderWorkingLineSchedule(
 			spinner.frames[state.spinnerTick % spinner.frames.length] ?? spinner.frames[0];
 		const frame = config.animateSpinnerColor
 			? `${renderAnimatedText(
-					theme,
-					config,
-					colors,
+					render,
 					spinnerCells?.get(spinnerGlyph) ?? rowCells,
 					width,
 					state.textTick,
@@ -934,6 +927,7 @@ function buildPreparedWorkingLineFrames(
 	const textOrigin = config.animateSpinnerColor ? 0 : spinnerWidth + 1;
 	const textCycle = textPeriod(config.textAnimation, animatedTextWidth);
 	const textPhase = normalizedPhaseTick(textStartTick, textCycle);
+	const render = workingLineTierRenderer(theme, config, colors);
 
 	if (config.textAnimation === "disabled") {
 		const frameStates = Array.from({ length: spinner.frames.length }, (_, index) => ({
@@ -943,7 +937,7 @@ function buildPreparedWorkingLineFrames(
 		let codeUnits = 0;
 		const frames = frameStates.map((state) => {
 			const glyph = spinner.frames[state.spinnerTick % spinner.frames.length] ?? spinner.frames[0];
-			const frame = `${renderTier(theme, config, colors, "mid", `${glyph} ${composed.row}`)}${SGR_RESET}`;
+			const frame = `${render("mid", `${glyph} ${composed.row}`)}${SGR_RESET}`;
 			codeUnits += frame.length;
 			if (codeUnits > MAX_WORKING_LINE_FRAME_CODE_UNITS)
 				throw new Error("Working-line animation exceeds its memory cap");
@@ -985,8 +979,7 @@ function buildPreparedWorkingLineFrames(
 		const rendered = renderWorkingLineSchedule(
 			exact,
 			config,
-			colors,
-			theme,
+			render,
 			rowCells,
 			spinnerCells,
 			animatedTextWidth,
@@ -1029,8 +1022,7 @@ function buildPreparedWorkingLineFrames(
 		const rendered = renderWorkingLineSchedule(
 			fallback,
 			config,
-			colors,
-			theme,
+			render,
 			rowCells,
 			spinnerCells,
 			animatedTextWidth,
@@ -1064,6 +1056,7 @@ export function buildWorkingLineSpinnerFrames(
 ): { frames: string[]; frameStates: WorkingLineFrameState[]; intervalMs: number } {
 	const spinner = WORKING_LINE_SPINNERS[config.spinner];
 	workingLineSpinnerWidth(config.spinner);
+	const render = workingLineTierRenderer(theme, config, colors);
 	const phase = Number.isFinite(startTick) ? Math.max(0, Math.floor(startTick)) : 0;
 	const frameStates = Array.from({ length: spinner.frames.length }, (_, index) => ({
 		spinnerTick: phase + index,
@@ -1071,7 +1064,7 @@ export function buildWorkingLineSpinnerFrames(
 	}));
 	const frames = frameStates.map((state) => {
 		const glyph = spinner.frames[state.spinnerTick % spinner.frames.length] ?? spinner.frames[0];
-		return `${renderTier(theme, config, colors, "high", glyph)}${SGR_RESET}`;
+		return `${render("high", glyph)}${SGR_RESET}`;
 	});
 	return { frames, frameStates, intervalMs: config.spinnerIntervalMs };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-zentui",
-	"version": "0.29.1",
+	"version": "0.29.2",
 	"description": "Modular UI components for Pi and Oh My Pi — customizable editors, messages, progress displays, and statuslines.",
 	"type": "module",
 	"license": "MIT",