pi-zentui 0.1.7 → 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,59 +41,13 @@ export type PolishedTuiConfig = {
 		tokens: ColorSpec;
 		cost: ColorSpec;
 		separator: ColorSpec;
+		runtimePrefix: ColorSpec;
 	};
+	colorSources: ColorSourcesConfig;
 };
 
 export const configPath = join(getAgentDir(), "zentui.json");
 
-const themeColorTokens = new Set([
-	"accent",
-	"border",
-	"borderAccent",
-	"borderMuted",
-	"success",
-	"error",
-	"warning",
-	"muted",
-	"dim",
-	"text",
-	"thinkingText",
-	"userMessageText",
-	"customMessageText",
-	"customMessageLabel",
-	"toolTitle",
-	"toolOutput",
-	"mdHeading",
-	"mdLink",
-	"mdLinkUrl",
-	"mdCode",
-	"mdCodeBlock",
-	"mdCodeBlockBorder",
-	"mdQuote",
-	"mdQuoteBorder",
-	"mdHr",
-	"mdListBullet",
-	"toolDiffAdded",
-	"toolDiffRemoved",
-	"toolDiffContext",
-	"syntaxComment",
-	"syntaxKeyword",
-	"syntaxFunction",
-	"syntaxVariable",
-	"syntaxString",
-	"syntaxNumber",
-	"syntaxType",
-	"syntaxOperator",
-	"syntaxPunctuation",
-	"thinkingOff",
-	"thinkingMinimal",
-	"thinkingLow",
-	"thinkingMedium",
-	"thinkingHigh",
-	"thinkingXhigh",
-	"bashMode",
-]);
-
 export const defaultConfig: PolishedTuiConfig = {
 	projectRefreshIntervalMs: DEFAULT_PROJECT_REFRESH_INTERVAL_MS,
 	icons: {
@@ -105,72 +66,22 @@ 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",
 	},
-};
-
-function isHexColor(value: string): boolean {
-	return /^#(?:[0-9a-fA-F]{6})$/.test(value);
-}
-
-function hexToAnsi(hex: string, isBackground = false): string {
-	const normalized = hex.slice(1);
-	const r = Number.parseInt(normalized.slice(0, 2), 16);
-	const g = Number.parseInt(normalized.slice(2, 4), 16);
-	const b = Number.parseInt(normalized.slice(4, 6), 16);
-	return `\x1b[${isBackground ? 48 : 38};2;${r};${g};${b}m`;
-}
-
-const terminalColorCodes = new Map([
-	["black", 30],
-	["red", 31],
-	["green", 32],
-	["yellow", 33],
-	["blue", 34],
-	["purple", 35],
-	["cyan", 36],
-	["white", 37],
-	["bright-black", 90],
-	["bright-red", 91],
-	["bright-green", 92],
-	["bright-yellow", 93],
-	["bright-blue", 94],
-	["bright-purple", 95],
-	["bright-cyan", 96],
-	["bright-white", 97],
-]);
-
-const terminalStyleModifiers = new Map([
-	["bold", 1],
-	["dim", 2],
-	["dimmed", 2],
-	["italic", 3],
-	["underline", 4],
-]);
-
-function terminalColorToAnsi(color: string): string | undefined {
-	const normalized = color.toLowerCase();
-	const colorCode = terminalColorCodes.get(normalized);
-	if (colorCode !== undefined) return `${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}`;
-	}
-
-	if (isHexColor(normalized)) return hexToAnsi(normalized).slice(2, -1);
-	return undefined;
-}
-
-type ThemeLike = {
-	fg(color: string, text: string): string;
 };
 
 type ConfigRecord = Record<string, unknown>;
@@ -191,34 +102,73 @@ function parseProjectRefreshIntervalMs(value: unknown): number {
 		: defaultConfig.projectRefreshIntervalMs;
 }
 
