@underactive/pi-topping-statusline 0.2.7 → 0.3.0

package/README.md

@@ -62,10 +62,10 @@ and apply live.
 ╟─ Top Right Segment Group ──────────────────────────────────────╢
 ║    [ ] Token rate                                          OFF ║
 ║    [■] Session name                                        ON  ║
-║  … Bottom Right / Bottom Left groups — 8 more toggles          ║
+║  … Bottom Right / Bottom Left groups — 10 more rows            ║
 ║                                                                ║
 ╟─ Feeds ────────────────────────────────────────────────────────╢
-║    1. type         pi-prompt-cache/savings                     ║
+║    1. type         my-extension/savings                         ║
 ║    1. field        savedUsd                                    ║
 ║    1. prefix       CS                                          ║
 ║    1. format                                     ‹ currency ›  ║
@@ -73,7 +73,7 @@ and apply live.
 ║    + add feed                                                  ║
 ║                                                                ║
 ║  ↑↓ move  ←→ cycle  ␣ toggle  ⏎ apply/edit  esc cancel         ║
-╚════════════════════════════════════════════════════════[ 1/33 ]╝
+╚════════════════════════════════════════════════════════[ 1/35 ]╝
 ```
 
 | Section | Settings |
@@ -81,10 +81,12 @@ and apply live.
 | Global | Transparent Segments · Separator (`powerline` `powerline-thin` `slash` `pipe` `ascii`) · Symbols (`nerdfont` `unicode` `ascii` — stored in settings.json as `nerd`/`unicode`/`ascii`) · Border style (`rounded` `heavy` `double` `single`) · Rainbow border on max thinking · Animate rainbow border · NVIDIA-green when using Switchyard · Animate Switchyard green border · Embed status spinners · Embed compaction progress |
 | Top Left Segment Group | Pi symbol · Model · Provider · Thinking level · Path · Git · PR |
 | Top Right Segment Group | Token rate · Session name |
-| Bottom Right Segment Group | Feeds · Token rate · Pi stats · Context bar · Context stats |
+| Bottom Right Segment Group | Feeds · Token rate · Pi stats · Cache hit bar · CH bar segments (`3`–`10`) · Context bar · Context stats |
 | Bottom Left Segment Group | Scroll hint · Feeds · Token rate |
 | Feeds | One subscription per row: type · field · prefix · format, plus add/remove |
-| Defaults | Transparent on · Separator `powerline-thin` · Symbols `nerdfont` · Border style `rounded` · Rainbow border on · Animate rainbow border on · NVIDIA-green when using Switchyard on · Animate Switchyard green border on · Embed status spinners off · Embed compaction progress on |
+| Defaults | Transparent on · Separator `powerline-thin` · Symbols `nerdfont` · Border style `rounded` · Rainbow border on · Animate rainbow border on · NVIDIA-green when using Switchyard on · Animate Switchyard green border on · Embed status spinners off · Embed compaction progress on · CH bar segments `4` |
+
+**Cache hit bar** renders a logarithmic graph and its `CH` percentage as a separate bottom-right segment. **CH bar segments** sets its length, from 3 to 10 (default 4). Only a 0% hit rate leaves it empty; any hit fills the first cell, the second fills at 50% and the last at 99.2%, and the cells between are spaced evenly on a log scale of the miss rate, so every length keeps its resolution near 100%. At five segments the cells fill at above 0%, 50%, 87.5%, 96.9% and 99.2%, each quartering the remaining miss rate. The filled cells share one color picked from the hit rate at any length: red below 50%, orange below 87.5%, yellow below 96.9%, then a subdued green. When the Cache hit bar is enabled, the repeated `CH` field is removed from Pi stats; the configured separator sits between Pi stats, the cache-hit segment, and the context graph.
 
 With **Rainbow border on max thinking** on (the default), cycling the thinking level to `max`
 replaces the border's fixed theme color with a rainbow: a full hue cycle distributed around the
@@ -175,7 +177,7 @@ Each subscription is four fields, all configurable in the settings TUI:
 
 | Field | Meaning | Example |
 | --- | --- | --- |
-| type | the publisher's `customType` | `pi-prompt-cache/savings` |
+| type | the publisher's `customType` | `my-extension/savings` |
 | field | property of the entry's `data` to read | `savedUsd` |
 | prefix | literal label drawn before the value | `CS` |
 | format | `currency`, `number`, or `text` | `currency` |
@@ -185,10 +187,9 @@ In `settings.json` the first column is persisted as `customType`; the settings T
 it as `TOK ` when you want `TOK 42`; leading and trailing spaces survive, while escape
 sequences and control characters are stripped.
 
-The list ships seeded with the savings feed published by
-[pi-prompt-cache](https://github.com/underactive/pi-prompt-cache), which is where the
-`currency` rules come from: figures under half a cent are hidden, matching that extension's
-own footer cutoff so the two never disagree. That floor hides the negative values published
+The list ships empty. The `currency` rules come from the savings feed that
+pi-topping-compact (formerly pi-prompt-cache, a private extension) used to publish: figures
+under half a cent are hidden, matching that extension's own footer cutoff. That floor hides the negative values published
 early in a session, before the cache-write premium is amortized by reads. Above the floor,
 `currency` shows two decimals below $100 and whole dollars above.
 

package/index.ts

@@ -26,6 +26,7 @@ import {
 	type ExtensionContext,
 } from "@earendil-works/pi-coding-agent";
 import type { Component, TUI } from "@earendil-works/pi-tui";
+import { CHANNELS, emit } from "@underactive/pi-topping-primitives/contracts";
 import { makeBoxPainters, renderBoxRow, renderBoxRowIfVisible } from "./src/box.js";
 import { hostsCompactionProgress } from "./src/compaction-embed.js";
 import { CompactionMonitor } from "./src/compaction-progress.js";
@@ -46,7 +47,7 @@ import { theme } from "./src/theme.js";
 import { TokenRateMonitor } from "./src/token-rate.js";
 import type { StatusLineSegmentId } from "./src/types.js";
 import { isMessageKind, type StatusIndicatorKind, StatusTransition } from "./src/working-status.js";
-import { hostsWorkingStatus, WORKING_STATUS_EMBED_CHANNEL } from "./src/working-status-embed.js";
+import { hostsWorkingStatus } from "./src/working-status-embed.js";
 type EditorFactory = NonNullable<ReturnType<ExtensionContext["ui"]["getEditorComponent"]>>;
 
 const STATUS_ANIMATION_FRAME_MS = 30;
@@ -86,7 +87,7 @@ export default function (pi: ExtensionAPI) {
 	};
 
 	// pi-topping slides its loader's response model out only while this bar hosts the loader.
-	const announceEmbed = (embedded: boolean): void => pi.events.emit(WORKING_STATUS_EMBED_CHANNEL, { embedded });
+	const announceEmbed = (embedded: boolean): void => emit(pi.events, CHANNELS.workingStatusEmbedded, { embedded });
 
 	const requestRender = () => activeTui?.requestRender();
 	builder.setRequestRender(requestRender);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@underactive/pi-topping-statusline",
-	"version": "0.2.7",
+	"version": "0.3.0",
 	"description": "oh-my-pi's powerline statusline as a pi extension with some customizations",
 	"keywords": [
 		"pi-package",
@@ -31,7 +31,7 @@
 	],
 	"scripts": {
 		"typecheck": "tsc --noEmit",
-		"test": "node --import ./src/tests/ts-resolve.ts --test src/tests/*.test.ts"
+		"test": "node -C compiled --import ./src/tests/ts-resolve.ts --test src/tests/*.test.ts"
 	},
 	"pi": {
 		"extensions": [
@@ -45,10 +45,13 @@
 		"@earendil-works/pi-tui": "*"
 	},
 	"devDependencies": {
-		"@earendil-works/pi-ai": "1.1.0",
-		"@earendil-works/pi-coding-agent": "1.1.0",
-		"@earendil-works/pi-tui": "1.1.0",
+		"@earendil-works/pi-ai": "1.4.0",
+		"@earendil-works/pi-coding-agent": "1.4.0",
+		"@earendil-works/pi-tui": "1.4.0",
 		"@types/node": "^22.0.0",
 		"typescript": "^5.7.0"
+	},
+	"dependencies": {
+		"@underactive/pi-topping-primitives": "^0.10.0"
 	}
 }

package/src/cache-hit.ts

@@ -0,0 +1,107 @@
+import type { Usage } from "@earendil-works/pi-ai";
+import type { SessionEntry } from "@earendil-works/pi-coding-agent";
+import { FILLED, TROUGH } from "./context-graph.js";
+import { theme, type StatusColor } from "./theme.js";
+
+export const CACHE_HIT_MIN_CELLS = 3;
+export const CACHE_HIT_MAX_CELLS = 10;
+export const CACHE_HIT_DEFAULT_CELLS = 4;
+
+/** A bar of any size starts its log scale here: the second cell fills at 50% (a 50% miss rate)... */
+const SECOND_CELL_MISS_PERCENT = 50;
+/** ...and the last cell fills at 99.21875% (a 0.78125% miss rate, 64x below the second cell's). */
+const LAST_CELL_MISS_PERCENT = 0.78125;
+
+/**
+ * Hit-rate bands for the bar's single color, independent of the bar's size so a
+ * given hit rate reads the same at every length: red below 50%, orange below
+ * 87.5%, yellow below 96.875%, then a subdued green so high hit rates read as good.
+ */
+const CACHE_HIT_COLOR_BANDS: readonly { below: number; color: StatusColor }[] = [
+	{ below: 50, color: "error" },
+	{ below: 87.5, color: "statusLineContextElevated" },
+	{ below: 96.875, color: "warning" },
+];
+
+const tokens = (value: number): number => (Number.isFinite(value) ? Math.max(0, value) : 0);
+
+/**
+ * Pi's footer `CH` figure: cache reads over all prompt tokens (cache writes
+ * included) for the latest assistant response, not the session total. Null
+ * when no assistant response has reported prompt tokens.
+ */
+export function getCacheHitPercent(entries: readonly SessionEntry[]): number | null {
+	for (let i = entries.length - 1; i >= 0; i--) {
+		const entry = entries[i];
+		if (entry?.type !== "message" || entry.message.role !== "assistant") continue;
+		const usage: Usage | undefined = entry.message.usage;
+		if (!usage) return null;
+		const read = tokens(usage.cacheRead);
+		const promptTokens = tokens(usage.input) + read + tokens(usage.cacheWrite);
+		return promptTokens > 0 ? (read / promptTokens) * 100 : null;
+	}
+	return null;
+}
+
+/** The `CH<pct>%` figure in pi's footer stats line, when pi shows one. */
+const CH_STAT_RE = /(?:^|\s)CH(\d+(?:\.\d+)?)%/;
+
+export function parseCacheHitStat(stats: string | undefined): number | null {
+	const match = CH_STAT_RE.exec(stats ?? "");
+	return match ? Number(match[1]) : null;
+}
+
+/** Remove Pi's CH figure after it has been moved beside the cache-hit graph. */
+export function stripCacheHitStat(stats: string | undefined): string | undefined {
+	return stats?.replace(CH_STAT_RE, "").trim() || undefined;
+}
+
+/** A bar size from settings, snapped to a whole number in range; anything unusable becomes the default. */
+export function clampCacheHitCells(value: unknown): number {
+	if (typeof value !== "number" || !Number.isFinite(value)) return CACHE_HIT_DEFAULT_CELLS;
+	return Math.min(CACHE_HIT_MAX_CELLS, Math.max(CACHE_HIT_MIN_CELLS, Math.round(value)));
+}
+
+/**
+ * Hit rates at which cells 2..`cells` fill. The first cell is not listed: any hit
+ * above 0% fills it. The rest fill logarithmically, so the miss rate shrinks by
+ * the same factor from one cell to the next, from 50% at the second cell to
+ * 99.21875% at the last. That keeps the resolution near 100% at any size: five
+ * cells quarter the miss rate per cell (50, 87.5, 96.875, 99.21875), four cells
+ * cut it to an eighth, ten to roughly 0.59x.
+ */
+export function getCacheHitThresholds(cells: number): number[] {
+	const size = clampCacheHitCells(cells);
+	const steps = size - 2;
+	const thresholds: number[] = [];
+	for (let k = 0; k <= steps; k++) {
+		const miss = SECOND_CELL_MISS_PERCENT * (LAST_CELL_MISS_PERCENT / SECOND_CELL_MISS_PERCENT) ** (k / steps);
+		// Rounded so float noise cannot nudge an exact figure like 87.5 just past its own threshold.
+		thresholds.push(Math.round((100 - miss) * 1e6) / 1e6);
+	}
+	return thresholds;
+}
+
+/** Filled cells on a logarithmic scale: only 0% is empty, and any hit at all fills the first cell. */
+export function getCacheHitGraphCells(percent: number, cells = CACHE_HIT_DEFAULT_CELLS): number {
+	if (!Number.isFinite(percent) || percent <= 0) return 0;
+	return 1 + getCacheHitThresholds(cells).filter(threshold => percent >= threshold).length;
+}
+
+/** The bar's single color for a hit rate; the same bands at every bar size. */
+function getCacheHitColor(percent: number): StatusColor {
+	return CACHE_HIT_COLOR_BANDS.find(band => percent < band.below)?.color ?? "statusLineCacheHit";
+}
+
+/**
+ * Cache-hit graph of `cells` segments (3–10, default 4). The whole filled bar
+ * takes one color from the hit rate: red, orange, yellow, then a subdued green
+ * from 96.875% through a perfect hit.
+ */
+export function renderCacheHitGraph(percent: number, cells = CACHE_HIT_DEFAULT_CELLS): string {
+	const size = clampCacheHitCells(cells);
+	const filled = getCacheHitGraphCells(percent, size);
+	const filledPart = filled > 0 ? `${theme.getFgAnsi(getCacheHitColor(percent))}${FILLED.repeat(filled)}` : "";
+	const troughPart = filled < size ? `\x1b[39m\x1b[2m${TROUGH.repeat(size - filled)}\x1b[22m` : "";
+	return `${filledPart}${troughPart}\x1b[39m`;
+}

package/src/compaction-bar.ts

@@ -1,58 +1,18 @@
 /**
- * The compaction bar, drawn with the same cells and trough glyphs as the context graph.
+ * The compaction bar: the shared phosphor comet bar from the primitives package, drawn with the
+ * same cells and trough glyphs as the context graph. This module reads the terminal's colour
+ * depth for it.
  */
-import { CELLS, FILLED, TROUGH } from "./context-graph.js";
-import { detectColorMode, mixRgb, rgbToFgAnsi } from "./theme.js";
+import { renderCometBar } from "@underactive/pi-topping-primitives/color";
+import { detectColorMode } from "./theme.js";
 import type { ColorMode } from "./theme.js";
 
-const COMET_SWEEP_MS = 2_000;
-const COMET_START_PADDING_CELLS = 2;
-const COMET_END_PADDING_CELLS = 6;
-const COMET_HALF_WIDTH_CELLS = 1.5;
-const COMET_TRAIL_DECAY_CELLS = 3.2;
-
-const DEEP_GREEN: readonly [number, number, number] = [11, 61, 32];
-const BASE_GREEN: readonly [number, number, number] = [114, 241, 184];
-const LIGHT_GREEN: readonly [number, number, number] = [185, 248, 217];
-const TROUGH_GREEN: readonly [number, number, number] = [38, 100, 70];
-
-function cosineFalloff(distance: number, halfWidth: number): number {
-	if (distance >= halfWidth) return 0;
-	return 0.5 * (1 + Math.cos((Math.PI * distance) / halfWidth));
-}
-
-function normalizeElapsedMs(elapsedMs: number | undefined): number {
-	return Number.isFinite(elapsedMs) && elapsedMs !== undefined && elapsedMs > 0 ? elapsedMs : 0;
-}
-
-function renderCometCell(position: number, filled: number, elapsedMs: number, mode: ColorMode): string {
-	const phase = (elapsedMs % COMET_SWEEP_MS) / COMET_SWEEP_MS;
-	const head = filled + COMET_START_PADDING_CELLS - phase * (filled + COMET_END_PADDING_CELLS);
-	const behind = position - head;
-	const trail = behind >= 0 ? Math.exp(-behind / COMET_TRAIL_DECAY_CELLS) : 0;
-	const crest = cosineFalloff(Math.abs(position - head), COMET_HALF_WIDTH_CELLS);
-	const intensity = Math.min(1, Math.max(trail * 0.82, crest));
-	const trailBase = mixRgb(DEEP_GREEN, BASE_GREEN, 0.62 + 0.38 * trail);
-	const color = mixRgb(trailBase, LIGHT_GREEN, intensity * 0.9);
-	const emphasized = crest > 0.25;
-	return `${emphasized ? "\x1b[1m" : ""}${rgbToFgAnsi(...color, mode)}${FILLED}${emphasized ? "\x1b[22m" : ""}`;
-}
-
 export function renderCompactionBar(
 	percent: number,
 	opts: { mode?: ColorMode; shimmerElapsedMs?: number } = {},
 ): string {
-	const mode = opts.mode ?? detectColorMode();
-	const clamped = Number.isFinite(percent) ? Math.min(100, Math.max(0, percent)) : 0;
-	const filled = Math.min(CELLS, Math.max(0, Math.round((clamped * CELLS) / 100)));
-	const elapsedMs = normalizeElapsedMs(opts.shimmerElapsedMs);
-	let bar = "";
-	for (let i = 0; i < filled; i++) {
-		bar += renderCometCell(i, filled, elapsedMs, mode);
-	}
-	if (filled < CELLS) {
-		bar += `\x1b[39m\x1b[2m${rgbToFgAnsi(...TROUGH_GREEN, mode)}${TROUGH.repeat(CELLS - filled)}\x1b[22m`;
-	}
-	bar += "\x1b[39m";
-	return bar;
+	return renderCometBar(percent, {
+		mode: opts.mode ?? detectColorMode(),
+		elapsedMs: opts.shimmerElapsedMs,
+	});
 }

package/src/context-graph.ts

@@ -4,12 +4,15 @@
  * band its own position falls into, so the graph's gradient matches the bar's
  * context percentage color at every fill level.
  */
+import {
+	BAR_CELLS as CELLS,
+	BAR_FILLED as FILLED,
+	BAR_TROUGH as TROUGH,
+} from "@underactive/pi-topping-primitives/color";
 import { formatContextUsage, getContextUsageLevel, getContextUsageThemeColor } from "./context-thresholds.js";
 import { theme } from "./theme.js";
 
-export const CELLS = 20;
-export const FILLED = "\u258b";
-export const TROUGH = "\u2591";
+export { CELLS, FILLED, TROUGH };
 
 const cellColor = (percent: number, contextWindow: number): string =>
 	theme.getFgAnsi(getContextUsageThemeColor(getContextUsageLevel(percent, contextWindow)));

package/src/context.ts

@@ -14,6 +14,7 @@ import {
 	type ExtensionAPI,
 	type ExtensionContext,
 } from "@earendil-works/pi-coding-agent";
+import { getCacheHitPercent, parseCacheHitStat, stripCacheHitStat } from "./cache-hit.js";
 import { FADE_SHADE_COUNT } from "./theme.js";
 import type { FeedDisplayState, SegmentContext, SegmentIncludes, StatusLineSegmentOptions, TokenRateDisplay } from "./types.js";
 import { feedKey } from "./utils.js";
@@ -24,6 +25,8 @@ const EXEC_TIMEOUT_MS = 2_000;
 
 /** getEntries() filters and copies the whole session, so rescans are rate-limited. */
 const FEED_TTL_MS = 2_000;
+/** The fallback cache-hit rate reads the same append-only session data as Pi's footer. */
+const CACHE_HIT_TTL_MS = 250;
 /** Unchanged feed values remain fully visible for five minutes. */
 export const FEED_HOLD_MS = 5 * 60 * 1_000;
 /** Match the existing token-rate fade cadence. */
@@ -141,6 +144,8 @@ export class SegmentContextBuilder {
 	#feedTimerAt: number | undefined;
 
 	#contextEstimate: ContextEstimate | undefined;
+	#cacheHitPercent: number | null = null;
+	#cacheHitFetchedAt = 0;
 
 	constructor(pi: ExtensionAPI) {
 		this.#pi = pi;
@@ -160,7 +165,7 @@ export class SegmentContextBuilder {
 
 	attach(ctx: ExtensionContext): void {
 		this.#ctx = ctx;
-		// A publisher's figure typically covers one process run — pi-prompt-cache
+		// A publisher's figure typically covers one process run — pi-topping-compact
 		// restarts its savings at zero on every session start — while a resumed
 		// session still carries the previous run's entries. Anything predating this
 		// attach belongs to that stale run.
@@ -170,6 +175,8 @@ export class SegmentContextBuilder {
 		this.#feedsScannedKey = undefined;
 		this.#clearFeedLifecycle();
 		this.#contextEstimate = undefined;
+		this.#cacheHitPercent = null;
+		this.#cacheHitFetchedAt = 0;
 		if (this.#repoCwd !== ctx.cwd) {
 			this.#resetGitState();
 			this.#repoCwd = ctx.cwd;
@@ -307,7 +314,7 @@ export class SegmentContextBuilder {
 		if (!cwd || !this.#repo || this.#gitStatusInFlight) return;
 		this.#gitStatusInFlight = true;
 		try {
-			const out = await this.#exec("git", ["status", "--porcelain"], cwd);
+			const out = await this.#exec("git", ["-c", "core.fsmonitor=false", "status", "--porcelain"], cwd);
 			if (this.#repoCwd !== cwd) return;
 			this.#gitStatusFetchedAt = Date.now();
 			const next = out === undefined ? null : parseGitStatusCounts(out);
@@ -472,6 +479,13 @@ export class SegmentContextBuilder {
 		}
 	}
 
+	#deriveCacheHitPercent(ctx: ExtensionContext | undefined, now: number): number | null {
+		if (!ctx || now - this.#cacheHitFetchedAt < CACHE_HIT_TTL_MS) return this.#cacheHitPercent;
+		this.#cacheHitFetchedAt = now;
+		this.#cacheHitPercent = getCacheHitPercent(ctx.sessionManager.getEntries());
+		return this.#cacheHitPercent;
+	}
+
 	// ── snapshot ─────────────────────────────────────────────────────────────
 
 	build(
@@ -515,6 +529,17 @@ export class SegmentContextBuilder {
 			: undefined;
 
 		const { contextWindow, tokens, percent: contextPercent, estimated } = this.#deriveContextUsage(ctx);
+		// Pi's own CH figure wins so the graph always agrees with the stats beside it;
+		// the derived rate covers hosts or widths where pi's stats line is unavailable.
+		const piStats = include.piStats || include.cacheHit ? this.#piStatsProvider?.(width) : undefined;
+		const cacheHitPercent =
+			include.cacheHit
+				? piStats === undefined
+					? this.#deriveCacheHitPercent(ctx, now)
+					: parseCacheHitStat(piStats)
+				: null;
+		const shownPiStats =
+			include.piStats && include.cacheHit && cacheHitPercent !== null ? stripCacheHitStat(piStats) : piStats;
 
 		return {
 			options,
@@ -526,6 +551,7 @@ export class SegmentContextBuilder {
 			contextTokens: tokens,
 			contextWindow,
 			contextEstimated: estimated,
+			cacheHitPercent,
 			git: {
 				branch: include.git || include.pr ? this.#branch : null,
 				status: include.git ? this.#gitStatus : null,
@@ -533,7 +559,7 @@ export class SegmentContextBuilder {
 			},
 			worktree: this.#worktree,
 			scrollHint,
-			piStats: include.piStats ? this.#piStatsProvider?.(width) : undefined,
+			piStats: include.piStats ? shownPiStats : undefined,
 			tokenRate: include.tokenRate ? this.#tokenRateProvider?.() : undefined,
 			feedData: include.feeds.length > 0 ? this.#feedData : undefined,
 			feedDisplayState,

package/src/footer.ts

@@ -2,11 +2,9 @@
  * Pure helpers for parsing host-rendered rows: the editor's plain ─── border
  * rows (with or without the scroll hint) and the default footer's stats line.
  */
-const ANSI_RE = /\x1b\[[0-9;]*m/g;
+import { stripSgr as stripAnsi } from "@underactive/pi-topping-primitives/text";
 
-export function stripAnsi(str: string): string {
-	return str.replace(ANSI_RE, "");
-}
+export { stripAnsi };
 
 /** Drop host footer rows that contain only whitespace or SGR control codes. */
 export function filterVisibleRows(rows: readonly string[]): string[] {

package/src/nvidia-green.ts

@@ -1,17 +1,21 @@
 /** Provider-specific NVIDIA green border colorizer for Switchyard. */
-import { wrapDeg, type BorderColorizer } from "./rainbow.js";
-import { detectColorMode, mixRgb, parseHex, rgbToFgAnsi, type ColorMode } from "./theme.js";
+import {
+	isSwitchyardProvider,
+	mixRgb,
+	NVIDIA_GREEN_DARK_HEX,
+	NVIDIA_GREEN_HEX,
+	parseHex,
+	rgbToFgAnsi,
+	wrapDeg,
+} from "@underactive/pi-topping-primitives/color";
+import type { BorderColorizer } from "./rainbow.js";
+import { detectColorMode, type ColorMode } from "./theme.js";
+
+export { isSwitchyardProvider, NVIDIA_GREEN_DARK_HEX, NVIDIA_GREEN_HEX };
 
-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[] {
@@ -28,7 +32,7 @@ function buildAnsiByShade(mode: ColorMode): string[] {
 	for (let i = 0; i < GREEN_SHADE_COUNT; i++) {
 		const progress = i / (GREEN_SHADE_COUNT - 1);
 		const rgb = mixRgb(dark, bright, progress);
-		ansiByShade.push(rgbToFgAnsi(...rgb, mode));
+		ansiByShade.push(rgbToFgAnsi(rgb, mode));
 	}
 
 	ansiByShadeByMode.set(mode, ansiByShade);

package/src/rainbow.ts

@@ -12,7 +12,8 @@
  * (renderBoxed in index.ts) or construct a fresh instance with a phase
  * derived from elapsed time (the settings preview).
  */
-import { detectColorMode, rgbToFgAnsi, type ColorMode } from "./theme.js";
+import { hslToRgb, rgbToFgAnsi, wrapDeg } from "@underactive/pi-topping-primitives/color";
+import { detectColorMode, type ColorMode } from "./theme.js";
 
 /** Frame cadence of the sweep (also the settings-preview refresh delay). */
 export const RAINBOW_FRAME_MS = 50;
@@ -25,9 +26,6 @@ const SATURATION = 1;
 const LIGHTNESS = 0.62;
 const ansiByHueByMode = new Map<ColorMode, string[]>();
 
-/** 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
@@ -50,24 +48,6 @@ export function perimeterPosition(row: number, col: number, width: number, botto
 	return 2 * width + 2 * bottomIdx - 2 - row; // col === 0
 }
 
-export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-	const c = (1 - Math.abs(2 * l - 1)) * s;
-	const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-	const m = l - c / 2;
-	let rgb: [number, number, number];
-	if (h < 60) rgb = [c, x, 0];
-	else if (h < 120) rgb = [x, c, 0];
-	else if (h < 180) rgb = [0, c, x];
-	else if (h < 240) rgb = [0, x, c];
-	else if (h < 300) rgb = [x, 0, c];
-	else rgb = [c, 0, x];
-	return [Math.round((rgb[0] + m) * 255), Math.round((rgb[1] + m) * 255), Math.round((rgb[2] + m) * 255)];
-}
-
-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. */
@@ -107,7 +87,7 @@ export class RainbowBorder implements BorderColorizer {
 		const bucket = Math.round(hue) % 360;
 		let ansi = ansiByHue[bucket];
 		if (ansi === undefined) {
-			ansi = rgbToFgAnsi(...hslToRgb(bucket, SATURATION, LIGHTNESS), mode);
+			ansi = rgbToFgAnsi(hslToRgb(bucket, SATURATION, LIGHTNESS), mode);
 			ansiByHue[bucket] = ansi;
 		}
 		return ansi;

package/src/segments.ts

@@ -8,6 +8,7 @@
 import * as os from "node:os";
 import * as path from "node:path";
 import { getCapabilities, hyperlink, truncateToWidth } from "@earendil-works/pi-tui";
+import { renderCacheHitGraph } from "./cache-hit.js";
 import { renderContextGraph } from "./context-graph.js";
 import { formatContextUsage } from "./context-thresholds.js";
 import { MAJOR_COLOR_HEXES, hexToFgAnsi, theme } from "./theme.js";
@@ -250,7 +251,7 @@ const tokenRateSegment: StatusLineSegment = {
 };
 
 /**
- * Half a cent is pi-prompt-cache's own display cutoff. Matching it keeps this
+ * Half a cent is pi-topping-compact's own display cutoff. Matching it keeps this
  * segment and that extension's footer from ever contradicting each other, and
  * suppresses the negative figures published early in a session while the
  * cache-write premium has yet to be amortized by reads.
@@ -329,6 +330,16 @@ const workingSegment: StatusLineSegment = {
 	},
 };
 
+/** Cache-hit graph + its moved CH figure; related parts stay in one segment. */
+const cacheHitGraphSegment: StatusLineSegment = {
+	id: "cache_hit_graph",
+	render(ctx) {
+		const percent = ctx.cacheHitPercent;
+		if (percent == null) return INVISIBLE;
+		return { content: `${renderCacheHitGraph(percent, ctx.options.cacheHit.cells)} ${theme.fg("dim", `CH${percent.toFixed(1)}%`)}`, visible: true };
+	},
+};
+
 /** Context bar + stats — related parts joined by a space, not the group separator. */
 const contextGraphSegment: StatusLineSegment = {
 	id: "context_graph",
@@ -436,6 +447,7 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	pi_stats: piStatsSegment,
 	token_rate: tokenRateSegment,
 	feeds: feedsSegment,
+	cache_hit_graph: cacheHitGraphSegment,
 	context_graph: contextGraphSegment,
 	scroll_hint: scrollHintSegment,
 	working: workingSegment,