@underactive/pi-topping 0.2.1 → 0.3.1

package/src/preview.ts

@@ -1,47 +1,61 @@
 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 } from "./format.ts";
+import { buildWorkingMessage, formatElapsed, formatTokens, isFullyDefaultAppearance, shimmerString, SPINNER_FRAMES } from "./format.ts";
+import { buildPromptBoxLines } from "./prompt-decorator.ts";
 import { pickRandomWord } from "./words.ts";
-
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-const METER_INTERVAL_MS = 100;
-const METER_PERIOD_MS = 2400;
-const METER_PEAK_RATE = 46;
-const TOKEN_RATE_PER_SEC = 28;
+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"]);
+function meterRate(elapsedMs: number): number { return ((1 - Math.cos((2 * Math.PI * elapsedMs) / METER_PERIOD_MS)) / 2) * METER_PEAK_RATE; }
 
-function meterRate(elapsedMs: number): number {
-	return ((1 - Math.cos((2 * Math.PI * elapsedMs) / METER_PERIOD_MS)) / 2) * METER_PEAK_RATE;
-}
-
-/** Stateful, per-menu live preview renderer. */
+/** Stateful, per-menu preview renderer that follows the active settings section. */
 export class PreviewRenderer {
-	readonly #word = pickRandomWord();
-	readonly #meter = new ActivityMeter();
-	#lastMeterUpdate = 0;
+	readonly #word = pickRandomWord(); readonly #meter = new ActivityMeter(); #lastMeterUpdate = 0;
 	readonly #ctx: ExtensionContext;
-
 	constructor(ctx: ExtensionContext) { this.#ctx = ctx; }
-
-	render(values: Record<string, boolean>, elapsedMs: number): string[] {
-		this.#meter.setDirection(values.meterDirection_rtl ? "rtl" : "ltr");
-		if (elapsedMs - this.#lastMeterUpdate >= METER_INTERVAL_MS) {
-			this.#meter.push(rateToLevel(meterRate(elapsedMs)));
-			this.#lastMeterUpdate = elapsedMs;
-		}
-		const features = {
-			substituteDefaultMessage: values.substituteDefaultMessage ?? true,
-			elapsedTime: values.elapsedTime ?? true,
-			outputTokens: values.outputTokens ?? true,
-		};
-		const decorations = { shimmer: values.shimmer ?? true, tokenActivityMonitor: values.tokenActivityMonitor ?? true };
-		const spinner = values.animatedSpinner
-			? this.#ctx.ui.theme.fg("accent", 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(" ")];
+	render(values: Record<string, boolean | string>, elapsedMs: number, activeItemId?: string): PreviewResult {
+		if (PROMPT_IDS.has(activeItemId ?? "")) return this.promptPreview(values);
+		if (MARKER_IDS.has(activeItemId ?? "")) return this.markerPreview(values);
+		if (activeItemId === "useNerdFont") return { lines: [`Icon preview: ${values.useNerdFont ? "" : "π"}`] };
+		return { lines: ["", this.loaderPreview(values, elapsedMs), ""], nextRefreshInMs: 80 };
+	}
+	private loaderPreview(values: Record<string, boolean | string>, elapsedMs: number): string {
+		this.#meter.setDirection(values.meterDirection === "Right to Left" ? "rtl" : "ltr");
+		if (elapsedMs - this.#lastMeterUpdate >= METER_INTERVAL_MS) { this.#meter.push(rateToLevel(meterRate(elapsedMs))); this.#lastMeterUpdate = elapsedMs; }
+		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 word = features.substituteDefaultMessage ? this.#word : DEFAULT_WORKING_WORD;
-		const styledWord = decorations.shimmer ? shimmerString(word, elapsedMs, this.#ctx.ui.theme) : this.#ctx.ui.theme.fg("text", word);
-		const meter = decorations.tokenActivityMonitor ? this.#meter.render((level, char) => ActivityMeter.colorizeCell(level, char, this.#ctx.ui.theme)) : "";
-		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(" ")];
+		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 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(" ");
+	}
+	private promptPreview(values: Record<string, boolean | string>): PreviewResult {
+		if (!values.decorateUserPrompt) return { lines: ["User prompt decoration is disabled."] };
+
+		const borderColor = values.borderColor;
+		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",
+		});
+		return timestamp === undefined
+			? { lines }
+			: { lines, nextRefreshInMs: 1_000 - (timestamp % 1_000) };
+	}
+	private markerPreview(values: Record<string, boolean | string>): PreviewResult {
+		if (!values.doneMarker) return { lines: ["Completion marker is disabled."] };
+		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;
+		return { lines: ["", `${values.doneMarkerIcon ? th.fg("text", icon) : ""}${th.fg("dim", `${word} for 2m 52s${tail}`)}`, ""] };
 	}
 }

package/src/prompt-decorator.ts

@@ -0,0 +1,77 @@
+import type { MessageRenderer } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+
+export const PROMPT_BOX_TYPE = "pi-topping-prompt";
+
+export interface PromptBoxDetails {
+	submittedAt?: number;
+	showIcon?: boolean;
+	showTimestamp?: boolean;
+	icon?: string;
+	borderColor?: "accent" | "border" | "borderAccent";
+}
+
+type PromptTheme = { fg(color: string, text: string): string };
+
+/** Build the rendered lines for a decorated user prompt. */
+export function buildPromptBoxLines(
+	content: string,
+	submittedAt: number | undefined,
+	width: number,
+	theme: PromptTheme,
+	options: PromptBoxDetails = {},
+): string[] {
+	if (width < 10) return [];
+
+	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);
+	const bodyText = (text: string) => theme.fg("customMessageText", text);
+	const time = options.showTimestamp === false || !submittedAt
+		? ""
+		: new Date(submittedAt).toLocaleTimeString("en-GB", {
+			hour12: false,
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+		});
+	const innerWidth = width - 2;
+	const icon = options.showIcon === false ? "" : (options.icon ?? "");
+	const title = icon ? `══ ${icon} ` : "";
+	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 lines = [visibleWidth(topLine) > width ? truncateToWidth(topLine, width) : topLine];
+
+	if (content) {
+		const textWidth = innerWidth - 2;
+		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("║")}`;
+			lines.push(visibleWidth(line) > width ? truncateToWidth(line, width) : line);
+		}
+	}
+
+	const bottomLine = `${border("╚")}${border("═".repeat(innerWidth))}${border("╝")}`;
+	lines.push(visibleWidth(bottomLine) > width ? truncateToWidth(bottomLine, width) : bottomLine);
+	return lines;
+}
+
+export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _options, theme) => {
+	const content = typeof message.content === "string" ? message.content : "";
+	const details = (message.details ?? {}) as PromptBoxDetails;
+	const linesByWidth = new Map<number, string[]>();
+	return {
+		render(width: number): string[] {
+			let lines = linesByWidth.get(width);
+			if (!lines) {
+				lines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
+				linesByWidth.set(width, lines);
+			}
+			return lines;
+		},
+		invalidate() { linesByWidth.clear(); },
+	};
+};

package/src/session.ts

@@ -1,43 +1,373 @@
-import type { ExtensionAPI, ExtensionCommandContext, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type {
+	AgentSettledEvent,
+	AgentStartEvent,
+	ExtensionAPI,
+	ExtensionCommandContext,
+	ExtensionContext,
+	ExtensionEvent,
+	InputEvent,
+	InputEventResult,
+	SessionShutdownEvent,
+	SessionStartEvent,
+} from "@earendil-works/pi-coding-agent";
 import { Text } from "@earendil-works/pi-tui";
 import { ActivityMeter, rateToLevel, TokRateTracker } from "./activity-meter.ts";
-import { buildWorkingMessage, formatElapsed, formatTokens, isFullyDefaultAppearance, shimmerString, StreamingWordCounter } from "./format.ts";
+import {
+	buildWorkingMessage,
+	formatElapsed,
+	formatTokens,
+	isFullyDefaultAppearance,
+	shimmerString,
+	SPINNER_FRAMES,
+	StreamingWordCounter,
+} from "./format.ts";
 import { showMenu } from "./menu.ts";
 import { applyMenuResult, buildMenuSections, loadSettings, saveSettings } from "./settings.ts";
 import { PreviewRenderer } from "./preview.ts";
+import { PROMPT_BOX_TYPE, promptBoxRenderer, type PromptBoxDetails } from "./prompt-decorator.ts";
 import { pickRandomWord, pickRawWord } from "./words.ts";
 
+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" }>;
+
 const DONE_ENTRY_TYPE = "pi-topping-done";
 const DEFAULT_WORKING_WORD = "Working…";
 const SHIMMER_INTERVAL = 50;
 const METER_INTERVAL_MS = 100;
-export interface DoneEntryData { word: string; elapsedMs: number; }
-export interface SessionState { startTime: number; currentWord: string; confirmTokens: number; liveTokens: number; shimmerOrigin: number; activityMeter: ActivityMeter; rateTracker: TokRateTracker; lastActivityMeterUpdate: number; timer: ReturnType<typeof setInterval> | null; busy: boolean; }
-export function makeFreshState(): SessionState { return { startTime: 0, currentWord: "", confirmTokens: 0, liveTokens: 0, shimmerOrigin: 0, activityMeter: new ActivityMeter(), rateTracker: new TokRateTracker(), lastActivityMeterUpdate: 0, timer: null, busy: false }; }
+const ELAPSED_INTERVAL_MS = 1_000;
+
+export interface DoneEntryData {
+	word: string;
+	elapsedMs: number;
+	tokens: number;
+}
+
+export interface SessionState {
+	startTime: number;
+	currentWord: string;
+	confirmTokens: number;
+	liveTokens: number;
+	shimmerOrigin: number;
+	activityMeter: ActivityMeter;
+	rateTracker: TokRateTracker;
+	lastActivityMeterUpdate: number;
+	timer: ReturnType<typeof setInterval> | null;
+	busy: boolean;
+}
+
+export function makeFreshState(): SessionState {
+	return {
+		startTime: 0,
+		currentWord: "",
+		confirmTokens: 0,
+		liveTokens: 0,
+		shimmerOrigin: 0,
+		activityMeter: new ActivityMeter(),
+		rateTracker: new TokRateTracker(),
+		lastActivityMeterUpdate: 0,
+		timer: null,
+		busy: false,
+	};
+}
 
 /** Owns mutable extension state and Pi lifecycle registrations. */
 export class SessionManager {
-	#counter = new StreamingWordCounter(); #state = makeFreshState(); #settings = loadSettings(); #currentCtx: ExtensionContext | null = null;
+	#counter = new StreamingWordCounter();
+	#state = makeFreshState();
+	#settings = loadSettings();
+	#currentCtx: ExtensionContext | null = null;
 	readonly #pi: ExtensionAPI;
-	constructor(pi: ExtensionAPI) { this.#pi = pi; }
+
+	constructor(pi: ExtensionAPI) {
+		this.#pi = pi;
+	}
+
+	#onSessionStart = async (_e: SessionStartEvent, ctx: ExtensionContext): Promise<void> => {
+		this.stopTimer();
+		this.#counter.reset();
+		this.#currentCtx = null;
+		this.#state = makeFreshState();
+		this.#settings = loadSettings();
+		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
+		this.#currentCtx = ctx;
+		if (this.usable(ctx)) this.applyIndicator(ctx);
+	};
+
+	#onInput = async (event: InputEvent, ctx: ExtensionContext): Promise<InputEventResult | void> => {
+		this.#currentCtx = ctx;
+		if (!this.usable(ctx)) return;
+
+		this.resetTurn(Date.now());
+		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,
+						icon: this.#settings.decorations.useNerdFont ? "" : "π",
+						borderColor: this.#settings.decorations.borderColor,
+					},
+				},
+				{
+					triggerTurn: true,
+					...(event.streamingBehavior ? { deliverAs: event.streamingBehavior } : {}),
+				},
+			);
+			return { action: "handled" };
+		}
+	};
+
+	#onAgentStart = async (_e: AgentStartEvent, ctx: ExtensionContext): Promise<void> => {
+		this.#currentCtx = ctx;
+		if (!this.usable(ctx)) return;
+		if (!this.#state.startTime) this.resetTurn(Date.now());
+		this.#state.busy = true;
+		this.startTimer();
+		this.tick();
+	};
+
+	#onMessageStart = async (event: MessageStartEvent, ctx: ExtensionContext): Promise<void> => {
+		this.#currentCtx = ctx;
+		if (this.usable(ctx) && event.message.role === "assistant") {
+			this.#state.liveTokens = 0;
+			this.#counter.reset();
+		}
+	};
+
+	#onMessageUpdate = async (event: MessageUpdateEvent, ctx: ExtensionContext): Promise<void> => {
+		this.#currentCtx = ctx;
+		const assistantEvent = event.assistantMessageEvent;
+		if (
+			this.usable(ctx) &&
+			assistantEvent &&
+			(assistantEvent.type === "text_delta" || assistantEvent.type === "thinking_delta")
+		) {
+			this.#state.liveTokens += this.#counter.count(assistantEvent.delta, assistantEvent.type);
+		}
+	};
+
+	#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;
+		this.#state.confirmTokens += exactTokens ?? this.#state.liveTokens;
+		if (exactTokens !== undefined) {
+			this.#state.rateTracker.reset();
+			this.#state.lastActivityMeterUpdate = 0;
+		}
+		this.#state.liveTokens = 0;
+		this.#counter.reset();
+	};
+
+	#onToolExecutionStart = async (_e: ToolExecutionStartEvent, ctx: ExtensionContext): Promise<void> => {
+		this.#currentCtx = ctx;
+		if (this.usable(ctx)) {
+			this.#state.currentWord = pickRandomWord();
+			this.#state.shimmerOrigin = Date.now();
+			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;
+		this.#state.busy = false;
+		this.#state.startTime = 0;
+		this.#counter.reset();
+		this.stopTimer();
+		ctx.ui.setWorkingMessage();
+		this.applyIndicator(ctx);
+		this.#state.activityMeter.reset();
+		this.#state.rateTracker.reset();
+		this.#state.lastActivityMeterUpdate = 0;
+		if (this.#settings.features.doneMarker && hadPrompt) {
+			this.#pi.appendEntry<DoneEntryData>(DONE_ENTRY_TYPE, {
+				word: this.#settings.features.randomizeDoneMarker ? pickRawWord().past_tense : "Worked",
+				elapsedMs,
+				tokens: this.#state.confirmTokens,
+			});
+		}
+		this.#currentCtx = null;
+	};
+
+	#onSessionShutdown = async (_e: SessionShutdownEvent, _ctx: ExtensionContext): Promise<void> => {
+		this.stopTimer();
+	};
+
 	install(): void {
-		this.#pi.on("session_start", async (_e, ctx) => { this.stopTimer(); this.#counter.reset(); this.#currentCtx = null; this.#state = makeFreshState(); this.#settings = loadSettings(); this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection); this.#currentCtx = ctx; if (this.usable(ctx)) this.applyIndicator(ctx); });
-		this.#pi.on("input", async (_e, ctx) => { this.#currentCtx = ctx; if (this.usable(ctx)) this.resetTurn(Date.now()); });
-		this.#pi.on("agent_start", async (_e, ctx) => { this.#currentCtx = ctx; if (!this.usable(ctx)) return; if (!this.#state.startTime) this.resetTurn(Date.now()); this.#state.busy = true; this.startTimer(); this.tick(); });
-		this.#pi.on("message_start", async (e, ctx) => { this.#currentCtx = ctx; if (this.usable(ctx) && e.message.role === "assistant") { this.#state.liveTokens = 0; this.#counter.reset(); } });
-		this.#pi.on("message_update", async (e, ctx) => { this.#currentCtx = ctx; const a = e.assistantMessageEvent; if (this.usable(ctx) && a && (a.type === "text_delta" || a.type === "thinking_delta")) this.#state.liveTokens += this.#counter.count(a.delta, a.type); });
-		this.#pi.on("message_end", async (e, ctx) => { this.#currentCtx = ctx; if (!this.usable(ctx) || e.message.role !== "assistant") return; this.#state.confirmTokens += e.message.usage?.output ?? this.#state.liveTokens; this.#state.liveTokens = 0; this.#counter.reset(); });
-		this.#pi.on("tool_execution_start", async (_e, ctx) => { this.#currentCtx = ctx; if (this.usable(ctx)) { this.#state.currentWord = pickRandomWord(); this.#state.shimmerOrigin = Date.now(); } });
-		this.#pi.on("agent_settled", async (_e, ctx) => { this.#currentCtx = ctx; if (!this.usable(ctx)) return; const hadPrompt = !!this.#state.startTime; const elapsedMs = hadPrompt ? Date.now() - this.#state.startTime : 0; this.#state.busy = false; this.#state.startTime = 0; this.#counter.reset(); this.stopTimer(); ctx.ui.setWorkingMessage(); this.applyIndicator(ctx); this.#state.activityMeter.reset(); this.#state.rateTracker.reset(); this.#state.lastActivityMeterUpdate = 0; if (this.#settings.features.doneMarker && hadPrompt) this.#pi.appendEntry<DoneEntryData>(DONE_ENTRY_TYPE, { word: pickRawWord().past_tense, elapsedMs }); this.#currentCtx = null; });
-		this.#pi.on("session_shutdown", async () => this.stopTimer());
-		this.#pi.registerEntryRenderer<DoneEntryData>(DONE_ENTRY_TYPE, (entry, _o, theme) => entry.data ? new Text(`${theme.fg("text", "π")}${theme.fg("dim", ` ${entry.data.word} for ${formatElapsed(entry.data.elapsedMs)}`)}`) : undefined);
-		this.#pi.registerCommand("topping-settings", { description: "Configure pi-topping's spinner, shimmer, activity meter, and message details.", handler: async (_a, ctx) => this.showSettings(ctx) });
-	}
-	private usable(ctx: ExtensionContext): boolean { return !!ctx.hasUI && ctx.mode !== "print"; }
-	private applyIndicator(ctx: ExtensionContext): void { ctx.ui.setWorkingIndicator(this.#settings.decorations.animatedSpinner ? undefined : { frames: [] }); }
-	private stopTimer(): void { if (this.#state.timer) { clearInterval(this.#state.timer); this.#state.timer = null; } }
-	private startTimer(): void { if (!this.#state.timer) this.#state.timer = setInterval(() => this.tick(), SHIMMER_INTERVAL); }
-	private resetTurn(now: number): void { const s = this.#state; s.startTime = now; s.shimmerOrigin = now; s.currentWord = pickRandomWord(); s.confirmTokens = 0; s.liveTokens = 0; s.activityMeter.reset(); s.rateTracker.reset(); s.lastActivityMeterUpdate = 0; this.#counter.reset(); }
-	private tick(): void { const ctx = this.#currentCtx, s = this.#state; if (!s.busy || !ctx) return; const now = Date.now(), total = s.confirmTokens + s.liveTokens; if (now - s.lastActivityMeterUpdate >= METER_INTERVAL_MS) { s.activityMeter.push(rateToLevel(s.rateTracker.sample(total, now))); s.lastActivityMeterUpdate = now; } const f = this.#settings.features, d = this.#settings.decorations; if (isFullyDefaultAppearance(f, d)) return ctx.ui.setWorkingMessage(); const word = f.substituteDefaultMessage ? s.currentWord : DEFAULT_WORKING_WORD; const styled = d.shimmer ? shimmerString(word, now - s.shimmerOrigin, ctx.ui.theme) : ctx.ui.theme.fg("text", word); const meter = d.tokenActivityMonitor ? s.activityMeter.render((l, c) => ActivityMeter.colorizeCell(l, c, ctx.ui.theme)) : ""; ctx.ui.setWorkingMessage(buildWorkingMessage(ctx.ui.theme, styled, meter, formatElapsed(now - s.startTime), formatTokens(total), f)); }
-	private async showSettings(ctx: ExtensionCommandContext): Promise<void> { if (ctx.mode !== "tui") { ctx.ui.notify("/topping-settings requires TUI mode", "error"); return; } const before = this.#settings.decorations.animatedSpinner; const preview = new PreviewRenderer(ctx); const result = await showMenu<Record<string, boolean>>(ctx, { title: "Pi Topping: Settings", sections: buildMenuSections(this.#settings), hints: ["↑↓ move", "␣ toggle", "⏎ apply", "esc cancel"], preview: preview.render.bind(preview) }); if (!result.applied) return; this.#settings = applyMenuResult(this.#settings, result.values); saveSettings(this.#settings); if (before !== this.#settings.decorations.animatedSpinner) this.applyIndicator(ctx); this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection); ctx.ui.notify("Pi Topping settings saved", "info"); }
+		this.#pi.on("session_start", this.#onSessionStart);
+		this.#pi.on("input", this.#onInput);
+		this.#pi.on("agent_start", this.#onAgentStart);
+		this.#pi.on("message_start", this.#onMessageStart);
+		this.#pi.on("message_update", this.#onMessageUpdate);
+		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("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.registerMessageRenderer<PromptBoxDetails>(PROMPT_BOX_TYPE, promptBoxRenderer);
+		this.#pi.registerCommand("topping-settings", {
+			description: "Configure pi-topping's spinner, shimmer, activity meter, and message details.",
+			handler: async (_a, ctx) => this.showSettings(ctx),
+		});
+	}
+
+	private usable(ctx: ExtensionContext): boolean {
+		return !!ctx.hasUI && ctx.mode !== "print";
+	}
+
+	private shouldDecorate(event: InputEvent): boolean {
+		return event.source !== "extension" && !!event.text.trim() && !event.images?.length && !/^[\/!?:]/.test(event.text);
+	}
+
+	private applyIndicator(ctx: ExtensionContext): void {
+		const decorations = this.#settings.decorations;
+		if (!decorations.animatedSpinner) {
+			ctx.ui.setWorkingIndicator({ frames: [] });
+			return;
+		}
+
+		const color = decorations.spinnerColorEnabled ? decorations.spinnerColor : "accent";
+		if (color === "accent") {
+			ctx.ui.setWorkingIndicator(undefined);
+			return;
+		}
+		ctx.ui.setWorkingIndicator({ frames: SPINNER_FRAMES.map((frame) => ctx.ui.theme.fg(color, frame)) });
+	}
+
+	private stopTimer(): void {
+		if (this.#state.timer) {
+			clearInterval(this.#state.timer);
+			this.#state.timer = null;
+		}
+	}
+
+	private startTimer(): void {
+		if (this.#state.timer) return;
+
+		const features = this.#settings.features;
+		const decorations = this.#settings.decorations;
+		const interval = decorations.shimmer
+			? SHIMMER_INTERVAL
+			: (decorations.tokenActivityMonitor || features.outputTokens)
+				? METER_INTERVAL_MS
+				: features.elapsedTime
+					? ELAPSED_INTERVAL_MS
+					: undefined;
+		if (interval) this.#state.timer = setInterval(() => this.tick(), interval);
+	}
+
+	private resetTurn(now: number): void {
+		const state = this.#state;
+		state.startTime = now;
+		state.shimmerOrigin = now;
+		state.currentWord = pickRandomWord();
+		state.confirmTokens = 0;
+		state.liveTokens = 0;
+		state.activityMeter.reset();
+		state.rateTracker.reset();
+		state.lastActivityMeterUpdate = 0;
+		this.#counter.reset();
+	}
+
+	private tick(): void {
+		const ctx = this.#currentCtx;
+		const state = this.#state;
+		if (!state.busy || !ctx) return;
+
+		const now = Date.now();
+		const total = state.confirmTokens + state.liveTokens;
+		const features = this.#settings.features;
+		const decorations = this.#settings.decorations;
+		if (decorations.tokenActivityMonitor && now - state.lastActivityMeterUpdate >= METER_INTERVAL_MS) {
+			state.activityMeter.push(rateToLevel(state.rateTracker.sample(total, now)));
+			state.lastActivityMeterUpdate = now;
+		}
+		if (isFullyDefaultAppearance(features, decorations)) {
+			ctx.ui.setWorkingMessage();
+			return;
+		}
+
+		const word = features.substituteDefaultMessage ? state.currentWord : DEFAULT_WORKING_WORD;
+		const styled = decorations.shimmer
+			? shimmerString(word, now - state.shimmerOrigin, ctx.ui.theme, decorations.shimmerDirection)
+			: ctx.ui.theme.fg("text", word);
+		const meter = decorations.tokenActivityMonitor
+			? state.activityMeter.render((level, char) =>
+				ActivityMeter.colorizeCell(
+					level,
+					char,
+					ctx.ui.theme,
+					decorations.meterColorEnabled ? decorations.meterColor : "accent",
+					decorations.meterDimmed,
+				),
+			)
+			: "";
+		ctx.ui.setWorkingMessage(
+			buildWorkingMessage(
+				ctx.ui.theme,
+				styled,
+				meter,
+				formatElapsed(now - state.startTime),
+				formatTokens(total),
+				features,
+			),
+		);
+	}
+
+	private async showSettings(ctx: ExtensionCommandContext): Promise<void> {
+		if (ctx.mode !== "tui") {
+			ctx.ui.notify("/topping-settings requires TUI mode", "error");
+			return;
+		}
+
+		const before = `${this.#settings.decorations.animatedSpinner}:${this.#settings.decorations.spinnerColor}:${this.#settings.decorations.spinnerColorEnabled}`;
+		const preview = new PreviewRenderer(ctx);
+		const result = await showMenu<Record<string, boolean | string>>(ctx, {
+			title: "Pi Topping: Settings",
+			sections: buildMenuSections(this.#settings),
+			hints: ["↑↓ move", "←→ select", "␣ toggle", "⏎ apply", "esc cancel"],
+			preview: preview.render.bind(preview),
+		});
+		if (!result.applied) return;
+
+		const updatedSettings = applyMenuResult(this.#settings, result.values);
+		try {
+			saveSettings(updatedSettings);
+		} catch {
+			ctx.ui.notify("Failed to save Pi Topping settings", "error");
+			return;
+		}
+
+		this.#settings = updatedSettings;
+		if (
+			before !==
+			`${this.#settings.decorations.animatedSpinner}:${this.#settings.decorations.spinnerColor}:${this.#settings.decorations.spinnerColorEnabled}`
+		) {
+			this.applyIndicator(ctx);
+		}
+		this.#state.activityMeter.setDirection(this.#settings.decorations.meterDirection);
+		if (this.#state.busy) {
+			this.stopTimer();
+			this.startTimer();
+			this.tick();
+		}
+		ctx.ui.notify("Pi Topping settings saved", "info");
+	}
 }