-export function colorize(theme: ThemeLike, color: ColorSpec, text: string): string {
-	if (themeColorTokens.has(color)) {
-		return theme.fg(color, text);
-	}
-	if (isHexColor(color)) {
-		return `${hexToAnsi(color)}${text}\x1b[39m`;
-	}
-	return theme.fg("text", text);
+function stringValue(record: Record<string, unknown>, key: string): string | undefined {
+	const value = record[key];
+	return typeof value === "string" ? value : undefined;
 }
 
-export function renderTerminalStyle(style: string, text: string): string {
-	const codes: string[] = [];
-	for (const token of style.trim().split(/\s+/)) {
-		if (!token) continue;
+function colorSourceValue(
+	record: Record<string, unknown>,
+	key: keyof ColorSourcesConfig,
+): ColorSource {
+	const value = record[key];
+	return value === "terminal" || value === "theme" ? value : defaultConfig.colorSources[key];
+}
 
-		const normalized = token.toLowerCase();
-		const modifier = terminalStyleModifiers.get(normalized);
-		if (modifier !== undefined) {
-			codes.push(`${modifier}`);
-			continue;
-		}
+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"]>;
+}
 
-		const foreground = normalized.startsWith("fg:") ? normalized.slice(3) : normalized;
-		const color = terminalColorToAnsi(foreground);
-		if (color) codes.push(color);
-	}
+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";
+}
 
-	return codes.length ? `\x1b[${codes.join(";")}m${text}\x1b[0m` : text;
+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 {
@@ -235,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: {
@@ -247,6 +200,7 @@ export function mergeConfig(parsed: unknown): PolishedTuiConfig {
 			...defaultConfig.colors,
 			...colors,
 		},
+		colorSources,
 	};
 }
 
@@ -258,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

@@ -0,0 +1,107 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { PolishedTuiConfig } from "./config";
+import { formatCwdLabel, formatRuntimeSegment } from "./format";
+import type { FooterState } from "./state";
+import { renderStyleForSource } from "./style";
+
+export function installFooter(
+	ctx: ExtensionContext,
+	state: FooterState,
+	getConfig: () => PolishedTuiConfig,
+	hooks: {
+		setRequestRender: (fn: (() => void) | undefined) => void;
+		scheduleProjectRefresh: (ctx: ExtensionContext) => void;
+	},
+): void {
+	ctx.ui.setFooter((tui, theme, footerData) => {
+		hooks.setRequestRender(() => tui.requestRender());
+		const unsubscribeBranch = footerData.onBranchChange(() => {
+			hooks.scheduleProjectRefresh(ctx);
+			tui.requestRender();
+		});
+
+		return {
+			dispose: () => {
+				unsubscribeBranch();
+				hooks.setRequestRender(undefined);
+			},
+			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 = renderStyleForSource(
+					theme,
+					colorSource,
+					config.colors.cwd,
+					formatCwdLabel(ctx.cwd, config.icons.cwd),
+				);
+				const branch = state.branch;
+				const contextUsage = ctx.getContextUsage();
+				const contextColor =
+					contextUsage?.percent !== null && contextUsage?.percent !== undefined
+						? contextUsage.percent >= 90
+							? config.colors.contextError
+							: contextUsage.percent >= 70
+								? config.colors.contextWarning
+								: config.colors.contextNormal
+						: config.colors.contextNormal;
+				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 : "",
+					state.stashed ? config.icons.stashed : "",
+					state.deleted > 0 ? config.icons.deleted : "",
+					state.renamed > 0 ? config.icons.renamed : "",
+					state.modified > 0 ? config.icons.modified : "",
+					state.typechanged > 0 ? config.icons.typechanged : "",
+					state.staged > 0 ? config.icons.staged : "",
+					state.untracked > 0 ? config.icons.untracked : "",
+				].join("");
+				const aheadBehind =
+					state.ahead > 0 && state.behind > 0
+						? config.icons.diverged
+						: state.ahead > 0
+							? config.icons.ahead
+							: state.behind > 0
+								? config.icons.behind
+								: "";
+				const statusBlock =
+					allStatus || aheadBehind ? gitStatusColor(`[${allStatus}${aheadBehind}]`) : "";
+				const branchLabel = branch
+					? `on ${gitIcon} ${gitColor(branch)}${statusBlock ? ` ${statusBlock}` : ""}`
+					: "";
+				const runtimeLabel = formatRuntimeSegment(
+					theme,
+					state.runtime,
+					config.colors.runtimePrefix,
+					colorSource,
+				);
+
+				const left = [cwdLabel, branchLabel, runtimeLabel].filter(Boolean).join(" ");
+				const right = [
+					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);
+				const rightWidth = visibleWidth(right);
+				const content =
+					leftWidth >= innerWidth
+						? truncateToWidth(left, innerWidth, "")
+						: leftWidth + 1 + rightWidth <= innerWidth
+							? `${left}${" ".repeat(innerWidth - leftWidth - rightWidth)}${right}`
+							: truncateToWidth(left, innerWidth, "");
+				const framed = width > 2 ? ` ${truncateToWidth(content, width - 2, "")} ` : content;
+				return [truncateToWidth(framed, width, "")];
+			},
+		};
+	});
+}

