@underactive/pi-topping-statusline 0.1.3 → 0.2.0

package/src/tests/working.test.ts

@@ -0,0 +1,140 @@
+/**
+ * Contracts for the opt-in embedded working 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 (no ellipsis) before any other left segment is dropped.
+ */
+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("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

@@ -178,7 +178,6 @@ type ColorValue = string | number;
 
 export type StatusColor =
 	| "accent"
-	| "success"
 	| "error"
 	| "warning"
 	| "muted"
@@ -193,11 +192,13 @@ export type StatusColor =
 	| "statusLineContextElevated"
 	| "statusLineStaged"
 	| "statusLineDirty"
-	| "statusLineUntracked";
+	| "statusLineUntracked"
+	| "statusLineBg";
+
+const STATUS_LINE_BG: ColorValue = "#121212";
 
 const FG_COLORS: Record<StatusColor, ColorValue> = {
 	accent: "#febc38",
-	success: "#89d281",
 	error: "#fc3a4b",
 	warning: "#e4c00f",
 	muted: "#777d88",
@@ -213,10 +214,9 @@ const FG_COLORS: Record<StatusColor, ColorValue> = {
 	statusLineStaged: 70,
 	statusLineDirty: 178,
 	statusLineUntracked: 39,
+	statusLineBg: STATUS_LINE_BG,
 };
 
-const STATUS_LINE_BG: ColorValue = "#121212";
-
 /** Dominant palette hexes the session accent must not collide with. */
 export const MAJOR_COLOR_HEXES = [
 	"#febc38",
@@ -246,9 +246,21 @@ export function parseHex(hex: string): [number, number, number] | undefined {
 	return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
 }
 
-/** Number of discrete, eased shades used for the token-rate fade (pi-topping). */
+/** 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) {
@@ -275,11 +287,14 @@ function rgbTo256(r: number, g: number, b: number): number {
 	return 16 + 36 * scale(r) + 6 * scale(g) + scale(b);
 }
 
+function rgbToFgAnsi(r: number, g: number, b: number, mode: ColorMode): string {
+	return mode === "truecolor" ? `\x1b[38;2;${r};${g};${b}m` : `\x1b[38;5;${rgbTo256(r, g, b)}m`;
+}
+
 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`;
+	return rgbToFgAnsi(...rgb, mode);
 }
 
 function fgAnsi(color: ColorValue, mode: ColorMode): string {
@@ -355,16 +370,44 @@ 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);
 		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`;
+		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,8 @@ export interface StatusLineSettings {
 	rainbowBorder?: boolean;
 	/** Animate the rainbow border when it is visible. */
 	rainbowAnimation?: boolean;
+	/** Render pi's streaming working status in the top bar instead of its own row. */
+	embedWorkingStatus?: boolean;
 }
 
 /** Resolved per-segment render options; resolveEffectiveSettings always fills them. */
@@ -105,6 +108,7 @@ export interface EffectiveStatusLineSettings {
 	segmentOptions: StatusLineSegmentOptions;
 	rainbowBorder: boolean;
 	rainbowAnimation: boolean;
+	embedWorkingStatus: boolean;
 	includes: SegmentIncludes;
 }
 
@@ -133,6 +137,11 @@ export interface SegmentContext {
 	scrollHint: string | undefined;
 	/** Pi's own footer stats, when this frame needs them. */
 	piStats: string | undefined;
+	/**
+	 * Pi's embedded working indicator, pre-rendered and pre-colored by the host
+	 * for this frame. Absent while no response is streaming.
+	 */
+	workingStatus?: string;
 	/** Live tok/s display state, when this frame needs it. */
 	tokenRate: TokenRateDisplay | undefined;
 	/**
@@ -142,6 +151,19 @@ export interface SegmentContext {
 	 * entries, and those must not be shown as current.
 	 */
 	feedData: Record<string, unknown> | undefined;
+	/**
+	 * Lifecycle state per configured feed field. Missing state is treated as
+	 * active so previews and manually constructed contexts retain full color.
+	 */
+	feedDisplayState?: Record<string, FeedDisplayState>;
+}
+
+export type FeedPhase = "active" | "fading" | "hidden";
+
+export interface FeedDisplayState {
+	phase: FeedPhase;
+	/** Discrete fade step (0..FADE_SHADE_COUNT-1); meaningful while fading. */
+	fadeShade: number;
 }
 
 export type TokenRatePhase = "active" | "fading" | "idle";

package/src/utils.ts

@@ -65,10 +65,7 @@ export function clampPathLength(pwd: string, maxLen: number): string {
 
 /** Strip ANSI/VT escapes, map control chars to spaces, collapse whitespace. */
 export function sanitizeStatusText(text: string): string {
-	return stripVTControlCharacters(text)
-		.replace(/[\u0000-\u001f\u007f-\u009f]/g, " ")
-		.replace(/ +/g, " ")
-		.trim();
+	return sanitizeLabel(text).trim();
 }
 
 /**
@@ -77,7 +74,7 @@ export function sanitizeStatusText(text: string): string {
  */
 export function sanitizeLabel(text: string): string {
 	return stripVTControlCharacters(text)
-		.replace(/[\u0000-\u001f\u007f-\u009f]/g, " ")
+		.replace(/[\u0000-\u001f\u007f-\u009f\u200b-\u200f\u2028\u2029\u202a-\u202e\u2066-\u2069\ufeff]/g, " ")
 		.replace(/ +/g, " ");
 }
 
@@ -85,6 +82,11 @@ export function withIcon(icon: string, text: string): string {
 	return icon ? `${icon} ${text}` : text;
 }
 
+/** Unambiguous identity for one configured field of a feed publisher. */
+export function feedKey(customType: string, field: string): string {
+	return `${customType}\u0000${field}`;
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Session accent (djb2 hue hash, dark warm band, collision avoidance)
 // ═══════════════════════════════════════════════════════════════════════════