pi-zentui 0.29.0 → 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/index.ts

@@ -81,6 +81,7 @@ import {
 	renderTurnSummaryEntry,
 	TURN_SUMMARY_ENTRY_TYPE,
 } from "./interaction-summary";
+import { LayeredEditorConsumer } from "./layered-editor";
 import { LiveContextController } from "./live-context";
 import { readPackageVersionResult } from "./package-version";
 import { getComponentPreset } from "./presets";
@@ -277,7 +278,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 	let stopSessionTimer: () => void = () => {};
 	let stopMinimalistDurationUpdates: () => void = () => {};
 	let minimalistDurationUpdatesActive = false;
-	let minimalistDecorationActive = false;
+	let minimalistDecorationEditor: PolishedEditor | WrappedPolishedEditor | undefined;
 	let customVariableSessionReady = false;
 	let sessionTimerRequirements = "";
 	let lastDurationLabel = "";
@@ -324,14 +325,41 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		}
 	};
 
+	const layeredEditor = new LayeredEditorConsumer<
+		EditorFactory,
+		PolishedEditor | WrappedPolishedEditor
+	>((generation) => sessionLifecycle.isCurrent(generation));
+	const currentEditorFactory = (): EditorFactory | undefined => {
+		try {
+			return activeTuiContext?.ui.getEditorComponent();
+		} catch {
+			return undefined;
+		}
+	};
+	// Layered visibility is read-only recognition; installation ownership above stays exclusive.
+	// Data, demand, and timer consumers read the visible editor through these two helpers; anything
+	// that installs, restores, or mutates host UI must keep using ownsInstalledEditorFactory().
+	// Ownership counts before Pi constructs its editor; layered visibility requires the recorded
+	// instance to remain reachable through the current factory.
+	const layeredVisibleEditor = () => layeredEditor.editorVisibleThrough(currentEditorFactory());
+	const editorConsumerActive = () =>
+		ownsInstalledEditorFactory() || layeredVisibleEditor() !== undefined;
+	const visibleEditor = () =>
+		ownsInstalledEditorFactory() ? activeEditor?.editor : layeredVisibleEditor();
+	const requestEditorRepaint = () => {
+		requestEditorRender?.();
+		// The layered record intentionally outlives ownership clearing, so disabling the editor is
+		// gated here; a live wrapper keeps repainting while the editor remains enabled.
+		if (effectiveEditorEnabled()) layeredEditor.requestRender(currentEditorFactory());
+	};
+
 	const customVariables = new CustomVariables(
 		pi.events,
 		(key) => {
 			if (!customVariableSessionReady || !sessionLifecycle.isCurrent()) return false;
 			return (
 				(effectiveEditorEnabled() &&
-					ownsInstalledEditorFactory() &&
-					activeEditor?.editor.isMetadataDecorated() === true &&
+					visibleEditor()?.isMetadataDecorated() === true &&
 					editorDemandsCustomVariable(currentConfig, key)) ||
 				(installedFooterKind === "starship" &&
 					ownsInstalledFooter() &&
@@ -340,7 +368,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		},
 		() => {
 			if (!customVariableSessionReady || !sessionLifecycle.isCurrent()) return;
-			requestEditorRender?.();
+			requestEditorRepaint();
 			requestFooterRender?.();
 		},
 	);
@@ -349,7 +377,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		customVariables.reconcile();
 		codexQuota.reconcile();
 		requestFooterRender?.();
-		requestEditorRender?.();
+		requestEditorRepaint();
 	};
 	const thinkingExperimental = new ThinkingExperimentalController(
 		() => currentConfig.components.thinkingSteps,
@@ -391,7 +419,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 	if (!host.skinOnly)
 		workingLine.setRequestRender(() => {
 			if (sessionLifecycle.isCurrent()) {
-				requestEditorRender?.();
+				requestEditorRepaint();
 			}
 		});
 	let workingLineSessionReady = false;
@@ -468,7 +496,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		return usageTotals.resolve(
 			ctx,
 			(effectiveEditorEnabled() &&
-				ownsInstalledEditorFactory() &&
+				editorConsumerActive() &&
 				["tokens", "input_tokens", "output_tokens", "cost", "cache_hit"].some((name) =>
 					editorMetadataReferences(currentConfig).has(name),
 				)) ||
@@ -504,9 +532,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 			)
 				return undefined;
 			const editorDemand =
-				effectiveEditorEnabled() &&
-				ownsInstalledEditorFactory() &&
-				editorWantsCodexQuota(currentConfig);
+				effectiveEditorEnabled() && editorConsumerActive() && editorWantsCodexQuota(currentConfig);
 			const footerDemand =
 				effectiveFooterStyle() === "starship" &&
 				currentConfig.components.footer.codexQuota &&
@@ -516,7 +542,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		() => {
 			if (!sessionLifecycle.isCurrent()) return;
 			requestFooterRender?.();
-			requestEditorRender?.();
+			requestEditorRepaint();
 		},
 	);
 	const getEditorQuota = () =>
@@ -598,7 +624,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 			currentConfig,
 			installedFooterReferences(),
 			effectiveEditorEnabled() &&
-				ownsInstalledEditorFactory() &&
+				editorConsumerActive() &&
 				currentConfig.components.editor.style === "minimalist",
 		);
 
