@underactive/pi-topping-statusline 0.2.0 → 0.2.2

package/src/menu.ts

@@ -16,7 +16,7 @@
  *   ║ ╭── π ⬢ model ───────────────────── session ──╮  ║
  *   ║                                                  ║
  *   ╟─ Global ─────────────────────────────────────────╢
- *   ║  ▸ [■] Transparent Segments                ON    ║
+ *   ║  > [■] Transparent Segments                ON    ║
  *   ║    Separator                ‹ powerline-thin ›   ║
  *   ║                                                  ║
  *   ╟──────────────────────────────────────────────────╢
@@ -118,11 +118,6 @@ const PLAIN_ROW_PREFIX_LEN = 5;
 const CHECKBOX_ROW_PREFIX_LEN = 8;
 
 interface FlatItem {
-	id: string;
-	label: string;
-	cycleValues?: readonly string[];
-	cycleEnabledBy?: string;
-	cycleDisabledValue?: string;
 	item: MenuItem;
 	sectionIndex: number;
 }
@@ -131,15 +126,7 @@ function flattenSections(sections: MenuSection[]): FlatItem[] {
 	const flat: FlatItem[] = [];
 	for (const [sectionIndex, section] of sections.entries()) {
 		for (const item of section.items) {
-			flat.push({
-				id: item.id,
-				label: item.label,
-				cycleValues: item.cycleValues,
-				cycleEnabledBy: item.cycleEnabledBy,
-				cycleDisabledValue: item.cycleDisabledValue,
-				item,
-				sectionIndex,
-			});
+			flat.push({ item, sectionIndex });
 		}
 	}
 	return flat;
@@ -260,26 +247,26 @@ export class MenuComponent implements Component {
 			[Key.space]: () => {
 				const item = this.flat[this.cursor]!;
 				if (item.item.action) {
-					this.runAction(item.id);
+					this.runAction(item.item.id);
 					return;
 				}
 				if (item.item.text) {
 					this.beginEditing(item);
 					return;
 				}
-				if (item.cycleValues && item.cycleEnabledBy) {
-					this.values[item.cycleEnabledBy] = !this.values[item.cycleEnabledBy] as boolean;
-					if (!this.values[item.cycleEnabledBy] && item.cycleDisabledValue !== undefined) {
-						this.values[item.id] = item.cycleDisabledValue;
+				if (item.item.cycleValues && item.item.cycleEnabledBy) {
+					this.values[item.item.cycleEnabledBy] = !this.values[item.item.cycleEnabledBy] as boolean;
+					if (!this.values[item.item.cycleEnabledBy] && item.item.cycleDisabledValue !== undefined) {
+						this.values[item.item.id] = item.item.cycleDisabledValue;
 					}
-				} else if (!item.cycleValues) this.values[item.id] = !this.values[item.id] as boolean;
+				} else if (!item.item.cycleValues) this.values[item.item.id] = !this.values[item.item.id] as boolean;
 				this.invalidate();
 			},
 			// Enter opens an editor or fires an action on those rows, so applying
 			// the whole menu stays available from any other row.
 			[Key.enter]: () => {
 				const item = this.flat[this.cursor]!;
-				if (item.item.action) this.runAction(item.id);
+				if (item.item.action) this.runAction(item.item.id);
 				else if (item.item.text) this.beginEditing(item);
 				else this.done({ applied: true, values: { ...this.values } });
 			},
@@ -297,7 +284,7 @@ export class MenuComponent implements Component {
 	}
 
 	private beginEditing(item: FlatItem): void {
-		this.editing = { id: item.id, buffer: String(this.values[item.id] ?? "") };
+		this.editing = { id: item.item.id, buffer: String(this.values[item.item.id] ?? "") };
 		this.invalidate();
 	}
 
@@ -373,10 +360,10 @@ export class MenuComponent implements Component {
 
 	private cycleCurrentValue(delta: number): void {
 		const item = this.flat[this.cursor]!;
-		if (!item.cycleValues?.length || (item.cycleEnabledBy && !this.values[item.cycleEnabledBy])) return;
-		const current = item.cycleValues.indexOf(this.values[item.id] as string);
-		const index = (current + delta + item.cycleValues.length) % item.cycleValues.length;
-		this.values[item.id] = item.cycleValues[index]!;
+		if (!item.item.cycleValues?.length || (item.item.cycleEnabledBy && !this.values[item.item.cycleEnabledBy])) return;
+		const current = item.item.cycleValues.indexOf(this.values[item.item.id] as string);
+		const index = (current + delta + item.item.cycleValues.length) % item.item.cycleValues.length;
+		this.values[item.item.id] = item.item.cycleValues[index]!;
 		this.invalidate();
 	}
 
@@ -386,7 +373,7 @@ export class MenuComponent implements Component {
 		const result = this.previewFn(
 			this.values,
 			this.previewOrigin !== undefined ? Date.now() - this.previewOrigin : 0,
-			this.flat[this.cursor]?.id,
+			this.flat[this.cursor]?.item.id,
 			innerWidth,
 		);
 		if (Array.isArray(result)) {
@@ -500,8 +487,8 @@ export class MenuComponent implements Component {
 	}
 
 	private availableRows(): number | undefined {
-		const rows = (this.tui as (TUI & { terminal?: { rows?: number } }) | undefined)?.terminal?.rows;
-		return typeof rows === "number" && Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : undefined;
+		const rows = this.tui?.terminal.rows;
+		return rows !== undefined && rows > 0 ? rows : undefined;
 	}
 
 	private buildLines(maxWidth: number, maxRows?: number): string[] {
@@ -597,15 +584,17 @@ export class MenuComponent implements Component {
 	private renderItemRow(item: MenuItem, selected: boolean, innerWidth: number): string {
 		const th = this.theme;
 		const value = this.values[item.id]!;
-		const marker = selected ? "\u25b8" : " ";
+		const marker = selected ? ">" : " ";
 		const markerColored = selected ? th.fg("accent", marker) : marker;
+		const rowBackground = (content: string) =>
+			selected ? th.bg("selectedBg", content.replaceAll("\x1b[0m", `\x1b[0m${th.getBgAnsi("selectedBg")}`)) : content;
 
 		if (item.action) {
 			const label = truncateToWidth(item.label, Math.max(0, innerWidth - 5));
 			const leftPlain = `  ${marker} ${label}`;
 			const pad = Math.max(0, innerWidth - visibleWidth(leftPlain));
 			const content = `  ${markerColored} ${th.fg(selected ? "accent" : "muted", label)}${" ".repeat(pad)}`;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", rowBackground(content), "\u2551");
 		}
 
 		if (item.text) {
@@ -626,7 +615,7 @@ export class MenuComponent implements Component {
 			const leftPlain = `  ${marker} ${label} ${fieldText}${caret}`;
 			const pad = Math.max(0, innerWidth - visibleWidth(leftPlain) - 1);
 			const content = `  ${markerColored} ${th.fg("dim", label)} ${fieldStyled}${editing ? th.fg("accent", caret) : ""}${" ".repeat(pad)} `;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", rowBackground(content), "\u2551");
 		}
 
 		if (item.cycleValues) {
@@ -638,7 +627,7 @@ export class MenuComponent implements Component {
 				const leftPlain = `  ${marker} ${label}`;
 				const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
 				const content = `  ${markerColored} ${th.fg("text", label)}${" ".repeat(gap)}${th.fg("accent", stateWord)}  `;
-				return this.wrap("\u2551", content, "\u2551");
+				return this.wrap("\u2551", rowBackground(content), "\u2551");
 			}
 			const enabled = this.values[item.cycleEnabledBy] as boolean;
 			const maxLabelLen = Math.max(0, innerWidth - CHECKBOX_ROW_PREFIX_LEN - visibleWidth(stateWord) - 1);
@@ -646,7 +635,7 @@ export class MenuComponent implements Component {
 			const leftPlain = `  ${marker} [${enabled ? "■" : " "}] ${label}`;
 			const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
 			const content = `  ${markerColored} [${enabled ? th.fg("success", "■") : th.fg("muted", " ")}] ${th.fg("text", label)}${" ".repeat(gap)}${enabled ? th.fg("accent", stateWord) : th.fg("muted", stateWord)}  `;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", rowBackground(content), "\u2551");
 		}
 
 		const enabled = value as boolean;
@@ -658,7 +647,7 @@ export class MenuComponent implements Component {
 		const leftPlain = `  ${marker} [${box}] ${label}`;
 		const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(rightPlain));
 		const content = `  ${markerColored} [${enabled ? th.fg("success", box) : th.fg("muted", box)}] ${th.fg("text", label)}${" ".repeat(gap)}${enabled ? th.fg("success", stateWord) : th.fg("muted", stateWord)}  `;
-		return this.wrap("\u2551", content, "\u2551");
+		return this.wrap("\u2551", rowBackground(content), "\u2551");
 	}
 }
 

package/src/nvidia-green.ts

@@ -0,0 +1,66 @@
+/** Provider-specific NVIDIA green border colorizer for Switchyard. */
+import { rgbToHex, wrapDeg, type BorderColorizer } from "./rainbow.js";
+import { detectColorMode, hexToFgAnsi, parseHex, type ColorMode } from "./theme.js";
+
+export const SWITCHYARD_PROVIDER = "switchyard";
+export const NVIDIA_GREEN_HEX = "#84c51a";
+export const NVIDIA_GREEN_DARK_HEX = "#0b3d20";
+const GREEN_SHADE_COUNT = 256;
+const GREEN_BIAS = 0.65;
+
+export function isSwitchyardProvider(provider: string | undefined): boolean {
+	return provider?.trim().toLowerCase() === SWITCHYARD_PROVIDER;
+}
+
+const ansiByShadeByMode = new Map<ColorMode, string[]>();
+
+function buildAnsiByShade(mode: ColorMode): string[] {
+	const cached = ansiByShadeByMode.get(mode);
+	if (cached !== undefined) return cached;
+
+	const dark = parseHex(NVIDIA_GREEN_DARK_HEX);
+	const bright = parseHex(NVIDIA_GREEN_HEX);
+	if (dark === undefined || bright === undefined) {
+		throw new Error("Invalid NVIDIA green palette");
+	}
+
+	const ansiByShade: string[] = [];
+	for (let i = 0; i < GREEN_SHADE_COUNT; i++) {
+		const progress = i / (GREEN_SHADE_COUNT - 1);
+		const rgb: [number, number, number] = [
+			Math.round(dark[0] + (bright[0] - dark[0]) * progress),
+			Math.round(dark[1] + (bright[1] - dark[1]) * progress),
+			Math.round(dark[2] + (bright[2] - dark[2]) * progress),
+		];
+		ansiByShade.push(hexToFgAnsi(rgbToHex(rgb), mode));
+	}
+
+	ansiByShadeByMode.set(mode, ansiByShade);
+	return ansiByShade;
+}
+
+export class NvidiaGreenBorder implements BorderColorizer {
+	#phaseDeg: number;
+	readonly #ansiByShade: string[];
+
+	constructor(phaseDeg = 0) {
+		this.#phaseDeg = wrapDeg(phaseDeg);
+		this.#ansiByShade = buildAnsiByShade(detectColorMode());
+	}
+
+	step(deltaDeg: number): void {
+		this.#phaseDeg = wrapDeg(this.#phaseDeg + deltaDeg);
+	}
+
+	colorChar(char: string, perimeterPos: number, perimeter: number): string {
+		return `${this.prefix(perimeterPos, perimeter)}${char}\x1b[39m`;
+	}
+
+	prefix(perimeterPos: number, perimeter: number): string {
+		const t = (perimeterPos / perimeter + this.#phaseDeg / 360) % 1;
+		const u = (1 - Math.cos(2 * Math.PI * t)) / 2;
+		const eased = u ** GREEN_BIAS;
+		const shadeIndex = Math.round((1 - eased) * (GREEN_SHADE_COUNT - 1));
+		return this.#ansiByShade[shadeIndex];
+	}
+}

package/src/rainbow.ts

@@ -24,6 +24,9 @@ export const RAINBOW_DEG_PER_FRAME = (360 * RAINBOW_FRAME_MS) / RAINBOW_CYCLE_MS
 const SATURATION = 1;
 const LIGHTNESS = 0.62;
 
+/** Normalize a degree value into the [0, 360) range. */
+export const wrapDeg = (deg: number): number => ((deg % 360) + 360) % 360;
+
 /**
  * Number of border cells in the box (rows 0..bottomIdx, cols 0..width-1):
  * two horizontal edges of `width` cells plus two vertical edges of
@@ -64,27 +67,38 @@ export function rgbToHex([r, g, b]: [number, number, number]): string {
 	return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
 }
 
+export interface BorderColorizer {
+	colorChar(ch: string, perimeterPos: number, perimeter: number): string;
+	/** ANSI foreground-color escape for a perimeter position, with no glyph or reset. */
+	prefix(perimeterPos: number, perimeter: number): string;
+	step(deltaDeg: number): void;
+}
+
 /**
  * Colors box glyphs with a hue that travels around the border perimeter as
  * the phase advances — the spectrum appears to flow around the box.
  */
-export class RainbowBorder {
+export class RainbowBorder implements BorderColorizer {
 	#phaseDeg: number;
 	readonly #mode: ColorMode;
 	readonly #ansiByHue: string[] = [];
 
 	constructor(phaseDeg = 0) {
-		this.#phaseDeg = ((phaseDeg % 360) + 360) % 360;
+		this.#phaseDeg = wrapDeg(phaseDeg);
 		this.#mode = detectColorMode();
 	}
 
 	/** Advance the whole spectrum by `deltaDeg` (mod 360). */
 	step(deltaDeg: number): void {
-		this.#phaseDeg = ((this.#phaseDeg + deltaDeg) % 360 + 360) % 360;
+		this.#phaseDeg = wrapDeg(this.#phaseDeg + deltaDeg);
 	}
 
 	/** Color one border glyph whose walk position is `perimeterPos` of `perimeter`. */
 	colorChar(char: string, perimeterPos: number, perimeter: number): string {
+		return `${this.prefix(perimeterPos, perimeter)}${char}\x1b[39m`;
+	}
+
+	prefix(perimeterPos: number, perimeter: number): string {
 		const hue = (this.#phaseDeg + (360 * perimeterPos) / perimeter) % 360;
 		const bucket = Math.round(hue) % 360;
 		let ansi = this.#ansiByHue[bucket];
@@ -93,6 +107,6 @@ export class RainbowBorder {
 			ansi = hexToFgAnsi(hex, this.#mode);
 			this.#ansiByHue[bucket] = ansi;
 		}
-		return `${ansi}${char}\x1b[39m`;
+		return ansi;
 	}
 }

package/src/segments.ts

@@ -14,6 +14,7 @@ import { MAJOR_COLOR_HEXES, hexToFgAnsi, theme } from "./theme.js";
 import {
 	clampPathLength,
 	feedKey,
+	formatNumber,
 	getSessionAccentHex,
 	sanitizeLabel,
 	sanitizeStatusText,
@@ -21,6 +22,7 @@ import {
 	withIcon,
 } from "./utils.js";
 import type {
+	CompactionProgressView,
 	FeedFormat,
 	RenderedSegment,
 	SegmentContext,
@@ -75,6 +77,24 @@ function classifyProjectDir(pwd: string): { scratch: boolean; relative: string |
 	return { scratch: false, relative: null };
 }
 
+interface PathClassification {
+	scratch: boolean;
+	relative: string | null;
+	strippedDisplay: string;
+}
+
+let cachedCwd: string | undefined;
+let cachedClassification: PathClassification | undefined;
+
+/** cwd is effectively constant for a session, so cache the root scans instead of redoing them on every render (including repeated shrink passes). */
+function classifyCwd(cwd: string): PathClassification {
+	if (cachedCwd === cwd && cachedClassification) return cachedClassification;
+	const { scratch, relative } = classifyProjectDir(cwd);
+	cachedClassification = { scratch, relative, strippedDisplay: stripDisplayRoot(cwd) };
+	cachedCwd = cwd;
+	return cachedClassification;
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Segment implementations
 // ═══════════════════════════════════════════════════════════════════════════
@@ -133,14 +153,14 @@ const pathSegment: StatusLineSegment = {
 			return { content: theme.fg("statusLinePath", content), visible: true };
 		}
 
-		const { scratch, relative } = classifyProjectDir(ctx.cwd);
+		const { scratch, relative, strippedDisplay } = classifyCwd(ctx.cwd);
 		let pwd = ctx.cwd;
 
 		if (opts.stripWorkPrefix) {
 			if (scratch) {
 				if (relative) pwd = relative;
 			} else {
-				pwd = stripDisplayRoot(pwd);
+				pwd = strippedDisplay;
 			}
 		}
 		if (opts.abbreviate) {
@@ -296,9 +316,9 @@ const scrollHintSegment: StatusLineSegment = {
 };
 
 /**
- * Pi's embedded working indicator (spinner + message), already colored by the
- * host, so it is passed through verbatim. The layout truncates it, without an
- * ellipsis, when it overflows, mirroring pi's own border rendering.
+ * Pi's embedded status spinner (spinner + message), already colored by the
+ * host, so it is passed through verbatim. The layout applies the caller's
+ * truncation style: a bare cut for working, ellipsis for message-style kinds.
  */
 const workingSegment: StatusLineSegment = {
 	id: "working",
@@ -326,12 +346,62 @@ const contextGraphSegment: StatusLineSegment = {
 				labelColor: theme.getFgAnsi("dim"),
 				showBar,
 				showStats,
+				estimated: ctx.contextEstimated === true,
 			}),
 			visible: true,
 		};
 	},
 };
 
+const clampPercent = (percent: number): number => Math.round(Math.min(100, Math.max(0, percent)));
+
+/** "57% summarized · 16.3s": how much of the context has been summarized so far, and the time taken. */
+export function formatCompactionInfo(view: CompactionProgressView): string {
+	const elapsed = `${(Math.max(0, view.elapsedMs) / 1000).toFixed(1)}s`;
+	return `${clampPercent(view.percent)}% summarized${theme.sep.dot}${elapsed}`;
+}
+
+/**
+ * "86K/131K (66%)": the tokens being compacted over the window, and as a share
+ * of it, in the context label's number style. The share is omitted when the
+ * window is unknown.
+ */
+export function formatCompactionTokens(view: CompactionProgressView): string {
+	const before = formatNumber(Math.max(0, view.tokensBefore));
+	if (view.contextWindow <= 0) return `${before}/?`;
+	const usage = clampPercent((view.tokensBefore / view.contextWindow) * 100);
+	return `${before}/${formatNumber(view.contextWindow)} (${usage}%)`;
+}
+
+/** pi-topping-compact's figures, standing in for pi's stats while its progress is hosted. */
+const compactionInfoSegment: StatusLineSegment = {
+	id: "compaction_info",
+	render(ctx) {
+		const view = ctx.compaction;
+		if (!view) return INVISIBLE;
+		return { content: theme.fg("dim", formatCompactionInfo(view)), visible: true };
+	},
+};
+
+/**
+ * pi-topping-compact's bar, standing in for the context graph while its progress
+ * is hosted, under the graph's own bar and stats toggles. The bar arrives
+ * pre-rendered with fg-only resets, so it is passed through verbatim.
+ */
+const compactionGraphSegment: StatusLineSegment = {
+	id: "compaction_graph",
+	render(ctx) {
+		const view = ctx.compaction;
+		if (!view) return INVISIBLE;
+		const { showBar, showStats } = ctx.options.context;
+		const parts: string[] = [];
+		if (showBar) parts.push(view.bar);
+		if (showStats) parts.push(theme.fg("dim", formatCompactionTokens(view)));
+		if (parts.length === 0) return INVISIBLE;
+		return { content: parts.join(" "), visible: true };
+	},
+};
+
 const accentAnsi = new Map<string, string>();
 
 const sessionNameSegment: StatusLineSegment = {
@@ -366,6 +436,8 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	context_graph: contextGraphSegment,
 	scroll_hint: scrollHintSegment,
 	working: workingSegment,
+	compaction_info: compactionInfoSegment,
+	compaction_graph: compactionGraphSegment,
 };
 
 export function renderSegment(id: StatusLineSegmentId, ctx: SegmentContext): RenderedSegment {