@hank-warren/pi-statusline 0.2.4 → 0.4.0

package/index.ts

@@ -1,17 +1,33 @@
+import { homedir } from "node:os";
 import { basename } from "node:path";
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth } from "@earendil-works/pi-tui";
+import {
+	type ExtensionAPI,
+	type ExtensionContext,
+	getSelectListTheme,
+	getSettingsListTheme,
+} from "@earendil-works/pi-coding-agent";
+import { SettingsList, truncateToWidth } from "@earendil-works/pi-tui";
 import {
 	CacheCelebrationController,
 	type CacheCelebrationSnapshot,
 	triggerCacheCelebrationForMessage,
 } from "./cache-celebration.ts";
+import { CelebrationPreview, trackSelectedLabel } from "./celebration-preview.ts";
+import { DEFAULT_CELEBRATION_STYLE, renderCacheBadge } from "./celebration-styles.ts";
 import { FullRedrawScheduler } from "./redraw.ts";
+import {
+	applySettingChange,
+	buildSettingItems,
+	CACHE_CELEBRATION_LABEL,
+	createAliasSubmenu,
+	createWorktreeRootSubmenu,
+} from "./settings-menu.ts";
+import { defaultSettings, repoAlias, SettingsStore, type StatuslineSettings } from "./settings.ts";
+import { resolvePalette, type StatuslinePalette, STATUSLINE_THEMES } from "./themes.ts";
 import { type UsageSnapshot, usageBand, UsageTracker } from "./usage.ts";
 import {
 	type GitRepositoryStatus,
 	readGitStatus,
-	repoAlias,
 	type SessionWorktree,
 	SessionWorktreeTracker,
 } from "./worktrees.ts";
@@ -28,19 +44,8 @@ export interface StatuslineData {
 	usage?: UsageSnapshot;
 }
 
-const BLUE = "\x1b[38;2;0;153;255m";
-const ORANGE = "\x1b[38;2;255;176;85m";
-const GREEN = "\x1b[38;2;0;175;80m";
-const CYAN = "\x1b[38;2;86;182;194m";
-const RED = "\x1b[38;2;255;85;85m";
-const YELLOW = "\x1b[38;2;230;200;0m";
-const WHITE = "\x1b[38;2;220;220;220m";
-const MAGENTA = "\x1b[38;2;190;120;255m";
-const NEON_CYAN = "\x1b[38;2;0;255;255m";
-const NEON_MAGENTA = "\x1b[38;2;255;0;255m";
-const DIM = "\x1b[2m";
-const BOLD = "\x1b[1m";
 const RESET = "\x1b[0m";
