pi-zentui 0.2.2 → 0.2.6

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";
@@ -32,11 +34,13 @@ import { PolishedEditor, WrappedPolishedEditor } from "./ui";
 import { installUserMessageStyle } from "./user-message";
 
 const ZENTUI_EDITOR_FACTORY = Symbol.for("pi-zentui.editor-factory");
+const ZENTUI_EDITOR_BASE_FACTORY = Symbol.for("pi-zentui.editor-base-factory");
 
 type EditorFactory = NonNullable<Parameters<ExtensionContext["ui"]["setEditorComponent"]>[0]>;
 
 type ZentuiEditorFactory = EditorFactory & {
 	[ZENTUI_EDITOR_FACTORY]?: true;
+	[ZENTUI_EDITOR_BASE_FACTORY]?: EditorFactory;
 };
 
 type ApplyUiResult = {
@@ -49,6 +53,15 @@ function isZentuiEditorFactory(factory: EditorFactory | undefined): boolean {
 	return Boolean((factory as ZentuiEditorFactory | undefined)?.[ZENTUI_EDITOR_FACTORY]);
 }
 
+function getZentuiEditorBaseFactory(factory: EditorFactory | undefined): EditorFactory | undefined {
+	return (factory as ZentuiEditorFactory | undefined)?.[ZENTUI_EDITOR_BASE_FACTORY];
+}
+
+function isTuiContext(ctx: ExtensionContext): boolean {
+	const mode = (ctx as ExtensionContext & { mode?: string }).mode;
+	return ctx.hasUI && (mode === undefined || mode === "tui");
+}
+
 export default function (pi: ExtensionAPI) {
 	const state: FooterState = createInitialState(emptyGitStatus());
 
@@ -61,6 +74,7 @@ export default function (pi: ExtensionAPI) {
 	let footerInstalled = false;
 	let editorInstalled = false;
 	let editorInstallMode: EditorInstallMode = "none";
+	let installedEditorFactory: EditorFactory | undefined;
 	let wrappedEditorFactory: EditorFactory | undefined;
 	let prototypePatchesInstalled = false;
 
@@ -148,24 +162,38 @@ export default function (pi: ExtensionAPI) {
 				getThinkingLevel,
 			)) as ZentuiEditorFactory;
 		factory[ZENTUI_EDITOR_FACTORY] = true;
+		factory[ZENTUI_EDITOR_BASE_FACTORY] = baseFactory;
 		return factory;
 	};
 
 	const installEditor = (ctx: ExtensionContext): boolean => {
 		const currentFactory = ctx.ui.getEditorComponent();
-		if (currentFactory && isZentuiEditorFactory(currentFactory)) {
+		if (currentFactory && currentFactory === installedEditorFactory) {
 			editorInstalled = true;
 			return true;
 		}
 
 		installPrototypePatches();
-		if (currentFactory) {
+		const currentZentuiBaseFactory = getZentuiEditorBaseFactory(currentFactory);
+		if (currentFactory && isZentuiEditorFactory(currentFactory)) {
+			wrappedEditorFactory = currentZentuiBaseFactory;
+			const nextFactory = currentZentuiBaseFactory
+				? makeWrappedEditorFactory(ctx, currentZentuiBaseFactory)
+				: makeEditorFactory(ctx);
+			ctx.ui.setEditorComponent(nextFactory);
+			installedEditorFactory = nextFactory;
+			editorInstallMode = currentZentuiBaseFactory ? "wrapper" : "standalone";
+		} else if (currentFactory) {
 			wrappedEditorFactory = currentFactory;
-			ctx.ui.setEditorComponent(makeWrappedEditorFactory(ctx, currentFactory));
+			const nextFactory = makeWrappedEditorFactory(ctx, currentFactory);
+			ctx.ui.setEditorComponent(nextFactory);
+			installedEditorFactory = nextFactory;
 			editorInstallMode = "wrapper";
 		} else {
 			wrappedEditorFactory = undefined;
-			ctx.ui.setEditorComponent(makeEditorFactory(ctx));
+			const nextFactory = makeEditorFactory(ctx);
+			ctx.ui.setEditorComponent(nextFactory);
+			installedEditorFactory = nextFactory;
 			editorInstallMode = "standalone";
 		}
 		editorInstalled = true;
@@ -181,6 +209,7 @@ export default function (pi: ExtensionAPI) {
 			editorInstallMode === "wrapper" && wrappedEditorFactory ? wrappedEditorFactory : undefined,
 		);
 		wrappedEditorFactory = undefined;
+		installedEditorFactory = undefined;
 		editorInstallMode = "none";
 		editorInstalled = false;
 		return true;
@@ -216,7 +245,7 @@ export default function (pi: ExtensionAPI) {
 
 	const applyConfiguredUi = (ctx: ExtensionContext): ApplyUiResult => {
 		const result: ApplyUiResult = { editorBlocked: false };
-		if (!ctx.hasUI) return result;
+		if (!isTuiContext(ctx)) return result;
 		activeTheme = ctx.ui.theme;
 		if (currentConfig.features.editor) {
 			const currentFactory = ctx.ui.getEditorComponent();
@@ -235,11 +264,12 @@ export default function (pi: ExtensionAPI) {
 	};
 
 	const installUi = (ctx: ExtensionContext) => {
-		if (!ctx.hasUI) return;
+		if (!isTuiContext(ctx)) return;
 		activeTheme = ctx.ui.theme;
 		uninstallPrototypePatches();
 		footerInstalled = false;
 		editorInstalled = false;
+		installedEditorFactory = undefined;
 		ensureConfigExists();
 		currentConfig = loadConfig();
 		syncFooterState(ctx);
@@ -250,9 +280,9 @@ export default function (pi: ExtensionAPI) {
 
 	const scheduleEditorReconciliation = (ctx: ExtensionContext) => {
 		setTimeout(() => {
-			if (!ctx.hasUI || !currentConfig.features.editor) return;
+			if (!isTuiContext(ctx) || !currentConfig.features.editor) return;
 			const currentFactory = ctx.ui.getEditorComponent();
-			if (currentFactory && !isZentuiEditorFactory(currentFactory)) {
+			if (currentFactory && currentFactory !== installedEditorFactory) {
 				applyConfiguredUi(ctx);
 				refresh();
 			}
@@ -264,18 +294,20 @@ export default function (pi: ExtensionAPI) {
 		stopProjectRefresh();
 		requestFooterRender = undefined;
 		getActiveExtensionStatuses = () => new Map();
-		if (ctx?.hasUI) {
+		if (ctx && isTuiContext(ctx)) {
 			ctx.ui.setFooter(undefined);
 			const currentFactory = ctx.ui.getEditorComponent();
 			if (!currentFactory || isZentuiEditorFactory(currentFactory)) {
 				ctx.ui.setEditorComponent(
-					editorInstallMode === "wrapper" && wrappedEditorFactory
-						? wrappedEditorFactory
-						: undefined,
+					getZentuiEditorBaseFactory(currentFactory) ??
+						(editorInstallMode === "wrapper" && wrappedEditorFactory
+							? wrappedEditorFactory
+							: undefined),
 				);
 			}
 		}
 		wrappedEditorFactory = undefined;
+		installedEditorFactory = undefined;
 		editorInstallMode = "none";
 		footerInstalled = false;
 		editorInstalled = false;
@@ -315,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";
@@ -305,7 +333,8 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 				return;
 			}
 
-			if (!ctx.hasUI) return;
+			const mode = (ctx as typeof ctx & { mode?: string }).mode;
+			if (!ctx.hasUI || (mode !== undefined && mode !== "tui")) return;
 
 			await ctx.ui.custom<void>((tui, theme, _keybindings, done) => {
 				const settingsListTheme = deps.settingsListTheme ?? getSettingsListTheme();
@@ -355,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

@@ -132,6 +132,60 @@ function composeMetadataLine(left: string, right: string | undefined, width: num
 	return `${leftText}${gap}${right}`;
 }
 
+function plainRenderedText(line: string): string {
+	return line
+		.replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "")
+		.replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/g, "")
+		.replace(/\[[/?][^\]]+\]/g, "");
+}
+
+function isHorizontalBorder(line: string): boolean {
+	const plain = plainRenderedText(line).trim();
+	return plain.length > 0 && /^─+$/.test(plain);
+}
+
+function isRenderedModelMetaLine(line: string, modelMeta: EditorMeta): boolean {
+	const plain = plainRenderedText(line);
+	return plain.includes(modelMeta.modelLabel) && plain.includes(modelMeta.providerLabel);
+}
+
+function hasRenderedModelMetaLine(lines: string[], modelMeta: EditorMeta): boolean {
+	return lines.some((line) => isRenderedModelMetaLine(line, modelMeta));
+}
+
+function isAlreadyPolishedFrame(lines: string[], modelMeta: EditorMeta): boolean {
+	return (
+		lines.length >= 3 &&
+		isHorizontalBorder(lines[0] ?? "") &&
+		isHorizontalBorder(lines.at(-1) ?? "") &&
+		hasRenderedModelMetaLine(lines.slice(1, -1), modelMeta)
+	);
+}
+
+function removeRenderedModelMetaLines(lines: string[], modelMeta: EditorMeta): string[] {
+	const result: string[] = [];
+	for (let index = 0; index < lines.length; index++) {
+		const line = lines[index] ?? "";
+		if (isRenderedModelMetaLine(line, modelMeta)) continue;
+
+		const plain = plainRenderedText(line).trim();
+		const previousWasMeta = index > 0 && isRenderedModelMetaLine(lines[index - 1] ?? "", modelMeta);
+		const nextIsMeta =
+			index < lines.length - 1 && isRenderedModelMetaLine(lines[index + 1] ?? "", modelMeta);
+		if (!plain && (previousWasMeta || nextIsMeta)) continue;
+
+		result.push(line);
+	}
+	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":
@@ -195,10 +249,13 @@ function renderPolishedFrame({
 		autocompleteCount > 0 && autocompleteCount < baseRendered.length
 			? baseRendered.slice(-autocompleteCount)
 			: [];
-
 	if (editorFrame.length < 2) return clampRenderedLines(baseRendered, width);
 
-	const editorLines = editorFrame.slice(1, -1);
+	const stalePolishedFrame = isAlreadyPolishedFrame(editorFrame, modelMeta);
+	const editorLines = removeStalePolishedLeadingSpacer(
+		removeRenderedModelMetaLines(editorFrame.slice(1, -1), modelMeta),
+		stalePolishedFrame,
+	);
 	const model = renderStyleForSourceOrFallback(
 		uiTheme,
 		colorSource,

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.2",
+	"version": "0.2.6",
 	"description": "A Starship-inspired statusline and Opencode-style TUI for Pi.",
 	"type": "module",
 	"license": "MIT",