@narumitw/pi-statusline 0.20.0 → 0.23.0

package/src/statusline.ts

@@ -1,21 +1,24 @@
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import {
+	type ExtensionAPI,
+	type ExtensionContext,
+	getAgentDir,
+} from "@earendil-works/pi-coding-agent";
+import { registerStatuslineCommand } from "./commands.js";
 import {
 	buildExtensionStatusIconAliases,
 	type ExtensionStatusIconAliasMap,
 	findDuplicateExtensions,
 	readInstalledExtensionPackages,
 } from "./extension-status.js";
+import { type GitStatusSummary, gitStatusSummaryEqual, readGitStatus } from "./git-status.js";
+import { type RuntimeState, renderExtensionStatusline, renderStatusline } from "./render.js";
 import {
-	gitStatusSummaryEqual,
-	readGitStatus,
-	type GitStatusSummary,
-} from "./git-status.js";
-import {
-	renderExtensionStatusline,
-	renderStatusline,
-	type RuntimeState,
-} from "./render.js";
-import { consumeStatuslineSettingsNotice, createDefaultConfig } from "./settings.js";
+	consumeStatuslineSettingsNotice,
+	type LoadedStatuslineSettings,
+	loadOrCreateStatuslineSettings,
+	loadStatuslineSettings,
+	settingsFilePath,
+} from "./settings.js";
 
 const STATUSLINE_KEY = "statusline";
 const GIT_STATUS_REFRESH_INTERVAL_MS = 30_000;