+const DEFAULT_PALETTE = STATUSLINE_THEMES.default;
 
 function styled(style: string, text: string): string {
 	return `${style}${text}${RESET}`;
@@ -48,32 +53,37 @@ function styled(style: string, text: string): string {
 
 const CLAUDE_ICON = "\uec82";
 const OPENAI_ICON = "\uec81";
-const USAGE_BAND_COLORS = { green: GREEN, yellow: YELLOW, orange: ORANGE, red: RED } as const;
 
-function remainingPercent(remaining: number): string {
-	return styled(USAGE_BAND_COLORS[usageBand(remaining)], `${remaining}`);
+function bandColor(remaining: number, palette: StatuslinePalette): string {
+	return { green: palette.ok, yellow: palette.warn, orange: palette.caution, red: palette.danger }[
+		usageBand(remaining)
+	];
 }
 
-export function renderUsageSegment(usage: UsageSnapshot): string | undefined {
+export function renderUsageSegment(
+	usage: UsageSnapshot,
+	palette: StatuslinePalette = DEFAULT_PALETTE,
+): string | undefined {
+	const percent = (remaining: number) => styled(bandColor(remaining, palette), `${remaining}`);
 	const parts: string[] = [];
 	if (usage.claude) {
-		const dot = styled(DIM, "\u00b7");
-		let claude = `${remainingPercent(usage.claude.fiveHour)}${dot}${remainingPercent(usage.claude.sevenDay)}`;
-		if (usage.claude.scopedWeekly !== undefined) claude += `${dot}${remainingPercent(usage.claude.scopedWeekly)}`;
-		parts.push(`${styled(WHITE, CLAUDE_ICON)} ${claude}`);
+		const dot = styled(palette.dim, "\u00b7");
+		let claude = `${percent(usage.claude.fiveHour)}${dot}${percent(usage.claude.sevenDay)}`;
+		if (usage.claude.scopedWeekly !== undefined) claude += `${dot}${percent(usage.claude.scopedWeekly)}`;
+		parts.push(`${styled(palette.text, CLAUDE_ICON)} ${claude}`);
 	}
 	if (usage.codex) {
-		parts.push(`${styled(WHITE, OPENAI_ICON)} ${remainingPercent(usage.codex.weekly)}`);
+		parts.push(`${styled(palette.text, OPENAI_ICON)} ${percent(usage.codex.weekly)}`);
 	}
 	return parts.length > 0 ? parts.join(" ") : undefined;
 }
 
-function contextColor(contextTokens: number, contextWindow: number): string {
+function contextColor(contextTokens: number, contextWindow: number, palette: StatuslinePalette): string {
 	const percent = contextWindow > 0 ? Math.floor((contextTokens * 100) / contextWindow) : 0;
-	if (percent >= 90) return RED;
-	if (percent >= 70) return YELLOW;
-	if (percent >= 50) return ORANGE;
-	return GREEN;
+	if (percent >= 90) return palette.danger;
+	if (percent >= 70) return palette.warn;
+	if (percent >= 50) return palette.caution;
+	return palette.ok;
 }
 
 export function formatTokenCount(tokens: number): string {
@@ -86,70 +96,116 @@ export function formatTokenCount(tokens: number): string {
 	return `${safeTokens}`;
 }
 
-function renderRepository(name: string, status: GitRepositoryStatus, nameColor = WHITE): string {
+function renderRepository(
+	name: string,
+	status: GitRepositoryStatus,
+	palette: StatuslinePalette,
+	nameColor = palette.path,
+): string {
 	let part = styled(nameColor, name);
-	part += styled(DIM, ":");
-	part += styled(CYAN, status.branch);
-	if (status.dirty) part += styled(YELLOW, "*");
-	if (status.behind > 0) part += ` ${styled(ORANGE, `⇣${status.behind}`)}`;
+	part += styled(palette.dim, ":");
+	part += styled(palette.branch, status.branch);
+	if (status.dirty) part += styled(palette.warn, "*");
+	if (status.behind > 0) part += ` ${styled(palette.caution, `⇣${status.behind}`)}`;
 	return part;
 }
 
 export function renderCacheCelebrationLine(
 	summary: string,
 	celebration: CacheCelebrationSnapshot,
+	palette: StatuslinePalette = DEFAULT_PALETTE,
+	style: string = DEFAULT_CELEBRATION_STYLE,
 ): string {
-	const badge = `⚡${celebration.percent}%·CACHE·HIT`;
-	const color = celebration.frame % 2 === 0 ? NEON_MAGENTA : NEON_CYAN;
-	const animatedBadge = `${BOLD}${color}${badge}${RESET}`;
-	return `${summary}${styled(DIM, " | ")}${animatedBadge}`;
+	const badge = renderCacheBadge(celebration.percent, celebration.frame, style, palette);
+	return `${summary}${styled(palette.dim, " | ")}${badge}`;
 }
 
-function renderWorktreeLine(worktrees: SessionWorktree[]): string {
-	const separator = styled(DIM, " | ");
+function renderWorktreeLine(
+	worktrees: SessionWorktree[],
+	settings: StatuslineSettings,
+	palette: StatuslinePalette,
+): string {
+	const separator = styled(palette.dim, " | ");
 	const parts = worktrees.map((worktree) => {
-		let part = renderRepository(repoAlias(worktree.repo), worktree);
+		let part = renderRepository(repoAlias(worktree.repo, settings.repoAliases), worktree, palette);
 		if (worktree.pr !== undefined) {
 			const state = worktree.prState?.toUpperCase();
-			const color = state === "OPEN" ? GREEN : state === "MERGED" ? MAGENTA : state === "CLOSED" ? RED : DIM;
+			const color =
+				state === "OPEN"
+					? palette.ok
+					: state === "MERGED"
+						? palette.accent
+						: state === "CLOSED"
+							? palette.danger
+							: palette.dim;
 			part += ` ${styled(color, `#${worktree.pr}`)}`;
 		}
 		return part;
 	});
-	return `${styled(DIM, "⑂")} ${parts.join(separator)}`;
+	return `${styled(palette.dim, "⑂")} ${parts.join(separator)}`;
 }
 
-export function renderStatusline(data: StatuslineData, width: number): string[] {
-	const lineCount = data.worktrees.length > 0 ? 3 : 2;
-	if (width <= 0) return Array.from({ length: lineCount }, () => "");
+/** Home-independent defaults; only `worktreeRoot` varies by host and rendering never reads it. */
+const RENDER_DEFAULTS = defaultSettings("");
 
-	const separator = styled(DIM, " | ");
+export function renderStatusline(
+	data: StatuslineData,
+	width: number,
+	settings: StatuslineSettings = RENDER_DEFAULTS,
+): string[] {
+	const palette = resolvePalette(settings.theme);
+	const separator = styled(palette.dim, " | ");
 	const used =
 		data.contextTokens === null
-			? styled(DIM, "?")
-			: styled(contextColor(data.contextTokens, data.contextWindow), formatTokenCount(data.contextTokens));
-	const context = `${used}${styled(DIM, "/")}${styled(WHITE, formatTokenCount(data.contextWindow))}`;
-	const cwd = data.cwdGit ? renderRepository(data.cwd, data.cwdGit) : styled(CYAN, data.cwd);
-	const usageSegment = data.usage ? renderUsageSegment(data.usage) : undefined;
-	const summary =
-		styled(BLUE, data.model) +
-		separator +
-		cwd +
-		separator +
-		context +
-		(usageSegment ? separator + usageSegment : "");
-	const firstLine = data.cacheCelebration
-		? renderCacheCelebrationLine(summary, data.cacheCelebration)
-		: summary;
-
-	const lines = [truncateToWidth(firstLine, width)];
-	if (data.worktrees.length > 0) lines.push(truncateToWidth(renderWorktreeLine(data.worktrees), width, "…"));
-	lines.push(truncateToWidth(styled(DIM, data.sessionId), width));
+			? styled(palette.dim, "?")
+			: styled(
+					contextColor(data.contextTokens, data.contextWindow, palette),
+					formatTokenCount(data.contextTokens),
+				);
+	const usageSegment = settings.showUsage && data.usage ? renderUsageSegment(data.usage, palette) : undefined;
+	const segments = [
+		settings.showModel ? styled(palette.model, data.model) : undefined,
+		settings.showDirectory
+			? data.cwdGit
+				? renderRepository(data.cwd, data.cwdGit, palette)
+				: styled(palette.branch, data.cwd)
+			: undefined,
+		settings.showContext
+			? `${used}${styled(palette.dim, "/")}${styled(palette.text, formatTokenCount(data.contextWindow))}`
+			: undefined,
+		usageSegment,
+	].filter((segment): segment is string => segment !== undefined);
+
+	const showWorktreeLine = settings.showWorktrees && data.worktrees.length > 0;
+	const lineCount = (segments.length > 0 ? 1 : 0) + (showWorktreeLine ? 1 : 0) + (settings.showSessionId ? 1 : 0);
+	// A footer that renders nothing would collapse the block; keep one stable row.
+	if (lineCount === 0) return [""];
+	if (width <= 0) return Array.from({ length: lineCount }, () => "");
+
+	const lines: string[] = [];
+	if (segments.length > 0) {
+		const summary = segments.join(separator);
+		// A badge-only first line is separator soup, so the celebration needs a summary.
+		const celebration = settings.showCacheCelebration ? data.cacheCelebration : undefined;
+		lines.push(
+			truncateToWidth(
+				celebration
+					? renderCacheCelebrationLine(summary, celebration, palette, settings.cacheCelebrationStyle)
+					: summary,
+				width,
+			),
+		);
+	}
+	if (showWorktreeLine) {
+		lines.push(truncateToWidth(renderWorktreeLine(data.worktrees, settings, palette), width, "…"));
+	}
+	if (settings.showSessionId) lines.push(truncateToWidth(styled(palette.dim, data.sessionId), width));
 	return lines;
 }
 
 export default function statuslineExtension(pi: ExtensionAPI): void {
 	let requestRender: (() => void) | undefined;
+	const celebrationPreview = new CelebrationPreview(() => requestRender?.());
 	const fullRedraw = new FullRedrawScheduler();
 	const cacheCelebration = new CacheCelebrationController(() => requestRender?.());
 	let tracker: SessionWorktreeTracker | undefined;
@@ -157,6 +213,9 @@ export default function statuslineExtension(pi: ExtensionAPI): void {
 	let cwdGit: GitRepositoryStatus | null = null;
 	let cwdStatusAbort: AbortController | undefined;
 	let cwdStatusInFlight: Promise<void> | undefined;
+	const home = homedir();
+	const settingsStore = new SettingsStore({ home });
+	let settings = settingsStore.get();
 
 	const runInBackground = (operation: Promise<void>): void => {
 		operation.catch(() => {
@@ -193,26 +252,128 @@ export default function statuslineExtension(pi: ExtensionAPI): void {
 
 	const resetTracker = (ctx: ExtensionContext): void => {
 		tracker?.dispose();
+		tracker = undefined;
 		cwdStatusAbort?.abort();
 		cwdGit = null;
 		cwdStatusAbort = new AbortController();
 		cwdStatusInFlight = undefined;
+		runInBackground(refreshCwdStatus(ctx));
+		if (settings.showUsage) runInBackground(usageTracker.refresh());
+		// A hidden worktree line must not pay for git/gh polling.
+		if (!settings.showWorktrees) return;
 		const next = new SessionWorktreeTracker({
 			exec: (command, args, options) => pi.exec(command, args, options),
-			home: process.env.HOME ?? "",
+			worktreeRoot: settings.worktreeRoot,
+			home,
 			onChange: () => requestRender?.(),
 		});
 		tracker = next;
-		runInBackground(refreshCwdStatus(ctx));
 		runInBackground(next.seedFromEntries(ctx.sessionManager.getBranch()));
 		runInBackground(next.includeCurrentWorktree(ctx.cwd));
-		runInBackground(usageTracker.refresh());
 	};
 
+	/** Adopt a new settings snapshot: apply it live, then persist in the background. */
+	const applySettings = (ctx: ExtensionContext, next: StatuslineSettings, persist = true): void => {
+		const previous = settings;
+		settings = next;
+		settingsStore.set(next);
+
+		if (!next.showWorktrees) {
+			tracker?.dispose();
+			tracker = undefined;
+		} else if (!previous.showWorktrees || !tracker || previous.worktreeRoot !== next.worktreeRoot) {
+			resetTracker(ctx);
+		}
+		if (next.showUsage && !previous.showUsage) runInBackground(usageTracker.refresh());
+		if (!next.showCacheCelebration) cacheCelebration.dispose();
+		// Dropping a row leaves a stale one behind in fullscreen mode.
+		if (previous.showSessionId !== next.showSessionId || previous.showWorktrees !== next.showWorktrees) {
+			fullRedraw.request();
+		}
+		requestRender?.();
+
+		if (!persist) return;
+		settingsStore.save(next).catch((error: unknown) => {
+			ctx.ui.notify(
+				`Could not save statusline settings: ${error instanceof Error ? error.message : String(error)}`,
+				"warning",
+			);
+		});
+	};
+
+	pi.registerCommand("statusline", {
+		description: "Configure the statusline",
+		handler: async (_args, ctx) => {
+			if (ctx.mode !== "tui") {
+				ctx.ui.notify("/statusline requires interactive TUI mode", "warning");
+				return;
+			}
+
+			await ctx.ui.custom<void>((tui, _theme, _keybindings, done) => {
+				const tracked = trackSelectedLabel(getSettingsListTheme());
+				const settingsTheme = tracked.theme;
+				const submenuHost = {
+					getSettings: () => settings,
+					commit: (next: StatuslineSettings) => applySettings(ctx, next),
+					notify: (message: string) => ctx.ui.notify(message, "warning"),
+					requestRender: () => tui.requestRender(),
+					settingsTheme,
+					selectTheme: getSelectListTheme(),
+					home,
+				};
+				const list = new SettingsList(
+					buildSettingItems(
+						settings,
+						{
+							worktreeRoot: createWorktreeRootSubmenu(submenuHost),
+							repoAliases: createAliasSubmenu(submenuHost),
+						},
+						home,
+					),
+					10,
+					settingsTheme,
+					(id, value) => {
+						const change = applySettingChange(settings, id, value, home);
+						if (change.kind === "error") ctx.ui.notify(change.message, "warning");
+						else if (change.kind === "settings") applySettings(ctx, change.settings);
+						tui.requestRender();
+					},
+					() => done(undefined),
+					{ enableSearch: true },
+				);
+
+				// The preview animates the real footer, so it only needs to wrap the
+				// list's render to learn which row currently has focus.
+				return {
+					dispose(): void {
+						// Clear the fake badge from the footer the menu was drawn over.
+						celebrationPreview.dispose();
+						requestRender?.();
+					},
+					invalidate(): void {
+						list.invalidate();
+					},
+					handleInput(data: string): void {
+						list.handleInput(data);
+					},
+					render(width: number): string[] {
+						tracked.begin();
+						const lines = list.render(width);
+						celebrationPreview.setActive(tracked.selected() === CACHE_CELEBRATION_LABEL);
+						return lines;
+					},
+				};
+			});
+		},
+	});
+
 	pi.on("session_start", (_event, ctx) => {
 		cacheCelebration.dispose();
 		if (ctx.mode !== "tui") return;
 
+		// setFooter is synchronous, so the first frames render with defaults.
+		runInBackground(settingsStore.load().then((loaded) => applySettings(ctx, loaded, false)));
+
 		ctx.ui.setFooter((tui, _theme, footerData) => {
 			requestRender = () => tui.requestRender();
 			// Fullscreen mode never repaints unchanged rows; the session id line is
@@ -227,6 +388,7 @@ export default function statuslineExtension(pi: ExtensionAPI): void {
 				dispose(): void {
 					stopBranchUpdates();
 					cacheCelebration.dispose();
+					celebrationPreview.dispose();
 					fullRedraw.detach();
 					requestRender = undefined;
 				},
@@ -246,10 +408,11 @@ export default function statuslineExtension(pi: ExtensionAPI): void {
 								contextWindow: usage?.contextWindow ?? ctx.model?.contextWindow ?? 0,
 								worktrees: tracker?.getWorktrees() ?? [],
 								sessionId: ctx.sessionManager.getSessionId(),
-								cacheCelebration: cacheCelebration.snapshot(),
+								cacheCelebration: celebrationPreview.snapshot() ?? cacheCelebration.snapshot(),
 								usage: usageTracker.snapshot(),
 							},
 							width,
+							settings,
 						),
 					);
 				},
@@ -263,12 +426,14 @@ export default function statuslineExtension(pi: ExtensionAPI): void {
 		if (tracker) runInBackground(tracker.observeToolInput(event.toolName, event.input));
 	});
 	pi.on("turn_end", (event, ctx) => {
-		if (requestRender) triggerCacheCelebrationForMessage(event.message, cacheCelebration);
+		if (requestRender && settings.showCacheCelebration) {
+			triggerCacheCelebrationForMessage(event.message, cacheCelebration);
+		}
 		fullRedraw.request();
 		requestRender?.();
 		runInBackground(refreshCwdStatus(ctx));
 		if (tracker) runInBackground(tracker.refresh());
-		runInBackground(usageTracker.refresh());
+		if (settings.showUsage) runInBackground(usageTracker.refresh());
 	});
 	pi.on("model_select", () => requestRender?.());
 	pi.on("session_tree", (_event, ctx) => resetTracker(ctx));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hank-warren/pi-statusline",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "description": "Compact Pi footer statusline with Git/worktree context, token usage, and neon celebrations for exceptional prompt-cache hits.",
   "type": "module",
   "keywords": [
@@ -33,7 +33,12 @@
   "files": [
     "index.ts",
     "cache-celebration.ts",
+    "celebration-preview.ts",
+    "celebration-styles.ts",
     "redraw.ts",
+    "settings.ts",
+    "settings-menu.ts",
+    "themes.ts",
     "usage.ts",
     "worktrees.ts",
     "README.md",