@@ -647,6 +673,8 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		if (!sessionLifecycle.isCurrent() || !ctx.hasUI) return;
 		if (activeTuiContext?.ui === ctx.ui) activeTuiContext = ctx;
 		if (editorInstalled && !ownsInstalledEditorFactory()) reconcileObservedEditorOwnership(ctx);
+		// A layered editor can stop being visible without any ownership transition to observe.
+		if (projectRefreshActive && !needsProjectRefresh()) stopProjectRefresh();
 		syncFooterState(ctx);
 		if (project && needsProjectRefresh()) scheduleProjectRefresh(ctx);
 		refresh();
@@ -698,9 +726,8 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 			sessionLifecycle.isCurrent() &&
 			agentRunActive &&
 			agentDurationClock.isActive() &&
-			minimalistDecorationActive &&
+			minimalistDecorationActive() &&
 			effectiveEditorEnabled() &&
-			ownsInstalledEditorFactory() &&
 			currentConfig.components.editor.style === "minimalist" &&
 			editorMetadataReferences(currentConfig).has("turn_duration");
 		if (!needed) {
@@ -721,13 +748,25 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		});
 	};
 
-	const setMinimalistDecorationActive = (active: boolean) => {
-		const next = sessionLifecycle.isCurrent() && active && ownsInstalledEditorFactory();
-		if (minimalistDecorationActive === next) return;
-		minimalistDecorationActive = next;
+	// Decoration is bound to the editor instance that reported it, so it stays valid while that
+	// editor is visible (owned or layered) and cannot leak to a replacement editor.
+	const minimalistDecorationActive = () =>
+		sessionLifecycle.isCurrent() &&
+		minimalistDecorationEditor !== undefined &&
+		visibleEditor() === minimalistDecorationEditor;
+	const reconcileMinimalistDecoration = () => {
 		customVariables.reconcile();
 		reconcileAgentTimer();
 	};
+	const setMinimalistDecorationActive = (
+		active: boolean,
+		editor?: PolishedEditor | WrappedPolishedEditor,
+	) => {
+		const next = active ? editor : undefined;
+		if (minimalistDecorationEditor === next) return;
+		minimalistDecorationEditor = next;
+		reconcileMinimalistDecoration();
+	};
 
 	const startAgentTurn = (interactionStarted: boolean) => {
 		agentRunActive = true;
@@ -852,12 +891,12 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		if (activeTuiContext && workingLineSessionReady) {
 			if (!host.skinOnly) workingLine.reconcile(activeTuiContext);
 		}
-		setMinimalistDecorationActive(false);
 		requestEditorRender = undefined;
 		wrappedEditorFactory = undefined;
 		installedEditorFactory = undefined;
 		editorInstallMode = "none";
 		editorInstalled = false;
+		reconcileMinimalistDecoration();
 		codexQuota.reconcile();
 	};
 
@@ -900,8 +939,12 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		return observed;
 	};
 
