@underactive/pi-topping-statusline 0.1.0

package/src/tests/token-rate-monitor.test.ts

@@ -0,0 +1,87 @@
+/**
+ * TokenRateMonitor's event pipeline: message_update/message_end driving the
+ * live EMA sampler, independent of the segment's display formatting (see
+ * token-rate.test.ts).
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { TokenRateMonitor } from "../token-rate.ts";
+
+function createFakePi(): { pi: ExtensionAPI; emit: (event: string, payload?: unknown) => void } {
+	const handlers = new Map<string, (payload: unknown) => void>();
+	const pi = {
+		on: (event: string, handler: (payload: unknown) => void) => {
+			handlers.set(event, handler);
+		},
+	} as unknown as ExtensionAPI;
+	return { pi, emit: (event, payload) => handlers.get(event)?.(payload) };
+}
+
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const textDelta = (delta: string) => ({ assistantMessageEvent: { type: "text_delta", delta } });
+
+test("idle before any turn starts", () => {
+	const monitor = new TokenRateMonitor(() => {});
+	monitor.enable();
+	assert.equal(monitor.getDisplay().phase, "idle");
+	assert.equal(monitor.getDisplay().rate, null);
+});
+
+test("streamed text deltas build a live rate once the sampler ticks", async () => {
+	const { pi, emit } = createFakePi();
+	const monitor = new TokenRateMonitor(() => {});
+	monitor.attach(pi);
+	monitor.enable();
+	emit("agent_start");
+	emit("message_start", { message: { role: "assistant" } });
+	for (let i = 0; i < 3; i++) {
+		emit("message_update", textDelta("one two three four five"));
+		await sleep(120);
+	}
+	const display = monitor.getDisplay();
+	assert.equal(display.phase, "active");
+	assert.ok(typeof display.rate === "number" && display.rate > 0);
+	monitor.disable();
+});
+
+test("message_end reconciles against the exact usage.output, then the held rate fades to idle", async () => {
+	const { pi, emit } = createFakePi();
+	const monitor = new TokenRateMonitor(() => {});
+	monitor.attach(pi);
+	monitor.enable();
+	emit("agent_start");
+	emit("message_start", { message: { role: "assistant" } });
+	for (let i = 0; i < 3; i++) {
+		emit("message_update", textDelta("one two three four five"));
+		await sleep(120);
+	}
+	emit("message_end", { message: { role: "assistant", usage: { output: 42 } } });
+	emit("agent_settled");
+	assert.equal(monitor.getDisplay().phase, "active");
+	await sleep(2200);
+	assert.equal(monitor.getDisplay().phase, "idle");
+	assert.equal(monitor.getDisplay().rate, null);
+	monitor.disable();
+});
+
+test("disable stops the sampler and returns to idle immediately", () => {
+	const { pi, emit } = createFakePi();
+	const monitor = new TokenRateMonitor(() => {});
+	monitor.attach(pi);
+	monitor.enable();
+	emit("agent_start");
+	monitor.disable();
+	assert.equal(monitor.getDisplay().phase, "idle");
+});
+
+test("events are ignored while the monitor is disabled", async () => {
+	const { pi, emit } = createFakePi();
+	const monitor = new TokenRateMonitor(() => {});
+	monitor.attach(pi);
+	emit("agent_start");
+	emit("message_start", { message: { role: "assistant" } });
+	emit("message_update", textDelta("one two three four five"));
+	await sleep(150);
+	assert.equal(monitor.getDisplay().phase, "idle");
+});

package/src/tests/token-rate.test.ts

@@ -0,0 +1,75 @@
+/**
+ * Display contract for the token_rate segment. The badge is always visible
+ * once enabled, so its width has to stay constant: the rate is right-aligned
+ * to the width of the `---` placeholder, otherwise dropping from 150 to 9
+ * tok/s would shift whatever sits beside it on every frame.
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { SegmentContextBuilder } from "../context.ts";
+import { SEGMENTS } from "../segments.ts";
+import { resolveEffectiveSettings } from "../settings.ts";
+import { FADE_SHADE_COUNT, theme } from "../theme.ts";
+import type { TokenRateDisplay } from "../types.ts";
+
+const fakePi = { exec: async () => undefined, getThinkingLevel: () => "off" } as unknown as ExtensionAPI;
+const fakeCtx = {
+	cwd: "/tmp/pi-topping-statusline-tests",
+	sessionManager: { getEntries: () => [], getSessionName: () => undefined },
+	getContextUsage: () => undefined,
+	model: undefined,
+} as unknown as ExtensionContext;
+
+const builder = new SegmentContextBuilder(fakePi);
+builder.attach(fakeCtx);
+const BASE = builder.build(
+	80,
+	resolveEffectiveSettings({}).segmentOptions,
+	{ git: false, pr: false, piStats: false, tokenRate: true, feeds: [] },
+	undefined,
+);
+
+const render = (tokenRate: TokenRateDisplay) => SEGMENTS.token_rate.render({ ...BASE, tokenRate });
+const plain = (tokenRate: TokenRateDisplay) => render(tokenRate).content.replace(/\x1b\[[0-9;]*m/g, "");
+const active = (rate: number | null): TokenRateDisplay => ({ rate, phase: "active", fadeShade: 0 });
+
+test("the rate is right-aligned to the placeholder's width", () => {
+	assert.equal(plain(active(150)), "150 tok/s");
+	assert.equal(plain(active(47)), " 47 tok/s");
+	assert.equal(plain(active(5)), "  5 tok/s");
+	assert.equal(plain(active(null)), "--- tok/s");
+});
+
+test("every state renders the same width, so neighbours never shift", () => {
+	const widths = new Set(
+		[
+			plain(active(150)),
+			plain(active(47)),
+			plain(active(5)),
+			plain(active(0)),
+			plain(active(null)),
+			plain({ rate: 8, phase: "fading", fadeShade: 2 }),
+			plain({ rate: null, phase: "idle", fadeShade: 0 }),
+		].map(text => text.length),
+	);
+	assert.equal(widths.size, 1, `expected one width, got ${[...widths].join(", ")}`);
+});
+
+test("a four-digit rate grows rather than being truncated", () => {
+	assert.equal(plain(active(1200)), "1200 tok/s");
+});
+
+test("phase drives the colour: accent live, blended fading, dim idle", () => {
+	assert.ok(render(active(150)).content.includes(theme.getFgAnsi("accent")));
+	assert.ok(render({ rate: null, phase: "idle", fadeShade: 0 }).content.includes(theme.getFgAnsi("dim")));
+	// The fade interpolates, so it emits a colour of its own rather than either endpoint.
+	const fading = render({ rate: 150, phase: "fading", fadeShade: FADE_SHADE_COUNT - 1 });
+	assert.match(fading.content, /\x1b\[38;[25]/);
+	assert.equal(plain({ rate: 150, phase: "fading", fadeShade: 2 }), "150 tok/s");
+});
+
+test("the segment hides only when the monitor supplies nothing", () => {
+	assert.equal(SEGMENTS.token_rate.render({ ...BASE, tokenRate: undefined }).visible, false);
+	assert.equal(render(active(null)).visible, true, "idle still shows the placeholder");
+});

package/src/tests/ts-resolve.ts

@@ -0,0 +1,20 @@
+/**
+ * Node loader hook: resolve the source's `./foo.js` specifiers to `./foo.ts`.
+ *
+ * Node strips TypeScript natively, so the only gap when running these files
+ * under `node --test` is that the extension imports with the `.js` extensions
+ * TypeScript's Node16 resolution expects, and those files exist only as `.ts`.
+ * Rewriting the specifier here keeps the test runner dependency-free.
+ */
+import { existsSync } from "node:fs";
+import { registerHooks } from "node:module";
+
+registerHooks({
+	resolve(specifier, context, nextResolve) {
+		if (specifier.startsWith(".") && specifier.endsWith(".js") && context.parentURL) {
+			const candidate = new URL(`${specifier.slice(0, -3)}.ts`, context.parentURL);
+			if (existsSync(candidate)) return nextResolve(candidate.href, context);
+		}
+		return nextResolve(specifier, context);
+	},
+});

