@underactive/pi-topping 0.4.0 → 0.5.0

package/src/preview.ts

@@ -1,74 +1,144 @@
 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_FRAME_MS, SPINNER_FRAMES } from "./format.ts";
-import { buildPromptBoxLines } from "./prompt-decorator.ts";
-import { LOADER_ORDER_ID, parseLoaderOrder } from "./settings.ts";
+import { buildWorkingMessage, DEFAULT_WORKING_WORD, dimAttribute, ELAPSED_INTERVAL_MS, formatElapsed, formatTokenRate, formatTokens, isFullyDefaultAppearance, METER_INTERVAL_MS, SHIMMER_INTERVAL_MS, shimmerString, SPINNER_FRAME_MS, SPINNER_FRAMES } from "./format.ts";
+import { buildCompletionMarkerContent, buildCompletionMarkerLine, buildPromptBoxLines } from "./prompt-decorator.ts";
+import { DEFAULT_SETTINGS, fromCycleDirection, fromCycleSpeed, isBorderStyle, isDoneMarkerBorderStyle, isSettingColor, LOADER_ORDER_ID, MENU_ENTRIES, 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", "borderStyle", "promptIcon", "promptTimestamp"]);
-const MARKER_IDS = new Set(["doneMarker", "doneMarkerIcon", "randomizeDoneMarker", "doneMarkerTokens", "doneMarkerInputs"]);
+// Simulated load for the menu preview: a 2.4s cosine wave peaking at 46 tok/s for the meter,
+// flat 28 tok/s for the token readouts.
+const METER_PERIOD_MS = 2400, METER_PEAK_RATE = 46, TOKEN_RATE_PER_SEC = 28, PREVIEW_WIDTH = 70;
+const PROMPT_IDS = new Set(MENU_ENTRIES.filter(entry => entry.section === "User Prompt").map(entry => entry.id));
+const MARKER_IDS = new Set(MENU_ENTRIES.filter(entry => entry.section === "Completion Marker").map(entry => entry.id));
 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. */
 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 | 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 };
+		let nextRefreshInMs: number | undefined;
+		if (values.shimmer !== false) {
+			nextRefreshInMs = SHIMMER_INTERVAL_MS;
+		} else if (values.animatedSpinner !== false) {
+			nextRefreshInMs = SPINNER_FRAME_MS;
+		} else if (values.tokenActivityMonitor !== false) {
+			nextRefreshInMs = METER_INTERVAL_MS;
+		} else if (values.elapsedTime !== false || values.outputTokens !== false) {
+			nextRefreshInMs = ELAPSED_INTERVAL_MS;
+		}
+		return { lines: ["", this.loaderPreview(values, elapsedMs), ""], nextRefreshInMs };
 	}
 	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 / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!) : "";
+		this.#meter.setDirection(fromCycleDirection(values.meterDirection));
+		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, tokenRate: values.showTokenRate !== false };
+		const decorations = { shimmer: values.shimmer !== false, shimmerInverted: values.shimmerInverted === true, tokenActivityMonitor: values.tokenActivityMonitor !== false };
+		let spinnerColor = DEFAULT_SETTINGS.decorations.spinnerColor;
+		if (values.spinnerColorEnabled !== false && isSettingColor(values.spinnerColor)) {
+			spinnerColor = values.spinnerColor;
+		}
+		let spinner = "";
+		if (values.animatedSpinner !== false) {
+			spinner = this.#ctx.ui.theme.fg(spinnerColor, SPINNER_FRAMES[Math.floor(elapsedMs / SPINNER_FRAME_MS) % SPINNER_FRAMES.length]!);
+		}
 		const order = parseLoaderOrder(values[LOADER_ORDER_ID]);
