@underactive/pi-topping 0.2.0 → 0.3.0

package/README.md

@@ -1,55 +1,61 @@
 # pi-topping
 
-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 changes the default "Working..." loader with a shimmering activity word, a scrolling token-activity meter, an elapsed timer, and a live output-token count.
+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:
 
-![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)
+**User Prompt** — high-vis bordered prompt box with configurable border color, 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)
 
-## What it does
+**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.
 
-- Picks a random activity word (`Cerebrating…`, `Noodling…`, `Zigzagging…`, etc.) when you submit a prompt, and a new one each time a tool call starts.
-- Sweeps a theme-aware shimmer across the word while it's showing.
-- Shows an elapsed timer (`Xm YYs`) that counts up from when you submitted the prompt.
-- Shows a live output-token estimate (`↓ N tokens`), reconciled against the real usage total once each assistant message finishes.
-- Resets everything — word, timer, token count — on each new prompt, and restores Pi's normal loader between turns.
-- Leaves a durable completion marker in the transcript after each finished turn, e.g. `π Baked for 6m 41s` — a fresh random word and the total time for that turn, rendered with `π` in the theme's primary text color and the rest dimmed. It's TUI-only display content and never enters LLM context.
+![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)
 
-## Activity meter
+**Completion Marker** — end-of-turn marker with icon, randomized verb, and token consumption display. Hooks into Pi's `agent_settled` event.
 
