@underactive/pi-topping 0.4.0 → 0.5.1

package/src/session.ts

@@ -1,6 +1,7 @@
 import type {
 	AgentSettledEvent,
 	AgentStartEvent,
+	CustomEntry,
 	ExtensionAPI,
 	ExtensionCommandContext,
 	ExtensionContext,
@@ -9,23 +10,33 @@ import type {
 	InputEventResult,
 	SessionShutdownEvent,
 	SessionStartEvent,
+	Theme,
 } from "@earendil-works/pi-coding-agent";
-import { Text } from "@earendil-works/pi-tui";
+import { Text, type Component } from "@earendil-works/pi-tui";
 import { ActivityMeter, rateToLevel, TokRateTracker } from "./activity-meter.ts";
 import {
 	buildWorkingMessage,
+	DEFAULT_WORKING_WORD,
+	dimAttribute,
+	ELAPSED_INTERVAL_MS,
+	fadeThemeColorString,
 	formatElapsed,
+	formatTokenRate,
 	formatTokens,
 	isFullyDefaultAppearance,
+	METER_INTERVAL_MS,
+	SHIMMER_INTERVAL_MS,
 	shimmerString,
 	SPINNER_FRAME_MS,
 	SPINNER_FRAMES,
+	TOKEN_RATE_FADE_SHADE_COUNT,
+	TOKEN_RATE_PLACEHOLDER,
 	StreamingWordCounter,
 } from "./format.ts";
 import { showMenu } from "./menu.ts";
-import { applyMenuResult, buildMenuSections, loadSettings, saveSettings } from "./settings.ts";
+import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type SettingColor } from "./settings.ts";
 import { PreviewRenderer } from "./preview.ts";
-import { PROMPT_BOX_TYPE, promptBoxRenderer, type PromptBoxDetails } from "./prompt-decorator.ts";
+import { buildCompletionMarkerContent, buildCompletionMarkerLine, PROMPT_BOX_TYPE, promptBoxRenderer, stripControlChars, type PromptBoxDetails } from "./prompt-decorator.ts";
 import { pickRandomWord, pickRawWord } from "./words.ts";
 
 type MessageStartEvent = Extract<ExtensionEvent, { type: "message_start" }>;
@@ -34,19 +45,18 @@ type MessageEndEvent = Extract<ExtensionEvent, { type: "message_end" }>;
 type ToolExecutionStartEvent = Extract<ExtensionEvent, { type: "tool_execution_start" }>;
 
 const DONE_ENTRY_TYPE = "pi-topping-done";
-const DEFAULT_WORKING_WORD = "Working…";
-const SHIMMER_INTERVAL = 50;
-const METER_INTERVAL_MS = 100;
-const ELAPSED_INTERVAL_MS = 1_000;
+// Reconciliation resets the EMA at message boundaries, so retain and then fade the last rate to avoid flicker.
+const TOKEN_RATE_HOLD_MS = 1_500;
+const TOKEN_RATE_FADE_MS = 250;
 
