@underactive/pi-topping 0.6.5 → 0.7.1

package/README.md

@@ -31,12 +31,12 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ╔═[ Pi Topping: Settings ]══════════════════════════════════════╗
 ╟─ Preview ─────────────────────────────────────────────────────╢
 ║                                                               ║
-║ ⠋ Crafting… ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tps · 3s · ↓ 84 tokens · test-model  ║
+║ ⠋ Crafting ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tps · 3s · ↓ 84 tokens · test-model   ║
 ║                                                               ║
 ╟─ User Prompt ─────────────────────────────────────────────────╢
 ║    [■] High-vis prompt                                ON      ║
 ║    [■] Border style                             ‹ double ›    ║
-║    [■] Border color                       ‹ borderAccent ›    ║
+║    [■] Border color                      ‹ thinkingLevel ›    ║
 ║    [■] Pi icon                                        ON      ║
 ║    [■] Timestamp                                      ON      ║
 ║    [■] Provider                                       ON      ║
@@ -44,7 +44,7 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ║                                                               ║
 ╟─ “Working” Loader ────────────────────────────────────────────╢
 ║    [■] Animated spinner                               ON      ║
-║  ❯ [■] Animated spinner color                   ‹ accent ›    ║
+║  ❯ [■] Animated spinner color            ‹ thinkingLevel ›    ║
 ║    [■] Randomize “Working” text                       ON      ║
 ║    [■] Text shimmer                                   ON      ║
 ║    [■] Invert shimmer                                OFF      ║
@@ -76,7 +76,7 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ║    [■] Show completion marker                         ON      ║
 ║    [■] Marker style                              ‹ elite ›    ║
 ║    [■] Border style                               ‹ none ›    ║
-║    [■] Border color                       ‹ borderAccent ›    ║
+║    [■] Border color                      ‹ thinkingLevel ›    ║
 ║    [■] Pi icon                                        ON      ║
 ║    [■] Randomize “Worked” text                        ON      ║
 ║    [■] Tokens spent                                   ON      ║
@@ -112,12 +112,15 @@ Bundled packs live in [`wordpacks/`](wordpacks/). Copy `wordpacks/doctor-who.jso
   "packs": [{
     "id": "cooking",
     "name": "Cooking",
+    "description": "Kitchen operations.",
     "words": [{ "present_tense": "Sautéing onions", "past_tense": "Sautéed" }]
   }]
 }
 ```
 
-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.
+Pack IDs must start with a lowercase letter, contain only lowercase letters, digits, and `-`, and be at most 64 characters. Each pack needs a non-empty `name` and at least one word with non-empty `present_tense` and `past_tense` strings. An optional `description` appears in the settings preview when the pack row is selected, and an optional `attribution` records the source. 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.
+
+Every color setting offers `thinking-level` (shown as `thinkingLevel` in `/topping-settings`); it is the default for the animated spinner, the prompt border, and the completion marker border. The spinner, token activity monitor, token rate, and response model follow Pi's current thinking level. The prompt border uses the level captured when the prompt was submitted, and the completion marker uses the level captured when the turn settled, so earlier entries keep their color after you change level. When hand-editing `settings.json`, write `thinking-level`; the legacy `default` spelling is only recognised for `spinnerColor` and `doneMarkerBorderColor`.
 
 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
@@ -136,6 +139,7 @@ The response model is captured from assistant responses, displayed as its saniti
 ## 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