-Next to Pi's spinner there's an eight-column scrolling meter that reflects how fast tokens are streaming in. It updates every 100ms and uses your theme's accent color, so it should blend in with whatever theme you're running.
+![Example of pi-topping's completion marker](https://raw.githubusercontent.com/underactive/pi-topping/main/demo_completion_marker.png)
 
 ## Settings
 
-Run `/topping-settings` (TUI only) to toggle things on or off:
+Run `/topping-settings` (TUI only) to customize your toppings:
 
 ```
-╔═[ Pi Topping: Settings ]══════════════════════════╗
-╟─ Preview ─────────────────────────────────────────╢
-║                                                   ║
-║  ⠋ Crafting ⣤⣤⣤⣤ (0m 03s · ↓ 84 tokens)          ║
-║                                                   ║
-╟─ Decorations ─────────────────────────────────────╢
-║  ▸ [■] Animated spinner                       ON  ║
-║    [■] "Working..." text shimmer              ON  ║
-║    [■] Token activity monitor                 ON  ║
-╟─ Options ─────────────────────────────────────────╢
-║    [■] Substitute Pi's "Working..." message   ON  ║
-║    [■] Elapsed time since prompt              ON  ║
-║    [■] Show output tokens                     ON  ║
-║    [■] Show completion marker                 ON  ║
-║    [ ] Scrolling: Right → Left               OFF  ║
-╟───────────────────────────────────────────────────╢
-║  ↑↓ move  ␣ toggle  ⏎ apply  esc cancel           ║
-╚═══════════════════════════════════════════════════╝
+╔═┥ Pi Topping: Settings ┝═══════════════════════════════════╗
+╟─ Preview ──────────────────────────────────────────────────╢
+║                                                            ║
+║    Crafting (0m 03s · ↓ 84 tokens)                         ║
+║                                                            ║
+╟─ User Prompt ──────────────────────────────────────────────╢
+║    [■] High-vis prompt                                ON   ║
+║    [■] Border color                             ‹ accent › ║
+║    [■] Pi icon                                        ON   ║
+║    [■] Timestamp                                      ON   ║
+║                                                            ║
+╟─ Working Loader Text ──────────────────────────────────────╢
+║    [■] Animated spinner                               ON   ║
+║  ▸ [■] Animated spinner color                   ‹ accent › ║
+║    [■] Randomize "Working" text                       ON   ║
+║    [■] Text shimmer                                   ON   ║
+║    [■] Text shimmer direction            ‹ Left to Right › ║
+║    [■] Token activity monitor                         ON   ║
+║    [■] Token activity monitor color             ‹ accent › ║
+║    [■] Token activity monitor direction  ‹ Left to Right › ║
+║    [■] Token activity monitor dimmed                 OFF   ║
+║    [■] Elapsed time since prompt                      ON   ║
+║    [■] Show output tokens                             ON   ║
+║                                                            ║
+╟─ Completion Marker ────────────────────────────────────────╢
+║    [■] Show completion marker                         ON   ║
+║    [■] Pi icon                                        ON   ║
+║    [■] Randomize "Worked" text                        ON   ║
+║    [■] Tokens spent                                   ON   ║
+║                                                            ║
+╟─ Options ──────────────────────────────────────────────────╢
+║    [■] Use NerdFont icons                             ON   ║
+╟────────────────────────────────────────────────────────────╢
+║  ↑↓ move  ←→ select  ␣ toggle  ⏎ apply  esc cancel         ║
+╚═════════════════════════════════════════════════════┥ 1/9 ┝╝
 ```
 
-**Decorations** — animated spinner, word shimmer, activity meter.
-
-**Options** — whether to substitute the random word at all, the elapsed timer, the token count, the completion marker, and the meter scrolling direction.
-
-The menu has a live preview so you can see changes as you make them. Everything is on by default, so nothing changes unless you open the menu. Use `↑↓` to move, `␣` to toggle, `⏎` to save, `esc` to cancel. Settings are saved to `~/.pi/agent/pi-topping/settings.json`.
-
-The toggle-menu component itself lives in `menu.ts` and is reusable by other extensions if you want a similar settings UI.
-
 ## Install
 
 ```bash

package/index.ts

@@ -1,6 +1,6 @@
 /** pi-topping extension entry point. */
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { SessionManager } from "./session.ts";
+import { SessionManager } from "./src/session.ts";
 
 export default function (pi: ExtensionAPI): void {
 	new SessionManager(pi).install();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@underactive/pi-topping",
-  "version": "0.2.0",
-  "description": "A Pi extension that replaces the default \"Working...\" loader with a shimmering, randomized activity word, live elapsed timer, and output-token activity meter",
+  "version": "0.3.0",
+  "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",
   "keywords": ["pi-package", "pi-extension"],
   "license": "MIT",
   "author": "Eric Sison",
@@ -20,7 +20,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": ["*.ts", "README.md", "LICENSE"],
+  "files": ["index.ts", "src/**/*.ts", "README.md", "LICENSE"],
   "scripts": {
     "test": "node --test tests/*.test.ts",
     "typecheck": "tsc --noEmit"

package/{activity-meter.ts → src/activity-meter.ts}

@@ -117,12 +117,19 @@ export class ActivityMeter {
 		this.#levels.fill(0);
 	}
 
-	/** Colorize a meter cell using the default theme mapping (dim at IDLE, accent otherwise). */
+	/** Colorize a meter cell using the default theme mapping (dim at IDLE, `color` otherwise). */
 	static colorizeCell(
 		level: ActivityMeterLevel,
 		char: string,
 		theme: { fg: (style: ThemeColor, s: string) => string },
+		color: ThemeColor = "accent",
+		dimmed?: boolean,
 	): string {
-		return level === ActivityMeterLevel.IDLE ? theme.fg("dim", char) : theme.fg("accent", char);
+		if (level === ActivityMeterLevel.IDLE) return theme.fg("dim", char);
+		const colored = theme.fg(color, char);
+		// ANSI dim (SGR 2) reduces color brightness; SGR 22 resets dim/bold.
+		// This is necessary because theme.fg("dim", ...) sets a gray color instead
+		// of applying the ANSI dim attribute, so nesting would overwrite the accent color.
+		return dimmed ? `\x1b[2m${colored}\x1b[22m` : colored;
 	}
 }

package/{format.ts → src/format.ts}

@@ -1,5 +1,8 @@
 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 = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
 /** Format an output-token count for the working indicator. */
 export function formatTokens(count: number): string {
 	if (count < 1000) return count.toString();
@@ -67,29 +70,41 @@ export function buildWorkingMessage(
 export function shimmerString(
 	text: string,
 	elapsedMs: number,
-	theme: Pick<Theme, "fg" | "bold">,
+	theme: Pick<Theme, "getFgAnsi">,
+	direction: "ltr" | "rtl" = "ltr",
 ): string {
 	const chars = [...text];
 	if (chars.length === 0) return "";
 	const SHIMMER_SWEEP_S = 2.0;
 	const SHIMMER_BAND_HALF = 5.0;
 	const SHIMMER_PADDING = 10;
+	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 pos = ((elapsedS % SHIMMER_SWEEP_S) / SHIMMER_SWEEP_S) * period;
+	const sweep = ((elapsedS % SHIMMER_SWEEP_S) / SHIMMER_SWEEP_S) * period;
+	const pos = direction === "rtl" ? period - sweep : sweep;
 
 	return chars
 		.map((ch, i) => {
-			const dist = Math.abs(i + SHIMMER_PADDING - pos);
-			const intensity =
-				dist <= SHIMMER_BAND_HALF
-					? 0.5 * (1 + Math.cos((Math.PI * dist) / SHIMMER_BAND_HALF))
-					: 0;
-			if (intensity > 0.6) return theme.bold(theme.fg("text", ch));
-			if (intensity > 0.15) return theme.fg("muted", ch);
-			return theme.fg("dim", ch);
+			const dist = Math.abs((i + SHIMMER_PADDING) - pos);
+			const t = dist <= SHIMMER_BAND_HALF
+				? 0.5 * (1 + Math.cos(Math.PI * dist / SHIMMER_BAND_HALF))
+				: 0;
+			const alpha = t * 0.9;
+			const r = Math.round(SHIMMER_HIGHLIGHT[0] * alpha + SHIMMER_BASE[0] * (1 - alpha));
+			const g = Math.round(SHIMMER_HIGHLIGHT[1] * alpha + SHIMMER_BASE[1] * (1 - alpha));
+			const b = Math.round(SHIMMER_HIGHLIGHT[2] * alpha + SHIMMER_BASE[2] * (1 - alpha));
+			const bold = t > 0.2 ? "\x1b[1m" : "";
+			return `${bold}\x1b[38;2;${r};${g};${b}m${ch}\x1b[22m`;
 		})
-		.join("");
+		.join("") + "\x1b[0m";
+}
+
+function ansiToRgb(ansi: string): [number, number, number] {
+	const match = ansi.match(/^\x1b\[38;2;(\d+);(\d+);(\d+)m$/);
+	if (!match) throw new Error(`Shimmer requires truecolor theme colors, received ${JSON.stringify(ansi)}`);
+	return [Number(match[1]), Number(match[2]), Number(match[3])];
 }
 
 /**