@underactive/pi-topping 0.6.5 → 0.7.0

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      ║
@@ -119,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
@@ -136,6 +138,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.6.5",
+  "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, ""] };
 	}
 }

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";
@@ -25,11 +26,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 +56,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 +87,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 +121,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 +146,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(); },
 	};
 };

package/src/session.ts

@@ -18,6 +18,8 @@ import {
 	buildWorkingMessage,
 	DEFAULT_WORKING_WORD,
 	dimAttribute,
+	getThinkingLevelColorizer,
+	isThinkingLevel,
 	ELAPSED_INTERVAL_MS,
 	fadeThemeColorString,
 	formatElapsed,
@@ -34,11 +36,12 @@ import {
 	TOKEN_RATE_FADE_SHADE_COUNT,
 	TOKEN_RATE_PLACEHOLDER,
 	StreamingWordCounter,
+	type ThinkingLevel,
 } from "./format.ts";
 import { isSiblingSetupEnabled } from "./flags.ts";
 import { showMenu } from "./menu.ts";
 import { registerSetupCommand } from "./setup-command.ts";
-import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type SettingColor } from "./settings.ts";
+import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type ThinkingLevelColor } from "./settings.ts";
 import { notifyMissingToppingsOnce } from "./toppings.ts";
 import { PreviewRenderer } from "./preview.ts";
 import { buildCompletionMarkerContent, buildCompletionMarkerLine, PROMPT_BOX_TYPE, promptBoxRenderer, type PromptBoxDetails } from "./prompt-decorator.ts";
@@ -73,6 +76,7 @@ interface DoneEntryData {
 	elapsedMs: number;
 	tokens?: number;
 	midTurnInputs?: number;
+	thinkingLevel?: ThinkingLevel;
 }
 
 interface SessionState {
@@ -199,6 +203,7 @@ export class SessionManager {
 							model: ctx.model?.id,
 							borderColor: this.#settings.decorations.borderColor,
 							borderStyle: this.#settings.decorations.borderStyle,
+							thinkingLevel: ctx.thinkingLevel,
 						},
 					},
 					{ triggerTurn: true },
@@ -217,6 +222,7 @@ export class SessionManager {
 		if (!this.usable(ctx)) return;
 		if (!this.#state.startTime) this.resetTurn(Date.now());
 		this.#state.busy = true;
+		if (!this.#state.waiting) this.applyIndicator(ctx);
 		this.startTimer();
 		this.tick();
 	};
@@ -232,19 +238,17 @@ export class SessionManager {
 
 	#onMessageUpdate = async (event: MessageUpdateEvent, ctx: ExtensionContext): Promise<void> => {
 		this.#currentCtx = ctx;
+		if (!this.usable(ctx)) return;
 		const assistantEvent = event.assistantMessageEvent;
 		if (
-			this.usable(ctx) &&
 			assistantEvent &&
 			(assistantEvent.type === "text_delta" || assistantEvent.type === "thinking_delta")
 		) {
 			this.#state.liveTokens += this.#counter.count(assistantEvent.delta, assistantEvent.type);
 		}
-		if (this.usable(ctx)) {
-			const rawResponseModel = (assistantEvent as { partial?: { responseModel?: unknown } } | undefined)?.partial?.responseModel
-				?? (event.message as { responseModel?: unknown } | undefined)?.responseModel;
-			this.updateResponseModel(rawResponseModel);
-		}
+		const rawResponseModel = (assistantEvent as { partial?: { responseModel?: unknown } } | undefined)?.partial?.responseModel
+			?? (event.message as { responseModel?: unknown } | undefined)?.responseModel;
+		this.updateResponseModel(rawResponseModel);
 	};
 
 	#onMessageEnd = async (event: MessageEndEvent, ctx: ExtensionContext): Promise<void> => {
@@ -319,6 +323,7 @@ export class SessionManager {
 				elapsedMs,
 				tokens: this.#state.confirmTokens,
 				midTurnInputs: this.#state.midTurnInputs,
+				thinkingLevel: ctx.thinkingLevel,
 			});
 		}
 		this.#currentCtx = null;
