@underactive/pi-topping 0.4.0 → 0.5.0

package/README.md

@@ -2,60 +2,70 @@
 
 We garnish our pies. It seemed rude not to extend Pi the same courtesy. This is a [Pi](https://github.com/earendil-works/pi-coding-agent) extension that adds some quality of life improvements to Pi's UX, while looking good in the process:
 
-**User Prompt** — high-vis bordered prompt box with configurable border color and style, pi icon toggle, and timestamp.
+**User Prompt** — high-vis bordered prompt box with configurable border color and style, pi icon toggle, timestamp, and provider/model label.
 
 ![Example of pi-topping's decorated user prompt](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_user_prompt.png)
 
-**“Working” Loader** — animated spinner (with color choice), randomized activity word, shimmer (with direction and speed), token activity meter (with color, direction, and dim toggle), elapsed timer, and output token display — all arrangeable left to right.
+**“Working” Loader** — animated spinner (with color choice), randomized activity word, shimmer (with direction, speed, and invert option), token activity monitor (with color, direction, and dim toggle), elapsed timer, output token display, and live output-token rate (with color choice and dim toggle) — all arrangeable left to right.
 
-![Demo of pi-topping's shimmering activity word, scrolling activity meter, elapsed timer, and token count](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo.gif)
+![Demo of pi-topping's shimmering activity word, scrolling activity meter, elapsed timer, token count, and token rate](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo.gif)
 
-**Completion Marker** — end-of-turn marker with icon, randomized verb, and token consumption display. If you steered or followed up (`Alt+Enter`) while Pi was working, the marker also tallies those, e.g. `π Whisked for 2s (↓ 55 tokens · 2 mid-turn inputs)`. Hooks into Pi's `agent_settled` event.
+**Completion Marker** — end-of-turn marker with icon, randomized verb, token consumption display, and optional border-style/color decorations. Border style defaults to `none`; `heavy` renders e.g. `┗━━ π Mustered for 4s (↓ 25 tokens) ━━━━━━ ━━━━ ━━ ━`. If you steered or followed up (`Alt+Enter`) while Pi was working, the marker also tallies those, e.g. `π Whisked for 2s (↓ 55 tokens · 2 mid-turn inputs)`. Hooks into Pi's `agent_settled` event.
 
 ![Example of pi-topping's completion marker](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_completion_marker.png)
 
 ## Settings
 
-Run `/topping-settings` (TUI only) to customize your toppings:
+Run `/topping-settings` (TUI only) to customize your toppings. Settings persist to
+`~/.pi/agent/pi-topping/settings.json`; hand edits are tolerated on load.
 
 ```
-╔═┥ Pi Topping: Settings ┝═══════════════════════════════════╗
+╔═[ Pi Topping: Settings ]═══════════════════════════════════╗
 ╟─ Preview ──────────────────────────────────────────────────╢
 ║                                                            ║
-║    Crafting (0m 03s · ↓ 84 tokens)                         ║
+║ ⠋ Crafting… ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tok/s · 3s · ↓ 84 tokens           ║
 ║                                                            ║
 ╟─ User Prompt ──────────────────────────────────────────────╢
 ║    [■] High-vis prompt                                ON   ║
-║    [■] Border color                             ‹ accent › ║
 ║    [■] Border style                             ‹ double › ║
+║    [■] Border color                       ‹ borderAccent › ║
 ║    [■] Pi icon                                        ON   ║
 ║    [■] Timestamp                                      ON   ║
+║    [■] Provider                                       ON   ║
+║    [■] Model                                          ON   ║
 ║                                                            ║
 ╟─ “Working” Loader ─────────────────────────────────────────╢
 ║    [■] Animated spinner                               ON   ║
-║  ▸ [■] Animated spinner color                   ‹ accent › ║
-║    [■] Randomize "Working" text                       ON   ║
+║  ❯ [■] Animated spinner color                   ‹ accent › ║
+║    [■] Randomize “Working” text                       ON   ║
 ║    [■] Text shimmer                                   ON   ║
+║    [■] Invert shimmer                                OFF   ║
 ║    [■] Text shimmer direction            ‹ Left to Right › ║
 ║    [■] Text shimmer speed                       ‹ Normal › ║
 ║    [■] Token activity monitor                         ON   ║
 ║    [■] Token activity monitor color             ‹ accent › ║
-║    [■] Token activity monitor direction  ‹ Left to Right › ║
+║    [■] Token activity monitor direction  ‹ Right to Left › ║
 ║    [■] Token activity monitor dimmed                 OFF   ║
 ║    [■] Elapsed time since prompt                      ON   ║
 ║    [■] Show output tokens                             ON   ║
+║    [■] Token rate                                     ON   ║
+║    [■] Token rate color                        ‹ warning › ║
+║    [■] Token rate dimmed                             OFF   ║
 ║                                                            ║
 ╟─ Elements Order ───────────────────────────────────────────╢
 ║    [ ] Animated spinner                                    ║
-║    [■] “Working” text                                ↑ ↓   ║
+║    [ ] “Working” text                                      ║
 ║    [ ] Token activity monitor                              ║
+║    [ ] Token rate                                          ║
 ║    [ ] Elapsed time                                        ║
 ║    [ ] Output tokens                                       ║
 ║                                                            ║
 ╟─ Completion Marker ────────────────────────────────────────╢
 ║    [■] Show completion marker                         ON   ║
+║    [■] Border style                               ‹ none › ║
+║    [■] Border color                       ‹ borderAccent › ║
 ║    [■] Pi icon                                        ON   ║
-║    [■] Randomize "Worked" text                        ON   ║
+║    [■] Randomize “Worked” text                        ON   ║
 ║    [■] Tokens spent                                   ON   ║
 ║    [■] Mid-turn inputs                                ON   ║
 ║                                                            ║
@@ -63,13 +73,30 @@ Run `/topping-settings` (TUI only) to customize your toppings:
 ║    [■] Use NerdFont icons                             ON   ║
 ╟────────────────────────────────────────────────────────────╢
 ║  ↑↓ move  ←→ select  ␣ toggle  ⏎ apply  esc cancel         ║
-╚════════════════════════════════════════════════════┥ 1/28 ┝╝
+╚════════════════════════════════════════════════════[ 9/37 ]╝
 ```
 
+❯ marks the keyboard cursor, and the selected row is highlighted. The Provider and Model toggles independently control the lower-right label on decorated prompts.
+
+The User Prompt Border style cycles through `double`, `single`, `rounded`, and `heavy` box-drawing sets; the Border color row sits directly beneath it. The Completion Marker Border style offers those same choices plus `none`; `none` leaves the marker undecorated, and its Border color row sits directly beneath it.
+
+A cycle row's `[■]` box gates it: `␣` unchecks the box, snaps the setting back to its default, and stops `←`/`→` from cycling. The Completion Marker Border style and Border color rows, and Token rate color, have no gate — their box stays `[■]` and `␣` does nothing.
+
+The User Prompt and Completion Marker Border color settings, along with the Animated spinner, Token activity monitor, and Token rate colors, cycle through `accent`, `border`, `borderAccent`, `success`, `error`, and `warning`.
+
+Invert shimmer keeps the working text at the default text color and sweeps a dimmed gradient across it.
+
 Under **Elements Order**, press `␣` to grab a row, then `↑`/`↓` to slide that element
-left or right within the loader. Elapsed time and output tokens share a single
-`(3s · ↓ 84 tokens)` parenthetical whenever they end up next to each other, and split
-into `(3s)` and `(↓ 84 tokens)` when they do not.
+left or right within the loader. Elapsed time, output tokens, and token rate are joined with
+`·` separators whenever adjacent. When reordering separates them, each adjacent run is rendered
+without a separator before or after it.
+
+The `N tok/s` token rate uses the selected theme color and
+remains reorderable. Active rates below 1,000 are padded to three characters so updates do not shift the other
+segments; larger rates may shift later segments. When inactive, it remains as the dim `--- tok/s` placeholder. After its last update it holds
+full brightness for 1.5 seconds, then fades through five theme-aware shades to the dim text color over
+the next 0.25 seconds before returning to the placeholder; a new count restores full brightness and
+restarts the cycle.
 
 ## Install
 
@@ -92,7 +119,7 @@ npm test
 npm run typecheck
 ```
 
-Tests cover the word/shimmer rendering, activity meter behavior, timer resets, settings persistence, the `menu.ts` component, and the settings menu wiring end to end.
+Tests cover the word/shimmer rendering, prompt box and completion marker rendering, activity meter behavior, timer resets, settings persistence, the `menu.ts` component, and the settings menu wiring end to end.
 
 ## Limitations
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.4.0",
+  "version": "0.5.0",
     "description": "A Pi extension that adds quality of life improvements to Pi's UX: a high-vis user prompt, a shimmering working loader with token activity meter and elapsed timer, and an end-of-turn completion marker",
   "keywords": ["pi-package", "pi-extension"],
   "license": "MIT",

package/src/activity-meter.ts

@@ -1,4 +1,5 @@
 import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+import { dimAttribute } from "./format.ts";
 
 export const ActivityMeterLevel = {
 	IDLE: 0,
@@ -25,15 +26,15 @@ const BRAILLE: Record<ActivityMeterLevel, string> = {
 	[ActivityMeterLevel.FULL]: "⣿",
 };
 const WIDTH = 8;
+const RATE_THRESHOLDS = [0, 5, 10, 15, 22, 30, 40] as const;
 type CellColorizer = (level: ActivityMeterLevel, char: string) => string;
 
 /** Convert an estimated output-token rate to a display level. */
 export function rateToLevel(tokensPerSecond: number): ActivityMeterLevel {
-	const THRESHOLDS = [0, 5, 10, 15, 22, 30, 40];
-	for (let i = THRESHOLDS.length - 1; i >= 0; i--) {
-		if (tokensPerSecond > THRESHOLDS[i]) return (i + 1) as ActivityMeterLevel;
+	for (let i = RATE_THRESHOLDS.length - 1; i >= 0; i--) {
+		if (tokensPerSecond > RATE_THRESHOLDS[i]) return (i + 1) as ActivityMeterLevel;
 	}
-	return 0;
+	return ActivityMeterLevel.IDLE;
 }
 
 /** EMA-smoothed rate tracker for a cumulative output-token estimate. */
@@ -44,6 +45,11 @@ export class TokRateTracker {
 	#hasSample = false;
 	#pendingTokens = 0;
 
+	/** Latest EMA-smoothed output-token rate. */
+	get tokenRate(): number {
+		return this.#rate;
+	}
+
 	sample(totalTokens: number, now: number): number {
 		if (!this.#hasSample) {
 			this.#lastTotal = totalTokens;
@@ -127,9 +133,6 @@ export class ActivityMeter {
 	): string {
 		if (level === ActivityMeterLevel.IDLE) return theme.fg("dim", char);
 		const colored = theme.fg(color, char);
-		// ANSI dim (SGR 2) reduces color brightness; SGR 22 resets dim/bold.
-		// This is necessary because theme.fg("dim", ...) sets a gray color instead
-		// of applying the ANSI dim attribute, so nesting would overwrite the accent color.
-		return dimmed ? `\x1b[2m${colored}\x1b[22m` : colored;
+		return dimmed ? dimAttribute(colored) : colored;
 	}
 }

package/src/format.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 
 /** Pi's default working-indicator frames (same braille spinner as pi-tui's Loader). */
 export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -6,26 +6,39 @@ export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦",
 /** Milliseconds per spinner frame, matching pi-tui's Loader cadence. */
 export const SPINNER_FRAME_MS = 80;
 
+/** Default "Working…" text shown when text randomization/substitution is off. */
+export const DEFAULT_WORKING_WORD = "Working…";
+
+/** Milliseconds between activity meter sample pushes. */
+export const METER_INTERVAL_MS = 100;
+
+/** Milliseconds between shimmer re-renders. */
+export const SHIMMER_INTERVAL_MS = 50;
+
+/** Milliseconds between elapsed-time display updates. */
+export const ELAPSED_INTERVAL_MS = 1_000;
+
 /** A user-orderable piece of the working indicator. */
-export type LoaderElement = "spinner" | "text" | "meter" | "elapsed" | "tokens";
+export type LoaderElement = "spinner" | "text" | "meter" | "elapsed" | "tokens" | "tokenRate";
+
+/** Default first-use working-indicator element order. */
+export const DEFAULT_LOADER_ORDER: readonly LoaderElement[] = ["spinner", "text", "meter", "tokenRate", "elapsed", "tokens"];
 
-/** Left-to-right element order matching pi's stock working indicator. */
-export const DEFAULT_LOADER_ORDER: readonly LoaderElement[] = ["spinner", "text", "meter", "elapsed", "tokens"];
+/** Elements share a detail group; separators and non-rate details are dimmed. */
+const DETAIL_ELEMENTS: ReadonlySet<LoaderElement> = new Set(["elapsed", "tokens", "tokenRate"]);
 
-/** Elements rendered inside the dim parenthetical rather than as standalone segments. */
-const DETAIL_ELEMENTS: ReadonlySet<LoaderElement> = new Set(["elapsed", "tokens"]);
+const TOKEN_UNITS = [
+	{ threshold: 10_000, divisor: 1_000, decimals: 1, suffix: "k" },
+	{ threshold: 999_500, divisor: 1_000, decimals: 0, suffix: "k" },
+	{ threshold: 10_000_000, divisor: 1_000_000, decimals: 1, suffix: "M" },
+	{ threshold: 1_000_000_000, divisor: 1_000_000, decimals: 0, suffix: "M" },
+	{ threshold: 1e15, divisor: 1_000_000_000, decimals: 1, suffix: "B" },
+] as const;
 
 /** Format an output-token count for the working indicator. */
 export function formatTokens(count: number): string {
 	if (count < 1000) return count.toString();
-	const UNITS = [
-		{ threshold: 10_000, divisor: 1_000, decimals: 1, suffix: "k" },
-		{ threshold: 999_500, divisor: 1_000, decimals: 0, suffix: "k" },
-		{ threshold: 10_000_000, divisor: 1_000_000, decimals: 1, suffix: "M" },
-		{ threshold: 1_000_000_000, divisor: 1_000_000, decimals: 0, suffix: "M" },
-		{ threshold: 1e15, divisor: 1_000_000_000, decimals: 1, suffix: "B" },
-	];
-	const unit = UNITS.find(u => count < u.threshold);
+	const unit = TOKEN_UNITS.find(u => count < u.threshold);
 	if (unit) {
 		const value = unit.decimals > 0
 			? (count / unit.divisor).toFixed(unit.decimals)
@@ -35,6 +48,50 @@ export function formatTokens(count: number): string {
 	return `${(count / 1_000_000_000).toFixed(1)}B`;
 }
 
+/** Column width reserved for the numeric portion of the token-rate readout. */
+const TOKEN_RATE_DIGITS = 3;
+
+/** Placeholder shown when the working indicator has no active token-rate sample. */
+export const TOKEN_RATE_PLACEHOLDER = `${"-".repeat(TOKEN_RATE_DIGITS)} tok/s`;
+
+/** Format an output-token throughput estimate for the working indicator. */
+export function formatTokenRate(rate: number): string {
+	const rounded = Math.round(rate);
+	return rounded === 0 ? "" : `${rounded.toString().padStart(TOKEN_RATE_DIGITS)} tok/s`;
+}
+
+/**
+ * Wrap text in ANSI dim (SGR 2 / reset 22).
+ *
+ * theme.fg("dim", ...) sets a gray color instead of the ANSI dim attribute, so it
+ * would overwrite an already-applied accent color rather than darkening it; the raw
+ * SGR codes are needed to dim on top of an existing color.
+ */
+export function dimAttribute(text: string): string {
+	return `\x1b[2m${text}\x1b[22m`;
+}
+
+/** Number of discrete, eased warning-to-dim shades used for the token-rate fade. */
+export const TOKEN_RATE_FADE_SHADE_COUNT = 5;
+
+/** Render one token-rate fade shade by blending the selected color toward the active theme's dim color. */
+export function fadeThemeColorString(
+	text: string,
+	shade: number,
+	theme: Pick<Theme, "getFgAnsi" | "fg">,
+	color: ThemeColor,
+): string {
+	if (!text) return "";
+	const source = ansiToRgb(theme.getFgAnsi(color));
+	const dim = ansiToRgb(theme.getFgAnsi("dim"));
+	if (!source || !dim) return theme.fg(color, text);
+	const clampedShade = Math.max(0, Math.min(TOKEN_RATE_FADE_SHADE_COUNT - 1, Math.floor(shade)));
+	const progress = (clampedShade + 1) / TOKEN_RATE_FADE_SHADE_COUNT;
+	const eased = 0.5 * (1 - Math.cos(Math.PI * progress));
+	const blended = source.map((channel, index) => Math.round(channel * (1 - eased) + dim[index]! * eased));
+	return `\x1b[38;2;${blended[0]};${blended[1]};${blended[2]}m${text}\x1b[0m`;
+}
+
 /** Format elapsed milliseconds as a compact human-readable duration, skipping leading zero units. */
 export function formatElapsed(ms: number): string {
 	let totalSeconds = Math.max(0, Math.floor(ms / 1000));
@@ -55,20 +112,21 @@ export function formatElapsed(ms: number): string {
 	return parts.join(" ");
 }
 
-/** Codex-style light-sweep shimmer using the active Pi theme. */
+/** True when every appearance toggle is off and Pi's stock loader can be restored. */
 export function isFullyDefaultAppearance(features: {
 	substituteDefaultMessage: boolean;
 	elapsedTime: boolean;
 	outputTokens: boolean;
+	tokenRate: boolean;
 }, decorations: { shimmer: boolean; tokenActivityMonitor: boolean }): boolean {
-	return !features.substituteDefaultMessage && !decorations.shimmer && !decorations.tokenActivityMonitor && !features.elapsedTime && !features.outputTokens;
+	return !features.substituteDefaultMessage && !decorations.shimmer && !decorations.tokenActivityMonitor && !features.elapsedTime && !features.outputTokens && !features.tokenRate;
 }
 
 /**
  * Assemble the working indicator from already-styled pieces, laid out in `order`.
  *
  * Empty/omitted pieces are dropped, and any run of detail elements left adjacent
- * after that collapses into a single dim parenthetical.
+ * after that renders as one visual group with dim separators.
  */
 export function buildWorkingMessage(
 	theme: Pick<Theme, "fg">,
@@ -78,7 +136,7 @@ export function buildWorkingMessage(
 	const segments: string[] = [];
 	let details: string[] = [];
 	const flushDetails = (): void => {
-		if (details.length) segments.push(theme.fg("dim", `(${details.join(" · ")})`));
+		if (details.length) segments.push(details.join(theme.fg("dim", " · ")));
 		details = [];
 	};
 
@@ -86,7 +144,8 @@ export function buildWorkingMessage(
 		const value = parts[element];
 		if (!value) continue;
 		if (DETAIL_ELEMENTS.has(element)) {
-			details.push(value);
+			// tokenRate arrives pre-colored; dimming it here would replace its configured color.
+			details.push(element === "tokenRate" ? value : theme.fg("dim", value));
 			continue;
 		}
 		flushDetails();
@@ -97,20 +156,29 @@ export function buildWorkingMessage(
 	return segments.join(" ");
 }
 
+const SHIMMER_SWEEP_S = 2.0;
+const SHIMMER_BAND_HALF = 5.0;
+const SHIMMER_PADDING = 10;
+
+/**
+ * Codex-style light-sweep shimmer using the active Pi theme.
+ *
+ * With `invert=true`, the text color is used at rest and the sweep moves toward
+ * the theme's dim color.
+ */
 export function shimmerString(
 	text: string,
 	elapsedMs: number,
-	theme: Pick<Theme, "getFgAnsi">,
+	theme: Pick<Theme, "getFgAnsi" | "fg">,
 	direction: "ltr" | "rtl" = "ltr",
 	speed: "slow" | "normal" | "fast" = "normal",
+	invert = false,
 ): string {
 	const chars = [...text];
 	if (chars.length === 0) return "";
-	const SHIMMER_SWEEP_S = 2.0;
-	const SHIMMER_BAND_HALF = 5.0;
-	const SHIMMER_PADDING = 10;
-	const SHIMMER_BASE = ansiToRgb(theme.getFgAnsi("dim"));
-	const SHIMMER_HIGHLIGHT = ansiToRgb(theme.getFgAnsi("text"));
+	const shimmerBase = ansiToRgb(theme.getFgAnsi(invert ? "text" : "dim"));
+	const shimmerHighlight = ansiToRgb(theme.getFgAnsi(invert ? "dim" : "text"));
+	if (!shimmerBase || !shimmerHighlight) return theme.fg("text", text);
 	const period = chars.length + SHIMMER_PADDING * 2;
 	const unitsPerS = period / SHIMMER_SWEEP_S;
 	// The band crosses padding at either end while every character is still dim. Scaling only
@@ -128,25 +196,26 @@ export function shimmerString(
 			: litExit + (phase - enterS - litS) * unitsPerS;
 	const pos = direction === "rtl" ? period - linear : linear;
 
-	return chars
-		.map((ch, i) => {
-			const dist = Math.abs((i + SHIMMER_PADDING) - pos);
-			const t = dist <= SHIMMER_BAND_HALF
-				? 0.5 * (1 + Math.cos(Math.PI * dist / SHIMMER_BAND_HALF))
-				: 0;
-			const alpha = t * 0.9;
-			const r = Math.round(SHIMMER_HIGHLIGHT[0] * alpha + SHIMMER_BASE[0] * (1 - alpha));
-			const g = Math.round(SHIMMER_HIGHLIGHT[1] * alpha + SHIMMER_BASE[1] * (1 - alpha));
-			const b = Math.round(SHIMMER_HIGHLIGHT[2] * alpha + SHIMMER_BASE[2] * (1 - alpha));
-			const bold = t > 0.2 ? "\x1b[1m" : "";
-			return `${bold}\x1b[38;2;${r};${g};${b}m${ch}\x1b[22m`;
-		})
-		.join("") + "\x1b[0m";
+	let out = "";
+	for (let i = 0; i < chars.length; i++) {
+		const ch = chars[i];
+		const dist = Math.abs((i + SHIMMER_PADDING) - pos);
+		const t = dist <= SHIMMER_BAND_HALF
+			? 0.5 * (1 + Math.cos(Math.PI * dist / SHIMMER_BAND_HALF))
+			: 0;
+		const alpha = t * 0.9;
+		const r = Math.round(shimmerHighlight[0] * alpha + shimmerBase[0] * (1 - alpha));
+		const g = Math.round(shimmerHighlight[1] * alpha + shimmerBase[1] * (1 - alpha));
+		const b = Math.round(shimmerHighlight[2] * alpha + shimmerBase[2] * (1 - alpha));
+		const bold = !invert && t > 0.2 ? "\x1b[1m" : "";
+		out += `${bold}\x1b[38;2;${r};${g};${b}m${ch}\x1b[22m`;
+	}
+	return out + "\x1b[0m";
 }
 
-function ansiToRgb(ansi: string): [number, number, number] {
+function ansiToRgb(ansi: string): [number, number, number] | null {
 	const match = ansi.match(/^\x1b\[38;2;(\d+);(\d+);(\d+)m$/);
-	if (!match) throw new Error(`Shimmer requires truecolor theme colors, received ${JSON.stringify(ansi)}`);
+	if (!match) return null;
 	return [Number(match[1]), Number(match[2]), Number(match[3])];
 }
 

package/src/menu.ts

@@ -10,12 +10,12 @@
  * preview section driven by a caller-supplied render callback, e.g.:
  *
  *   ╔═[ Pi Topping: Settings ]════════════════════════╗
- *   ╟─ Preview ─────────────────────────────────────╢
+ *   ╟─ Preview ────────────────────────────────────╢
  *   ║                                                  ║
- *   ║ ⠋ Cerebrating… ⣤⣤⣤⣤ (0m 03s · ↓ 84 tokens)     ║
+ *   ║ ⠋ Cerebrating… ⣤⣤⣤⣤  28 tok/s · 3s · ↓ 84 tokens ║
  *   ║                                                  ║
  *   ╟─ Decorations ───────────────────────────────────╢
- *   ║  ▸ [■] Animated spinner                    ON   ║
+ *   ║  ❯ [■] Animated spinner                    ON   ║
  *   ║    [ ] "Working..." text shimmer           OFF   ║
  *   ║                                                  ║
  *   ╟──────────────────────────────────────────────────╢
@@ -90,6 +90,7 @@ export interface MenuResult<T> {
 
 const DEFAULT_HINTS = ["\u2191\u2193 move", "\u2423 toggle", "\u23ce apply", "esc cancel"];
 const MAX_WIDTH = 76;
+const ROW_PREFIX_WIDTH = 8; // "  " + marker + " " + "[" + box + "]" + " "
 
 interface FlatItem {
 	id: string;
@@ -442,7 +443,7 @@ export class MenuComponent implements Component {
 		const prefix = titlePrefix ?? "";
 		const suffix = titleSuffix ?? "";
 		const maxTitleLen = Math.max(0, innerWidth - prefix.length - suffix.length);
-		const shownTitle = title.length > maxTitleLen ? truncateToWidth(title, maxTitleLen) : title;
+		const shownTitle = visibleWidth(title) > maxTitleLen ? truncateToWidth(title, maxTitleLen) : title;
 		const styledTitle = boldTitle ? th.bold(shownTitle) : shownTitle;
 		const fillCount = Math.max(0, innerWidth - visibleWidth(prefix + shownTitle + suffix));
 		const titleContent = th.fg("text", styledTitle);
@@ -493,45 +494,42 @@ 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 ? "\u276f" : " ";
 		const markerColored = selected ? th.fg("accent", marker) : marker;
 
 		if (item.reorderGroup) {
 			const held = value as boolean;
 			const stateWord = held ? "\u2191 \u2193" : "";
 			const rightPlain = `${stateWord}  `;
-			const fixedLeftLen = 8;
-			const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - rightPlain.length - 1);
-			const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
+			const maxLabelLen = Math.max(0, innerWidth - ROW_PREFIX_WIDTH - visibleWidth(rightPlain) - 1);
+			const label = visibleWidth(item.label) > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 			const leftPlain = `  ${marker} [${held ? "\u25a0" : " "}] ${label}`;
 			const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(rightPlain));
 			const content = `  ${markerColored} [${held ? th.fg("accent", "\u25a0") : th.fg("muted", " ")}] ${th.fg("text", label)}${" ".repeat(gap)}${held ? th.fg("accent", stateWord) : ""}  `;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", selected ? th.bg("selectedBg", content) : content, "\u2551");
 		}
 
 		if (item.cycleValues) {
 			const enabled = item.cycleEnabledBy ? this.values[item.cycleEnabledBy] as boolean : true;
 			const stateWord = `‹ ${value} ›`;
-			const fixedLeftLen = 8;
-			const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - visibleWidth(stateWord) - 1);
-			const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
+			const maxLabelLen = Math.max(0, innerWidth - ROW_PREFIX_WIDTH - visibleWidth(stateWord) - 1);
+			const label = visibleWidth(item.label) > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 			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", selected ? th.bg("selectedBg", content) : content, "\u2551");
 		}
 
 		const enabled = value as boolean;
 		const box = enabled ? "\u25a0" : " ";
 		const stateWord = enabled ? "ON" : "OFF";
 		const rightPlain = `${stateWord}  `;
-		const fixedLeftLen = 8; // "  " + marker(1) + " " + "[" + box(1) + "]" + " "
-		const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - rightPlain.length - 1);
-		const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
+		const maxLabelLen = Math.max(0, innerWidth - ROW_PREFIX_WIDTH - visibleWidth(rightPlain) - 1);
+		const label = visibleWidth(item.label) > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 		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", selected ? th.bg("selectedBg", content) : content, "\u2551");
 	}
 }