@@ -23,7 +26,7 @@ const GIT_STATUS_EVENT_DEBOUNCE_MS = 250;
 const EMPTY_EXTENSION_STATUS_ICON_ALIASES: ExtensionStatusIconAliasMap = new Map();
 
 export default function statusline(pi: ExtensionAPI) {
-	const config = createDefaultConfig();
+	let loaded: LoadedStatuslineSettings | undefined;
 	const runtime: RuntimeState = {
 		turnCount: 0,
 		activeTools: new Map(),
@@ -38,9 +41,7 @@ export default function statusline(pi: ExtensionAPI) {
 	let activeGitStatusTarget: { cwd: string; generation: number } | undefined;
 	let gitStatusRefreshInFlight = false;
 	let gitStatusDebounceTimer: ReturnType<typeof setTimeout> | undefined;
-	let pendingGitStatusRefresh:
-		| { cwd: string; generation: number; requestId: number }
-		| undefined;
+	let pendingGitStatusRefresh: { cwd: string; generation: number; requestId: number } | undefined;
 
 	const refresh = () => runtime.requestRender?.();
 
@@ -116,7 +117,7 @@ export default function statusline(pi: ExtensionAPI) {
 		runtime.duplicateExtensions = [];
 		runtime.extensionStatusIconAliases = EMPTY_EXTENSION_STATUS_ICON_ALIASES;
 		ctx.ui.setStatus(STATUSLINE_KEY, undefined);
-		if (!activeGitStatusTarget) return;
+		if (!activeGitStatusTarget || !loaded) return;
 		const installedPackages = readInstalledExtensionPackages(cwd);
 		runtime.duplicateExtensions = findDuplicateExtensions(installedPackages);
 		runtime.extensionStatusIconAliases = buildExtensionStatusIconAliases(installedPackages);
@@ -152,8 +153,13 @@ export default function statusline(pi: ExtensionAPI) {
 				},
 				invalidate() {},
 				render(width: number): string[] {
-					const lines = [renderStatusline(width, ctx, footerData, theme, config, runtime)];
-					lines.push(...renderExtensionStatusline(width, footerData, theme, config, runtime));
+					if (!loaded) return [];
+					const config = loaded.config;
+					const mainLine = renderStatusline(width, ctx, footerData, theme, config, runtime);
+					const lines = mainLine ? mainLine.split("\n") : [];
+					lines.push(
+						...renderExtensionStatusline(width, footerData, theme, config, runtime, mainLine),
+					);
 					return lines;
 				},
 			};
@@ -161,9 +167,24 @@ export default function statusline(pi: ExtensionAPI) {
 		refreshGitStatus(cwd, generation);
 	};
 
+	const agentDir = getAgentDir();
+	const configPath = settingsFilePath(agentDir);
+	registerStatuslineCommand(pi, {
+		settingsPath: configPath,
+		getLoaded: () => loaded ?? loadStatuslineSettings(configPath),
+		apply(next) {
+			loaded = next;
+			refresh();
+		},
+	});
+
 	pi.on("session_start", (_event, ctx) => {
+		loaded = loadOrCreateStatuslineSettings(agentDir);
 		const settingsNotice = consumeStatuslineSettingsNotice();
 		if (settingsNotice) ctx.ui.notify(settingsNotice, "warning");
+		if (loaded.diagnostics.length > 0) {
+			ctx.ui.notify(formatSettingsDiagnostics(loaded), "warning");
+		}
 		runtime.thinkingLevel = pi.getThinkingLevel();
 		installFooter(ctx);
 	});
@@ -233,6 +254,15 @@ export default function statusline(pi: ExtensionAPI) {
 	});
 }
 
+function formatSettingsDiagnostics(loaded: LoadedStatuslineSettings): string {
+	const details = loaded.diagnostics.slice(0, 5).map((item) => item.message);
+	const remaining = loaded.diagnostics.length - details.length;
+	return [
+		`pi-statusline settings: ${details.join("; ")}`,
+		...(remaining > 0 ? [`+${remaining} more`] : []),
+	].join(" ");
+}
+
 export {
 	buildExtensionStatusIconAliases,
 	type ExtensionStatusIconAliasMap,
@@ -246,14 +276,16 @@ export {
 } from "./extension-status.js";
 export {
 	formatGitBranchText,
+	formatGitBranchValue,
 	formatGitStatusSummary,
-	parseGitStatusPorcelain,
 	type GitStatusSummary,
+	parseGitStatusPorcelain,
 } from "./git-status.js";
 export {
 	contextColor,
 	formatCount,
 	formatToolActivity,
+	prContextFromStatuses,
 	prLinkFromStatuses,
 	shortenModel,
 } from "./render.js";

package/src/tokyo-night.ts

@@ -0,0 +1,180 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { ansiFg, ansiStyle } from "./ansi.js";
+import {
+	LINE_BREAK_SEGMENT_NAME,
+	type PaletteName,
+	type RenderItem,
+	type RenderSegment,
+	type SeparatorName,
+	type StatuslineConfig,
+	type TokyoNightBlockName,
+} from "./types.js";
+
+interface TokyoNightBlock {
+	name: TokyoNightBlockName;
+	segments: RenderSegment[];
+}
+
+interface BlockColors {
+	fg: string;
+	bg: string;
+}
+
+interface PowerlinePalette {
+	lead: string;
+	blocks: Record<TokyoNightBlockName, BlockColors>;
+	extensionSeparator: string;
+}
+
+const BLOCK_NAMES: TokyoNightBlockName[] = ["header", "directory", "git", "runtime", "meter"];
+
+const TOKYO_NIGHT_PALETTE: PowerlinePalette = {
+	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",
+};
+
+const SEMANTIC_COLORS = {
+	accent: "#7aa2f7",
+	muted: "#565f89",
+	success: "#9ece6a",
+	warning: "#e0af68",
+	error: "#f7768e",
+	dim: "#414868",
+} as const;
+
+type SemanticColor = keyof typeof SEMANTIC_COLORS;
+
+const PALETTE_SEQUENCES: Record<Exclude<PaletteName, "tokyo-night">, SemanticColor[]> = {
+	ocean: ["accent", "muted", "success", "warning"],
+	sunset: ["warning", "accent", "success", "muted"],
+	forest: ["success", "accent", "muted", "warning"],
+	candy: ["accent", "warning", "success", "muted"],
+	neon: ["accent", "success", "warning", "error"],
+	mono: ["muted", "dim"],
+};
+
+export function renderTokyoNightStatusline(
+	width: number,
+	items: RenderItem[],
+	config: Pick<StatuslineConfig, "palette" | "density" | "separator">,
+): string {
+	if (items.length === 0 || width <= 0) return "";
+	return splitLines(items)
+		.map((segments) =>
+			segments.length === 0
+				? ""
+				: truncateToWidth(joinTokyoNightSegments(segments, config), width, ""),
+		)
+		.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;
+}
+
+export function tokyoNightExtensionSeparator(
+	_theme: Theme,
+	paletteName: PaletteName = "tokyo-night",
+): string {
+	return ansiFg(resolvePalette(paletteName).extensionSeparator, " • ");
+}
+
+function joinTokyoNightSegments(
+	segments: RenderSegment[],
+	config: Pick<StatuslineConfig, "palette" | "density" | "separator">,
+): string {
+	const palette = resolvePalette(config.palette);
+	const blocks = contiguousBlocks(segments);
+	let line = ansiFg(palette.lead, "░▒▓");
+
+	for (const [index, block] of blocks.entries()) {
+		const colors = palette.blocks[block.name];
+		const previous = index === 0 ? undefined : palette.blocks[blocks[index - 1]?.name ?? "header"];
+		if (previous) line += ansiStyle("", { fg: previous.bg, bg: colors.bg });
+		line += ansiStyle(formatBlockText(block, config), colors);
+	}
+
+	const lastBlock = blocks.at(-1);
+	if (lastBlock) line += ansiFg(palette.blocks[lastBlock.name].bg, "");
+	return line;
+}
+
+function contiguousBlocks(segments: RenderSegment[]): TokyoNightBlock[] {
+	const blocks: TokyoNightBlock[] = [];
+	for (const segment of segments) {
+		const previous = blocks.at(-1);
+		if (previous?.name === segment.block) previous.segments.push(segment);
+		else blocks.push({ name: segment.block, segments: [segment] });
+	}
+	return blocks;
+}
+
+function formatBlockText(
+	block: TokyoNightBlock,
+	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;
+	}
+}
+
+function resolvePalette(name: PaletteName): PowerlinePalette {
+	if (name === "tokyo-night") return TOKYO_NIGHT_PALETTE;
+	const sequence = PALETTE_SEQUENCES[name];
+	const backgrounds = BLOCK_NAMES.map(
+		(_block, index) => SEMANTIC_COLORS[sequence[index % sequence.length] ?? "muted"],
+	);
+	return {
+		lead: backgrounds[0] ?? SEMANTIC_COLORS.accent,
+		blocks: Object.fromEntries(
+			BLOCK_NAMES.map((block, index) => {
+				const background = backgrounds[index] ?? SEMANTIC_COLORS.muted;
+				return [block, { fg: contrastColor(background), bg: background }];
+			}),
+		) as Record<TokyoNightBlockName, BlockColors>,
+		extensionSeparator: backgrounds[2] ?? SEMANTIC_COLORS.muted,
+	};
+}
+
+function contrastColor(hex: string): string {
+	const normalized = hex.slice(1);
+	const red = Number.parseInt(normalized.slice(0, 2), 16);
+	const green = Number.parseInt(normalized.slice(2, 4), 16);
+	const blue = Number.parseInt(normalized.slice(4, 6), 16);
+	return red * 0.299 + green * 0.587 + blue * 0.114 > 150 ? "#090c0c" : "#f0f0f0";
+}

package/src/types.ts

@@ -0,0 +1,67 @@
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+
+export const SEGMENT_NAMES = [
+	"brand",
+	"provider",
+	"model",
+	"thinking",
+	"cwd",
+	"branch",
+	"tools",
+	"context",
+	"tokens",
+	"cost",
+	"time",
+	"turn",
+] as const;
+export type SegmentName = (typeof SEGMENT_NAMES)[number];
+
+export const LINE_BREAK_SEGMENT_NAME = "line_break" as const;
+export type ConfigSegmentName = SegmentName | typeof LINE_BREAK_SEGMENT_NAME;
+
+export const PALETTE_NAMES = [
+	"tokyo-night",
+	"ocean",
+	"sunset",
+	"forest",
+	"candy",
+	"neon",
+	"mono",
+] as const;
+export type PaletteName = (typeof PALETTE_NAMES)[number];
+
+export const DENSITIES = ["compact", "cozy"] as const;
+export type Density = (typeof DENSITIES)[number];
+
+export const SEPARATOR_NAMES = ["none", "dot", "bar", "powerline", "round"] as const;
+export type SeparatorName = (typeof SEPARATOR_NAMES)[number];
+
+export type TokyoNightBlockName = "header" | "directory" | "git" | "runtime" | "meter";
+
+export interface SegmentTextConfig {
+	prefix: string;
+	suffix: string;
+}
+
+export interface StatuslineConfig {
+	palette: PaletteName;
+	density: Density;
+	separator: SeparatorName;
+	segments: ConfigSegmentName[];
+	segmentText: Record<SegmentName, SegmentTextConfig>;
+	extensionStatusIcons: Record<string, string>;
+}
+
+export interface RenderSegment {
+	name: SegmentName;
+	text: string;
+	color: ThemeColor;
+	block: TokyoNightBlockName;
+	emphasis?: boolean;
+}
+
+export interface RenderLineBreak {
+	name: typeof LINE_BREAK_SEGMENT_NAME;
+}
+
+export type RenderItem = RenderSegment | RenderLineBreak;

package/presets/classic.ts

@@ -1,55 +0,0 @@
-import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth } from "@earendil-works/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

@@ -1,84 +0,0 @@
-import type { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth } from "@earendil-works/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

@@ -1,38 +0,0 @@
-import type { ThemeColor } from "@earendil-works/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[];
-	extensionStatusIcons: Record<string, string>;
-}
-
-export interface RenderSegment {
-	name: SegmentName;
-	text: string;
-	color: ThemeColor;
-	block: TokyoNightBlockName;
-	emphasis?: boolean;
-}