pi-zentui 0.1.14 → 0.2.0

package/README.md

@@ -11,7 +11,7 @@ A Starship-inspired statusline and Opencode-style TUI for [Pi](https://pi.dev).
 Zentui brings two popular aesthetics to Pi:
 
 - **[Starship](https://starship.rs/) footer** — shows your current directory, git branch, git status indicators, and runtime/version detection in a compact, icon-rich format
-- **[Opencode](https://github.com/opencode-ai/opencode) editor** — clean bordered input box with accent rail and model/provider display inside the editor frame
+- **[Opencode](https://github.com/opencode-ai/opencode) editor** — clean bordered input box with accent rail, copy-friendly mode, and model/provider display inside the editor frame
 
 ## Features
 
@@ -31,6 +31,7 @@ Zentui brings two popular aesthetics to Pi:
 - Model name and provider displayed inside the editor frame
 - Configurable model, provider, and thinking-level indicator colors
 - Prompt-box-style user messages matching the ZentUI input chrome
+- Copy-friendly mode hides editor and previous-message rail glyphs so terminal selection copies less chrome
 
 ### Git Status Icons
 
@@ -125,6 +126,8 @@ pi install git:github.com/lmilojevicc/pi-zentui
 
 User config lives at `~/.pi/agent/zentui.json`. The file is optional: missing or invalid known values fall back to Zentui defaults, unknown keys are ignored at runtime, and `/zentui` can patch color-source settings, UI feature toggles, and active third-party status placements.
 
+The interactive `/zentui` menu is split into three sections. Use `Tab` to switch between `Coloring`, `Features`, and `Status line`.
+
 Useful slash-command shortcuts:
 
 ```text
@@ -134,6 +137,9 @@ Useful slash-command shortcuts:
 /zentui statusline disable
 /zentui editor toggle
 /zentui statusline toggle
+/zentui copy-friendly enable
+/zentui copy-friendly disable
+/zentui copy-friendly toggle
 ```
 
 Default config values — copy this and change any value you want:
@@ -155,7 +161,8 @@ Default config values — copy this and change any value you want:
 		"renamed": "»",
 		"deleted": "✘",
 		"typechanged": "T",
-		"cacheHit": "󰆼"
+		"cacheHit": "󰆼",
+		"editorPrompt": ""
 	},
 	"colors": {
 		"cwd": "bold cyan",
@@ -170,6 +177,7 @@ Default config values — copy this and change any value you want:
 		"separator": "bright-black",
 		"runtimePrefix": "",
 		"editorAccent": "accent",
+		"editorPrompt": "accent",
 		"editorBorder": "borderMuted",
 		"editorModel": "accent",
 		"editorProvider": "text",
@@ -187,7 +195,8 @@ Default config values — copy this and change any value you want:
 	},
 	"features": {
 		"editor": true,
-		"statusLine": true
+		"statusLine": true,
+		"copyFriendly": false
 	},
 	"extensionStatuses": {
 		"defaultPlacement": "right",
@@ -198,15 +207,18 @@ Default config values — copy this and change any value you want:
 
 - Style values can be Starship/terminal strings (`bold purple`, `fg:202`, `#89b4fa`, `bg:blue fg:bright-green`) or Pi theme tokens (`accent`, `borderMuted`, `thinkingHigh`).
 - `projectRefreshIntervalMs`: project status polling interval; `0` disables polling.
-- `icons`: every shown icon key is configurable; omit any key to use the Zentui default.
+- `icons`: every shown icon key is configurable; omit any key to use the Zentui default. `editorPrompt` controls an optional copy-friendly editor prompt glyph; the default is `""` so copy-friendly mode stays rail-free.
 - `colorSources`: `theme` maps styles through Pi theme tokens; `terminal` emits terminal colors. `/zentui` switches these sources; manual JSON controls specific style values.
-- `features`: `editor` enables Zentui's custom editor, selector borders, and previous-message chrome. `statusLine` enables Zentui's custom footer/status line. Both can be changed from `/zentui` or direct slash-command arguments.
+- `features`: `editor` enables Zentui's custom editor, selector borders, and previous-message chrome. `statusLine` enables Zentui's custom footer/status line. `copyFriendly` hides editor and previous-message rail glyphs so native terminal selection copies less chrome. All three can be changed from `/zentui` or direct slash-command arguments.
 - `extensionStatuses`: controls third-party statuses published by other Pi extensions through `ctx.ui.setStatus()`. `defaultPlacement` and each `placements` value can be `off`, `left`, `middle`, or `right`. `/zentui` lists only statuses that are currently active.
 - The shown `editor*` values match the default `theme` source. Omit those keys to keep Zentui's source-aware defaults when switching between `theme` and `terminal`.
-- `editorAccent` styles the active editor rail and previous user-message rail.
+- `editorAccent` styles the active editor rail and previous user-message rail when `features.copyFriendly` is disabled.
+- `editorPrompt` styles the copy-friendly editor prompt glyph. Omit it to use `editorAccent`, then the default accent fallback.
 - `editorBorder` styles the active editor and previous user-message top/bottom border color only; the border glyph stays `─`.
 - `editorModel`, `editorProvider`, and `editorThinking*` style the editor metadata. `editorThinking` applies to every non-`off` thinking level unless a level-specific key is set.
 
+Tip: when using copy-friendly mode, setting Pi's `editorPaddingX` to `1` in `~/.pi/agent/settings.json` keeps a small left gutter without copying a rail glyph.
+
 ## Requirements
 
 - [Pi](https://pi.dev) coding agent 0.74 or newer

package/extensions/zentui/config.ts

@@ -15,6 +15,7 @@ export type ColorSourcesConfig = {
 export type UiFeaturesConfig = {
 	editor: boolean;
 	statusLine: boolean;
+	copyFriendly: boolean;
 };
 
 export type ExtensionStatusPlacement = "off" | "left" | "middle" | "right";
@@ -44,6 +45,7 @@ export type PolishedTuiConfig = {
 		deleted: string;
 		typechanged: string;
 		cacheHit: string;
+		editorPrompt: string;
 	};
 	colors: {
 		cwd: ColorSpec;
@@ -58,6 +60,7 @@ export type PolishedTuiConfig = {
 		runtimePrefix: ColorSpec;
 		extensionStatus: ColorSpec;
 		editorAccent?: ColorSpec;
+		editorPrompt?: ColorSpec;
 		editorBorder?: ColorSpec;
 		editorModel?: ColorSpec;
 		editorProvider?: ColorSpec;
@@ -92,6 +95,7 @@ export const defaultConfig: PolishedTuiConfig = {
 		deleted: "✘",
 		typechanged: "T",
 		cacheHit: "󰆼",
+		editorPrompt: "",
 	},
 	colors: {
 		cwd: "bold cyan",
@@ -114,6 +118,7 @@ export const defaultConfig: PolishedTuiConfig = {
 	features: {
 		editor: true,
 		statusLine: true,
+		copyFriendly: false,
 	},
 	extensionStatuses: {
 		defaultPlacement: "right",
@@ -136,6 +141,7 @@ const iconKeys = [
 	"deleted",
 	"typechanged",
 	"cacheHit",
+	"editorPrompt",
 ] as const satisfies readonly (keyof PolishedTuiConfig["icons"])[];
 
 type ConfigRecord = Record<string, unknown>;
@@ -212,6 +218,7 @@ function normalizeColors(record: Record<string, unknown>): Partial<PolishedTuiCo
 		runtimePrefix: colorValue(record, "runtimePrefix"),
 		extensionStatus: colorValue(record, "extensionStatus"),
 		editorAccent: colorValue(record, "editorAccent"),
+		editorPrompt: colorValue(record, "editorPrompt"),
 		editorBorder: colorValue(record, "editorBorder"),
 		editorModel: colorValue(record, "editorModel"),
 		editorProvider: colorValue(record, "editorProvider"),
@@ -236,6 +243,7 @@ function normalizeUiFeatures(record: Record<string, unknown>): UiFeaturesConfig
 	return {
 		editor: booleanValue(record, "editor"),
 		statusLine: booleanValue(record, "statusLine"),
+		copyFriendly: booleanValue(record, "copyFriendly"),
 	};
 }
 
@@ -267,7 +275,7 @@ function isColorSourceKey(value: string): value is keyof ColorSourcesConfig {
 }
 
 function isUiFeatureKey(value: string): value is keyof UiFeaturesConfig {
-	return value === "editor" || value === "statusLine";
+	return value === "editor" || value === "statusLine" || value === "copyFriendly";
 }
 
 function validColorSourceEntries(record: Record<string, unknown>): Partial<ColorSourcesConfig> {

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/settings-command.ts

@@ -29,9 +29,11 @@ const extensionStatusPlacementValues: ExtensionStatusPlacement[] = [
 type FeatureState = "enabled" | "disabled";
 
 const featureStateValues: FeatureState[] = ["enabled", "disabled"];
+const settingsSections = ["coloring", "features", "statusLine"] as const;
 
 type ColorSettingId = "starship" | "editorMessages";
 type FeatureSettingId = keyof UiFeaturesConfig;
+type SettingsSection = (typeof settingsSections)[number];
 
 type SettingsCommandDeps = {
 	getConfig: () => PolishedTuiConfig;
@@ -61,12 +63,15 @@ const colorSettingDescriptions: Record<ColorSettingId, string> = {
 const featureSettingLabels: Record<FeatureSettingId, string> = {
 	editor: "Editor",
 	statusLine: "Status line",
+	copyFriendly: "Copy-friendly mode",
 };
 
 const featureSettingDescriptions: Record<FeatureSettingId, string> = {
 	editor:
 		"Enable or disable Zentui's custom editor, selector borders, and previous-message chrome.",
 	statusLine: "Enable or disable Zentui's custom footer/status line.",
+	copyFriendly:
+		"Hide editor and previous-message rail glyphs for cleaner native terminal selection.",
 };
 
 const directCommandSuggestions = [
@@ -76,8 +81,19 @@ const directCommandSuggestions = [
 	"statusline enable",
 	"statusline disable",
 	"statusline toggle",
+	"copy-friendly enable",
+	"copy-friendly disable",
+	"copy-friendly toggle",
 ];
 
+const sectionLabels: Record<SettingsSection, string> = {
+	coloring: "Coloring",
+	features: "Features",
+	statusLine: "Status line",
+};
+
+const thirdPartyStatusSettingPrefix = "thirdPartyStatus:";
+
 function isColorSource(value: string): value is ColorSource {
 	return value === "theme" || value === "terminal";
 }
@@ -87,7 +103,7 @@ function isColorSettingId(value: string): value is ColorSettingId {
 }
 
 function isFeatureSettingId(value: string): value is FeatureSettingId {
-	return value === "editor" || value === "statusLine";
+	return value === "editor" || value === "statusLine" || value === "copyFriendly";
 }
 
 function isFeatureState(value: string): value is FeatureState {
@@ -113,7 +129,7 @@ function featurePatch(id: FeatureSettingId, value: FeatureState): Partial<UiFeat
 }
 
 function usageText(): string {
-	return "Usage: /zentui [editor|statusline] [enable|disable|toggle]";
+	return "Usage: /zentui [editor|statusline|copy-friendly] [enable|disable|toggle]";
 }
 
 function featureNotification(
@@ -138,7 +154,9 @@ function parseDirectFeatureCommand(
 		? "editor"
 		: hasWord("footer") || hasWord("statusline") || hasWord("status")
 			? "statusLine"
-			: undefined;
+			: hasWord("copyfriendly") || hasWord("copy")
+				? "copyFriendly"
+				: undefined;
 	const action = hasWord("toggle")
 		? "toggle"
 		: hasWord("enable") || hasWord("enabled") || hasWord("on")
@@ -163,34 +181,92 @@ function argumentCompletions(prefix: string): AutocompleteItem[] | null {
 }
 
 function buildItems(
+	section: SettingsSection,
 	config: PolishedTuiConfig,
-	activeStatusCount: number,
-	thirdPartyStatusesSubmenu: SettingItem["submenu"],
+	activeStatuses: ReadonlyMap<string, string>,
 ): SettingItem[] {
-	return [
-		...(Object.keys(colorSettingLabels) as ColorSettingId[]).map((key) => ({
+	if (section === "coloring") {
+		return (Object.keys(colorSettingLabels) as ColorSettingId[]).map((key) => ({
 			id: key,
 			label: colorSettingLabels[key],
 			description: colorSettingDescriptions[key],
 			currentValue: key === "starship" ? config.colorSources.starship : editorMessageValue(config),
 			values: colorSourceValues,
-		})),
-		{
-			id: "thirdPartyStatuses",
-			label: "Third-party statuses",
-			description:
-				"Configure active ctx.ui.setStatus() footer statuses. Only currently active keys are listed.",
-			currentValue: `${activeStatusCount} active`,
-			submenu: thirdPartyStatusesSubmenu,
-		},
-		...(Object.keys(featureSettingLabels) as FeatureSettingId[]).map((key) => ({
+		}));
+	}
+
+	if (section === "features") {
+		return (Object.keys(featureSettingLabels) as FeatureSettingId[]).map((key) => ({
 			id: key,
 			label: featureSettingLabels[key],
 			description: featureSettingDescriptions[key],
 			currentValue: featureValue(config.features[key]),
 			values: featureStateValues,
-		})),
-	];
+		}));
+	}
+
+	const statuses = Array.from(activeStatuses.entries()).sort(([a], [b]) =>
+		a < b ? -1 : a > b ? 1 : 0,
+	);
+	if (statuses.length === 0) {
+		return [
+			{
+				id: "noThirdPartyStatuses",
+				label: "No active statuses",
+				description:
+					"This section only lists statuses currently published through ctx.ui.setStatus().",
+				currentValue: "—",
+			},
+		];
+	}
+
+	return statuses.map(([key, value]) => {
+		const sanitizedText = sanitizeExtensionStatusText(value);
+		return {
+			id: `${thirdPartyStatusSettingPrefix}${key}`,
+			label: key,
+			description: sanitizedText ? `Current status: ${sanitizedText}` : undefined,
+			currentValue: getExtensionStatusPlacement(config, key),
+			values: extensionStatusPlacementValues,
+		};
+	});
+}
+
+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";
+}
+
+function formatSectionTabs(
+	activeSection: SettingsSection,
+	theme: ExtensionContext["ui"]["theme"],
+): string {
+	const rendered = settingsSections.map((section) => {
+		const label = sectionLabels[section];
+		return section === activeSection ? theme.bold(label) : safeThemeFg(theme, "muted", label);
+	});
+	return `  ${rendered.join(safeThemeFg(theme, "muted", " / "))}`;
+}
+
+function withSectionFooter(lines: string[], theme: ExtensionContext["ui"]["theme"]): string[] {
+	const next = [...lines];
+	for (let index = next.length - 1; index >= 0; index -= 1) {
+		if (next[index]?.includes("Enter/Space")) {
+			next[index] = safeThemeFg(
+				theme,
+				"muted",
+				"  Enter/Space to change · Tab to switch sections · Esc to close",
+			);
+			break;
+		}
+	}
+	return next;
 }
 
 export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCommandDeps): void {
@@ -233,126 +309,73 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 
 			await ctx.ui.custom<void>((tui, theme, _keybindings, done) => {
 				const settingsListTheme = deps.settingsListTheme ?? getSettingsListTheme();
+				let activeSection: SettingsSection = "coloring";
 				const applyFeatureChange = (id: FeatureSettingId, newValue: FeatureState) => {
 					const result = deps.setUiFeatures(featurePatch(id, newValue), ctx);
 					deps.requestRender();
 					ctx.ui.notify(featureNotification(id, newValue, result), "info");
 					tui.requestRender();
 				};
-				const makeThirdPartyStatusesSubmenu: SettingItem["submenu"] = (_currentValue, close) => {
-					const activeStatuses = Array.from(deps.getActiveExtensionStatuses().entries()).sort(
-						([a], [b]) => (a < b ? -1 : a > b ? 1 : 0),
-					);
-
-					if (activeStatuses.length === 0) {
-						return {
-							render(width: number) {
-								return [
-									truncateToWidth(safeThemeFg(theme, "accent", "Third-party statuses"), width, ""),
-									"",
-									truncateToWidth(
-										safeThemeFg(theme, "muted", "No third-party statuses are active."),
-										width,
-										"",
-									),
-									truncateToWidth(
-										safeThemeFg(
-											theme,
-											"muted",
-											"This menu only lists statuses currently published through ctx.ui.setStatus().",
-										),
-										width,
-										"",
-									),
-									"",
-									truncateToWidth(safeThemeFg(theme, "muted", "Esc to go back"), width, ""),
-								];
-							},
-							invalidate() {},
-							handleInput(data: string) {
-								if (data === "\x1b" || data === "\u0003") close(undefined);
-							},
-						};
-					}
-
-					const statusItems: SettingItem[] = activeStatuses.map(([key, value]) => {
-						const sanitizedText = sanitizeExtensionStatusText(value);
-						return {
-							id: key,
-							label: key,
-							description: sanitizedText ? `Current status: ${sanitizedText}` : undefined,
-							currentValue: getExtensionStatusPlacement(deps.getConfig(), key),
-							values: extensionStatusPlacementValues,
-						};
-					});
-					const statusSettingsList = new SettingsList(
-						statusItems,
+				let settingsList: SettingsList;
+				const makeSettingsList = () =>
+					new SettingsList(
+						buildItems(activeSection, deps.getConfig(), deps.getActiveExtensionStatuses()),
 						8,
 						settingsListTheme,
-						(key, newValue) => {
-							if (!isExtensionStatusPlacement(newValue)) return;
-
+						(id, newValue) => {
 							try {
-								deps.setExtensionStatusPlacement(key, newValue);
-								statusSettingsList.updateValue(key, newValue);
-								deps.requestRender();
-								ctx.ui.notify(`Third-party status ${key}: ${newValue}`, "info");
-								tui.requestRender();
+								if (isColorSettingId(id) && isColorSource(newValue)) {
+									deps.setColorSources(patchForSetting(id, newValue));
+									settingsList.updateValue(id, newValue);
+									deps.requestRender();
+									ctx.ui.notify(`${colorSettingLabels[id]}: ${newValue}`, "info");
+									tui.requestRender();
+									return;
+								}
+
+								if (isFeatureSettingId(id) && isFeatureState(newValue)) {
+									settingsList.updateValue(id, newValue);
+									if (id === "editor") {
+										done(undefined);
+										// Changing the editor component while ctx.ui.custom() is active clears the
+										// custom component without resolving it, leaving Pi's input loop stuck.
+										// Close the settings UI first, then apply the editor swap on the next tick.
+										setTimeout(() => {
+											try {
+												applyFeatureChange(id, newValue);
+											} catch (error) {
+												const message = error instanceof Error ? error.message : String(error);
+												ctx.ui.notify(`Could not update Zentui settings: ${message}`, "error");
+											}
+										}, 0);
+										return;
+									}
+
+									applyFeatureChange(id, newValue);
+									return;
+								}
+
+								const thirdPartyStatusKey = thirdPartyStatusKeyFromSettingId(id);
+								if (thirdPartyStatusKey && isExtensionStatusPlacement(newValue)) {
+									deps.setExtensionStatusPlacement(thirdPartyStatusKey, newValue);
+									settingsList.updateValue(id, newValue);
+									deps.requestRender();
+									ctx.ui.notify(`Third-party status ${thirdPartyStatusKey}: ${newValue}`, "info");
+									tui.requestRender();
+								}
 							} catch (error) {
 								const message = error instanceof Error ? error.message : String(error);
 								ctx.ui.notify(`Could not update Zentui settings: ${message}`, "error");
 							}
 						},
-						() => close(undefined),
+						() => done(undefined),
 					);
-					return statusSettingsList;
+				settingsList = makeSettingsList();
+				const switchSection = () => {
+					activeSection = nextSection(activeSection);
+					settingsList = makeSettingsList();
+					tui.requestRender();
 				};
-				const settingsList = new SettingsList(
-					buildItems(
-						deps.getConfig(),
-						deps.getActiveExtensionStatuses().size,
-						makeThirdPartyStatusesSubmenu,
-					),
-					5,
-					settingsListTheme,
-					(id, newValue) => {
-						try {
-							if (isColorSettingId(id) && isColorSource(newValue)) {
-								deps.setColorSources(patchForSetting(id, newValue));
-								settingsList.updateValue(id, newValue);
-								deps.requestRender();
-								ctx.ui.notify(`${colorSettingLabels[id]}: ${newValue}`, "info");
-								tui.requestRender();
-								return;
-							}
-
-							if (isFeatureSettingId(id) && isFeatureState(newValue)) {
-								settingsList.updateValue(id, newValue);
-								if (id === "editor") {
-									done(undefined);
-									// Changing the editor component while ctx.ui.custom() is active clears the
-									// custom component without resolving it, leaving Pi's input loop stuck.
-									// Close the settings UI first, then apply the editor swap on the next tick.
-									setTimeout(() => {
-										try {
-											applyFeatureChange(id, newValue);
-										} catch (error) {
-											const message = error instanceof Error ? error.message : String(error);
-											ctx.ui.notify(`Could not update Zentui settings: ${message}`, "error");
-										}
-									}, 0);
-									return;
-								}
-
-								applyFeatureChange(id, newValue);
-							}
-						} catch (error) {
-							const message = error instanceof Error ? error.message : String(error);
-							ctx.ui.notify(`Could not update Zentui settings: ${message}`, "error");
-						}
-					},
-					() => done(undefined),
-				);
 
 				return {
 					render(width: number) {
@@ -363,14 +386,13 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 							EDITOR_BORDER_STYLE,
 							"─".repeat(Math.max(0, width)),
 						);
-						const header = safeThemeFg(theme, "accent", theme.bold("Zentui settings"));
-						const hint = safeThemeFg(theme, "muted", "Enter/Space cycles values · Esc closes");
 						return [
 							truncateToWidth(border, width, ""),
-							truncateToWidth(header, width, ""),
-							truncateToWidth(hint, width, ""),
-							"",
-							...settingsList.render(width),
+							truncateToWidth(formatSectionTabs(activeSection, theme), width, ""),
+							truncateToWidth(border, width, ""),
+							...withSectionFooter(settingsList.render(width), theme).map((line) =>
+								truncateToWidth(line, width, ""),
+							),
 							truncateToWidth(border, width, ""),
 						];
 					},
@@ -378,6 +400,10 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 						settingsList.invalidate();
 					},
 					handleInput(data: string) {
+						if (data === "\t") {
+							switchSection();
+							return;
+						}
 						settingsList.handleInput(data);
 					},
 				};

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,129 +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 innerWidth = width - 2;
+		const config = this.getConfig();
+		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;
+	}
+
+	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 colorSource = config.colorSources.editor;
-		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 rail = `${renderStyleForSourceOrFallback(
-			this.uiTheme,
-			colorSource,
-			config.colors.editorAccent,
-			EDITOR_ACCENT_FALLBACK,
-			"│",
-		)}${this.reset} `;
-		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 = [
-			top,
-			...lines.map((line) => `${rail}${this.fillLine(line, innerWidth)}`),
-			bottom,
-			...autocompleteLines,
-		];
-
-		return clampRenderedLines(renderedLines, width);
+		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/extensions/zentui/user-message.ts

@@ -89,14 +89,10 @@ function fillLine(content: string, width: number): string {
 	return `${truncated}${pad}`;
 }
 
-function renderPromptBoxLine(
-	line: string,
-	width: number,
-	theme: Theme | undefined,
-	config: PolishedTuiConfig,
-): string {
-	if (width <= 0) return "";
-	const rail = `${
+function renderPromptBoxRail(theme: Theme | undefined, config: PolishedTuiConfig): string {
+	if (config.features.copyFriendly) return "";
+
+	return `${
 		theme
 			? renderStyleForSourceOrFallback(
 					theme,
@@ -107,8 +103,21 @@ function renderPromptBoxLine(
 				)
 			: "│"
 	} `;
+}
+
+function renderPromptBoxLine(
+	line: string,
+	width: number,
+	theme: Theme | undefined,
+	config: PolishedTuiConfig,
+): string {
+	if (width <= 0) return "";
+	const rail = renderPromptBoxRail(theme, config);
 	const contentWidth = Math.max(0, width - visibleWidth(rail));
-	return truncateToWidth(`${rail}${fillLine(line, contentWidth)}`, width, "");
+	const content = config.features.copyFriendly
+		? truncateToWidth(line, contentWidth, "")
+		: fillLine(line, contentWidth);
+	return truncateToWidth(`${rail}${content}`, width, "");
 }
 
 function renderZentuiUserMessage(
@@ -121,19 +130,7 @@ function renderZentuiUserMessage(
 	if (text === undefined) return undefined;
 	if (width <= 0) return [""];
 
-	const railWidth = visibleWidth(
-		`${
-			theme
-				? renderStyleForSourceOrFallback(
-						theme,
-						config.colorSources.userMessages,
-						config.colors.editorAccent,
-						EDITOR_ACCENT_FALLBACK,
-						"│",
-					)
-				: "│"
-		} `,
-	);
+	const railWidth = visibleWidth(renderPromptBoxRail(theme, config));
 	const contentWidth = Math.max(1, width - railWidth);
 	const renderer = new Markdown(text, 0, 0, makeMarkdownTheme(theme), {
 		color: (content) => themeFg(theme, "userMessageText", content),

package/package.json

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