@narumitw/pi-statusline 0.25.0 → 0.31.0

package/src/extension-status.ts

@@ -3,8 +3,8 @@ import { dirname, isAbsolute, join, resolve } from "node:path";
 import process from "node:process";
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { powerlineExtensionSeparator } from "./powerline.js";
 import { DEFAULT_EXTENSION_STATUS_ICONS } from "./settings.js";
-import { tokyoNightExtensionSeparator } from "./tokyo-night.js";
 import type { StatuslineConfig } from "./types.js";
 
 export type ExtensionStatusIconAliasMap = ReadonlyMap<string, readonly string[]>;
@@ -14,9 +14,15 @@ export interface ExtensionStatusRuntime {
 }
 
 const STATUSLINE_KEY = "statusline";
+const COMPATIBLE_STATUS_ICON_KEYS: Readonly<Record<string, string>> = {
+	retry: "unknown-error-retry",
+	sync: "pisync",
+	"unknown-error-retry": "retry",
+	pisync: "sync",
+};
 const EMPTY_EXTENSION_STATUS_ICON_ALIASES: ExtensionStatusIconAliasMap = new Map();
 function extensionStatusSeparator(config: StatuslineConfig, theme: Theme): string {
-	return tokyoNightExtensionSeparator(theme, config.palette);
+	return powerlineExtensionSeparator(theme, config.palettePreset);
 }
 
 export function formatExtensionStatuses(
@@ -69,12 +75,32 @@ function extensionStatusIcon(
 	extensionStatusIconAliases: ExtensionStatusIconAliasMap,
 ) {
 	if (Object.hasOwn(configuredIcons, key)) return configuredIcons[key];
+	const namespaceIcon = configuredNamespaceIcon(key, configuredIcons);
+	if (namespaceIcon !== undefined) return namespaceIcon;
+	const compatibleKey = COMPATIBLE_STATUS_ICON_KEYS[key];
+	if (compatibleKey && Object.hasOwn(configuredIcons, compatibleKey)) {
+		return configuredIcons[compatibleKey];
+	}
 	for (const alias of extensionStatusAliasesForKey(key, extensionStatusIconAliases)) {
 		if (Object.hasOwn(configuredIcons, alias)) return configuredIcons[alias];
 	}
 	return leadingIcon ?? DEFAULT_EXTENSION_STATUS_ICONS[key] ?? "🔌";
 }
 
+function configuredNamespaceIcon(
+	key: string,
+	configuredIcons: Readonly<Record<string, string>>,
+): string | undefined {
+	let match: { baseLength: number; icon: string } | undefined;
+	for (const [selector, icon] of Object.entries(configuredIcons)) {
+		if (!selector.endsWith(":*")) continue;
+		const base = selector.slice(0, -2);
+		if (!base || !key.startsWith(`${base}:`)) continue;
+		if (!match || base.length > match.baseLength) match = { baseLength: base.length, icon };
+	}
+	return match?.icon;
+}
+
 function extensionStatusAliasesForKey(
 	key: string,
 	extensionStatusIconAliases: ExtensionStatusIconAliasMap,

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from "./statusline.js";

package/src/information-profiles.ts

@@ -0,0 +1,39 @@
+import type { ConfigSegmentName, SegmentName } from "./types.js";
+
+export const INFORMATION_PROFILE_NAMES = ["minimal", "balanced", "detailed"] as const;
+export type InformationProfileName = (typeof INFORMATION_PROFILE_NAMES)[number];
+export type InformationProfile = InformationProfileName | "custom";
+
+export const INFORMATION_PROFILES: Readonly<
+	Record<InformationProfileName, readonly SegmentName[]>
+> = {
+	minimal: ["model", "cwd", "branch", "context"],
+	balanced: ["model", "thinking", "cwd", "branch", "tools", "context", "cost"],
+	detailed: [
+		"provider",
+		"model",
+		"thinking",
+		"cwd",
+		"branch",
+		"tools",
+		"context",
+		"tokens",
+		"cost",
+		"time",
+	],
+};
+
+export function inferInformationProfile(
+	segments: readonly ConfigSegmentName[],
+): InformationProfile {
+	for (const name of INFORMATION_PROFILE_NAMES) {
+		const profile = INFORMATION_PROFILES[name];
+		if (
+			segments.length === profile.length &&
+			segments.every((segment, index) => segment === profile[index])
+		) {
+			return name;
+		}
+	}
+	return "custom";
+}

package/src/powerline.ts

@@ -0,0 +1,169 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { ansiStyle } from "./ansi.js";
+import { resolvePreset } from "./presets/index.js";
+import type { BlockColors, PowerlinePreset } from "./presets/types.js";
+import {
+	LINE_BREAK_SEGMENT_NAME,
+	type PalettePreset,
+	type PowerlineBlockName,
+	type RenderItem,
+	type RenderSegment,
+	type SegmentPalette,
+	type SeparatorName,
+	type StatuslineConfig,
+} from "./types.js";
+
+interface PowerlineBlock {
+	baseBlock: PowerlineBlockName;
+	colors: BlockColors;
+	segments: RenderSegment[];
+}
+
+export function renderPowerlineStatusline(
+	width: number,
+	items: RenderItem[],
+	config: Pick<StatuslineConfig, "palettePreset" | "palette" | "density" | "separator">,
+): string {
+	if (items.length === 0 || width <= 0) return "";
+	return splitLines(items)
+		.map((segments) => fitPowerlineSegments(segments, width, config))
+		.join("\n");
+}
+
+function splitLines(items: RenderItem[]): RenderSegment[][] {
+	const lines: RenderSegment[][] = [[]];
+	for (const item of items) {
+		if (item.name === LINE_BREAK_SEGMENT_NAME) lines.push([]);
+		else lines.at(-1)?.push(item);
+	}
+	return lines;
+}
+
+const SEGMENT_RETENTION_PRIORITY: Readonly<Record<RenderSegment["name"], number>> = {
+	context: 120,
+	model: 110,
+	branch: 100,
+	tools: 90,
+	cwd: 80,
+	thinking: 70,
+	cost: 60,
+	provider: 50,
+	tokens: 40,
+	time: 30,
+	turn: 20,
+	brand: 10,
+};
+
+function fitPowerlineSegments(
+	segments: readonly RenderSegment[],
+	width: number,
+	config: Pick<StatuslineConfig, "palettePreset" | "palette" | "density" | "separator">,
+): string {
+	if (segments.length === 0) return "";
+	const fitted = [...segments];
+	while (fitted.length > 1) {
+		const rendered = joinPowerlineSegments(fitted, config);
+		if (visibleWidth(rendered) <= width) return rendered;
+		let removalIndex = 0;
+		for (let index = 1; index < fitted.length; index += 1) {
+			const candidate = fitted[index];
+			const current = fitted[removalIndex];
+			if (
+				candidate &&
+				current &&
+				SEGMENT_RETENTION_PRIORITY[candidate.name] < SEGMENT_RETENTION_PRIORITY[current.name]
+			) {
+				removalIndex = index;
+			}
+		}
+		fitted.splice(removalIndex, 1);
+	}
+	const rendered = joinPowerlineSegments(fitted, config);
+	return visibleWidth(rendered) <= width ? rendered : "";
+}
+
+export function powerlineExtensionSeparator(
+	_theme: Theme,
+	palettePreset: PalettePreset = "tokyo-night",
+): string {
+	return ansiStyle(" • ", { fg: resolvePreset(palettePreset).extensionSeparator });
+}
+
+function joinPowerlineSegments(
+	segments: RenderSegment[],
+	config: Pick<StatuslineConfig, "palettePreset" | "palette" | "density" | "separator">,
+): string {
+	const preset = resolvePreset(config.palettePreset);
+	const blocks = contiguousBlocks(segments, preset, config.palettePreset, config.palette);
+	let line = ansiStyle("░▒▓", { fg: preset.lead });
+
+	for (const [index, block] of blocks.entries()) {
+		const previous = index === 0 ? undefined : blocks[index - 1]?.colors;
+		if (previous) line += ansiStyle("", { fg: previous.bg, bg: block.colors.bg });
+		line += ansiStyle(formatBlockText(block, config), block.colors);
+	}
+
+	const lastBlock = blocks.at(-1);
+	if (lastBlock) line += ansiStyle("", { fg: lastBlock.colors.bg });
+	return line;
+}
+
+function contiguousBlocks(
+	segments: RenderSegment[],
+	preset: PowerlinePreset,
+	palettePreset: PalettePreset,
+	configuredPalette: SegmentPalette,
+): PowerlineBlock[] {
+	const blocks: PowerlineBlock[] = [];
+	const usesConfiguredColors = palettePreset === "custom";
+	for (const segment of segments) {
+		const colors = usesConfiguredColors
+			? (configuredPalette[segment.name] ?? {})
+			: preset.blocks[segment.block];
+		const previous = blocks.at(-1);
+		const matchesPrevious =
+			previous !== undefined &&
+			(usesConfiguredColors
+				? colorsEqual(previous.colors, colors)
+				: previous.baseBlock === segment.block);
+		if (matchesPrevious) previous.segments.push(segment);
+		else blocks.push({ baseBlock: segment.block, colors, segments: [segment] });
+	}
+	return blocks;
+}
+
+function colorsEqual(left: BlockColors, right: BlockColors): boolean {
+	return left.fg === right.fg && left.bg === right.bg;
+}
+
+function formatBlockText(
+	block: PowerlineBlock,
+	config: Pick<StatuslineConfig, "density" | "separator">,
+): string {
+	const texts = block.segments.map(formatSegmentText);
+	const separator = separatorText(config.separator, config.density === "cozy");
+	const leading = config.density === "cozy" ? "  " : " ";
+	const trailing = config.density === "cozy" ? " " : "";
+	return `${leading}${texts.join(separator)}${trailing}`;
+}
+
+function formatSegmentText(segment: RenderSegment): string {
+	return segment.emphasis ? `\u001b[1m${segment.text}\u001b[22m` : segment.text;
+}
+
+function separatorText(separator: SeparatorName, cozy: boolean): string {
+	const padding = cozy ? "  " : " ";
+	switch (separator) {
+		case "dot":
+			return `${padding}•${padding}`;
+		case "bar":
+			return `${padding}│${padding}`;
+		case "powerline":
+			return `${padding}${padding}`;
+		case "round":
+			return `${padding}❯${padding}`;
+		case "none":
+			return padding;
+	}
+}

package/src/presets/candy.ts

@@ -0,0 +1,9 @@
+import { createRampPreset } from "./create-ramp.js";
+
+export const CANDY_PRESET = createRampPreset([
+	"#f5c2e7",
+	"#cba6f7",
+	"#89b4fa",
+	"#745f9a",
+	"#403a5c",
+]);

package/src/presets/create-ramp.ts

@@ -0,0 +1,41 @@
+import type { PowerlineBlockName } from "../types.js";
+import type { PowerlinePreset } from "./types.js";
+
+const BLOCK_NAMES: PowerlineBlockName[] = ["header", "directory", "git", "runtime", "meter"];
+
+type PaletteRamp = readonly [string, string, string, string, string];
+
+export function createRampPreset(backgrounds: PaletteRamp): PowerlinePreset {
+	return {
+		lead: backgrounds[0],
+		blocks: Object.fromEntries(
+			BLOCK_NAMES.map((block, index) => {
+				const background = backgrounds[index];
+				return [block, { fg: contrastColor(background), bg: background }];
+			}),
+		) as Record<PowerlineBlockName, { fg: string; bg: string }>,
+		extensionSeparator: backgrounds[2],
+	};
+}
+
+function contrastColor(hex: string): string {
+	const background = relativeLuminance(hex);
+	const dark = relativeLuminance("#090c0c");
+	const light = relativeLuminance("#f0f0f0");
+	return contrastRatio(background, dark) >= contrastRatio(background, light)
+		? "#090c0c"
+		: "#f0f0f0";
+}
+
+function contrastRatio(left: number, right: number): number {
+	return (Math.max(left, right) + 0.05) / (Math.min(left, right) + 0.05);
+}
+
+function relativeLuminance(hex: string): number {
+	const normalized = hex.slice(1);
+	const channels = [0, 2, 4].map((offset) => {
+		const value = Number.parseInt(normalized.slice(offset, offset + 2), 16) / 255;
+		return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+	});
+	return 0.2126 * (channels[0] ?? 0) + 0.7152 * (channels[1] ?? 0) + 0.0722 * (channels[2] ?? 0);
+}

package/src/presets/custom.ts

@@ -0,0 +1,11 @@
+import type { PowerlinePreset } from "./types.js";
+
+export const CUSTOM_PRESET: PowerlinePreset = {
+	blocks: {
+		header: {},
+		directory: {},
+		git: {},
+		runtime: {},
+		meter: {},
+	},
+};

package/src/presets/forest.ts

@@ -0,0 +1,9 @@
+import { createRampPreset } from "./create-ramp.js";
+
+export const FOREST_PRESET = createRampPreset([
+	"#a7c080",
+	"#83c092",
+	"#5f9f75",
+	"#3f6f55",
+	"#293f35",
+]);

package/src/presets/index.ts

@@ -0,0 +1,54 @@
+import {
+	type PaletteName,
+	type PalettePreset,
+	type PowerlineBlockName,
+	SEGMENT_NAMES,
+	type SegmentName,
+	type SegmentPalette,
+} from "../types.js";
+import { CANDY_PRESET } from "./candy.js";
+import { CUSTOM_PRESET } from "./custom.js";
+import { FOREST_PRESET } from "./forest.js";
+import { MONO_PRESET } from "./mono.js";
+import { NEON_PRESET } from "./neon.js";
+import { OCEAN_PRESET } from "./ocean.js";
+import { SUNSET_PRESET } from "./sunset.js";
+import { TOKYO_NIGHT_PRESET } from "./tokyo-night.js";
+import type { PowerlinePreset } from "./types.js";
+
+const PRESETS = {
+	"tokyo-night": TOKYO_NIGHT_PRESET,
+	ocean: OCEAN_PRESET,
+	sunset: SUNSET_PRESET,
+	forest: FOREST_PRESET,
+	candy: CANDY_PRESET,
+	neon: NEON_PRESET,
+	mono: MONO_PRESET,
+	custom: CUSTOM_PRESET,
+} satisfies Record<PalettePreset, PowerlinePreset>;
+
+const SEGMENT_BLOCKS: Record<SegmentName, PowerlineBlockName> = {
+	brand: "header",
+	provider: "header",
+	model: "header",
+	thinking: "header",
+	cwd: "directory",
+	branch: "git",
+	tools: "runtime",
+	context: "runtime",
+	tokens: "runtime",
+	cost: "meter",
+	time: "meter",
+	turn: "meter",
+};
+
+export function resolvePreset(preset: PalettePreset): PowerlinePreset {
+	return PRESETS[preset];
+}
+
+export function segmentPaletteForPreset(preset: PaletteName): SegmentPalette {
+	const blocks = PRESETS[preset].blocks;
+	return Object.fromEntries(
+		SEGMENT_NAMES.map((name) => [name, { ...blocks[SEGMENT_BLOCKS[name]] }]),
+	) as SegmentPalette;
+}

package/src/presets/mono.ts

@@ -0,0 +1,9 @@
+import { createRampPreset } from "./create-ramp.js";
+
+export const MONO_PRESET = createRampPreset([
+	"#d4d4d4",
+	"#a3a3a3",
+	"#686868",
+	"#404040",
+	"#262626",
+]);

package/src/presets/neon.ts

@@ -0,0 +1,9 @@
+import { createRampPreset } from "./create-ramp.js";
+
+export const NEON_PRESET = createRampPreset([
+	"#39ff14",
+	"#00f5ff",
+	"#ff4fd8",
+	"#7a2cf3",
+	"#29134f",
+]);

package/src/presets/ocean.ts

@@ -0,0 +1,9 @@
+import { createRampPreset } from "./create-ramp.js";
+
+export const OCEAN_PRESET = createRampPreset([
+	"#7dcfff",
+	"#4f9fba",
+	"#2d6f88",
+	"#23475b",
+	"#182b3a",
+]);

package/src/presets/sunset.ts

@@ -0,0 +1,9 @@
+import { createRampPreset } from "./create-ramp.js";
+
+export const SUNSET_PRESET = createRampPreset([
+	"#ffcf70",
+	"#f59e6f",
+	"#dc718a",
+	"#8f5b78",
+	"#493447",
+]);

package/src/presets/tokyo-night.ts

@@ -0,0 +1,13 @@
+import type { PowerlinePreset } from "./types.js";
+
+export const TOKYO_NIGHT_PRESET: PowerlinePreset = {
+	lead: "#a3aed2",
+	blocks: {
+		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",
+};

package/src/presets/types.ts

@@ -0,0 +1,12 @@
+import type { PowerlineBlockName } from "../types.js";
+
+export interface BlockColors {
+	fg?: string;
+	bg?: string;
+}
+
+export interface PowerlinePreset {
+	lead?: string;
+	blocks: Record<PowerlineBlockName, BlockColors>;
+	extensionSeparator?: string;
+}

package/src/render.ts

@@ -12,22 +12,20 @@ import {
 	wrapExtensionStatusline,
 } from "./extension-status.js";
 import { formatGitBranchValue, type GitStatusSummary } from "./git-status.js";
-import { renderTokyoNightStatusline } from "./tokyo-night.js";
+import { renderPowerlineStatusline } from "./powerline.js";
 import {
 	LINE_BREAK_SEGMENT_NAME,
+	type PowerlineBlockName,
 	type RenderItem,
 	type RenderSegment,
 	type SegmentName,
 	type StatuslineConfig,
-	type TokyoNightBlockName,
 } from "./types.js";
 
 type ThinkingLevel = ReturnType<ExtensionAPI["getThinkingLevel"]>;
 export interface RuntimeState extends ExtensionStatusRuntime {
 	turnCount: number;
 	activeTools: Map<string, number>;
-	lastTool?: string;
-	lastCompletedTool?: string;
 	isStreaming: boolean;
 	thinkingLevel: ThinkingLevel;
 	gitStatus?: GitStatusSummary;
@@ -50,19 +48,32 @@ export function renderStatusline(
 ): string {
 	if (width <= 0) return "";
 
-	const segments = config.segments
-		.map((name): RenderItem | undefined =>
-			name === LINE_BREAK_SEGMENT_NAME
-				? { name: LINE_BREAK_SEGMENT_NAME }
-				: buildSegment(name, ctx, footerData, config, runtime),
-		)
-		.filter(
-			(segment): segment is RenderItem =>
-				segment !== undefined &&
-				(segment.name === LINE_BREAK_SEGMENT_NAME || segment.text.length > 0),
-		);
+	const rows: Array<{ configuredSegments: number; segments: RenderSegment[] }> = [
+		{ configuredSegments: 0, segments: [] },
+	];
+	for (const name of config.segments) {
+		if (name === LINE_BREAK_SEGMENT_NAME) {
+			rows.push({ configuredSegments: 0, segments: [] });
+			continue;
+		}
+
+		const row = rows.at(-1);
+		if (!row) continue;
+		row.configuredSegments += 1;
+		const rendered = buildSegment(name, ctx, footerData, config, runtime);
+		if (rendered && rendered.text.length > 0) row.segments.push(rendered);
+	}
 
-	return renderTokyoNightStatusline(width, segments, config);
+	const segments: RenderItem[] = [];
+	const renderedRows = rows.filter(
+		(row) => row.configuredSegments === 0 || row.segments.length > 0,
+	);
+	for (const [index, row] of renderedRows.entries()) {
+		if (index > 0) segments.push({ name: LINE_BREAK_SEGMENT_NAME });
+		segments.push(...row.segments);
+	}
+
+	return renderPowerlineStatusline(width, segments, config);
 }
 
 export function renderExtensionStatusline(
@@ -121,8 +132,10 @@ function buildSegment(
 		}
 		case "cwd":
 			return segment(name, basename(ctx.cwd) || ctx.cwd, config, "accent", "directory");
-		case "tools":
-			return segment(name, formatToolActivity(runtime), config, "accent", "runtime");
+		case "tools": {
+			const activity = formatToolActivity(runtime);
+			return activity ? segment(name, activity, config, "accent", "runtime") : undefined;
+		}
 		case "context": {
 			const usage = ctx.getContextUsage();
 			const value =
@@ -161,7 +174,7 @@ function segment(
 	value: string,
 	config: StatuslineConfig,
 	color: RenderSegment["color"],
-	block: TokyoNightBlockName,
+	block: PowerlineBlockName,
 	emphasis = false,
 ): RenderSegment {
 	return { name, text: formatConfiguredSegment(name, value, config), color, block, emphasis };
@@ -204,7 +217,7 @@ export function contextColor(percent: number | null | undefined): ThemeColor {
 	return "success";
 }
 
-export function formatToolActivity(runtime: RuntimeState): string {
+export function formatToolActivity(runtime: RuntimeState): string | undefined {
 	const active = [...runtime.activeTools.entries()];
 	if (active.length > 0) {
 		const [name, count] = active[0] ?? ["tool", 1];
@@ -212,9 +225,7 @@ export function formatToolActivity(runtime: RuntimeState): string {
 		return `⚙ ${name}${suffix}`;
 	}
 
-	if (runtime.isStreaming) return "💭 thinking";
-	if (runtime.lastCompletedTool) return `✅ ${runtime.lastCompletedTool}`;
-	return "💤 idle";
+	return runtime.isStreaming ? "💭 thinking" : undefined;
 }
 
 export function prLinkFromStatuses(statuses: ReadonlyMap<string, string>): string | undefined {