-export interface DoneEntryData {
+interface DoneEntryData {
 	word: string;
 	elapsedMs: number;
 	tokens?: number;
 	midTurnInputs?: number;
 }
 
-export interface SessionState {
+interface SessionState {
 	startTime: number;
 	currentWord: string;
 	confirmTokens: number;
@@ -54,13 +64,30 @@ export interface SessionState {
 	shimmerOrigin: number;
 	activityMeter: ActivityMeter;
 	rateTracker: TokRateTracker;
-	lastActivityMeterUpdate: number;
+	lastTokenRateSampledAt: number;
+	lastTokenRateTotal: number;
+	tokenRateText: string;
+	tokenRateFadeStartsAt: number;
 	timer: ReturnType<typeof setInterval> | null;
 	busy: boolean;
 	midTurnInputs: number;
+	/** Last string passed to setWorkingMessage(), or the NOT_SENT sentinel before the first call. */
+	lastMessage: string | undefined | typeof NOT_SENT;
 }
 
-export function makeFreshState(): SessionState {
+/** Sentinel distinguishing "never called setWorkingMessage()" from an explicit `undefined` message. */
+const NOT_SENT = Symbol("not-sent");
+
+/** Reset all token-rate tracking fields on `state` to their fresh-turn values. */
+function resetTokenRateState(state: SessionState): void {
+	state.rateTracker.reset();
+	state.lastTokenRateSampledAt = 0;
+	state.lastTokenRateTotal = 0;
+	state.tokenRateText = "";
+	state.tokenRateFadeStartsAt = 0;
+}
+
+function makeFreshState(): SessionState {
 	return {
 		startTime: 0,
 		currentWord: "",
@@ -69,10 +96,14 @@ export function makeFreshState(): SessionState {
 		shimmerOrigin: 0,
 		activityMeter: new ActivityMeter(),
 		rateTracker: new TokRateTracker(),
-		lastActivityMeterUpdate: 0,
+		lastTokenRateSampledAt: 0,
+		lastTokenRateTotal: 0,
+		tokenRateText: "",
+		tokenRateFadeStartsAt: 0,
 		timer: null,
 		busy: false,
 		midTurnInputs: 0,
+		lastMessage: NOT_SENT,
 	};
 }
 
@@ -91,7 +122,6 @@ export class SessionManager {
 	#onSessionStart = async (_e: SessionStartEvent, ctx: ExtensionContext): Promise<void> => {
 		this.stopTimer();
 		this.#counter.reset();
-		this.#currentCtx = null;
 		this.#state = makeFreshState();
 		this.#settings = loadSettings();
 		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
@@ -115,15 +145,16 @@ export class SessionManager {
 						submittedAt: Date.now(),
 						showIcon: this.#settings.decorations.promptIcon,
 						showTimestamp: this.#settings.decorations.promptTimestamp,
+						showProvider: this.#settings.decorations.promptProvider,
+						showModel: this.#settings.decorations.promptModel,
 						icon: this.#settings.decorations.useNerdFont ? "" : "π",
+						provider: ctx.model?.provider,
+						model: ctx.model?.id,
 						borderColor: this.#settings.decorations.borderColor,
 						borderStyle: this.#settings.decorations.borderStyle,
 					},
 				},
-				{
-					triggerTurn: true,
-					...(event.streamingBehavior ? { deliverAs: event.streamingBehavior } : {}),
-				},
+				{ triggerTurn: true },
 			);
 			return { action: "handled" };
 		}
@@ -165,8 +196,11 @@ export class SessionManager {
 		const exactTokens = event.message.usage?.output;
 		this.#state.confirmTokens += exactTokens ?? this.#state.liveTokens;
 		if (exactTokens !== undefined) {
+			// Only reset the sampling state here, not tokenRateText/tokenRateFadeStartsAt:
+			// those must keep holding/fading across message boundaries to avoid flicker.
 			this.#state.rateTracker.reset();
-			this.#state.lastActivityMeterUpdate = 0;
+			this.#state.lastTokenRateSampledAt = 0;
+			this.#state.lastTokenRateTotal = this.#state.confirmTokens;
 		}
 		this.#state.liveTokens = 0;
 		this.#counter.reset();
@@ -194,8 +228,8 @@ export class SessionManager {
 		ctx.ui.setWorkingMessage();
 		this.applyIndicator(ctx);
 		this.#state.activityMeter.reset();
-		this.#state.rateTracker.reset();
-		this.#state.lastActivityMeterUpdate = 0;
+		resetTokenRateState(this.#state);
+		this.#state.lastMessage = NOT_SENT;
 		if (this.#settings.features.doneMarker && hadPrompt) {
 			this.#pi.appendEntry<DoneEntryData>(DONE_ENTRY_TYPE, {
 				word: this.#settings.features.randomizeDoneMarker ? pickRawWord().past_tense : "Worked",
@@ -211,6 +245,39 @@ export class SessionManager {
 		this.stopTimer();
 	};
 
+	#renderDoneEntry(entry: CustomEntry<DoneEntryData>, theme: Theme): Component | undefined {
+		if (!entry.data) return undefined;
+		const word = typeof entry.data.word === "string" ? stripControlChars(entry.data.word) : "Worked";
+		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) {
+			details.push(`${entry.data.midTurnInputs} mid-turn input${entry.data.midTurnInputs === 1 ? "" : "s"}`);
+		}
+		const icon = features.doneMarkerIcon ? theme.fg("text", this.#settings.decorations.useNerdFont ? "" : "π") : "";
+		const markerContent = buildCompletionMarkerContent(theme, icon, word, formatElapsed(elapsedMs), details);
+		const borderStyle = this.#settings.decorations.doneMarkerBorderStyle;
+		const borderColor = this.#settings.decorations.doneMarkerBorderColor;
+		if (borderStyle === "none") return new Text(markerContent);
+
+		let cachedWidth: number | undefined;
+		let cachedLines: string[] | undefined;
+		return {
+			render(width: number): string[] {
+				if (cachedWidth !== width) {
+					cachedWidth = width;
+					cachedLines = ["", ` ${buildCompletionMarkerLine(markerContent, width - 2, theme, borderStyle, borderColor)}`, ""];
+				}
+				return cachedLines!;
+			},
+			invalidate(): void {
+				cachedWidth = undefined;
+				cachedLines = undefined;
+			},
+		} satisfies Component;
+	}
+
 	install(): void {
 		this.#pi.on("session_start", this.#onSessionStart);
 		this.#pi.on("input", this.#onInput);
@@ -221,22 +288,10 @@ export class SessionManager {
 		this.#pi.on("tool_execution_start", this.#onToolExecutionStart);
 		this.#pi.on("agent_settled", this.#onAgentSettled);
 		this.#pi.on("session_shutdown", this.#onSessionShutdown);
-		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => {
-			if (!entry.data) return undefined;
-			const features = this.#settings.features;
-			const details: string[] = [];
-			if (features.doneMarkerTokens && entry.data.tokens !== undefined) details.push(`↓ ${formatTokens(entry.data.tokens)} tokens`);
-			if (features.doneMarkerInputs && entry.data.midTurnInputs) {
-				details.push(`${entry.data.midTurnInputs} mid-turn input${entry.data.midTurnInputs === 1 ? "" : "s"}`);
-			}
-			const tail = details.length ? ` (${details.join(" · ")})` : "";
-			return new Text(
-				`${features.doneMarkerIcon ? theme.fg("text", this.#settings.decorations.useNerdFont ? "" : "π") : ""}${theme.fg("dim", `${features.doneMarkerIcon ? " " : ""}${entry.data.word} for ${formatElapsed(entry.data.elapsedMs)}${tail}`)}`,
-			);
-		});
+		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => this.#renderDoneEntry(entry, theme));
 		this.#pi.registerMessageRenderer<PromptBoxDetails>(PROMPT_BOX_TYPE, promptBoxRenderer);
 		this.#pi.registerCommand("topping-settings", {
-			description: "Configure pi-topping's spinner, shimmer, activity meter, and message details.",
+			description: "Configure prompt decoration, working-loader features/order, and completion-marker settings.",
 			handler: async (_a, ctx) => this.showSettings(ctx),
 		});
 	}
@@ -245,8 +300,19 @@ export class SessionManager {
 		return !!ctx.hasUI && ctx.mode !== "print";
 	}
 
+	/**
+	 * Mid-stream inputs (steer/follow-up) must pass through untouched: re-sending them via
+	 * sendMessage(deliverAs) bypasses Pi's queue state, so the "Steering:"/"Follow-up:" rows
+	 * below the editor never render (issue #2).
+	 */
 	private shouldDecorate(event: InputEvent): boolean {
-		return event.source !== "extension" && !!event.text.trim() && !event.images?.length && !/^[\/!?:]/.test(event.text);
+		return (
+			!event.streamingBehavior &&
+			event.source !== "extension" &&
+			!!event.text.trim() &&
+			!event.images?.length &&
+			!/^[\/!?:]/.test(event.text)
+		);
 	}
 
 	/**
@@ -257,7 +323,7 @@ export class SessionManager {
 		return this.#settings.decorations.animatedSpinner && this.#settings.loaderOrder[0] !== "spinner";
 	}
 
-	private spinnerColor(): "accent" | "border" | "borderAccent" {
+	private spinnerColor(): SettingColor {
 		const decorations = this.#settings.decorations;
 		return decorations.spinnerColorEnabled ? decorations.spinnerColor : "accent";
 	}
@@ -293,13 +359,10 @@ export class SessionManager {
 
 		const features = this.#settings.features;
 		const decorations = this.#settings.decorations;
-		let interval = decorations.shimmer
-			? SHIMMER_INTERVAL
-			: (decorations.tokenActivityMonitor || features.outputTokens)
-				? METER_INTERVAL_MS
-				: features.elapsedTime
-					? ELAPSED_INTERVAL_MS
-					: undefined;
+		let interval: number | undefined;
+		if (decorations.shimmer) interval = SHIMMER_INTERVAL_MS;
+		else if (decorations.tokenActivityMonitor || features.outputTokens || features.tokenRate) interval = METER_INTERVAL_MS;
+		else if (features.elapsedTime) interval = ELAPSED_INTERVAL_MS;
 		if (this.spinnerInMessage()) interval = Math.min(interval ?? SPINNER_FRAME_MS, SPINNER_FRAME_MS);
 		if (interval) this.#state.timer = setInterval(() => this.tick(), interval);
 	}
@@ -312,9 +375,9 @@ export class SessionManager {
 		state.confirmTokens = 0;
 		state.liveTokens = 0;
 		state.activityMeter.reset();
-		state.rateTracker.reset();
-		state.lastActivityMeterUpdate = 0;
+		resetTokenRateState(state);
 		state.midTurnInputs = 0;
+		state.lastMessage = NOT_SENT;
 		this.#counter.reset();
 	}
 
@@ -327,25 +390,32 @@ export class SessionManager {
 		const total = state.confirmTokens + state.liveTokens;
 		const features = this.#settings.features;
 		const decorations = this.#settings.decorations;
-		if (decorations.tokenActivityMonitor && now - state.lastActivityMeterUpdate >= METER_INTERVAL_MS) {
-			state.activityMeter.push(rateToLevel(state.rateTracker.sample(total, now)));
-			state.lastActivityMeterUpdate = now;
+		let hasNewTokenCount = false;
+		if ((decorations.tokenActivityMonitor || features.tokenRate) && now - state.lastTokenRateSampledAt >= METER_INTERVAL_MS) {
+			// Do not reset the fade for an EMA-only decay while output is quiet.
+			hasNewTokenCount = total > state.lastTokenRateTotal;
+			state.lastTokenRateTotal = total;
+			const tokenRate = state.rateTracker.sample(total, now);
+			if (decorations.tokenActivityMonitor) state.activityMeter.push(rateToLevel(tokenRate));
+			state.lastTokenRateSampledAt = now;
 		}
 		const spinner = this.spinnerInMessage()
 			? ctx.ui.theme.fg(this.spinnerColor(), SPINNER_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!)
 			: "";
 		if (isFullyDefaultAppearance(features, decorations)) {
-			ctx.ui.setWorkingMessage(
-				spinner
-					? buildWorkingMessage(ctx.ui.theme, { spinner, text: ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, this.#settings.loaderOrder)
-					: undefined,
-			);
+			const msg = spinner
+				? buildWorkingMessage(ctx.ui.theme, { spinner, text: ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, this.#settings.loaderOrder)
+				: undefined;
+			if (msg !== state.lastMessage) {
+				state.lastMessage = msg;
+				ctx.ui.setWorkingMessage(msg);
+			}
 			return;
 		}
 
 		const word = features.substituteDefaultMessage ? state.currentWord : DEFAULT_WORKING_WORD;
 		const styled = decorations.shimmer
-			? shimmerString(word, now - state.shimmerOrigin, ctx.ui.theme, decorations.shimmerDirection, decorations.shimmerSpeed)
+			? 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) =>
@@ -358,19 +428,46 @@ export class SessionManager {
 				),
 			)
 			: "";
-		ctx.ui.setWorkingMessage(
-			buildWorkingMessage(
-				ctx.ui.theme,
-				{
-					spinner,
-					text: styled,
-					meter,
-					elapsed: features.elapsedTime ? formatElapsed(now - state.startTime) : "",
-					tokens: features.outputTokens ? `↓ ${formatTokens(total)} tokens` : "",
-				},
-				this.#settings.loaderOrder,
-			),
+		let tokenRateText = "";
+		if (features.tokenRate) {
+			const latestTokenRate = formatTokenRate(state.rateTracker.tokenRate);
+			if (latestTokenRate && hasNewTokenCount) {
+				state.tokenRateText = latestTokenRate;
+				state.tokenRateFadeStartsAt = now + TOKEN_RATE_HOLD_MS;
+			} else if (now >= state.tokenRateFadeStartsAt + TOKEN_RATE_FADE_MS) {
+				state.tokenRateText = "";
+			}
+			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)
+					: fadeThemeColorString(
+						tokenRateText,
+						Math.floor((now - state.tokenRateFadeStartsAt) / (TOKEN_RATE_FADE_MS / TOKEN_RATE_FADE_SHADE_COUNT)),
+						ctx.ui.theme,
+						decorations.tokenRateColor,
+					);
+		const tokenRateStyled = tokenRateSegment && decorations.tokenRateDimmed ? dimAttribute(tokenRateSegment) : tokenRateSegment;
+		const msg = buildWorkingMessage(
+			ctx.ui.theme,
+			{
+				spinner,
+				text: styled,
+				meter,
+				elapsed: features.elapsedTime ? formatElapsed(now - state.startTime) : "",
+				tokens: features.outputTokens ? `↓ ${formatTokens(total)} tokens` : "",
+				tokenRate: tokenRateStyled,
+			},
+			this.#settings.loaderOrder,
 		);
+		if (msg !== state.lastMessage) {
+			state.lastMessage = msg;
+			ctx.ui.setWorkingMessage(msg);
+		}
 	}
 
 	private async showSettings(ctx: ExtensionCommandContext): Promise<void> {

package/src/settings.ts

@@ -1,13 +1,34 @@
 import { getAgentDir } from "@earendil-works/pi-coding-agent";
-import { mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { mkdirSync, readFileSync, renameSync, unlinkSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { DEFAULT_LOADER_ORDER, type LoaderElement } from "./format.ts";
 import type { MenuSection } from "./menu.ts";
 
+export const SETTING_COLOR_VALUES = ["accent", "border", "borderAccent", "success", "error", "warning"] as const;
+export type SettingColor = (typeof SETTING_COLOR_VALUES)[number];
+
+export const BORDER_STYLE_VALUES = ["double", "single", "rounded", "heavy"] as const;
+export type BorderStyle = (typeof BORDER_STYLE_VALUES)[number];
+export const DONE_MARKER_BORDER_STYLE_VALUES = [...BORDER_STYLE_VALUES, "none"] as const;
+export type DoneMarkerBorderStyle = (typeof DONE_MARKER_BORDER_STYLE_VALUES)[number];
+
+export function isBorderStyle(value: unknown): value is BorderStyle {
+	return typeof value === "string" && BORDER_STYLE_VALUES.some(style => style === value);
+}
+
+export function isDoneMarkerBorderStyle(value: unknown): value is DoneMarkerBorderStyle {
+	return typeof value === "string" && DONE_MARKER_BORDER_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 interface DecoratorSettings {
 	decorations: {
 		animatedSpinner: boolean;
 		shimmer: boolean;
+		shimmerInverted: boolean;
 		shimmerDirection: "ltr" | "rtl";
 		shimmerDirectionEnabled: boolean;
 		shimmerSpeed: "slow" | "normal" | "fast";
@@ -16,23 +37,30 @@ export interface DecoratorSettings {
 		meterDirection: "ltr" | "rtl";
 		meterDirectionEnabled: boolean;
 		decorateUserPrompt: boolean;
-		borderColor: "accent" | "border" | "borderAccent";
+		borderColor: SettingColor;
 		borderColorEnabled: boolean;
-		borderStyle: "double" | "single" | "rounded" | "heavy";
+		borderStyle: BorderStyle;
 		borderStyleEnabled: boolean;
-		spinnerColor: "accent" | "border" | "borderAccent";
+		doneMarkerBorderStyle: DoneMarkerBorderStyle;
+		doneMarkerBorderColor: SettingColor;
+		spinnerColor: SettingColor;
 		spinnerColorEnabled: boolean;
-		meterColor: "accent" | "border" | "borderAccent";
+		meterColor: SettingColor;
 		meterColorEnabled: boolean;
 		meterDimmed: boolean;
+		tokenRateColor: SettingColor;
+		tokenRateDimmed: boolean;
 		promptIcon: boolean;
 		promptTimestamp: boolean;
+		promptProvider: boolean;
+		promptModel: boolean;
 		useNerdFont: boolean;
 	};
 	features: {
 		substituteDefaultMessage: boolean;
 		elapsedTime: boolean;
 		outputTokens: boolean;
+		tokenRate: boolean;
 		doneMarker: boolean;
 		doneMarkerIcon: boolean;
 		randomizeDoneMarker: boolean;
@@ -43,8 +71,8 @@ export interface DecoratorSettings {
 }
 
 export const DEFAULT_SETTINGS: DecoratorSettings = {
-	decorations: { animatedSpinner: true, shimmer: true, shimmerDirection: "ltr", shimmerDirectionEnabled: true, shimmerSpeed: "normal", shimmerSpeedEnabled: true, tokenActivityMonitor: true, meterDirection: "ltr", meterDirectionEnabled: true, decorateUserPrompt: true, borderColor: "accent", borderColorEnabled: true, borderStyle: "double", borderStyleEnabled: true, spinnerColor: "accent", spinnerColorEnabled: true, meterColor: "accent", meterColorEnabled: true, meterDimmed: false, promptIcon: true, promptTimestamp: true, useNerdFont: true },
-	features: { substituteDefaultMessage: true, elapsedTime: true, outputTokens: true, doneMarker: true, doneMarkerIcon: true, randomizeDoneMarker: true, doneMarkerTokens: true, doneMarkerInputs: 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: "borderAccent", borderColorEnabled: true, borderStyle: "double", borderStyleEnabled: true, doneMarkerBorderStyle: "none", doneMarkerBorderColor: "borderAccent", spinnerColor: "accent", spinnerColorEnabled: true, meterColor: "accent", meterColorEnabled: true, meterDimmed: false, tokenRateColor: "warning", tokenRateDimmed: false, promptIcon: true, promptTimestamp: true, promptProvider: true, promptModel: true, useNerdFont: true },
+	features: { substituteDefaultMessage: true, elapsedTime: true, outputTokens: true, tokenRate: true, doneMarker: true, doneMarkerIcon: true, randomizeDoneMarker: true, doneMarkerTokens: true, doneMarkerInputs: true },
 	loaderOrder: [...DEFAULT_LOADER_ORDER],
 };
 
@@ -56,6 +84,7 @@ const LOADER_ELEMENT_LABELS: Record<LoaderElement, string> = {
 	meter: "Token activity monitor",
 	elapsed: "Elapsed time",
 	tokens: "Output tokens",
+	tokenRate: "Token rate",
 };
 
 /**
@@ -80,12 +109,15 @@ function mergeGroup<T extends Record<string, boolean | string>>(defaults: T, par
 	const merged = { ...defaults };
 	if (!isPlainObject(parsed)) return merged;
 	for (const [key, value] of Object.entries(parsed)) {
-		if (!(key in merged)) continue;
-		if (typeof merged[key] === "boolean" && typeof value === "boolean") (merged as Record<string, boolean | string>)[key] = value;
-		if ((key === "meterDirection" || key === "shimmerDirection") && (value === "ltr" || value === "rtl")) (merged as Record<string, boolean | string>)[key] = value;
-		if (key === "shimmerSpeed" && (value === "slow" || value === "normal" || value === "fast")) (merged as Record<string, boolean | string>)[key] = value;
-		if (key.endsWith("Color") && (value === "accent" || value === "border" || value === "borderAccent")) (merged as Record<string, boolean | string>)[key] = value;
-		if (key === "borderStyle" && (value === "double" || value === "single" || value === "rounded" || value === "heavy")) (merged as Record<string, boolean | string>)[key] = value;
+		if (!Object.hasOwn(merged, key)) continue;
+		let valid: boolean | string | undefined;
+		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 === "borderStyle" && isBorderStyle(value)) valid = value;
+		else if (key === "doneMarkerBorderStyle" && isDoneMarkerBorderStyle(value)) valid = value;
+		if (valid !== undefined) (merged as Record<string, boolean | string>)[key] = valid;
 	}
 	return merged;
 }
@@ -110,6 +142,18 @@ function fromCycleValue(value: string): string {
 	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";
+}
+
+/** 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";
+}
+
 type MenuSectionName = "User Prompt" | "“Working” Loader" | "Completion Marker" | "Options";
 type DecorationSettings = DecoratorSettings["decorations"];
 type FeatureSettings = DecoratorSettings["features"];
@@ -120,23 +164,32 @@ type FeatureMenuEntry = MenuEntryBase & { group: "features"; key: keyof FeatureS
 type MenuEntry = DecorationMenuEntry | FeatureMenuEntry;
 export const MENU_ENTRIES: readonly MenuEntry[] = [
 	{ id: "decorateUserPrompt", label: "High-vis prompt", section: "User Prompt", group: "decorations", key: "decorateUserPrompt" },
-	{ id: "borderColor", label: "Border color", section: "User Prompt", group: "decorations", key: "borderColor", cycleValues: ["accent", "border", "borderAccent"], cycleEnabledBy: "borderColorEnabled", cycleDisabledValue: "border" },
-	{ id: "borderStyle", label: "Border style", section: "User Prompt", group: "decorations", key: "borderStyle", cycleValues: ["double", "single", "rounded", "heavy"], cycleEnabledBy: "borderStyleEnabled", cycleDisabledValue: "double" },
+	{ 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: "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: ["accent", "border", "borderAccent"], cycleEnabledBy: "spinnerColorEnabled", cycleDisabledValue: "accent" },
+	{ id: "spinnerColor", label: "Animated spinner color", section: "“Working” Loader", group: "decorations", key: "spinnerColor", cycleValues: SETTING_COLOR_VALUES, cycleEnabledBy: "spinnerColorEnabled", cycleDisabledValue: "accent" },
 	{ 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: "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: ["accent", "border", "borderAccent"], 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: "Left to Right" },
+	{ 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: "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: "tokenRateDimmed", label: "Token rate dimmed", section: "“Working” Loader", group: "decorations", key: "tokenRateDimmed" },
 	{ id: "doneMarker", label: "Show completion marker", section: "Completion Marker", group: "features", key: "doneMarker" },
+	{ 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: "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" },
@@ -162,10 +215,15 @@ function setDecorationCycleValue(decorations: DecorationSettings, key: keyof Dec
 		case "borderColor":
 		case "spinnerColor":
 		case "meterColor":
-			if (stored === "accent" || stored === "border" || stored === "borderAccent") decorations[key] = stored;
+		case "tokenRateColor":
+		case "doneMarkerBorderColor":
+			if (isSettingColor(stored)) decorations[key] = stored;
 			return;
 		case "borderStyle":
-			if (stored === "double" || stored === "single" || stored === "rounded" || stored === "heavy") decorations[key] = stored;
+			if (isBorderStyle(stored)) decorations[key] = stored;
+			return;
+		case "doneMarkerBorderStyle":
+			if (isDoneMarkerBorderStyle(stored)) decorations[key] = stored;
 			return;
 		case "shimmerDirection":
 		case "meterDirection":
@@ -180,17 +238,17 @@ function setDecorationCycleValue(decorations: DecorationSettings, key: keyof Dec
 	}
 }
 
-function toggleSection(title: MenuSectionName, settings: DecoratorSettings): MenuSection {
+function buildSection(title: MenuSectionName, settings: DecoratorSettings): MenuSection {
 	return { title, items: MENU_ENTRIES.filter(entry => entry.section === title).map(entry => menuItem(entry, settings)) };
 }
 
 export function buildMenuSections(settings: DecoratorSettings): MenuSection[] {
 	return [
-		toggleSection("User Prompt", settings),
-		toggleSection("“Working” Loader", settings),
+		buildSection("User Prompt", settings),
+		buildSection("“Working” Loader", settings),
 		{ title: "Elements Order", items: parseLoaderOrder(settings.loaderOrder).map(id => ({ id, label: LOADER_ELEMENT_LABELS[id], value: false, reorderGroup: LOADER_ORDER_ID })) },
-		toggleSection("Completion Marker", settings),
-		toggleSection("Options", settings),
+		buildSection("Completion Marker", settings),
+		buildSection("Options", settings),
 	];
 }
 
@@ -212,27 +270,35 @@ export function applyMenuResult(settings: DecoratorSettings, values: Record<stri
 	return next;
 }
 
+/**
+ * Read settings.json, merging valid leaves over the defaults and falling back
+ * 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.
+ */
 export function loadSettings(): DecoratorSettings {
 	try {
 		const parsed = JSON.parse(readFileSync(settingsPath(), "utf8"));
 		if (!isPlainObject(parsed)) return structuredClone(DEFAULT_SETTINGS);
 		const settings = { decorations: mergeGroup(DEFAULT_SETTINGS.decorations, parsed.decorations), features: mergeGroup(DEFAULT_SETTINGS.features, parsed.features), loaderOrder: parseLoaderOrder(parsed.loaderOrder) };
-		const gated: readonly (readonly ["borderColor" | "borderStyle" | "spinnerColor" | "meterColor" | "shimmerDirection" | "meterDirection" | "shimmerSpeed", "borderColorEnabled" | "borderStyleEnabled" | "spinnerColorEnabled" | "meterColorEnabled" | "shimmerDirectionEnabled" | "meterDirectionEnabled" | "shimmerSpeedEnabled", string])[] = [
-			["borderColor", "borderColorEnabled", "border"],
-			["borderStyle", "borderStyleEnabled", "double"],
-			["spinnerColor", "spinnerColorEnabled", "accent"],
-			["meterColor", "meterColorEnabled", "accent"],
-			["shimmerDirection", "shimmerDirectionEnabled", "ltr"],
-			["meterDirection", "meterDirectionEnabled", "ltr"],
-			["shimmerSpeed", "shimmerSpeedEnabled", "normal"],
-		];
-		for (const [key, enabledKey, resetValue] of gated) {
-			if (!settings.decorations[enabledKey]) (settings.decorations as unknown as Record<string, string>)[key] = resetValue;
+		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);
+			}
 		}
 		return settings;
 	} catch { return structuredClone(DEFAULT_SETTINGS); }
 }
+
 export function saveSettings(settings: DecoratorSettings): void {
-	const path = settingsPath(); mkdirSync(dirname(path), { recursive: true });
-	writeFileSync(`${path}.tmp`, `${JSON.stringify(settings, null, 2)}\n`); renameSync(`${path}.tmp`, path);
+	const path = settingsPath();
+	mkdirSync(dirname(path), { recursive: true });
+	const tmpPath = `${path}.${process.pid}.${Date.now()}.tmp`;
+	try {
+		writeFileSync(tmpPath, `${JSON.stringify(settings, null, 2)}\n`, { flag: "wx" });
+		renameSync(tmpPath, path);
+	} catch (err) {
+		try { unlinkSync(tmpPath); } catch { /* tmp file was never created */ }
+		throw err;
+	}
 }