@underactive/pi-topping-statusline 0.1.4 → 0.2.1

package/src/tests/working.test.ts

@@ -0,0 +1,161 @@
+/**
+ * Contracts for the opt-in embedded status indicator: the `working` segment
+ * passes pi's pre-rendered status through verbatim, the top-left group swaps
+ * everything but the Pi symbol for it while a stream is live, and the layout
+ * truncates it before any other left segment is dropped. The caller chooses
+ * whether truncated status text uses an ellipsis.
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { buildStatusLine } from "../layout.ts";
+import { SEGMENTS } from "../segments.ts";
+import { resolveEffectiveSettings, topLeftSegments } from "../settings.ts";
+import { easeFade, theme } from "../theme.ts";
+import type { SegmentContext, StatusLineSegmentId } from "../types.ts";
+
+const stripAnsi = (text: string) => text.replace(/\x1b\[[0-9;]*m/g, "");
+const noGap = (s: string) => s;
+
+const EFFECTIVE = resolveEffectiveSettings({ transparent: true });
+
+function ctxWith(workingStatus: string | undefined): SegmentContext {
+	return {
+		options: EFFECTIVE.segmentOptions,
+		model: undefined,
+		thinkingLevel: "off",
+		cwd: "/tmp/pi-topping-statusline-tests",
+		sessionName: undefined,
+		contextPercent: null,
+		contextTokens: 0,
+		contextWindow: 0,
+		git: { branch: null, status: null, pr: null },
+		worktree: null,
+		scrollHint: undefined,
+		piStats: undefined,
+		tokenRate: undefined,
+		feedData: undefined,
+		workingStatus,
+	};
+}
+
+test("working segment renders the host text verbatim", () => {
+	const status = "\x1b[36m⠙ Working\x1b[39m";
+	assert.deepEqual(SEGMENTS.working.render(ctxWith(status)), { content: status, visible: true });
+});
+
+test("working segment is invisible when idle", () => {
+	assert.equal(SEGMENTS.working.render(ctxWith(undefined)).visible, false);
+	assert.equal(SEGMENTS.working.render(ctxWith("")).visible, false);
+});
+
+test("topLeftSegments keeps pi first and swaps the rest while streaming", () => {
+	assert.deepEqual(topLeftSegments(EFFECTIVE, true), ["pi", "working"]);
+	assert.deepEqual(topLeftSegments(EFFECTIVE, false), EFFECTIVE.leftSegments);
+	assert.ok(EFFECTIVE.leftSegments.length > 2, "default left group has more than pi + one segment");
+});
+
+test("topLeftSegments yields only working when the pi symbol is off", () => {
+	const noPi = resolveEffectiveSettings({ segments: { pi: false } });
+	assert.deepEqual(topLeftSegments(noPi, true), ["working"]);
+});
+
+test("embedWorkingStatus resolves off by default and on when set", () => {
+	assert.equal(resolveEffectiveSettings({}).embedWorkingStatus, false);
+	assert.equal(resolveEffectiveSettings({ embedWorkingStatus: true }).embedWorkingStatus, true);
+});
+
+test("top bar renders pi symbol, separator, then the status", () => {
+	const bar = buildStatusLine(80, ctxWith("⠙ Mulling 28 tps"), EFFECTIVE, noGap, {
+		left: ["pi", "working"],
+		right: [],
+	});
+	const plain = stripAnsi(bar);
+	const piAt = plain.indexOf(theme.icon.pi);
+	const statusAt = plain.indexOf("⠙ Mulling 28 tps");
+	assert.ok(piAt >= 0, "pi symbol present");
+	assert.ok(statusAt > piAt, "status follows the pi symbol");
+	assert.equal(visibleWidth(bar), 80);
+});
+
+test("narrow widths truncate the status without an ellipsis and keep the pi symbol", () => {
+	const status = "⠙ Mulling ⣾⣿⣿⣿⣿⣿⣾⣾  28 tps · 11s · ↓ 316 tokens";
+	const bar = buildStatusLine(20, ctxWith(status), EFFECTIVE, noGap, { left: ["pi", "working"], right: [] });
+	const plain = stripAnsi(bar);
+	assert.ok(plain.includes(theme.icon.pi), "pi symbol survives");
+	assert.ok(plain.includes("⠙ Mull"), "status head is kept");
+	assert.ok(!plain.includes("…"), "no ellipsis");
+	assert.ok(!plain.includes("tokens"), "status tail is cut");
+	assert.equal(visibleWidth(bar), 20);
+});
+
+test("workingEllipsis marks truncated prose without changing the bar width", () => {
+	const status = "⠙ Context overflow detected, Auto-compacting... (esc to cancel)";
+	for (const width of [12, 16, 24, 40, 60]) {
+		const bar = buildStatusLine(
+			width,
+			ctxWith(status),
+			EFFECTIVE,
+			noGap,
+			{ left: ["pi", "working"], right: [] },
+			{ col: 0, row: 0 },
+			{ workingEllipsis: "…" },
+		);
+		const plain = stripAnsi(bar);
+		assert.ok(plain.includes(theme.icon.pi), `pi symbol survives at width ${width}`);
+		assert.ok(plain.includes("…"), `truncated status ends with an ellipsis at width ${width}`);
+		assert.ok(!plain.includes("cancel"), `status tail is cut at width ${width}`);
+		assert.equal(visibleWidth(bar), width, `width ${width}`);
+	}
+});
+
+test("a long ANSI-styled status never exceeds the bar width", () => {
+	const status = `\x1b[38;2;10;20;30m⠙ ${"Working ".repeat(30)}\x1b[39m`;
+	for (const width of [12, 16, 24, 40, 60]) {
+		const bar = buildStatusLine(width, ctxWith(status), EFFECTIVE, noGap, {
+			left: ["pi", "working"],
+			right: [],
+		});
+		assert.equal(visibleWidth(bar), width, `width ${width}`);
+		assert.ok(stripAnsi(bar).includes(theme.icon.pi), `pi symbol at width ${width}`);
+	}
+});
+
+test("the status drops entirely rather than the pi symbol when there is no room", () => {
+	const bar = buildStatusLine(4, ctxWith("⠙ Working"), EFFECTIVE, noGap, { left: ["pi", "working"], right: [] });
+	const plain = stripAnsi(bar);
+	assert.ok(plain.includes(theme.icon.pi));
+	assert.ok(!plain.includes("⠙"));
+});
+
+test("fadeAnsi leaves text untouched at full opacity and sinks colors into the bar at zero", () => {
+	const styled = "\x1b[38;2;254;188;56mA\x1b[39m \x1b[48;5;70mB\x1b[49m";
+	assert.equal(theme.fadeAnsi(styled, 1), styled);
+	const sunk = theme.fadeAnsi(styled, 0);
+	assert.equal(
+		sunk,
+		`${theme.getFgAnsi("statusLineBg")}A${theme.getFgAnsi("statusLineBg")} ${theme.getBgAnsi()}B\x1b[49m`,
+	);
+});
+
+test("easeFade is monotonic and pinned at both ends", () => {
+	assert.equal(easeFade(0), 0);
+	assert.equal(easeFade(1), 1);
+	assert.ok(easeFade(0.25) < easeFade(0.5) && easeFade(0.5) < easeFade(0.75));
+});
+
+test("leftFade recolors the tail but not the pi symbol or the bar width", () => {
+	const status = "\x1b[38;2;10;200;30m⠙ Working\x1b[39m";
+	const groups: { left: StatusLineSegmentId[]; right: StatusLineSegmentId[] } = { left: ["pi", "working"], right: [] };
+	const origin = { col: 0, row: 0 };
+	const build = (fade?: number) =>
+		buildStatusLine(60, ctxWith(status), EFFECTIVE, noGap, groups, origin, { leftFade: fade });
+	const solid = build();
+	const faded = build(0.2);
+	assert.equal(visibleWidth(faded), 60);
+	assert.equal(stripAnsi(faded), stripAnsi(solid));
+	assert.ok(!faded.includes("10;200;30"), "status color blended");
+	const piPrefix = (bar: string) => bar.slice(0, bar.indexOf(theme.icon.pi));
+	assert.equal(piPrefix(faded), piPrefix(solid), "pi symbol styling untouched");
+	assert.equal(build(1), solid);
+});

package/src/theme.ts

@@ -249,6 +249,18 @@ export function parseHex(hex: string): [number, number, number] | undefined {
 /** Number of discrete, eased shades used for the token-rate and feed fades (pi-topping). */
 export const FADE_SHADE_COUNT = 5;
 
