@underactive/pi-topping 0.6.5 → 0.7.1

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.
@@ -306,6 +318,10 @@ export function applyMenuResult(settings: DecoratorSettings, values: Record<stri
  * to defaults on any read/parse error. When a cycle setting's enabled flag is
  * off, its stored value resets to the menu's disabled default so stale choices
  * don't resurface on re-enable.
+ * Files with `schemaVersion` below 2 get spinner color reset to `thinking-level` and
+ * `borderAccent` prompt borders moved to `thinking-level`; below 3, the completion-marker
+ * border color is reset. A legacy `features.simCityWorkingText: true` enables the
+ * `simcity` pack when no explicit preference is stored.
  */
 export function loadSettings(): DecoratorSettings {
 	try {
@@ -321,6 +337,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 +367,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`);
 }