pi-zentui 0.2.5 → 0.2.7

package/README.md

@@ -200,7 +200,8 @@ Default config values — copy this and change any value you want:
 	},
 	"extensionStatuses": {
 		"defaultPlacement": "right",
-		"placements": {}
+		"placements": {},
+		"colorModes": {}
 	}
 }
 ```

package/extensions/zentui/config.ts

@@ -19,10 +19,14 @@ export type UiFeaturesConfig = {
 };
 
 export type ExtensionStatusPlacement = "off" | "left" | "middle" | "right";
+export type ExtensionStatusColorMode = "zentui" | "original";
+
+const DEFAULT_EXTENSION_STATUS_COLOR_MODE: ExtensionStatusColorMode = "zentui";
 
 export type ExtensionStatusesConfig = {
 	defaultPlacement: ExtensionStatusPlacement;
 	placements: Record<string, ExtensionStatusPlacement>;
+	colorModes: Record<string, ExtensionStatusColorMode>;
 };
 
 const DEFAULT_PROJECT_REFRESH_INTERVAL_MS = 30_000;
@@ -123,6 +127,7 @@ export const defaultConfig: PolishedTuiConfig = {
 	extensionStatuses: {
 		defaultPlacement: "right",
 		placements: {},
+		colorModes: {},
 	},
 };
 
@@ -251,6 +256,10 @@ export function isExtensionStatusPlacement(value: unknown): value is ExtensionSt
 	return value === "off" || value === "left" || value === "middle" || value === "right";
 }
 
+export function isExtensionStatusColorMode(value: unknown): value is ExtensionStatusColorMode {
+	return value === "zentui" || value === "original";
+}
+
 function normalizeExtensionStatuses(record: Record<string, unknown>): ExtensionStatusesConfig {
 	const defaultPlacement = isExtensionStatusPlacement(record.defaultPlacement)
 		? record.defaultPlacement
@@ -263,10 +272,19 @@ function normalizeExtensionStatuses(record: Record<string, unknown>): ExtensionS
 				),
 			)
 		: {};
+	const colorModes = isRecord(record.colorModes)
+		? Object.fromEntries(
+				Object.entries(record.colorModes).filter(
+					(entry): entry is [string, ExtensionStatusColorMode] =>
+						isExtensionStatusColorMode(entry[1]),
+				),
+			)
+		: {};
 
 	return {
 		defaultPlacement,
 		placements,
+		colorModes,
 	};
 }
 
@@ -345,6 +363,7 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 		extensionStatuses: {
 			defaultPlacement: extensionStatuses.defaultPlacement,
 			placements: { ...extensionStatuses.placements },
+			colorModes: { ...extensionStatuses.colorModes },
 		},
 	};
 }
@@ -356,6 +375,13 @@ export function getExtensionStatusPlacement(
 	return config.extensionStatuses.placements[key] ?? config.extensionStatuses.defaultPlacement;
 }
 
+export function getExtensionStatusColorMode(
+	config: PolishedTuiConfig,
+	key: string,
+): ExtensionStatusColorMode {
+	return config.extensionStatuses.colorModes[key] ?? DEFAULT_EXTENSION_STATUS_COLOR_MODE;
+}
+
 export function loadConfig(): PolishedTuiConfig {
 	try {
 		if (!existsSync(configPath)) return mergeConfig({});
@@ -424,3 +450,31 @@ export function saveExtensionStatusPlacement(
 	writeFileSync(path, `${JSON.stringify(record, null, 2)}\n`, "utf8");
 	return mergeConfig(record);
 }
+
+export function saveExtensionStatusColorMode(
+	key: string,
+	colorMode: ExtensionStatusColorMode,
+	path = configPath,
+): PolishedTuiConfig {
+	const record = readConfigRecord(path);
+	const existingExtensionStatuses = isRecord(record.extensionStatuses)
+		? { ...(record.extensionStatuses as Record<string, unknown>) }
+		: {};
+	const existingColorModes = isRecord(existingExtensionStatuses.colorModes)
+		? { ...(existingExtensionStatuses.colorModes as Record<string, unknown>) }
+		: {};
+
+	Object.defineProperty(existingColorModes, key, {
+		value: colorMode,
+		enumerable: true,
+		configurable: true,
+		writable: true,
+	});
+
+	record.extensionStatuses = {
+		...existingExtensionStatuses,
+		colorModes: existingColorModes,
+	};
+	writeFileSync(path, `${JSON.stringify(record, null, 2)}\n`, "utf8");
+	return mergeConfig(record);
+}

package/extensions/zentui/extension-status.ts

@@ -1,11 +1,16 @@
 import { stripVTControlCharacters } from "node:util";
-import type { ExtensionStatusPlacement, PolishedTuiConfig } from "./config";
-import { getExtensionStatusPlacement } from "./config";
+import type {
+	ExtensionStatusColorMode,
+	ExtensionStatusPlacement,
+	PolishedTuiConfig,
+} from "./config";
+import { getExtensionStatusColorMode, getExtensionStatusPlacement } from "./config";
 
 export type ExtensionStatusSegment = {
 	key: string;
 	text: string;
 	placement: ExtensionStatusPlacement;
+	colorMode: ExtensionStatusColorMode;
 };
 
 export type ExtensionStatusSegmentsByPlacement = {
@@ -14,18 +19,44 @@ export type ExtensionStatusSegmentsByPlacement = {
 	right: ExtensionStatusSegment[];
 };
 
+const safeSgrPattern = /\x1b\[[0-9;:]*m/g;
+const sgrPlaceholderPattern = /__ZENTUI_SGR_(\d+)__/g;
+
 function compareKeys(a: ExtensionStatusSegment, b: ExtensionStatusSegment): number {
 	return a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
 }
 
-export function sanitizeExtensionStatusText(value: string): string {
-	return stripVTControlCharacters(value)
+function normalizeStatusWhitespace(value: string): string {
+	return value
 		.replace(/[\r\n\t\f\v]+/g, " ")
 		.replace(/[\u0000-\u001f\u007f-\u009f]/g, "")
 		.replace(/\s+/g, " ")
 		.trim();
 }
 
+export function sanitizeExtensionStatusText(value: string): string {
+	return normalizeStatusWhitespace(stripVTControlCharacters(value));
+}
+
+function hasVisibleStatusText(value: string): boolean {
+	return sanitizeExtensionStatusText(value).length > 0;
+}
+
+export function sanitizeExtensionStatusOriginalText(value: string): string {
+	const safeSequences: string[] = [];
+	const protectedValue = value.replace(safeSgrPattern, (sequence) => {
+		const index = safeSequences.push(sequence) - 1;
+		return `__ZENTUI_SGR_${index}__`;
+	});
+	const cleaned = normalizeStatusWhitespace(stripVTControlCharacters(protectedValue));
+	const restored = cleaned.replace(sgrPlaceholderPattern, (_match, indexText: string) => {
+		const index = Number.parseInt(indexText, 10);
+		return safeSequences[index] ?? "";
+	});
+
+	return hasVisibleStatusText(restored) ? restored : "";
+}
+
 export function collectExtensionStatusSegments(
 	statuses: ReadonlyMap<string, string>,
 	config: PolishedTuiConfig,
@@ -40,10 +71,14 @@ export function collectExtensionStatusSegments(
 		const placement = getExtensionStatusPlacement(config, key);
 		if (placement === "off") continue;
 
-		const text = sanitizeExtensionStatusText(value);
+		const colorMode = getExtensionStatusColorMode(config, key);
+		const text =
+			colorMode === "original"
+				? sanitizeExtensionStatusOriginalText(value)
+				: sanitizeExtensionStatusText(value);
 		if (!text) continue;
 
-		segments[placement].push({ key, text, placement });
+		segments[placement].push({ key, text, placement, colorMode });
 	}
 
 	segments.left.sort(compareKeys);

package/extensions/zentui/footer.ts

@@ -1,7 +1,7 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { PolishedTuiConfig } from "./config";
-import { collectExtensionStatusSegments } from "./extension-status";
+import { type ExtensionStatusSegment, collectExtensionStatusSegments } from "./extension-status";
 import { formatCwdLabel, formatRuntimeSegment } from "./format";
 import type { FooterState } from "./state";
 import { renderStyleForSource } from "./style";
@@ -218,14 +218,16 @@ export function installFooter(
 					footerData.getExtensionStatuses(),
 					config,
 				);
-				const renderExtensionStatus = (text: string) =>
-					renderStyleForSource(theme, colorSource, config.colors.extensionStatus, text);
+				const renderExtensionStatus = (segment: ExtensionStatusSegment) =>
+					segment.colorMode === "original"
+						? segment.text
+						: renderStyleForSource(theme, colorSource, config.colors.extensionStatus, segment.text);
 				const content = composeFooterContent(
 					left,
 					right,
-					extensionStatuses.left.map((segment) => renderExtensionStatus(segment.text)),
-					extensionStatuses.middle.map((segment) => renderExtensionStatus(segment.text)),
-					extensionStatuses.right.map((segment) => renderExtensionStatus(segment.text)),
+					extensionStatuses.left.map(renderExtensionStatus),
+					extensionStatuses.middle.map(renderExtensionStatus),
+					extensionStatuses.right.map(renderExtensionStatus),
 					separator,
 					innerWidth,
 				);

package/extensions/zentui/index.ts

@@ -7,12 +7,14 @@ import type {
 import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
 import {
 	type ColorSourcesConfig,
+	type ExtensionStatusColorMode,
 	type ExtensionStatusPlacement,
 	type PolishedTuiConfig,
 	type UiFeaturesConfig,
 	ensureConfigExists,
 	loadConfig,
 	saveColorSourcesPatch,
+	saveExtensionStatusColorMode,
 	saveExtensionStatusPlacement,
 	saveUiFeaturesPatch,
 } from "./config";
@@ -345,6 +347,9 @@ export default function (pi: ExtensionAPI) {
 		setExtensionStatusPlacement(key: string, placement: ExtensionStatusPlacement) {
 			currentConfig = saveExtensionStatusPlacement(key, placement);
 		},
+		setExtensionStatusColorMode(key: string, colorMode: ExtensionStatusColorMode) {
+			currentConfig = saveExtensionStatusColorMode(key, colorMode);
+		},
 		requestRender() {
 			refresh();
 		},

package/extensions/zentui/settings-command.ts

@@ -10,10 +10,13 @@ import {
 import {
 	type ColorSource,
 	type ColorSourcesConfig,
+	type ExtensionStatusColorMode,
 	type ExtensionStatusPlacement,
 	type PolishedTuiConfig,
 	type UiFeaturesConfig,
+	getExtensionStatusColorMode,
 	getExtensionStatusPlacement,
+	isExtensionStatusColorMode,
 	isExtensionStatusPlacement,
 } from "./config";
 import { sanitizeExtensionStatusText } from "./extension-status";
@@ -26,6 +29,7 @@ const extensionStatusPlacementValues: ExtensionStatusPlacement[] = [
 	"middle",
 	"right",
 ];
+const extensionStatusColorModeValues: ExtensionStatusColorMode[] = ["zentui", "original"];
 type FeatureState = "enabled" | "disabled";
 
 const featureStateValues: FeatureState[] = ["enabled", "disabled"];
@@ -44,6 +48,7 @@ type SettingsCommandDeps = {
 	) => { applied: boolean; reason?: string };
 	getActiveExtensionStatuses: () => ReadonlyMap<string, string>;
 	setExtensionStatusPlacement: (key: string, placement: ExtensionStatusPlacement) => void;
+	setExtensionStatusColorMode: (key: string, colorMode: ExtensionStatusColorMode) => void;
 	requestRender: () => void;
 	settingsListTheme?: SettingsListTheme;
 };
@@ -93,6 +98,7 @@ const sectionLabels: Record<SettingsSection, string> = {
 };
 
 const thirdPartyStatusSettingPrefix = "thirdPartyStatus:";
+type ThirdPartyStatusSettingKind = "placement" | "colorMode";
 
 function isColorSource(value: string): value is ColorSource {
 	return value === "theme" || value === "terminal";
@@ -180,6 +186,24 @@ function argumentCompletions(prefix: string): AutocompleteItem[] | null {
 	return matches.length > 0 ? matches : null;
 }
 
+function thirdPartyStatusSettingId(key: string, kind: ThirdPartyStatusSettingKind): string {
+	return `${thirdPartyStatusSettingPrefix}${kind}:${key}`;
+}
+
+function thirdPartyStatusSettingFromId(
+	id: string,
+): { kind: ThirdPartyStatusSettingKind; key: string } | undefined {
+	if (!id.startsWith(thirdPartyStatusSettingPrefix)) return undefined;
+	const rest = id.slice(thirdPartyStatusSettingPrefix.length);
+	const separatorIndex = rest.indexOf(":");
+	if (separatorIndex < 0) return undefined;
+
+	const kind = rest.slice(0, separatorIndex);
+	if (kind !== "placement" && kind !== "colorMode") return undefined;
+
+	return { kind, key: rest.slice(separatorIndex + 1) };
+}
+
 function buildItems(
 	section: SettingsSection,
 	config: PolishedTuiConfig,
@@ -220,24 +244,28 @@ function buildItems(
 		];
 	}
 
-	return statuses.map(([key, value]) => {
+	return statuses.flatMap(([key, value]) => {
 		const sanitizedText = sanitizeExtensionStatusText(value);
-		return {
-			id: `${thirdPartyStatusSettingPrefix}${key}`,
-			label: key,
-			description: sanitizedText ? `Current status: ${sanitizedText}` : undefined,
-			currentValue: getExtensionStatusPlacement(config, key),
-			values: extensionStatusPlacementValues,
-		};
+		const description = sanitizedText ? `Current status: ${sanitizedText}` : undefined;
+		return [
+			{
+				id: thirdPartyStatusSettingId(key, "placement"),
+				label: `${key} placement`,
+				description,
+				currentValue: getExtensionStatusPlacement(config, key),
+				values: extensionStatusPlacementValues,
+			},
+			{
+				id: thirdPartyStatusSettingId(key, "colorMode"),
+				label: `${key} color`,
+				description,
+				currentValue: getExtensionStatusColorMode(config, key),
+				values: extensionStatusColorModeValues,
+			},
+		];
 	});
 }
 
-function thirdPartyStatusKeyFromSettingId(id: string): string | undefined {
-	return id.startsWith(thirdPartyStatusSettingPrefix)
-		? id.slice(thirdPartyStatusSettingPrefix.length)
-		: undefined;
-}
-
 function nextSection(section: SettingsSection): SettingsSection {
 	const currentIndex = settingsSections.indexOf(section);
 	return settingsSections[(currentIndex + 1) % settingsSections.length] ?? "coloring";
@@ -356,12 +384,33 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 									return;
 								}
 
-								const thirdPartyStatusKey = thirdPartyStatusKeyFromSettingId(id);
-								if (thirdPartyStatusKey && isExtensionStatusPlacement(newValue)) {
-									deps.setExtensionStatusPlacement(thirdPartyStatusKey, newValue);
+								const thirdPartyStatusSetting = thirdPartyStatusSettingFromId(id);
+								if (
+									thirdPartyStatusSetting?.kind === "placement" &&
+									isExtensionStatusPlacement(newValue)
+								) {
+									deps.setExtensionStatusPlacement(thirdPartyStatusSetting.key, newValue);
+									settingsList.updateValue(id, newValue);
+									deps.requestRender();
+									ctx.ui.notify(
+										`Third-party status ${thirdPartyStatusSetting.key} placement: ${newValue}`,
+										"info",
+									);
+									tui.requestRender();
+									return;
+								}
+
+								if (
+									thirdPartyStatusSetting?.kind === "colorMode" &&
+									isExtensionStatusColorMode(newValue)
+								) {
+									deps.setExtensionStatusColorMode(thirdPartyStatusSetting.key, newValue);
 									settingsList.updateValue(id, newValue);
 									deps.requestRender();
-									ctx.ui.notify(`Third-party status ${thirdPartyStatusKey}: ${newValue}`, "info");
+									ctx.ui.notify(
+										`Third-party status ${thirdPartyStatusSetting.key} color: ${newValue}`,
+										"info",
+									);
 									tui.requestRender();
 								}
 							} catch (error) {

package/extensions/zentui/ui.ts

@@ -56,6 +56,7 @@ type PolishedFrameOptions = {
 	uiTheme: Theme;
 	config: PolishedTuiConfig;
 	modelMeta: EditorMeta;
+	previousModelMeta?: EditorMeta;
 	thinkingLevel: string | undefined;
 	rightStatus?: string;
 };
@@ -149,16 +150,53 @@ function isRenderedModelMetaLine(line: string, modelMeta: EditorMeta): boolean {
 	return plain.includes(modelMeta.modelLabel) && plain.includes(modelMeta.providerLabel);
 }
 
-function removeRenderedModelMetaLines(lines: string[], modelMeta: EditorMeta): string[] {
+function matchesAnyModelMeta(
+	line: string,
+	modelMeta: EditorMeta,
+	previousMeta?: EditorMeta,
+): boolean {
+	if (isRenderedModelMetaLine(line, modelMeta)) return true;
+	if (previousMeta && isRenderedModelMetaLine(line, previousMeta)) return true;
+	return false;
+}
+
+function hasRenderedModelMetaLine(
+	lines: string[],
+	modelMeta: EditorMeta,
+	previousMeta?: EditorMeta,
+): boolean {
+	return lines.some((line) => matchesAnyModelMeta(line, modelMeta, previousMeta));
+}
+
+function isAlreadyPolishedFrame(
+	lines: string[],
+	modelMeta: EditorMeta,
+	previousMeta?: EditorMeta,
+): boolean {
+	return (
+		lines.length >= 3 &&
+		isHorizontalBorder(lines[0] ?? "") &&
+		isHorizontalBorder(lines.at(-1) ?? "") &&
+		hasRenderedModelMetaLine(lines.slice(1, -1), modelMeta, previousMeta)
+	);
+}
+
+function removeRenderedModelMetaLines(
+	lines: string[],
+	modelMeta: EditorMeta,
+	previousMeta?: EditorMeta,
+): string[] {
 	const result: string[] = [];
 	for (let index = 0; index < lines.length; index++) {
 		const line = lines[index] ?? "";
-		if (isRenderedModelMetaLine(line, modelMeta)) continue;
+		if (matchesAnyModelMeta(line, modelMeta, previousMeta)) continue;
 
 		const plain = plainRenderedText(line).trim();
-		const previousWasMeta = index > 0 && isRenderedModelMetaLine(lines[index - 1] ?? "", modelMeta);
+		const previousWasMeta =
+			index > 0 && matchesAnyModelMeta(lines[index - 1] ?? "", modelMeta, previousMeta);
 		const nextIsMeta =
-			index < lines.length - 1 && isRenderedModelMetaLine(lines[index + 1] ?? "", modelMeta);
+			index < lines.length - 1 &&
+			matchesAnyModelMeta(lines[index + 1] ?? "", modelMeta, previousMeta);
 		if (!plain && (previousWasMeta || nextIsMeta)) continue;
 
 		result.push(line);
@@ -166,6 +204,13 @@ function removeRenderedModelMetaLines(lines: string[], modelMeta: EditorMeta): s
 	return result;
 }
 
+function removeStalePolishedLeadingSpacer(lines: string[], shouldRemove: boolean): string[] {
+	if (!shouldRemove || lines.length === 0) return lines;
+	const firstLine = lines[0] ?? "";
+	if (plainRenderedText(firstLine).trim()) return lines;
+	return lines.slice(1);
+}
+
 function vimModeColor(mode: string): string {
 	switch (mode.toLowerCase()) {
 		case "insert":
@@ -199,6 +244,7 @@ function renderPolishedFrame({
 	uiTheme,
 	config,
 	modelMeta,
+	previousModelMeta,
 	thinkingLevel,
 	rightStatus,
 }: PolishedFrameOptions): string[] {
@@ -231,7 +277,11 @@ function renderPolishedFrame({
 			: [];
 	if (editorFrame.length < 2) return clampRenderedLines(baseRendered, width);
 
-	const editorLines = removeRenderedModelMetaLines(editorFrame.slice(1, -1), modelMeta);
+	const stalePolishedFrame = isAlreadyPolishedFrame(editorFrame, modelMeta, previousModelMeta);
+	const editorLines = removeStalePolishedLeadingSpacer(
+		removeRenderedModelMetaLines(editorFrame.slice(1, -1), modelMeta, previousModelMeta),
+		stalePolishedFrame,
+	);
 	const model = renderStyleForSourceOrFallback(
 		uiTheme,
 		colorSource,
@@ -308,6 +358,7 @@ export class PolishedEditor extends CustomEditor {
 	private readonly getThinkingLevel: () => string | undefined;
 	private readonly getConfig: () => PolishedTuiConfig;
 	private readonly uiTheme: Theme;
+	private previousModelMeta?: EditorMeta;
 
 	constructor(
 		tui: TUI,
@@ -335,19 +386,25 @@ export class PolishedEditor extends CustomEditor {
 		const { railWidth } = getEditorChromeWidths(config, this.uiTheme, "\x1b[0m");
 		const innerWidth = Math.max(0, width - railWidth);
 		const rendered = super.render(innerWidth);
-		return renderPolishedFrame({
+		const modelMeta = this.getModelMeta();
+		const result = renderPolishedFrame({
 			width,
 			baseRendered: rendered,
 			autocompleteSource: this as unknown as AutocompleteEditorInternals,
 			uiTheme: this.uiTheme,
 			config,
-			modelMeta: this.getModelMeta(),
+			modelMeta,
+			previousModelMeta: this.previousModelMeta,
 			thinkingLevel: this.getThinkingLevel(),
 		});
+		this.previousModelMeta = modelMeta;
+		return result;
 	}
 }
 
 export class WrappedPolishedEditor implements EditorComponent {
+	private previousModelMeta?: EditorMeta;
+
 	constructor(
 		private readonly base: WrappedEditor,
 		private readonly uiTheme: Theme,
@@ -441,16 +498,20 @@ export class WrappedPolishedEditor implements EditorComponent {
 		const innerWidth = Math.max(0, width - railWidth);
 		const rendered = this.base.render(innerWidth);
 		const vimStatus = readVimStatus(this.base, this.uiTheme);
-		return renderPolishedFrame({
+		const modelMeta = this.getModelMeta();
+		const result = renderPolishedFrame({
 			width,
 			baseRendered: rendered,
 			autocompleteSource: this.base,
 			uiTheme: this.uiTheme,
 			config,
-			modelMeta: this.getModelMeta(),
+			modelMeta,
+			previousModelMeta: this.previousModelMeta,
 			thinkingLevel: this.getThinkingLevel(),
 			rightStatus: vimStatus,
 		});
+		this.previousModelMeta = modelMeta;
+		return result;
 	}
 
 	invalidate(): void {

package/extensions/zentui/user-message.ts

@@ -17,13 +17,18 @@ const OSC133_ZONE_END = "\x1b]133;B\x07";
 const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
 
 type RenderFn = (width: number) => string[];
+type InvalidateFn = () => void;
 
 type PatchableUserMessagePrototype = {
 	render: RenderFn;
+	invalidate: InvalidateFn;
 	children?: unknown[];
 	__zentuiUserMessageOriginalRender?: RenderFn;
+	__zentuiUserMessageOriginalInvalidate?: InvalidateFn;
 	__zentuiUserMessagePatched?: boolean;
+	__zentuiUserMessageInvalidatePatched?: boolean;
 	__zentuiUserMessageWrapper?: RenderFn;
+	__zentuiUserMessageInvalidateWrapper?: InvalidateFn;
 	__zentuiUserMessageActive?: boolean;
 	__zentuiUserMessageGetTheme?: () => Theme | undefined;
 	__zentuiUserMessageGetConfig?: () => PolishedTuiConfig;
@@ -31,22 +36,32 @@ type PatchableUserMessagePrototype = {
 
 type Cleanup = () => void;
 
-type MarkdownLike = {
-	text?: unknown;
+type UserMessageRenderCache = {
+	hasMarkdownText: boolean;
+	text?: string;
+	width?: number;
+	theme?: Theme;
+	configKey?: string;
+	renderedLines?: string[];
 };
 
+const userMessageRenderCache = new WeakMap<object, UserMessageRenderCache>();
+
+function isObject(value: unknown): value is object {
+	return (typeof value === "object" && value !== null) || typeof value === "function";
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
 function findMarkdownText(value: unknown): string | undefined {
-	if (isRecord(value) && typeof (value as MarkdownLike).text === "string") {
-		return (value as { text: string }).text;
-	}
-
 	if (!isRecord(value)) return undefined;
+	if (typeof value.text === "string") return value.text;
+
+	const children = value.children;
+	if (!Array.isArray(children)) return undefined;
 
-	const children = Array.isArray(value.children) ? value.children : [];
 	for (const child of children) {
 		const text = findMarkdownText(child);
 		if (text !== undefined) return text;
@@ -55,6 +70,26 @@ function findMarkdownText(value: unknown): string | undefined {
 	return undefined;
 }
 
+function getCachedMarkdownText(instance: object): string | undefined {
+	const cached = userMessageRenderCache.get(instance);
+	if (cached?.hasMarkdownText) return cached.text;
+
+	const text = findMarkdownText(instance);
+	if (text !== undefined) {
+		userMessageRenderCache.set(instance, { ...cached, hasMarkdownText: true, text });
+	}
+	return text;
+}
+
+function getUserMessageConfigKey(config: PolishedTuiConfig): string {
+	return [
+		config.features.copyFriendly ? "copy" : "chrome",
+		config.colorSources.userMessages,
+		config.colors.editorAccent ?? "",
+		config.colors.editorBorder ?? "",
+	].join("\0");
+}
+
 function themeFg(theme: Theme | undefined, color: ThemeColor, text: string): string {
 	if (!theme) return text;
 	try {
@@ -126,10 +161,24 @@ function renderZentuiUserMessage(
 	theme: Theme | undefined,
 	config: PolishedTuiConfig,
 ): string[] | undefined {
-	const text = findMarkdownText(instance);
+	if (!isRecord(instance)) return undefined;
+
+	const text = getCachedMarkdownText(instance);
 	if (text === undefined) return undefined;
 	if (width <= 0) return [""];
 
+	const configKey = getUserMessageConfigKey(config);
+	const cached = userMessageRenderCache.get(instance);
+	if (
+		cached?.hasMarkdownText &&
+		cached.width === width &&
+		cached.theme === theme &&
+		cached.configKey === configKey &&
+		cached.renderedLines
+	) {
+		return cached.renderedLines;
+	}
+
 	const railWidth = visibleWidth(renderPromptBoxRail(theme, config));
 	const contentWidth = Math.max(1, width - railWidth);
 	const renderer = new Markdown(text, 0, 0, makeMarkdownTheme(theme), {
@@ -146,14 +195,31 @@ function renderZentuiUserMessage(
 				"─".repeat(width),
 			)
 		: "─".repeat(width);
-
-	return [
+	const lines = [
 		truncateToWidth(border, width, ""),
 		renderPromptBoxLine("", width, theme, config),
 		...contentLines.map((line) => renderPromptBoxLine(line, width, theme, config)),
 		renderPromptBoxLine("", width, theme, config),
 		truncateToWidth(border, width, ""),
 	];
+
+	userMessageRenderCache.set(instance, {
+		hasMarkdownText: true,
+		text,
+		width,
+		theme,
+		configKey,
+		renderedLines: lines,
+	});
+	return lines;
+}
+
+function withPromptZoneMarkers(lines: string[]): string[] {
+	const markedLines = [...lines];
+	markedLines[0] = OSC133_ZONE_START + markedLines[0];
+	markedLines[markedLines.length - 1] =
+		OSC133_ZONE_END + OSC133_ZONE_FINAL + markedLines[markedLines.length - 1];
+	return markedLines;
 }
 
 export function installUserMessageStyle(
@@ -165,6 +231,23 @@ export function installUserMessageStyle(
 	prototype.__zentuiUserMessageGetConfig = getConfig;
 	prototype.__zentuiUserMessageActive = true;
 
+	if (
+		!(
+			prototype.__zentuiUserMessageInvalidatePatched &&
+			prototype.invalidate === prototype.__zentuiUserMessageInvalidateWrapper
+		)
+	) {
+		prototype.__zentuiUserMessageOriginalInvalidate = prototype.invalidate;
+		const invalidateWrapper = function invalidateWithZentuiUserMessage(this: unknown): void {
+			if (isObject(this)) userMessageRenderCache.delete(this);
+			const originalInvalidate = prototype.__zentuiUserMessageOriginalInvalidate;
+			originalInvalidate?.call(this);
+		};
+		prototype.__zentuiUserMessageInvalidateWrapper = invalidateWrapper;
+		prototype.invalidate = invalidateWrapper;
+		prototype.__zentuiUserMessageInvalidatePatched = true;
+	}
+
 	if (
 		prototype.__zentuiUserMessagePatched &&
 		prototype.render === prototype.__zentuiUserMessageWrapper
@@ -192,9 +275,7 @@ export function installUserMessageStyle(
 		if (!lines) return original.call(this, width);
 		if (lines.length === 0) return lines;
 
-		lines[0] = OSC133_ZONE_START + lines[0];
-		lines[lines.length - 1] = OSC133_ZONE_END + OSC133_ZONE_FINAL + lines[lines.length - 1];
-		return lines;
+		return withPromptZoneMarkers(lines);
 	};
 	prototype.__zentuiUserMessageWrapper = wrapper;
 	prototype.render = wrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-zentui",
-	"version": "0.2.5",
+	"version": "0.2.7",
 	"description": "A Starship-inspired statusline and Opencode-style TUI for Pi.",
 	"type": "module",
 	"license": "MIT",