@underactive/pi-topping 0.6.4 → 0.7.0

package/README.md

@@ -6,7 +6,7 @@ We garnish our pies. It seemed rude not to extend Pi the same courtesy. This is
 
 ![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, optional word packs, shimmer (with direction, speed, and invert option), token activity monitor (with color, direction, and dim toggle), elapsed timer, output token display, live output-token rate (with color choice and dim toggle), and the response model (with visibility, color, and dim controls) — all arrangeable left to right. During a blocking extension prompt, the loader switches to a stable dim waiting line with a pulsing indicator, then resumes afterward.
+**“Working” Loader** — animated spinner (with color choice), randomized activity word, optional word packs, shimmer, token activity monitor, elapsed timer, output token display, live output-token rate, and the response model when it meaningfully differs from the selected model — all arrangeable left to right. During a blocking extension prompt, the loader switches to a stable dim waiting line with a pulsing indicator, then resumes afterward.
 
 ![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)
 
@@ -14,83 +14,91 @@ We garnish our pies. It seemed rude not to extend Pi the same courtesy. This is
 
 ![Example of pi-topping's completion marker](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_completion_marker.png)
 
+## Install
+
+```bash
+pi install npm:@underactive/pi-topping
+```
+
+Restart Pi (or run `/reload`) to pick it up.
+
 ## Settings
 
 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 ]═══════════════════════════════════╗
-╟─ Preview ──────────────────────────────────────────────────╢
-║                                                            ║
-║ ⠋ Crafting… ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tps · 3s · ↓ 84 tokens · test-model ║
-║                                                            ║
-╟─ User Prompt ──────────────────────────────────────────────╢
-║    [■] High-vis prompt                                ON   ║
-║    [■] 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   ║
-║    [■] 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  ‹ 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   ║
-║    [■] Response model                                 ON   ║
-║    [■] Response model color                     ‹ accent › ║
-║    [■] Response model dimmed                        OFF   ║
-║                                                            ║
-╟─ Elements Order ───────────────────────────────────────────╢
-║    [ ] Animated spinner                                    ║
-║    [ ] “Working” text                                      ║
-║    [ ] Token activity monitor                              ║
-║    [ ] Token rate                                          ║
-║    [ ] Elapsed time                                        ║
-║    [ ] Output tokens                                       ║
-║    [ ] Response model                                      ║
-║                                                            ║
-╟─ Completion Marker ────────────────────────────────────────╢
-║    [■] Show completion marker                         ON   ║
-║    [■] Marker style                              ‹ elite › ║
-║    [■] Border style                               ‹ none › ║
-║    [■] Border color                       ‹ borderAccent › ║
-║    [■] Pi icon                                        ON   ║
-║    [■] Randomize “Worked” text                        ON   ║
-║    [■] Tokens spent                                   ON   ║
-║    [■] Mid-turn inputs                                ON   ║
-║                                                            ║
-╟─ Word Packs ───────────────────────────────────────────────╢
-║    [ ] Doctor Who                                    OFF   ║
-║    [ ] Firefly                                       OFF   ║
-║    [ ] Hitchhiker's Guide                            OFF   ║
-║    [ ] The Lord of the Rings                         OFF   ║
-║    [ ] The Matrix                                    OFF   ║
-║    [ ] Portal                                        OFF   ║
-║    [ ] SimCity                                       OFF   ║
-║    [ ] Star Trek                                     OFF   ║
-║    [ ] Star Wars                                     OFF   ║
-║                                                            ║
-╟─ Options ──────────────────────────────────────────────────╢
-║    [■] Use NerdFont icons                             ON   ║
-╟────────────────────────────────────────────────────────────╢
-║  ↑↓ move  PgUp/PgDn page  ←→ select                        ║
-║  ␣ toggle  ⏎ apply  esc cancel                             ║
-╚════════════════════════════════════════════════════[ 9/50 ]╝
+╔═[ Pi Topping: Settings ]══════════════════════════════════════╗
+╟─ Preview ─────────────────────────────────────────────────────╢
+║                                                               ║
+║ ⠋ Crafting ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tps · 3s · ↓ 84 tokens · test-model   ║
+║                                                               ║
+╟─ User Prompt ─────────────────────────────────────────────────╢
+║    [■] High-vis prompt                                ON      ║
+║    [■] Border style                             ‹ double ›    ║
+║    [■] Border color                      ‹ thinkingLevel ›    ║
+║    [■] Pi icon                                        ON      ║
+║    [■] Timestamp                                      ON      ║
+║    [■] Provider                                       ON      ║
+║    [■] Model                                          ON      ║
+║                                                               ║
+╟─ “Working” Loader ────────────────────────────────────────────╢
+║    [■] Animated spinner                               ON      ║
+║  ❯ [■] Animated spinner color            ‹ thinkingLevel ›    ║
+║    [■] 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  ‹ 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      ║
+║    [■] Response model                                 ON      ║
+║    [■] Response model color                     ‹ accent ›    ║
+║    [■] Response model dimmed                        OFF       ║
+║                                                               ║
+╟─ Elements Order ──────────────────────────────────────────────╢
+║    [ ] Animated spinner                                       ║
+║    [ ] “Working” text                                         ║
+║    [ ] Token activity monitor                                 ║
+║    [ ] Token rate                                             ║
+║    [ ] Elapsed time                                           ║
+║    [ ] Output tokens                                          ║
+║    [ ] Response model                                         ║
+║                                                               ║
+╟─ Completion Marker ───────────────────────────────────────────╢
+║    [■] Show completion marker                         ON      ║
+║    [■] Marker style                              ‹ elite ›    ║
+║    [■] Border style                               ‹ none ›    ║
+║    [■] Border color                      ‹ thinkingLevel ›    ║
+║    [■] Pi icon                                        ON      ║
+║    [■] Randomize “Worked” text                        ON      ║
+║    [■] Tokens spent                                   ON      ║
+║    [■] Mid-turn inputs                                ON      ║
+║                                                               ║
+╟─ Word Packs ──────────────────────────────────────────────────╢
+║    [ ] Doctor Who                                    OFF      ║
+║    [ ] Firefly                                       OFF      ║
+║    [ ] Hitchhiker's Guide                            OFF      ║
+║    [ ] The Lord of the Rings                         OFF      ║
+║    [ ] The Matrix                                    OFF      ║
+║    [ ] Portal                                        OFF      ║
+║    [ ] SimCity                                       OFF      ║
+║    [ ] Star Trek                                     OFF      ║
+║    [ ] Star Wars                                     OFF      ║
+║                                                               ║
+╟─ Options ─────────────────────────────────────────────────────╢
+║    [■] Use NerdFont icons                             ON      ║
+╟───────────────────────────────────────────────────────────────╢
+║  ↑↓ move  PgUp/PgDn page  ←→ select                           ║
+║  ␣ toggle  ⏎ apply  esc cancel                                ║
+╚═══════════════════════════════════════════════════════[ 9/50 ]╝
 ```
 
 ### Word packs
@@ -111,6 +119,8 @@ Bundled packs live in [`wordpacks/`](wordpacks/). Copy `wordpacks/doctor-who.jso
 
 Pack IDs must start with a lowercase letter and contain only lowercase letters, digits, and `-`. Each pack needs a non-empty `name` and at least one word with non-empty `present_tense` and `past_tense` strings. Invalid entries are ignored. Packs reload when a session starts and whenever `/topping-settings` opens, not while a turn is running. Preferences for missing packs are retained so they apply when the pack returns.
 
+The `default` animated spinner and completion marker border colors defer to Pi's thinking-level color. The `thinking-level` prompt border color follows the level captured when the prompt is submitted. The `thinkingLevel` color option for the token activity monitor, token rate, and response model follows Pi's active thinking-level color.
+
 Under **Elements Order**, press `␣` to grab a row, then `↑`/`↓` to slide that element
 left or right within the loader. Elapsed time, output tokens, token rate, and response model are joined with
 `·` separators whenever adjacent. When reordering separates them, each adjacent run is rendered
@@ -123,19 +133,12 @@ full brightness for 1.5 seconds, then fades through five theme-aware shades to t
 the next 0.25 seconds before returning to the placeholder; a new count restores full brightness and
 restarts the cycle.
 
-The response model is captured from assistant responses, displayed as its sanitized value with no label, and defaults to the final loader detail after output tokens. It can be hidden, recolored, permanently dimmed, or reordered. After the agent settles, its final value remains visible for 3 seconds, fades through five theme-aware shades over 0.5 seconds, then clears; new work cancels the pending fade.
-
-## Install
-
-```bash
-pi install npm:@underactive/pi-topping
-```
-
-Restart Pi (or run `/reload`) to pick it up.
+The response model is captured from assistant responses, displayed as its sanitized value with no label only when it meaningfully differs from the selected model, and defaults to the final loader detail after output tokens. Equivalent local paths and decorated filenames are suppressed. It can be hidden, recolored, permanently dimmed, or reordered. After the agent settles, its final value remains visible for 3 seconds, fades through five theme-aware shades over 0.5 seconds, then clears; new work cancels the pending fade.
 
 ## Requirements
 
 - [Pi](https://github.com/earendil-works/pi-coding-agent). Pi ≥0.84.4 is required for the waiting-for-input loader state; older Pi versions keep the animated loader.
+- On Pi ≥0.85.0, the working indicator is embedded in the default editor border and long loaders are truncated to the border width instead of wrapping; custom editors that do not opt in keep the standalone wrapping indicator.
 - Node.js ≥22.19.0
 
 ## Development

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.6.4",
+  "version": "0.7.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

@@ -123,16 +123,16 @@ export class ActivityMeter {
 		this.#levels.fill(0);
 	}
 
-	/** Colorize a meter cell using the default theme mapping (dim at IDLE, `color` otherwise). */
+	/** Colorize a meter cell (dim at IDLE, `colorize` otherwise). */
 	static colorizeCell(
 		level: ActivityMeterLevel,
 		char: string,
 		theme: { fg: (style: ThemeColor, s: string) => string },
-		color: ThemeColor = "accent",
+		colorize: (text: string) => string,
 		dimmed?: boolean,
 	): string {
 		if (level === ActivityMeterLevel.IDLE) return theme.fg("dim", char);
-		const colored = theme.fg(color, char);
+		const colored = colorize(char);
 		return dimmed ? dimAttribute(colored) : colored;
 	}
 }

package/src/format.ts

@@ -1,4 +1,5 @@
-import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { ThinkingLevelColor, ThinkingLevelSettingColor } from "./settings.ts";
 
 /** Pi's default working-indicator frames (same braille spinner as pi-tui's Loader). */
 export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -6,8 +7,27 @@ 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…";
+/** Default "Working" text shown when text randomization/substitution is off. */
+export const DEFAULT_WORKING_WORD = "Working";
+
+export type ThinkingLevel = Parameters<Theme["getThinkingBorderColor"]>[0];
+
+export const THINKING_LEVEL_VALUES = ["off", "minimal", "low", "medium", "high", "xhigh", "max"] as const;
+
+export function isThinkingLevel(value: unknown): value is ThinkingLevel {
+	return typeof value === "string" && THINKING_LEVEL_VALUES.some(level => level === value);
+}
+
+/** Build a colorizer for a configured color, including Pi's active thinking-level color. */
+export function getThinkingLevelColorizer(
+	theme: Pick<Theme, "fg" | "getThinkingBorderColor">,
+	color: ThinkingLevelColor | ThinkingLevelSettingColor,
+	thinkingLevel: ThinkingLevel | undefined,
+): (text: string) => string {
+	return color === "thinking-level"
+		? theme.getThinkingBorderColor(thinkingLevel ?? "off")
+		: (text: string) => theme.fg(color, text);
+}
 
 /** Milliseconds between activity meter sample pushes. */
 export const METER_INTERVAL_MS = 100;
@@ -24,7 +44,7 @@ export type LoaderElement = "spinner" | "text" | "meter" | "elapsed" | "tokens"
 /** Default first-use working-indicator element order. */
 export const DEFAULT_LOADER_ORDER: readonly LoaderElement[] = ["spinner", "text", "meter", "tokenRate", "elapsed", "tokens", "responseModel"];
 
-/** Elements share a detail group; separators and non-rate details are dimmed. */
+/** Elements share a detail group; separators are dimmed and non-rate details use muted. */
 const DETAIL_ELEMENTS: ReadonlySet<LoaderElement> = new Set(["elapsed", "tokens", "tokenRate", "responseModel"]);
 
 const TOKEN_UNITS = [
@@ -84,13 +104,13 @@ export const RESPONSE_MODEL_FADE_MS = 500;
 export function fadeThemeColorString(
 	text: string,
 	shade: number,
-	theme: Pick<Theme, "getFgAnsi" | "fg">,
-	color: ThemeColor,
+	theme: Pick<Theme, "getFgAnsi">,
+	colorizer: (text: string) => string,
 ): string {
 	if (!text) return "";
-	const source = ansiToRgb(theme.getFgAnsi(color));
+	const source = ansiToRgb(colorizer("x"));
 	const dim = ansiToRgb(theme.getFgAnsi("dim"));
-	if (!source || !dim) return theme.fg(color, text);
+	if (!source || !dim) return colorizer(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));
@@ -151,7 +171,7 @@ export function buildWorkingMessage(
 		if (!value) continue;
 		if (DETAIL_ELEMENTS.has(element)) {
 			// tokenRate and responseModel arrive pre-colored; dimming them here would replace their configured colors.
-			details.push(element === "tokenRate" || element === "responseModel" ? value : theme.fg("dim", value));
+			details.push(element === "tokenRate" || element === "responseModel" ? value : theme.fg("muted", value));
 			continue;
 		}
 		flushDetails();
@@ -220,7 +240,7 @@ export function shimmerString(
 }
 
 function ansiToRgb(ansi: string): [number, number, number] | null {
-	const match = ansi.match(/^\x1b\[38;2;(\d+);(\d+);(\d+)m$/);
+	const match = ansi.match(/\x1b\[38;2;(\d+);(\d+);(\d+)m/);
 	if (!match) return null;
 	return [Number(match[1]), Number(match[2]), Number(match[3])];
 }

package/src/menu.ts

@@ -28,6 +28,8 @@ export interface MenuItem {
 	value: MenuValue;
 	/** Values cycled with left/right arrows. Omit for a boolean space-toggle. */
 	cycleValues?: readonly string[];
+	/** Optional display labels for cycle values; the keys remain the published values. */
+	cycleValueLabels?: Readonly<Record<string, string>>;
 	/** ID of the boolean value that gates cycling; space toggles it. */
 	cycleEnabledBy?: string;
 	/** Initial enabled state when `cycleEnabledBy` is set (default true). */
@@ -59,11 +61,9 @@ export interface MenuConfig {
 	 * since the menu opened. Lines may contain ANSI styling and are truncated/
 	 * padded to fit automatically.
 	 *
-	 * Return `string[]` for legacy interval-based animation (defaults to 50ms
-	 * refresh), or a `PreviewResult` to declare the next refresh interval.
 	 * Omitting `nextRefreshInMs` from a `PreviewResult` makes the preview static.
 	 */
-	preview?: (values: Record<string, MenuValue>, elapsedMs: number, activeItemId: string | undefined, width: number) => string[] | PreviewResult;
+	preview?: (values: Record<string, MenuValue>, elapsedMs: number, activeItemId: string | undefined, width: number) => PreviewResult;
 	/** Optional heading for the preview block. Defaults to `Preview`. */
 	previewTitle?: string;
 	/** Maximum overlay height in rows or as a percentage of the terminal height. */
@@ -88,12 +88,6 @@ function closeTruncatedHyperlink(text: string): string {
 }
 
 interface FlatItem {
-	id: string;
-	label: string;
-	cycleValues?: readonly string[];
-	cycleEnabledBy?: string;
-	cycleDisabledValue?: string;
-	reorderGroup?: string;
 	item: MenuItem;
 	sectionIndex: number;
 }
@@ -159,7 +153,7 @@ export class MenuComponent implements Component {
 		this.flat = [];
 		for (const [sectionIndex, section] of config.sections.entries()) {
 			for (const item of section.items) {
-				this.flat.push({ id: item.id, label: item.label, cycleValues: item.cycleValues, cycleEnabledBy: item.cycleEnabledBy, cycleDisabledValue: item.cycleDisabledValue, reorderGroup: item.reorderGroup, item, sectionIndex });
+				this.flat.push({ item, sectionIndex });
 			}
 		}
 		this.initialValues = { ...this.values };
@@ -219,7 +213,7 @@ export class MenuComponent implements Component {
 			[Key.left]: () => this.cycleCurrentValue(-1),
 			[Key.right]: () => this.cycleCurrentValue(1),
 			[Key.space]: () => {
-				const item = this.flat[this.cursor]!;
+				const item = this.flat[this.cursor]!.item;
 				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;
@@ -258,20 +252,20 @@ export class MenuComponent implements Component {
 	 */
 	private moveGrabbedItem(delta: number): boolean {
 		const grabbed = this.flat[this.cursor]!;
-		const group = grabbed.reorderGroup;
-		if (group === undefined || this.values[grabbed.id] !== true) return false;
+		const group = grabbed.item.reorderGroup;
+		if (group === undefined || this.values[grabbed.item.id] !== true) return false;
 
 		let start = this.cursor;
-		while (start > 0 && this.flat[start - 1]!.reorderGroup === group) start--;
+		while (start > 0 && this.flat[start - 1]!.item.reorderGroup === group) start--;
 		let end = this.cursor;
-		while (end < this.flat.length - 1 && this.flat[end + 1]!.reorderGroup === group) end++;
+		while (end < this.flat.length - 1 && this.flat[end + 1]!.item.reorderGroup === group) end++;
 
 		const target = Math.max(start, Math.min(end, this.cursor + delta));
 		if (target !== this.cursor) {
 			this.flat.splice(this.cursor, 1);
 			this.flat.splice(target, 0, grabbed);
 			this.cursor = target;
-			this.values[group] = this.flat.slice(start, end + 1).map(flat => flat.id).join(",");
+			this.values[group] = this.flat.slice(start, end + 1).map(flat => flat.item.id).join(",");
 			this.invalidate();
 		}
 		return true;
@@ -292,7 +286,7 @@ export class MenuComponent implements Component {
 	}
 
 	private cycleCurrentValue(delta: number): void {
-		const item = this.flat[this.cursor]!;
+		const item = this.flat[this.cursor]!.item;
 		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;
@@ -306,14 +300,9 @@ 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,
 			width,
 		);
-		if (Array.isArray(result)) {
-			this.previewNextRefreshMs = 50;
-			return result;
-		}
-
 		this.previewNextRefreshMs = result.nextRefreshInMs;
 		return result.lines;
 	}
@@ -382,12 +371,7 @@ export class MenuComponent implements Component {
 	}
 
 	/** Render the scrolling settings body while keeping the selected item in view. */
-	private buildResponsiveToggleSections(innerWidth: number, maxRows: number, allLines: string[]): string[] {
-		if (allLines.length <= maxRows) {
-			this.scrollStart = 0;
-			this.pageItemCount = Math.max(1, this.flat.length);
-			return allLines;
-		}
+	private buildResponsiveToggleSections(innerWidth: number, maxRows: number): string[] {
 		if (maxRows <= 0) {
 			this.pageItemCount = 1;
 			return [];
@@ -452,15 +436,16 @@ export class MenuComponent implements Component {
 		const previewLines = this.samplePreview(Math.max(0, innerWidth - 1));
 		const header = [this.renderTopBorder(innerWidth), ...this.buildPreviewBlock(previewLines, innerWidth)];
 		const footer = this.buildFooter(innerWidth);
-		const naturalBody = this.buildToggleSections(innerWidth);
-		const naturalHeight = header.length + naturalBody.length + footer.length;
-		if (maxRows === undefined || naturalHeight <= maxRows) {
+		const sectionsWithItems = new Set(this.flat.map(f => f.sectionIndex)).size;
+		const naturalBodyLength = this.flat.length + 2 * sectionsWithItems;
+		if (maxRows === undefined || header.length + naturalBodyLength + footer.length <= maxRows) {
+			const naturalBody = this.buildToggleSections(innerWidth);
 			this.pageItemCount = Math.max(1, this.flat.length);
 			return [...header, ...naturalBody, ...footer].map(line => truncateToWidth(line, boxWidth, ""));
 		}
 
 		const bodyRows = Math.max(0, maxRows - header.length - footer.length);
-		const body = this.buildResponsiveToggleSections(innerWidth, bodyRows, naturalBody);
+		const body = this.buildResponsiveToggleSections(innerWidth, bodyRows);
 		return [...header, ...body, ...footer].slice(0, maxRows).map(line => truncateToWidth(line, boxWidth, ""));
 	}
 
@@ -557,7 +542,9 @@ export class MenuComponent implements Component {
 
 		if (item.cycleValues) {
 			const enabled = item.cycleEnabledBy ? this.values[item.cycleEnabledBy] as boolean : true;
-			const stateWord = `‹ ${value} ›`;
+			const rawValue = typeof value === "string" ? value : String(value);
+			const displayValue = item.cycleValueLabels?.[rawValue] ?? rawValue;
+			const stateWord = `‹ ${displayValue} ›`;
 			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}`;

package/src/preview.ts

@@ -1,11 +1,10 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { DEFAULT_PREVIEW_WIDTH, type PreviewResult } from "./menu.ts";
 import { ActivityMeter, rateToLevel } from "./activity-meter.ts";
-import { buildWorkingMessage, DEFAULT_WORKING_WORD, dimAttribute, ELAPSED_INTERVAL_MS, formatElapsed, formatTokenRate, formatTokens, isFullyDefaultAppearance, METER_INTERVAL_MS, SHIMMER_INTERVAL_MS, shimmerString, SPINNER_FRAME_MS, SPINNER_FRAMES } from "./format.ts";
+import { buildWorkingMessage, DEFAULT_WORKING_WORD, dimAttribute, ELAPSED_INTERVAL_MS, formatElapsed, formatTokenRate, formatTokens, getThinkingLevelColorizer, isFullyDefaultAppearance, METER_INTERVAL_MS, SHIMMER_INTERVAL_MS, shimmerString, SPINNER_FRAME_MS, SPINNER_FRAMES } from "./format.ts";
 import { buildCompletionMarkerContent, buildCompletionMarkerLine, buildPromptBoxLines } from "./prompt-decorator.ts";
-import { DEFAULT_SETTINGS, fromCycleDirection, fromCycleSpeed, isBorderStyle, isDoneMarkerBorderStyle, isDoneMarkerStyle, isSettingColor, LOADER_ORDER_ID, MENU_ENTRIES, parseLoaderOrder } from "./settings.ts";
+import { DEFAULT_SETTINGS, fromCycleDirection, fromCycleSpeed, isBorderStyle, isDoneMarkerBorderColor, isDoneMarkerBorderStyle, isDoneMarkerStyle, isPromptBorderColor, isSpinnerColor, isThinkingLevelColor, LOADER_ORDER_ID, MENU_ENTRIES, parseLoaderOrder } from "./settings.ts";
 import { isWordPackEnabled, selectWorkingTextSelection, wordPacksPath, type WordPack } from "./word-packs.ts";
-import { pickRandomWord } from "./words.ts";
 // Simulated load for the menu preview: a 2.4s cosine wave peaking at 46 tps for the meter,
 // flat 28 tps for the token readouts.
 const METER_PERIOD_MS = 2400, METER_PEAK_RATE = 46, TOKEN_RATE_PER_SEC = 28;
@@ -16,7 +15,6 @@ function meterRate(elapsedMs: number): number { return ((1 - Math.cos((2 * Math.
 /** Stateful, per-menu preview renderer that follows the active settings section. */
 export class PreviewRenderer {
 	// Preserve constructor-time randomness so rendering never changes the preview phrase.
-	readonly #word = pickRandomWord();
 	readonly #poolFraction = Math.random();
 	readonly #packs: readonly WordPack[];
 	readonly #meter = new ActivityMeter();
@@ -54,17 +52,18 @@ export class PreviewRenderer {
 		const features = { substituteDefaultMessage: values.substituteDefaultMessage !== false, elapsedTime: values.elapsedTime !== false, outputTokens: values.outputTokens !== false, tokenRate: values.showTokenRate !== false, responseModel: values.showResponseModel !== false };
 		const decorations = { shimmer: values.shimmer !== false, shimmerInverted: values.shimmerInverted === true, tokenActivityMonitor: values.tokenActivityMonitor !== false };
 		let spinnerColor = DEFAULT_SETTINGS.decorations.spinnerColor;
-		if (values.spinnerColorEnabled !== false && isSettingColor(values.spinnerColor)) {
+		if (isSpinnerColor(values.spinnerColor)) {
 			spinnerColor = values.spinnerColor;
 		}
 		let spinner = "";
 		if (values.animatedSpinner !== false) {
-			spinner = this.#ctx.ui.theme.fg(spinnerColor, SPINNER_FRAMES[Math.floor(elapsedMs / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!);
+			spinner = getThinkingLevelColorizer(this.#ctx.ui.theme, spinnerColor, this.#ctx.thinkingLevel)(SPINNER_FRAMES[Math.floor(elapsedMs / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!);
 		}
 		const order = parseLoaderOrder(values[LOADER_ORDER_ID]);
 		let responseModelColor = DEFAULT_SETTINGS.decorations.responseModelColor;
-		if (isSettingColor(values.responseModelColor)) responseModelColor = values.responseModelColor;
-		const responseModelColored = features.responseModel ? this.#ctx.ui.theme.fg(responseModelColor, "test-model") : "";
+		if (isThinkingLevelColor(values.responseModelColor)) responseModelColor = values.responseModelColor;
+		const responseModelColorizer = getThinkingLevelColorizer(this.#ctx.ui.theme, responseModelColor, this.#ctx.thinkingLevel);
+		const responseModelColored = features.responseModel ? responseModelColorizer("test-model") : "";
 		const responseModel = responseModelColored && values.responseModelDimmed === true ? dimAttribute(responseModelColored) : responseModelColored;
 		if (isFullyDefaultAppearance(features, decorations)) {
 			return buildWorkingMessage(this.#ctx.ui.theme, { spinner, text: this.#ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD), responseModel }, order);
@@ -74,8 +73,7 @@ export class PreviewRenderer {
 			const packValues = this.packValues(values);
 			const signature = JSON.stringify(Object.keys(packValues).sort().map(k => `${k}=${packValues[k]}`));
 			if (signature !== this.#cachedPackSignature) {
-				const enabledPacks = this.#packs.filter((pack) => isWordPackEnabled(pack.id, packValues));
-				this.#cachedPackWord = enabledPacks.length ? selectWorkingTextSelection(packValues, this.#packs, this.#poolFraction).text : this.#word;
+				this.#cachedPackWord = selectWorkingTextSelection(packValues, this.#packs, this.#poolFraction).text;
 				this.#cachedPackSignature = signature;
 			}
 			word = this.#cachedPackWord;
@@ -87,24 +85,26 @@ export class PreviewRenderer {
 			styledWord = this.#ctx.ui.theme.fg("text", word);
 		}
 		let meterColor = DEFAULT_SETTINGS.decorations.meterColor;
-		if (values.meterColorEnabled !== false && isSettingColor(values.meterColor)) {
+		if (isThinkingLevelColor(values.meterColor)) {
 			meterColor = values.meterColor;
 		}
 		let meter = "";
 		if (decorations.tokenActivityMonitor) {
-			meter = this.#meter.render((level, char) => ActivityMeter.colorizeCell(level, char, this.#ctx.ui.theme, meterColor, values.meterDimmed === true));
+			const meterColorizer = getThinkingLevelColorizer(this.#ctx.ui.theme, meterColor, this.#ctx.thinkingLevel);
+			meter = this.#meter.render((level, char) => ActivityMeter.colorizeCell(level, char, this.#ctx.ui.theme, meterColorizer, values.meterDimmed === true));
 		}
 		let tokenRateText = "";
 		if (features.tokenRate) {
 			tokenRateText = formatTokenRate(TOKEN_RATE_PER_SEC);
 		}
 		let tokenRateColor = DEFAULT_SETTINGS.decorations.tokenRateColor;
-		if (isSettingColor(values.tokenRateColor)) {
+		if (isThinkingLevelColor(values.tokenRateColor)) {
 			tokenRateColor = values.tokenRateColor;
 		}
 		let tokenRateColored = "";
 		if (tokenRateText) {
-			tokenRateColored = this.#ctx.ui.theme.fg(tokenRateColor, tokenRateText);
+			const tokenRateColorizer = getThinkingLevelColorizer(this.#ctx.ui.theme, tokenRateColor, this.#ctx.thinkingLevel);
+			tokenRateColored = tokenRateColorizer(tokenRateText);
 		}
 		let tokenRate = tokenRateColored;
 		if (tokenRateColored && values.tokenRateDimmed === true) {
@@ -157,8 +157,9 @@ export class PreviewRenderer {
 			icon: values.useNerdFont ? "" : "π",
 			provider: this.#ctx.model?.provider,
 			model: this.#ctx.model?.id,
-			borderColor: isSettingColor(borderColor) ? borderColor : DEFAULT_SETTINGS.decorations.borderColor,
+			borderColor: isPromptBorderColor(borderColor) ? borderColor : DEFAULT_SETTINGS.decorations.borderColor,
 			borderStyle: isBorderStyle(borderStyle) ? borderStyle : "double",
+			thinkingLevel: this.#ctx.thinkingLevel,
 		});
 		return timestamp === undefined
 			? { lines }
@@ -174,9 +175,9 @@ export class PreviewRenderer {
 		if (values.doneMarkerInputs === true) details.push("2 mid-turn inputs");
 		const content = buildCompletionMarkerContent(theme, icon, word, "2m 52s", details);
 		const borderStyle = isDoneMarkerBorderStyle(values.doneMarkerBorderStyle) ? values.doneMarkerBorderStyle : "none";
-		const borderColor = isSettingColor(values.doneMarkerBorderColor) ? values.doneMarkerBorderColor : DEFAULT_SETTINGS.decorations.doneMarkerBorderColor;
+		const borderColor = isDoneMarkerBorderColor(values.doneMarkerBorderColor) ? values.doneMarkerBorderColor : DEFAULT_SETTINGS.decorations.doneMarkerBorderColor;
 		const markerStyle = isDoneMarkerStyle(values.doneMarkerStyle) ? values.doneMarkerStyle : DEFAULT_SETTINGS.decorations.doneMarkerStyle;
-		const marker = buildCompletionMarkerLine(content, width, theme, borderStyle, borderColor, markerStyle);
+		const marker = buildCompletionMarkerLine(content, width, theme, borderStyle, borderColor, markerStyle, this.#ctx.thinkingLevel);
 		return { lines: ["", marker, ""] };
 	}
 }