@underactive/pi-topping 0.3.1 → 0.4.0

package/README.md

@@ -2,17 +2,17 @@
 
 We garnish our pies. It seemed rude not to extend Pi the same courtesy. This is a [Pi](https://github.com/earendil-works/pi-coding-agent) extension that adds some quality of life improvements to Pi's UX, while looking good in the process:
 
-**User Prompt** — high-vis bordered prompt box with configurable border color, pi icon toggle, and timestamp.
+**User Prompt** — high-vis bordered prompt box with configurable border color and style, pi icon toggle, and timestamp.
 
-![Example of pi-topping's decorated user prompt](https://raw.githubusercontent.com/underactive/pi-topping/main/demo_user_prompt.png)
+![Example of pi-topping's decorated user prompt](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_user_prompt.png)
 
-**Working Loader Text** — animated spinner (with color choice), randomized activity word, shimmer (with direction), token activity meter (with color, direction, and dim toggle), elapsed timer, and output token display.
+**“Working” Loader** — animated spinner (with color choice), randomized activity word, shimmer (with direction and speed), token activity meter (with color, direction, and dim toggle), elapsed timer, and output token display — all arrangeable left to right.
 
-![Demo of pi-topping's shimmering activity word, scrolling activity meter, elapsed timer, and token count](https://raw.githubusercontent.com/underactive/pi-topping/main/demo.gif)
+![Demo of pi-topping's shimmering activity word, scrolling activity meter, elapsed timer, and token count](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo.gif)
 
-**Completion Marker** — end-of-turn marker with icon, randomized verb, and token consumption display. Hooks into Pi's `agent_settled` event.
+**Completion Marker** — end-of-turn marker with icon, randomized verb, and token consumption display. If you steered or followed up (`Alt+Enter`) while Pi was working, the marker also tallies those, e.g. `π Whisked for 2s (↓ 55 tokens · 2 mid-turn inputs)`. Hooks into Pi's `agent_settled` event.
 
-![Example of pi-topping's completion marker](https://raw.githubusercontent.com/underactive/pi-topping/main/demo_completion_marker.png)
+![Example of pi-topping's completion marker](https://raw.githubusercontent.com/underactive/pi-topping/main/media/demo_completion_marker.png)
 
 ## Settings
 
@@ -27,15 +27,17 @@ Run `/topping-settings` (TUI only) to customize your toppings:
 ╟─ User Prompt ──────────────────────────────────────────────╢
 ║    [■] High-vis prompt                                ON   ║
 ║    [■] Border color                             ‹ accent › ║
+║    [■] Border style                             ‹ double › ║
 ║    [■] Pi icon                                        ON   ║
 ║    [■] Timestamp                                      ON   ║
 ║                                                            ║
-╟─ Working Loader Text ──────────────────────────────────────╢
+╟─ “Working” Loader ─────────────────────────────────────────╢
 ║    [■] Animated spinner                               ON   ║
 ║  ▸ [■] Animated spinner color                   ‹ accent › ║
 ║    [■] Randomize "Working" text                       ON   ║
 ║    [■] Text shimmer                                   ON   ║
 ║    [■] Text shimmer direction            ‹ Left to Right › ║
+║    [■] Text shimmer speed                       ‹ Normal › ║
 ║    [■] Token activity monitor                         ON   ║
 ║    [■] Token activity monitor color             ‹ accent › ║
 ║    [■] Token activity monitor direction  ‹ Left to Right › ║
@@ -43,19 +45,32 @@ Run `/topping-settings` (TUI only) to customize your toppings:
 ║    [■] Elapsed time since prompt                      ON   ║
 ║    [■] Show output tokens                             ON   ║
 ║                                                            ║
+╟─ Elements Order ───────────────────────────────────────────╢
+║    [ ] Animated spinner                                    ║
+║    [■] “Working” text                                ↑ ↓   ║
+║    [ ] Token activity monitor                              ║
+║    [ ] Elapsed time                                        ║
+║    [ ] Output tokens                                       ║
+║                                                            ║
 ╟─ Completion Marker ────────────────────────────────────────╢
 ║    [■] Show completion marker                         ON   ║
 ║    [■] Pi icon                                        ON   ║
 ║    [■] Randomize "Worked" text                        ON   ║
 ║    [■] Tokens spent                                   ON   ║
+║    [■] Mid-turn inputs                                ON   ║
 ║                                                            ║
 ╟─ Options ──────────────────────────────────────────────────╢
 ║    [■] Use NerdFont icons                             ON   ║
 ╟────────────────────────────────────────────────────────────╢
 ║  ↑↓ move  ←→ select  ␣ toggle  ⏎ apply  esc cancel         ║
-╚═════════════════════════════════════════════════════┥ 1/9 ┝╝
+╚════════════════════════════════════════════════════┥ 1/28 ┝╝
 ```
 
+Under **Elements Order**, press `␣` to grab a row, then `↑`/`↓` to slide that element
+left or right within the loader. Elapsed time and output tokens share a single
+`(3s · ↓ 84 tokens)` parenthetical whenever they end up next to each other, and split
+into `(3s)` and `(↓ 84 tokens)` when they do not.
+
 ## Install
 
 ```bash

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.3.1",
-  "description": "A Pi extension that decorates user prompts and replaces the default \"Working...\" loader with a shimmering, randomized activity word, live elapsed timer, and output-token activity meter",
+  "version": "0.4.0",
+    "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",
   "author": "Eric Sison",
@@ -30,13 +30,13 @@
     "@earendil-works/pi-tui": "*"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.80.6",
-    "@earendil-works/pi-tui": "0.80.6",
+    "@earendil-works/pi-coding-agent": "0.82.1",
+    "@earendil-works/pi-tui": "0.82.1",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.3"
   },
   "pi": {
     "extensions": ["./index.ts"],
-    "video": "https://cdn.jsdelivr.net/gh/underactive/pi-topping@main/demo.mp4"
+    "image": "https://raw.githubusercontent.com/underactive/pi-topping/main/media/working.png"
   }
 }

package/src/format.ts

@@ -3,6 +3,18 @@ import type { Theme } from "@earendil-works/pi-coding-agent";
 /** Pi's default working-indicator frames (same braille spinner as pi-tui's Loader). */
 export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
+/** Milliseconds per spinner frame, matching pi-tui's Loader cadence. */
+export const SPINNER_FRAME_MS = 80;
+
+/** A user-orderable piece of the working indicator. */
+export type LoaderElement = "spinner" | "text" | "meter" | "elapsed" | "tokens";
+
+/** Left-to-right element order matching pi's stock working indicator. */
+export const DEFAULT_LOADER_ORDER: readonly LoaderElement[] = ["spinner", "text", "meter", "elapsed", "tokens"];
+
+/** Elements rendered inside the dim parenthetical rather than as standalone segments. */
+const DETAIL_ELEMENTS: ReadonlySet<LoaderElement> = new Set(["elapsed", "tokens"]);
+
 /** Format an output-token count for the working indicator. */
 export function formatTokens(count: number): string {
 	if (count < 1000) return count.toString();
@@ -52,19 +64,37 @@ export function isFullyDefaultAppearance(features: {
 	return !features.substituteDefaultMessage && !decorations.shimmer && !decorations.tokenActivityMonitor && !features.elapsedTime && !features.outputTokens;
 }
 
-/** Assemble the styled word, meter, and optional detail fields. */
+/**
+ * Assemble the working indicator from already-styled pieces, laid out in `order`.
+ *
+ * Empty/omitted pieces are dropped, and any run of detail elements left adjacent
+ * after that collapses into a single dim parenthetical.
+ */
 export function buildWorkingMessage(
 	theme: Pick<Theme, "fg">,
-	word: string,
-	frame: string,
-	elapsed: string,
-	tokens: string,
-	features: { elapsedTime: boolean; outputTokens: boolean },
+	parts: Partial<Record<LoaderElement, string>>,
+	order: readonly LoaderElement[] = DEFAULT_LOADER_ORDER,
 ): string {
-	const parts = [word, frame].filter(Boolean);
-	const details = [features.elapsedTime ? elapsed : "", features.outputTokens ? `↓ ${tokens} tokens` : ""].filter(Boolean);
-	if (details.length) parts.push(theme.fg("dim", `(${details.join(" · ")})`));
-	return parts.join(" ");
+	const segments: string[] = [];
+	let details: string[] = [];
+	const flushDetails = (): void => {
+		if (details.length) segments.push(theme.fg("dim", `(${details.join(" · ")})`));
+		details = [];
+	};
+
+	for (const element of order) {
+		const value = parts[element];
+		if (!value) continue;
+		if (DETAIL_ELEMENTS.has(element)) {
+			details.push(value);
+			continue;
+		}
+		flushDetails();
+		segments.push(value);
+	}
+	flushDetails();
+
+	return segments.join(" ");
 }
 
 export function shimmerString(
@@ -72,6 +102,7 @@ export function shimmerString(
 	elapsedMs: number,
 	theme: Pick<Theme, "getFgAnsi">,
 	direction: "ltr" | "rtl" = "ltr",
+	speed: "slow" | "normal" | "fast" = "normal",
 ): string {
 	const chars = [...text];
 	if (chars.length === 0) return "";
@@ -81,9 +112,21 @@ export function shimmerString(
 	const SHIMMER_BASE = ansiToRgb(theme.getFgAnsi("dim"));
 	const SHIMMER_HIGHLIGHT = ansiToRgb(theme.getFgAnsi("text"));
 	const period = chars.length + SHIMMER_PADDING * 2;
-	const elapsedS = elapsedMs / 1000;
-	const sweep = ((elapsedS % SHIMMER_SWEEP_S) / SHIMMER_SWEEP_S) * period;
-	const pos = direction === "rtl" ? period - sweep : sweep;
+	const unitsPerS = period / SHIMMER_SWEEP_S;
+	// The band crosses padding at either end while every character is still dim. Scaling only
+	// the stretch where it actually overlaps the text keeps that dark pause identical at every
+	// speed, so `speed` changes the sweep alone rather than the whole cycle.
+	const litEnter = SHIMMER_PADDING - SHIMMER_BAND_HALF;
+	const litExit = SHIMMER_PADDING + chars.length - 1 + SHIMMER_BAND_HALF;
+	const enterS = litEnter / unitsPerS;
+	const litS = (litExit - litEnter) / unitsPerS / (speed === "slow" ? 0.5 : speed === "fast" ? 2 : 1);
+	const phase = (elapsedMs / 1000) % (enterS + litS + (period - litExit) / unitsPerS);
+	const linear = phase < enterS
+		? phase * unitsPerS
+		: phase < enterS + litS
+			? litEnter + ((phase - enterS) / litS) * (litExit - litEnter)
+			: litExit + (phase - enterS - litS) * unitsPerS;
+	const pos = direction === "rtl" ? period - linear : linear;
 
 	return chars
 		.map((ch, i) => {

package/src/menu.ts

@@ -5,9 +5,9 @@
  * extensions, built on top of `@earendil-works/pi-tui`'s `Component`
  * contract and `ctx.ui.custom()` overlay API.
  *
- * Renders a titled box containing one or more sections of boolean toggle
- * or multi-value cycle items, plus an optional live-updating preview section driven by a
- * caller-supplied render callback, e.g.:
+ * 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 ─────────────────────────────────────╢
@@ -49,6 +49,13 @@ export interface MenuItem {
 	cycleEnabled?: boolean;
 	/** Value snapped to when the gating checkbox is unchecked. */
 	cycleDisabledValue?: string;
+	/**
+	 * Marks the item as a reorderable row. Space grabs/releases it; while grabbed,
+	 * up/down move it among the other rows sharing this group instead of moving the
+	 * cursor. The group's current order is published as a comma-joined list of item
+	 * ids under this key in the result values.
+	 */
+	reorderGroup?: string;
 }
 
 export interface MenuSection {
@@ -90,18 +97,26 @@ interface FlatItem {
 	cycleValues?: readonly string[];
 	cycleEnabledBy?: string;
 	cycleDisabledValue?: string;
+	reorderGroup?: string;
 	item: MenuItem;
 	sectionIndex: number;
 }
 
 function buildInitialValues(config: MenuConfig): Record<string, MenuValue> {
 	const values: Record<string, MenuValue> = {};
+	const reorderGroups = new Map<string, string[]>();
 	for (const section of config.sections) {
 		for (const item of section.items) {
 			values[item.id] = item.value;
 			if (item.cycleEnabledBy) values[item.cycleEnabledBy] = item.cycleEnabled ?? true;
+			if (item.reorderGroup) {
+				const ids = reorderGroups.get(item.reorderGroup) ?? [];
+				ids.push(item.id);
+				reorderGroups.set(item.reorderGroup, ids);
+			}
 		}
 	}
+	for (const [group, ids] of reorderGroups) values[group] = ids.join(",");
 	return values;
 }
 
@@ -144,7 +159,7 @@ export class MenuComponent implements Component {
 		this.flat = [];
 		for (const [sectionIndex, section] of config.sections.entries()) {
 			for (const item of section.items) {
-				this.flat.push({ id: item.id, label: item.label, cycleValues: item.cycleValues, cycleEnabledBy: item.cycleEnabledBy, cycleDisabledValue: item.cycleDisabledValue, item, sectionIndex });
+				this.flat.push({ id: item.id, label: item.label, cycleValues: item.cycleValues, cycleEnabledBy: item.cycleEnabledBy, cycleDisabledValue: item.cycleDisabledValue, reorderGroup: item.reorderGroup, item, sectionIndex });
 			}
 		}
 		this.initialValues = { ...this.values };
@@ -191,10 +206,12 @@ 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.invalidate();
 			},
 			[Key.down]: () => {
+				if (this.moveGrabbedItem(1)) return;
 				this.cursor = (this.cursor + 1) % this.flat.length;
 				this.invalidate();
 			},
@@ -233,6 +250,32 @@ export class MenuComponent implements Component {
 		return lines;
 	}
 
+	/**
+	 * 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.
+	 */
+	private moveGrabbedItem(delta: number): boolean {
+		const grabbed = this.flat[this.cursor]!;
+		const group = grabbed.reorderGroup;
+		if (group === undefined || this.values[grabbed.id] !== true) return false;
+
+		let start = this.cursor;
+		while (start > 0 && this.flat[start - 1]!.reorderGroup === group) start--;
+		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;
+			this.cursor = target;
+			this.values[group] = this.flat.slice(start, end + 1).map(flat => flat.id).join(",");
+			this.invalidate();
+		}
+		return true;
+	}
+
 	private cycleCurrentValue(delta: number): void {
 		const item = this.flat[this.cursor]!;
 		if (!item.cycleValues?.length || (item.cycleEnabledBy && !this.values[item.cycleEnabledBy])) return;
@@ -279,13 +322,20 @@ export class MenuComponent implements Component {
 		return [this.renderSectionDivider("Preview", innerWidth), this.renderBlankRow(innerWidth), ...previewLines.map(line => this.renderContentRow(` ${line}`, innerWidth)), this.renderBlankRow(innerWidth)];
 	}
 
+	/** Render every section from `this.flat`, the single source of truth for row order. */
 	private buildToggleSections(innerWidth: number): string[] {
-		let flatIndex = 0;
-		return this.sections.flatMap(section => [
-			this.renderSectionDivider(section.title, innerWidth),
-			...section.items.map(item => this.renderItemRow(item, flatIndex++ === this.cursor, innerWidth)),
-			this.renderBlankRow(innerWidth),
-		]);
+		const lines: string[] = [];
+		let currentSection = -1;
+		for (const [index, flat] of this.flat.entries()) {
+			if (flat.sectionIndex !== currentSection) {
+				if (currentSection !== -1) lines.push(this.renderBlankRow(innerWidth));
+				lines.push(this.renderSectionDivider(this.sections[flat.sectionIndex]!.title, innerWidth));
+				currentSection = flat.sectionIndex;
+			}
+			lines.push(this.renderItemRow(flat.item, index === this.cursor, innerWidth));
+		}
+		if (lines.length) lines.push(this.renderBlankRow(innerWidth));
+		return lines;
 	}
 
 	/** Build a section-aware item window, keeping a divider above each visible section. */
@@ -446,6 +496,19 @@ export class MenuComponent implements Component {
 		const marker = selected ? "\u25b8" : " ";
 		const markerColored = selected ? th.fg("accent", marker) : marker;
 
+		if (item.reorderGroup) {
+			const held = value as boolean;
+			const stateWord = held ? "\u2191 \u2193" : "";
+			const rightPlain = `${stateWord}  `;
+			const fixedLeftLen = 8;
+			const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - rightPlain.length - 1);
+			const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
+			const leftPlain = `  ${marker} [${held ? "\u25a0" : " "}] ${label}`;
+			const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(rightPlain));
+			const content = `  ${markerColored} [${held ? th.fg("accent", "\u25a0") : th.fg("muted", " ")}] ${th.fg("text", label)}${" ".repeat(gap)}${held ? th.fg("accent", stateWord) : ""}  `;
+			return this.wrap("\u2551", content, "\u2551");
+		}
+
 		if (item.cycleValues) {
 			const enabled = item.cycleEnabledBy ? this.values[item.cycleEnabledBy] as boolean : true;
 			const stateWord = `‹ ${value} ›`;

package/src/preview.ts

@@ -1,13 +1,14 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { PreviewResult } from "./menu.ts";
 import { ActivityMeter, rateToLevel } from "./activity-meter.ts";
-import { buildWorkingMessage, formatElapsed, formatTokens, isFullyDefaultAppearance, shimmerString, SPINNER_FRAMES } from "./format.ts";
+import { buildWorkingMessage, formatElapsed, formatTokens, isFullyDefaultAppearance, shimmerString, SPINNER_FRAME_MS, SPINNER_FRAMES } from "./format.ts";
 import { buildPromptBoxLines } from "./prompt-decorator.ts";
+import { LOADER_ORDER_ID, parseLoaderOrder } from "./settings.ts";
 import { pickRandomWord } from "./words.ts";
 const METER_INTERVAL_MS = 100, METER_PERIOD_MS = 2400, METER_PEAK_RATE = 46, TOKEN_RATE_PER_SEC = 28;
 const DEFAULT_WORKING_WORD = "Working…";
-const PROMPT_IDS = new Set(["decorateUserPrompt", "borderColor", "promptIcon", "promptTimestamp"]);
-const MARKER_IDS = new Set(["doneMarker", "doneMarkerIcon", "randomizeDoneMarker", "doneMarkerTokens"]);
+const PROMPT_IDS = new Set(["decorateUserPrompt", "borderColor", "borderStyle", "promptIcon", "promptTimestamp"]);
+const MARKER_IDS = new Set(["doneMarker", "doneMarkerIcon", "randomizeDoneMarker", "doneMarkerTokens", "doneMarkerInputs"]);
 function meterRate(elapsedMs: number): number { return ((1 - Math.cos((2 * Math.PI * elapsedMs) / METER_PERIOD_MS)) / 2) * METER_PEAK_RATE; }
 
 /** Stateful, per-menu preview renderer that follows the active settings section. */
@@ -27,24 +28,33 @@ export class PreviewRenderer {
 		const features = { substituteDefaultMessage: values.substituteDefaultMessage !== false, elapsedTime: values.elapsedTime !== false, outputTokens: values.outputTokens !== false };
 		const decorations = { shimmer: values.shimmer !== false, tokenActivityMonitor: values.tokenActivityMonitor !== false };
 		const spinnerColor = (values.spinnerColorEnabled === false ? "accent" : values.spinnerColor === "border" || values.spinnerColor === "borderAccent" ? values.spinnerColor : "accent") as "accent" | "border" | "borderAccent";
-		const spinner = values.animatedSpinner ? this.#ctx.ui.theme.fg(spinnerColor, SPINNER_FRAMES[Math.floor(elapsedMs / 80) % SPINNER_FRAMES.length]!) : "";
-		if (isFullyDefaultAppearance(features, decorations)) return [spinner, this.#ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD)].filter(Boolean).join(" ");
+		const spinner = values.animatedSpinner ? this.#ctx.ui.theme.fg(spinnerColor, SPINNER_FRAMES[Math.floor(elapsedMs / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!) : "";
+		const order = parseLoaderOrder(values[LOADER_ORDER_ID]);
+		if (isFullyDefaultAppearance(features, decorations)) return buildWorkingMessage(this.#ctx.ui.theme, { spinner, text: this.#ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, order);
 		const word = features.substituteDefaultMessage ? this.#word : DEFAULT_WORKING_WORD;
-		const styledWord = decorations.shimmer ? shimmerString(word, elapsedMs, this.#ctx.ui.theme, values.shimmerDirection === "Right to Left" ? "rtl" : "ltr") : this.#ctx.ui.theme.fg("text", word);
+		const styledWord = decorations.shimmer ? shimmerString(word, elapsedMs, this.#ctx.ui.theme, values.shimmerDirection === "Right to Left" ? "rtl" : "ltr", values.shimmerSpeed === "Slow" ? "slow" : values.shimmerSpeed === "Fast" ? "fast" : "normal") : this.#ctx.ui.theme.fg("text", word);
 		const meterColor = (values.meterColorEnabled === false ? "accent" : values.meterColor === "border" || values.meterColor === "borderAccent" ? values.meterColor : "accent") as "accent" | "border" | "borderAccent";
 		const meter = decorations.tokenActivityMonitor ? this.#meter.render((level, char) => ActivityMeter.colorizeCell(level, char, this.#ctx.ui.theme, meterColor, values.meterDimmed !== false)) : "";
-		return [spinner, buildWorkingMessage(this.#ctx.ui.theme, styledWord, meter, formatElapsed(elapsedMs), formatTokens(Math.max(0, Math.floor(elapsedMs / 1000 * TOKEN_RATE_PER_SEC))), features)].filter(Boolean).join(" ");
+		return buildWorkingMessage(this.#ctx.ui.theme, {
+			spinner,
+			text: styledWord,
+			meter,
+			elapsed: features.elapsedTime ? formatElapsed(elapsedMs) : "",
+			tokens: features.outputTokens ? `↓ ${formatTokens(Math.max(0, Math.floor(elapsedMs / 1000 * TOKEN_RATE_PER_SEC)))} tokens` : "",
+		}, order);
 	}
 	private promptPreview(values: Record<string, boolean | string>): PreviewResult {
 		if (!values.decorateUserPrompt) return { lines: ["User prompt decoration is disabled."] };
 
 		const borderColor = values.borderColor;
+		const borderStyle = values.borderStyle;
 		const timestamp = values.promptTimestamp ? Date.now() : undefined;
 		const lines = buildPromptBoxLines("ping", timestamp, 70, this.#ctx.ui.theme, {
 			showIcon: values.promptIcon as boolean,
 			showTimestamp: values.promptTimestamp as boolean,
 			icon: values.useNerdFont ? "" : "π",
 			borderColor: borderColor === "accent" || borderColor === "border" || borderColor === "borderAccent" ? borderColor : "accent",
+			borderStyle: borderStyle === "double" || borderStyle === "single" || borderStyle === "rounded" || borderStyle === "heavy" ? borderStyle : "double",
 		});
 		return timestamp === undefined
 			? { lines }
@@ -55,7 +65,10 @@ export class PreviewRenderer {
 		const th = this.#ctx.ui.theme;
 		const icon = values.doneMarkerIcon ? `${values.useNerdFont ? "" : "π"} ` : "";
 		const word = (values.randomizeDoneMarker ? "Concocted" : "Worked") as string;
-		const tail = (values.doneMarkerTokens ? " (↓ 949 tokens)" : "") as string;
+		const details: string[] = [];
+		if (values.doneMarkerTokens) details.push("↓ 949 tokens");
+		if (values.doneMarkerInputs) details.push("2 mid-turn inputs");
+		const tail = details.length ? ` (${details.join(" · ")})` : "";
 		return { lines: ["", `${values.doneMarkerIcon ? th.fg("text", icon) : ""}${th.fg("dim", `${word} for 2m 52s${tail}`)}`, ""] };
 	}
 }

package/src/prompt-decorator.ts

@@ -3,12 +3,22 @@ import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works
 
 export const PROMPT_BOX_TYPE = "pi-topping-prompt";
 
+export type BorderStyle = "double" | "single" | "rounded" | "heavy";
+
+const BORDER_GLYPHS: Record<BorderStyle, { tl: string; tr: string; bl: string; br: string; h: string; v: string }> = {
+	double: { tl: "╔", tr: "╗", bl: "╚", br: "╝", h: "═", v: "║" },
+	single: { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" },
+	rounded: { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" },
+	heavy: { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃" },
+};
+
 export interface PromptBoxDetails {
 	submittedAt?: number;
 	showIcon?: boolean;
 	showTimestamp?: boolean;
 	icon?: string;
 	borderColor?: "accent" | "border" | "borderAccent";
+	borderStyle?: BorderStyle;
 }
 
 type PromptTheme = { fg(color: string, text: string): string };
@@ -23,6 +33,7 @@ export function buildPromptBoxLines(
 ): string[] {
 	if (width < 10) return [];
 
+	const g = BORDER_GLYPHS[options.borderStyle ?? "double"];
 	const border = (text: string) => theme.fg(options.borderColor ?? "accent", text);
 	const label = (text: string) => theme.fg("customMessageLabel", text);
 	const muted = (text: string) => theme.fg("dim", text);
@@ -41,7 +52,7 @@ export function buildPromptBoxLines(
 	const titleLength = visibleWidth(title);
 	const timeLength = time ? time.length + 3 : 0; // time + right-side " ═"
 	const topFill = Math.max(0, innerWidth - titleLength - timeLength);
-	const topLine = `${border("╔")}${icon ? `${border("══ ")}${label(icon)}${border(" ")}` : ""}${border("═".repeat(topFill))}${time ? `${border(" ")}${muted(time)}${border(" ═")}` : ""}${border("╗")}`;
+	const topLine = `${border(g.tl)}${icon ? `${border(`${g.h}${g.h} `)}${label(icon)}${border(" ")}` : ""}${border(g.h.repeat(topFill))}${time ? `${border(" ")}${muted(time)}${border(` ${g.h}`)}` : ""}${border(g.tr)}`;
 	const lines = [visibleWidth(topLine) > width ? truncateToWidth(topLine, width) : topLine];
 
 	if (content) {
@@ -49,12 +60,12 @@ export function buildPromptBoxLines(
 		for (const rawLine of wrapTextWithAnsi(content, textWidth)) {
 			const displayLine = rawLine || " ";
 			const padded = `${displayLine}${" ".repeat(Math.max(0, textWidth - visibleWidth(displayLine)))}`;
-			const line = `${border("║")}${bodyText(` ${padded} `)}${border("║")}`;
+			const line = `${border(g.v)}${bodyText(` ${padded} `)}${border(g.v)}`;
 			lines.push(visibleWidth(line) > width ? truncateToWidth(line, width) : line);
 		}
 	}
 
-	const bottomLine = `${border("╚")}${border("═".repeat(innerWidth))}${border("╝")}`;
+	const bottomLine = `${border(g.bl)}${border(g.h.repeat(innerWidth))}${border(g.br)}`;
 	lines.push(visibleWidth(bottomLine) > width ? truncateToWidth(bottomLine, width) : bottomLine);
 	return lines;
 }

package/src/session.ts

@@ -18,6 +18,7 @@ import {
 	formatTokens,
 	isFullyDefaultAppearance,
 	shimmerString,
+	SPINNER_FRAME_MS,
 	SPINNER_FRAMES,
 	StreamingWordCounter,
 } from "./format.ts";
@@ -41,7 +42,8 @@ const ELAPSED_INTERVAL_MS = 1_000;
 export interface DoneEntryData {
 	word: string;
 	elapsedMs: number;
-	tokens: number;
+	tokens?: number;
+	midTurnInputs?: number;
 }
 
 export interface SessionState {
@@ -55,6 +57,7 @@ export interface SessionState {
 	lastActivityMeterUpdate: number;
 	timer: ReturnType<typeof setInterval> | null;
 	busy: boolean;
+	midTurnInputs: number;
 }
 
 export function makeFreshState(): SessionState {
@@ -69,6 +72,7 @@ export function makeFreshState(): SessionState {
 		lastActivityMeterUpdate: 0,
 		timer: null,
 		busy: false,
+		midTurnInputs: 0,
 	};
 }
 
@@ -99,7 +103,8 @@ export class SessionManager {
 		this.#currentCtx = ctx;
 		if (!this.usable(ctx)) return;
 
-		this.resetTurn(Date.now());
+		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>(
 				{
@@ -112,6 +117,7 @@ export class SessionManager {
 						showTimestamp: this.#settings.decorations.promptTimestamp,
 						icon: this.#settings.decorations.useNerdFont ? "" : "π",
 						borderColor: this.#settings.decorations.borderColor,
+						borderStyle: this.#settings.decorations.borderStyle,
 					},
 				},
 				{
@@ -195,6 +201,7 @@ export class SessionManager {
 				word: this.#settings.features.randomizeDoneMarker ? pickRawWord().past_tense : "Worked",
 				elapsedMs,
 				tokens: this.#state.confirmTokens,
+				midTurnInputs: this.#state.midTurnInputs,
 			});
 		}
 		this.#currentCtx = null;
@@ -214,13 +221,19 @@ export class SessionManager {
 		this.#pi.on("tool_execution_start", this.#onToolExecutionStart);
 		this.#pi.on("agent_settled", this.#onAgentSettled);
 		this.#pi.on("session_shutdown", this.#onSessionShutdown);
-		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) =>
-			entry.data
-				? new Text(
-					`${this.#settings.features.doneMarkerIcon ? theme.fg("text", this.#settings.decorations.useNerdFont ? "" : "π") : ""}${theme.fg("dim", `${this.#settings.features.doneMarkerIcon ? " " : ""}${entry.data.word} for ${formatElapsed(entry.data.elapsedMs)}${this.#settings.features.doneMarkerTokens && entry.data.tokens !== undefined ? ` (↓ ${formatTokens(entry.data.tokens)} tokens)` : ""}`)}`,
-				)
-				: undefined,
-		);
+		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => {
+			if (!entry.data) return undefined;
+			const features = this.#settings.features;
+			const details: string[] = [];
+			if (features.doneMarkerTokens && entry.data.tokens !== undefined) details.push(`↓ ${formatTokens(entry.data.tokens)} tokens`);
+			if (features.doneMarkerInputs && entry.data.midTurnInputs) {
+				details.push(`${entry.data.midTurnInputs} mid-turn input${entry.data.midTurnInputs === 1 ? "" : "s"}`);
+			}
+			const tail = details.length ? ` (${details.join(" · ")})` : "";
+			return new Text(
+				`${features.doneMarkerIcon ? theme.fg("text", this.#settings.decorations.useNerdFont ? "" : "π") : ""}${theme.fg("dim", `${features.doneMarkerIcon ? " " : ""}${entry.data.word} for ${formatElapsed(entry.data.elapsedMs)}${tail}`)}`,
+			);
+		});
 		this.#pi.registerMessageRenderer<PromptBoxDetails>(PROMPT_BOX_TYPE, promptBoxRenderer);
 		this.#pi.registerCommand("topping-settings", {
 			description: "Configure pi-topping's spinner, shimmer, activity meter, and message details.",
@@ -236,14 +249,31 @@ export class SessionManager {
 		return event.source !== "extension" && !!event.text.trim() && !event.images?.length && !/^[\/!?:]/.test(event.text);
 	}
 
-	private applyIndicator(ctx: ExtensionContext): void {
+	/**
+	 * Pi's Loader always prepends its indicator to the working message, so a spinner
+	 * that is not the leading element has to be drawn inside the message instead.
+	 */
+	private spinnerInMessage(): boolean {
+		return this.#settings.decorations.animatedSpinner && this.#settings.loaderOrder[0] !== "spinner";
+	}
+
+	private spinnerColor(): "accent" | "border" | "borderAccent" {
 		const decorations = this.#settings.decorations;
-		if (!decorations.animatedSpinner) {
+		return decorations.spinnerColorEnabled ? decorations.spinnerColor : "accent";
+	}
+
+	private indicatorFingerprint(): string {
+		const decorations = this.#settings.decorations;
+		return `${decorations.animatedSpinner}:${decorations.spinnerColor}:${decorations.spinnerColorEnabled}:${this.#settings.loaderOrder[0]}`;
+	}
+
+	private applyIndicator(ctx: ExtensionContext): void {
+		if (!this.#settings.decorations.animatedSpinner || this.spinnerInMessage()) {
 			ctx.ui.setWorkingIndicator({ frames: [] });
 			return;
 		}
 
-		const color = decorations.spinnerColorEnabled ? decorations.spinnerColor : "accent";
+		const color = this.spinnerColor();
 		if (color === "accent") {
 			ctx.ui.setWorkingIndicator(undefined);
 			return;
@@ -263,13 +293,14 @@ export class SessionManager {
 
 		const features = this.#settings.features;
 		const decorations = this.#settings.decorations;
-		const interval = decorations.shimmer
+		let interval = decorations.shimmer
 			? SHIMMER_INTERVAL
 			: (decorations.tokenActivityMonitor || features.outputTokens)
 				? METER_INTERVAL_MS
 				: features.elapsedTime
 					? ELAPSED_INTERVAL_MS
 					: undefined;
+		if (this.spinnerInMessage()) interval = Math.min(interval ?? SPINNER_FRAME_MS, SPINNER_FRAME_MS);
 		if (interval) this.#state.timer = setInterval(() => this.tick(), interval);
 	}
 
@@ -283,6 +314,7 @@ export class SessionManager {
 		state.activityMeter.reset();
 		state.rateTracker.reset();
 		state.lastActivityMeterUpdate = 0;
+		state.midTurnInputs = 0;
 		this.#counter.reset();
 	}
 
@@ -299,14 +331,21 @@ export class SessionManager {
 			state.activityMeter.push(rateToLevel(state.rateTracker.sample(total, now)));
 			state.lastActivityMeterUpdate = now;
 		}
+		const spinner = this.spinnerInMessage()
+			? ctx.ui.theme.fg(this.spinnerColor(), SPINNER_FRAMES[Math.floor(now / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!)
+			: "";
 		if (isFullyDefaultAppearance(features, decorations)) {
-			ctx.ui.setWorkingMessage();
+			ctx.ui.setWorkingMessage(
+				spinner
+					? buildWorkingMessage(ctx.ui.theme, { spinner, text: ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, this.#settings.loaderOrder)
+					: undefined,
+			);
 			return;
 		}
 
 		const word = features.substituteDefaultMessage ? state.currentWord : DEFAULT_WORKING_WORD;
 		const styled = decorations.shimmer
-			? shimmerString(word, now - state.shimmerOrigin, ctx.ui.theme, decorations.shimmerDirection)
+			? shimmerString(word, now - state.shimmerOrigin, ctx.ui.theme, decorations.shimmerDirection, decorations.shimmerSpeed)
 			: ctx.ui.theme.fg("text", word);
 		const meter = decorations.tokenActivityMonitor
 			? state.activityMeter.render((level, char) =>
@@ -322,11 +361,14 @@ export class SessionManager {
 		ctx.ui.setWorkingMessage(
 			buildWorkingMessage(
 				ctx.ui.theme,
-				styled,
-				meter,
-				formatElapsed(now - state.startTime),
-				formatTokens(total),
-				features,
+				{
+					spinner,
+					text: styled,
+					meter,
+					elapsed: features.elapsedTime ? formatElapsed(now - state.startTime) : "",
+					tokens: features.outputTokens ? `↓ ${formatTokens(total)} tokens` : "",
+				},
+				this.#settings.loaderOrder,
 			),
 		);
 	}
@@ -337,7 +379,7 @@ export class SessionManager {
 			return;
 		}
 
-		const before = `${this.#settings.decorations.animatedSpinner}:${this.#settings.decorations.spinnerColor}:${this.#settings.decorations.spinnerColorEnabled}`;
+		const before = this.indicatorFingerprint();
 		const preview = new PreviewRenderer(ctx);
 		const result = await showMenu<Record<string, boolean | string>>(ctx, {
 			title: "Pi Topping: Settings",
@@ -356,12 +398,7 @@ export class SessionManager {
 		}
 
 		this.#settings = updatedSettings;
-		if (
-			before !==
-			`${this.#settings.decorations.animatedSpinner}:${this.#settings.decorations.spinnerColor}:${this.#settings.decorations.spinnerColorEnabled}`
-		) {
-			this.applyIndicator(ctx);
-		}
+		if (before !== this.indicatorFingerprint()) this.applyIndicator(ctx);
 		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
 		if (this.#state.busy) {
 			this.stopTimer();

package/src/settings.ts

@@ -1,6 +1,7 @@
 import { getAgentDir } from "@earendil-works/pi-coding-agent";
 import { mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
+import { DEFAULT_LOADER_ORDER, type LoaderElement } from "./format.ts";
 import type { MenuSection } from "./menu.ts";
 
 export interface DecoratorSettings {
@@ -9,12 +10,16 @@ export interface DecoratorSettings {
 		shimmer: boolean;
 		shimmerDirection: "ltr" | "rtl";
 		shimmerDirectionEnabled: boolean;
+		shimmerSpeed: "slow" | "normal" | "fast";
+		shimmerSpeedEnabled: boolean;
 		tokenActivityMonitor: boolean;
 		meterDirection: "ltr" | "rtl";
 		meterDirectionEnabled: boolean;
 		decorateUserPrompt: boolean;
 		borderColor: "accent" | "border" | "borderAccent";
 		borderColorEnabled: boolean;
+		borderStyle: "double" | "single" | "rounded" | "heavy";
+		borderStyleEnabled: boolean;
 		spinnerColor: "accent" | "border" | "borderAccent";
 		spinnerColorEnabled: boolean;
 		meterColor: "accent" | "border" | "borderAccent";
@@ -32,14 +37,43 @@ export interface DecoratorSettings {
 		doneMarkerIcon: boolean;
 		randomizeDoneMarker: boolean;
 		doneMarkerTokens: boolean;
+		doneMarkerInputs: boolean;
 	};
+	loaderOrder: LoaderElement[];
 }
 
 export const DEFAULT_SETTINGS: DecoratorSettings = {
-	decorations: { animatedSpinner: true, shimmer: true, shimmerDirection: "ltr", shimmerDirectionEnabled: true, tokenActivityMonitor: true, meterDirection: "ltr", meterDirectionEnabled: true, decorateUserPrompt: true, borderColor: "accent", borderColorEnabled: true, spinnerColor: "accent", spinnerColorEnabled: true, meterColor: "accent", meterColorEnabled: true, meterDimmed: false, promptIcon: true, promptTimestamp: true, useNerdFont: true },
-	features: { substituteDefaultMessage: true, elapsedTime: true, outputTokens: true, doneMarker: true, doneMarkerIcon: true, randomizeDoneMarker: true, doneMarkerTokens: true },
+	decorations: { animatedSpinner: true, shimmer: true, shimmerDirection: "ltr", shimmerDirectionEnabled: true, shimmerSpeed: "normal", shimmerSpeedEnabled: true, tokenActivityMonitor: true, meterDirection: "ltr", meterDirectionEnabled: true, decorateUserPrompt: true, borderColor: "accent", borderColorEnabled: true, borderStyle: "double", borderStyleEnabled: true, spinnerColor: "accent", spinnerColorEnabled: true, meterColor: "accent", meterColorEnabled: true, meterDimmed: false, promptIcon: true, promptTimestamp: true, useNerdFont: true },
+	features: { substituteDefaultMessage: true, elapsedTime: true, outputTokens: true, doneMarker: true, doneMarkerIcon: true, randomizeDoneMarker: true, doneMarkerTokens: true, doneMarkerInputs: true },
+	loaderOrder: [...DEFAULT_LOADER_ORDER],
 };
 
+/** Menu key carrying the loader element order as a comma-joined list of element ids. */
+export const LOADER_ORDER_ID = "loaderOrder";
+const LOADER_ELEMENT_LABELS: Record<LoaderElement, string> = {
+	spinner: "Animated spinner",
+	text: "“Working” text",
+	meter: "Token activity monitor",
+	elapsed: "Elapsed time",
+	tokens: "Output tokens",
+};
+
+/**
+ * Normalize an element order from disk or from the menu, tolerating hand edits and
+ * version skew: unknown entries and duplicates are dropped, missing elements are
+ * appended in their default positions.
+ */
+export function parseLoaderOrder(value: unknown): LoaderElement[] {
+	const entries = typeof value === "string" ? value.split(",") : Array.isArray(value) ? value : [];
+	const order: LoaderElement[] = [];
+	for (const entry of entries) {
+		const element = typeof entry === "string" ? entry.trim() as LoaderElement : undefined;
+		if (element && DEFAULT_LOADER_ORDER.includes(element) && !order.includes(element)) order.push(element);
+	}
+	for (const element of DEFAULT_LOADER_ORDER) if (!order.includes(element)) order.push(element);
+	return order;
+}
+
 export function settingsPath(): string { return join(getAgentDir(), "pi-topping", "settings.json"); }
 function isPlainObject(value: unknown): value is Record<string, unknown> { return typeof value === "object" && value !== null && !Array.isArray(value); }
 function mergeGroup<T extends Record<string, boolean | string>>(defaults: T, parsed: unknown): T {
@@ -49,15 +83,20 @@ function mergeGroup<T extends Record<string, boolean | string>>(defaults: T, par
 		if (!(key in merged)) continue;
 		if (typeof merged[key] === "boolean" && typeof value === "boolean") (merged as Record<string, boolean | string>)[key] = value;
 		if ((key === "meterDirection" || key === "shimmerDirection") && (value === "ltr" || value === "rtl")) (merged as Record<string, boolean | string>)[key] = value;
+		if (key === "shimmerSpeed" && (value === "slow" || value === "normal" || value === "fast")) (merged as Record<string, boolean | string>)[key] = value;
 		if (key.endsWith("Color") && (value === "accent" || value === "border" || value === "borderAccent")) (merged as Record<string, boolean | string>)[key] = value;
+		if (key === "borderStyle" && (value === "double" || value === "single" || value === "rounded" || value === "heavy")) (merged as Record<string, boolean | string>)[key] = value;
 	}
 	return merged;
 }
 
-/** Map a persisted setting value to its menu cycle label (directions only; colors pass through). */
+/** Map a persisted setting value to its menu cycle label (directions and speeds only; colors pass through). */
 function toCycleValue(stored: unknown): string {
 	if (stored === "ltr") return "Left to Right";
 	if (stored === "rtl") return "Right to Left";
+	if (stored === "slow") return "Slow";
+	if (stored === "normal") return "Normal";
+	if (stored === "fast") return "Fast";
 	return String(stored);
 }
 
@@ -65,10 +104,13 @@ function toCycleValue(stored: unknown): string {
 function fromCycleValue(value: string): string {
 	if (value === "Left to Right") return "ltr";
 	if (value === "Right to Left") return "rtl";
+	if (value === "Slow") return "slow";
+	if (value === "Normal") return "normal";
+	if (value === "Fast") return "fast";
 	return value;
 }
 
-type MenuSectionName = "User Prompt" | "Working Loader Text" | "Completion Marker" | "Options";
+type MenuSectionName = "User Prompt" | "“Working” Loader" | "Completion Marker" | "Options";
 type DecorationSettings = DecoratorSettings["decorations"];
 type FeatureSettings = DecoratorSettings["features"];
 type DecorationBooleanKey = { [Key in keyof DecorationSettings]: DecorationSettings[Key] extends boolean ? Key : never }[keyof DecorationSettings];
@@ -79,23 +121,26 @@ type MenuEntry = DecorationMenuEntry | FeatureMenuEntry;
 export const MENU_ENTRIES: readonly MenuEntry[] = [
 	{ id: "decorateUserPrompt", label: "High-vis prompt", section: "User Prompt", group: "decorations", key: "decorateUserPrompt" },
 	{ id: "borderColor", label: "Border color", section: "User Prompt", group: "decorations", key: "borderColor", cycleValues: ["accent", "border", "borderAccent"], cycleEnabledBy: "borderColorEnabled", cycleDisabledValue: "border" },
+	{ id: "borderStyle", label: "Border style", section: "User Prompt", group: "decorations", key: "borderStyle", cycleValues: ["double", "single", "rounded", "heavy"], cycleEnabledBy: "borderStyleEnabled", cycleDisabledValue: "double" },
 	{ id: "promptIcon", label: "Pi icon", section: "User Prompt", group: "decorations", key: "promptIcon" },
 	{ id: "promptTimestamp", label: "Timestamp", section: "User Prompt", group: "decorations", key: "promptTimestamp" },
-	{ id: "animatedSpinner", label: "Animated spinner", section: "Working Loader Text", group: "decorations", key: "animatedSpinner" },
-	{ id: "spinnerColor", label: "Animated spinner color", section: "Working Loader Text", group: "decorations", key: "spinnerColor", cycleValues: ["accent", "border", "borderAccent"], cycleEnabledBy: "spinnerColorEnabled", cycleDisabledValue: "accent" },
-	{ id: "substituteDefaultMessage", label: "Randomize “Working” text", section: "Working Loader Text", group: "features", key: "substituteDefaultMessage" },
-	{ id: "shimmer", label: "Text shimmer", section: "Working Loader Text", group: "decorations", key: "shimmer" },
-	{ id: "shimmerDirection", label: "Text shimmer direction", section: "Working Loader Text", group: "decorations", key: "shimmerDirection", cycleValues: ["Left to Right", "Right to Left"], cycleEnabledBy: "shimmerDirectionEnabled", cycleDisabledValue: "Left to Right" },
-	{ id: "tokenActivityMonitor", label: "Token activity monitor", section: "Working Loader Text", group: "decorations", key: "tokenActivityMonitor" },
-	{ id: "meterColor", label: "Token activity monitor color", section: "Working Loader Text", group: "decorations", key: "meterColor", cycleValues: ["accent", "border", "borderAccent"], cycleEnabledBy: "meterColorEnabled", cycleDisabledValue: "accent" },
-	{ id: "meterDirection", label: "Token activity monitor direction", section: "Working Loader Text", group: "decorations", key: "meterDirection", cycleValues: ["Left to Right", "Right to Left"], cycleEnabledBy: "meterDirectionEnabled", cycleDisabledValue: "Left to Right" },
-	{ id: "meterDimmed", label: "Token activity monitor dimmed", section: "Working Loader Text", group: "decorations", key: "meterDimmed" },
-	{ id: "elapsedTime", label: "Elapsed time since prompt", section: "Working Loader Text", group: "features", key: "elapsedTime" },
-	{ id: "outputTokens", label: "Show output tokens", section: "Working Loader Text", group: "features", key: "outputTokens" },
+	{ id: "animatedSpinner", label: "Animated spinner", section: "“Working” Loader", group: "decorations", key: "animatedSpinner" },
+	{ id: "spinnerColor", label: "Animated spinner color", section: "“Working” Loader", group: "decorations", key: "spinnerColor", cycleValues: ["accent", "border", "borderAccent"], cycleEnabledBy: "spinnerColorEnabled", cycleDisabledValue: "accent" },
+	{ id: "substituteDefaultMessage", label: "Randomize “Working” text", section: "“Working” Loader", group: "features", key: "substituteDefaultMessage" },
+	{ id: "shimmer", label: "Text shimmer", section: "“Working” Loader", group: "decorations", key: "shimmer" },
+	{ id: "shimmerDirection", label: "Text shimmer direction", section: "“Working” Loader", group: "decorations", key: "shimmerDirection", cycleValues: ["Left to Right", "Right to Left"], cycleEnabledBy: "shimmerDirectionEnabled", cycleDisabledValue: "Left to Right" },
+	{ id: "shimmerSpeed", label: "Text shimmer speed", section: "“Working” Loader", group: "decorations", key: "shimmerSpeed", cycleValues: ["Slow", "Normal", "Fast"], cycleEnabledBy: "shimmerSpeedEnabled", cycleDisabledValue: "Normal" },
+	{ id: "tokenActivityMonitor", label: "Token activity monitor", section: "“Working” Loader", group: "decorations", key: "tokenActivityMonitor" },
+	{ id: "meterColor", label: "Token activity monitor color", section: "“Working” Loader", group: "decorations", key: "meterColor", cycleValues: ["accent", "border", "borderAccent"], cycleEnabledBy: "meterColorEnabled", cycleDisabledValue: "accent" },
+	{ id: "meterDirection", label: "Token activity monitor direction", section: "“Working” Loader", group: "decorations", key: "meterDirection", cycleValues: ["Left to Right", "Right to Left"], cycleEnabledBy: "meterDirectionEnabled", cycleDisabledValue: "Left to Right" },
+	{ id: "meterDimmed", label: "Token activity monitor dimmed", section: "“Working” Loader", group: "decorations", key: "meterDimmed" },
+	{ id: "elapsedTime", label: "Elapsed time since prompt", section: "“Working” Loader", group: "features", key: "elapsedTime" },
+	{ id: "outputTokens", label: "Show output tokens", section: "“Working” Loader", group: "features", key: "outputTokens" },
 	{ id: "doneMarker", label: "Show completion marker", section: "Completion Marker", group: "features", key: "doneMarker" },
 	{ id: "doneMarkerIcon", label: "Pi icon", section: "Completion Marker", group: "features", key: "doneMarkerIcon" },
 	{ id: "randomizeDoneMarker", label: "Randomize “Worked” text", section: "Completion Marker", group: "features", key: "randomizeDoneMarker" },
 	{ id: "doneMarkerTokens", label: "Tokens spent", section: "Completion Marker", group: "features", key: "doneMarkerTokens" },
+	{ id: "doneMarkerInputs", label: "Mid-turn inputs", section: "Completion Marker", group: "features", key: "doneMarkerInputs" },
 	{ id: "useNerdFont", label: "Use NerdFont icons", section: "Options", group: "decorations", key: "useNerdFont" },
 ];
 
@@ -119,18 +164,34 @@ function setDecorationCycleValue(decorations: DecorationSettings, key: keyof Dec
 		case "meterColor":
 			if (stored === "accent" || stored === "border" || stored === "borderAccent") decorations[key] = stored;
 			return;
+		case "borderStyle":
+			if (stored === "double" || stored === "single" || stored === "rounded" || stored === "heavy") decorations[key] = stored;
+			return;
 		case "shimmerDirection":
 		case "meterDirection":
 			if (stored === "ltr" || stored === "rtl") decorations[key] = stored;
 			return;
+		case "shimmerSpeed":
+			if (stored === "slow" || stored === "normal" || stored === "fast") decorations[key] = stored;
+			return;
 		default:
 			// Fail loudly if a MENU_ENTRIES cycle entry is added without a handler here.
 			throw new Error(`Unhandled cycle setting: ${String(key)}`);
 	}
 }
 
+function toggleSection(title: MenuSectionName, settings: DecoratorSettings): MenuSection {
+	return { title, items: MENU_ENTRIES.filter(entry => entry.section === title).map(entry => menuItem(entry, settings)) };
+}
+
 export function buildMenuSections(settings: DecoratorSettings): MenuSection[] {
-	return ["User Prompt", "Working Loader Text", "Completion Marker", "Options"].map(title => ({ title, items: MENU_ENTRIES.filter(entry => entry.section === title).map(entry => menuItem(entry, settings)) }));
+	return [
+		toggleSection("User Prompt", settings),
+		toggleSection("“Working” Loader", settings),
+		{ title: "Elements Order", items: parseLoaderOrder(settings.loaderOrder).map(id => ({ id, label: LOADER_ELEMENT_LABELS[id], value: false, reorderGroup: LOADER_ORDER_ID })) },
+		toggleSection("Completion Marker", settings),
+		toggleSection("Options", settings),
+	];
 }
 
 export function applyMenuResult(settings: DecoratorSettings, values: Record<string, boolean | string>): DecoratorSettings {
@@ -147,6 +208,7 @@ export function applyMenuResult(settings: DecoratorSettings, values: Record<stri
 			next.features[entry.key] = value;
 		}
 	}
+	if (typeof values[LOADER_ORDER_ID] === "string") next.loaderOrder = parseLoaderOrder(values[LOADER_ORDER_ID]);
 	return next;
 }
 
@@ -154,13 +216,15 @@ export function loadSettings(): DecoratorSettings {
 	try {
 		const parsed = JSON.parse(readFileSync(settingsPath(), "utf8"));
 		if (!isPlainObject(parsed)) return structuredClone(DEFAULT_SETTINGS);
-		const settings = { decorations: mergeGroup(DEFAULT_SETTINGS.decorations, parsed.decorations), features: mergeGroup(DEFAULT_SETTINGS.features, parsed.features) };
-		const gated: readonly (readonly ["borderColor" | "spinnerColor" | "meterColor" | "shimmerDirection" | "meterDirection", "borderColorEnabled" | "spinnerColorEnabled" | "meterColorEnabled" | "shimmerDirectionEnabled" | "meterDirectionEnabled", string])[] = [
+		const settings = { decorations: mergeGroup(DEFAULT_SETTINGS.decorations, parsed.decorations), features: mergeGroup(DEFAULT_SETTINGS.features, parsed.features), loaderOrder: parseLoaderOrder(parsed.loaderOrder) };
+		const gated: readonly (readonly ["borderColor" | "borderStyle" | "spinnerColor" | "meterColor" | "shimmerDirection" | "meterDirection" | "shimmerSpeed", "borderColorEnabled" | "borderStyleEnabled" | "spinnerColorEnabled" | "meterColorEnabled" | "shimmerDirectionEnabled" | "meterDirectionEnabled" | "shimmerSpeedEnabled", string])[] = [
 			["borderColor", "borderColorEnabled", "border"],
+			["borderStyle", "borderStyleEnabled", "double"],
 			["spinnerColor", "spinnerColorEnabled", "accent"],
 			["meterColor", "meterColorEnabled", "accent"],
 			["shimmerDirection", "shimmerDirectionEnabled", "ltr"],
 			["meterDirection", "meterDirectionEnabled", "ltr"],
+			["shimmerSpeed", "shimmerSpeedEnabled", "normal"],
 		];
 		for (const [key, enabledKey, resetValue] of gated) {
 			if (!settings.decorations[enabledKey]) (settings.decorations as unknown as Record<string, string>)[key] = resetValue;