package/src/theme.ts

@@ -0,0 +1,454 @@
+/**
+ * Statusline theme: symbol sets + palette ported from oh-my-pi.
+ *
+ * Symbols: packages/coding-agent/src/modes/theme/theme.ts (UNICODE/NERD/ASCII maps)
+ * Palette: packages/coding-agent/src/modes/theme/dark.json (statusLine* roles)
+ *
+ * Pi's Theme has no statusLine* color roles, so the OMP dark palette is
+ * embedded here. Values are hex strings (truecolor), 256-palette indices
+ * (numbers), or "" for the terminal default color.
+ */
+
+export type SymbolPreset = "unicode" | "nerd" | "ascii";
+
+export type BorderStyle = "rounded" | "heavy" | "double" | "single";
+
+export interface BoxGlyphs {
+	topLeft: string;
+	topRight: string;
+	bottomLeft: string;
+	bottomRight: string;
+	horizontal: string;
+	vertical: string;
+}
+
+export interface StatusSymbols {
+	sep: {
+		powerlineLeft: string;
+		powerlineRight: string;
+		powerlineThinLeft: string;
+		powerlineThinRight: string;
+		halfCircleLeft: string;
+		halfCircleRight: string;
+		block: string;
+		space: string;
+		asciiLeft: string;
+		asciiRight: string;
+		dot: string;
+		slash: string;
+		pipe: string;
+	};
+	icon: {
+		pi: string;
+		model: string;
+		folder: string;
+		scratchFolder: string;
+		worktree: string;
+		git: string;
+		branch: string;
+		pr: string;
+		tokens: string;
+		context: string;
+		cost: string;
+		time: string;
+		ghost: string;
+		agents: string;
+		job: string;
+		cache: string;
+		input: string;
+		output: string;
+		throughput: string;
+		host: string;
+		session: string;
+		auto: string;
+		fast: string;
+	};
+	thinking: {
+		minimal: string;
+		low: string;
+		medium: string;
+		high: string;
+		xhigh: string;
+		max: string;
+		autoPending: string;
+	};
+}
+
+const UNICODE_SYMBOLS: StatusSymbols = {
+	sep: {
+		powerlineLeft: "▶",
+		powerlineRight: "◀",
+		powerlineThinLeft: ">",
+		powerlineThinRight: "<",
+		halfCircleLeft: "",
+		halfCircleRight: "",
+		block: "▌",
+		space: " ",
+		asciiLeft: ">",
+		asciiRight: "<",
+		dot: " · ",
+		slash: " / ",
+		pipe: " │ ",
+	},
+	icon: {
+		pi: "π",
+		model: "⬢",
+		folder: "📁",
+		scratchFolder: "🗑",
+		worktree: "🌳",
+		git: "⎇",
+		branch: "⑂",
+		pr: "⤴",
+		tokens: "🪙",
+		context: "◫",
+		cost: "💲",
+		time: "⏱",
+		ghost: "👻",
+		agents: "👥",
+		job: "⚙",
+		cache: "💾",
+		input: "⤵",
+		output: "⤴",
+		throughput: "⚡",
+		host: "🖥",
+		session: "🆔",
+		auto: "⟲",
+		fast: "⚡",
+	},
+	thinking: {
+		minimal: "○ min",
+		low: "◔ low",
+		medium: "◑ med",
+		high: "◒ high",
+		xhigh: "◕ xhigh",
+		max: "◉ max",
+		autoPending: "⟳",
+	},
+};
+
+const NERD_SYMBOLS: StatusSymbols = {
+	sep: {
+		powerlineLeft: "\ue0b0",
+		powerlineRight: "\ue0b2",
+		powerlineThinLeft: "\ue0b1",
+		powerlineThinRight: "\ue0b3",
+		halfCircleLeft: "\ue0b6",
+		halfCircleRight: "\ue0b4",
+		block: "█",
+		space: " ",
+		asciiLeft: ">",
+		asciiRight: "<",
+		dot: " · ",
+		slash: "\ue0bb",
+		pipe: "│",
+	},
+	icon: {
+		pi: "\ue22c",
+		model: "\uec19",
+		folder: "\uf115",
+		scratchFolder: "\uf014",
+		worktree: "\uf0e8",
+		git: "\uf1d3",
+		branch: "\uf126",
+		pr: "\uea64",
+		tokens: "\ue26b",
+		context: "\ue70f",
+		cost: "\uf155",
+		time: "\uf017",
+		ghost: "\u{f02a0}",
+		agents: "\uf0c0",
+		job: "\uf013",
+		cache: "\uf1c0",
+		input: "\uf090",
+		output: "\uf08b",
+		throughput: "⚡",
+		host: "\uf109",
+		session: "\u{f0051}",
+		auto: "\u{f0068}",
+		fast: "\uf0e7",
+	},
+	thinking: {
+		minimal: "\u{f0a9e} min",
+		low: "\u{f0a9f} low",
+		medium: "\u{f0aa1} med",
+		high: "\u{f0aa3} high",
+		xhigh: "\u{f0aa5} xhigh",
+		max: "\u{f06d} max",
+		autoPending: "\u{f074}",
+	},
+};
+
+const ASCII_SYMBOLS: StatusSymbols = {
+	sep: {
+		powerlineLeft: ">",
+		powerlineRight: "<",
+		powerlineThinLeft: ">",
+		powerlineThinRight: "<",
+		halfCircleLeft: "",
+		halfCircleRight: "",
+		block: "#",
+		space: " ",
+		asciiLeft: ">",
+		asciiRight: "<",
+		dot: " - ",
+		slash: " / ",
+		pipe: " | ",
+	},
+	icon: {
+		pi: "pi",
+		model: "[M]",
+		folder: "[D]",
+		scratchFolder: "[T]",
+		worktree: "[wt]",
+		git: "git:",
+		branch: "@",
+		pr: "PR",
+		tokens: "tok:",
+		context: "ctx:",
+		cost: "$",
+		time: "t:",
+		ghost: "@",
+		agents: "AG",
+		job: "bg",
+		cache: "cache",
+		input: "in:",
+		output: "out:",
+		throughput: "tok/s:",
+		host: "host",
+		session: "id",
+		auto: "[A]",
+		fast: ">>",
+	},
+	thinking: {
+		minimal: "[min]",
+		low: "[low]",
+		medium: "[med]",
+		high: "[high]",
+		xhigh: "[xhigh]",
+		max: "[max]",
+		autoPending: "[~]",
+	},
+};
+
+const SYMBOL_PRESETS: Record<SymbolPreset, StatusSymbols> = {
+	unicode: UNICODE_SYMBOLS,
+	nerd: NERD_SYMBOLS,
+	ascii: ASCII_SYMBOLS,
+};
+
+const ASCII_BOX: BoxGlyphs = { topLeft: "+", topRight: "+", bottomLeft: "+", bottomRight: "+", horizontal: "-", vertical: "|" };
+
+/** Same glyphs as pi-topping's User Prompt border style. */
+const BOX_STYLES: Record<BorderStyle, BoxGlyphs> = {
+	rounded: { topLeft: "╭", topRight: "╮", bottomLeft: "╰", bottomRight: "╯", horizontal: "─", vertical: "│" },
+	heavy: { topLeft: "┏", topRight: "┓", bottomLeft: "┗", bottomRight: "┛", horizontal: "━", vertical: "┃" },
+	double: { topLeft: "╔", topRight: "╗", bottomLeft: "╚", bottomRight: "╝", horizontal: "═", vertical: "║" },
+	single: { topLeft: "┌", topRight: "┐", bottomLeft: "└", bottomRight: "┘", horizontal: "─", vertical: "│" },
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Palette (OMP dark.json)
+// ═══════════════════════════════════════════════════════════════════════════
+
+type ColorValue = string | number;
+
+export type StatusColor =
+	| "accent"
+	| "success"
+	| "error"
+	| "warning"
+	| "muted"
+	| "dim"
+	| "text"
+	| "thinkingHigh"
+	| "statusLineSep"
+	| "statusLineModel"
+	| "statusLinePath"
+	| "statusLineGitClean"
+	| "statusLineGitDirty"
+	| "statusLineContext"
+	| "statusLineContextElevated"
+	| "statusLineSpend"
+	| "statusLineStaged"
+	| "statusLineDirty"
+	| "statusLineUntracked"
+	| "statusLineOutput"
+	| "statusLineCost"
+	| "statusLineSubagents";
+
+const FG_COLORS: Record<StatusColor, ColorValue> = {
+	accent: "#febc38",
+	success: "#89d281",
+	error: "#fc3a4b",
+	warning: "#e4c00f",
+	muted: "#777d88",
+	dim: "#5f6673",
+	text: "",
+	thinkingHigh: "#b281d6",
+	statusLineSep: 244,
+	statusLineModel: "#d787af",
+	statusLinePath: "#00afaf",
+	statusLineGitClean: "#5faf5f",
+	statusLineGitDirty: "#d7af5f",
+	statusLineContext: "#8787af",
+	statusLineContextElevated: "#e07a1f",
+	statusLineSpend: "#5fafaf",
+	statusLineStaged: 70,
+	statusLineDirty: 178,
+	statusLineUntracked: 39,
+	statusLineOutput: 205,
+	statusLineCost: 205,
+	statusLineSubagents: "#febc38",
+};
+
+const STATUS_LINE_BG: ColorValue = "#121212";
+
+/** Dominant palette hexes the session accent must not collide with. */
+export const MAJOR_COLOR_HEXES = [
+	"#febc38",
+	"#89d281",
+	"#fc3a4b",
+	"#e4c00f",
+	"#b281d6",
+	"#d787af",
+	"#00afaf",
+];
+
+export type ColorMode = "truecolor" | "256color";
+
+export function detectColorMode(): ColorMode {
+	const colorterm = process.env.COLORTERM;
+	if (colorterm === "truecolor" || colorterm === "24bit") return "truecolor";
+	if (process.env.WT_SESSION) return "truecolor";
+	const term = process.env.TERM || "";
+	if (term === "dumb" || term === "" || term === "linux") return "256color";
+	return "truecolor";
+}
+
+export function parseHex(hex: string): [number, number, number] | undefined {
+	const match = /^#?([0-9a-f]{6})$/i.exec(hex);
+	if (!match) return undefined;
+	const n = Number.parseInt(match[1], 16);
+	return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
+}
+
+/** Number of discrete, eased shades used for the token-rate fade (pi-topping). */
+export const FADE_SHADE_COUNT = 5;
+
+/** Resolve an xterm-256 palette index to RGB (16–231 cube, 232–255 grayscale). */
+function xterm256ToRgb(n: number): [number, number, number] {
+	if (n >= 232) {
+		const v = 8 + (n - 232) * 10;
+		return [v, v, v];
+	}
+	const i = Math.max(0, n - 16);
+	const c = (v: number) => (v === 0 ? 0 : 55 + v * 51);
+	return [c(Math.floor(i / 36) % 6), c(Math.floor(i / 6) % 6), c(i % 6)];
+}
+
+function colorValueToRgb(color: ColorValue): [number, number, number] {
+	if (typeof color === "number") return xterm256ToRgb(color);
+	return parseHex(color) ?? [0, 0, 0];
+}
+
+function rgbTo256(r: number, g: number, b: number): number {
+	if (r === g && g === b) {
+		if (r < 8) return 16;
+		if (r > 248) return 231;
+		return 232 + Math.round(((r - 8) / 247) * 24);
+	}
+	const scale = (v: number) => Math.round((v / 255) * 5);
+	return 16 + 36 * scale(r) + 6 * scale(g) + scale(b);
+}
+
+export function hexToFgAnsi(hex: string, mode: ColorMode = detectColorMode()): string {
+	const rgb = parseHex(hex);
+	if (!rgb) return "";
+	const [r, g, b] = rgb;
+	return mode === "truecolor" ? `\x1b[38;2;${r};${g};${b}m` : `\x1b[38;5;${rgbTo256(r, g, b)}m`;
+}
+
+function fgAnsi(color: ColorValue, mode: ColorMode): string {
+	if (color === "") return "\x1b[39m";
+	if (typeof color === "number") return `\x1b[38;5;${color}m`;
+	return hexToFgAnsi(color, mode);
+}
+
+function bgAnsi(color: ColorValue, mode: ColorMode): string {
+	if (color === "") return "\x1b[49m";
+	if (typeof color === "number") return `\x1b[48;5;${color}m`;
+	return fgAnsi(color, mode).replace("\x1b[38;", "\x1b[48;");
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Theme singleton
+// ═══════════════════════════════════════════════════════════════════════════
+
+class StatusTheme {
+	#mode: ColorMode = detectColorMode();
+	#preset: SymbolPreset = "nerd";
+	#symbols: StatusSymbols = NERD_SYMBOLS;
+	#fgCache = new Map<StatusColor, string>();
+	#bgAnsi: string | undefined;
+
+	setSymbolPreset(preset: SymbolPreset): void {
+		this.#preset = preset;
+		this.#symbols = SYMBOL_PRESETS[preset];
+	}
+
+	get sep(): StatusSymbols["sep"] {
+		return this.#symbols.sep;
+	}
+
+	get icon(): StatusSymbols["icon"] {
+		return this.#symbols.icon;
+	}
+
+	get thinking(): StatusSymbols["thinking"] {
+		return this.#symbols.thinking;
+	}
+
+	/** The ascii preset overrides every border style with its plain-text box. */
+	getBox(style: BorderStyle): BoxGlyphs {
+		return this.#preset === "ascii" ? ASCII_BOX : BOX_STYLES[style];
+	}
+
+	getFgAnsi(color: StatusColor): string {
+		let ansi = this.#fgCache.get(color);
+		if (ansi === undefined) {
+			ansi = fgAnsi(FG_COLORS[color], this.#mode);
+			this.#fgCache.set(color, ansi);
+		}
+		return ansi;
+	}
+
+	getBgAnsi(): string {
+		if (this.#bgAnsi === undefined) this.#bgAnsi = bgAnsi(STATUS_LINE_BG, this.#mode);
+		return this.#bgAnsi;
+	}
+
+	fg(color: StatusColor, text: string): string {
+		return `${this.getFgAnsi(color)}${text}\x1b[39m`;
+	}
+
+	/**
+	 * Render text in one fade shade between two palette roles, blending
+	 * `from` toward `to` on an eased (raised-cosine) ramp. Ported from
+	 * pi-topping's fadeWarningString, generalized over StatusColor pairs.
+	 */
+	fadeFg(from: StatusColor, to: StatusColor, shade: number, text: string): string {
+		const clamped = Math.max(0, Math.min(FADE_SHADE_COUNT - 1, Math.floor(shade)));
+		const progress = (clamped + 1) / FADE_SHADE_COUNT;
+		const eased = 0.5 * (1 - Math.cos(Math.PI * progress));
+		const a = colorValueToRgb(FG_COLORS[from]);
+		const b = colorValueToRgb(FG_COLORS[to]);
+		const r = Math.round(a[0] * (1 - eased) + b[0] * eased);
+		const g = Math.round(a[1] * (1 - eased) + b[1] * eased);
+		const bl = Math.round(a[2] * (1 - eased) + b[2] * eased);
+		const ansi =
+			this.#mode === "truecolor" ? `\x1b[38;2;${r};${g};${bl}m` : `\x1b[38;5;${rgbTo256(r, g, bl)}m`;
+		return `${ansi}${text}\x1b[39m`;
+	}
+}
+
+export const theme = new StatusTheme();