@underactive/pi-topping 0.11.1 → 0.13.0

package/src/preview.ts

@@ -1,7 +1,8 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { DEFAULT_PREVIEW_WIDTH, type PreviewResult } from "./menu.ts";
-import { ActivityMeter, METER_UPPER_BOUND_TPS_MAX, METER_UPPER_BOUND_TPS_MIN, rateToLevel } from "./activity-meter.ts";
-import { DEFAULT_WORKING_WORD, dimAttribute, ELAPSED_INTERVAL_MS, formatTokenRate, getThinkingLevelColorizer, METER_INTERVAL_MS, SHIMMER_INTERVAL_MS, SPINNER_FRAME_MS } from "./format.ts";
+import type { MenuValue, PreviewSlot } from "@underactive/pi-topping-primitives/menu";
+import { ActivityMeter, METER_UPPER_BOUND_TPS_MAX, METER_UPPER_BOUND_TPS_MIN, rateToLevel } from "@underactive/pi-topping-primitives/activity";
+import { dimAttribute, renderMeter, thinkingLevelColorizer } from "@underactive/pi-topping-primitives/activity-tui";
+import { DEFAULT_WORKING_WORD, ELAPSED_INTERVAL_MS, formatTokenRate, METER_INTERVAL_MS, SHIMMER_INTERVAL_MS, SPINNER_FRAME_MS } from "./format.ts";
 import { buildLoaderMessage } from "./loader-message.ts";
 import { getResponseModelColorizer } from "./nvidia-green.ts";
 import { isOutputStyleId, OUTPUT_STYLES } from "./output-style.ts";
