@narumitw/pi-statusline 0.1.27 → 0.1.29

package/README.md

@@ -8,14 +8,14 @@ Use it to monitor model selection, thinking level, git branch, working directory
 
 ## ✨ Features
 
-- Replaces the default Pi footer with a compact rich statusline.
+- Replaces the default Pi footer with a compact preset-based statusline.
 - Shows model, thinking level, git branch, project directory, active tool, context usage, tokens, cost, and clock.
 - Displays compact statuses published through Pi's generic extension status API.
 - Preserves extension-provided status icons when the status text starts with one.
 - Warns when the same extension package is installed from multiple sources.
-- Uses emoji-labeled segments for readability.
+- Uses emoji-labeled segments for readability in both classic and Tokyo Night presets.
 - Adapts to terminal width and truncates safely.
-- Requires no configuration.
+- Requires no configuration, with optional preset selection through `PI_STATUSLINE_PRESET`.
 
 ## 📦 Install
 
@@ -35,22 +35,38 @@ Try this package locally from the repository root:
 pi -e ./extensions/pi-statusline
 ```
 
+## 🎨 Presets
+
+`pi-statusline` supports presets through the `PI_STATUSLINE_PRESET` environment variable:
+
+```bash
+PI_STATUSLINE_PRESET=tokyo-night pi
+PI_STATUSLINE_PRESET=classic pi
+```
+
+Supported presets:
+
+- `tokyo-night` — the default, inspired by the [Starship Tokyo Night preset](https://starship.rs/presets/tokyo-night), using `░▒▓` / `` powerline blocks and the Tokyo Night color ramp.
+- `classic` — a compact Pi-themed statusline with left-aligned `•` separators.
+
+Unset or invalid values fall back to `tokyo-night`. Both presets keep the same emoji-labeled information and preserve extension-provided status icons.
+
 ## 👀 What it shows
 
-The default statusline includes:
+The default `tokyo-night` statusline uses a Starship-inspired `░▒▓` / `` powerline layout and includes:
 
 - `π` brand marker.
 - 🤖 current model.
 - 🧠 thinking level.
-- 🌿 git branch.
 - 📁 current project directory.
-- 🔧 active or last tool.
-- 📊 context usage percentage.
+- 🌿 git branch.
+- ⚙ active or last tool.
+- 🪟 context usage percentage.
 - 🔢 token totals.
-- 💰 estimated cost.
+- 💸 estimated cost.
 - 🕒 clock.
 
-Statuses from other extensions appear on their own compact line below the main statusline and are separated with ``.
+Statuses from other extensions appear on their own compact line below the main statusline and use each preset's separator.
 
 `pi-statusline` is extension-agnostic: it consumes Pi's generic extension status API and does not import or depend on status-producing extensions. If an extension wants a custom icon, it should include that icon at the start of its status text, for example `ctx.ui.setStatus("goal", "🎯 active")`. Statuses without a leading icon use the generic `🔌` icon.
 
@@ -76,6 +92,11 @@ Examples:
 extensions/pi-statusline/
 ├── src/
 │   └── statusline.ts
+├── presets/
+│   ├── ansi.ts
+│   ├── classic.ts
+│   ├── tokyo-night.ts
+│   └── types.ts
 ├── README.md
 ├── LICENSE
 ├── tsconfig.json

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-statusline",
-	"version": "0.1.27",
+	"version": "0.1.29",
 	"description": "Pi extension that replaces the footer with an information-rich statusline.",
 	"type": "module",
 	"license": "MIT",
@@ -14,6 +14,7 @@
 	],
 	"files": [
 		"src",
+		"presets",
 		"README.md",
 		"LICENSE"
 	],

package/presets/ansi.ts

@@ -0,0 +1,26 @@
+export function ansiStyle(text: string, colors: { fg?: string; bg?: string }): string {
+	const codes = [
+		colors.fg ? truecolorCode("38", colors.fg) : undefined,
+		colors.bg ? truecolorCode("48", colors.bg) : undefined,
+	].filter((code): code is string => code !== undefined);
+	if (codes.length === 0) return text;
+	return `\u001b[${codes.join(";")}m${text}\u001b[0m`;
+}
+
+export function ansiFg(hex: string, text: string): string {
+	return ansiStyle(text, { fg: hex });
+}
+
+function truecolorCode(prefix: "38" | "48", hex: string): string {
+	const { red, green, blue } = hexToRgb(hex);
+	return `${prefix};2;${red};${green};${blue}`;
+}
+
+function hexToRgb(hex: string): { red: number; green: number; blue: number } {
+	const normalized = hex.replace(/^#/, "");
+	return {
+		red: Number.parseInt(normalized.slice(0, 2), 16),
+		green: Number.parseInt(normalized.slice(2, 4), 16),
+		blue: Number.parseInt(normalized.slice(4, 6), 16),
+	};
+}

package/presets/classic.ts

@@ -0,0 +1,55 @@
+import type { Theme, ThemeColor } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import type { RenderSegment, SeparatorName, StatuslineConfig } from "./types.js";
+
+export function renderClassicStatusline(
+	width: number,
+	segments: RenderSegment[],
+	theme: Theme,
+	config: StatuslineConfig,
+): string {
+	return truncateToWidth(joinSegments(segments, theme, config), width, "");
+}
+
+export function classicExtensionSeparator(theme: Theme): string {
+	return theme.fg("dim", " • ");
+}
+
+function joinSegments(segments: RenderSegment[], theme: Theme, config: StatuslineConfig): string {
+	const separator = separatorText(config.separator);
+	return segments
+		.map((segment, index) => styleSegment(segment, index, theme, config))
+		.join(theme.fg("dim", separator));
+}
+
+function styleSegment(
+	segment: RenderSegment,
+	index: number,
+	theme: Theme,
+	config: StatuslineConfig,
+): string {
+	const padding = config.density === "cozy" ? " " : "";
+	const text = `${padding}${segment.text}${padding}`;
+	const styledText = segment.emphasis ? theme.bold(text) : text;
+
+	if (config.palette === "mono") {
+		return index === 0 ? theme.fg("muted", styledText) : theme.fg("dim", styledText);
+	}
+
+	return theme.fg(segment.color as ThemeColor, styledText);
+}
+
+function separatorText(separator: SeparatorName): string {
+	switch (separator) {
+		case "powerline":
+			return "  ";
+		case "bar":
+			return " │ ";
+		case "round":
+			return " ❯ ";
+		case "none":
+			return " ";
+		case "dot":
+			return " • ";
+	}
+}

package/presets/tokyo-night.ts

@@ -0,0 +1,84 @@
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import { ansiFg, ansiStyle } from "./ansi.js";
+import type { RenderSegment, TokyoNightBlockName } from "./types.js";
+
+interface TokyoNightBlock {
+	name: TokyoNightBlockName;
+	segments: RenderSegment[];
+}
+
+interface BlockColors {
+	fg: string;
+	bg: string;
+}
+
+const TOKYO_NIGHT_COLORS = {
+	lead: "#a3aed2",
+	header: { fg: "#090c0c", bg: "#a3aed2" },
+	directory: { fg: "#e3e5e5", bg: "#769ff0" },
+	git: { fg: "#769ff0", bg: "#394260" },
+	runtime: { fg: "#769ff0", bg: "#212736" },
+	meter: { fg: "#a0a9cb", bg: "#1d2230" },
+	extensionSeparator: "#394260",
+} as const satisfies Record<string, string | BlockColors>;
+
+const TOKYO_NIGHT_BLOCK_ORDER: TokyoNightBlockName[] = [
+	"header",
+	"directory",
+	"git",
+	"runtime",
+	"meter",
+];
+
+export function renderTokyoNightStatusline(width: number, segments: RenderSegment[]): string {
+	return truncateToWidth(joinTokyoNightSegments(segments), width, "");
+}
+
+export function tokyoNightExtensionSeparator(_theme: Theme): string {
+	return ansiFg(TOKYO_NIGHT_COLORS.extensionSeparator, "  ");
+}
+
+function joinTokyoNightSegments(segments: RenderSegment[]): string {
+	const blocks = groupTokyoNightBlocks(segments);
+	let line = ansiFg(TOKYO_NIGHT_COLORS.lead, "░▒▓");
+
+	for (const [index, block] of blocks.entries()) {
+		const colors = getTokyoNightBlockColors(block.name);
+		const previous =
+			index === 0 ? undefined : getTokyoNightBlockColors(blocks[index - 1]?.name ?? "header");
+		if (previous) line += ansiStyle("", { fg: previous.bg, bg: colors.bg });
+		line += ansiStyle(formatTokyoNightBlockText(block), colors);
+	}
+
+	const lastBlock = blocks.at(-1);
+	if (lastBlock) line += ansiFg(getTokyoNightBlockColors(lastBlock.name).bg, "");
+
+	return line;
+}
+
+function groupTokyoNightBlocks(segments: RenderSegment[]): TokyoNightBlock[] {
+	const blocksByName = new Map<TokyoNightBlockName, RenderSegment[]>();
+	for (const segment of segments) {
+		const blockSegments = blocksByName.get(segment.block) ?? [];
+		blockSegments.push(segment);
+		blocksByName.set(segment.block, blockSegments);
+	}
+
+	return TOKYO_NIGHT_BLOCK_ORDER.flatMap((name) => {
+		const blockSegments = blocksByName.get(name);
+		return blockSegments ? [{ name, segments: blockSegments }] : [];
+	});
+}
+
+function formatTokyoNightBlockText(block: TokyoNightBlock): string {
+	return ` ${block.segments.map(formatTokyoNightSegmentText).join(" ")}`;
+}
+
+function formatTokyoNightSegmentText(segment: RenderSegment): string {
+	return segment.emphasis ? `\u001b[1m${segment.text}\u001b[22m` : segment.text;
+}
+
+function getTokyoNightBlockColors(block: TokyoNightBlockName): BlockColors {
+	return TOKYO_NIGHT_COLORS[block];
+}

package/presets/types.ts

@@ -0,0 +1,37 @@
+import type { ThemeColor } from "@mariozechner/pi-coding-agent";
+
+export type SegmentName =
+	| "brand"
+	| "model"
+	| "thinking"
+	| "cwd"
+	| "branch"
+	| "tools"
+	| "context"
+	| "tokens"
+	| "cost"
+	| "time"
+	| "turn";
+
+export type StatuslinePresetName = "classic" | "tokyo-night";
+export type TokyoNightBlockName = "header" | "directory" | "git" | "runtime" | "meter";
+export type PaletteName = "ocean" | "sunset" | "forest" | "candy" | "neon" | "mono";
+export type Density = "compact" | "cozy";
+export type SeparatorName = "dot" | "bar" | "powerline" | "round" | "none";
+
+export interface StatuslineConfig {
+	preset: StatuslinePresetName;
+	palette: PaletteName;
+	density: Density;
+	separator: SeparatorName;
+	showLabels: boolean;
+	segments: SegmentName[];
+}
+
+export interface RenderSegment {
+	name: SegmentName;
+	text: string;
+	color: ThemeColor;
+	block: TokyoNightBlockName;
+	emphasis?: boolean;
+}

package/src/statusline.ts

@@ -8,35 +8,20 @@ import type {
 	Theme,
 	ThemeColor,
 } from "@mariozechner/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
-
-type SegmentName =
-	| "brand"
-	| "model"
-	| "thinking"
-	| "branch"
-	| "cwd"
-	| "tools"
-	| "context"
-	| "tokens"
-	| "cost"
-	| "time"
-	| "turn";
-
-type PaletteName = "ocean" | "sunset" | "forest" | "candy" | "neon" | "mono";
-type Density = "compact" | "cozy";
-type SeparatorName = "dot" | "bar" | "powerline" | "round" | "none";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import { classicExtensionSeparator, renderClassicStatusline } from "../presets/classic.js";
+import { renderTokyoNightStatusline, tokyoNightExtensionSeparator } from "../presets/tokyo-night.js";
+import type {
+	PaletteName,
+	RenderSegment,
+	SegmentName,
+	StatuslineConfig,
+	StatuslinePresetName,
+	TokyoNightBlockName,
+} from "../presets/types.js";
 
 type ThinkingLevel = ReturnType<ExtensionAPI["getThinkingLevel"]>;
 
-interface StatuslineConfig {
-	palette: PaletteName;
-	density: Density;
-	separator: SeparatorName;
-	showLabels: boolean;
-	segments: SegmentName[];
-}
-
 interface RuntimeState {
 	turnCount: number;
 	activeTools: Map<string, number>;
@@ -54,21 +39,15 @@ interface TokenTotals {
 	cost: number;
 }
 
-interface RenderSegment {
-	name: SegmentName;
-	text: string;
-	color: ThemeColor;
-	emphasis?: boolean;
-}
-
 const STATUSLINE_KEY = "statusline";
+const DEFAULT_PRESET: StatuslinePresetName = "tokyo-night";
 
 const DEFAULT_SEGMENTS: SegmentName[] = [
 	"brand",
 	"model",
 	"thinking",
-	"branch",
 	"cwd",
+	"branch",
 	"tools",
 	"context",
 	"tokens",
@@ -76,8 +55,6 @@ const DEFAULT_SEGMENTS: SegmentName[] = [
 	"time",
 ];
 
-const RIGHT_SEGMENTS = new Set<SegmentName>(["context", "tokens", "cost", "time", "turn"]);
-
 const PALETTES: Record<PaletteName, ThemeColor[]> = {
 	ocean: ["accent", "muted", "success", "warning"],
 	sunset: ["warning", "accent", "success", "muted"],
@@ -116,7 +93,13 @@ export default function statusline(pi: ExtensionAPI) {
 				invalidate() {},
 				render(width: number): string[] {
 					const lines = [renderStatusline(width, ctx, footerData, theme, config, runtime)];
-					const extensionStatusLine = renderExtensionStatusline(width, footerData, theme, runtime);
+					const extensionStatusLine = renderExtensionStatusline(
+						width,
+						footerData,
+						theme,
+						config,
+						runtime,
+					);
 					if (extensionStatusLine) lines.push(extensionStatusLine);
 					return lines;
 				},
@@ -184,14 +167,21 @@ export default function statusline(pi: ExtensionAPI) {
 
 function createDefaultConfig(): StatuslineConfig {
 	return {
+		preset: readStatuslinePreset(),
 		palette: "candy",
 		density: "compact",
-		separator: "powerline",
+		separator: "dot",
 		showLabels: false,
 		segments: [...DEFAULT_SEGMENTS],
 	};
 }
 
+function readStatuslinePreset(): StatuslinePresetName {
+	const preset = process.env.PI_STATUSLINE_PRESET?.trim().toLowerCase();
+	if (preset === "classic" || preset === "tokyo-night") return preset;
+	return DEFAULT_PRESET;
+}
+
 function renderStatusline(
 	width: number,
 	ctx: ExtensionContext,
@@ -208,38 +198,24 @@ function renderStatusline(
 			(segment): segment is RenderSegment => segment !== undefined && segment.text.length > 0,
 		);
 
-	const left = joinSegments(
-		segments.filter((segment) => !RIGHT_SEGMENTS.has(segment.name)),
-		theme,
-		config,
-	);
-	const right = joinSegments(
-		segments.filter((segment) => RIGHT_SEGMENTS.has(segment.name)),
-		theme,
-		config,
-	);
-
-	if (!left && !right) return truncateToWidth(theme.fg("dim", "pi-statusline"), width);
-	if (!right) return truncateToWidth(left, width);
-	if (!left) return truncateToWidth(right, width);
-
-	const rightWidth = visibleWidth(right);
-	if (rightWidth + 1 >= width) return truncateToWidth(right, width);
+	if (segments.length === 0) return truncateToWidth(theme.fg("dim", "pi-statusline"), width);
 
-	const leftWidth = Math.max(0, width - rightWidth - 1);
-	const trimmedLeft = truncateToWidth(left, leftWidth, "…");
-	const padding = " ".repeat(Math.max(1, width - visibleWidth(trimmedLeft) - rightWidth));
-
-	return truncateToWidth(`${trimmedLeft}${padding}${right}`, width, "");
+	switch (config.preset) {
+		case "classic":
+			return renderClassicStatusline(width, segments, theme, config);
+		case "tokyo-night":
+			return renderTokyoNightStatusline(width, segments);
+	}
 }
 
 function renderExtensionStatusline(
 	width: number,
 	footerData: ReadonlyFooterDataProvider,
 	theme: Theme,
+	config: StatuslineConfig,
 	runtime: RuntimeState,
 ): string | undefined {
-	const status = formatExtensionStatuses(footerData.getExtensionStatuses(), theme, runtime);
+	const status = formatExtensionStatuses(footerData.getExtensionStatuses(), theme, config, runtime);
 	if (!status) return undefined;
 
 	return truncateToWidth(status, width, "");
@@ -257,98 +233,68 @@ function buildSegment(
 
 	switch (name) {
 		case "brand":
-			return { name, text: "π", color: "accent", emphasis: true };
+			return segment(name, "π", "accent", "header", true);
 		case "model":
-			return labeled(name, `🤖 ${shortenModel(ctx.model?.id ?? "no-model")}`, color, config);
+			return segment(name, `🤖 ${shortenModel(ctx.model?.id ?? "no-model")}`, color, "header");
 		case "thinking":
-			return labeled(
+			return segment(
 				name,
 				`🧠 ${runtime.thinkingLevel}`,
 				thinkingColor(runtime.thinkingLevel),
-				config,
+				"header",
 			);
 		case "branch":
-			return labeled(name, `🌿 ${footerData.getGitBranch() ?? "no-git"}`, color, config);
+			return segment(name, `🌿 ${footerData.getGitBranch() ?? "no-git"}`, color, "git");
 		case "cwd":
-			return labeled(name, `📁 ${basename(ctx.cwd) || ctx.cwd}`, color, config);
+			return segment(name, `📁 ${basename(ctx.cwd) || ctx.cwd}`, color, "directory");
 		case "tools":
-			return labeled(name, formatToolActivity(runtime), color, config);
+			return segment(name, formatToolActivity(runtime), color, "runtime");
 		case "context": {
 			const usage = ctx.getContextUsage();
 			const value =
 				usage?.percent === null || usage?.percent === undefined
 					? "🪟 ctx ?"
 					: `🪟 ctx ${usage.percent.toFixed(0)}%`;
-			return labeled(name, value, contextColor(usage?.percent), config);
+			return segment(name, value, contextColor(usage?.percent), "runtime");
 		}
 		case "tokens": {
 			const totals = getTokenTotals(ctx);
 			if (totals.input === 0 && totals.output === 0)
-				return labeled(name, "🔢 tok 0", color, config);
-			return labeled(
+				return segment(name, "🔢 tok 0", color, "runtime");
+			return segment(
 				name,
 				`🔢 ↑${formatCount(totals.input)} ↓${formatCount(totals.output)}`,
 				color,
-				config,
+				"runtime",
 			);
 		}
 		case "cost": {
 			const totals = getTokenTotals(ctx);
-			return labeled(name, `💸 $${totals.cost.toFixed(totals.cost >= 1 ? 2 : 3)}`, color, config);
+			return segment(name, `💸 $${totals.cost.toFixed(totals.cost >= 1 ? 2 : 3)}`, color, "meter");
 		}
 		case "time":
-			return labeled(name, `🕒 ${formatTime()}`, color, config);
+			return segment(name, `🕒 ${formatTime()}`, color, "meter");
 		case "turn":
-			return labeled(name, `🔁 #${runtime.turnCount}`, color, config);
+			return segment(name, `🔁 #${runtime.turnCount}`, color, "meter");
 	}
 }
 
-function labeled(
+function segment(
 	name: SegmentName,
-	value: string,
+	text: string,
 	color: ThemeColor,
-	config: StatuslineConfig,
+	block: TokyoNightBlockName,
+	emphasis = false,
 ): RenderSegment {
-	if (!config.showLabels || name === "brand") return { name, text: value, color };
-	return { name, text: `${name} ${value}`, color };
+	return { name, text, color, block, emphasis };
 }
 
-function joinSegments(segments: RenderSegment[], theme: Theme, config: StatuslineConfig): string {
-	const separator = separatorText(config.separator);
-	return segments
-		.map((segment, index) => styleSegment(segment, index, theme, config))
-		.join(theme.fg("dim", separator));
-}
-
-function styleSegment(
-	segment: RenderSegment,
-	index: number,
-	theme: Theme,
-	config: StatuslineConfig,
-): string {
-	const padding = config.density === "cozy" ? " " : "";
-	const text = `${padding}${segment.text}${padding}`;
-	const styledText = segment.emphasis ? theme.bold(text) : text;
-
-	if (config.palette === "mono") {
-		return index === 0 ? theme.fg("muted", styledText) : theme.fg("dim", styledText);
-	}
-
-	return theme.fg(segment.color, styledText);
-}
-
-function separatorText(separator: SeparatorName): string {
-	switch (separator) {
-		case "powerline":
-			return "  ";
-		case "bar":
-			return " │ ";
-		case "round":
-			return " ❯ ";
-		case "none":
-			return " ";
-		case "dot":
-			return " • ";
+function extensionStatusSeparator(presetName: StatuslinePresetName, theme: Theme): string {
+	switch (presetName) {
+		case "classic":
+			return classicExtensionSeparator(theme);
+		case "tokyo-night":
+			return tokyoNightExtensionSeparator(theme);
 	}
 }
 
@@ -397,9 +343,10 @@ function formatToolActivity(runtime: RuntimeState): string {
 function formatExtensionStatuses(
 	statuses: ReadonlyMap<string, string>,
 	theme: Theme,
+	config: StatuslineConfig,
 	runtime: RuntimeState,
 ): string {
-	const separator = theme.fg("dim", "  ");
+	const separator = extensionStatusSeparator(config.preset, theme);
 	const visibleStatuses = [
 		...formatDuplicateExtensionStatus(runtime, theme),
 		...[...statuses.entries()]
@@ -421,7 +368,8 @@ function formatExtensionStatus(key: string, value: string, theme: Theme): string
 function formatDuplicateExtensionStatus(runtime: RuntimeState, theme: Theme): string[] {
 	if (runtime.duplicateExtensions.length === 0) return [];
 	const names = runtime.duplicateExtensions.slice(0, 2).join(", ");
-	const suffix = runtime.duplicateExtensions.length > 2 ? ` +${runtime.duplicateExtensions.length - 2}` : "";
+	const suffix =
+		runtime.duplicateExtensions.length > 2 ? ` +${runtime.duplicateExtensions.length - 2}` : "";
 	return [`${theme.fg("warning", "⚠️")} ${theme.fg("warning", `dup ${names}${suffix}`)}`];
 }
 
@@ -494,7 +442,11 @@ function readPackageSources(settingsFile: string): string[] {
 		return (settings.packages ?? [])
 			.map((entry) => {
 				if (typeof entry === "string") return entry;
-				if (entry && typeof entry === "object" && typeof (entry as { source?: unknown }).source === "string") {
+				if (
+					entry &&
+					typeof entry === "object" &&
+					typeof (entry as { source?: unknown }).source === "string"
+				) {
 					return (entry as { source: string }).source;
 				}
 				return undefined;