@@ -146,7 +150,7 @@ npm test
 npm run typecheck
 ```
 
-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.
+Tests cover the word/shimmer rendering, prompt box and completion marker rendering, activity meter behavior, timer resets, settings persistence and schema migrations, word-pack parsing and loading, the `menu.ts` component, the settings menu wiring end to end, and the flag-gated `/topping-setup` command's install and uninstall flows.
 
 ## Limitations
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.6.5",
+  "version": "0.7.1",
   "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 = [
@@ -71,7 +91,7 @@ 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. */
+/** Number of discrete, eased shades used by the token-rate and response-model fades. */
 export const TOKEN_RATE_FADE_SHADE_COUNT = 5;
 
 /** Milliseconds a settled response model remains fully visible before fading. */
@@ -80,17 +100,17 @@ export const RESPONSE_MODEL_HOLD_MS = 3_000;
 /** Milliseconds over which a settled response model fades through the theme shades. */
 export const RESPONSE_MODEL_FADE_MS = 500;
 
-/** Render one token-rate fade shade by blending the selected color toward the active theme's dim color. */
+/** Render one fade shade by blending the colorizer's color toward the active theme's dim color. */
 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

@@ -4,7 +4,7 @@
  * contract and `ctx.ui.custom()` overlay API.
  *
  * Renders a titled box containing one or more sections of boolean toggle,
- * multi-value cycle, or drag-to-reorder items, plus an optional live-updating
+ * multi-value cycle, or keyboard-reorderable items, plus an optional live-updating
  * preview section driven by a caller-supplied render callback.
  *
  * Intended to be reused by any extension that needs a simple modal toggle
@@ -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). */
@@ -55,15 +57,14 @@ export interface MenuConfig {
 	/**
 	 * Optional preview renderer, shown in its own "Preview" section above the
 	 * toggle sections. Called on every render with the menu's current (possibly
-	 * toggled but not-yet-applied) values and the number of milliseconds elapsed
-	 * since the menu opened. Lines may contain ANSI styling and are truncated/
-	 * padded to fit automatically.
+	 * toggled but not-yet-applied) values, the milliseconds elapsed since the menu
+	 * opened, the id of the item under the cursor (undefined for an empty menu),
+	 * and the width available to each line. 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.
+	 * Omitting `nextRefreshInMs` (or returning a value <= 0) 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 +89,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 +154,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 +214,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 +253,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 +287,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 +301,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 +372,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 +437,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 +543,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/pi-installer.ts

@@ -9,17 +9,16 @@ export interface PiInstallResult {
 const SIGKILL_GRACE_MS = 5_000;
 const EXIT_TIMEOUT = 124;
 
-/** Run `pi install <spec>` without relying on Pi's shell-less exec wrapper on Windows. */
-export function spawnPiInstall(spec: string, timeoutMs: number): Promise<PiInstallResult> {
+function spawnPiPackageCommand(command: "install" | "remove", spec: string, timeoutMs: number): Promise<PiInstallResult> {
 	if (!/^npm:@?[\w.-]+(\/[\w.-]+)?$/.test(spec)) {
 		return Promise.resolve({ code: 1, stdout: "", stderr: `invalid spec: ${spec}` });
 	}
 	return new Promise((resolve) => {
 		const isWindows = process.platform === "win32";
-		const [command, args, options] = isWindows
-			? (["cmd.exe", ["/c", "pi", "install", spec], { windowsHide: true }] as const)
-			: (["pi", ["install", spec], {}] as const);
-		const processHandle = spawn(command, args, { ...options, stdio: ["ignore", "pipe", "pipe"] });
+		const [executable, args, options] = isWindows
+			? (["cmd.exe", ["/c", "pi", command, spec], { windowsHide: true }] as const)
+			: (["pi", [command, spec], {}] as const);
+		const processHandle = spawn(executable, args, { ...options, stdio: ["ignore", "pipe", "pipe"] });
 		let stdout = "";
 		let stderr = "";
 		let settled = false;
@@ -61,3 +60,13 @@ export function spawnPiInstall(spec: string, timeoutMs: number): Promise<PiInsta
 		});
 	});
 }
+
+/** Run `pi install <spec>` without relying on Pi's shell-less exec wrapper on Windows. */
+export function spawnPiInstall(spec: string, timeoutMs: number): Promise<PiInstallResult> {
+	return spawnPiPackageCommand("install", spec, timeoutMs);
+}
+
+/** Run `pi remove <spec>` without relying on Pi's shell-less exec wrapper on Windows. */
+export function spawnPiRemove(spec: string, timeoutMs: number): Promise<PiInstallResult> {
+	return spawnPiPackageCommand("remove", spec, timeoutMs);
+}

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, ""] };
 	}
 }

package/src/prompt-decorator.ts

@@ -1,6 +1,7 @@
-import type { MessageRenderer, ThemeColor } from "@earendil-works/pi-coding-agent";
+import type { MessageRenderer } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import { DEFAULT_SETTINGS, isBorderStyle, isSettingColor, type BorderStyle, type DoneMarkerBorderStyle, type DoneMarkerStyle, type SettingColor } from "./settings.ts";
+import { getThinkingLevelColorizer, isThinkingLevel, type ThinkingLevel } from "./format.ts";
+import { DEFAULT_SETTINGS, isBorderStyle, isPromptBorderColor, type BorderStyle, type DoneMarkerBorderColor, type DoneMarkerBorderStyle, type DoneMarkerStyle, type PromptBorderColor } from "./settings.ts";
 import { stripControlChars } from "./util.ts";
 
 export const PROMPT_BOX_TYPE = "pi-topping-prompt";
@@ -14,7 +15,10 @@ const BORDER_GLYPHS: Record<BorderStyle, { tl: string; tr: string; bl: string; b
 
 /**
  * False visibility options hide each corresponding part; present provider and
- * model values join with `/` in the bottom border.
+ * model values join with `/` in the bottom border. `thinkingLevel` is the level
+ * captured at submission and is only used when `borderColor` is `thinking-level`.
+ * Unrecognised `borderStyle` / `borderColor` values fall back to `double` and the
+ * default border color.
  */
 export interface PromptBoxDetails {
 	submittedAt?: number;
@@ -25,11 +29,15 @@ export interface PromptBoxDetails {
 	icon?: string;
 	provider?: string;
 	model?: string;
-	borderColor?: ThemeColor;
+	borderColor?: PromptBorderColor;
 	borderStyle?: BorderStyle;
+	thinkingLevel?: ThinkingLevel;
 }
 
-type PromptTheme = { fg(color: string, text: string): string };
+type PromptTheme = {
+	fg(color: string, text: string): string;
+	getThinkingBorderColor(level: ThinkingLevel): (text: string) => string;
+};
 
 const COMPLETION_MARKER_TRAIL_RUNS = [6, 4, 2, 1] as const;
 
@@ -51,15 +59,16 @@ export function buildCompletionMarkerLine(
 	width: number,
 	theme: PromptTheme,
 	borderStyle: DoneMarkerBorderStyle,
-	borderColor: SettingColor,
+	borderColor: DoneMarkerBorderColor,
 	markerStyle: DoneMarkerStyle = DEFAULT_SETTINGS.decorations.doneMarkerStyle,
+	thinkingLevel?: ThinkingLevel,
 ): string {
 	const safeWidth = Math.max(0, Math.floor(width));
 	if (safeWidth === 0) return "";
 	if (borderStyle === "none") return truncateToWidth(content, safeWidth);
 
 	const g = BORDER_GLYPHS[borderStyle];
-	const border = (text: string) => theme.fg(borderColor, text);
+	const border = getThinkingLevelColorizer(theme, borderColor, thinkingLevel);
 	const prefix = `${g.bl}${g.h.repeat(2)} `;
 
 	const suffix = markerStyle === "bookend"
@@ -81,8 +90,10 @@ export function buildPromptBoxLines(
 
 	const borderStyle = isBorderStyle(options.borderStyle) ? options.borderStyle : "double";
 	const g = BORDER_GLYPHS[borderStyle];
-	const borderColor = isSettingColor(options.borderColor) ? options.borderColor : DEFAULT_SETTINGS.decorations.borderColor;
-	const border = (text: string) => theme.fg(borderColor, text);
+	const borderColor = isPromptBorderColor(options.borderColor) ? options.borderColor : DEFAULT_SETTINGS.decorations.borderColor;
+	const thinkingLevel = isThinkingLevel(options.thinkingLevel) ? options.thinkingLevel : undefined;
+	const border = getThinkingLevelColorizer(theme, borderColor, thinkingLevel);
+	const iconColor = (text: string) => theme.fg("text", text);
 	const label = (text: string) => theme.fg("customMessageLabel", text);
 	const muted = (text: string) => theme.fg("dim", text);
 	const bodyText = (text: string) => theme.fg("customMessageText", text);
@@ -113,7 +124,7 @@ export function buildPromptBoxLines(
 	const titleLength = icon ? visibleWidth(`${g.h}${g.h} ${icon} `) : 0;
 	const timeLength = time ? time.length + 3 : 0; // time + right-side " ═"
 	const topFill = Math.max(0, innerWidth - titleLength - timeLength);
-	const iconSeg = icon ? `${border(`${g.h}${g.h} `)}${label(icon)}${border(" ")}` : "";
+	const iconSeg = icon ? `${border(`${g.h}${g.h} `)}${iconColor(icon)}${border(" ")}` : "";
 	const timeSeg = time ? `${border(" ")}${muted(time)}${border(` ${g.h}`)}` : "";
 	const topLine = border(g.tl) + iconSeg + border(g.h.repeat(topFill)) + timeSeg + border(g.tr);
 	const lines = [visibleWidth(topLine) > width ? truncateToWidth(topLine, width) : topLine];
@@ -138,16 +149,19 @@ export function buildPromptBoxLines(
 export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _options, theme) => {
 	const content = typeof message.content === "string" ? message.content.replace(/(?![\n\t])[\p{Cc}\p{Cf}]/gu, "") : "";
 	const details = (message.details ?? {}) as PromptBoxDetails;
-	const linesByWidth = new Map<number, string[]>();
+	let cachedWidth: number | undefined;
+	let cachedLines: string[] | undefined;
 	return {
 		render(width: number): string[] {
-			let lines = linesByWidth.get(width);
-			if (!lines) {
-				lines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
-				linesByWidth.set(width, lines);
+			if (cachedWidth !== width) {
+				cachedWidth = width;
+				cachedLines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
 			}
-			return lines;
+			return cachedLines!;
+		},
+		invalidate() {
+			cachedWidth = undefined;
+			cachedLines = undefined;
 		},
-		invalidate() { linesByWidth.clear(); },
 	};
 };