pi-zentui 0.1.13 → 0.1.15

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
 
@@ -123,7 +124,23 @@ pi install git:github.com/lmilojevicc/pi-zentui
 
 ## Config
 
-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 plus active third-party status placements.
+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
+/zentui editor enable
+/zentui editor disable
+/zentui statusline enable
+/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:
 
@@ -143,7 +160,9 @@ Default config values — copy this and change any value you want:
 		"staged": "+",
 		"renamed": "»",
 		"deleted": "✘",
-		"typechanged": "T"
+		"typechanged": "T",
+		"cacheHit": "󰆼",
+		"editorPrompt": ""
 	},
 	"colors": {
 		"cwd": "bold cyan",
@@ -158,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",
@@ -173,6 +193,11 @@ Default config values — copy this and change any value you want:
 		"editor": "theme",
 		"userMessages": "theme"
 	},
+	"features": {
+		"editor": true,
+		"statusLine": true,
+		"copyFriendly": false
+	},
 	"extensionStatuses": {
 		"defaultPlacement": "right",
 		"placements": {}
@@ -182,14 +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. `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

@@ -12,6 +12,12 @@ export type ColorSourcesConfig = {
 	userMessages: ColorSource;
 };
 
+export type UiFeaturesConfig = {
+	editor: boolean;
+	statusLine: boolean;
+	copyFriendly: boolean;
+};
+
 export type ExtensionStatusPlacement = "off" | "left" | "middle" | "right";
 
 export type ExtensionStatusesConfig = {
@@ -38,6 +44,8 @@ export type PolishedTuiConfig = {
 		renamed: string;
 		deleted: string;
 		typechanged: string;
+		cacheHit: string;
+		editorPrompt: string;
 	};
 	colors: {
 		cwd: ColorSpec;
@@ -52,6 +60,7 @@ export type PolishedTuiConfig = {
 		runtimePrefix: ColorSpec;
 		extensionStatus: ColorSpec;
 		editorAccent?: ColorSpec;
+		editorPrompt?: ColorSpec;
 		editorBorder?: ColorSpec;
 		editorModel?: ColorSpec;
 		editorProvider?: ColorSpec;
@@ -63,6 +72,7 @@ export type PolishedTuiConfig = {
 		editorThinkingXhigh?: ColorSpec;
 	};
 	colorSources: ColorSourcesConfig;
+	features: UiFeaturesConfig;
 	extensionStatuses: ExtensionStatusesConfig;
 };
 
@@ -84,6 +94,8 @@ export const defaultConfig: PolishedTuiConfig = {
 		renamed: "»",
 		deleted: "✘",
 		typechanged: "T",
+		cacheHit: "󰆼",
+		editorPrompt: "",
 	},
 	colors: {
 		cwd: "bold cyan",
@@ -103,6 +115,11 @@ export const defaultConfig: PolishedTuiConfig = {
 		editor: "theme",
 		userMessages: "theme",
 	},
+	features: {
+		editor: true,
+		statusLine: true,
+		copyFriendly: false,
+	},
 	extensionStatuses: {
 		defaultPlacement: "right",
 		placements: {},
@@ -123,6 +140,8 @@ const iconKeys = [
 	"renamed",
 	"deleted",
 	"typechanged",
+	"cacheHit",
+	"editorPrompt",
 ] as const satisfies readonly (keyof PolishedTuiConfig["icons"])[];
 
 type ConfigRecord = Record<string, unknown>;
@@ -161,6 +180,11 @@ function colorSourceValue(
 	return value === "terminal" || value === "theme" ? value : defaultConfig.colorSources[key];
 }
 
+function booleanValue(record: Record<string, unknown>, key: keyof UiFeaturesConfig): boolean {
+	const value = record[key];
+	return typeof value === "boolean" ? value : defaultConfig.features[key];
+}
+
 function definedColors(
 	colors: Partial<Record<keyof PolishedTuiConfig["colors"], string | undefined>>,
 ): Partial<PolishedTuiConfig["colors"]> {
@@ -194,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"),
@@ -214,6 +239,14 @@ function normalizeColorSources(record: Record<string, unknown>): ColorSourcesCon
 	};
 }
 
+function normalizeUiFeatures(record: Record<string, unknown>): UiFeaturesConfig {
+	return {
+		editor: booleanValue(record, "editor"),
+		statusLine: booleanValue(record, "statusLine"),
+		copyFriendly: booleanValue(record, "copyFriendly"),
+	};
+}
+
 export function isExtensionStatusPlacement(value: unknown): value is ExtensionStatusPlacement {
 	return value === "off" || value === "left" || value === "middle" || value === "right";
 }
@@ -241,6 +274,10 @@ function isColorSourceKey(value: string): value is keyof ColorSourcesConfig {
 	return value === "starship" || value === "editor" || value === "userMessages";
 }
 
+function isUiFeatureKey(value: string): value is keyof UiFeaturesConfig {
+	return value === "editor" || value === "statusLine" || value === "copyFriendly";
+}
+
 function validColorSourceEntries(record: Record<string, unknown>): Partial<ColorSourcesConfig> {
 	return Object.fromEntries(
 		Object.entries(record).filter((entry): entry is [keyof ColorSourcesConfig, ColorSource] => {
@@ -250,6 +287,15 @@ function validColorSourceEntries(record: Record<string, unknown>): Partial<Color
 	) as Partial<ColorSourcesConfig>;
 }
 
+function validUiFeatureEntries(record: Record<string, unknown>): Partial<UiFeaturesConfig> {
+	return Object.fromEntries(
+		Object.entries(record).filter((entry): entry is [keyof UiFeaturesConfig, boolean] => {
+			const [key, value] = entry;
+			return isUiFeatureKey(key) && typeof value === "boolean";
+		}),
+	) as Partial<UiFeaturesConfig>;
+}
+
 function readConfigRecord(path = configPath): ConfigRecord {
 	try {
 		if (!existsSync(path)) return {};
@@ -278,6 +324,9 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 	const colorSources = isRecord(config.colorSources)
 		? normalizeColorSources(config.colorSources as Record<string, unknown>)
 		: defaultConfig.colorSources;
+	const features = isRecord(config.features)
+		? normalizeUiFeatures(config.features as Record<string, unknown>)
+		: defaultConfig.features;
 	const extensionStatuses = isRecord(config.extensionStatuses)
 		? normalizeExtensionStatuses(config.extensionStatuses as Record<string, unknown>)
 		: defaultConfig.extensionStatuses;
@@ -292,6 +341,7 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 			...colors,
 		},
 		colorSources: { ...colorSources },
+		features: { ...features },
 		extensionStatuses: {
 			defaultPlacement: extensionStatuses.defaultPlacement,
 			placements: { ...extensionStatuses.placements },
@@ -331,6 +381,22 @@ export function saveColorSourcesPatch(
 	return mergeConfig(record);
 }
 
+export function saveUiFeaturesPatch(
+	patch: Partial<UiFeaturesConfig>,
+	path = configPath,
+): PolishedTuiConfig {
+	const record = readConfigRecord(path);
+	const existing = isRecord(record.features)
+		? { ...(record.features as Record<string, unknown>) }
+		: {};
+	record.features = {
+		...existing,
+		...validUiFeatureEntries(patch),
+	};
+	writeFileSync(path, `${JSON.stringify(record, null, 2)}\n`, "utf8");
+	return mergeConfig(record);
+}
+
 export function saveExtensionStatusPlacement(
 	key: string,
 	placement: ExtensionStatusPlacement,

package/extensions/zentui/format.ts

@@ -7,6 +7,9 @@ import { renderStyleForSource } from "./style";
 export type UsageTotals = {
 	input: number;
 	output: number;
+	cacheRead: number;
+	cacheWrite: number;
+	latestCacheHitRate?: number;
 	cost: number;
 };
 
@@ -35,27 +38,52 @@ export function formatProviderLabel(provider: string | undefined): string {
 	);
 }
 
+function calculateCacheHitRate(
+	input: number,
+	cacheRead: number,
+	cacheWrite: number,
+): number | undefined {
+	const promptTokens = input + cacheRead + cacheWrite;
+	return promptTokens > 0 ? (cacheRead / promptTokens) * 100 : undefined;
+}
+
 export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
 	let input = 0;
 	let output = 0;
+	let cacheRead = 0;
+	let cacheWrite = 0;
+	let latestCacheHitRate: number | undefined;
 	let cost = 0;
 
 	const entries = ctx.sessionManager.getEntries?.() ?? ctx.sessionManager.getBranch();
 	for (const entry of entries) {
 		if (entry.type !== "message" || entry.message.role !== "assistant") continue;
 		const usage = (entry.message as AssistantMessage).usage;
-		input += usage?.input ?? 0;
+		const entryInput = usage?.input ?? 0;
+		const entryCacheRead = usage?.cacheRead ?? 0;
+		const entryCacheWrite = usage?.cacheWrite ?? 0;
+
+		input += entryInput;
 		output += usage?.output ?? 0;
+		cacheRead += entryCacheRead;
+		cacheWrite += entryCacheWrite;
 		cost += usage?.cost?.total ?? 0;
+		latestCacheHitRate = calculateCacheHitRate(entryInput, entryCacheRead, entryCacheWrite);
 	}
 
-	return { input, output, cost };
+	return { input, output, cacheRead, cacheWrite, latestCacheHitRate, cost };
 }
 
-export function buildTokenLabel(totals: UsageTotals): string {
+export function buildTokenLabel(totals: UsageTotals, cacheHitIcon = "󰆼"): string {
 	const parts: string[] = [];
 	if (totals.input) parts.push(`↑${formatCount(totals.input)}`);
 	if (totals.output) parts.push(`↓${formatCount(totals.output)}`);
+
+	const hasCacheTokens = totals.cacheRead > 0 || totals.cacheWrite > 0;
+	if (hasCacheTokens && totals.latestCacheHitRate !== undefined) {
+		const cacheHitRate = `${totals.latestCacheHitRate.toFixed(1)}%`;
+		parts.push(cacheHitIcon ? `${cacheHitIcon} ${cacheHitRate}` : cacheHitRate);
+	}
 	return parts.length > 0 ? parts.join(" ") : "↑0 ↓0";
 }
 

package/extensions/zentui/index.ts

@@ -9,10 +9,12 @@ import {
 	type ColorSourcesConfig,
 	type ExtensionStatusPlacement,
 	type PolishedTuiConfig,
+	type UiFeaturesConfig,
 	ensureConfigExists,
 	loadConfig,
 	saveColorSourcesPatch,
 	saveExtensionStatusPlacement,
+	saveUiFeaturesPatch,
 } from "./config";
 import { installFooter } from "./footer";
 import { emptyGitStatus, readGitStatus } from "./git";
@@ -24,6 +26,22 @@ import { type FooterState, createInitialState, syncState } from "./state";
 import { PolishedEditor } from "./ui";
 import { installUserMessageStyle } from "./user-message";
 
+const ZENTUI_EDITOR_FACTORY = Symbol.for("pi-zentui.editor-factory");
+
+type EditorFactory = NonNullable<Parameters<ExtensionContext["ui"]["setEditorComponent"]>[0]>;
+
+type ZentuiEditorFactory = EditorFactory & {
+	[ZENTUI_EDITOR_FACTORY]?: true;
+};
+
+type ApplyUiResult = {
+	editorBlocked: boolean;
+};
+
+function isZentuiEditorFactory(factory: EditorFactory | undefined): boolean {
+	return Boolean((factory as ZentuiEditorFactory | undefined)?.[ZENTUI_EDITOR_FACTORY]);
+}
+
 export default function (pi: ExtensionAPI) {
 	const state: FooterState = createInitialState(emptyGitStatus());
 
@@ -33,6 +51,9 @@ export default function (pi: ExtensionAPI) {
 	let getActiveExtensionStatuses: () => ReadonlyMap<string, string> = () => new Map();
 	let stopRefreshInterval: StopProjectRefreshInterval = () => {};
 	let cleanupPrototypePatches: () => void = () => {};
+	let footerInstalled = false;
+	let editorInstalled = false;
+	let prototypePatchesInstalled = false;
 	let projectRefreshInFlight = false;
 	let projectRefreshPending = false;
 
@@ -40,6 +61,8 @@ export default function (pi: ExtensionAPI) {
 	const getActiveTheme = () => activeTheme;
 	const getCurrentConfig = () => currentConfig;
 	const getThinkingLevel = () => pi.getThinkingLevel();
+	const syncFooterState = (ctx: ExtensionContext) =>
+		syncState(state, ctx, currentConfig.icons.cacheHit);
 
 	const refreshProjectState = async (ctx: ExtensionContext) => {
 		const [gitStatus, runtime] = await Promise.all([
@@ -69,44 +92,75 @@ export default function (pi: ExtensionAPI) {
 
 	const refreshInteractiveState = (ctx: ExtensionContext, project = false) => {
 		if (!ctx.hasUI) return;
-		syncState(state, ctx);
-		if (project) scheduleProjectRefresh(ctx);
+		syncFooterState(ctx);
+		if (project && currentConfig.features.statusLine) scheduleProjectRefresh(ctx);
 		refresh();
 	};
 
-	const installEditor = (ctx: ExtensionContext) => {
-		ctx.ui.setEditorComponent(
-			(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) =>
-				new PolishedEditor(
-					tui,
-					theme,
-					keybindings,
-					ctx.ui.theme,
-					getCurrentConfig,
-					() => ({
-						modelLabel: state.modelLabel,
-						providerLabel: state.providerLabel,
-					}),
-					getThinkingLevel,
-				),
-		);
+	const stopProjectRefresh = () => {
+		stopRefreshInterval();
+		stopRefreshInterval = () => {};
+		projectRefreshInFlight = false;
+		projectRefreshPending = false;
 	};
 
-	const installUi = (ctx: ExtensionContext) => {
-		if (!ctx.hasUI) return;
-		activeTheme = ctx.ui.theme;
-		cleanupPrototypePatches();
+	const installPrototypePatches = () => {
+		if (prototypePatchesInstalled) return;
 		const cleanupSelectorBorderStyle = installSelectorBorderStyle(getActiveTheme, getCurrentConfig);
 		const cleanupUserMessageStyle = installUserMessageStyle(getActiveTheme, getCurrentConfig);
 		cleanupPrototypePatches = () => {
 			cleanupSelectorBorderStyle();
 			cleanupUserMessageStyle();
 		};
-		ensureConfigExists();
-		currentConfig = loadConfig();
-		syncState(state, ctx);
-		stopRefreshInterval();
-		stopRefreshInterval = () => {};
+		prototypePatchesInstalled = true;
+	};
+
+	const uninstallPrototypePatches = () => {
+		cleanupPrototypePatches();
+		cleanupPrototypePatches = () => {};
+		prototypePatchesInstalled = false;
+	};
+
+	const makeEditorFactory = (ctx: ExtensionContext): ZentuiEditorFactory => {
+		const factory = ((tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) =>
+			new PolishedEditor(
+				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;
+
+		installPrototypePatches();
+		ctx.ui.setEditorComponent(makeEditorFactory(ctx));
+		editorInstalled = true;
+		return true;
+	};
+
+	const uninstallEditor = (ctx: ExtensionContext): boolean => {
+		const currentFactory = ctx.ui.getEditorComponent();
+		if (currentFactory && !isZentuiEditorFactory(currentFactory)) return false;
+
+		uninstallPrototypePatches();
+		ctx.ui.setEditorComponent(undefined);
+		editorInstalled = false;
+		return true;
+	};
+
+	const installStatusLine = (ctx: ExtensionContext) => {
+		if (footerInstalled) return;
 		installFooter(ctx, state, getCurrentConfig, {
 			setRequestRender: (fn) => {
 				requestFooterRender = fn;
@@ -116,7 +170,8 @@ export default function (pi: ExtensionAPI) {
 				getActiveExtensionStatuses = fn ?? (() => new Map());
 			},
 		});
-		installEditor(ctx);
+		footerInstalled = true;
+		stopProjectRefresh();
 		stopRefreshInterval = startProjectRefreshInterval(currentConfig.projectRefreshIntervalMs, () =>
 			scheduleProjectRefresh(ctx),
 		);
@@ -124,19 +179,57 @@ export default function (pi: ExtensionAPI) {
 		refresh();
 	};
 
+	const uninstallStatusLine = (ctx: ExtensionContext) => {
+		stopProjectRefresh();
+		ctx.ui.setFooter(undefined);
+		footerInstalled = false;
+		requestFooterRender = undefined;
+		getActiveExtensionStatuses = () => new Map();
+	};
+
+	const applyConfiguredUi = (ctx: ExtensionContext): ApplyUiResult => {
+		const result: ApplyUiResult = { editorBlocked: false };
+		if (!ctx.hasUI) return result;
+		activeTheme = ctx.ui.theme;
+		if (currentConfig.features.editor) {
+			if (!editorInstalled) result.editorBlocked = !installEditor(ctx);
+		} else if (editorInstalled || prototypePatchesInstalled) {
+			result.editorBlocked = !uninstallEditor(ctx);
+		}
+
+		if (currentConfig.features.statusLine) {
+			installStatusLine(ctx);
+		} else if (footerInstalled) {
+			uninstallStatusLine(ctx);
+		}
+		return result;
+	};
+
+	const installUi = (ctx: ExtensionContext) => {
+		if (!ctx.hasUI) return;
+		activeTheme = ctx.ui.theme;
+		uninstallPrototypePatches();
+		footerInstalled = false;
+		editorInstalled = false;
+		ensureConfigExists();
+		currentConfig = loadConfig();
+		syncFooterState(ctx);
+		stopProjectRefresh();
+		applyConfiguredUi(ctx);
+		refresh();
+	};
+
 	const cleanupUi = (ctx?: ExtensionContext) => {
-		cleanupPrototypePatches();
-		cleanupPrototypePatches = () => {};
-		stopRefreshInterval();
-		stopRefreshInterval = () => {};
-		projectRefreshInFlight = false;
-		projectRefreshPending = false;
+		uninstallPrototypePatches();
+		stopProjectRefresh();
 		requestFooterRender = undefined;
 		getActiveExtensionStatuses = () => new Map();
 		if (ctx?.hasUI) {
 			ctx.ui.setFooter(undefined);
 			ctx.ui.setEditorComponent(undefined);
 		}
+		footerInstalled = false;
+		editorInstalled = false;
 		activeTheme = undefined;
 	};
 
@@ -156,6 +249,16 @@ export default function (pi: ExtensionAPI) {
 		setColorSources(patch: Partial<ColorSourcesConfig>) {
 			currentConfig = saveColorSourcesPatch(patch);
 		},
+		setUiFeatures(patch: Partial<UiFeaturesConfig>, ctx: ExtensionContext) {
+			currentConfig = saveUiFeaturesPatch(patch);
+			const result = applyConfiguredUi(ctx);
+			return {
+				applied: !(patch.editor !== undefined && result.editorBlocked),
+				reason: result.editorBlocked
+					? "another extension is currently managing the editor; reload Pi to apply this change"
+					: undefined,
+			};
+		},
 		getActiveExtensionStatuses() {
 			return getActiveExtensionStatuses();
 		},

package/extensions/zentui/settings-command.ts

@@ -1,6 +1,7 @@
-import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { getSettingsListTheme } from "@earendil-works/pi-coding-agent";
 import {
+	type AutocompleteItem,
 	type SettingItem,
 	SettingsList,
 	type SettingsListTheme,
@@ -11,6 +12,7 @@ import {
 	type ColorSourcesConfig,
 	type ExtensionStatusPlacement,
 	type PolishedTuiConfig,
+	type UiFeaturesConfig,
 	getExtensionStatusPlacement,
 	isExtensionStatusPlacement,
 } from "./config";
@@ -24,172 +26,356 @@ const extensionStatusPlacementValues: ExtensionStatusPlacement[] = [
 	"middle",
 	"right",
 ];
+type FeatureState = "enabled" | "disabled";
 
-type SettingId = "starship" | "editorMessages";
+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;
 	setColorSources: (patch: Partial<ColorSourcesConfig>) => void;
+	setUiFeatures: (
+		patch: Partial<UiFeaturesConfig>,
+		ctx: ExtensionContext,
+	) => { applied: boolean; reason?: string };
 	getActiveExtensionStatuses: () => ReadonlyMap<string, string>;
 	setExtensionStatusPlacement: (key: string, placement: ExtensionStatusPlacement) => void;
 	requestRender: () => void;
 	settingsListTheme?: SettingsListTheme;
 };
 
-const settingLabels: Record<SettingId, string> = {
+const colorSettingLabels: Record<ColorSettingId, string> = {
 	starship: "Starship/footer colors",
 	editorMessages: "Editor + previous messages",
 };
 
-const settingDescriptions: Record<SettingId, string> = {
+const colorSettingDescriptions: Record<ColorSettingId, string> = {
 	starship:
 		"Choose whether footer runtime/git/context colors use Pi theme tokens or terminal palette styles.",
 	editorMessages:
 		"Choose whether editor and previous user-message borders/rails use Pi theme colors or terminal palette styles.",
 };
 
+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 = [
+	"editor enable",
+	"editor disable",
+	"editor toggle",
+	"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";
 }
 
-function isSettingId(value: string): value is SettingId {
+function isColorSettingId(value: string): value is ColorSettingId {
 	return value === "starship" || value === "editorMessages";
 }
 
+function isFeatureSettingId(value: string): value is FeatureSettingId {
+	return value === "editor" || value === "statusLine" || value === "copyFriendly";
+}
+
+function isFeatureState(value: string): value is FeatureState {
+	return value === "enabled" || value === "disabled";
+}
+
 function editorMessageValue(config: PolishedTuiConfig): ColorSource | "mixed" {
 	return config.colorSources.editor === config.colorSources.userMessages
 		? config.colorSources.editor
 		: "mixed";
 }
 
-function patchForSetting(id: SettingId, value: ColorSource): Partial<ColorSourcesConfig> {
+function patchForSetting(id: ColorSettingId, value: ColorSource): Partial<ColorSourcesConfig> {
 	return id === "starship" ? { starship: value } : { editor: value, userMessages: value };
 }
 
+function featureValue(enabled: boolean): FeatureState {
+	return enabled ? "enabled" : "disabled";
+}
+
+function featurePatch(id: FeatureSettingId, value: FeatureState): Partial<UiFeaturesConfig> {
+	return { [id]: value === "enabled" } as Partial<UiFeaturesConfig>;
+}
+
+function usageText(): string {
+	return "Usage: /zentui [editor|statusline|copy-friendly] [enable|disable|toggle]";
+}
+
+function featureNotification(
+	feature: FeatureSettingId,
+	value: FeatureState,
+	result: { applied: boolean; reason?: string },
+): string {
+	const base = `${featureSettingLabels[feature]}: ${value}`;
+	return result.applied ? base : `${base} (${result.reason ?? "reload Pi to apply this change"})`;
+}
+
+function parseDirectFeatureCommand(
+	args: string,
+	config: PolishedTuiConfig,
+): { feature: FeatureSettingId; enabled: boolean } | undefined {
+	const normalized = args.trim().toLowerCase().replaceAll(/[_-]+/g, " ");
+	if (!normalized) return undefined;
+
+	const words = normalized.split(/\s+/g).filter(Boolean);
+	const hasWord = (value: string) => words.includes(value);
+	const feature = hasWord("editor")
+		? "editor"
+		: hasWord("footer") || hasWord("statusline") || hasWord("status")
+			? "statusLine"
+			: hasWord("copyfriendly") || hasWord("copy")
+				? "copyFriendly"
+				: undefined;
+	const action = hasWord("toggle")
+		? "toggle"
+		: hasWord("enable") || hasWord("enabled") || hasWord("on")
+			? "enable"
+			: hasWord("disable") || hasWord("disabled") || hasWord("off")
+				? "disable"
+				: undefined;
+
+	if (!feature || !action) return undefined;
+
+	return {
+		feature,
+		enabled: action === "toggle" ? !config.features[feature] : action === "enable",
+	};
+}
+
+function argumentCompletions(prefix: string): AutocompleteItem[] | null {
+	const trimmedPrefix = prefix.trimStart().toLowerCase();
+	const items = directCommandSuggestions.map((value) => ({ value, label: value }));
+	const matches = items.filter((item) => item.value.startsWith(trimmedPrefix));
+	return matches.length > 0 ? matches : null;
+}
+
 function buildItems(
+	section: SettingsSection,
 	config: PolishedTuiConfig,
-	activeStatusCount: number,
-	thirdPartyStatusesSubmenu: SettingItem["submenu"],
+	activeStatuses: ReadonlyMap<string, string>,
 ): SettingItem[] {
-	return [
-		...(Object.keys(settingLabels) as SettingId[]).map((key) => ({
+	if (section === "coloring") {
+		return (Object.keys(colorSettingLabels) as ColorSettingId[]).map((key) => ({
 			id: key,
-			label: settingLabels[key],
-			description: settingDescriptions[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,
-		},
-	];
+		}));
+	}
+
+	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 {
 	pi.registerCommand("zentui", {
 		description: "Configure Zentui",
+		getArgumentCompletions: argumentCompletions,
 		handler: async (_args, ctx) => {
+			const args = typeof _args === "string" ? _args : "";
+			const directCommand = parseDirectFeatureCommand(args, deps.getConfig());
+			if (directCommand) {
+				try {
+					const result = deps.setUiFeatures(
+						{ [directCommand.feature]: directCommand.enabled },
+						ctx,
+					);
+					deps.requestRender();
+					if (ctx.hasUI) {
+						ctx.ui.notify(
+							featureNotification(
+								directCommand.feature,
+								featureValue(directCommand.enabled),
+								result,
+							),
+							"info",
+						);
+					}
+				} catch (error) {
+					const message = error instanceof Error ? error.message : String(error);
+					if (ctx.hasUI) ctx.ui.notify(`Could not update Zentui settings: ${message}`, "error");
+				}
+				return;
+			}
+
+			if (args.trim()) {
+				if (ctx.hasUI) ctx.ui.notify(usageText(), "warning");
+				return;
+			}
+
 			if (!ctx.hasUI) return;
 
 			await ctx.ui.custom<void>((tui, theme, _keybindings, done) => {
 				const settingsListTheme = deps.settingsListTheme ?? getSettingsListTheme();
-				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 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();
+				};
+				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) => {
-						if (!isSettingId(id) || !isColorSource(newValue)) return;
-
-						try {
-							deps.setColorSources(patchForSetting(id, newValue));
-							settingsList.updateValue(id, newValue);
-							deps.requestRender();
-							ctx.ui.notify(`${settingLabels[id]}: ${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");
-						}
-					},
-					() => done(undefined),
-				);
 
 				return {
 					render(width: number) {
@@ -200,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, ""),
 						];
 					},
