@underactive/pi-topping 0.6.3 → 0.6.4

package/README.md

@@ -6,7 +6,7 @@ We garnish our pies. It seemed rude not to extend Pi the same courtesy. This is
 
 ![Example of pi-topping's decorated user prompt](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_user_prompt.png)
 
-**“Working” Loader** — animated spinner (with color choice), randomized activity word, optional word packs, shimmer (with direction, speed, and invert option), token activity monitor (with color, direction, and dim toggle), elapsed timer, output token display, and live output-token rate (with color choice and dim toggle) — all arrangeable left to right. During a blocking extension prompt, the loader switches to a stable dim waiting line with a pulsing indicator, then resumes afterward.
+**“Working” Loader** — animated spinner (with color choice), randomized activity word, optional word packs, shimmer (with direction, speed, and invert option), token activity monitor (with color, direction, and dim toggle), elapsed timer, output token display, live output-token rate (with color choice and dim toggle), and the response model (with visibility, color, and dim controls) — all arrangeable left to right. During a blocking extension prompt, the loader switches to a stable dim waiting line with a pulsing indicator, then resumes afterward.
 
 ![Demo of pi-topping's shimmering activity word, scrolling activity meter, elapsed timer, token count, and token rate](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo.gif)
 
@@ -23,7 +23,7 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ╔═[ Pi Topping: Settings ]═══════════════════════════════════╗
 ╟─ Preview ──────────────────────────────────────────────────╢
 ║                                                            ║
-║ ⠋ Crafting… ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tok/s · 3s · ↓ 84 tokens          ║
+║ ⠋ Crafting… ⣠⣤⣶⣶⣤⣠⣀⢀ 28 tps · 3s · ↓ 84 tokens · test-model ║
 ║                                                            ║
 ╟─ User Prompt ──────────────────────────────────────────────╢
 ║    [■] High-vis prompt                                ON   ║
@@ -51,6 +51,9 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ║    [■] Token rate                                     ON   ║
 ║    [■] Token rate color                        ‹ warning › ║
 ║    [■] Token rate dimmed                             OFF   ║
+║    [■] Response model                                 ON   ║
+║    [■] Response model color                     ‹ accent › ║
+║    [■] Response model dimmed                        OFF   ║
 ║                                                            ║
 ╟─ Elements Order ───────────────────────────────────────────╢
 ║    [ ] Animated spinner                                    ║
@@ -59,6 +62,7 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ║    [ ] Token rate                                          ║
 ║    [ ] Elapsed time                                        ║
 ║    [ ] Output tokens                                       ║
+║    [ ] Response model                                      ║
 ║                                                            ║
 ╟─ Completion Marker ────────────────────────────────────────╢
 ║    [■] Show completion marker                         ON   ║
@@ -84,9 +88,9 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ╟─ Options ──────────────────────────────────────────────────╢
 ║    [■] Use NerdFont icons                             ON   ║
 ╟────────────────────────────────────────────────────────────╢
-║  ↑↓ move  PgUp/PgDn page  ←→ select                       ║
-║  ␣ toggle  ⏎ apply  esc cancel                            ║
-╚════════════════════════════════════════════════════[ 9/47 ]╝
+║  ↑↓ move  PgUp/PgDn page  ←→ select                        ║
+║  ␣ toggle  ⏎ apply  esc cancel                             ║
+╚════════════════════════════════════════════════════[ 9/50 ]╝
 ```
 
 ### Word packs
@@ -108,17 +112,19 @@ Bundled packs live in [`wordpacks/`](wordpacks/). Copy `wordpacks/doctor-who.jso
 Pack IDs must start with a lowercase letter and contain only lowercase letters, digits, and `-`. Each pack needs a non-empty `name` and at least one word with non-empty `present_tense` and `past_tense` strings. Invalid entries are ignored. Packs reload when a session starts and whenever `/topping-settings` opens, not while a turn is running. Preferences for missing packs are retained so they apply when the pack returns.
 
 Under **Elements Order**, press `␣` to grab a row, then `↑`/`↓` to slide that element
-left or right within the loader. Elapsed time, output tokens, and token rate are joined with
+left or right within the loader. Elapsed time, output tokens, token rate, and response model are joined with
 `·` separators whenever adjacent. When reordering separates them, each adjacent run is rendered
 without a separator before or after it.
 
-The `N tok/s` token rate uses the selected theme color and
+The `N tps` token rate uses the selected theme color and
 remains reorderable. Active rates below 1,000 are padded to three characters so updates do not shift the other
-segments; larger rates may shift later segments. When inactive, it remains as the dim `--- tok/s` placeholder. After its last update it holds
+segments; larger rates may shift later segments. When inactive, it remains as the dim `--- tps` placeholder. After its last update it holds
 full brightness for 1.5 seconds, then fades through five theme-aware shades to the dim text color over
 the next 0.25 seconds before returning to the placeholder; a new count restores full brightness and
 restarts the cycle.
 
+The response model is captured from assistant responses, displayed as its sanitized value with no label, and defaults to the final loader detail after output tokens. It can be hidden, recolored, permanently dimmed, or reordered. After the agent settles, its final value remains visible for 3 seconds, fades through five theme-aware shades over 0.5 seconds, then clears; new work cancels the pending fade.
+
 ## Install
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "A Pi extension that adds quality of life improvements to Pi's UX: a high-vis user prompt, a shimmering working loader with token activity meter and elapsed timer, and an end-of-turn completion marker",
   "keywords": ["pi-package", "pi-extension"],
   "license": "MIT",

package/src/format.ts

@@ -19,13 +19,13 @@ export const SHIMMER_INTERVAL_MS = 50;
 export const ELAPSED_INTERVAL_MS = 1_000;
 
 /** A user-orderable piece of the working indicator. */
-export type LoaderElement = "spinner" | "text" | "meter" | "elapsed" | "tokens" | "tokenRate";
+export type LoaderElement = "spinner" | "text" | "meter" | "elapsed" | "tokens" | "tokenRate" | "responseModel";
 
 /** Default first-use working-indicator element order. */
-export const DEFAULT_LOADER_ORDER: readonly LoaderElement[] = ["spinner", "text", "meter", "tokenRate", "elapsed", "tokens"];
+export const DEFAULT_LOADER_ORDER: readonly LoaderElement[] = ["spinner", "text", "meter", "tokenRate", "elapsed", "tokens", "responseModel"];
 
 /** Elements share a detail group; separators and non-rate details are dimmed. */
-const DETAIL_ELEMENTS: ReadonlySet<LoaderElement> = new Set(["elapsed", "tokens", "tokenRate"]);
+const DETAIL_ELEMENTS: ReadonlySet<LoaderElement> = new Set(["elapsed", "tokens", "tokenRate", "responseModel"]);
 
 const TOKEN_UNITS = [
 	{ threshold: 10_000, divisor: 1_000, decimals: 1, suffix: "k" },
@@ -52,12 +52,12 @@ export function formatTokens(count: number): string {
 const TOKEN_RATE_DIGITS = 3;
 
 /** Placeholder shown when the working indicator has no active token-rate sample. */
-export const TOKEN_RATE_PLACEHOLDER = `${"-".repeat(TOKEN_RATE_DIGITS)} tok/s`;
+export const TOKEN_RATE_PLACEHOLDER = `${"-".repeat(TOKEN_RATE_DIGITS)} tps`;
 
 /** Format an output-token throughput estimate for the working indicator. */
 export function formatTokenRate(rate: number): string {
 	const rounded = Math.round(rate);
-	return rounded === 0 ? "" : `${rounded.toString().padStart(TOKEN_RATE_DIGITS)} tok/s`;
+	return rounded === 0 ? "" : `${rounded.toString().padStart(TOKEN_RATE_DIGITS)} tps`;
 }
 
 /**
@@ -74,6 +74,12 @@ export function dimAttribute(text: string): string {
 /** Number of discrete, eased warning-to-dim shades used for the token-rate fade. */
 export const TOKEN_RATE_FADE_SHADE_COUNT = 5;
 
+/** Milliseconds a settled response model remains fully visible before fading. */
+export const RESPONSE_MODEL_HOLD_MS = 3_000;
+
+/** Milliseconds over which a settled response model fades through the theme shades. */
+export const RESPONSE_MODEL_FADE_MS = 500;
+
 /** Render one token-rate fade shade by blending the selected color toward the active theme's dim color. */
 export function fadeThemeColorString(
 	text: string,
@@ -144,8 +150,8 @@ export function buildWorkingMessage(
 		const value = parts[element];
 		if (!value) continue;
 		if (DETAIL_ELEMENTS.has(element)) {
-			// tokenRate arrives pre-colored; dimming it here would replace its configured color.
-			details.push(element === "tokenRate" ? value : theme.fg("dim", value));
+			// tokenRate and responseModel arrive pre-colored; dimming them here would replace their configured colors.
+			details.push(element === "tokenRate" || element === "responseModel" ? value : theme.fg("dim", value));
 			continue;
 		}
 		flushDetails();

package/src/preview.ts

@@ -6,8 +6,8 @@ import { buildCompletionMarkerContent, buildCompletionMarkerLine, buildPromptBox
 import { DEFAULT_SETTINGS, fromCycleDirection, fromCycleSpeed, isBorderStyle, isDoneMarkerBorderStyle, isDoneMarkerStyle, isSettingColor, LOADER_ORDER_ID, MENU_ENTRIES, parseLoaderOrder } from "./settings.ts";
 import { isWordPackEnabled, selectWorkingTextSelection, wordPacksPath, type WordPack } from "./word-packs.ts";
 import { pickRandomWord } from "./words.ts";
-// Simulated load for the menu preview: a 2.4s cosine wave peaking at 46 tok/s for the meter,
-// flat 28 tok/s for the token readouts.
+// Simulated load for the menu preview: a 2.4s cosine wave peaking at 46 tps for the meter,
+// flat 28 tps for the token readouts.
 const METER_PERIOD_MS = 2400, METER_PEAK_RATE = 46, TOKEN_RATE_PER_SEC = 28;
 const PROMPT_IDS = new Set(MENU_ENTRIES.filter(entry => entry.section === "User Prompt").map(entry => entry.id));
 const MARKER_IDS = new Set(MENU_ENTRIES.filter(entry => entry.section === "Completion Marker").map(entry => entry.id));
@@ -51,7 +51,7 @@ export class PreviewRenderer {
 			this.#meter.push(rateToLevel(meterRate(elapsedMs)));
 			this.#lastMeterUpdate = elapsedMs;
 		}
-		const features = { substituteDefaultMessage: values.substituteDefaultMessage !== false, elapsedTime: values.elapsedTime !== false, outputTokens: values.outputTokens !== false, tokenRate: values.showTokenRate !== false };
+		const features = { substituteDefaultMessage: values.substituteDefaultMessage !== false, elapsedTime: values.elapsedTime !== false, outputTokens: values.outputTokens !== false, tokenRate: values.showTokenRate !== false, responseModel: values.showResponseModel !== false };
 		const decorations = { shimmer: values.shimmer !== false, shimmerInverted: values.shimmerInverted === true, tokenActivityMonitor: values.tokenActivityMonitor !== false };
 		let spinnerColor = DEFAULT_SETTINGS.decorations.spinnerColor;
 		if (values.spinnerColorEnabled !== false && isSettingColor(values.spinnerColor)) {
@@ -62,8 +62,12 @@ export class PreviewRenderer {
 			spinner = this.#ctx.ui.theme.fg(spinnerColor, SPINNER_FRAMES[Math.floor(elapsedMs / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!);
 		}
 		const order = parseLoaderOrder(values[LOADER_ORDER_ID]);
+		let responseModelColor = DEFAULT_SETTINGS.decorations.responseModelColor;
+		if (isSettingColor(values.responseModelColor)) responseModelColor = values.responseModelColor;
+		const responseModelColored = features.responseModel ? this.#ctx.ui.theme.fg(responseModelColor, "test-model") : "";
+		const responseModel = responseModelColored && values.responseModelDimmed === true ? dimAttribute(responseModelColored) : responseModelColored;
 		if (isFullyDefaultAppearance(features, decorations)) {
-			return buildWorkingMessage(this.#ctx.ui.theme, { spinner, text: this.#ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, order);
+			return buildWorkingMessage(this.#ctx.ui.theme, { spinner, text: this.#ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD), responseModel }, order);
 		}
 		let word = DEFAULT_WORKING_WORD;
 		if (features.substituteDefaultMessage) {
@@ -121,6 +125,7 @@ export class PreviewRenderer {
 			elapsed,
 			tokens,
 			tokenRate,
+			responseModel,
 		}, order);
 	}
 	private packValues(values: Record<string, boolean | string>): Record<string, boolean> {

package/src/session.ts

@@ -25,6 +25,8 @@ import {
 	formatTokens,
 	isFullyDefaultAppearance,
 	METER_INTERVAL_MS,
+	RESPONSE_MODEL_FADE_MS,
+	RESPONSE_MODEL_HOLD_MS,
 	SHIMMER_INTERVAL_MS,
 	shimmerString,
 	SPINNER_FRAME_MS,
@@ -52,6 +54,7 @@ type UIPromptEndEvent = Extract<ExtensionEvent, { type: "ui_prompt_end" }>;
 type UIPromptKind = UIPromptStartEvent["kind"];
 
 const DONE_ENTRY_TYPE = "pi-topping-done";
+const RESPONSE_MODEL_STATUS_KEY = "pi-topping-response-model";
 const WAITING_LABELS: Record<UIPromptKind, string> = {
 	select: "Waiting for selection",
 	confirm: "Waiting for confirmation",
@@ -82,6 +85,10 @@ interface SessionState {
 	rateTracker: TokRateTracker;
 	lastTokenRateSampledAt: number;
 	lastTokenRateTotal: number;
+	responseModel: string;
+	responseModelHoldTimer: ReturnType<typeof setTimeout> | null;
+	responseModelFadeTimer: ReturnType<typeof setInterval> | null;
+	responseModelFadeGeneration: number;
 	tokenRateText: string;
 	tokenRateFadeStartsAt: number;
 	timer: ReturnType<typeof setInterval> | null;
@@ -115,6 +122,10 @@ function makeFreshState(): SessionState {
 		rateTracker: new TokRateTracker(),
 		lastTokenRateSampledAt: 0,
 		lastTokenRateTotal: 0,
+		responseModel: "",
+		responseModelHoldTimer: null,
+		responseModelFadeTimer: null,
+		responseModelFadeGeneration: 0,
 		tokenRateText: "",
 		tokenRateFadeStartsAt: 0,
 		timer: null,
@@ -145,13 +156,14 @@ export class SessionManager {
 	}
 
 	#onSessionStart = async (_e: SessionStartEvent, ctx: ExtensionContext): Promise<void> => {
+		this.#currentCtx = ctx;
 		this.stopTimer();
+		this.cancelResponseModelFade(ctx);
 		this.#counter.reset();
 		this.#state = makeFreshState();
 		this.#settings = loadSettings();
 		this.#userPacks = loadUserWordPacks();
 		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
-		this.#currentCtx = ctx;
 		if (this.usable(ctx)) {
 			this.applyIndicator(ctx);
 			if (isSiblingSetupEnabled()) notifyMissingToppingsOnce(this.#pi, ctx.ui);
@@ -165,32 +177,38 @@ 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.shouldDecorate(event)) {
-			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,
+			try {
+				await 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,
+						},
 					},
-				},
-				{ triggerTurn: true },
-			);
-			return { action: "handled" };
+					{ triggerTurn: true },
+				);
+				return { action: "handled" };
+			} catch {
+				ctx.ui.notify("Failed to submit prompt", "error");
+				return;
+			}
 		}
 	};
 
 	#onAgentStart = async (_e: AgentStartEvent, ctx: ExtensionContext): Promise<void> => {
 		this.#currentCtx = ctx;
+		this.cancelResponseModelFade(ctx);
 		if (!this.usable(ctx)) return;
 		if (!this.#state.startTime) this.resetTurn(Date.now());
 		this.#state.busy = true;
@@ -203,6 +221,7 @@ export class SessionManager {
 		if (this.usable(ctx) && event.message.role === "assistant") {
 			this.#state.liveTokens = 0;
 			this.#counter.reset();
+			this.updateResponseModel((event.message as { responseModel?: unknown }).responseModel);
 		}
 	};
 
@@ -216,13 +235,20 @@ export class SessionManager {
 		) {
 			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);
+		}
 	};
 
 	#onMessageEnd = async (event: MessageEndEvent, ctx: ExtensionContext): Promise<void> => {
 		this.#currentCtx = ctx;
 		if (!this.usable(ctx) || event.message.role !== "assistant") return;
 
-		const exactTokens = event.message.usage?.output;
+		const rawTokens = event.message.usage?.output;
+		const exactTokens =
+			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:
@@ -233,6 +259,7 @@ export class SessionManager {
 		}
 		this.#state.liveTokens = 0;
 		this.#counter.reset();
+		this.updateResponseModel((event.message as { responseModel?: unknown }).responseModel);
 	};
 
 	#onToolExecutionStart = async (_e: ToolExecutionStartEvent, ctx: ExtensionContext): Promise<void> => {
@@ -267,13 +294,17 @@ export class SessionManager {
 
 		const hadPrompt = !!this.#state.startTime;
 		const elapsedMs = hadPrompt ? Date.now() - this.#state.startTime : 0;
+		const responseModel = this.#settings.features.responseModel ? this.#state.responseModel : "";
+		const responseModelColor = this.#settings.decorations.responseModelColor;
+		const responseModelDimmed = this.#settings.decorations.responseModelDimmed;
 		this.#state.busy = false;
 		this.#state.waiting = null;
 		this.#state.startTime = 0;
 		this.#counter.reset();
 		this.stopTimer();
-		ctx.ui.setWorkingMessage();
 		this.applyIndicator(ctx);
+		ctx.ui.setWorkingMessage();
+		if (responseModel) this.startResponseModelFade(ctx, responseModel, responseModelColor, responseModelDimmed);
 		this.#state.activityMeter.reset();
 		resetTokenRateState(this.#state);
 		this.#state.lastMessage = NOT_SENT;
@@ -288,8 +319,9 @@ export class SessionManager {
 		this.#currentCtx = null;
 	};
 
-	#onSessionShutdown = async (_e: SessionShutdownEvent, _ctx: ExtensionContext): Promise<void> => {
+	#onSessionShutdown = async (_e: SessionShutdownEvent, ctx: ExtensionContext): Promise<void> => {
 		this.#state.waiting = null;
+		this.cancelResponseModelFade(ctx);
 		this.stopTimer();
 	};
 
@@ -413,6 +445,58 @@ export class SessionManager {
 		}
 	}
 
+	private updateResponseModel(raw: unknown): void {
+		const responseModel = typeof raw === "string" ? stripControlChars(raw).trim() : "";
+		if (responseModel && responseModel !== this.#state.responseModel) {
+			this.#state.responseModel = responseModel;
+			this.tick();
+		}
+	}
+
+	private cancelResponseModelFade(ctx?: ExtensionContext | null): void {
+		const state = this.#state;
+		state.responseModelFadeGeneration++;
+		if (state.responseModelHoldTimer) {
+			clearTimeout(state.responseModelHoldTimer);
+			state.responseModelHoldTimer = null;
+		}
+		if (state.responseModelFadeTimer) {
+			clearInterval(state.responseModelFadeTimer);
+			state.responseModelFadeTimer = null;
+		}
+		const activeCtx = ctx ?? this.#currentCtx;
+		if (activeCtx && this.usable(activeCtx)) {
+			activeCtx.ui.setStatus(RESPONSE_MODEL_STATUS_KEY, undefined);
+		}
+	}
+
+	private startResponseModelFade(ctx: ExtensionContext, model: string, color: SettingColor, dimmed: boolean): void {
+		this.cancelResponseModelFade(ctx);
+		const generation = this.#state.responseModelFadeGeneration;
+		const render = (shade?: number): void => {
+			const colored = shade === undefined
+				? ctx.ui.theme.fg(color, model)
+				: fadeThemeColorString(model, shade, ctx.ui.theme, color);
+			const responseModel = dimmed ? dimAttribute(colored) : colored;
+			ctx.ui.setStatus(RESPONSE_MODEL_STATUS_KEY, responseModel);
+		};
+		render();
+		this.#state.responseModelHoldTimer = setTimeout(() => {
+			if (this.#state.responseModelFadeGeneration !== generation) return;
+			this.#state.responseModelHoldTimer = null;
+			let shade = 0;
+			render(shade++);
+			this.#state.responseModelFadeTimer = setInterval(() => {
+				if (this.#state.responseModelFadeGeneration !== generation) return;
+				if (shade >= TOKEN_RATE_FADE_SHADE_COUNT) {
+					this.cancelResponseModelFade(ctx);
+					return;
+				}
+				render(shade++);
+			}, RESPONSE_MODEL_FADE_MS / TOKEN_RATE_FADE_SHADE_COUNT);
+		}, RESPONSE_MODEL_HOLD_MS);
+	}
+
 	private startTimer(): void {
 		if (this.#state.timer) return;
 
@@ -431,12 +515,14 @@ export class SessionManager {
 	}
 
 	private resetTurn(now: number): void {
+		this.cancelResponseModelFade();
 		const state = this.#state;
 		state.startTime = now;
 		state.shimmerOrigin = now;
 		state.workingText = this.pickWorkingWord();
 		state.confirmTokens = 0;
 		state.liveTokens = 0;
+		state.responseModel = "";
 		state.activityMeter.reset();
 		resetTokenRateState(state);
 		state.midTurnInputs = 0;
@@ -473,9 +559,13 @@ export class SessionManager {
 		const spinner = this.spinnerInMessage()
 			? ctx.ui.theme.fg(this.spinnerColor(), 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)
+			: "";
+		const responseModel = responseModelColored && decorations.responseModelDimmed ? dimAttribute(responseModelColored) : responseModelColored;
 		if (isFullyDefaultAppearance(features, decorations)) {
-			const msg = spinner
-				? buildWorkingMessage(ctx.ui.theme, { spinner, text: ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, this.#settings.loaderOrder)
+			const msg = spinner || responseModel
+				? buildWorkingMessage(ctx.ui.theme, { spinner, text: ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD), responseModel }, this.#settings.loaderOrder)
 				: undefined;
 			if (msg !== state.lastMessage) {
 				state.lastMessage = msg;
@@ -532,6 +622,7 @@ export class SessionManager {
 				elapsed: features.elapsedTime ? formatElapsed(now - state.startTime) : "",
 				tokens: features.outputTokens ? `↓ ${formatTokens(total)} tokens` : "",
 				tokenRate: tokenRateStyled,
+				responseModel,
 			},
 			this.#settings.loaderOrder,
 		);

package/src/settings.ts

@@ -59,6 +59,8 @@ export interface DecoratorSettings {
 		meterDimmed: boolean;
 		tokenRateColor: SettingColor;
 		tokenRateDimmed: boolean;
+		responseModelColor: SettingColor;
+		responseModelDimmed: boolean;
 		promptIcon: boolean;
 		promptTimestamp: boolean;
 		promptProvider: boolean;
@@ -70,6 +72,7 @@ export interface DecoratorSettings {
 		elapsedTime: boolean;
 		outputTokens: boolean;
 		tokenRate: boolean;
+		responseModel: boolean;
 		doneMarker: boolean;
 		doneMarkerIcon: boolean;
 		randomizeDoneMarker: boolean;
@@ -81,8 +84,8 @@ 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, 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 },
+	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 },
+	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: {},
 };
@@ -96,6 +99,7 @@ const LOADER_ELEMENT_LABELS: Record<LoaderElement, string> = {
 	elapsed: "Elapsed time",
 	tokens: "Output tokens",
 	tokenRate: "Token rate",
+	responseModel: "Response model",
 };
 
 /**
@@ -198,6 +202,10 @@ export const MENU_ENTRIES: readonly MenuEntry[] = [
 	{ 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 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: "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 },
@@ -228,6 +236,7 @@ function setDecorationCycleValue(decorations: DecorationSettings, key: keyof Dec
 		case "spinnerColor":
 		case "meterColor":
 		case "tokenRateColor":
+		case "responseModelColor":
 		case "doneMarkerBorderColor":
 			if (isSettingColor(stored)) decorations[key] = stored;
 			return;