+	// Exclusive: gates mutation of host UI such as the Working row.
 	const isActiveEditor = (editor: PolishedEditor | WrappedPolishedEditor, generation: number) =>
 		sessionLifecycle.isCurrent(generation) && activeEditor?.editor === editor;
+	// Read-only: also true for an editor still visible beneath a foreign wrapper.
+	const isVisibleEditor = (editor: PolishedEditor | WrappedPolishedEditor, generation: number) =>
+		sessionLifecycle.isCurrent(generation) && visibleEditor() === editor;
 
 	const editorBorderCapabilityChanged = (
 		editor: PolishedEditor | WrappedPolishedEditor,
@@ -910,14 +953,14 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		if (!isActiveEditor(editor, generation) || !activeTuiContext || !workingLineSessionReady)
 			return;
 		if (!host.skinOnly) workingLine.reconcile(activeTuiContext);
-		if (workingLine.isAvailable()) requestEditorRender?.();
+		if (workingLine.isAvailable()) requestEditorRepaint();
 	};
 
 	const editorMetadataDecorationChanged = (
 		editor: PolishedEditor | WrappedPolishedEditor,
 		generation: number,
 	) => {
-		if (isActiveEditor(editor, generation)) customVariables.reconcile();
+		if (isVisibleEditor(editor, generation)) customVariables.reconcile();
 	};
 
 	const editorWorkingLineFrame = (
@@ -928,6 +971,31 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 			? workingLine.currentWorkingLineFrame()
 			: undefined;
 
+	/** Records a freshly constructed editor as owned (exclusive) or visible beneath a foreign wrapper. */
+	const registerConstructedEditor = (
+		ctx: ExtensionContext,
+		factory: ZentuiEditorFactory,
+		generation: number,
+		editor: PolishedEditor | WrappedPolishedEditor,
+		tui: TUI,
+	) => {
+		const observed = observeEditorFactory(ctx);
+		if (
+			!sessionLifecycle.isCurrent(generation) ||
+			activeTuiContext?.ui !== ctx.ui ||
+			!observed.known
+		) {
+			return;
+		}
+		if (observed.factory === factory) {
+			activeEditor = { editor, factory, generation };
+			requestEditorRender = () => tui.requestRender();
+		} else if (observed.factory && !isZentuiEditorFactory(observed.factory)) {
+			// A foreign wrapper built this editor beneath its own outer factory.
+			layeredEditor.attach(observed.factory, generation, editor, () => tui.requestRender());
+		}
+	};
+
 	const makeEditorFactory = (
 		ctx: ExtensionContext,
 		baseFactory: EditorFactory | undefined,
@@ -977,21 +1045,12 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 					};
 				},
 				(active) => {
-					if (isActiveEditor(editor, generation)) setMinimalistDecorationActive(active);
+					if (isVisibleEditor(editor, generation)) setMinimalistDecorationActive(active, editor);
 				},
 				() => editorBorderCapabilityChanged(editor, generation),
 				() => editorMetadataDecorationChanged(editor, generation),
 			);
-			const observed = observeEditorFactory(ctx);
-			if (
-				sessionLifecycle.isCurrent(generation) &&
-				activeTuiContext?.ui === ctx.ui &&
-				observed.known &&
-				observed.factory === factory
-			) {
-				activeEditor = { editor, factory, generation };
-				requestEditorRender = () => tui.requestRender();
-			}
+			registerConstructedEditor(ctx, factory, generation, editor, tui);
 			return editor;
 		}) as ZentuiEditorFactory;
 		factory[ZENTUI_EDITOR_FACTORY] = true;
