pi-zentui 0.1.13 → 0.1.14

package/README.md

@@ -123,7 +123,18 @@ 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.
+
+Useful slash-command shortcuts:
+
+```text
+/zentui editor enable
+/zentui editor disable
+/zentui statusline enable
+/zentui statusline disable
+/zentui editor toggle
+/zentui statusline toggle
+```
 
 Default config values — copy this and change any value you want:
 
@@ -143,7 +154,8 @@ Default config values — copy this and change any value you want:
 		"staged": "+",
 		"renamed": "»",
 		"deleted": "✘",
-		"typechanged": "T"
+		"typechanged": "T",
+		"cacheHit": "󰆼"
 	},
 	"colors": {
 		"cwd": "bold cyan",
@@ -173,6 +185,10 @@ Default config values — copy this and change any value you want:
 		"editor": "theme",
 		"userMessages": "theme"
 	},
+	"features": {
+		"editor": true,
+		"statusLine": true
+	},
 	"extensionStatuses": {
 		"defaultPlacement": "right",
 		"placements": {}
@@ -184,6 +200,7 @@ Default config values — copy this and change any value you want:
 - `projectRefreshIntervalMs`: project status polling interval; `0` disables polling.
 - `icons`: every shown icon key is configurable; omit any key to use the Zentui default.
 - `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.
 - `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.

package/extensions/zentui/config.ts

@@ -12,6 +12,11 @@ export type ColorSourcesConfig = {
 	userMessages: ColorSource;
 };
 
+export type UiFeaturesConfig = {
+	editor: boolean;
+	statusLine: boolean;
+};
+
 export type ExtensionStatusPlacement = "off" | "left" | "middle" | "right";
 
 export type ExtensionStatusesConfig = {
@@ -38,6 +43,7 @@ export type PolishedTuiConfig = {
 		renamed: string;
 		deleted: string;
 		typechanged: string;
+		cacheHit: string;
 	};
 	colors: {
 		cwd: ColorSpec;
@@ -63,6 +69,7 @@ export type PolishedTuiConfig = {
 		editorThinkingXhigh?: ColorSpec;
 	};
 	colorSources: ColorSourcesConfig;
+	features: UiFeaturesConfig;
 	extensionStatuses: ExtensionStatusesConfig;
 };
 
@@ -84,6 +91,7 @@ export const defaultConfig: PolishedTuiConfig = {
 		renamed: "»",
 		deleted: "✘",
 		typechanged: "T",
+		cacheHit: "󰆼",
 	},
 	colors: {
 		cwd: "bold cyan",
@@ -103,6 +111,10 @@ export const defaultConfig: PolishedTuiConfig = {
 		editor: "theme",
 		userMessages: "theme",
 	},
+	features: {
+		editor: true,
+		statusLine: true,
+	},
 	extensionStatuses: {
 		defaultPlacement: "right",
 		placements: {},
@@ -123,6 +135,7 @@ const iconKeys = [
 	"renamed",
 	"deleted",
 	"typechanged",
+	"cacheHit",
 ] as const satisfies readonly (keyof PolishedTuiConfig["icons"])[];
 
 type ConfigRecord = Record<string, unknown>;
@@ -161,6 +174,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"]> {
@@ -214,6 +232,13 @@ function normalizeColorSources(record: Record<string, unknown>): ColorSourcesCon
 	};
 }
 
+function normalizeUiFeatures(record: Record<string, unknown>): UiFeaturesConfig {
+	return {
+		editor: booleanValue(record, "editor"),
+		statusLine: booleanValue(record, "statusLine"),
+	};
+}
+
 export function isExtensionStatusPlacement(value: unknown): value is ExtensionStatusPlacement {
 	return value === "off" || value === "left" || value === "middle" || value === "right";
 }
@@ -241,6 +266,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";
+}
+
 function validColorSourceEntries(record: Record<string, unknown>): Partial<ColorSourcesConfig> {
 	return Object.fromEntries(
 		Object.entries(record).filter((entry): entry is [keyof ColorSourcesConfig, ColorSource] => {
@@ -250,6 +279,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 +316,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 +333,7 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 			...colors,
 		},
 		colorSources: { ...colorSources },
+		features: { ...features },
 		extensionStatuses: {
 			defaultPlacement: extensionStatuses.defaultPlacement,
 			placements: { ...extensionStatuses.placements },
@@ -331,6 +373,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,58 +26,152 @@ const extensionStatusPlacementValues: ExtensionStatusPlacement[] = [
 	"middle",
 	"right",
 ];
+type FeatureState = "enabled" | "disabled";
 
-type SettingId = "starship" | "editorMessages";
+const featureStateValues: FeatureState[] = ["enabled", "disabled"];
+
+type ColorSettingId = "starship" | "editorMessages";
+type FeatureSettingId = keyof UiFeaturesConfig;
 
 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",
+};
+
+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.",
+};
+
+const directCommandSuggestions = [
+	"editor enable",
+	"editor disable",
+	"editor toggle",
+	"statusline enable",
+	"statusline disable",
+	"statusline toggle",
+];
+
 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";
+}
+
+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] [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"
+			: 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(
 	config: PolishedTuiConfig,
 	activeStatusCount: number,
 	thirdPartyStatusesSubmenu: SettingItem["submenu"],
 ): SettingItem[] {
 	return [
-		...(Object.keys(settingLabels) as SettingId[]).map((key) => ({
+		...(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,
 		})),
@@ -87,17 +183,62 @@ function buildItems(
 			currentValue: `${activeStatusCount} active`,
 			submenu: thirdPartyStatusesSubmenu,
 		},
+		...(Object.keys(featureSettingLabels) as FeatureSettingId[]).map((key) => ({
+			id: key,
+			label: featureSettingLabels[key],
+			description: featureSettingDescriptions[key],
+			currentValue: featureValue(config.features[key]),
+			values: featureStateValues,
+		})),
 	];
 }
 
 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 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),
@@ -175,14 +316,36 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 					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();
+							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");

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/package.json

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