@underactive/pi-topping 0.6.2 → 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.
+**“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,8 +88,9 @@ Run `/topping-settings` (TUI only) to customize your toppings. Settings persist
 ╟─ Options ──────────────────────────────────────────────────╢
 ║    [■] Use NerdFont icons                             ON   ║
 ╟────────────────────────────────────────────────────────────╢
-║  ↑↓ move  ←→ select  ␣ toggle  ⏎ apply  esc cancel         ║
-╚════════════════════════════════════════════════════[ 9/47 ]╝
+║  ↑↓ move  PgUp/PgDn page  ←→ select                        ║
+║  ␣ toggle  ⏎ apply  esc cancel                             ║
+╚════════════════════════════════════════════════════[ 9/50 ]╝
 ```
 
 ### Word packs
@@ -107,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
@@ -128,7 +135,7 @@ Restart Pi (or run `/reload`) to pick it up.
 
 ## Requirements
 
-- [Pi](https://github.com/earendil-works/pi-coding-agent)
+- [Pi](https://github.com/earendil-works/pi-coding-agent). Pi ≥0.84.4 is required for the waiting-for-input loader state; older Pi versions keep the animated loader.
 - Node.js ≥22.19.0
 
 ## Development

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.6.2",
+  "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",
@@ -30,8 +30,8 @@
     "@earendil-works/pi-tui": "*"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.82.1",
-    "@earendil-works/pi-tui": "0.82.1",
+    "@earendil-works/pi-coding-agent": "0.84.4",
+    "@earendil-works/pi-tui": "0.84.4",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.3"
   },

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/menu.ts

@@ -5,27 +5,14 @@
  *
  * Renders a titled box containing one or more sections of boolean toggle,
  * multi-value cycle, or drag-to-reorder items, plus an optional live-updating
- * preview section driven by a caller-supplied render callback, e.g.:
- *
- *   ╔═[ Pi Topping: Settings ]════════════════════════╗
- *   ╟─ Preview ────────────────────────────────────╢
- *   ║                                                  ║
- *   ║ ⠋ Cerebrating… ⣤⣤⣤⣤  28 tok/s · 3s · ↓ 84 tokens ║
- *   ║                                                  ║
- *   ╟─ Decorations ───────────────────────────────────╢
- *   ║  ❯ [■] Animated spinner                    ON   ║
- *   ║    [ ] "Working..." text shimmer           OFF   ║
- *   ║                                                  ║
- *   ╟──────────────────────────────────────────────────╢
- *   ║  ↑↓ move  ␣ toggle  ⏎ apply  esc cancel          ║
- *   ╚══════════════════════════════════════════[ 1/2 ]═╝
+ * preview section driven by a caller-supplied render callback.
  *
  * Intended to be reused by any extension that needs a simple modal toggle
  * menu; it has no dependency on this extension's own settings shape.
  */
 
 import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
-import { type Component, Key, matchesKey, truncateToWidth, type TUI, visibleWidth } from "@earendil-works/pi-tui";
+import { type Component, Key, matchesKey, truncateToWidth, type SizeValue, type TUI, visibleWidth } from "@earendil-works/pi-tui";
 
 export type MenuValue = boolean | string;
 
@@ -79,6 +66,8 @@ export interface MenuConfig {
 	preview?: (values: Record<string, MenuValue>, elapsedMs: number, activeItemId: string | undefined, width: number) => string[] | PreviewResult;
 	/** Optional heading for the preview block. Defaults to `Preview`. */
 	previewTitle?: string;
+	/** Maximum overlay height in rows or as a percentage of the terminal height. */
+	maxHeight?: SizeValue;
 }
 
 export interface MenuResult<T> {
@@ -86,7 +75,7 @@ export interface MenuResult<T> {
 	values: T;
 }
 
-const DEFAULT_HINTS = ["\u2191\u2193 move", "\u2423 toggle", "\u23ce apply", "esc cancel"];
+const DEFAULT_HINTS = ["\u2191\u2193 move", "PgUp/PgDn page", "\u2423 toggle", "\u23ce apply", "esc cancel"];
 const OVERLAY_WIDTH = "86%";
 export const DEFAULT_PREVIEW_WIDTH = 76;
 const ROW_PREFIX_WIDTH = 8; // "  " + marker + " " + "[" + box + "]" + " "
@@ -141,6 +130,7 @@ export class MenuComponent implements Component {
 	private readonly previewFn: MenuConfig["preview"];
 	private readonly previewOrigin: number | undefined;
 	private readonly tui: TUI | undefined;
+	private readonly maxHeight: SizeValue | undefined;
 	private previewTimer: ReturnType<typeof setTimeout> | undefined;
 	private previewNextRefreshMs: number | undefined;
 	private disposed = false;
@@ -149,6 +139,7 @@ export class MenuComponent implements Component {
 	private cachedWidth: number | undefined;
 	private cachedRows: number | undefined;
 	private cachedLines: string[] | undefined;
+	private pageItemCount: number | undefined;
 
 	constructor(
 		config: MenuConfig,
@@ -163,6 +154,7 @@ export class MenuComponent implements Component {
 		this.hints = config.hints ?? DEFAULT_HINTS;
 		this.previewTitle = config.previewTitle ?? "Preview";
 		this.tui = tui;
+		this.maxHeight = config.maxHeight;
 		this.values = buildInitialValues(config);
 		this.flat = [];
 		for (const [sectionIndex, section] of config.sections.entries()) {
@@ -203,7 +195,7 @@ export class MenuComponent implements Component {
 
 		// Map input to a normalized key name.
 		let mappedKey: string | undefined;
-		for (const k of [Key.up, Key.down, Key.left, Key.right, Key.space, Key.enter, Key.escape]) {
+		for (const k of [Key.up, Key.down, Key.pageUp, Key.pageDown, Key.left, Key.right, Key.space, Key.enter, Key.escape]) {
 			if (matchesKey(data, k)) {
 				mappedKey = k;
 				break;
@@ -214,14 +206,16 @@ export class MenuComponent implements Component {
 		const keyActions: Record<string, () => void> = {
 			[Key.up]: () => {
 				if (this.moveGrabbedItem(-1)) return;
-				this.cursor = (this.cursor - 1 + this.flat.length) % this.flat.length;
+				this.cursor = Math.max(0, this.cursor - 1);
 				this.invalidate();
 			},
 			[Key.down]: () => {
 				if (this.moveGrabbedItem(1)) return;
-				this.cursor = (this.cursor + 1) % this.flat.length;
+				this.cursor = Math.min(this.flat.length - 1, this.cursor + 1);
 				this.invalidate();
 			},
+			[Key.pageUp]: () => this.moveByPage(-1),
+			[Key.pageDown]: () => this.moveByPage(1),
 			[Key.left]: () => this.cycleCurrentValue(-1),
 			[Key.right]: () => this.cycleCurrentValue(1),
 			[Key.space]: () => {
@@ -258,9 +252,9 @@ export class MenuComponent implements Component {
 	}
 
 	/**
-	 * Move the grabbed reorder row one slot within its group, clamped at the group
-	 * edges. Returns true when the key belongs to the mover and must not also move
-	 * the cursor — which is what keeps a grab from escaping its group.
+	 * Move the grabbed reorder row within its group, clamped at the group edges.
+	 * Returns true when the key belongs to the mover and must not also move the
+	 * cursor — which is what keeps a grab from escaping its group.
 	 */
 	private moveGrabbedItem(delta: number): boolean {
 		const grabbed = this.flat[this.cursor]!;
@@ -272,10 +266,10 @@ export class MenuComponent implements Component {
 		let end = this.cursor;
 		while (end < this.flat.length - 1 && this.flat[end + 1]!.reorderGroup === group) end++;
 
-		const target = this.cursor + delta;
-		if (target >= start && target <= end) {
-			this.flat[this.cursor] = this.flat[target]!;
-			this.flat[target] = grabbed;
+		const target = Math.max(start, Math.min(end, this.cursor + delta));
+		if (target !== this.cursor) {
+			this.flat.splice(this.cursor, 1);
+			this.flat.splice(target, 0, grabbed);
 			this.cursor = target;
 			this.values[group] = this.flat.slice(start, end + 1).map(flat => flat.id).join(",");
 			this.invalidate();
@@ -283,6 +277,20 @@ export class MenuComponent implements Component {
 		return true;
 	}
 
+	private moveByPage(direction: -1 | 1): void {
+		const pageItemCount = this.getPageItemCount();
+		if (this.moveGrabbedItem(direction * pageItemCount)) return;
+		this.cursor = Math.max(0, Math.min(this.flat.length - 1, this.cursor + direction * pageItemCount));
+		this.invalidate();
+	}
+
+	private getPageItemCount(): number {
+		if (this.pageItemCount !== undefined) return this.pageItemCount;
+		const rows = this.availableRows();
+		if (rows === undefined) return Math.max(1, Math.min(this.flat.length, 10));
+		return Math.max(1, rows - 6);
+	}
+
 	private cycleCurrentValue(delta: number): void {
 		const item = this.flat[this.cursor]!;
 		if (!item.cycleValues?.length || (item.cycleEnabledBy && !this.values[item.cycleEnabledBy])) return;
@@ -377,10 +385,17 @@ export class MenuComponent implements Component {
 	private buildResponsiveToggleSections(innerWidth: number, maxRows: number, allLines: string[]): string[] {
 		if (allLines.length <= maxRows) {
 			this.scrollStart = 0;
+			this.pageItemCount = Math.max(1, this.flat.length);
 			return allLines;
 		}
-		if (maxRows <= 0) return [];
-		if (maxRows === 1) return this.buildToggleWindow(innerWidth, this.cursor, 1).lines;
+		if (maxRows <= 0) {
+			this.pageItemCount = 1;
+			return [];
+		}
+		if (maxRows === 1) {
+			this.pageItemCount = 1;
+			return this.buildToggleWindow(innerWidth, this.cursor, 1).lines;
+		}
 
 		const contentRows = maxRows - 1; // Reserve one fixed row for scroll status.
 		if (this.cursor < this.scrollStart) this.scrollStart = this.cursor;
@@ -405,6 +420,7 @@ export class MenuComponent implements Component {
 			}
 		}
 		const window = this.buildToggleWindow(innerWidth, this.scrollStart, contentRows);
+		this.pageItemCount = Math.max(1, window.end - this.scrollStart + 1);
 
 		const rows = [...window.lines];
 		while (rows.length < contentRows) rows.push(this.renderBlankRow(innerWidth));
@@ -417,8 +433,16 @@ export class MenuComponent implements Component {
 	}
 
 	private availableRows(): number | undefined {
-		const rows = (this.tui as (TUI & { terminal?: { rows?: number } }) | undefined)?.terminal?.rows;
-		return typeof rows === "number" && Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : undefined;
+		const rows = this.tui?.terminal?.rows;
+		if (typeof rows !== "number" || !Number.isFinite(rows) || rows <= 0) return undefined;
+
+		const terminalRows = Math.floor(rows);
+		if (this.maxHeight === undefined) return terminalRows;
+		const requestedRows = typeof this.maxHeight === "number"
+			? this.maxHeight
+			: (Number.parseFloat(this.maxHeight) / 100) * terminalRows;
+		if (!Number.isFinite(requestedRows)) return terminalRows;
+		return Math.max(1, Math.min(terminalRows, Math.floor(requestedRows)));
 	}
 
 	private buildLines(maxWidth: number, maxRows?: number): string[] {
@@ -431,6 +455,7 @@ export class MenuComponent implements Component {
 		const naturalBody = this.buildToggleSections(innerWidth);
 		const naturalHeight = header.length + naturalBody.length + footer.length;
 		if (maxRows === undefined || naturalHeight <= maxRows) {
+			this.pageItemCount = Math.max(1, this.flat.length);
 			return [...header, ...naturalBody, ...footer].map(line => truncateToWidth(line, boxWidth, ""));
 		}
 
@@ -571,9 +596,10 @@ export async function showMenu<T extends Record<string, MenuValue>>(
 		return { applied: false, values: initialValues };
 	}
 
+	const maxHeight = config.maxHeight ?? "100%";
 	return ctx.ui.custom<MenuResult<T>>(
 		(tui, theme, _keybindings, done) =>
 			new MenuComponent(config, theme, done as (result: MenuResult<Record<string, MenuValue>>) => void, tui),
-		{ overlay: true, overlayOptions: { width: OVERLAY_WIDTH, maxHeight: "100%" } },
+		{ overlay: true, overlayOptions: { width: OVERLAY_WIDTH, maxHeight } },
 	);
 }

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,
@@ -47,8 +49,21 @@ type MessageStartEvent = Extract<ExtensionEvent, { type: "message_start" }>;
 type MessageUpdateEvent = Extract<ExtensionEvent, { type: "message_update" }>;
 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 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",
+	input: "Waiting for input",
+	editor: "Waiting in editor",
+	custom: "Waiting for input",
+};
+const WAITING_PULSE_FRAMES = ["·", "•", "●", "•"];
+const WAITING_PULSE_INTERVAL_MS = 120;
 // 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;
@@ -70,10 +85,15 @@ 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;
 	busy: boolean;
+	waiting: { kind: UIPromptKind; title?: string } | null;
 	midTurnInputs: number;
 	/** Last string passed to setWorkingMessage(), or the NOT_SENT sentinel before the first call. */
 	lastMessage: string | undefined | typeof NOT_SENT;
@@ -102,15 +122,25 @@ function makeFreshState(): SessionState {
 		rateTracker: new TokRateTracker(),
 		lastTokenRateSampledAt: 0,
 		lastTokenRateTotal: 0,
+		responseModel: "",
+		responseModelHoldTimer: null,
+		responseModelFadeTimer: null,
+		responseModelFadeGeneration: 0,
 		tokenRateText: "",
 		tokenRateFadeStartsAt: 0,
 		timer: null,
 		busy: false,
+		waiting: null,
 		midTurnInputs: 0,
 		lastMessage: NOT_SENT,
 	};
 }
 
+function waitingLabel(waiting: NonNullable<SessionState["waiting"]>): string {
+	const title = waiting.title ? stripControlChars(waiting.title).trim() : "";
+	return title ? `Waiting: ${title}` : WAITING_LABELS[waiting.kind];
+}
+
 /** Owns mutable extension state and Pi lifecycle registrations. */
 export class SessionManager {
 	#counter = new StreamingWordCounter();
@@ -126,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);
@@ -146,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;
@@ -184,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);
 		}
 	};
 
@@ -197,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:
@@ -214,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> => {
@@ -225,18 +271,40 @@ export class SessionManager {
 		}
 	};
 
+	#onUIPromptStart = (event: UIPromptStartEvent, ctx: ExtensionContext): void => {
+		this.#currentCtx = ctx;
+		if (!this.usable(ctx) || !this.#state.busy) return;
+		this.#state.waiting = { kind: event.kind, title: event.title };
+		this.applyWaitingIndicator(ctx);
+		this.tick();
+	};
+
+	#onUIPromptEnd = (_event: UIPromptEndEvent, ctx: ExtensionContext): void => {
+		this.#currentCtx = ctx;
+		if (!this.usable(ctx) || !this.#state.waiting) return;
+		this.#state.waiting = null;
+		if (!this.#state.busy) return;
+		this.applyIndicator(ctx);
+		this.tick();
+	};
+
 	#onAgentSettled = async (_e: AgentSettledEvent, ctx: ExtensionContext): Promise<void> => {
 		this.#currentCtx = ctx;
 		if (!this.usable(ctx)) return;
 
 		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;
@@ -251,7 +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();
 	};
 
@@ -298,6 +368,8 @@ export class SessionManager {
 		this.#pi.on("message_end", this.#onMessageEnd);
 		this.#pi.on("tool_execution_start", this.#onToolExecutionStart);
 		this.#pi.on("agent_settled", this.#onAgentSettled);
+		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.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => this.#renderDoneEntry(entry, theme));
 		this.#pi.registerMessageRenderer<PromptBoxDetails>(PROMPT_BOX_TYPE, promptBoxRenderer);
@@ -345,6 +417,13 @@ export class SessionManager {
 		return `${decorations.animatedSpinner}:${decorations.spinnerColor}:${decorations.spinnerColorEnabled}:${this.#settings.loaderOrder[0]}`;
 	}
 