-		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", 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)) : "";
+		if (isFullyDefaultAppearance(features, decorations)) {
+			return buildWorkingMessage(this.#ctx.ui.theme, { spinner, text: this.#ctx.ui.theme.fg("dim", DEFAULT_WORKING_WORD) }, order);
+		}
+		let word = DEFAULT_WORKING_WORD;
+		if (features.substituteDefaultMessage) {
+			word = this.#word;
+		}
+		let styledWord: string;
+		if (decorations.shimmer) {
+			styledWord = shimmerString(word, elapsedMs, this.#ctx.ui.theme, fromCycleDirection(values.shimmerDirection), fromCycleSpeed(values.shimmerSpeed), decorations.shimmerInverted);
+		} else {
+			styledWord = this.#ctx.ui.theme.fg("text", word);
+		}
+		let meterColor = DEFAULT_SETTINGS.decorations.meterColor;
+		if (values.meterColorEnabled !== false && isSettingColor(values.meterColor)) {
+			meterColor = values.meterColor;
+		}
+		let meter = "";
+		if (decorations.tokenActivityMonitor) {
+			meter = this.#meter.render((level, char) => ActivityMeter.colorizeCell(level, char, this.#ctx.ui.theme, meterColor, values.meterDimmed === true));
+		}
+		let tokenRateText = "";
+		if (features.tokenRate) {
+			tokenRateText = formatTokenRate(TOKEN_RATE_PER_SEC);
+		}
+		let tokenRateColor = DEFAULT_SETTINGS.decorations.tokenRateColor;
+		if (isSettingColor(values.tokenRateColor)) {
+			tokenRateColor = values.tokenRateColor;
+		}
+		let tokenRateColored = "";
+		if (tokenRateText) {
+			tokenRateColored = this.#ctx.ui.theme.fg(tokenRateColor, tokenRateText);
+		}
+		let tokenRate = tokenRateColored;
+		if (tokenRateColored && values.tokenRateDimmed === true) {
+			tokenRate = dimAttribute(tokenRateColored);
+		}
+		let elapsed = "";
+		if (features.elapsedTime) {
+			elapsed = formatElapsed(elapsedMs);
+		}
+		let tokens = "";
+		if (features.outputTokens) {
+			tokens = `↓ ${formatTokens(Math.max(0, Math.floor(elapsedMs / 1000 * TOKEN_RATE_PER_SEC)))} tokens`;
+		}
 		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` : "",
+			elapsed,
+			tokens,
+			tokenRate,
 		}, order);
 	}
 	private promptPreview(values: Record<string, boolean | string>): PreviewResult {
-		if (!values.decorateUserPrompt) return { lines: ["User prompt decoration is disabled."] };
+		if (values.decorateUserPrompt !== true) 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,
+		const timestamp = values.promptTimestamp === true ? Date.now() : undefined;
+		const lines = buildPromptBoxLines("ping", timestamp, PREVIEW_WIDTH, this.#ctx.ui.theme, {
+			showIcon: values.promptIcon === true,
+			showTimestamp: values.promptTimestamp === true,
+			showProvider: values.promptProvider === true,
+			showModel: values.promptModel === true,
 			icon: values.useNerdFont ? "" : "π",
-			borderColor: borderColor === "accent" || borderColor === "border" || borderColor === "borderAccent" ? borderColor : "accent",
-			borderStyle: borderStyle === "double" || borderStyle === "single" || borderStyle === "rounded" || borderStyle === "heavy" ? borderStyle : "double",
+			provider: this.#ctx.model?.provider,
+			model: this.#ctx.model?.id,
+			borderColor: isSettingColor(borderColor) ? borderColor : DEFAULT_SETTINGS.decorations.borderColor,
+			borderStyle: isBorderStyle(borderStyle) ? borderStyle : "double",
 		});
 		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;
+		if (values.doneMarker !== true) return { lines: ["Completion marker is disabled."] };
+		const theme = this.#ctx.ui.theme;
+		const icon = values.doneMarkerIcon === true ? theme.fg("text", values.useNerdFont === true ? "" : "π") : "";
+		const word = values.randomizeDoneMarker === true ? "Concocted" : "Worked";
 		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}`)}`, ""] };
+		if (values.doneMarkerTokens === true) details.push("↓ 949 tokens");
+		if (values.doneMarkerInputs === true) details.push("2 mid-turn inputs");
+		const content = buildCompletionMarkerContent(theme, icon, word, "2m 52s", details);
+		const borderStyle = isDoneMarkerBorderStyle(values.doneMarkerBorderStyle) ? values.doneMarkerBorderStyle : "none";
+		const borderColor = isSettingColor(values.doneMarkerBorderColor) ? values.doneMarkerBorderColor : DEFAULT_SETTINGS.decorations.doneMarkerBorderColor;
+		const marker = buildCompletionMarkerLine(content, PREVIEW_WIDTH, theme, borderStyle, borderColor);
+		return { lines: ["", marker, ""] };
 	}
 }

package/src/prompt-decorator.ts

@@ -1,10 +1,9 @@
-import type { MessageRenderer } from "@earendil-works/pi-coding-agent";
+import type { MessageRenderer, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { DEFAULT_SETTINGS, isBorderStyle, isSettingColor, type BorderStyle, type DoneMarkerBorderStyle, type SettingColor } from "./settings.ts";
 
 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: "│" },
@@ -12,17 +11,63 @@ const BORDER_GLYPHS: Record<BorderStyle, { tl: string; tr: string; bl: string; b
 	heavy: { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃" },
 };
 
+/**
+ * False visibility options hide each corresponding part; present provider and
+ * model values join with `/` in the bottom border.
+ */
 export interface PromptBoxDetails {
 	submittedAt?: number;
 	showIcon?: boolean;
 	showTimestamp?: boolean;
+	showProvider?: boolean;
+	showModel?: boolean;
 	icon?: string;
-	borderColor?: "accent" | "border" | "borderAccent";
+	provider?: string;
+	model?: string;
+	borderColor?: ThemeColor;
 	borderStyle?: BorderStyle;
 }
 
 type PromptTheme = { fg(color: string, text: string): string };
 
+const COMPLETION_MARKER_TRAIL_RUNS = [6, 4, 2, 1] as const;
+
+/** Strip control and formatting characters (bidi overrides, zero-width joiners, etc.) from untrusted single-line text. */
+export function stripControlChars(text: string): string {
+	return text.replace(/[\p{Cc}\p{Cf}]/gu, "");
+}
+
+/** Assemble the completion-marker content: an optional icon, then the dim `word for elapsed (details)` summary. */
+export function buildCompletionMarkerContent(
+	theme: PromptTheme,
+	icon: string,
+	word: string,
+	elapsed: string,
+	details: string[],
+): string {
+	const tail = details.length ? ` (${details.join(" · ")})` : "";
+	return `${icon}${theme.fg("dim", `${icon ? " " : ""}${word} for ${elapsed}${tail}`)}`;
+}
+
+/** Build one decorated completion-marker line, clipped to the available width. */
+export function buildCompletionMarkerLine(
+	content: string,
+	width: number,
+	theme: PromptTheme,
+	borderStyle: DoneMarkerBorderStyle,
+	borderColor: SettingColor,
+): string {
+	const safeWidth = Math.max(0, Math.floor(width));
+	if (safeWidth === 0) return "";
+	if (borderStyle === "none") return truncateToWidth(content, safeWidth);
+
+	const g = BORDER_GLYPHS[borderStyle];
+	const border = (text: string) => theme.fg(borderColor, text);
+	const trail = ` ${COMPLETION_MARKER_TRAIL_RUNS.map(length => g.h.repeat(length)).join(" ")}`;
+	const line = `${border(`${g.bl}${g.h.repeat(2)} `)}${content}${border(trail)}`;
+	return visibleWidth(line) > safeWidth ? truncateToWidth(line, safeWidth) : line;
+}
+
 /** Build the rendered lines for a decorated user prompt. */
 export function buildPromptBoxLines(
 	content: string,
@@ -33,8 +78,10 @@ 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 borderStyle = isBorderStyle(options.borderStyle) ? options.borderStyle : "double";
+	const g = BORDER_GLYPHS[borderStyle];
+	const borderColor = isSettingColor(options.borderColor) ? options.borderColor : DEFAULT_SETTINGS.decorations.borderColor;
+	const border = (text: string) => theme.fg(borderColor, 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);
@@ -47,12 +94,27 @@ export function buildPromptBoxLines(
 			second: "2-digit",
 		});
 	const innerWidth = width - 2;
-	const icon = options.showIcon === false ? "" : (options.icon ?? "");
-	const title = icon ? `══ ${icon} ` : "";
-	const titleLength = visibleWidth(title);
+	const rawIcon = options.icon ?? "";
+	const icon = options.showIcon === false || typeof rawIcon !== "string"
+		? ""
+		: stripControlChars(rawIcon);
+	const provider = options.showProvider === false || typeof options.provider !== "string"
+		? ""
+		: stripControlChars(options.provider);
+	const model = options.showModel === false || typeof options.model !== "string"
+		? ""
+		: stripControlChars(options.model);
+	const combinedLabel = [provider, model].filter(Boolean).join("/");
+	// truncateToWidth injects reset codes when clipping; remove them before muted() styles the label.
+	const labelText = combinedLabel
+		? truncateToWidth(combinedLabel, Math.max(0, innerWidth - 3)).replace(/\x1b\[0m/g, "")
+		: "";
+	const titleLength = icon ? visibleWidth(`${g.h}${g.h} ${icon} `) : 0;
 	const timeLength = time ? time.length + 3 : 0; // time + right-side " ═"
 	const topFill = Math.max(0, innerWidth - titleLength - timeLength);
-	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 iconSeg = icon ? `${border(`${g.h}${g.h} `)}${label(icon)}${border(" ")}` : "";
+	const timeSeg = time ? `${border(" ")}${muted(time)}${border(` ${g.h}`)}` : "";
+	const topLine = border(g.tl) + iconSeg + border(g.h.repeat(topFill)) + timeSeg + border(g.tr);
 	const lines = [visibleWidth(topLine) > width ? truncateToWidth(topLine, width) : topLine];
 
 	if (content) {
@@ -65,13 +127,15 @@ export function buildPromptBoxLines(
 		}
 	}
 
-	const bottomLine = `${border(g.bl)}${border(g.h.repeat(innerWidth))}${border(g.br)}`;
+	const labelLength = labelText ? visibleWidth(labelText) + 3 : 0; // label + right-side " ═"
+	const labelSeg = labelText ? `${border(" ")}${muted(labelText)}${border(` ${g.h}`)}` : "";
+	const bottomLine = `${border(g.bl)}${border(g.h.repeat(Math.max(0, innerWidth - labelLength)))}${labelSeg}${border(g.br)}`;
 	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 content = typeof message.content === "string" ? message.content.replace(/(?![\n\t])[\p{Cc}\p{Cf}]/gu, "") : "";
 	const details = (message.details ?? {}) as PromptBoxDetails;
 	const linesByWidth = new Map<number, string[]>();
 	return {