@@ -12,12 +13,24 @@ import { isWordPackEnabled, selectWorkingTextSelection, WORD_PACK_MENU_PREFIX, w
 // Simulated load for the menu preview: a 2.4s cosine wave peaking at 46 tps for the meter,
 // flat 28 tps for the token readouts.
 const METER_PERIOD_MS = 2400, METER_PEAK_RATE = 46, TOKEN_RATE_PER_SEC = 28;
+/** Width the preview assumes when rendered outside a menu (tests and probes). */
+export const DEFAULT_PREVIEW_WIDTH = 76;
+type Values = Record<string, MenuValue>;
+type PreviewState = { elapsedMs: number; activeItemId: string | undefined; width: number };
+export interface PreviewResult {
+	lines: string[];
+	nextRefreshInMs?: number;
+}
+/** The shared menu adds no margin; the preview indents every line by one space itself. */
+function indented(result: PreviewResult): PreviewResult {
+	return { ...result, lines: result.lines.map(line => ` ${line}`) };
+}
 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 {
+export class PreviewRenderer implements PreviewSlot<Values> {
 	// Preserve constructor-time randomness so rendering never changes the preview phrase.
 	readonly #poolFraction = Math.random();
 	readonly #packs: readonly WordPack[];
@@ -30,7 +43,11 @@ export class PreviewRenderer {
 		this.#ctx = ctx;
 		this.#packs = packs;
 	}
-	render(values: Record<string, boolean | string>, elapsedMs: number, activeItemId?: string, width: number = DEFAULT_PREVIEW_WIDTH): PreviewResult {
+	render(values: Values, state: PreviewState = { elapsedMs: 0, activeItemId: undefined, width: DEFAULT_PREVIEW_WIDTH }): PreviewResult {
+		return indented(this.renderContent(values, state.elapsedMs, state.activeItemId, Math.max(0, state.width - 1)));
+	}
+	/** The lines before the one-space indent; `width` is the budget those lines may fill. */
+	private renderContent(values: Values, elapsedMs: number, activeItemId: string | undefined, width: number): PreviewResult {
 		if (PROMPT_IDS.has(activeItemId ?? "")) return this.promptPreview(values, width);
 		if (MARKER_IDS.has(activeItemId ?? "")) return this.markerPreview(values, width);
 		if (activeItemId === "useNerdFont") return { lines: ["", `Icon preview: ${values.useNerdFont ? "" : "π"}`, ""] };
@@ -60,7 +77,7 @@ export class PreviewRenderer {
 			: "";
 		return { lines: ["", this.loaderPreview(values, elapsedMs), help], nextRefreshInMs };
 	}
-	private loaderPreview(values: Record<string, boolean | string>, elapsedMs: number): string {
+	private loaderPreview(values: Values, elapsedMs: number): string {
 		this.#meter.setDirection(fromCycleDirection(values.meterDirection));
 		if (elapsedMs - this.#lastMeterUpdate >= METER_INTERVAL_MS) {
 			this.#meter.push(rateToLevel(meterRate(elapsedMs), fromCycleMeterUpperBound(values.meterUpperBoundTps)));
@@ -97,14 +114,14 @@ export class PreviewRenderer {
 			spinnerAtMs: values.animatedSpinner !== false ? elapsedMs : undefined,
 			word,
 			shimmerAtMs: elapsedMs,
-			renderMeter: (colorizer, dimmed) => this.#meter.render((level, char) => ActivityMeter.colorizeCell(level, char, theme, colorizer, dimmed)),
+			renderMeter: (colorizer, dimmed) => renderMeter(this.#meter, theme, colorizer, dimmed),
 			elapsedMs,
 			outputTokens: Math.max(0, Math.floor(elapsedMs / 1000 * TOKEN_RATE_PER_SEC)),
 			tokenRateText: formatTokenRate(TOKEN_RATE_PER_SEC),
 			responseModel: features.responseModel ? "test-model" : undefined,
 		});
 	}
-	private packValues(values: Record<string, boolean | string>): Record<string, boolean> {
+	private packValues(values: Values): Record<string, boolean> {
 		const enabled: Record<string, boolean> = {};
 		for (const pack of this.#packs) {
 			const value = values[`${WORD_PACK_MENU_PREFIX}${pack.id}`];
@@ -112,14 +129,14 @@ export class PreviewRenderer {
 		}
 		return enabled;
 	}
-	private packPreview(id: string, values: Record<string, boolean | string>): PreviewResult {
+	private packPreview(id: string, values: Values): PreviewResult {
 		const pack = this.#packs.find((candidate) => candidate.id === id);
 		if (!pack) return { lines: ["This word pack is unavailable."] };
 		const enabled = isWordPackEnabled(id, this.packValues(values));
 		const source = pack.bundled ? "Shipped example" : `Custom: ${wordPacksPath()}`;
 		return { lines: [`${pack.name}: ${enabled ? "enabled" : "disabled"}`, `${pack.words.length} phrases · ${source}`, ...(pack.description ? [pack.description] : [])] };
 	}
-	private promptPreview(values: Record<string, boolean | string>, width: number): PreviewResult {
+	private promptPreview(values: Values, width: number): PreviewResult {
 		if (values.decorateUserPrompt !== true) return { lines: ["User prompt decoration is disabled."] };
 
 		const borderColor = values.borderColor;
@@ -141,7 +158,7 @@ export class PreviewRenderer {
 			? { lines }
 			: { lines, nextRefreshInMs: 1_000 - (timestamp % 1_000) };
 	}
-	private markerPreview(values: Record<string, boolean | string>, width: number): PreviewResult {
+	private markerPreview(values: Values, width: number): PreviewResult {
 		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 ? "" : "π") : "";
@@ -153,7 +170,7 @@ export class PreviewRenderer {
 		let model = "";
 		if (values.doneMarkerModel === true) {
 			const color = isThinkingLevelColor(values.doneMarkerModelColor) ? values.doneMarkerModelColor : DEFAULT_SETTINGS.decorations.doneMarkerModelColor;
-			const modelColored = getThinkingLevelColorizer(theme, color, this.#ctx.thinkingLevel)("test-model");
+			const modelColored = thinkingLevelColorizer(theme, color, this.#ctx.thinkingLevel)("test-model");
 			model = values.doneMarkerModelDimmed === true ? dimAttribute(modelColored) : modelColored;
 		}
 		const content = buildCompletionMarkerContent(theme, icon, word, "2m 52s", details, model);

package/src/prompt-decorator.ts

@@ -1,17 +1,16 @@
-import type { MessageRenderer, ThemeColor } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import { getThinkingLevelColorizer, isThinkingLevel, type ThinkingLevel } from "./format.ts";
+import type { EntryRenderer, MessageRenderer, Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component } from "@earendil-works/pi-tui";
+import { thinkingLevelColorizer } from "@underactive/pi-topping-primitives/activity-tui";
+import { BOX_STYLES, type BoxGlyphs } from "@underactive/pi-topping-primitives/glyphs";
+import { isThinkingLevel, type ThinkingLevel } from "./format.ts";
 import { DEFAULT_SETTINGS, isBorderStyle, isPromptBorderColor, type BorderStyle, type DoneMarkerBorderColor, type DoneMarkerBorderStyle, type DoneMarkerStyle, type PromptBorderColor } from "./settings.ts";
 import { stripControlChars } from "./util.ts";
 
 export const PROMPT_BOX_TYPE = "pi-topping-prompt";
+export const PROMPT_BOX_ENTRY_TYPE = "pi-topping-prompt-entry";
 
-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: "┃" },
-};
+// Typed against this repo's BorderStyle, so a style added to settings.ts without a glyph set fails the typecheck.
+const BORDER_GLYPHS: Readonly<Record<BorderStyle, BoxGlyphs>> = BOX_STYLES;
 
 /**
  * False visibility options hide each corresponding part; present provider and
@@ -34,6 +33,11 @@ export interface PromptBoxDetails {
 	thinkingLevel?: ThinkingLevel;
 }
 
+export interface PromptBoxEntryData {
+	content: string;
+	details: PromptBoxDetails;
+}
+
 type PromptTheme = {
 	fg(color: string, text: string): string;
 	getThinkingBorderColor(level: ThinkingLevel): (text: string) => string;
@@ -73,12 +77,12 @@ export function buildCompletionMarkerLine(
 	if (borderStyle === "none") return truncateToWidth(content, safeWidth);
 
 	const g = BORDER_GLYPHS[borderStyle];
-	const border = getThinkingLevelColorizer(theme, borderColor, thinkingLevel);
-	const prefix = `${g.bl}${g.h.repeat(2)} `;
+	const border = thinkingLevelColorizer(theme, borderColor, thinkingLevel);
+	const prefix = `${g.bottomLeft}${g.horizontal.repeat(2)} `;
 
 	const suffix = markerStyle === "bookend"
-		? ` ${g.h.repeat(Math.max(0, safeWidth - visibleWidth(prefix) - visibleWidth(content) - 2))}${g.br}`
-		: ` ${COMPLETION_MARKER_TRAIL_RUNS.map(length => g.h.repeat(length)).join(" ")}`;
+		? ` ${g.horizontal.repeat(Math.max(0, safeWidth - visibleWidth(prefix) - visibleWidth(content) - 2))}${g.bottomRight}`
+		: ` ${COMPLETION_MARKER_TRAIL_RUNS.map(length => g.horizontal.repeat(length)).join(" ")}`;
 	const line = `${border(prefix)}${content}${border(suffix)}`;
 	return visibleWidth(line) > safeWidth ? truncateToWidth(line, safeWidth) : line;
 }
@@ -97,7 +101,7 @@ export function buildPromptBoxLines(
 	const g = BORDER_GLYPHS[borderStyle];
 	const borderColor = isPromptBorderColor(options.borderColor) ? options.borderColor : DEFAULT_SETTINGS.decorations.borderColor;
 	const thinkingLevel = isThinkingLevel(options.thinkingLevel) ? options.thinkingLevel : undefined;
-	const border = getThinkingLevelColorizer(theme, borderColor, thinkingLevel);
+	const border = thinkingLevelColorizer(theme, borderColor, thinkingLevel);
 	const iconColor = (text: string) => theme.fg("text", text);
 	const muted = (text: string) => theme.fg("dim", text);
 	const bodyText = (text: string) => theme.fg("customMessageText", text);
@@ -125,12 +129,12 @@ export function buildPromptBoxLines(
 	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 titleLength = icon ? visibleWidth(`${g.horizontal}${g.horizontal} ${icon} `) : 0;
 	const timeLength = time ? time.length + 3 : 0; // time + right-side " ═"
 	const topFill = Math.max(0, innerWidth - titleLength - timeLength);
-	const iconSeg = icon ? `${border(`${g.h}${g.h} `)}${iconColor(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 iconSeg = icon ? `${border(`${g.horizontal}${g.horizontal} `)}${iconColor(icon)}${border(" ")}` : "";
+	const timeSeg = time ? `${border(" ")}${muted(time)}${border(` ${g.horizontal}`)}` : "";
+	const topLine = border(g.topLeft) + iconSeg + border(g.horizontal.repeat(topFill)) + timeSeg + border(g.topRight);
 	const lines = [visibleWidth(topLine) > width ? truncateToWidth(topLine, width) : topLine];
 
 	if (content) {
@@ -138,28 +142,27 @@ 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(g.v)}${bodyText(` ${padded} `)}${border(g.v)}`;
+			const line = `${border(g.vertical)}${bodyText(` ${padded} `)}${border(g.vertical)}`;
 			lines.push(visibleWidth(line) > width ? truncateToWidth(line, width) : line);
 		}
 	}
 
 	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)}`;
+	const labelSeg = labelText ? `${border(" ")}${muted(labelText)}${border(` ${g.horizontal}`)}` : "";
+	const bottomLine = `${border(g.bottomLeft)}${border(g.horizontal.repeat(Math.max(0, innerWidth - labelLength)))}${labelSeg}${border(g.bottomRight)}`;
 	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.replace(/(?![\n\t])[\p{Cc}\p{Cf}]/gu, "") : "";
-	const details = (message.details ?? {}) as PromptBoxDetails;
+function createPromptBoxComponent(content: string, details: PromptBoxDetails, theme: Theme): Component {
+	const safeContent = content.replace(/(?![\n\t])[\p{Cc}\p{Cf}]/gu, "");
 	let cachedWidth: number | undefined;
 	let cachedLines: string[] | undefined;
 	return {
 		render(width: number): string[] {
 			if (cachedWidth !== width) {
 				cachedWidth = width;
-				cachedLines = buildPromptBoxLines(content, details.submittedAt, width, theme, details);
+				cachedLines = buildPromptBoxLines(safeContent, details.submittedAt, width, theme, details);
 			}
 			return cachedLines!;
 		},
@@ -168,4 +171,16 @@ export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _o
 			cachedLines = undefined;
 		},
 	};
+}
+
+export const promptBoxRenderer: MessageRenderer<PromptBoxDetails> = (message, _options, theme) => {
+	const content = typeof message.content === "string" ? message.content : "";
+	const details = (message.details ?? {}) as PromptBoxDetails;
+	return createPromptBoxComponent(content, details, theme);
+};
+
+export const promptBoxEntryRenderer: EntryRenderer<PromptBoxEntryData> = (entry, _options, theme) => {
+	const data = entry.data;
+	if (!data || typeof data.content !== "string") return undefined;
+	return createPromptBoxComponent(data.content, data.details ?? {}, theme);
 };