package/extensions/zentui/format.ts

@@ -0,0 +1,87 @@
+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 { renderStyleForSource } from "./style";
+
+export type UsageTotals = {
+	input: number;
+	output: number;
+	cost: number;
+};
+
+export function formatCount(value: number): string {
+	if (value < 1000) return `${value}`;
+	if (value < 10_000) return `${(value / 1000).toFixed(1)}k`;
+	return `${Math.round(value / 1000)}k`;
+}
+
+export function formatProviderLabel(provider: string | undefined): string {
+	if (!provider) return "Unknown";
+
+	const known: Record<string, string> = {
+		anthropic: "Anthropic",
+		gemini: "Google",
+		google: "Google",
+		ollama: "Ollama",
+		openai: "OpenAI",
+		"openai-codex": "OpenAI",
+	};
+
+	return (
+		known[provider] ?? provider.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
+	);
+}
+
+export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
+	let input = 0;
+	let output = 0;
+	let cost = 0;
+
+	for (const entry of ctx.sessionManager.getBranch()) {
+		if (entry.type !== "message" || entry.message.role !== "assistant") continue;
+		const message = entry.message as AssistantMessage;
+		input += message.usage?.input ?? 0;
+		output += message.usage?.output ?? 0;
+		cost += message.usage?.cost?.total ?? 0;
+	}
+
+	return { input, output, cost };
+}
+
+export function buildTokenLabel(totals: UsageTotals): string {
+	return `↑${formatCount(totals.input)} ↓${formatCount(totals.output)}`;
+}
+
+export function buildCostLabel(totals: UsageTotals): string {
+	return `$${totals.cost.toFixed(3)}`;
+}
+
+export function buildContextLabel(ctx: ExtensionContext): string {
+	const usage = ctx.getContextUsage();
+	const contextWindow = ctx.model?.contextWindow ?? usage?.contextWindow;
+
+	if (!usage || !contextWindow || contextWindow <= 0) return "--";
+
+	const percent =
+		usage.percent === null ? "?" : `${Math.max(0, Math.min(999, Math.round(usage.percent)))}%`;
+	return `${percent}/${formatCount(contextWindow)}`;
+}
+
+export function formatRuntimeSegment(
+	theme: Pick<Theme, "fg">,
+	runtime: RuntimeInfo | undefined,
+	prefixStyle: ColorSpec,
+	colorSource: ColorSource,
+): string {
+	if (!runtime) return "";
+	const label = runtime.version ? `${runtime.symbol} ${runtime.version}` : runtime.symbol;
+	return `${renderStyleForSource(theme, colorSource, prefixStyle, "via")} ${renderStyleForSource(theme, colorSource, runtime.style, label)}`;
+}
+
+export function formatCwdLabel(cwd: string, cwdIcon: string): string {
+	const normalized = cwd.replace(/\\/g, "/").replace(/\/+$/, "");
+	const parts = normalized.split("/").filter(Boolean);
+	const last = parts[parts.length - 1] ?? cwd;
+	return cwdIcon ? `${cwdIcon} ${last}` : last;
+}