+	private applyWaitingIndicator(ctx: ExtensionContext): void {
+		ctx.ui.setWorkingIndicator({
+			frames: WAITING_PULSE_FRAMES.map((frame) => ctx.ui.theme.fg("dim", frame)),
+			intervalMs: WAITING_PULSE_INTERVAL_MS,
+		});
+	}
+
 	private applyIndicator(ctx: ExtensionContext): void {
 		if (!this.#settings.decorations.animatedSpinner || this.spinnerInMessage()) {
 			ctx.ui.setWorkingIndicator({ frames: [] });
@@ -366,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;
 
@@ -384,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;
@@ -401,6 +534,14 @@ export class SessionManager {
 		const ctx = this.#currentCtx;
 		const state = this.#state;
 		if (!state.busy || !ctx) return;
+		if (state.waiting) {
+			const msg = ctx.ui.theme.fg("dim", waitingLabel(state.waiting));
+			if (msg !== state.lastMessage) {
+				state.lastMessage = msg;
+				ctx.ui.setWorkingMessage(msg);
+			}
+			return;
+		}
 
 		const now = Date.now();
 		const total = state.confirmTokens + state.liveTokens;
@@ -418,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;
@@ -477,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,
 		);
@@ -497,8 +643,9 @@ export class SessionManager {
 		const preview = new PreviewRenderer(ctx, [...this.#bundledPacks, ...this.#userPacks]);
 		const result = await showMenu<Record<string, boolean | string>>(ctx, {
 			title: "Pi Topping: Settings",
+			maxHeight: "75%",
 			sections: buildMenuSections(this.#settings, this.#bundledPacks, this.#userPacks),
-			hints: ["↑↓ move", "←→ select", "␣ toggle", "⏎ apply", "esc cancel"],
+			hints: ["↑↓ move", "PgUp/PgDn page", "←→ select", "␣ toggle", "⏎ apply", "esc cancel"],
 			preview: preview.render.bind(preview),
 		});
 		if (!result.applied) return;
@@ -512,7 +659,10 @@ export class SessionManager {
 		}
 
 		this.#settings = updatedSettings;
-		if (before !== this.indicatorFingerprint()) this.applyIndicator(ctx);
+		if (before !== this.indicatorFingerprint()) {
+			if (this.#state.waiting) this.applyWaitingIndicator(ctx);
+			else this.applyIndicator(ctx);
+		}
 		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
 		if (this.#state.busy) {
 			this.stopTimer();

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;

package/src/setup-command.ts

@@ -114,7 +114,7 @@ export function registerSetupCommand(pi: ExtensionAPI, install: ToppingInstaller
 						})),
 					},
 				],
-				hints: ["↑↓ move", "␣ toggle", "⏎ install", "esc cancel"],
+				hints: ["↑↓ move", "PgUp/PgDn page", "␣ toggle", "⏎ install", "esc cancel"],
 				previewTitle: "Description",
 				preview: (_values, _elapsedMs, activeItemId) => ({ lines: renderDescription(missing, activeItemId) }),
 			});