+/** Stand-in for the terminal's default foreground when a fade must recolor it. */
+const DEFAULT_FG_RGB: [number, number, number] = [204, 204, 204];
+
+/** Every SGR color the layout or a segment can emit: truecolor, 256-color, or the default-fg reset. */
+const SGR_COLOR_RE = /\x1b\[(38|48);2;(\d+);(\d+);(\d+)m|\x1b\[(38|48);5;(\d+)m|\x1b\[39m/g;
+
+/** Raised-cosine ease shared by the discrete and continuous fades. */
+export function easeFade(progress: number): number {
+	const clamped = Math.max(0, Math.min(1, progress));
+	return 0.5 * (1 - Math.cos(Math.PI * clamped));
+}
+
 /** Resolve an xterm-256 palette index to RGB (16–231 cube, 232–255 grayscale). */
 function xterm256ToRgb(n: number): [number, number, number] {
 	if (n >= 232) {
@@ -358,7 +370,7 @@ class StatusTheme {
 	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 eased = easeFade(progress);
 		const a = colorValueToRgb(FG_COLORS[from]);
 		const b = colorValueToRgb(FG_COLORS[to]);
 		const r = Math.round(a[0] * (1 - eased) + b[0] * eased);
@@ -367,6 +379,35 @@ class StatusTheme {
 		const ansi = rgbToFgAnsi(r, g, bl, this.#mode);
 		return `${ansi}${text}\x1b[39m`;
 	}
+
+	/**
+	 * Blend every color already present in `text` toward the bar background
+	 * by `opacity` (1 = untouched, 0 = fully sunk into the background), so a
+	 * fully styled group can fade as a whole without re-rendering its segments.
+	 * Default-foreground resets are recolored from a neutral stand-in so plain
+	 * labels fade alongside their colored neighbors; background resets (49)
+	 * stay put so transparent bars keep the terminal's own background.
+	 */
+	fadeAnsi(text: string, opacity: number): string {
+		const alpha = Math.max(0, Math.min(1, opacity));
+		if (alpha >= 1) return text;
+		const target = colorValueToRgb(STATUS_LINE_BG);
+		const mode = this.#mode;
+		return text.replace(SGR_COLOR_RE, (_m, tcPlane, r, g, b, ixPlane, index) => {
+			let plane = "38";
+			let rgb: [number, number, number] = DEFAULT_FG_RGB;
+			if (tcPlane) {
+				plane = tcPlane;
+				rgb = [Number(r), Number(g), Number(b)];
+			} else if (ixPlane) {
+				plane = ixPlane;
+				rgb = xterm256ToRgb(Number(index));
+			}
+			const mix = (i: number) => Math.round(rgb[i] * alpha + target[i] * (1 - alpha));
+			const fg = rgbToFgAnsi(mix(0), mix(1), mix(2), mode);
+			return plane === "38" ? fg : fg.replace("\x1b[38;", "\x1b[48;");
+		});
+	}
 }
 
 export const theme = new StatusTheme();

package/src/types.ts

@@ -18,7 +18,8 @@ export type StatusLineSegmentId =
 	| "token_rate"
 	| "feeds"
 	| "context_graph"
-	| "scroll_hint";
+	| "scroll_hint"
+	| "working";
 
 /**
  * A feed the statusline subscribes to: custom session entries published by
@@ -73,6 +74,12 @@ export interface StatusLineSettings {
 	rainbowBorder?: boolean;
 	/** Animate the rainbow border when it is visible. */
 	rainbowAnimation?: boolean;
+	/** NVIDIA-green gradient border while the model provider is Switchyard. */
+	nvidiaGreenBorder?: boolean;
+	/** Animate the Switchyard green border when it is visible. */
+	nvidiaGreenAnimation?: boolean;
+	/** Render pi's status spinners in the top bar instead of their own row. */
+	embedWorkingStatus?: boolean;
 }
 
 /** Resolved per-segment render options; resolveEffectiveSettings always fills them. */
@@ -105,6 +112,9 @@ export interface EffectiveStatusLineSettings {
 	segmentOptions: StatusLineSegmentOptions;
 	rainbowBorder: boolean;
 	rainbowAnimation: boolean;
+	nvidiaGreenBorder: boolean;
+	nvidiaGreenAnimation: boolean;
+	embedWorkingStatus: boolean;
 	includes: SegmentIncludes;
 }
 
@@ -133,6 +143,11 @@ export interface SegmentContext {
 	scrollHint: string | undefined;
 	/** Pi's own footer stats, when this frame needs them. */
 	piStats: string | undefined;
+	/**
+	 * Pi's embedded status spinner, pre-rendered and pre-colored by the host for
+	 * this frame. Absent while no status indicator is active.
+	 */
+	workingStatus?: string;
 	/** Live tok/s display state, when this frame needs it. */
 	tokenRate: TokenRateDisplay | undefined;
 	/**

package/src/working-status.ts

@@ -0,0 +1,98 @@
+import type { CustomEditor } from "@earendil-works/pi-coding-agent";
+import { easeFade } from "./theme.js";
+
+export type StatusIndicatorKind = NonNullable<Parameters<CustomEditor["setWorkingStatusIndicator"]>[0]>["kind"];
+
+/** Briefly retain a cleared status so handoffs between host indicators do not flash. */
+export const STATUS_HOLD_MS = 150;
+/** Cross-fade budget when the embedded working status disappears: half out, half in. */
+export const WORKING_FADE_MS = 750;
+
+/** True when a status kind is a message-style indicator rather than the working spinner. */
+export function isMessageKind(kind: StatusIndicatorKind | undefined): boolean {
+	return kind !== undefined && kind !== "working";
+}
+
+/** Which status the top-left group shows this frame and how far it has faded. */
+export interface StatusFrame {
+	status: string | undefined;
+	leftFade?: number;
+	/** Kind of the status this frame shows, for truncation styling. */
+	kind: StatusIndicatorKind | undefined;
+	/** True while a hold or fade still needs repaints. */
+	pending: boolean;
+}
+
+interface StatusExit {
+	holdUntil: number;
+	fadeMs: number;
+}
+
+/**
+ * Resolve host status-indicator handoffs into stable top-bar frames.
+ *
+ * pi 0.86 routes working, retry, compaction, and branch-summary indicators
+ * through the editor border and may clear the slot between them. A cleared
+ * status is held briefly to bridge that gap. Only the working indicator — the
+ * one that genuinely ends a stream — then cross-fades back to user segments.
+ */
+export class StatusTransition {
+	#liveShown = false;
+	#lastStatus: string | undefined;
+	#lastKind: StatusIndicatorKind | undefined;
+	#exit: StatusExit | undefined;
+
+	resolve(live: string | undefined, kind: StatusIndicatorKind | undefined, now: number): StatusFrame {
+		if (live !== undefined) {
+			this.#liveShown = true;
+			this.#lastStatus = live;
+			this.#lastKind = kind;
+			this.#exit = undefined;
+			return { status: live, kind, pending: false };
+		}
+
+		if (this.#liveShown) {
+			this.#liveShown = false;
+			this.#exit = {
+				holdUntil: now + STATUS_HOLD_MS,
+				fadeMs: isMessageKind(this.#lastKind) ? 0 : WORKING_FADE_MS,
+			};
+		}
+
+		const exit = this.#exit;
+		if (!exit) return { status: undefined, kind: undefined, pending: false };
+		if (now < exit.holdUntil) {
+			return { status: this.#lastStatus, kind: this.#lastKind, pending: true };
+		}
+		const elapsed = now - exit.holdUntil;
+		if (elapsed >= exit.fadeMs) {
+			this.#clearExit();
+			return { status: undefined, kind: undefined, pending: false };
+		}
+		const half = exit.fadeMs / 2;
+		const outgoing = elapsed < half;
+		const leftFade = easeFade(outgoing ? 1 - elapsed / half : (elapsed - half) / half);
+		return {
+			status: outgoing ? this.#lastStatus : undefined,
+			kind: outgoing ? this.#lastKind : undefined,
+			leftFade,
+			pending: true,
+		};
+	}
+
+	pending(now: number): boolean {
+		const exit = this.#exit;
+		return exit !== undefined && now < exit.holdUntil + exit.fadeMs;
+	}
+
+	reset(): void {
+		this.#liveShown = false;
+		this.#clearExit();
+	}
+
+	#clearExit(): void {
+		this.#lastStatus = undefined;
+		this.#lastKind = undefined;
+		this.#exit = undefined;
+	}
+}