@@ -1048,21 +1107,12 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 					};
 				},
 				(active) => {
-					if (isActiveEditor(editor, generation)) setMinimalistDecorationActive(active);
+					if (isVisibleEditor(editor, generation)) setMinimalistDecorationActive(active, editor);
 				},
 				() => editorBorderCapabilityChanged(editor, generation),
 				() => editorMetadataDecorationChanged(editor, generation),
 			);
-			const observed = observeEditorFactory(ctx);
-			if (
-				sessionLifecycle.isCurrent(generation) &&
-				activeTuiContext?.ui === ctx.ui &&
-				observed.known &&
-				observed.factory === factory
-			) {
-				activeEditor = { editor, factory, generation };
-				requestEditorRender = () => tui.requestRender();
-			}
+			registerConstructedEditor(ctx, factory, generation, editor, tui);
 			return editor;
 		}) as ZentuiEditorFactory;
 		factory[ZENTUI_EDITOR_FACTORY] = true;
@@ -1415,6 +1465,8 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		if (!ctx || !sessionLifecycle.isCurrent()) return;
 		sessionLifecycle.shutdown();
 		activeEditor = undefined;
+		minimalistDecorationEditor = undefined;
+		layeredEditor.detach();
 		extensionStatuses.dispose();
 		codexQuota.stop();
 		stopSessionTimer();
@@ -1474,6 +1526,7 @@ export default function (pi: ExtensionAPI, host: ZentuiHost = {}) {
 		customVariables.clear();
 		const lifecycleGeneration = sessionLifecycle.start();
 		activeEditor = undefined;
+		minimalistDecorationEditor = undefined;
 		// A new generation must not expose or route extension segments through the previous
 		// session while TUI startup is in progress.
 		workingLineSessionReady = false;

package/extensions/zentui/layered-editor.ts

@@ -0,0 +1,55 @@
+/**
+ * Records that a Zentui editor instance is still visible beneath a foreign predecessor-preserving
+ * wrapper (`setEditorComponent((tui, theme, kb) => predecessor(tui, theme, kb))`).
+ *
+ * This is deliberately NOT installation ownership: Zentui does not own the outer factory, must not
+ * replace or restore it, and keeps this record across ownership clearing. It only answers
+ * "may a surface Zentui rendered still be on screen?" for read-only consumers such as usage demand
+ * and redraw requests. The record is valid only while the outer factory observed at construction is
+ * still the current editor factory, so any replacement of the chain invalidates it.
+ *
+ * Visibility is only evidence that a wrapper constructed the editor, not that its rows reach the
+ * screen, so surfaces that mutate host UI (for example hiding the native Working row) must keep
+ * requiring exclusive installation ownership instead of consulting this record.
+ */
+export class LayeredEditorConsumer<Factory, Editor = unknown> {
+	private record?: {
+		outerFactory: Factory;
+		generation: number;
+		editor: Editor;
+		requestRender: () => void;
+	};
+
+	constructor(private readonly isCurrentGeneration: (generation: number) => boolean) {}
+
+	attach(
+		outerFactory: Factory,
+		generation: number,
+		editor: Editor,
+		requestRender: () => void,
+	): void {
+		this.record = { outerFactory, generation, editor, requestRender };
+	}
+
+	detach(): void {
+		this.record = undefined;
+	}
+
+	editorVisibleThrough(currentFactory: Factory | undefined): Editor | undefined {
+		const record = this.record;
+		if (!record) return undefined;
+		if (!this.isCurrentGeneration(record.generation) || record.outerFactory !== currentFactory) {
+			this.record = undefined;
+			return undefined;
+		}
+		return record.editor;
+	}
+
+	isVisibleThrough(currentFactory: Factory | undefined): boolean {
+		return this.editorVisibleThrough(currentFactory) !== undefined;
+	}
+
+	requestRender(currentFactory: Factory | undefined): void {
+		if (this.isVisibleThrough(currentFactory)) this.record?.requestRender();
+	}
+}

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.0",
+	"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",