@juanibiapina/pi-powerbar 0.9.1 → 0.11.0

package/package.json

@@ -1,20 +1,14 @@
 {
   "name": "@juanibiapina/pi-powerbar",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Pi extension that renders a persistent powerline status bar with left/right segments updated via events",
   "type": "module",
-  "main": "dist/index.js",
-  "types": "./dist/index.d.ts",
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "tsc -p tsconfig.build.json",
-    "dev": "tsc -p tsconfig.build.json --watch",
-    "test": "npm run build && node --test test/*.test.js",
-    "check": "biome check --write --error-on-warnings . && tsc --noEmit",
-    "prepublishOnly": "npm run clean && npm run build && npm run check"
+    "test": "node --test --import tsx test/*.test.js",
+    "check": "biome check --write --error-on-warnings . && tsc --noEmit"
   },
   "files": [
-    "dist/**/*",
+    "src/**/*",
     "README.md"
   ],
   "keywords": [
@@ -26,7 +20,7 @@
   ],
   "pi": {
     "extensions": [
-      "./dist",
+      "./src",
       "node_modules/@marckrenn/pi-sub-core/index.ts"
     ]
   },
@@ -39,19 +33,16 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "peerDependencies": {
-    "@mariozechner/pi-coding-agent": "*",
-    "@mariozechner/pi-tui": "*"
-  },
   "dependencies": {
     "@juanibiapina/pi-extension-settings": "^0.6.1",
     "@marckrenn/pi-sub-core": "^1.5.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.13",
+    "@biomejs/biome": "2.4.15",
+    "@earendil-works/pi-coding-agent": "^0.75.3",
     "@marckrenn/pi-sub-shared": "^1.5.0",
-    "@mariozechner/pi-coding-agent": "^0.70.2",
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.9.1",
+    "tsx": "^4.22.3",
     "typescript": "^6.0.3"
   }
 }

package/src/powerbar/index.ts

