@underactive/pi-topping 0.11.1 → 0.13.0

package/src/session.ts

@@ -14,16 +14,27 @@ import type {
 	SessionStartEvent,
 	Theme,
 } from "@earendil-works/pi-coding-agent";
+import { VERSION } from "@earendil-works/pi-coding-agent";
+import { CHANNELS, PI_VIRTUAL_MODEL_API, WORKING_STATUS_SLIDE_MS, subscribe } from "@underactive/pi-topping-primitives/contracts";
 import { Text, type Component } from "@earendil-works/pi-tui";
-import { ActivityMeter, rateToLevel, TokRateTracker } from "./activity-meter.ts";
-import { ROUTED_MODEL_CHANNEL, routedModelAnnouncement } from "./routesense-feed.ts";
+import {
+	ActivityMeter,
+	FADE_SHADE_COUNT,
+	formatElapsedUnits,
+	RateHoldFade,
+	rateToLevel,
+	slideOutTail,
+	StreamingWordCounter,
+} from "@underactive/pi-topping-primitives/activity";
 import {
 	dimAttribute,
-	getThinkingLevelColorizer,
+	fadeThemeColorString,
+	renderMeter,
+	thinkingLevelColorizer,
+} from "@underactive/pi-topping-primitives/activity-tui";
+import {
 	isThinkingLevel,
 	ELAPSED_INTERVAL_MS,
-	fadeThemeColorString,
-	formatElapsed,
 	formatTokenRate,
 	formatTokens,
 	isFullyDefaultAppearance,
@@ -31,26 +42,30 @@ import {
 	RESPONSE_MODEL_FADE_MS,
 	RESPONSE_MODEL_HOLD_MS,
 	RESPONSE_MODEL_SLIDE_FRAME_MS,
-	RESPONSE_MODEL_SLIDE_MS,
 	SHIMMER_INTERVAL_MS,
-	slideOutTail,
 	SPINNER_FRAME_MS,
 	SPINNER_FRAMES,
-	TOKEN_RATE_FADE_SHADE_COUNT,
-	StreamingWordCounter,
 	type ThinkingLevel,
 } from "./format.ts";
 import { buildLoaderMessage } from "./loader-message.ts";
-import { showMenu } from "./menu.ts";
-import { applyOutputStyle, foldedOutputStyleSection, OUTPUT_STYLE_MESSAGE_TYPE, OUTPUT_STYLE_SECTION, OUTPUT_STYLES, outputStyleSectionPatch } from "./output-style.ts";
+import { showMenu } from "@underactive/pi-topping-primitives/menu";
+import { applyOutputStyle, OUTPUT_STYLES } from "./output-style.ts";
 import { getResponseModelColorizer } from "./nvidia-green.ts";
 import { registerSetupCommand } from "./setup-command.ts";
 import { applyMenuResult, buildMenuSections, loadSettings, saveSettings, type ThinkingLevelColor } from "./settings.ts";
-import { announcesEmbedded, STATUSLINE_EMBED_CHANNEL } from "./statusline-embed.ts";
 import { announceMissingToppingsOnce, type MissingToppingsEntryData, renderMissingToppingsEntry, SETUP_ENTRY_TYPE } from "./toppings.ts";
 import { PreviewRenderer } from "./preview.ts";
-import { buildCompletionMarkerContent, buildCompletionMarkerLine, PROMPT_BOX_TYPE, promptBoxRenderer, type PromptBoxDetails } from "./prompt-decorator.ts";
-import { isPlainObject, modelsResemble, sanitizedText, stripControlChars } from "./util.ts";
+import {
+	buildCompletionMarkerContent,
+	buildCompletionMarkerLine,
+	PROMPT_BOX_ENTRY_TYPE,
+	PROMPT_BOX_TYPE,
+	promptBoxEntryRenderer,
+	promptBoxRenderer,
+	type PromptBoxDetails,
+	type PromptBoxEntryData,
+} from "./prompt-decorator.ts";
+import { hostBelow, isPlainObject, modelsResemble, modelsSpelledAlike, sanitizedText, stripControlChars } from "./util.ts";
 import { formatServiceTierSummary, recordServiceTierCall, serviceTierCountsOf, serviceTierOf, type ServiceTierCount } from "./service-tier.ts";
 import { servedModelOf } from "./served-model.ts";
 import { loadBundledWordPacks, loadUserWordPacks, pickWorkingTextSelection, type WorkingTextSelection, type WordPack } from "./word-packs.ts";
@@ -61,14 +76,16 @@ type MessageEndEvent = Extract<ExtensionEvent, { type: "message_end" }>;
 type ToolExecutionStartEvent = Extract<ExtensionEvent, { type: "tool_execution_start" }>;
 type UIPromptStartEvent = Extract<ExtensionEvent, { type: "ui_prompt_start" }>;
 type UIPromptEndEvent = Extract<ExtensionEvent, { type: "ui_prompt_end" }>;
-type ContextWithSystemEvent = Extract<ExtensionEvent, { type: "context_with_system" }>;
 type ProviderStreamEvent = Extract<ExtensionEvent, { type: "provider_stream_event" }>;
 type UIPromptKind = UIPromptStartEvent["kind"];
 
+/**
+ * Oldest Pi this extension supports. Pi 1.2.0 runs before_agent_start for the run that a custom
+ * message starts, which is how the output style reaches a decorated prompt.
+ */
+export const MIN_HOST_VERSION = "1.2.0";
 const DONE_ENTRY_TYPE = "pi-topping-done";
 const RESPONSE_MODEL_STATUS_KEY = "pi-topping-response-model";
-/** Pi's `VIRTUAL_MODEL_API` for extension-registered virtual models; Pi does not export it from its public index. */
-const VIRTUAL_MODEL_API = "pi-virtual";
 const WAITING_LABELS: Record<UIPromptKind, string> = {
 	select: "Waiting for selection",
 	confirm: "Waiting for confirmation",
@@ -115,9 +132,7 @@ interface SessionState {
 	liveTokens: number;
 	shimmerOrigin: number;
 	activityMeter: ActivityMeter;
-	rateTracker: TokRateTracker;
-	lastTokenRateSampledAt: number;
-	lastTokenRateTotal: number;
+	tokenRate: RateHoldFade;
 	responseModel: string;
 	served: { model: string; backend: string; routedId: string } | null;
 	/** The backend companion to the last raw response-model report. */
@@ -133,8 +148,6 @@ interface SessionState {
 	/** When the response model appeared in the loader and began sliding out; 0 if it never slid. */
 	responseModelShownAt: number;
 	responseModelSlideTimer: ReturnType<typeof setInterval> | null;
-	tokenRateText: string;
-	tokenRateFadeStartsAt: number;
 	timer: ReturnType<typeof setInterval> | null;
 	busy: boolean;
 	waiting: { kind: UIPromptKind; title?: string } | null;
@@ -146,15 +159,6 @@ interface 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,
@@ -163,9 +167,12 @@ function makeFreshState(): SessionState {
 		liveTokens: 0,
 		shimmerOrigin: 0,
 		activityMeter: new ActivityMeter(),
-		rateTracker: new TokRateTracker(),
-		lastTokenRateSampledAt: 0,
-		lastTokenRateTotal: 0,
+		tokenRate: new RateHoldFade({
+			holdMs: TOKEN_RATE_HOLD_MS,
+			fadeMs: TOKEN_RATE_FADE_MS,
+			shadeCount: FADE_SHADE_COUNT,
+			sampleIntervalMs: METER_INTERVAL_MS,
+		}),
 		responseModel: "",
 		served: null,
 		lastResponseModelBackend: NOT_SENT,
@@ -177,8 +184,6 @@ function makeFreshState(): SessionState {
 		responseModelFadeGeneration: 0,
 		responseModelShownAt: 0,
 		responseModelSlideTimer: null,
-		tokenRateText: "",
-		tokenRateFadeStartsAt: 0,
 		timer: null,
 		busy: false,
 		waiting: null,
@@ -203,10 +208,14 @@ export class SessionManager {
 	#currentCtx: ExtensionContext | null = null;
 	/** Whether pi-topping-statusline last announced that its status bar hosts the loader; kept across sessions. */
 	#loaderInStatusline = false;
+	/** Whether this instance showed the old-host warning. */
+	#warnedOldHost = false;
 	readonly #pi: ExtensionAPI;
+	readonly #hostVersion: string;
 
-	constructor(pi: ExtensionAPI) {
+	constructor(pi: ExtensionAPI, hostVersion: string = VERSION) {
 		this.#pi = pi;
+		this.#hostVersion = hostVersion;
 	}
 
 	#onSessionStart = async (_e: SessionStartEvent, ctx: ExtensionContext): Promise<void> => {
@@ -223,37 +232,20 @@ export class SessionManager {
 		if (this.usable(ctx)) {
 			this.applyIndicator(ctx);
 			announceMissingToppingsOnce(this.#pi);
+			this.warnOldHostOnce(ctx);
 		}
 	};
 
-	/** Unlike the UI handlers, this runs in every mode: the output style shapes the model's prompt. */
-	#onBeforeAgentStart = (event: BeforeAgentStartEvent): BeforeAgentStartEventResult | undefined =>
-		applyOutputStyle(event.systemPromptOptions?.sections, this.#settings.outputStyle);
-
 	/**
-	 * A decorated prompt is a custom message, so Pi does not run before_agent_start for it.
-	 * Put the missing prompt section on the request. A matching transcript section is left alone.
+	 * Unlike the UI handlers, this runs in every mode: the output style shapes the model's prompt.
+	 * The prompt section applies to every run. The hidden reminder belongs to a user prompt: one Pi
+	 * submitted (`messageType: "user"`), or one that pi-topping re-sent as its prompt box, which
+	 * starts the run as a custom message. A run that another extension's custom message starts gets
+	 * the section only.
 	 */
-	#onContextWithSystem = (event: ContextWithSystemEvent): { messages: ContextWithSystemEvent["messages"] } | undefined => {
-		const patch = outputStyleSectionPatch(foldedOutputStyleSection(event.messages), this.#settings.outputStyle);
-		if (patch === undefined) return undefined;
-		const messages = event.messages.slice();
-		let index = messages.length;
-		for (let i = messages.length - 1; i >= 0; i--) {
-			const message = messages[i];
-			if (!message) continue;
-			if (message.role === "user" || (message.role === "custom" && message.customType === PROMPT_BOX_TYPE)) {
-				index = i;
-				break;
-			}
-		}
-		messages.splice(index, 0, {
-			role: "system",
-			content: "",
-			sections: { [OUTPUT_STYLE_SECTION]: patch },
-			timestamp: Date.now(),
-		});
-		return { messages };
+	#onBeforeAgentStart = (event: BeforeAgentStartEvent): BeforeAgentStartEventResult | undefined => {
+		const result = applyOutputStyle(event.systemPromptOptions?.sections, this.#settings.outputStyle);
+		return event.messageType !== "custom" || event.message.customType === PROMPT_BOX_TYPE ? result : undefined;
 	};
 
 	#onInput = async (event: InputEvent, ctx: ExtensionContext): Promise<InputEventResult | void> => {
@@ -262,40 +254,24 @@ export class SessionManager {
 
 		if (!event.streamingBehavior && !this.#state.busy) this.resetTurn(Date.now());
 		else if (event.streamingBehavior && event.source !== "extension") this.#state.midTurnInputs++;
+		if (this.#settings.decorations.decorateUserPrompt && this.shouldDecorateSkill(event)) {
+			this.#pi.appendEntry<PromptBoxEntryData>(PROMPT_BOX_ENTRY_TYPE, {
+				content: event.text,
+				details: this.promptBoxDetails(ctx),
+			});
+		}
 		if (this.#settings.decorations.decorateUserPrompt && this.shouldDecorate(event)) {
 			try {
-				const stylePrompt = OUTPUT_STYLES[this.#settings.outputStyle].prompt;
-				await this.#pi.sendMessage<PromptBoxDetails>(
+				// The prompt box starts the run; before_agent_start adds the output style's section and reminder to it.
+				this.#pi.sendMessage<PromptBoxDetails>(
 					{
 						customType: PROMPT_BOX_TYPE,
 						content: event.text,
 						display: true,
-						details: {
-							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,
-							thinkingLevel: ctx.thinkingLevel,
-						},
+						details: this.promptBoxDetails(ctx),
 					},
-					{ triggerTurn: stylePrompt === undefined },
+					{ triggerTurn: true },
 				);
-				if (stylePrompt) {
-					await this.#pi.sendMessage(
-						{
-							customType: OUTPUT_STYLE_MESSAGE_TYPE,
-							content: stylePrompt.reminder,
-							display: false,
-						},
-						{ triggerTurn: true },
-					);
-				}
 				return { action: "handled" };
 			} catch {
 				ctx.ui.notify("Failed to submit prompt", "error");
@@ -349,11 +325,9 @@ export class SessionManager {
 			typeof rawTokens === "number" && Number.isFinite(rawTokens) && rawTokens >= 0 ? rawTokens : undefined;
 		this.#state.confirmTokens += exactTokens ?? this.#state.liveTokens;
 		if (exactTokens !== undefined) {
-			// Only reset the sampling state here, not tokenRateText/tokenRateFadeStartsAt:
+			// Only restart the sampling here, not the held rate or its fade:
 			// those must keep holding/fading across message boundaries to avoid flicker.
-			this.#state.rateTracker.reset();
-			this.#state.lastTokenRateSampledAt = 0;
-			this.#state.lastTokenRateTotal = this.#state.confirmTokens;
+			this.#state.tokenRate.resetSampling(this.#state.confirmTokens);
 		}
 		this.#state.liveTokens = 0;
 		this.#counter.reset();
@@ -422,7 +396,7 @@ export class SessionManager {
 		ctx.ui.setWorkingMessage();
 		if (responseModel) this.startResponseModelFade(ctx, responseModel, responseModelColor, responseModelDimmed);
 		this.#state.activityMeter.reset();
-		resetTokenRateState(this.#state);
+		this.#state.tokenRate.reset();
 		this.#state.lastMessage = NOT_SENT;
 		if (this.#settings.features.doneMarker && hadPrompt) {
 			const aborted = e.aborted === true;
@@ -466,10 +440,10 @@ export class SessionManager {
 		const thinkingLevel = isThinkingLevel(entry.data.thinkingLevel) ? entry.data.thinkingLevel : undefined;
 		const rawModel = sanitizedText(entry.data.model);
 		const modelColored = features.doneMarkerModel && rawModel
-			? getThinkingLevelColorizer(theme, this.#settings.decorations.doneMarkerModelColor, thinkingLevel)(rawModel)
+			? thinkingLevelColorizer(theme, this.#settings.decorations.doneMarkerModelColor, thinkingLevel)(rawModel)
 			: "";
 		const model = modelColored && this.#settings.decorations.doneMarkerModelDimmed ? dimAttribute(modelColored) : modelColored;
-		const markerContent = buildCompletionMarkerContent(theme, icon, word, formatElapsed(elapsedMs), details, model, aborted ? "warning" : "dim");
+		const markerContent = buildCompletionMarkerContent(theme, icon, word, formatElapsedUnits(elapsedMs), details, model, aborted ? "warning" : "dim");
 		const borderStyle = this.#settings.decorations.doneMarkerBorderStyle;
 		const borderColor = aborted ? "warning" : this.#settings.decorations.doneMarkerBorderColor;
 		const markerStyle = this.#settings.decorations.doneMarkerStyle;
@@ -495,7 +469,6 @@ export class SessionManager {
 	install(): void {
 		this.#pi.on("session_start", this.#onSessionStart);
 		this.#pi.on("before_agent_start", this.#onBeforeAgentStart);
-		this.#pi.on("context_with_system", this.#onContextWithSystem);
 		this.#pi.on("input", this.#onInput);
 		this.#pi.on("agent_start", this.#onAgentStart);
 		this.#pi.on("message_start", this.#onMessageStart);
@@ -507,18 +480,18 @@ export class SessionManager {
 		this.#pi.on("ui_prompt_start", this.#onUIPromptStart);
 		this.#pi.on("ui_prompt_end", this.#onUIPromptEnd);
 		this.#pi.on("session_shutdown", this.#onSessionShutdown);
-		this.#pi.events.on(STATUSLINE_EMBED_CHANNEL, (data) => {
-			this.#loaderInStatusline = announcesEmbedded(data);
+		subscribe(this.#pi.events, CHANNELS.workingStatusEmbedded, ({ embedded }) => {
+			this.#loaderInStatusline = embedded;
 		});
-		this.#pi.events.on(ROUTED_MODEL_CHANNEL, (data) => {
+		subscribe(this.#pi.events, CHANNELS.routedModel, (announcement) => {
 			// Direct routes serve compaction and other extensions' side requests; a route while idle
 			// is such a background request too, and must not leave a stale model for the next turn.
-			const announcement = routedModelAnnouncement(data);
-			if (!announcement || announcement.reason === "direct" || !this.#state.busy) return;
+			if (announcement.reason === "direct" || !this.#state.busy) return;
 			this.updateResponseModel({ raw: announcement.modelId, weak: true, provider: announcement.provider, routedId: announcement.modelId });
 		});
 		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => this.#renderDoneEntry(entry, theme));
 		this.#pi.registerEntryRenderer<MissingToppingsEntryData>(SETUP_ENTRY_TYPE, (entry, _o, theme) => renderMissingToppingsEntry(entry, theme));
+		this.#pi.registerEntryRenderer<PromptBoxEntryData>(PROMPT_BOX_ENTRY_TYPE, promptBoxEntryRenderer);
 		this.#pi.registerMessageRenderer<PromptBoxDetails>(PROMPT_BOX_TYPE, promptBoxRenderer);
 		this.#pi.registerCommand("topping-settings", {
 			description: "Configure the prompt box, working loader, completion marker, word packs, and output style.",
@@ -531,11 +504,49 @@ export class SessionManager {
 		return !!ctx.hasUI && ctx.mode !== "print";
 	}
 
+	private warnOldHostOnce(ctx: ExtensionContext): void {
+		if (this.#warnedOldHost || !hostBelow(this.#hostVersion, MIN_HOST_VERSION)) return;
+		this.#warnedOldHost = true;
+		ctx.ui.notify(
+			`Pi Topping needs Pi ${MIN_HOST_VERSION} or later; this is Pi ${this.#hostVersion}. Output styles will not apply to decorated prompts.`,
+			"warning",
+		);
+	}
+
 	/**
 	 * 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 promptBoxDetails(ctx: ExtensionContext): PromptBoxDetails {
+		return {
+			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,
+			thinkingLevel: ctx.thinkingLevel,
+		};
+	}
+
+	private shouldDecorateSkill(event: InputEvent): boolean {
+		if (
+			event.streamingBehavior ||
+			event.source === "extension" ||
+			!event.text.trim() ||
+			event.images?.length ||
+			!event.text.startsWith("/")
+		) return false;
+
+		const commandName = event.text.slice(1).split(" ", 1)[0]!;
+		return this.#pi.getCommands().some((command) => command.source === "skill" && command.name === commandName);
+	}
+
 	private shouldDecorate(event: InputEvent): boolean {
 		return (
 			!event.streamingBehavior &&
@@ -574,7 +585,7 @@ export class SessionManager {
 
 		const color = this.#settings.decorations.spinnerColor;
 		ctx.ui.setWorkingIndicator({
-			frames: SPINNER_FRAMES.map((frame) => getThinkingLevelColorizer(ctx.ui.theme, color, ctx.thinkingLevel)(frame)),
+			frames: SPINNER_FRAMES.map((frame) => thinkingLevelColorizer(ctx.ui.theme, color, ctx.thinkingLevel)(frame)),
 		});
 	}
 
@@ -595,12 +606,13 @@ export class SessionManager {
 		if (message.responseModel !== undefined) {
 			return { raw: message.responseModel, weak: false, routedId: sanitizedText(message.model) || undefined };
 		}
-		if (this.#currentCtx?.model?.api !== VIRTUAL_MODEL_API) return undefined;
+		if (this.#currentCtx?.model?.api !== PI_VIRTUAL_MODEL_API) return undefined;
 		return { raw: message.model, weak: true, provider: typeof message.provider === "string" ? message.provider : undefined };
 	}
 
 	/**
-	 * Whether a response model merely restates the selected model. Under a virtual selection
+	 * Whether a response model merely restates the selected model: a decorated form of its id,
+	 * or its id or display name written with other case and separators. Under a virtual selection
 	 * the routed model is always another model, so only a failed route, which leaves the
 	 * virtual model itself on the message, is hidden; a resemblance check would also hide a
 	 * routed model whose id contains the virtual id, such as openrouter's `auto`.
@@ -608,8 +620,8 @@ export class SessionManager {
 	private restatesSelection(report: ResponseModelReport, responseModel: string): boolean {
 		const selected = this.#currentCtx?.model;
 		if (!selected) return false;
-		if (selected.api === VIRTUAL_MODEL_API) return report.provider === selected.provider && responseModel === selected.id;
-		return modelsResemble(selected.id, responseModel);
+		if (selected.api === PI_VIRTUAL_MODEL_API) return report.provider === selected.provider && responseModel === selected.id;
+		return modelsResemble(selected.id, responseModel) || modelsSpelledAlike(selected, responseModel);
 	}
 
 	private updateResponseModel(report: ResponseModelReport | undefined): void {
@@ -660,7 +672,7 @@ export class SessionManager {
 		state.responseModelShownAt = Date.now();
 		state.responseModelSlideTimer = setInterval(() => {
 			this.tick();
-			if (Date.now() - state.responseModelShownAt >= RESPONSE_MODEL_SLIDE_MS) this.stopResponseModelSlide();
+			if (Date.now() - state.responseModelShownAt >= WORKING_STATUS_SLIDE_MS) this.stopResponseModelSlide();
 		}, RESPONSE_MODEL_SLIDE_FRAME_MS);
 	}
 
@@ -713,12 +725,12 @@ export class SessionManager {
 			render(shade++);
 			this.#state.responseModelFadeTimer = setInterval(() => {
 				if (this.#state.responseModelFadeGeneration !== generation) return;
-				if (shade >= TOKEN_RATE_FADE_SHADE_COUNT) {
+				if (shade >= FADE_SHADE_COUNT) {
 					this.cancelResponseModelFade(ctx);
 					return;
 				}
 				render(shade++);
-			}, RESPONSE_MODEL_FADE_MS / TOKEN_RATE_FADE_SHADE_COUNT);
+			}, RESPONSE_MODEL_FADE_MS / FADE_SHADE_COUNT);
 		}, RESPONSE_MODEL_HOLD_MS);
 	}
 
@@ -755,7 +767,7 @@ export class SessionManager {
 		state.lastResponseModelRaw = NOT_SENT;
 		state.lastResponseModelBackend = NOT_SENT;
 		state.activityMeter.reset();
-		resetTokenRateState(state);
+		state.tokenRate.reset();
 		state.midTurnInputs = 0;
 		state.lastMessage = NOT_SENT;
 		this.#counter.reset();
@@ -778,27 +790,15 @@ export class SessionManager {
 		const total = state.confirmTokens + state.liveTokens;
 		const features = this.#settings.features;
 		const decorations = this.#settings.decorations;
-		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, decorations.meterUpperBoundTps));
-			state.lastTokenRateSampledAt = now;
+		// RateHoldFade samples at most once per METER_INTERVAL_MS and holds a rate only when the
+		// total grew, so an EMA-only decay while output is quiet does not reset the fade.
+		if ((decorations.tokenActivityMonitor || features.tokenRate) && state.tokenRate.sample(total, now) && decorations.tokenActivityMonitor) {
+			state.activityMeter.push(rateToLevel(state.tokenRate.tracker.tokenRate, decorations.meterUpperBoundTps));
 		}
 		const responseModelShown = features.responseModel && state.responseModel
 			? slideOutTail(state.responseModel, now - state.responseModelShownAt)
 			: "";
-		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 = "";
-			}
-		}
+		const tokenRate = state.tokenRate.display(now);
 		const showSpinner = this.spinnerInMessage();
 		const msg = isFullyDefaultAppearance(features, decorations) && !showSpinner && !responseModelShown
 			? undefined
@@ -813,15 +813,11 @@ export class SessionManager {
 					spinnerAtMs: showSpinner ? now : undefined,
 					word: state.workingText.text,
 					shimmerAtMs: now - state.shimmerOrigin,
-					renderMeter: (colorizer, dimmed) => state.activityMeter.render((level, char) =>
-						ActivityMeter.colorizeCell(level, char, ctx.ui.theme, colorizer, dimmed),
-					),
+					renderMeter: (colorizer, dimmed) => renderMeter(state.activityMeter, ctx.ui.theme, colorizer, dimmed),
 					elapsedMs: now - state.startTime,
 					outputTokens: total,
-					tokenRateText: state.tokenRateText,
-					tokenRateShade: now < state.tokenRateFadeStartsAt
-						? undefined
-						: Math.floor((now - state.tokenRateFadeStartsAt) / (TOKEN_RATE_FADE_MS / TOKEN_RATE_FADE_SHADE_COUNT)),
+					tokenRateText: features.tokenRate && tokenRate.rate !== null ? formatTokenRate(tokenRate.rate) : "",
+					tokenRateShade: tokenRate.phase === "fading" ? tokenRate.fadeShade : undefined,
 					responseModel: responseModelShown,
 				},
 			);
@@ -842,19 +838,17 @@ export class SessionManager {
 		const before = this.indicatorFingerprint();
 		const styleBefore = this.#settings.outputStyle;
 		const preview = new PreviewRenderer(ctx, this.#allPacks);
-		const result = await showMenu<Record<string, boolean | string>>(ctx, {
+		const result = await showMenu(ctx, {
 			title: "Pi Topping: Settings",
-			maxHeight: "75%",
+			layout: { maxHeight: "75%" },
 			sections: buildMenuSections(this.#settings, this.#bundledPacks, this.#userPacks),
 			hints: ["↑↓ move", "PgUp/PgDn page", "←→ select", "␣ toggle", "⏎ apply", "esc cancel"],
-			preview: preview.render.bind(preview),
+			preview,
 		});
 		if (!result.applied) return;
 
 		const updatedSettings = applyMenuResult(this.#settings, result.values);
-		try {
-			saveSettings(updatedSettings);
-		} catch {
+		if (!saveSettings(updatedSettings).ok) {
 			ctx.ui.notify("Failed to save Pi Topping settings", "error");
 			return;
 		}