pi-zentui 0.1.8 → 0.1.9

package/README.md

@@ -20,12 +20,12 @@ Zentui brings two popular aesthetics to Pi:
 - `󰝰 dirname` — current directory with icon
 - `on  branch` — git branch with icon
 - `[!?↑]` — git status indicators (modified, untracked, ahead/behind, stashed, etc.)
-- `via  v5.5.0` — runtime detection with version and Starship terminal styles for Nerd Font runtime/language modules
+- `via  v5.5.0` — runtime detection with version and Starship-style Nerd Font runtime/language modules
 - Right side shows context usage, token counts, and cost
 
 ### Editor (Opencode-inspired)
 
-- Bordered input box with accent-colored left rail
+- Bordered input box with theme accent rail and thinking-level border color
 - Model name and provider displayed inside the editor frame
 - Thinking level indicator when enabled
 - Prompt-box-style user messages matching the ZentUI input chrome
@@ -47,7 +47,7 @@ Zentui brings two popular aesthetics to Pi:
 
 ### Runtime Detection
 
-Detects Starship Nerd Font runtime/language modules, uses the Starship Nerd Font symbols, and styles each runtime with Starship's terminal style strings (for example, Node.js uses `bold green`, so your terminal colorscheme supplies the actual green):
+Detects Starship Nerd Font runtime/language modules, uses the Starship Nerd Font symbols, and keeps Starship-style defaults such as `bold green` for Node.js. By default Zentui maps those styles through your active Pi theme; switch the Starship/footer color source to `terminal` in `/zentui` if you want your terminal colorscheme to supply the exact ANSI colors.
 
 | Runtime/language | Detection examples                                           |
 | ---------------- | ------------------------------------------------------------ |
@@ -148,15 +148,21 @@ On first run, Zentui creates a config file at:
     "typechanged": "T"
   },
   "colors": {
-    "cwdText": "syntaxOperator",
-    "git": "syntaxKeyword",
-    "gitStatus": "error",
-    "contextNormal": "muted",
-    "contextWarning": "warning",
-    "contextError": "error",
-    "tokens": "muted",
-    "cost": "success",
-    "separator": "borderMuted"
+    "cwd": "bold cyan",
+    "gitBranch": "bold purple",
+    "gitStatus": "bold red",
+    "contextNormal": "dimmed",
+    "contextWarning": "bold yellow",
+    "contextError": "bold red",
+    "tokens": "dimmed",
+    "cost": "bold green",
+    "separator": "dimmed",
+    "runtimePrefix": ""
+  },
+  "colorSources": {
+    "starship": "theme",
+    "editor": "theme",
+    "userMessages": "theme"
   }
 }
 ```
@@ -165,12 +171,21 @@ On first run, Zentui creates a config file at:
 
 ### Color values
 
-Colors can be:
+Use `/zentui` inside Pi to switch color sources between Pi theme colors and terminal colors:
+
+- `starship` — footer/runtime/git/context/cost colors
+- `editor + previous messages` — input editor and previous user-message rails/borders
+
+Both settings default to `theme`. The config still stores editor and previous user-message sources separately as `editor` and `userMessages`, but `/zentui` changes them together so the prompt chrome stays consistent.
+
+Color values can use terminal-palette style strings, hex colors, or Pi theme color tokens:
 
-- Pi theme token names (e.g., `accent`, `error`, `syntaxKeyword`)
-- Hex colors (e.g., `#89b4fa`)
+- Named terminal colors: `bold purple`, `yellow`, `bright-cyan`
+- 256-color / hex: `bold 149`, `fg:202`, `#89b4fa`
+- Backgrounds and modifiers: `bg:blue fg:bright-green`, `underline bg:#bf5700`
+- Pi theme tokens: `accent`, `borderMuted`, `syntaxKeyword`
 
-This means Zentui works with any Pi theme — it uses your theme's colors by default.
+Use the `colors` config key for these values.
 
 ## Requirements
 

package/extensions/zentui/config.ts

@@ -3,6 +3,13 @@ import { join } from "node:path";
 import { getAgentDir } from "@earendil-works/pi-coding-agent";
 
 export type ColorSpec = string;
+export type ColorSource = "theme" | "terminal";
+
+export type ColorSourcesConfig = {
+	starship: ColorSource;
+	editor: ColorSource;
+	userMessages: ColorSource;
+};
 
 const DEFAULT_PROJECT_REFRESH_INTERVAL_MS = 30_000;
 const MIN_PROJECT_REFRESH_INTERVAL_MS = 5_000;
@@ -25,8 +32,8 @@ export type PolishedTuiConfig = {
 		typechanged: string;
 	};
 	colors: {
-		cwdText: ColorSpec;
-		git: ColorSpec;
+		cwd: ColorSpec;
+		gitBranch: ColorSpec;
 		gitStatus: ColorSpec;
 		contextNormal: ColorSpec;
 		contextWarning: ColorSpec;
@@ -34,7 +41,9 @@ export type PolishedTuiConfig = {
 		tokens: ColorSpec;
 		cost: ColorSpec;
 		separator: ColorSpec;
+		runtimePrefix: ColorSpec;
 	};
+	colorSources: ColorSourcesConfig;
 };
 
 export const configPath = join(getAgentDir(), "zentui.json");