@@ -215,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/state.ts

@@ -1,6 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import {
-	type UsageTotals,
 	buildContextLabel,
 	buildCostLabel,
 	buildTokenLabel,
@@ -31,11 +30,11 @@ export function createInitialState(gitDefaults: GitStatusSummary): FooterState {
 	};
 }
 
-export function syncState(state: FooterState, ctx: ExtensionContext): void {
+export function syncState(state: FooterState, ctx: ExtensionContext, cacheHitIcon: string): void {
 	const totals = getUsageTotals(ctx);
 	state.modelLabel = ctx.model?.id ?? "no-model";
 	state.providerLabel = formatProviderLabel(ctx.model?.provider);
 	state.contextLabel = buildContextLabel(ctx);
-	state.tokenLabel = buildTokenLabel(totals);
+	state.tokenLabel = buildTokenLabel(totals, cacheHitIcon);
 	state.costLabel = buildCostLabel(totals);
 }

package/extensions/zentui/ui.ts

@@ -81,7 +81,31 @@ export class PolishedEditor extends CustomEditor {
 			return clampRenderedLines(super.render(width), width);
 		}
 
-		const innerWidth = width - 2;
+		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 innerWidth = Math.max(0, width - railWidth);
 		const rendered = super.render(innerWidth);
 		const editorInternals = this as unknown as AutocompleteEditorInternals;
 		const isShowingAutocomplete =
@@ -111,8 +135,6 @@ export class PolishedEditor extends CustomEditor {
 			return clampRenderedLines(rendered, width);
 		}
 
-		const config = this.getConfig();
-		const colorSource = config.colorSources.editor;
 		const editorLines = editorFrame.slice(1, -1);
 		const { modelLabel, providerLabel } = this.getModelMeta();
 		const model = renderStyleForSourceOrFallback(
@@ -147,13 +169,6 @@ export class PolishedEditor extends CustomEditor {
 		}
 		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,
@@ -169,12 +184,28 @@ export class PolishedEditor extends CustomEditor {
 			"─".repeat(width),
 		);
 		const lines = ["", ...editorLines, "", meta];
-		const renderedLines = [
-			top,
-			...lines.map((line) => `${rail}${this.fillLine(line, innerWidth)}`),
-			bottom,
-			...autocompleteLines,
-		];
+		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);
 	}

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