@@ -0,0 +1,125 @@
+/**
+ * Powerbar Core Extension
+ *
+ * Listens for "powerbar:update" events from producer extensions,
+ * maintains a segment store, and renders a powerline-style widget.
+ */
+
+import type { ExtensionAPI, ExtensionUIContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { Component, TUI } from "@earendil-works/pi-tui";
+import type { OrderedListOption } from "@juanibiapina/pi-extension-settings";
+import { renderBar, type Segment } from "./render.js";
+import { loadSettings, type PowerbarSettings, registerSettings } from "./settings.js";
+
+interface PowerbarUpdatePayload {
+	id: string;
+	text?: string;
+	suffix?: string;
+	icon?: string;
+	color?: string;
+	bar?: number;
+	barSegments?: number;
+}
+
+interface SegmentRegistration {
+	id: string;
+	label: string;
+}
+
+function segmentEquals(left: Segment | undefined, right: Segment): boolean {
+	return (
+		left?.text === right.text &&
+		left.suffix === right.suffix &&
+		left.icon === right.icon &&
+		left.color === right.color &&
+		left.bar === right.bar &&
+		left.barSegments === right.barSegments
+	);
+}
+
+export default function createExtension(pi: ExtensionAPI): void {
+	const segments: Map<string, Segment> = new Map();
+	const segmentCatalog: Map<string, OrderedListOption> = new Map();
+	let settings: PowerbarSettings;
+	let currentCtx: { ui: { setWidget: (...args: any[]) => void }; hasUI: boolean } | undefined;
+
+	// Register settings with empty options initially (no segments known yet)
+	registerSettings(pi, []);
+
+	// Listen for segment registrations from producer extensions
+	pi.events.on("powerbar:register-segment", (data: unknown) => {
+		const { id, label } = data as SegmentRegistration;
+		segmentCatalog.set(id, { id, label });
+		// Re-register settings with updated segment options
+		registerSettings(pi, Array.from(segmentCatalog.values()));
+	});
+
+	function refresh(): void {
+		if (!currentCtx?.hasUI) return;
+
+		currentCtx.ui.setWidget(
+			"powerbar",
+			(_tui: TUI, theme: Theme): Component & { dispose?(): void } => {
+				return {
+					render(width: number): string[] {
+						const line = renderBar(segments, settings, theme, width);
+						return [line];
+					},
+					invalidate(): void {
+						// No cached state to clear
+					},
+				};
+			},
+			{ placement: settings.placement },
+		);
+	}
+
+	// Listen for segment updates from any extension
+	pi.events.on("powerbar:update", (data: unknown) => {
+		const payload = data as PowerbarUpdatePayload;
+		if (!payload?.id) return;
+
+		if (!payload.text && payload.bar === undefined) {
+			const changed = segments.delete(payload.id);
+			if (!changed) return;
+		} else {
+			const nextSegment: Segment = {
+				id: payload.id,
+				text: payload.text ?? "",
+				suffix: payload.suffix,
+				icon: payload.icon,
+				color: payload.color,
+				bar: payload.bar,
+				barSegments: payload.barSegments,
+			};
+			if (segmentEquals(segments.get(payload.id), nextSegment)) return;
+			segments.set(payload.id, nextSegment);
+		}
+
+		refresh();
+	});
+
+	function hideFooter(ctx: { ui: ExtensionUIContext; hasUI: boolean }): void {
+		if (!ctx.hasUI) return;
+		ctx.ui.setFooter((_tui, _theme, _footerData) => ({
+			render(): string[] {
+				return [];
+			},
+			invalidate(): void {},
+		}));
+	}
+
+	pi.on("session_start", async (_event, ctx) => {
+		settings = loadSettings();
+		currentCtx = ctx;
+		hideFooter(ctx);
+		refresh();
+	});
+
+	pi.on("session_shutdown", async (_event, ctx) => {
+		if (ctx.hasUI) {
+			ctx.ui.setWidget("powerbar", undefined);
+		}
+		currentCtx = undefined;
+	});
+}

package/src/powerbar/render.ts

@@ -0,0 +1,216 @@
+/**
+ * Rendering logic for the powerbar.
+ *
+ * Builds a single line with left-aligned and right-aligned segments,
+ * joined by themed separators. Supports two progress bar styles:
+ * continuous (█ + partial-width glyphs ▏▎▍▌▋▊▉) and blocks
+ * (discrete partial-height glyphs ▁▂▃▄▅▆▇█ with dim background).
+ */
+
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { PowerbarSettings } from "./settings.js";
+
+export interface Segment {
+	id: string;
+	/** Primary text, rendered before the bar. */
+	text: string;
+	/** Text rendered after the bar (e.g., "59%"). */
+	suffix?: string;
+	icon?: string;
+	color?: string;
+	/** If set, renders a progress bar. Value is 0–100. */
+	bar?: number;
+	/** Hint for how many discrete blocks to use in blocks mode. Falls back to barWidth setting. */
+	barSegments?: number;
+}
+
+/**
+ * Render a continuous progress bar using full-width block characters.
+ *
+ * █ for filled columns, ▏▎▍▌▋▊▉ for the partial column, space for empty.
+ */
+function renderProgressBar(percent: number, width: number, theme: Theme, color: string): string {
+	const clamped = Math.max(0, Math.min(100, percent));
+	const filledFloat = (clamped / 100) * width;
+	const filledFull = Math.floor(filledFloat);
+	const remainder = filledFloat - filledFull;
+
+	// Partial block levels: ▏(1/8) ▎(2/8) ▍(3/8) ▌(4/8) ▋(5/8) ▊(6/8) ▉(7/8)
+	const levels = ["▏", "▎", "▍", "▌", "▋", "▊", "▉"];
+
+	const themeColor = color as ThemeColor;
+	const filledStr = "█".repeat(filledFull);
+
+	let partial = "";
+	let emptyCount = width - filledFull;
+
+	if (remainder >= 0.0625 && filledFull < width) {
+		const levelIndex = Math.max(0, Math.min(levels.length - 1, Math.round(remainder * 8) - 1));
+		partial = levels[levelIndex];
+		emptyCount = Math.max(0, emptyCount - 1);
+	}
+
+	const emptyStr = " ".repeat(emptyCount);
+
+	return theme.fg(themeColor, filledStr + partial) + emptyStr;
+}
+
+/** Convert a foreground ANSI escape to background by replacing SGR 38 with 48. */
+function fgToBgAnsi(fgAnsi: string): string {
+	return fgAnsi.replace("\x1b[38;", "\x1b[48;");
+}
+
+/**
+ * Render a bar of discrete block characters with a dim background track.
+ *
+ * Splits the 0–100 percent range evenly across `segments` blocks and
+ * computes a fill level (0–8) per block. The dim theme color provides
+ * the background "track"; partial block glyphs fill from the bottom
+ * in the segment color.
+ */
+function renderBlocksBar(percent: number, segments: number, theme: Theme, color: string): string {
+	const glyphs = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+	const dimBg = fgToBgAnsi(theme.getFgAnsi("dim"));
+	const fgColor = theme.getFgAnsi((color || "muted") as ThemeColor);
+	const reset = "\x1b[39m\x1b[49m";
+	const clamped = Math.max(0, Math.min(100, percent));
+	const filledFloat = (clamped / 100) * segments;
+
+	const result: string[] = [];
+	for (let i = 0; i < segments; i++) {
+		const blockFill = Math.max(0, Math.min(1, filledFloat - i));
+		const level = Math.round(blockFill * 8);
+		const glyph = glyphs[level];
+		result.push(level > 0 ? `${dimBg}${fgColor}${glyph}${reset}` : `${dimBg}${glyph}${reset}`);
+	}
+
+	return result.join(" ");
+}
+
+/**
+ * Render a single segment.
+ *
+ * Layout: [icon] [text] [bar] [suffix]
+ */
+function renderSegmentText(segment: Segment, settings: PowerbarSettings, theme: Theme): string {
+	const parts: string[] = [];
+	const themeColor = (segment.color || "muted") as ThemeColor;
+
+	if (segment.icon) {
+		parts.push(theme.fg(themeColor, segment.icon));
+	}
+
+	if (segment.text) {
+		parts.push(theme.fg(themeColor, segment.text));
+	}
+
+	if (segment.bar !== undefined) {
+		const color = segment.color || "muted";
+		if (settings.barStyle === "blocks") {
+			const blockCount = segment.barSegments ?? settings.barWidth;
+			parts.push(renderBlocksBar(segment.bar, blockCount, theme, color));
+		} else {
+			parts.push(renderProgressBar(segment.bar, settings.barWidth, theme, color));
+		}
+	}
+
+	if (segment.suffix) {
+		parts.push(theme.fg(themeColor, segment.suffix));
+	}
+
+	return parts.join(" ");
+}
+
+interface RenderedSegment {
+	text: string;
+	width: number;
+}
+
+function renderSideSegments(
+	ids: string[],
+	segments: Map<string, Segment>,
+	settings: PowerbarSettings,
+	theme: Theme,
+): RenderedSegment[] {
+	const rendered: RenderedSegment[] = [];
+	for (const id of ids) {
+		const seg = segments.get(id);
+		if (!seg || (!seg.text && !seg.suffix && seg.bar === undefined)) continue;
+		const text = renderSegmentText(seg, settings, theme);
+		rendered.push({ text, width: visibleWidth(text) });
+	}
+	return rendered;
+}
+
+function joinSegments(segments: RenderedSegment[], separator: string, separatorWidth: number): RenderedSegment {
+	if (segments.length === 0) return { text: "", width: 0 };
+	const text = segments.map((s) => s.text).join(separator);
+	const width = segments.reduce((sum, s) => sum + s.width, 0) + separatorWidth * (segments.length - 1);
+	return { text, width };
+}
+
+/**
+ * Truncate the widest segment to reclaim overflow space.
+ * Mutates the array in place and returns the new total width.
+ */
+function shrinkWidest(segments: RenderedSegment[], overflow: number): void {
+	if (segments.length === 0) return;
+
+	let widestIdx = 0;
+	for (let i = 1; i < segments.length; i++) {
+		if (segments[i].width > segments[widestIdx].width) {
+			widestIdx = i;
+		}
+	}
+
+	const seg = segments[widestIdx];
+	const targetWidth = Math.max(1, seg.width - overflow);
+	segments[widestIdx] = {
+		text: truncateToWidth(seg.text, targetWidth, "…"),
+		width: targetWidth,
+	};
+}
+
+export function renderBar(
+	segments: Map<string, Segment>,
+	settings: PowerbarSettings,
+	theme: Theme,
+	width: number,
+): string {
+	const separator = theme.fg("dim", settings.separator);
+	const separatorWidth = visibleWidth(separator);
+
+	const leftSegs = renderSideSegments(settings.left, segments, settings, theme);
+	const rightSegs = renderSideSegments(settings.right, segments, settings, theme);
+	const allSegs = [...leftSegs, ...rightSegs];
+
+	// Calculate total content width (segments + separators within each side + 1 for minimum padding)
+	const leftSepCount = Math.max(0, leftSegs.length - 1);
+	const rightSepCount = Math.max(0, rightSegs.length - 1);
+	const totalSepWidth = (leftSepCount + rightSepCount) * separatorWidth;
+	const totalSegWidth = allSegs.reduce((sum, s) => sum + s.width, 0);
+	const minPadding = 1;
+	const totalNeeded = totalSegWidth + totalSepWidth + minPadding;
+
+	// Shrink the widest segment(s) until it fits
+	if (totalNeeded > width) {
+		let overflow = totalNeeded - width;
+		const maxPasses = allSegs.length;
+		for (let i = 0; i < maxPasses && overflow > 0; i++) {
+			shrinkWidest(allSegs, overflow);
+			const newSegWidth = allSegs.reduce((sum, s) => sum + s.width, 0);
+			overflow = newSegWidth + totalSepWidth + minPadding - width;
+		}
+	}
+
+	// Rebuild left/right from the (possibly truncated) segments
+	const left = joinSegments(allSegs.slice(0, leftSegs.length), separator, separatorWidth);
+	const right = joinSegments(allSegs.slice(leftSegs.length), separator, separatorWidth);
+
+	const padding = Math.max(minPadding, width - left.width - right.width);
+	const line = `${left.text}${" ".repeat(padding)}${right.text}`;
+
+	// Safety net
+	return truncateToWidth(line, width, "…");
+}

package/src/powerbar/settings.ts

@@ -0,0 +1,94 @@
+/**
+ * Settings for the powerbar via pi-extension-settings.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import type { OrderedListOption, SettingDefinition } from "@juanibiapina/pi-extension-settings";
+import { getSetting } from "@juanibiapina/pi-extension-settings";
+
+export const EXTENSION_NAME = "powerbar";
+
+export interface PowerbarSettings {
+	left: string[];
+	right: string[];
+	separator: string;
+	placement: "aboveEditor" | "belowEditor";
+	barWidth: number;
+	barStyle: "continuous" | "blocks";
+}
+
+export function registerSettings(pi: ExtensionAPI, segmentOptions: OrderedListOption[]): void {
+	const definitions: SettingDefinition[] = [
+		{
+			id: "left",
+			label: "Left segments",
+			description: "Segments shown on the left side of the powerbar",
+			defaultValue: "git-branch,tokens,context-usage",
+			options: segmentOptions,
+		},
+		{
+			id: "right",
+			label: "Right segments",
+			description: "Segments shown on the right side of the powerbar",
+			defaultValue: "provider,model,sub-hourly,sub-weekly",
+			options: segmentOptions,
+		},
+		{
+			id: "separator",
+			label: "Separator",
+			description: "Separator between segments",
+			defaultValue: " │ ",
+			values: [" │ ", " ┃ ", " | ", " · ", "  "],
+		},
+		{
+			id: "placement",
+			label: "Placement",
+			description: "Where the powerbar appears",
+			defaultValue: "belowEditor",
+			values: ["belowEditor", "aboveEditor"],
+		},
+		{
+			id: "bar-style",
+			label: "Bar style",
+			description: "Visual style of progress bars",
+			defaultValue: "blocks",
+			values: ["continuous", "blocks"],
+		},
+		{
+			id: "bar-width",
+			label: "Bar width",
+			description: "Width of progress bars in characters",
+			defaultValue: "10",
+			values: ["6", "8", "10", "12", "16"],
+		},
+	];
+
+	pi.events.emit("pi-extension-settings:register", {
+		name: EXTENSION_NAME,
+		settings: definitions,
+	});
+}
+
+export function loadSettings(): PowerbarSettings {
+	const leftStr = getSetting(EXTENSION_NAME, "left", "git-branch,tokens,context-usage") ?? "";
+	const rightStr = getSetting(EXTENSION_NAME, "right", "provider,model,sub-hourly,sub-weekly") ?? "";
+	const separator = getSetting(EXTENSION_NAME, "separator", " │ ") ?? " │ ";
+	const placement = getSetting(EXTENSION_NAME, "placement", "belowEditor") ?? "belowEditor";
+	const barStyle = getSetting(EXTENSION_NAME, "bar-style", "blocks") ?? "blocks";
+	const barWidthStr = getSetting(EXTENSION_NAME, "bar-width", "10") ?? "10";
+
+	return {
+		left: leftStr
+			.split(",")
+			.map((s) => s.trim())
+			.filter(Boolean),
+		right: rightStr
+			.split(",")
+			.map((s) => s.trim())
+			.filter(Boolean),
+		separator,
+		placement: placement === "aboveEditor" ? "aboveEditor" : "belowEditor",
+		barStyle: barStyle === "continuous" ? "continuous" : "blocks",
+		barWidth: Math.max(4, Math.min(24, Number.parseInt(barWidthStr, 10) || 10)),
+	};
+}

package/src/powerbar-context/index.ts

@@ -0,0 +1,51 @@
+/**
+ * Powerbar Context Producer
+ *
+ * Shows context window usage as a progress bar with percentage.
+ * Color changes based on usage level: accent → warning → error.
+ * Segment ID: "context-usage"
+ */
+
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+const CHUNK_SIZE = 100_000;
+
+function getColor(pct: number): string {
+	if (pct > 80) return "error";
+	if (pct > 60) return "warning";
+	return "muted";
+}
+
+function emitContextUsage(pi: ExtensionAPI, ctx: ExtensionContext): void {
+	const usage = ctx.getContextUsage();
+	if (usage && usage.tokens != null) {
+		const pct = Math.round((usage.tokens / usage.contextWindow) * 100);
+		pi.events.emit("powerbar:update", {
+			id: "context-usage",
+			text: "",
+			suffix: `${pct}%`,
+			bar: pct,
+			barSegments: Math.ceil(usage.contextWindow / CHUNK_SIZE),
+			color: getColor(pct),
+		});
+	}
+}
+
+function resetContextUsage(pi: ExtensionAPI): void {
+	pi.events.emit("powerbar:update", {
+		id: "context-usage",
+		text: undefined,
+	});
+}
+
+export default function createExtension(pi: ExtensionAPI): void {
+	pi.events.emit("powerbar:register-segment", { id: "context-usage", label: "Context Usage" });
+
+	// Reset on new/switched session
+	pi.on("session_start", async () => resetContextUsage(pi));
+
+	// Update frequently during agent work
+	pi.on("turn_start", async (_event, ctx) => emitContextUsage(pi, ctx));
+	pi.on("tool_result", async (_event, ctx) => emitContextUsage(pi, ctx));
+	pi.on("turn_end", async (_event, ctx) => emitContextUsage(pi, ctx));
+}

package/src/powerbar-git/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Powerbar Git Producer
+ *
+ * Shows the current git branch.
+ * Segment ID: "git-branch"
+ */
+
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+function getGitBranch(cwd: string): string | undefined {
+	try {
+		const head = readFileSync(join(cwd, ".git", "HEAD"), "utf-8").trim();
+		if (head.startsWith("ref: refs/heads/")) {
+			return head.slice(16);
+		}
+		// Detached HEAD — show short hash
+		return head.slice(0, 8);
+	} catch {
+		return undefined;
+	}
+}
+
+function emitBranch(pi: ExtensionAPI, ctx: ExtensionContext): void {
+	const branch = getGitBranch(ctx.cwd);
+	if (branch) {
+		pi.events.emit("powerbar:update", {
+			id: "git-branch",
+			text: branch,
+			icon: "⎇",
+			color: "muted",
+		});
+	} else {
+		pi.events.emit("powerbar:update", {
+			id: "git-branch",
+			text: undefined,
+		});
+	}
+}
+
+export default function createExtension(pi: ExtensionAPI): void {
+	pi.events.emit("powerbar:register-segment", { id: "git-branch", label: "Git Branch" });
+
+	pi.on("session_start", async (_event, ctx) => {
+		emitBranch(pi, ctx);
+	});
+
+	// Refresh after bash commands (user may have changed branches)
+	pi.on("tool_result", async (event, ctx) => {
+		if (event.toolName === "bash") {
+			emitBranch(pi, ctx);
+		}
+	});
+}

package/src/powerbar-model/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Powerbar Model Producer
+ *
+ * Shows the current model name and thinking level.
+ * Segment ID: "model"
+ */
+
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+function emitModel(pi: ExtensionAPI, ctx: ExtensionContext): void {
+	const model = ctx.model;
+	if (!model) return;
+
+	const modelId = model.id;
+	let text = modelId;
+
+	// Add thinking level if model supports reasoning
+	if (model.reasoning) {
+		const level = pi.getThinkingLevel();
+		text = level === "off" ? `${modelId} · off` : `${modelId} · ${level}`;
+	}
+
+	pi.events.emit("powerbar:update", {
+		id: "model",
+		text,
+		color: "dim",
+	});
+}
+
+export default function createExtension(pi: ExtensionAPI): void {
+	pi.events.emit("powerbar:register-segment", { id: "model", label: "Model" });
+
+	pi.on("session_start", async (_event, ctx) => {
+		emitModel(pi, ctx);
+	});
+
+	pi.on("model_select", async (_event, ctx) => {
+		emitModel(pi, ctx);
+	});
+
+	pi.on("turn_start", async (_event, ctx) => {
+		emitModel(pi, ctx);
+	});
+}

package/src/powerbar-provider/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Powerbar Provider Producer
+ *
+ * Shows the current LLM provider name.
+ * Segment ID: "provider"
+ */
+
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+function emitProvider(pi: ExtensionAPI, ctx: ExtensionContext): void {
+	const model = ctx.model;
+	if (!model) return;
+
+	pi.events.emit("powerbar:update", {
+		id: "provider",
+		text: model.provider,
+		color: "dim",
+	});
+}
+
+export default function createExtension(pi: ExtensionAPI): void {
+	pi.events.emit("powerbar:register-segment", { id: "provider", label: "Provider" });
+
+	pi.on("session_start", async (_event, ctx) => {
+		emitProvider(pi, ctx);
+	});
+
+	pi.on("model_select", async (_event, ctx) => {
+		emitProvider(pi, ctx);
+	});
+
+	pi.on("turn_start", async (_event, ctx) => {
+		emitProvider(pi, ctx);
+	});
+}