@@ -43,7 +52,7 @@ export const defaultConfig: PolishedTuiConfig = {
 	projectRefreshIntervalMs: DEFAULT_PROJECT_REFRESH_INTERVAL_MS,
 	icons: {
 		cwd: "󰝰",
-		git: "",
+		git: "",
 		ahead: "↑",
 		behind: "↓",
 		diverged: "⇕",
@@ -57,15 +66,21 @@ export const defaultConfig: PolishedTuiConfig = {
 		typechanged: "T",
 	},
 	colors: {
-		cwdText: "syntaxOperator",
-		git: "syntaxKeyword",
-		gitStatus: "error",
-		contextNormal: "muted",
-		contextWarning: "warning",
-		contextError: "error",
-		tokens: "muted",
-		cost: "success",
-		separator: "borderMuted",
+		cwd: "bold cyan",
+		gitBranch: "bold purple",
+		gitStatus: "bold red",
+		contextNormal: "dimmed",
+		contextWarning: "bold yellow",
+		contextError: "bold red",
+		tokens: "dimmed",
+		cost: "bold green",
+		separator: "dimmed",
+		runtimePrefix: "",
+	},
+	colorSources: {
+		starship: "theme",
+		editor: "theme",
+		userMessages: "theme",
 	},
 };
 
@@ -87,6 +102,75 @@ function parseProjectRefreshIntervalMs(value: unknown): number {
 		: defaultConfig.projectRefreshIntervalMs;
 }
 
+function stringValue(record: Record<string, unknown>, key: string): string | undefined {
+	const value = record[key];
+	return typeof value === "string" ? value : undefined;
+}
+
+function colorSourceValue(
+	record: Record<string, unknown>,
+	key: keyof ColorSourcesConfig,
+): ColorSource {
+	const value = record[key];
+	return value === "terminal" || value === "theme" ? value : defaultConfig.colorSources[key];
+}
+
+function definedColors(
+	colors: Partial<Record<keyof PolishedTuiConfig["colors"], string | undefined>>,
+): Partial<PolishedTuiConfig["colors"]> {
+	return Object.fromEntries(
+		Object.entries(colors).filter(
+			(entry): entry is [keyof PolishedTuiConfig["colors"], string] => typeof entry[1] === "string",
+		),
+	) as Partial<PolishedTuiConfig["colors"]>;
+}
+
+function normalizeColors(record: Record<string, unknown>): Partial<PolishedTuiConfig["colors"]> {
+	return definedColors({
+		cwd: stringValue(record, "cwd") ?? stringValue(record, "cwdText"),
+		gitBranch: stringValue(record, "gitBranch") ?? stringValue(record, "git"),
+		gitStatus: stringValue(record, "gitStatus"),
+		contextNormal: stringValue(record, "contextNormal"),
+		contextWarning: stringValue(record, "contextWarning"),
+		contextError: stringValue(record, "contextError"),
+		tokens: stringValue(record, "tokens"),
+		cost: stringValue(record, "cost"),
+		separator: stringValue(record, "separator"),
+		runtimePrefix: stringValue(record, "runtimePrefix"),
+	});
+}
+
+function normalizeColorSources(record: Record<string, unknown>): ColorSourcesConfig {
+	return {
+		starship: colorSourceValue(record, "starship"),
+		editor: colorSourceValue(record, "editor"),
+		userMessages: colorSourceValue(record, "userMessages"),
+	};
+}
+
+function isColorSourceKey(value: string): value is keyof ColorSourcesConfig {
+	return value === "starship" || value === "editor" || value === "userMessages";
+}
+
+function validColorSourceEntries(record: Record<string, unknown>): Partial<ColorSourcesConfig> {
+	return Object.fromEntries(
+		Object.entries(record).filter((entry): entry is [keyof ColorSourcesConfig, ColorSource] => {
+			const [key, value] = entry;
+			return isColorSourceKey(key) && (value === "theme" || value === "terminal");
+		}),
+	) as Partial<ColorSourcesConfig>;
+}
+
+function readConfigRecord(path = configPath): ConfigRecord {
+	try {
+		if (!existsSync(path)) return {};
+		const parsed = JSON.parse(readFileSync(path, "utf8"));
+		return isRecord(parsed) ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+
 export function ensureConfigExists(): void {
 	try {
 		if (!existsSync(configPath)) {
@@ -101,8 +185,11 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 	const config = isRecord(parsed) ? parsed : {};
 	const icons = isRecord(config.icons) ? (config.icons as Partial<PolishedTuiConfig["icons"]>) : {};
 	const colors = isRecord(config.colors)
-		? (config.colors as Partial<PolishedTuiConfig["colors"]>)
+		? normalizeColors(config.colors as Record<string, unknown>)
 		: {};
+	const colorSources = isRecord(config.colorSources)
+		? normalizeColorSources(config.colorSources as Record<string, unknown>)
+		: defaultConfig.colorSources;
 	return {
 		projectRefreshIntervalMs: parseProjectRefreshIntervalMs(config.projectRefreshIntervalMs),
 		icons: {
@@ -113,6 +200,7 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 			...defaultConfig.colors,
 			...colors,
 		},
+		colorSources,
 	};
 }
 
@@ -124,3 +212,20 @@ export function loadConfig(): PolishedTuiConfig {
 		return defaultConfig;
 	}
 }
+
+export function saveColorSourcesPatch(
+	patch: Partial<ColorSourcesConfig>,
+	path = configPath,
+): PolishedTuiConfig {
+	const record = readConfigRecord(path);
+	const existing = isRecord(record.colorSources)
+		? validColorSourceEntries(record.colorSources as Record<string, unknown>)
+		: {};
+	record.colorSources = {
+		...defaultConfig.colorSources,
+		...existing,
+		...validColorSourceEntries(patch),
+	};
+	writeFileSync(path, `${JSON.stringify(record, null, 2)}\n`, "utf8");
+	return mergeConfig(record);
+}

package/extensions/zentui/footer.ts

@@ -3,12 +3,12 @@ import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { PolishedTuiConfig } from "./config";
 import { formatCwdLabel, formatRuntimeSegment } from "./format";
 import type { FooterState } from "./state";
-import { colorize } from "./style";
+import { renderStyleForSource } from "./style";
 
 export function installFooter(
 	ctx: ExtensionContext,
 	state: FooterState,
-	config: PolishedTuiConfig,
+	getConfig: () => PolishedTuiConfig,
 	hooks: {
 		setRequestRender: (fn: (() => void) | undefined) => void;
 		scheduleProjectRefresh: (ctx: ExtensionContext) => void;
@@ -20,7 +20,6 @@ export function installFooter(
 			hooks.scheduleProjectRefresh(ctx);
 			tui.requestRender();
 		});
-		const separator = colorize(theme, config.colors.separator, " | ");
 
 		return {
 			dispose: () => {
@@ -30,10 +29,14 @@ export function installFooter(
 			invalidate() {},
 			render(width: number): string[] {
 				if (width <= 0) return [""];
+				const config = getConfig();
+				const colorSource = config.colorSources.starship;
+				const separator = renderStyleForSource(theme, colorSource, config.colors.separator, " | ");
 				const innerWidth = Math.max(1, width - 2);
-				const cwdLabel = colorize(
+				const cwdLabel = renderStyleForSource(
 					theme,
-					config.colors.cwdText,
+					colorSource,
+					config.colors.cwd,
 					formatCwdLabel(ctx.cwd, config.icons.cwd),
 				);
 				const branch = state.branch;
@@ -46,8 +49,10 @@ export function installFooter(
 								? config.colors.contextWarning
 								: config.colors.contextNormal
 						: config.colors.contextNormal;
-				const gitColor = (text: string) => colorize(theme, config.colors.git, text);
-				const gitStatusColor = (text: string) => colorize(theme, config.colors.gitStatus, text);
+				const gitColor = (text: string) =>
+					renderStyleForSource(theme, colorSource, config.colors.gitBranch, text);
+				const gitStatusColor = (text: string) =>
+					renderStyleForSource(theme, colorSource, config.colors.gitStatus, text);
 				const gitIcon = gitColor(config.icons.git);
 				const allStatus = [
 					state.conflicted > 0 ? config.icons.conflicted : "",
@@ -70,15 +75,20 @@ export function installFooter(
 				const statusBlock =
 					allStatus || aheadBehind ? gitStatusColor(`[${allStatus}${aheadBehind}]`) : "";
 				const branchLabel = branch
-					? `${colorize(theme, "text", "on")} ${gitIcon} ${gitColor(branch)}${statusBlock ? ` ${statusBlock}` : ""}`
+					? `on ${gitIcon} ${gitColor(branch)}${statusBlock ? ` ${statusBlock}` : ""}`
 					: "";
-				const runtimeLabel = formatRuntimeSegment(theme, state.runtime, "text");
+				const runtimeLabel = formatRuntimeSegment(
+					theme,
+					state.runtime,
+					config.colors.runtimePrefix,
+					colorSource,
+				);
 
 				const left = [cwdLabel, branchLabel, runtimeLabel].filter(Boolean).join(" ");
 				const right = [
-					colorize(theme, contextColor, state.contextLabel),
-					colorize(theme, config.colors.tokens, state.tokenLabel),
-					colorize(theme, config.colors.cost, state.costLabel),
+					renderStyleForSource(theme, colorSource, contextColor, state.contextLabel),
+					renderStyleForSource(theme, colorSource, config.colors.tokens, state.tokenLabel),
+					renderStyleForSource(theme, colorSource, config.colors.cost, state.costLabel),
 				].join(separator);
 
 				const leftWidth = visibleWidth(left);

package/extensions/zentui/format.ts

@@ -1,7 +1,8 @@
 import type { AssistantMessage } from "@earendil-works/pi-ai";
 import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { ColorSource, ColorSpec } from "./config";
 import type { RuntimeInfo } from "./runtime";
-import { type ThemeLike, colorize, renderTerminalStyle } from "./style";
+import { renderStyleForSource } from "./style";
 
 export type UsageTotals = {
 	input: number;
@@ -70,11 +71,12 @@ export function buildContextLabel(ctx: ExtensionContext): string {
 export function formatRuntimeSegment(
 	theme: Pick<Theme, "fg">,
 	runtime: RuntimeInfo | undefined,
-	mutedColor: string,
+	prefixStyle: ColorSpec,
+	colorSource: ColorSource,
 ): string {
 	if (!runtime) return "";
 	const label = runtime.version ? `${runtime.symbol} ${runtime.version}` : runtime.symbol;
-	return `${colorize(theme, mutedColor, "via")} ${renderTerminalStyle(runtime.style, label)}`;
+	return `${renderStyleForSource(theme, colorSource, prefixStyle, "via")} ${renderStyleForSource(theme, colorSource, runtime.style, label)}`;
 }
 
 export function formatCwdLabel(cwd: string, cwdIcon: string): string {

package/extensions/zentui/index.ts

@@ -5,12 +5,21 @@ import type {
 	Theme,
 } from "@earendil-works/pi-coding-agent";
 import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
-import { type PolishedTuiConfig, ensureConfigExists, loadConfig } from "./config";
+import {
+	type ColorSourcesConfig,
+	type PolishedTuiConfig,
+	ensureConfigExists,
+	loadConfig,
+	saveColorSourcesPatch,
+} from "./config";
 import { installFooter } from "./footer";
 import { emptyGitStatus, readGitStatus } from "./git";
 import { type StopProjectRefreshInterval, startProjectRefreshInterval } from "./project-refresh";
 import { readRuntimeInfo } from "./runtime";
+import { installSelectorBorderStyle } from "./selector-border";
+import { registerZentuiSettingsCommand } from "./settings-command";
 import { type FooterState, createInitialState, syncState } from "./state";
+import { renderAccentLine } from "./style";
 import { PolishedEditor } from "./ui";
 import { installUserMessageStyle } from "./user-message";
 
@@ -21,11 +30,14 @@ export default function (pi: ExtensionAPI) {
 	let activeTheme: Theme | undefined;
 	let requestFooterRender: (() => void) | undefined;
 	let stopRefreshInterval: StopProjectRefreshInterval = () => {};
+	let cleanupPrototypePatches: () => void = () => {};
 	let projectRefreshInFlight = false;
 	let projectRefreshPending = false;
 
 	const refresh = () => requestFooterRender?.();
 	const getActiveTheme = () => activeTheme;
+	const getCurrentConfig = () => currentConfig;
+	const getThinkingLevel = () => pi.getThinkingLevel();
 
 	const refreshProjectState = async (ctx: ExtensionContext) => {
 		const [gitStatus, runtime] = await Promise.all([
@@ -68,12 +80,17 @@ export default function (pi: ExtensionAPI) {
 					theme,
 					keybindings,
 					ctx.ui.theme,
+					getCurrentConfig,
 					() =>
 						[
-							ctx.ui.theme.fg("accent", state.modelLabel),
+							renderAccentLine(
+								ctx.ui.theme,
+								getCurrentConfig().colorSources.editor,
+								state.modelLabel,
+							),
 							ctx.ui.theme.fg("text", state.providerLabel),
 						].join(ctx.ui.theme.fg("borderMuted", "  ")),
-					() => pi.getThinkingLevel(),
+					getThinkingLevel,
 				),
 		);
 	};
@@ -81,18 +98,25 @@ export default function (pi: ExtensionAPI) {
 	const installUi = (ctx: ExtensionContext) => {
 		if (!ctx.hasUI) return;
 		activeTheme = ctx.ui.theme;
-		installUserMessageStyle(getActiveTheme);
+		cleanupPrototypePatches();
+		const cleanupSelectorBorderStyle = installSelectorBorderStyle(getActiveTheme, getCurrentConfig);
+		const cleanupUserMessageStyle = installUserMessageStyle(getActiveTheme, getCurrentConfig);
+		cleanupPrototypePatches = () => {
+			cleanupSelectorBorderStyle();
+			cleanupUserMessageStyle();
+		};
 		ensureConfigExists();
 		currentConfig = loadConfig();
 		syncState(state, ctx);
-		installFooter(ctx, state, currentConfig, {
+		stopRefreshInterval();
+		stopRefreshInterval = () => {};
+		installFooter(ctx, state, getCurrentConfig, {
 			setRequestRender: (fn) => {
 				requestFooterRender = fn;
 			},
 			scheduleProjectRefresh,
 		});
 		installEditor(ctx);
-		stopRefreshInterval();
 		stopRefreshInterval = startProjectRefreshInterval(currentConfig.projectRefreshIntervalMs, () =>
 			scheduleProjectRefresh(ctx),
 		);
@@ -101,6 +125,8 @@ export default function (pi: ExtensionAPI) {
 	};
 
 	const cleanupUi = (ctx?: ExtensionContext) => {
+		cleanupPrototypePatches();
+		cleanupPrototypePatches = () => {};
 		stopRefreshInterval();
 		stopRefreshInterval = () => {};
 		projectRefreshInFlight = false;
@@ -117,6 +143,16 @@ export default function (pi: ExtensionAPI) {
 		installUi(ctx);
 	});
 
+	registerZentuiSettingsCommand(pi, {
+		getConfig: getCurrentConfig,
+		setColorSources(patch: Partial<ColorSourcesConfig>) {
+			currentConfig = saveColorSourcesPatch(patch);
+		},
+		requestRender() {
+			refresh();
+		},
+	});
+
 	pi.on("session_shutdown", async (_event, ctx) => {
 		cleanupUi(ctx);
 	});
@@ -133,6 +169,10 @@ export default function (pi: ExtensionAPI) {
 		refreshInteractiveState(ctx);
 	});
 
+	pi.on("thinking_level_select", async (_event, ctx) => {
+		refreshInteractiveState(ctx);
+	});
+
 	pi.on("message_end", async (_event, ctx) => {
 		refreshInteractiveState(ctx, true);
 	});

package/extensions/zentui/selector-border.ts

@@ -0,0 +1,106 @@
+import {
+	ModelSelectorComponent,
+	SettingsSelectorComponent,
+	type Theme,
+} from "@earendil-works/pi-coding-agent";
+import type { PolishedTuiConfig } from "./config";
+import { EDITOR_BORDER_STYLE, renderChromeBorder, renderEditorBorder } from "./style";
+
+type RenderFn = (width: number) => string[];
+
+type PatchableSelectorPrototype = {
+	render: RenderFn;
+	__zentuiSelectorBorderOriginalRender?: RenderFn;
+	__zentuiSelectorBorderPatched?: boolean;
+	__zentuiSelectorBorderWrapper?: RenderFn;
+	__zentuiSelectorBorderActive?: boolean;
+	__zentuiSelectorBorderGetTheme?: () => Theme | undefined;
+	__zentuiSelectorBorderGetConfig?: () => PolishedTuiConfig;
+};
+
+type Cleanup = () => void;
+
+function stripAnsi(text: string): string {
+	return text.replaceAll(/\x1b\[[0-9;]*m/g, "");
+}
+
+function isHorizontalBorderLine(line: string): boolean {
+	return /^─+$/.test(stripAnsi(line));
+}
+
+function renderBorderLine(
+	width: number,
+	theme: Theme | undefined,
+	config: PolishedTuiConfig | undefined,
+): string {
+	const text = "─".repeat(Math.max(1, width));
+	if (theme && config) {
+		return renderChromeBorder(theme, config.colorSources.editor, EDITOR_BORDER_STYLE, text);
+	}
+	return renderEditorBorder(text);
+}
+
+export function patchSelectorBorderStyle(
+	prototype: PatchableSelectorPrototype,
+	getTheme?: () => Theme | undefined,
+	getConfig?: () => PolishedTuiConfig,
+): Cleanup {
+	prototype.__zentuiSelectorBorderGetTheme = getTheme;
+	prototype.__zentuiSelectorBorderGetConfig = getConfig;
+	prototype.__zentuiSelectorBorderActive = true;
+
+	if (
+		prototype.__zentuiSelectorBorderPatched &&
+		prototype.render === prototype.__zentuiSelectorBorderWrapper
+	) {
+		return () => {
+			prototype.__zentuiSelectorBorderActive = false;
+		};
+	}
+
+	prototype.__zentuiSelectorBorderOriginalRender = prototype.render;
+	const wrapper = function renderWithZentuiSelectorBorders(this: unknown, width: number): string[] {
+		const original = prototype.__zentuiSelectorBorderOriginalRender ?? prototype.render;
+		if (!prototype.__zentuiSelectorBorderActive) return original.call(this, width);
+
+		const lines = original.call(this, width);
+		if (lines.length === 0 || width <= 0) return lines;
+
+		return lines.map((line, index) => {
+			if (index !== 0 && index !== lines.length - 1) return line;
+			if (!isHorizontalBorderLine(line)) return line;
+			return renderBorderLine(
+				width,
+				prototype.__zentuiSelectorBorderGetTheme?.(),
+				prototype.__zentuiSelectorBorderGetConfig?.(),
+			);
+		});
+	};
+	prototype.__zentuiSelectorBorderWrapper = wrapper;
+	prototype.render = wrapper;
+	prototype.__zentuiSelectorBorderPatched = true;
+
+	return () => {
+		prototype.__zentuiSelectorBorderActive = false;
+	};
+}
+
+export function installSelectorBorderStyle(
+	getTheme?: () => Theme | undefined,
+	getConfig?: () => PolishedTuiConfig,
+): Cleanup {
+	const cleanupModel = patchSelectorBorderStyle(
+		ModelSelectorComponent.prototype as unknown as PatchableSelectorPrototype,
+		getTheme,
+		getConfig,
+	);
+	const cleanupSettings = patchSelectorBorderStyle(
+		SettingsSelectorComponent.prototype as unknown as PatchableSelectorPrototype,
+		getTheme,
+		getConfig,
+	);
+	return () => {
+		cleanupModel();
+		cleanupSettings();
+	};
+}

package/extensions/zentui/settings-command.ts

@@ -0,0 +1,121 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { getSettingsListTheme } from "@earendil-works/pi-coding-agent";
+import {
+	type SettingItem,
+	SettingsList,
+	type SettingsListTheme,
+	truncateToWidth,
+} from "@earendil-works/pi-tui";
+import type { ColorSource, ColorSourcesConfig, PolishedTuiConfig } from "./config";
+import { EDITOR_BORDER_STYLE, renderChromeBorder } from "./style";
+
+const colorSourceValues: ColorSource[] = ["theme", "terminal"];
+
+type SettingId = "starship" | "editorMessages";
+
+type SettingsCommandDeps = {
+	getConfig: () => PolishedTuiConfig;
+	setColorSources: (patch: Partial<ColorSourcesConfig>) => void;
+	requestRender: () => void;
+	settingsListTheme?: SettingsListTheme;
+};
+
+const settingLabels: Record<SettingId, string> = {
+	starship: "Starship/footer colors",
+	editorMessages: "Editor + previous messages",
+};
+
+const settingDescriptions: Record<SettingId, 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.",
+};
+
+function isColorSource(value: string): value is ColorSource {
+	return value === "theme" || value === "terminal";
+}
+
+function isSettingId(value: string): value is SettingId {
+	return value === "starship" || value === "editorMessages";
+}
+
+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> {
+	return id === "starship" ? { starship: value } : { editor: value, userMessages: value };
+}
+
+function buildItems(config: PolishedTuiConfig): SettingItem[] {
+	return (Object.keys(settingLabels) as SettingId[]).map((key) => ({
+		id: key,
+		label: settingLabels[key],
+		description: settingDescriptions[key],
+		currentValue: key === "starship" ? config.colorSources.starship : editorMessageValue(config),
+		values: colorSourceValues,
+	}));
+}
+
+export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCommandDeps): void {
+	pi.registerCommand("zentui", {
+		description: "Configure Zentui colors",
+		handler: async (_args, ctx) => {
+			if (!ctx.hasUI) return;
+
+			await ctx.ui.custom<void>((tui, theme, _keybindings, done) => {
+				const settingsList = new SettingsList(
+					buildItems(deps.getConfig()),
+					5,
+					deps.settingsListTheme ?? getSettingsListTheme(),
+					(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) {
+						const colorSource = deps.getConfig().colorSources.editor;
+						const border = renderChromeBorder(
+							theme,
+							colorSource,
+							EDITOR_BORDER_STYLE,
+							"─".repeat(Math.max(0, width)),
+						);
+						const header = theme.fg("accent", theme.bold("Zentui settings"));
+						const hint = theme.fg("dim", "Enter/Space cycles values · Esc closes");
+						return [
+							truncateToWidth(border, width, ""),
+							truncateToWidth(header, width, ""),
+							truncateToWidth(hint, width, ""),
+							"",
+							...settingsList.render(width),
+							truncateToWidth(border, width, ""),
+						];
+					},
+					invalidate() {
+						settingsList.invalidate();
+					},
+					handleInput(data: string) {
+						settingsList.handleInput(data);
+					},
+				};
+			});
+		},
+	});
+}

package/extensions/zentui/style.ts

@@ -1,11 +1,17 @@
-import type { ColorSpec } from "./config";
+import type { ColorSource, ColorSpec } from "./config";
 
 type ThemeLike = {
 	fg(color: string, text: string): string;
+	bold?: (text: string) => string;
+	italic?: (text: string) => string;
+	underline?: (text: string) => string;
 };
 
 export type { ThemeLike };
 
+export const EDITOR_ACCENT_STYLE = "blue";
+export const EDITOR_BORDER_STYLE = "bright-black";
+
 function isHexColor(value: string): boolean {
 	return /^#(?:[0-9a-fA-F]{6})$/.test(value);
 }
@@ -45,33 +51,98 @@ const terminalStyleModifiers = new Map([
 	["underline", 4],
 ]);
 
-function terminalColorToAnsi(color: string): string | undefined {
+const themeColorNameMap = new Map([
+	["red", "error"],
+	["bright-red", "error"],
+	["green", "success"],
+	["bright-green", "success"],
+	["yellow", "warning"],
+	["bright-yellow", "warning"],
+	["blue", "syntaxFunction"],
+	["bright-blue", "syntaxFunction"],
+	["cyan", "syntaxFunction"],
+	["bright-cyan", "syntaxFunction"],
+	["purple", "syntaxKeyword"],
+	["bright-purple", "syntaxKeyword"],
+	["black", "muted"],
+	["bright-black", "muted"],
+	["white", "text"],
+	["bright-white", "text"],
+]);
+
+const themeStyleModifiers = new Set(["bold", "italic", "underline"]);
+
+function terminalColorToAnsi(color: string, isBackground = false): string | undefined {
 	const normalized = color.toLowerCase();
 	const colorCode = terminalColorCodes.get(normalized);
-	if (colorCode !== undefined) return `${colorCode}`;
+	if (colorCode !== undefined) return `${isBackground ? colorCode + 10 : colorCode}`;
 
 	if (/^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(normalized)) {
-		return `38;5;${normalized}`;
+		return `${isBackground ? 48 : 38};5;${normalized}`;
 	}
 
-	if (isHexColor(normalized)) return hexToAnsi(normalized).slice(2, -1);
+	if (isHexColor(normalized)) return hexToAnsi(normalized, isBackground).slice(2, -1);
 	return undefined;
 }
 
+function isExplicitTerminalColorToken(token: string): boolean {
+	const normalized = token.toLowerCase();
+	if (normalized.startsWith("fg:") || normalized.startsWith("bg:")) return true;
+	if (isHexColor(normalized)) return true;
+	return /^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(normalized);
+}
+
+function applyThemeModifiers(theme: ThemeLike, styleTokens: string[], text: string): string {
+	let rendered = text;
+	for (const token of styleTokens) {
+		const normalized = token.toLowerCase();
+		if (normalized === "bold") rendered = theme.bold?.(rendered) ?? rendered;
+		if (normalized === "italic") rendered = theme.italic?.(rendered) ?? rendered;
+		if (normalized === "underline") rendered = theme.underline?.(rendered) ?? rendered;
+	}
+	return rendered;
+}
+
+function themeFg(theme: ThemeLike, color: string, text: string): string {
+	try {
+		return theme.fg(color, text);
+	} catch {
+		return text;
+	}
+}
+
+function mapThemeColor(styleTokens: string[]): string | undefined {
+	let fallback: string | undefined;
+	for (const token of styleTokens) {
+		const normalized = token.toLowerCase();
+		if (themeStyleModifiers.has(normalized)) continue;
+		if (normalized === "dim" || normalized === "dimmed") {
+			fallback = "muted";
+			continue;
+		}
+
+		const mapped = themeColorNameMap.get(normalized);
+		if (mapped) return mapped;
+		return token;
+	}
+	return fallback;
+}
+
 /**
  * Colorize text using a theme color token or hex color.
- * Non-hex values are passed directly to `theme.fg()` — if the token
- * is valid it renders styled, otherwise the theme handles fallback.
+ * Non-hex values are passed directly to `theme.fg()`; invalid tokens fall back
+ * to unstyled text so a config typo does not break rendering.
  */
 export function colorize(theme: ThemeLike, color: ColorSpec, text: string): string {
 	if (isHexColor(color)) {
 		return `${hexToAnsi(color)}${text}\x1b[39m`;
 	}
-	return theme.fg(color, text);
+	return themeFg(theme, color, text);
 }
 
 /**
- * Render text with Starship-style terminal styling strings (e.g. "bold red", "fg:202").
+ * Render text with Starship-style terminal styling strings (e.g. "bold red", "fg:202",
+ * "bg:blue", "underline bg:#bf5700").
  */
 export function renderTerminalStyle(style: string, text: string): string {
 	const codes: string[] = [];
@@ -85,10 +156,66 @@ export function renderTerminalStyle(style: string, text: string): string {
 			continue;
 		}
 
-		const foreground = normalized.startsWith("fg:") ? normalized.slice(3) : normalized;
-		const color = terminalColorToAnsi(foreground);
+		const isForeground = normalized.startsWith("fg:");
+		const isBackground = normalized.startsWith("bg:");
+		const colorName = isForeground || isBackground ? normalized.slice(3) : normalized;
+		const color = terminalColorToAnsi(colorName, isBackground);
 		if (color) codes.push(color);
 	}
 
 	return codes.length ? `\x1b[${codes.join(";")}m${text}\x1b[0m` : text;
 }
+
+/**
+ * Apply Starship-style terminal styling first, falling back to Pi theme tokens for
+ * legacy config values such as "accent" or "syntaxKeyword".
+ */
+export function renderStyle(theme: ThemeLike, style: ColorSpec, text: string): string {
+	if (style.trim() === "") return text;
+	const styled = renderTerminalStyle(style, text);
+	return styled === text ? colorize(theme, style, text) : styled;
+}
+
+export function renderThemeStyle(theme: ThemeLike, style: ColorSpec, text: string): string {
+	const trimmed = style.trim();
+	if (trimmed === "") return text;
+
+	const tokens = trimmed.split(/\s+/).filter(Boolean);
+	if (tokens.some(isExplicitTerminalColorToken)) return renderTerminalStyle(style, text);
+
+	const color = mapThemeColor(tokens) ?? "text";
+	return themeFg(theme, color, applyThemeModifiers(theme, tokens, text));
+}
+
+export function renderStyleForSource(
+	theme: ThemeLike,
+	source: ColorSource,
+	style: ColorSpec,
+	text: string,
+): string {
+	return source === "terminal"
+		? renderStyle(theme, style, text)
+		: renderThemeStyle(theme, style, text);
+}
+
+export function renderEditorAccent(text: string): string {
+	return renderTerminalStyle(EDITOR_ACCENT_STYLE, text);
+}
+
+export function renderEditorBorder(text: string): string {
+	return renderTerminalStyle(EDITOR_BORDER_STYLE, text);
+}
+
+export function renderAccentLine(theme: ThemeLike, source: ColorSource, text: string): string {
+	return source === "terminal" ? renderEditorAccent(text) : themeFg(theme, "accent", text);
+}
+
+export function renderChromeBorder(
+	theme: ThemeLike,
+	source: ColorSource,
+	terminalFallbackStyle: ColorSpec,
+	text: string,
+): string {
+	if (source === "terminal") return renderTerminalStyle(terminalFallbackStyle, text);
+	return themeFg(theme, "borderMuted", text);
+}

package/extensions/zentui/ui.ts

@@ -6,6 +6,8 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@earendil-works/pi-tui";
+import type { PolishedTuiConfig } from "./config";
+import { EDITOR_BORDER_STYLE, renderAccentLine, renderChromeBorder } from "./style";
 
 type AutocompleteEditorInternals = {
 	autocompleteList?: Pick<Component, "render">;
@@ -20,6 +22,7 @@ function clampRenderedLines(lines: string[], width: number): string[] {
 export class PolishedEditor extends CustomEditor {
 	private readonly getModelMeta: () => string;
 	private readonly getThinkingLevel: () => string | undefined;
+	private readonly getConfig: () => PolishedTuiConfig;
 	private readonly uiTheme: Theme;
 	private readonly reset = "\x1b[0m";
 
@@ -28,12 +31,14 @@ export class PolishedEditor extends CustomEditor {
 		theme: EditorTheme,
 		keybindings: KeybindingsManager,
 		uiTheme: Theme,
+		getConfig: () => PolishedTuiConfig,
 		getModelMeta: () => string,
 		getThinkingLevel: () => string | undefined,
 	) {
 		super(tui, theme, keybindings, { paddingX: 0 });
 		this.borderColor = (text: string) => uiTheme.fg("border", text);
 		this.uiTheme = uiTheme;
+		this.getConfig = getConfig;
 		this.getModelMeta = getModelMeta;
 		this.getThinkingLevel = getThinkingLevel;
 	}
@@ -87,9 +92,20 @@ export class PolishedEditor extends CustomEditor {
 		}
 		const meta = metaParts.filter(Boolean).join(this.uiTheme.fg("border", "  "));
 
-		const rail = `${this.uiTheme.fg("accent", "│")}${this.reset} `;
-		const top = this.uiTheme.fg("border", "─".repeat(width));
-		const bottom = this.uiTheme.fg("border", "─".repeat(width));
+		const colorSource = this.getConfig().colorSources.editor;
+		const rail = `${renderAccentLine(this.uiTheme, colorSource, "│")}${this.reset} `;
+		const top = renderChromeBorder(
+			this.uiTheme,
+			colorSource,
+			EDITOR_BORDER_STYLE,
+			"─".repeat(width),
+		);
+		const bottom = renderChromeBorder(
+			this.uiTheme,
+			colorSource,
+			EDITOR_BORDER_STYLE,
+			"─".repeat(width),
+		);
 		const lines = ["", ...editorLines, "", meta];
 		const renderedLines = [
 			top,

package/extensions/zentui/user-message.ts

@@ -5,6 +5,8 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@earendil-works/pi-tui";
+import type { PolishedTuiConfig } from "./config";
+import { EDITOR_BORDER_STYLE, renderAccentLine, renderChromeBorder } from "./style";
 
 const OSC133_ZONE_START = "\x1b]133;A\x07";
 const OSC133_ZONE_END = "\x1b]133;B\x07";
@@ -17,9 +19,14 @@ type PatchableUserMessagePrototype = {
 	children?: unknown[];
 	__zentuiUserMessageOriginalRender?: RenderFn;
 	__zentuiUserMessagePatched?: boolean;
+	__zentuiUserMessageWrapper?: RenderFn;
+	__zentuiUserMessageActive?: boolean;
 	__zentuiUserMessageGetTheme?: () => Theme | undefined;
+	__zentuiUserMessageGetConfig?: () => PolishedTuiConfig;
 };
 
+type Cleanup = () => void;
+
 type MarkdownLike = {
 	text?: unknown;
 };
@@ -73,9 +80,14 @@ function fillLine(content: string, width: number): string {
 	return `${truncated}${pad}`;
 }
 
-function renderPromptBoxLine(line: string, width: number, theme: Theme | undefined): string {
+function renderPromptBoxLine(
+	line: string,
+	width: number,
+	theme: Theme | undefined,
+	config: PolishedTuiConfig,
+): string {
 	if (width <= 0) return "";
-	const rail = `${themeFg(theme, "accent", "│")} `;
+	const rail = `${theme ? renderAccentLine(theme, config.colorSources.userMessages, "│") : "│"} `;
 	const contentWidth = Math.max(0, width - visibleWidth(rail));
 	return truncateToWidth(`${rail}${fillLine(line, contentWidth)}`, width, "");
 }
@@ -84,42 +96,70 @@ function renderZentuiUserMessage(
 	instance: PatchableUserMessagePrototype,
 	width: number,
 	theme: Theme | undefined,
+	config: PolishedTuiConfig,
 ): string[] | undefined {
 	const text = findMarkdownText(instance);
 	if (text === undefined) return undefined;
 	if (width <= 0) return [""];
 
-	const railWidth = visibleWidth(`${themeFg(theme, "accent", "│")} `);
+	const railWidth = visibleWidth(
+		`${theme ? renderAccentLine(theme, config.colorSources.userMessages, "│") : "│"} `,
+	);
 	const contentWidth = Math.max(1, width - railWidth);
 	const renderer = new Markdown(text, 0, 0, makeMarkdownTheme(theme), {
 		color: (content) => themeFg(theme, "userMessageText", content),
 	});
 	const body = renderer.render(contentWidth);
 	const contentLines = body.length > 0 ? body : [""];
-	const border = themeFg(theme, "border", "─".repeat(width));
+	const border = theme
+		? renderChromeBorder(
+				theme,
+				config.colorSources.userMessages,
+				EDITOR_BORDER_STYLE,
+				"─".repeat(width),
+			)
+		: "─".repeat(width);
 
 	return [
 		truncateToWidth(border, width, ""),
-		renderPromptBoxLine("", width, theme),
-		...contentLines.map((line) => renderPromptBoxLine(line, width, theme)),
-		renderPromptBoxLine("", width, theme),
+		renderPromptBoxLine("", width, theme, config),
+		...contentLines.map((line) => renderPromptBoxLine(line, width, theme, config)),
+		renderPromptBoxLine("", width, theme, config),
 		truncateToWidth(border, width, ""),
 	];
 }
 
-export function installUserMessageStyle(getTheme: () => Theme | undefined): void {
+export function installUserMessageStyle(
+	getTheme: () => Theme | undefined,
+	getConfig: () => PolishedTuiConfig,
+): Cleanup {
 	const prototype = UserMessageComponent.prototype as unknown as PatchableUserMessagePrototype;
 	prototype.__zentuiUserMessageGetTheme = getTheme;
-
-	if (prototype.__zentuiUserMessagePatched) return;
+	prototype.__zentuiUserMessageGetConfig = getConfig;
+	prototype.__zentuiUserMessageActive = true;
+
+	if (
+		prototype.__zentuiUserMessagePatched &&
+		prototype.render === prototype.__zentuiUserMessageWrapper
+	) {
+		return () => {
+			prototype.__zentuiUserMessageActive = false;
+		};
+	}
 
 	prototype.__zentuiUserMessageOriginalRender = prototype.render;
-	prototype.render = function renderWithZentuiUserMessage(width: number): string[] {
+	const wrapper = function renderWithZentuiUserMessage(this: unknown, width: number): string[] {
 		const original = prototype.__zentuiUserMessageOriginalRender ?? prototype.render;
+		if (!prototype.__zentuiUserMessageActive) return original.call(this, width);
+
+		const config = prototype.__zentuiUserMessageGetConfig?.();
+		if (!config) return original.call(this, width);
+
 		const lines = renderZentuiUserMessage(
 			this as PatchableUserMessagePrototype,
 			width,
 			prototype.__zentuiUserMessageGetTheme?.(),
+			config,
 		);
 
 		if (!lines) return original.call(this, width);
@@ -129,5 +169,11 @@ export function installUserMessageStyle(getTheme: () => Theme | undefined): void
 		lines[lines.length - 1] = OSC133_ZONE_END + OSC133_ZONE_FINAL + lines[lines.length - 1];
 		return lines;
 	};
+	prototype.__zentuiUserMessageWrapper = wrapper;
+	prototype.render = wrapper;
 	prototype.__zentuiUserMessagePatched = true;
+
+	return () => {
+		prototype.__zentuiUserMessageActive = false;
+	};
 }

package/package.json

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