@@ -336,8 +341,8 @@ export class SessionManager {
 		const elapsedMs = typeof entry.data.elapsedMs === "number" && Number.isFinite(entry.data.elapsedMs) ? entry.data.elapsedMs : 0;
 		const features = this.#settings.features;
 		const details: string[] = [];
-		if (features.doneMarkerTokens && typeof entry.data.tokens === "number") details.push(`↓ ${formatTokens(entry.data.tokens)} tokens`);
-		if (features.doneMarkerInputs && typeof entry.data.midTurnInputs === "number" && entry.data.midTurnInputs) {
+		if (features.doneMarkerTokens && typeof entry.data.tokens === "number" && Number.isFinite(entry.data.tokens) && entry.data.tokens >= 0) details.push(`↓ ${formatTokens(entry.data.tokens)} tokens`);
+		if (features.doneMarkerInputs && typeof entry.data.midTurnInputs === "number" && Number.isInteger(entry.data.midTurnInputs) && entry.data.midTurnInputs > 0) {
 			details.push(`${entry.data.midTurnInputs} mid-turn input${entry.data.midTurnInputs === 1 ? "" : "s"}`);
 		}
 		const icon = features.doneMarkerIcon ? theme.fg("text", this.#settings.decorations.useNerdFont ? "" : "π") : "";
@@ -345,6 +350,7 @@ export class SessionManager {
 		const borderStyle = this.#settings.decorations.doneMarkerBorderStyle;
 		const borderColor = this.#settings.decorations.doneMarkerBorderColor;
 		const markerStyle = this.#settings.decorations.doneMarkerStyle;
+		const thinkingLevel = isThinkingLevel(entry.data.thinkingLevel) ? entry.data.thinkingLevel : undefined;
 		if (borderStyle === "none") return new Text(markerContent);
 
 		let cachedWidth: number | undefined;
@@ -353,7 +359,7 @@ export class SessionManager {
 			render(width: number): string[] {
 				if (cachedWidth !== width) {
 					cachedWidth = width;
-					cachedLines = ["", buildCompletionMarkerLine(markerContent, width, theme, borderStyle, borderColor, markerStyle), ""];
+					cachedLines = ["", buildCompletionMarkerLine(markerContent, width, theme, borderStyle, borderColor, markerStyle, thinkingLevel), ""];
 				}
 				return cachedLines!;
 			},
@@ -412,11 +418,6 @@ export class SessionManager {
 		return this.#settings.decorations.animatedSpinner && this.#settings.loaderOrder[0] !== "spinner";
 	}
 
-	private spinnerColor(): SettingColor {
-		const decorations = this.#settings.decorations;
-		return decorations.spinnerColorEnabled ? decorations.spinnerColor : "accent";
-	}
-
 	private indicatorFingerprint(): string {
 		const decorations = this.#settings.decorations;
 		return `${decorations.animatedSpinner}:${decorations.spinnerColor}:${decorations.spinnerColorEnabled}:${this.#settings.loaderOrder[0]}`;
@@ -435,12 +436,10 @@ export class SessionManager {
 			return;
 		}
 
-		const color = this.spinnerColor();
-		if (color === "accent") {
-			ctx.ui.setWorkingIndicator(undefined);
-			return;
-		}
-		ctx.ui.setWorkingIndicator({ frames: SPINNER_FRAMES.map((frame) => ctx.ui.theme.fg(color, frame)) });
+		const color = this.#settings.decorations.spinnerColor;
+		ctx.ui.setWorkingIndicator({
+			frames: SPINNER_FRAMES.map((frame) => getThinkingLevelColorizer(ctx.ui.theme, color, ctx.thinkingLevel)(frame)),
+		});
 	}
 
 	private stopTimer(): void {
@@ -485,13 +484,19 @@ export class SessionManager {
 		}
 	}
 
-	private startResponseModelFade(ctx: ExtensionContext, model: string, color: SettingColor, dimmed: boolean): void {
+	private startResponseModelFade(ctx: ExtensionContext, model: string, color: ThinkingLevelColor, dimmed: boolean): void {
 		this.cancelResponseModelFade(ctx);
 		const generation = this.#state.responseModelFadeGeneration;
+		const colorizer = getThinkingLevelColorizer(ctx.ui.theme, color, ctx.thinkingLevel);
 		const render = (shade?: number): void => {
 			const colored = shade === undefined
-				? ctx.ui.theme.fg(color, model)
-				: fadeThemeColorString(model, shade, ctx.ui.theme, color);
+				? colorizer(model)
+				: fadeThemeColorString(
+					model,
+					shade,
+					ctx.ui.theme,
+					colorizer,
+				);
 			const responseModel = dimmed ? dimAttribute(colored) : colored;
 			ctx.ui.setStatus(RESPONSE_MODEL_STATUS_KEY, responseModel);
 		};
@@ -573,10 +578,10 @@ export class SessionManager {
 			state.lastTokenRateSampledAt = now;
 		}
 		const spinner = this.spinnerInMessage()
-			? ctx.ui.theme.fg(this.spinnerColor(), SPINNER_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!)
+			? getThinkingLevelColorizer(ctx.ui.theme, decorations.spinnerColor, ctx.thinkingLevel)(SPINNER_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!)
 			: "";
 		const responseModelColored = features.responseModel && state.responseModel
-			? ctx.ui.theme.fg(decorations.responseModelColor, state.responseModel)
+			? getThinkingLevelColorizer(ctx.ui.theme, decorations.responseModelColor, ctx.thinkingLevel)(state.responseModel)
 			: "";
 		const responseModel = responseModelColored && decorations.responseModelDimmed ? dimAttribute(responseModelColored) : responseModelColored;
 		if (isFullyDefaultAppearance(features, decorations)) {
@@ -594,17 +599,13 @@ export class SessionManager {
 		const styled = decorations.shimmer
 			? shimmerString(word, now - state.shimmerOrigin, ctx.ui.theme, decorations.shimmerDirection, decorations.shimmerSpeed, decorations.shimmerInverted)
 			: ctx.ui.theme.fg("text", word);
-		const meter = decorations.tokenActivityMonitor
-			? state.activityMeter.render((level, char) =>
-				ActivityMeter.colorizeCell(
-					level,
-					char,
-					ctx.ui.theme,
-					decorations.meterColorEnabled ? decorations.meterColor : "accent",
-					decorations.meterDimmed,
-				),
-			)
-			: "";
+		let meter = "";
+		if (decorations.tokenActivityMonitor) {
+			const meterColorizer = getThinkingLevelColorizer(ctx.ui.theme, decorations.meterColor, ctx.thinkingLevel);
+			meter = state.activityMeter.render((level, char) =>
+				ActivityMeter.colorizeCell(level, char, ctx.ui.theme, meterColorizer, decorations.meterDimmed),
+			);
+		}
 		let tokenRateText = "";
 		if (features.tokenRate) {
 			const latestTokenRate = formatTokenRate(state.rateTracker.tokenRate);
@@ -616,18 +617,22 @@ export class SessionManager {
 			}
 			tokenRateText = state.tokenRateText;
 		}
-		const tokenRateSegment = !features.tokenRate
-			? ""
-			: !tokenRateText
-				? ctx.ui.theme.fg("dim", TOKEN_RATE_PLACEHOLDER)
-				: now < state.tokenRateFadeStartsAt
-					? ctx.ui.theme.fg(decorations.tokenRateColor, tokenRateText)
+		let tokenRateSegment = "";
+		if (features.tokenRate) {
+			if (!tokenRateText) {
+				tokenRateSegment = ctx.ui.theme.fg("dim", TOKEN_RATE_PLACEHOLDER);
+			} else {
+				const tokenRateColorizer = getThinkingLevelColorizer(ctx.ui.theme, decorations.tokenRateColor, ctx.thinkingLevel);
+				tokenRateSegment = now < state.tokenRateFadeStartsAt
+					? tokenRateColorizer(tokenRateText)
 					: fadeThemeColorString(
 						tokenRateText,
 						Math.floor((now - state.tokenRateFadeStartsAt) / (TOKEN_RATE_FADE_MS / TOKEN_RATE_FADE_SHADE_COUNT)),
 						ctx.ui.theme,
-						decorations.tokenRateColor,
+						tokenRateColorizer,
 					);
+			}
+		}
 		const tokenRateStyled = tokenRateSegment && decorations.tokenRateDimmed ? dimAttribute(tokenRateSegment) : tokenRateSegment;
 		const msg = buildWorkingMessage(
 			ctx.ui.theme,
@@ -657,7 +662,7 @@ export class SessionManager {
 		this.#userPacks = loadUserWordPacks();
 		this.#allPacks = [...this.#bundledPacks, ...this.#userPacks];
 		const before = this.indicatorFingerprint();
-		const preview = new PreviewRenderer(ctx, [...this.#bundledPacks, ...this.#userPacks]);
+		const preview = new PreviewRenderer(ctx, this.#allPacks);
 		const result = await showMenu<Record<string, boolean | string>>(ctx, {
 			title: "Pi Topping: Settings",
 			maxHeight: "75%",

package/src/settings.ts

@@ -7,7 +7,20 @@ import { isWordPackEnabled, isWordPackId, type WordPack } from "./word-packs.ts"
 import { isPlainObject } from "./util.ts";
 
 export const SETTING_COLOR_VALUES = ["accent", "border", "borderAccent", "success", "error", "warning"] as const;
-export type SettingColor = (typeof SETTING_COLOR_VALUES)[number];
+export const LOADER_COLOR_VALUES = [...SETTING_COLOR_VALUES, "text", "muted"] as const;
+export const THINKING_LEVEL_COLOR_VALUES = ["thinking-level", ...LOADER_COLOR_VALUES] as const;
+export type ThinkingLevelColor = (typeof THINKING_LEVEL_COLOR_VALUES)[number];
+export const THINKING_LEVEL_SETTING_COLOR_VALUES = ["thinking-level", ...SETTING_COLOR_VALUES] as const;
+export type ThinkingLevelSettingColor = (typeof THINKING_LEVEL_SETTING_COLOR_VALUES)[number];
+export const SPINNER_COLOR_VALUES = THINKING_LEVEL_SETTING_COLOR_VALUES;
+export type SpinnerColor = ThinkingLevelSettingColor;
+export const PROMPT_BORDER_COLOR_VALUES = THINKING_LEVEL_SETTING_COLOR_VALUES;
+export type PromptBorderColor = ThinkingLevelSettingColor;
+export const DONE_MARKER_BORDER_COLOR_VALUES = THINKING_LEVEL_SETTING_COLOR_VALUES;
+export type DoneMarkerBorderColor = ThinkingLevelSettingColor;
+const THINKING_LEVEL_COLOR_MIGRATION_VERSION = 2;
+const DONE_MARKER_BORDER_COLOR_MIGRATION_VERSION = 3;
+export const SETTINGS_SCHEMA_VERSION = 3;
 
 export const BORDER_STYLE_VALUES = ["double", "single", "rounded", "heavy"] as const;
 export type BorderStyle = (typeof BORDER_STYLE_VALUES)[number];
@@ -28,10 +41,18 @@ export function isDoneMarkerStyle(value: unknown): value is DoneMarkerStyle {
 	return typeof value === "string" && DONE_MARKER_STYLE_VALUES.some(style => style === value);
 }
 
-export function isSettingColor(value: unknown): value is SettingColor {
-	return typeof value === "string" && SETTING_COLOR_VALUES.some(color => color === value);
+export function isThinkingLevelColor(value: unknown): value is ThinkingLevelColor {
+	return typeof value === "string" && THINKING_LEVEL_COLOR_VALUES.some(color => color === value);
 }
 
+export function isThinkingLevelSettingColor(value: unknown): value is ThinkingLevelSettingColor {
+	return typeof value === "string" && THINKING_LEVEL_SETTING_COLOR_VALUES.some(color => color === value);
+}
+
+export const isSpinnerColor = isThinkingLevelSettingColor;
+export const isPromptBorderColor = isThinkingLevelSettingColor;
+export const isDoneMarkerBorderColor = isThinkingLevelSettingColor;
+
 export interface DecoratorSettings {
 	decorations: {
 		animatedSpinner: boolean;
@@ -45,21 +66,21 @@ export interface DecoratorSettings {
 		meterDirection: "ltr" | "rtl";
 		meterDirectionEnabled: boolean;
 		decorateUserPrompt: boolean;
-		borderColor: SettingColor;
+		borderColor: PromptBorderColor;
 		borderColorEnabled: boolean;
 		borderStyle: BorderStyle;
 		borderStyleEnabled: boolean;
 		doneMarkerBorderStyle: DoneMarkerBorderStyle;
-		doneMarkerBorderColor: SettingColor;
+		doneMarkerBorderColor: DoneMarkerBorderColor;
 		doneMarkerStyle: DoneMarkerStyle;
-		spinnerColor: SettingColor;
+		spinnerColor: SpinnerColor;
 		spinnerColorEnabled: boolean;
-		meterColor: SettingColor;
+		meterColor: ThinkingLevelColor;
 		meterColorEnabled: boolean;
 		meterDimmed: boolean;
-		tokenRateColor: SettingColor;
+		tokenRateColor: ThinkingLevelColor;
 		tokenRateDimmed: boolean;
-		responseModelColor: SettingColor;
+		responseModelColor: ThinkingLevelColor;
 		responseModelDimmed: boolean;
 		promptIcon: boolean;
 		promptTimestamp: boolean;
@@ -84,7 +105,7 @@ export interface DecoratorSettings {
 }
 
 export const DEFAULT_SETTINGS: DecoratorSettings = {
-	decorations: { animatedSpinner: true, shimmer: true, shimmerInverted: false, shimmerDirection: "ltr", shimmerDirectionEnabled: true, shimmerSpeed: "normal", shimmerSpeedEnabled: true, tokenActivityMonitor: true, meterDirection: "rtl", meterDirectionEnabled: true, decorateUserPrompt: true, borderColor: "borderAccent", borderColorEnabled: true, borderStyle: "double", borderStyleEnabled: true, doneMarkerBorderStyle: "none", doneMarkerBorderColor: "borderAccent", doneMarkerStyle: "elite", spinnerColor: "accent", spinnerColorEnabled: true, meterColor: "accent", meterColorEnabled: true, meterDimmed: false, tokenRateColor: "warning", tokenRateDimmed: false, responseModelColor: "accent", responseModelDimmed: false, promptIcon: true, promptTimestamp: true, promptProvider: true, promptModel: true, useNerdFont: true },
+	decorations: { animatedSpinner: true, shimmer: true, shimmerInverted: false, shimmerDirection: "ltr", shimmerDirectionEnabled: true, shimmerSpeed: "normal", shimmerSpeedEnabled: true, tokenActivityMonitor: true, meterDirection: "rtl", meterDirectionEnabled: true, decorateUserPrompt: true, borderColor: "thinking-level", borderColorEnabled: true, borderStyle: "double", borderStyleEnabled: true, doneMarkerBorderStyle: "none", doneMarkerBorderColor: "thinking-level", doneMarkerStyle: "elite", spinnerColor: "thinking-level", spinnerColorEnabled: true, meterColor: "accent", meterColorEnabled: true, meterDimmed: false, tokenRateColor: "warning", tokenRateDimmed: false, responseModelColor: "accent", responseModelDimmed: false, promptIcon: true, promptTimestamp: true, promptProvider: true, promptModel: true, useNerdFont: true },
 	features: { substituteDefaultMessage: true, elapsedTime: true, outputTokens: true, tokenRate: true, responseModel: true, doneMarker: true, doneMarkerIcon: true, randomizeDoneMarker: true, doneMarkerTokens: true, doneMarkerInputs: true },
 	loaderOrder: [...DEFAULT_LOADER_ORDER],
 	wordPacks: {},
@@ -128,7 +149,12 @@ function mergeGroup<T extends Record<string, boolean | string>>(defaults: T, par
 		if (typeof merged[key] === "boolean" && typeof value === "boolean") valid = value;
 		else if ((key === "meterDirection" || key === "shimmerDirection") && (value === "ltr" || value === "rtl")) valid = value;
 		else if (key === "shimmerSpeed" && (value === "slow" || value === "normal" || value === "fast")) valid = value;
-		else if (key.endsWith("Color") && isSettingColor(value)) valid = value;
+		else if (key === "spinnerColor" && value === "default") valid = "thinking-level";
+		else if (key === "spinnerColor" && isSpinnerColor(value)) valid = value;
+		else if (key === "borderColor" && isPromptBorderColor(value)) valid = value;
+		else if (key === "doneMarkerBorderColor" && value === "default") valid = "thinking-level";
+		else if (key === "doneMarkerBorderColor" && isDoneMarkerBorderColor(value)) valid = value;
+		else if ((key === "meterColor" || key === "tokenRateColor" || key === "responseModelColor") && isThinkingLevelColor(value)) valid = value;
 		else if (key === "borderStyle" && isBorderStyle(value)) valid = value;
 		else if (key === "doneMarkerBorderStyle" && isDoneMarkerBorderStyle(value)) valid = value;
 		else if (key === "doneMarkerStyle" && isDoneMarkerStyle(value)) valid = value;
@@ -137,36 +163,14 @@ function mergeGroup<T extends Record<string, boolean | string>>(defaults: T, par
 	return merged;
 }
 
-/** Map a persisted setting value to its menu cycle label (directions and speeds only; colors pass through). */
-function toCycleValue(stored: unknown): string {
-	if (stored === "ltr") return "Left to Right";
-	if (stored === "rtl") return "Right to Left";
-	if (stored === "slow") return "Slow";
-	if (stored === "normal") return "Normal";
-	if (stored === "fast") return "Fast";
-	return String(stored);
-}
-
-/** Map a menu cycle label back to its persisted value. */
-function fromCycleValue(value: string): string {
-	if (value === "Left to Right") return "ltr";
-	if (value === "Right to Left") return "rtl";
-	if (value === "Slow") return "slow";
-	if (value === "Normal") return "normal";
-	if (value === "Fast") return "fast";
-	return value;
-}
-
 /** Convert a persisted or menu direction to a safe preview direction. */
 export function fromCycleDirection(value: unknown): "ltr" | "rtl" {
-	const stored = typeof value === "string" ? fromCycleValue(value) : "";
-	return stored === "rtl" ? "rtl" : "ltr";
+	return value === "rtl" ? "rtl" : "ltr";
 }
 
 /** Convert a persisted or menu speed to a safe preview speed. */
 export function fromCycleSpeed(value: unknown): "slow" | "normal" | "fast" {
-	const stored = typeof value === "string" ? fromCycleValue(value) : "";
-	return stored === "slow" || stored === "fast" ? stored : "normal";
+	return value === "slow" || value === "fast" ? value : "normal";
 }
 
 type MenuSectionName = "User Prompt" | "“Working” Loader" | "Completion Marker" | "Options";
@@ -174,42 +178,45 @@ type DecorationSettings = DecoratorSettings["decorations"];
 type FeatureSettings = DecoratorSettings["features"];
 type DecorationBooleanKey = { [Key in keyof DecorationSettings]: DecorationSettings[Key] extends boolean ? Key : never }[keyof DecorationSettings];
 type MenuEntryBase = { id: string; label: string; section: MenuSectionName };
-type DecorationMenuEntry = MenuEntryBase & { group: "decorations"; key: keyof DecorationSettings; cycleValues?: readonly string[]; cycleEnabledBy?: DecorationBooleanKey; cycleDisabledValue?: string };
-type FeatureMenuEntry = MenuEntryBase & { group: "features"; key: keyof FeatureSettings; cycleValues?: never; cycleEnabledBy?: never; cycleDisabledValue?: never };
+type DecorationMenuEntry = MenuEntryBase & { group: "decorations"; key: keyof DecorationSettings; cycleValues?: readonly string[]; cycleValueLabels?: Readonly<Record<string, string>>; cycleEnabledBy?: DecorationBooleanKey; cycleDisabledValue?: string };
+type FeatureMenuEntry = MenuEntryBase & { group: "features"; key: keyof FeatureSettings; cycleValues?: never; cycleValueLabels?: never; cycleEnabledBy?: never; cycleDisabledValue?: never };
 type MenuEntry = DecorationMenuEntry | FeatureMenuEntry;
+const THINKING_LEVEL_CYCLE_LABELS = { "thinking-level": "thinkingLevel" } as const;
+const DIRECTION_CYCLE_LABELS = { ltr: "Left to Right", rtl: "Right to Left" } as const;
+const SPEED_CYCLE_LABELS = { slow: "Slow", normal: "Normal", fast: "Fast" } as const;
 export const MENU_ENTRIES: readonly MenuEntry[] = [
 	{ id: "decorateUserPrompt", label: "High-vis prompt", section: "User Prompt", group: "decorations", key: "decorateUserPrompt" },
 	{ id: "borderStyle", label: "Border style", section: "User Prompt", group: "decorations", key: "borderStyle", cycleValues: BORDER_STYLE_VALUES, cycleEnabledBy: "borderStyleEnabled", cycleDisabledValue: "double" },
-	{ id: "borderColor", label: "Border color", section: "User Prompt", group: "decorations", key: "borderColor", cycleValues: SETTING_COLOR_VALUES, cycleEnabledBy: "borderColorEnabled", cycleDisabledValue: "borderAccent" },
+	{ id: "borderColor", label: "Border color", section: "User Prompt", group: "decorations", key: "borderColor", cycleValues: PROMPT_BORDER_COLOR_VALUES, cycleValueLabels: THINKING_LEVEL_CYCLE_LABELS, cycleEnabledBy: "borderColorEnabled", cycleDisabledValue: "thinking-level" },
 	{ id: "promptIcon", label: "Pi icon", section: "User Prompt", group: "decorations", key: "promptIcon" },
 	{ id: "promptTimestamp", label: "Timestamp", section: "User Prompt", group: "decorations", key: "promptTimestamp" },
 	{ id: "promptProvider", label: "Provider", section: "User Prompt", group: "decorations", key: "promptProvider" },
 	{ id: "promptModel", label: "Model", section: "User Prompt", group: "decorations", key: "promptModel" },
 	{ id: "animatedSpinner", label: "Animated spinner", section: "“Working” Loader", group: "decorations", key: "animatedSpinner" },
-	{ id: "spinnerColor", label: "Animated spinner color", section: "“Working” Loader", group: "decorations", key: "spinnerColor", cycleValues: SETTING_COLOR_VALUES, cycleEnabledBy: "spinnerColorEnabled", cycleDisabledValue: "accent" },
+	{ id: "spinnerColor", label: "Animated spinner color", section: "“Working” Loader", group: "decorations", key: "spinnerColor", cycleValues: SPINNER_COLOR_VALUES, cycleValueLabels: THINKING_LEVEL_CYCLE_LABELS, cycleEnabledBy: "spinnerColorEnabled", cycleDisabledValue: "thinking-level" },
 	{ id: "substituteDefaultMessage", label: "Randomize “Working” text", section: "“Working” Loader", group: "features", key: "substituteDefaultMessage" },
 	{ id: "shimmer", label: "Text shimmer", section: "“Working” Loader", group: "decorations", key: "shimmer" },
 	{ id: "shimmerInverted", label: "Invert shimmer", section: "“Working” Loader", group: "decorations", key: "shimmerInverted" },
-	{ id: "shimmerDirection", label: "Text shimmer direction", section: "“Working” Loader", group: "decorations", key: "shimmerDirection", cycleValues: ["Left to Right", "Right to Left"], cycleEnabledBy: "shimmerDirectionEnabled", cycleDisabledValue: "Left to Right" },
-	{ id: "shimmerSpeed", label: "Text shimmer speed", section: "“Working” Loader", group: "decorations", key: "shimmerSpeed", cycleValues: ["Slow", "Normal", "Fast"], cycleEnabledBy: "shimmerSpeedEnabled", cycleDisabledValue: "Normal" },
+	{ id: "shimmerDirection", label: "Text shimmer direction", section: "“Working” Loader", group: "decorations", key: "shimmerDirection", cycleValues: ["ltr", "rtl"], cycleValueLabels: DIRECTION_CYCLE_LABELS, cycleEnabledBy: "shimmerDirectionEnabled", cycleDisabledValue: "ltr" },
+	{ id: "shimmerSpeed", label: "Text shimmer speed", section: "“Working” Loader", group: "decorations", key: "shimmerSpeed", cycleValues: ["slow", "normal", "fast"], cycleValueLabels: SPEED_CYCLE_LABELS, cycleEnabledBy: "shimmerSpeedEnabled", cycleDisabledValue: "normal" },
 	{ id: "tokenActivityMonitor", label: "Token activity monitor", section: "“Working” Loader", group: "decorations", key: "tokenActivityMonitor" },
-	{ id: "meterColor", label: "Token activity monitor color", section: "“Working” Loader", group: "decorations", key: "meterColor", cycleValues: SETTING_COLOR_VALUES, cycleEnabledBy: "meterColorEnabled", cycleDisabledValue: "accent" },
-	{ id: "meterDirection", label: "Token activity monitor direction", section: "“Working” Loader", group: "decorations", key: "meterDirection", cycleValues: ["Left to Right", "Right to Left"], cycleEnabledBy: "meterDirectionEnabled", cycleDisabledValue: "Right to Left" },
+	{ id: "meterColor", label: "Token activity monitor color", section: "“Working” Loader", group: "decorations", key: "meterColor", cycleValues: THINKING_LEVEL_COLOR_VALUES, cycleValueLabels: THINKING_LEVEL_CYCLE_LABELS, cycleEnabledBy: "meterColorEnabled", cycleDisabledValue: "accent" },
+	{ id: "meterDirection", label: "Token activity monitor direction", section: "“Working” Loader", group: "decorations", key: "meterDirection", cycleValues: ["ltr", "rtl"], cycleValueLabels: DIRECTION_CYCLE_LABELS, cycleEnabledBy: "meterDirectionEnabled", cycleDisabledValue: "rtl" },
 	{ id: "meterDimmed", label: "Token activity monitor dimmed", section: "“Working” Loader", group: "decorations", key: "meterDimmed" },
 	{ id: "elapsedTime", label: "Elapsed time since prompt", section: "“Working” Loader", group: "features", key: "elapsedTime" },
 	{ id: "outputTokens", label: "Show output tokens", section: "“Working” Loader", group: "features", key: "outputTokens" },
 	// id differs from key: the Elements Order row already owns "tokenRate" in the menu's shared value namespace.
 	{ id: "showTokenRate", label: "Token rate", section: "“Working” Loader", group: "features", key: "tokenRate" },
-	{ id: "tokenRateColor", label: "Token rate color", section: "“Working” Loader", group: "decorations", key: "tokenRateColor", cycleValues: SETTING_COLOR_VALUES },
+	{ id: "tokenRateColor", label: "Token rate color", section: "“Working” Loader", group: "decorations", key: "tokenRateColor", cycleValues: THINKING_LEVEL_COLOR_VALUES, cycleValueLabels: THINKING_LEVEL_CYCLE_LABELS },
 	{ id: "tokenRateDimmed", label: "Token rate dimmed", section: "“Working” Loader", group: "decorations", key: "tokenRateDimmed" },
 	// id differs from key: the Elements Order row already owns "responseModel" in the menu's shared value namespace.
 	{ id: "showResponseModel", label: "Response model", section: "“Working” Loader", group: "features", key: "responseModel" },
-	{ id: "responseModelColor", label: "Response model color", section: "“Working” Loader", group: "decorations", key: "responseModelColor", cycleValues: SETTING_COLOR_VALUES },
+	{ id: "responseModelColor", label: "Response model color", section: "“Working” Loader", group: "decorations", key: "responseModelColor", cycleValues: THINKING_LEVEL_COLOR_VALUES, cycleValueLabels: THINKING_LEVEL_CYCLE_LABELS },
 	{ id: "responseModelDimmed", label: "Response model dimmed", section: "“Working” Loader", group: "decorations", key: "responseModelDimmed" },
 	{ id: "doneMarker", label: "Show completion marker", section: "Completion Marker", group: "features", key: "doneMarker" },
 	{ id: "doneMarkerStyle", label: "Marker style", section: "Completion Marker", group: "decorations", key: "doneMarkerStyle", cycleValues: DONE_MARKER_STYLE_VALUES },
 	{ id: "doneMarkerBorderStyle", label: "Border style", section: "Completion Marker", group: "decorations", key: "doneMarkerBorderStyle", cycleValues: DONE_MARKER_BORDER_STYLE_VALUES },
-	{ id: "doneMarkerBorderColor", label: "Border color", section: "Completion Marker", group: "decorations", key: "doneMarkerBorderColor", cycleValues: SETTING_COLOR_VALUES },
+	{ id: "doneMarkerBorderColor", label: "Border color", section: "Completion Marker", group: "decorations", key: "doneMarkerBorderColor", cycleValues: DONE_MARKER_BORDER_COLOR_VALUES, cycleValueLabels: THINKING_LEVEL_CYCLE_LABELS },
 	{ id: "doneMarkerIcon", label: "Pi icon", section: "Completion Marker", group: "features", key: "doneMarkerIcon" },
 	{ id: "randomizeDoneMarker", label: "Randomize “Worked” text", section: "Completion Marker", group: "features", key: "randomizeDoneMarker" },
 	{ id: "doneMarkerTokens", label: "Tokens spent", section: "Completion Marker", group: "features", key: "doneMarkerTokens" },
@@ -222,7 +229,7 @@ function menuItem(entry: MenuEntry, settings: DecoratorSettings): MenuSection["i
 	const cycleEnabled = entry.group === "decorations" && entry.cycleEnabledBy
 		? settings.decorations[entry.cycleEnabledBy]
 		: undefined;
-	return { id: entry.id, label: entry.label, cycleValues: entry.cycleValues, cycleEnabledBy: entry.cycleEnabledBy, cycleDisabledValue: entry.cycleDisabledValue, cycleEnabled, value: entry.cycleValues ? toCycleValue(value) : value };
+	return { id: entry.id, label: entry.label, cycleValues: entry.cycleValues, cycleValueLabels: entry.cycleValueLabels, cycleEnabledBy: entry.cycleEnabledBy, cycleDisabledValue: entry.cycleDisabledValue, cycleEnabled, value };
 }
 
 function isDecorationBooleanKey(key: keyof DecorationSettings): key is DecorationBooleanKey {
@@ -230,31 +237,36 @@ function isDecorationBooleanKey(key: keyof DecorationSettings): key is Decoratio
 }
 
 function setDecorationCycleValue(decorations: DecorationSettings, key: keyof DecorationSettings, value: string): void {
-	const stored = fromCycleValue(value);
 	switch (key) {
 		case "borderColor":
+			if (isPromptBorderColor(value)) decorations[key] = value;
+			return;
 		case "spinnerColor":
+			if (isSpinnerColor(value)) decorations[key] = value;
+			return;
 		case "meterColor":
 		case "tokenRateColor":
 		case "responseModelColor":
+			if (isThinkingLevelColor(value)) decorations[key] = value;
+			return;
 		case "doneMarkerBorderColor":
-			if (isSettingColor(stored)) decorations[key] = stored;
+			if (isDoneMarkerBorderColor(value)) decorations[key] = value;
 			return;
 		case "borderStyle":
-			if (isBorderStyle(stored)) decorations[key] = stored;
+			if (isBorderStyle(value)) decorations[key] = value;
 			return;
 		case "doneMarkerBorderStyle":
-			if (isDoneMarkerBorderStyle(stored)) decorations[key] = stored;
+			if (isDoneMarkerBorderStyle(value)) decorations[key] = value;
 			return;
 		case "doneMarkerStyle":
-			if (isDoneMarkerStyle(stored)) decorations[key] = stored;
+			if (isDoneMarkerStyle(value)) decorations[key] = value;
 			return;
 		case "shimmerDirection":
 		case "meterDirection":
-			if (stored === "ltr" || stored === "rtl") decorations[key] = stored;
+			if (value === "ltr" || value === "rtl") decorations[key] = value;
 			return;
 		case "shimmerSpeed":
-			if (stored === "slow" || stored === "normal" || stored === "fast") decorations[key] = stored;
+			if (value === "slow" || value === "normal" || value === "fast") decorations[key] = value;
 			return;
 		default:
 			// Fail loudly if a MENU_ENTRIES cycle entry is added without a handler here.
@@ -321,6 +333,14 @@ export function loadSettings(): DecoratorSettings {
 			wordPacks.simcity = true;
 		}
 		const settings = { decorations: mergeGroup(DEFAULT_SETTINGS.decorations, parsed.decorations), features: mergeGroup(DEFAULT_SETTINGS.features, parsed.features), loaderOrder: parseLoaderOrder(parsed.loaderOrder), wordPacks };
+		const schemaVersion = typeof parsed.schemaVersion === "number" ? parsed.schemaVersion : 1;
+		if (schemaVersion < THINKING_LEVEL_COLOR_MIGRATION_VERSION) {
+			settings.decorations.spinnerColor = "thinking-level";
+			if (settings.decorations.borderColor === "borderAccent") settings.decorations.borderColor = "thinking-level";
+		}
+		if (schemaVersion < DONE_MARKER_BORDER_COLOR_MIGRATION_VERSION) {
+			settings.decorations.doneMarkerBorderColor = "thinking-level";
+		}
 		for (const entry of MENU_ENTRIES) {
 			if (entry.group === "decorations" && entry.cycleEnabledBy && entry.cycleDisabledValue !== undefined && !settings.decorations[entry.cycleEnabledBy]) {
 				setDecorationCycleValue(settings.decorations, entry.key, entry.cycleDisabledValue);
@@ -343,5 +363,5 @@ export function atomicWriteFile(path: string, contents: string): void {
 }
 
 export function saveSettings(settings: DecoratorSettings): void {
-	atomicWriteFile(settingsPath(), `${JSON.stringify(settings, null, 2)}\n`);
+	atomicWriteFile(settingsPath(), `${JSON.stringify({ schemaVersion: SETTINGS_SCHEMA_VERSION, ...settings }, null, 2)}\n`);
 }

package/src/word-packs.ts

@@ -112,7 +112,7 @@ export function selectWorkingTextSelection(enabled: Record<string, boolean>, pac
 	const total = WORDS.length + enabledWords.length;
 	const idx = Math.min(total - 1, Math.floor(fraction * total));
 	const entry = idx < WORDS.length ? WORDS[idx] : enabledWords[idx - WORDS.length];
-	return { text: `${entry.present_tense}…`, pastTense: entry.past_tense };
+	return { text: entry.present_tense, pastTense: entry.past_tense };
 }
 
 export function pickWorkingTextSelection(enabled: Record<string, boolean>, packs: readonly WordPack[]): WorkingTextSelection {

package/src/words.ts

@@ -1,8 +1,8 @@
 /**
- * Activity word list for the randomized "Working..." indicator.
+ * Activity word list for the randomized "Working" indicator.
  *
  * A random word is picked on prompt and on tool execution start
- * (see index.ts).
+ * (see SessionManager in src/session.ts).
  */
 
 export interface WordEntry {
@@ -10,14 +10,6 @@ export interface WordEntry {
 	past_tense: string;
 }
 
-export function pickRawWord(): WordEntry {
-	return WORDS[Math.floor(Math.random() * WORDS.length)]!;
-}
-
-export function pickRandomWord(): string {
-	return `${pickRawWord().present_tense}…`;
-}
-
 export const WORDS: WordEntry[] = [
 	{ present_tense: "Accomplishing", past_tense: "Accomplished" },
 	{ present_tense: "Actioning", past_tense: "Actioned" },