pi-zentui 0.1.15 → 0.2.0

package/extensions/zentui/index.ts

@@ -23,7 +23,7 @@ import { readRuntimeInfo } from "./runtime";
 import { installSelectorBorderStyle } from "./selector-border";
 import { registerZentuiSettingsCommand } from "./settings-command";
 import { type FooterState, createInitialState, syncState } from "./state";
-import { PolishedEditor } from "./ui";
+import { PolishedEditor, WrappedPolishedEditor } from "./ui";
 import { installUserMessageStyle } from "./user-message";
 
 const ZENTUI_EDITOR_FACTORY = Symbol.for("pi-zentui.editor-factory");
@@ -38,6 +38,8 @@ type ApplyUiResult = {
 	editorBlocked: boolean;
 };
 
+type EditorInstallMode = "none" | "standalone" | "wrapper";
+
 function isZentuiEditorFactory(factory: EditorFactory | undefined): boolean {
 	return Boolean((factory as ZentuiEditorFactory | undefined)?.[ZENTUI_EDITOR_FACTORY]);
 }
@@ -53,6 +55,8 @@ export default function (pi: ExtensionAPI) {
 	let cleanupPrototypePatches: () => void = () => {};
 	let footerInstalled = false;
 	let editorInstalled = false;
+	let editorInstallMode: EditorInstallMode = "none";
+	let wrappedEditorFactory: EditorFactory | undefined;
 	let prototypePatchesInstalled = false;
 	let projectRefreshInFlight = false;
 	let projectRefreshPending = false;
@@ -139,12 +143,42 @@ export default function (pi: ExtensionAPI) {
 		return factory;
 	};
 
+	const makeWrappedEditorFactory = (
+		ctx: ExtensionContext,
+		baseFactory: EditorFactory,
+	): ZentuiEditorFactory => {
+		const factory = ((tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) =>
+			new WrappedPolishedEditor(
+				baseFactory(tui, theme, keybindings),
+				ctx.ui.theme,
+				getCurrentConfig,
+				() => ({
+					modelLabel: state.modelLabel,
+					providerLabel: state.providerLabel,
+				}),
+				getThinkingLevel,
+			)) as ZentuiEditorFactory;
+		factory[ZENTUI_EDITOR_FACTORY] = true;
+		return factory;
+	};
+
 	const installEditor = (ctx: ExtensionContext): boolean => {
 		const currentFactory = ctx.ui.getEditorComponent();
-		if (currentFactory && !isZentuiEditorFactory(currentFactory)) return false;
+		if (currentFactory && isZentuiEditorFactory(currentFactory)) {
+			editorInstalled = true;
+			return true;
+		}
 
 		installPrototypePatches();
-		ctx.ui.setEditorComponent(makeEditorFactory(ctx));
+		if (currentFactory) {
+			wrappedEditorFactory = currentFactory;
+			ctx.ui.setEditorComponent(makeWrappedEditorFactory(ctx, currentFactory));
+			editorInstallMode = "wrapper";
+		} else {
+			wrappedEditorFactory = undefined;
+			ctx.ui.setEditorComponent(makeEditorFactory(ctx));
+			editorInstallMode = "standalone";
+		}
 		editorInstalled = true;
 		return true;
 	};
@@ -154,7 +188,11 @@ export default function (pi: ExtensionAPI) {
 		if (currentFactory && !isZentuiEditorFactory(currentFactory)) return false;
 
 		uninstallPrototypePatches();
-		ctx.ui.setEditorComponent(undefined);
+		ctx.ui.setEditorComponent(
+			editorInstallMode === "wrapper" && wrappedEditorFactory ? wrappedEditorFactory : undefined,
+		);
+		wrappedEditorFactory = undefined;
+		editorInstallMode = "none";
 		editorInstalled = false;
 		return true;
 	};
@@ -192,7 +230,9 @@ export default function (pi: ExtensionAPI) {
 		if (!ctx.hasUI) return result;
 		activeTheme = ctx.ui.theme;
 		if (currentConfig.features.editor) {
-			if (!editorInstalled) result.editorBlocked = !installEditor(ctx);
+			const currentFactory = ctx.ui.getEditorComponent();
+			const editorMissingOrReplaced = !editorInstalled || !isZentuiEditorFactory(currentFactory);
+			if (editorMissingOrReplaced) result.editorBlocked = !installEditor(ctx);
 		} else if (editorInstalled || prototypePatchesInstalled) {
 			result.editorBlocked = !uninstallEditor(ctx);
 		}
@@ -219,6 +259,17 @@ export default function (pi: ExtensionAPI) {
 		refresh();
 	};
 
+	const scheduleEditorReconciliation = (ctx: ExtensionContext) => {
+		setTimeout(() => {
+			if (!ctx.hasUI || !currentConfig.features.editor) return;
+			const currentFactory = ctx.ui.getEditorComponent();
+			if (currentFactory && !isZentuiEditorFactory(currentFactory)) {
+				applyConfiguredUi(ctx);
+				refresh();
+			}
+		}, 0);
+	};
+
 	const cleanupUi = (ctx?: ExtensionContext) => {
 		uninstallPrototypePatches();
 		stopProjectRefresh();
@@ -226,8 +277,17 @@ export default function (pi: ExtensionAPI) {
 		getActiveExtensionStatuses = () => new Map();
 		if (ctx?.hasUI) {
 			ctx.ui.setFooter(undefined);
-			ctx.ui.setEditorComponent(undefined);
+			const currentFactory = ctx.ui.getEditorComponent();
+			if (!currentFactory || isZentuiEditorFactory(currentFactory)) {
+				ctx.ui.setEditorComponent(
+					editorInstallMode === "wrapper" && wrappedEditorFactory
+						? wrappedEditorFactory
+						: undefined,
+				);
+			}
 		}
+		wrappedEditorFactory = undefined;
+		editorInstallMode = "none";
 		footerInstalled = false;
 		editorInstalled = false;
 		activeTheme = undefined;
@@ -242,6 +302,7 @@ export default function (pi: ExtensionAPI) {
 
 	pi.on("session_start", async (_event, ctx) => {
 		installUi(ctx);
+		scheduleEditorReconciliation(ctx);
 	});
 
 	registerZentuiSettingsCommand(pi, {

package/extensions/zentui/ui.ts

@@ -1,6 +1,8 @@
 import { CustomEditor, type KeybindingsManager, type Theme } from "@earendil-works/pi-coding-agent";
 import {
+	type AutocompleteProvider,
 	type Component,
+	type EditorComponent,
 	type EditorTheme,
 	type TUI,
 	truncateToWidth,
@@ -19,22 +21,260 @@ type AutocompleteEditorInternals = {
 	isShowingAutocomplete?: () => boolean;
 };
 
+type WrappedEditor = EditorComponent &
+	AutocompleteEditorInternals & {
+		focused?: boolean;
+		onEscape?: () => void;
+		onCtrlD?: () => void;
+		onPasteImage?: () => void;
+		onExtensionShortcut?: (data: string) => boolean;
+		actionHandlers?: Map<unknown, () => void>;
+		wantsKeyRelease?: boolean;
+		disableSubmit?: boolean;
+		getLines?: () => string[];
+		getCursor?: () => unknown;
+		getMode?: () => unknown;
+		getPaddingX?: () => number;
+		getAutocompleteMaxVisible?: () => number;
+		addToHistory?: (text: string) => void;
+		getExpandedText?: () => string;
+		insertTextAtCursor?: (text: string) => void;
+		setAutocompleteProvider?: (provider: AutocompleteProvider) => void;
+		setPaddingX?: (padding: number) => void;
+		setAutocompleteMaxVisible?: (maxVisible: number) => void;
+	};
+
 type EditorMeta = {
 	modelLabel: string;
 	providerLabel: string;
 };
 
+type PolishedFrameOptions = {
+	width: number;
+	baseRendered: string[];
+	autocompleteSource: AutocompleteEditorInternals;
+	uiTheme: Theme;
+	config: PolishedTuiConfig;
+	modelMeta: EditorMeta;
+	thinkingLevel: string | undefined;
+	rightStatus?: string;
+};
+
 function clampRenderedLines(lines: string[], width: number): string[] {
 	const maxWidth = Math.max(0, width);
 	return lines.map((line) => truncateToWidth(line, maxWidth, ""));
 }
 
+function fillLine(content: string, width: number): string {
+	const truncated = truncateToWidth(content, Math.max(0, width), "");
+	const pad = " ".repeat(Math.max(0, width - visibleWidth(truncated)));
+	return `${truncated}${pad}`;
+}
+
+function editorThinkingStyle(config: PolishedTuiConfig, level: string): string | undefined {
+	switch (level.toLowerCase()) {
+		case "minimal":
+			return config.colors.editorThinkingMinimal ?? config.colors.editorThinking;
+		case "low":
+			return config.colors.editorThinkingLow ?? config.colors.editorThinking;
+		case "medium":
+			return config.colors.editorThinkingMedium ?? config.colors.editorThinking;
+		case "high":
+			return config.colors.editorThinkingHigh ?? config.colors.editorThinking;
+		case "xhigh":
+			return config.colors.editorThinkingXhigh ?? config.colors.editorThinking;
+		default:
+			return config.colors.editorThinking;
+	}
+}
+
+function copyFriendlyPrompt(config: PolishedTuiConfig, uiTheme: Theme, reset: string): string {
+	const promptIcon = config.icons.editorPrompt;
+	return promptIcon
+		? `${renderStyleForSourceOrFallback(
+				uiTheme,
+				config.colorSources.editor,
+				config.colors.editorPrompt ?? config.colors.editorAccent,
+				EDITOR_ACCENT_FALLBACK,
+				promptIcon,
+			)}${reset} `
+		: "";
+}
+
+function getEditorChromeWidths(config: PolishedTuiConfig, uiTheme: Theme, reset: string) {
+	const prompt = copyFriendlyPrompt(config, uiTheme, reset);
+	const rail = config.features.copyFriendly
+		? ""
+		: `${renderStyleForSourceOrFallback(
+				uiTheme,
+				config.colorSources.editor,
+				config.colors.editorAccent,
+				EDITOR_ACCENT_FALLBACK,
+				"│",
+			)}${reset} `;
+	return {
+		prompt,
+		promptWidth: visibleWidth(prompt),
+		rail,
+		railWidth: config.features.copyFriendly ? visibleWidth(prompt) : visibleWidth(rail),
+	};
+}
+
+function composeMetadataLine(left: string, right: string | undefined, width: number): string {
+	if (!right) return left;
+	const maxWidth = Math.max(0, width);
+	const rightWidth = visibleWidth(right);
+	if (rightWidth >= maxWidth) return truncateToWidth(right, maxWidth, "");
+
+	const leftWidth = Math.max(0, maxWidth - rightWidth - 1);
+	const leftText = truncateToWidth(left, leftWidth, "");
+	const gap = " ".repeat(Math.max(1, maxWidth - visibleWidth(leftText) - rightWidth));
+	return `${leftText}${gap}${right}`;
+}
+
+function vimModeColor(mode: string): string {
+	switch (mode.toLowerCase()) {
+		case "insert":
+			return "success";
+		case "normal":
+			return "accent";
+		case "ex":
+			return "warning";
+		case "replace":
+			return "error";
+		case "visual":
+			return "syntaxKeyword";
+		default:
+			return "muted";
+	}
+}
+
+function readVimStatus(editor: WrappedEditor, uiTheme: Theme): string | undefined {
+	const mode = editor.getMode?.();
+	if (typeof mode !== "string") return undefined;
+	const normalized = mode.trim();
+	if (!normalized) return undefined;
+	const label = `${normalized.toUpperCase()} `;
+	return safeThemeFg(uiTheme, vimModeColor(normalized), label);
+}
+
+function renderPolishedFrame({
+	width,
+	baseRendered,
+	autocompleteSource,
+	uiTheme,
+	config,
+	modelMeta,
+	thinkingLevel,
+	rightStatus,
+}: PolishedFrameOptions): string[] {
+	if (width <= 2) return clampRenderedLines(baseRendered, width);
+
+	const reset = "\x1b[0m";
+	const colorSource = config.colorSources.editor;
+	const { prompt, promptWidth, rail, railWidth } = getEditorChromeWidths(config, uiTheme, reset);
+	const innerWidth = Math.max(0, width - railWidth);
+	const copyFriendlyContinuation = " ".repeat(promptWidth);
+	const isShowingAutocomplete =
+		typeof autocompleteSource.isShowingAutocomplete === "function"
+			? Boolean(autocompleteSource.isShowingAutocomplete())
+			: false;
+
+	if (baseRendered.length < 2) return clampRenderedLines(baseRendered, width);
+
+	const { autocompleteList } = autocompleteSource;
+	const autocompleteCount =
+		isShowingAutocomplete && typeof autocompleteList?.render === "function"
+			? autocompleteList.render(innerWidth).length
+			: 0;
+	const editorFrame =
+		autocompleteCount > 0 && autocompleteCount < baseRendered.length
+			? baseRendered.slice(0, -autocompleteCount)
+			: baseRendered;
+	const autocompleteLines =
+		autocompleteCount > 0 && autocompleteCount < baseRendered.length
+			? baseRendered.slice(-autocompleteCount)
+			: [];
+
+	if (editorFrame.length < 2) return clampRenderedLines(baseRendered, width);
+
+	const editorLines = editorFrame.slice(1, -1);
+	const model = renderStyleForSourceOrFallback(
+		uiTheme,
+		colorSource,
+		config.colors.editorModel,
+		EDITOR_ACCENT_FALLBACK,
+		modelMeta.modelLabel,
+	);
+	const provider = renderStyleForSourceOrFallback(
+		uiTheme,
+		colorSource,
+		config.colors.editorProvider,
+		"text",
+		modelMeta.providerLabel,
+	);
+	const renderedModelMeta = [model, provider]
+		.filter(Boolean)
+		.join(safeThemeFg(uiTheme, "borderMuted", "  "));
+	const metaParts = [renderedModelMeta];
+	if (thinkingLevel && thinkingLevel !== "off") {
+		metaParts.push(
+			renderStyleForSourceOrFallback(
+				uiTheme,
+				colorSource,
+				editorThinkingStyle(config, thinkingLevel),
+				"muted",
+				thinkingLevel,
+			),
+		);
+	}
+	const meta = metaParts.filter(Boolean).join(safeThemeFg(uiTheme, "border", "  "));
+	const copyFriendlyMeta = composeMetadataLine(meta, rightStatus, Math.max(0, width - 1));
+	const railedMeta = composeMetadataLine(meta, rightStatus, innerWidth);
+
+	const top = renderStyleForSourceOrFallback(
+		uiTheme,
+		colorSource,
+		config.colors.editorBorder,
+		EDITOR_BORDER_FALLBACK,
+		"─".repeat(width),
+	);
+	const bottom = renderStyleForSourceOrFallback(
+		uiTheme,
+		colorSource,
+		config.colors.editorBorder,
+		EDITOR_BORDER_FALLBACK,
+		"─".repeat(width),
+	);
+	const lines = ["", ...editorLines, "", railedMeta];
+	const renderedLines = config.features.copyFriendly
+		? [
+				top,
+				"",
+				...editorLines.map(
+					(line, index) =>
+						`${index === 0 ? prompt : copyFriendlyContinuation}${fillLine(line, innerWidth)}`,
+				),
+				"",
+				` ${truncateToWidth(copyFriendlyMeta, Math.max(0, width - 1), "")}`,
+				bottom,
+				...autocompleteLines,
+			]
+		: [
+				top,
+				...lines.map((line) => `${rail}${fillLine(line, innerWidth)}`),
+				bottom,
+				...autocompleteLines,
+			];
+
+	return clampRenderedLines(renderedLines, width);
+}
+
 export class PolishedEditor extends CustomEditor {
 	private readonly getModelMeta: () => EditorMeta;
 	private readonly getThinkingLevel: () => string | undefined;
 	private readonly getConfig: () => PolishedTuiConfig;
 	private readonly uiTheme: Theme;
-	private readonly reset = "\x1b[0m";
 
 	constructor(
 		tui: TUI,
@@ -53,160 +293,190 @@ export class PolishedEditor extends CustomEditor {
 		this.getThinkingLevel = getThinkingLevel;
 	}
 
-	private fillLine(content: string, width: number): string {
-		const truncated = truncateToWidth(content, Math.max(0, width), "");
-		const pad = " ".repeat(Math.max(0, width - visibleWidth(truncated)));
-		return `${truncated}${pad}`;
-	}
-
-	private editorThinkingStyle(config: PolishedTuiConfig, level: string): string | undefined {
-		switch (level.toLowerCase()) {
-			case "minimal":
-				return config.colors.editorThinkingMinimal ?? config.colors.editorThinking;
-			case "low":
-				return config.colors.editorThinkingLow ?? config.colors.editorThinking;
-			case "medium":
-				return config.colors.editorThinkingMedium ?? config.colors.editorThinking;
-			case "high":
-				return config.colors.editorThinkingHigh ?? config.colors.editorThinking;
-			case "xhigh":
-				return config.colors.editorThinkingXhigh ?? config.colors.editorThinking;
-			default:
-				return config.colors.editorThinking;
-		}
-	}
-
 	render(width: number): string[] {
 		if (width <= 2) {
 			return clampRenderedLines(super.render(width), width);
 		}
 
 		const config = this.getConfig();
-		const colorSource = config.colorSources.editor;
-		const promptIcon = config.icons.editorPrompt;
-		const copyFriendlyPrompt = promptIcon
-			? `${renderStyleForSourceOrFallback(
-					this.uiTheme,
-					colorSource,
-					config.colors.editorPrompt ?? config.colors.editorAccent,
-					EDITOR_ACCENT_FALLBACK,
-					promptIcon,
-				)}${this.reset} `
-			: "";
-		const copyFriendlyPromptWidth = visibleWidth(copyFriendlyPrompt);
-		const copyFriendlyContinuation = " ".repeat(copyFriendlyPromptWidth);
-		const rail = config.features.copyFriendly
-			? ""
-			: `${renderStyleForSourceOrFallback(
-					this.uiTheme,
-					colorSource,
-					config.colors.editorAccent,
-					EDITOR_ACCENT_FALLBACK,
-					"│",
-				)}${this.reset} `;
-		const railWidth = config.features.copyFriendly ? copyFriendlyPromptWidth : visibleWidth(rail);
+		const { railWidth } = getEditorChromeWidths(config, this.uiTheme, "\x1b[0m");
 		const innerWidth = Math.max(0, width - railWidth);
 		const rendered = super.render(innerWidth);
-		const editorInternals = this as unknown as AutocompleteEditorInternals;
-		const isShowingAutocomplete =
-			typeof editorInternals.isShowingAutocomplete === "function"
-				? Boolean(editorInternals.isShowingAutocomplete())
-				: false;
+		return renderPolishedFrame({
+			width,
+			baseRendered: rendered,
+			autocompleteSource: this as unknown as AutocompleteEditorInternals,
+			uiTheme: this.uiTheme,
+			config,
+			modelMeta: this.getModelMeta(),
+			thinkingLevel: this.getThinkingLevel(),
+		});
+	}
+}
 
-		if (rendered.length < 2) {
-			return clampRenderedLines(super.render(width), width);
-		}
+export class WrappedPolishedEditor implements EditorComponent {
+	constructor(
+		private readonly base: WrappedEditor,
+		private readonly uiTheme: Theme,
+		private readonly getConfig: () => PolishedTuiConfig,
+		private readonly getModelMeta: () => EditorMeta,
+		private readonly getThinkingLevel: () => string | undefined,
+	) {}
 
-		const { autocompleteList } = editorInternals;
-		const autocompleteCount =
-			isShowingAutocomplete && typeof autocompleteList?.render === "function"
-				? autocompleteList.render(innerWidth).length
-				: 0;
-		const editorFrame =
-			autocompleteCount > 0 && autocompleteCount < rendered.length
-				? rendered.slice(0, -autocompleteCount)
-				: rendered;
-		const autocompleteLines =
-			autocompleteCount > 0 && autocompleteCount < rendered.length
-				? rendered.slice(-autocompleteCount)
-				: [];
-
-		if (editorFrame.length < 2) {
-			return clampRenderedLines(rendered, width);
-		}
+	get focused(): boolean {
+		return Boolean(this.base.focused);
+	}
+	set focused(value: boolean) {
+		this.base.focused = value;
+	}
 
-		const editorLines = editorFrame.slice(1, -1);
-		const { modelLabel, providerLabel } = this.getModelMeta();
-		const model = renderStyleForSourceOrFallback(
-			this.uiTheme,
-			colorSource,
-			config.colors.editorModel,
-			EDITOR_ACCENT_FALLBACK,
-			modelLabel,
-		);
-		const provider = renderStyleForSourceOrFallback(
-			this.uiTheme,
-			colorSource,
-			config.colors.editorProvider,
-			"text",
-			providerLabel,
-		);
-		const modelMeta = [model, provider]
-			.filter(Boolean)
-			.join(safeThemeFg(this.uiTheme, "borderMuted", "  "));
-		const metaParts = [modelMeta];
-		const thinkingLevel = this.getThinkingLevel();
-		if (thinkingLevel && thinkingLevel !== "off") {
-			metaParts.push(
-				renderStyleForSourceOrFallback(
-					this.uiTheme,
-					colorSource,
-					this.editorThinkingStyle(config, thinkingLevel),
-					"muted",
-					thinkingLevel,
-				),
-			);
-		}
-		const meta = metaParts.filter(Boolean).join(safeThemeFg(this.uiTheme, "border", "  "));
-
-		const top = renderStyleForSourceOrFallback(
-			this.uiTheme,
-			colorSource,
-			config.colors.editorBorder,
-			EDITOR_BORDER_FALLBACK,
-			"─".repeat(width),
-		);
-		const bottom = renderStyleForSourceOrFallback(
-			this.uiTheme,
-			colorSource,
-			config.colors.editorBorder,
-			EDITOR_BORDER_FALLBACK,
-			"─".repeat(width),
-		);
-		const lines = ["", ...editorLines, "", meta];
-		const renderedLines = config.features.copyFriendly
-			? [
-					top,
-					"",
-					...editorLines.map(
-						(line, index) =>
-							`${index === 0 ? copyFriendlyPrompt : copyFriendlyContinuation}${this.fillLine(
-								line,
-								innerWidth,
-							)}`,
-					),
-					"",
-					` ${truncateToWidth(meta, Math.max(0, width - 1), "")}`,
-					bottom,
-					...autocompleteLines,
-				]
-			: [
-					top,
-					...lines.map((line) => `${rail}${this.fillLine(line, innerWidth)}`),
-					bottom,
-					...autocompleteLines,
-				];
-
-		return clampRenderedLines(renderedLines, width);
+	get borderColor(): ((str: string) => string) | undefined {
+		return this.base.borderColor;
+	}
+	set borderColor(value: ((str: string) => string) | undefined) {
+		this.base.borderColor = value;
+	}
+
+	get onSubmit(): ((text: string) => void) | undefined {
+		return this.base.onSubmit;
+	}
+	set onSubmit(value: ((text: string) => void) | undefined) {
+		this.base.onSubmit = value;
+	}
+
+	get onChange(): ((text: string) => void) | undefined {
+		return this.base.onChange;
+	}
+	set onChange(value: ((text: string) => void) | undefined) {
+		this.base.onChange = value;
+	}
+
+	get onEscape(): (() => void) | undefined {
+		return this.base.onEscape;
+	}
+	set onEscape(value: (() => void) | undefined) {
+		this.base.onEscape = value;
+	}
+
+	get onCtrlD(): (() => void) | undefined {
+		return this.base.onCtrlD;
+	}
+	set onCtrlD(value: (() => void) | undefined) {
+		this.base.onCtrlD = value;
+	}
+
+	get onPasteImage(): (() => void) | undefined {
+		return this.base.onPasteImage;
+	}
+	set onPasteImage(value: (() => void) | undefined) {
+		this.base.onPasteImage = value;
+	}
+
+	get onExtensionShortcut(): ((data: string) => boolean) | undefined {
+		return this.base.onExtensionShortcut;
+	}
+	set onExtensionShortcut(value: ((data: string) => boolean) | undefined) {
+		this.base.onExtensionShortcut = value;
+	}
+
+	get actionHandlers(): Map<unknown, () => void> | undefined {
+		return this.base.actionHandlers;
+	}
+	set actionHandlers(value: Map<unknown, () => void> | undefined) {
+		this.base.actionHandlers = value;
+	}
+
+	get wantsKeyRelease(): boolean | undefined {
+		return this.base.wantsKeyRelease;
+	}
+	set wantsKeyRelease(value: boolean | undefined) {
+		this.base.wantsKeyRelease = value;
+	}
+
+	get disableSubmit(): boolean | undefined {
+		return this.base.disableSubmit;
+	}
+	set disableSubmit(value: boolean | undefined) {
+		this.base.disableSubmit = value;
+	}
+
+	render(width: number): string[] {
+		if (width <= 2) return clampRenderedLines(this.base.render(width), width);
+
+		const config = this.getConfig();
+		const { railWidth } = getEditorChromeWidths(config, this.uiTheme, "\x1b[0m");
+		const innerWidth = Math.max(0, width - railWidth);
+		const rendered = this.base.render(innerWidth);
+		const vimStatus = readVimStatus(this.base, this.uiTheme);
+		return renderPolishedFrame({
+			width,
+			baseRendered: rendered,
+			autocompleteSource: this.base,
+			uiTheme: this.uiTheme,
+			config,
+			modelMeta: this.getModelMeta(),
+			thinkingLevel: this.getThinkingLevel(),
+			rightStatus: vimStatus,
+		});
+	}
+
+	invalidate(): void {
+		this.base.invalidate?.();
+	}
+
+	handleInput(data: string): void {
+		this.base.handleInput(data);
+	}
+
+	getText(): string {
+		return this.base.getText();
+	}
+
+	setText(text: string): void {
+		this.base.setText(text);
+	}
+
+	addToHistory(text: string): void {
+		this.base.addToHistory?.(text);
+	}
+
+	insertTextAtCursor(text: string): void {
+		this.base.insertTextAtCursor?.(text);
+	}
+
+	getExpandedText(): string {
+		return this.base.getExpandedText?.() ?? this.base.getText();
+	}
+
+	setAutocompleteProvider(provider: AutocompleteProvider): void {
+		this.base.setAutocompleteProvider?.(provider);
+	}
+
+	setPaddingX(padding: number): void {
+		this.base.setPaddingX?.(padding);
+	}
+
+	setAutocompleteMaxVisible(maxVisible: number): void {
+		this.base.setAutocompleteMaxVisible?.(maxVisible);
+	}
+
+	getLines(): string[] {
+		return this.base.getLines?.() ?? this.base.getText().split("\n");
+	}
+
+	getCursor(): unknown {
+		return this.base.getCursor?.();
+	}
+
+	getMode(): unknown {
+		return this.base.getMode?.();
+	}
+
+	getPaddingX(): number | undefined {
+		return this.base.getPaddingX?.();
+	}
+
+	getAutocompleteMaxVisible(): number | undefined {
+		return this.base.getAutocompleteMaxVisible?.();
 	}
 }

package/package.json

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