@underactive/pi-topping 0.3.1 → 0.5.0

package/src/menu.ts

@@ -5,17 +5,17 @@
  * 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 ─────────────────────────────────────╢
+ *   ╟─ Preview ────────────────────────────────────╢
  *   ║                                                  ║
- *   ║ ⠋ Cerebrating… ⣤⣤⣤⣤ (0m 03s · ↓ 84 tokens)     ║
+ *   ║ ⠋ Cerebrating… ⣤⣤⣤⣤  28 tok/s · 3s · ↓ 84 tokens ║
  *   ║                                                  ║
  *   ╟─ Decorations ───────────────────────────────────╢
- *   ║  ▸ [■] Animated spinner                    ON   ║
+ *   ║  ❯ [■] Animated spinner                    ON   ║
  *   ║    [ ] "Working..." text shimmer           OFF   ║
  *   ║                                                  ║
  *   ╟──────────────────────────────────────────────────╢
@@ -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 {
@@ -83,6 +90,7 @@ export interface MenuResult<T> {
 
 const DEFAULT_HINTS = ["\u2191\u2193 move", "\u2423 toggle", "\u23ce apply", "esc cancel"];
 const MAX_WIDTH = 76;
+const ROW_PREFIX_WIDTH = 8; // "  " + marker + " " + "[" + box + "]" + " "
 
 interface FlatItem {
 	id: string;
@@ -90,18 +98,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 +160,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 +207,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 +251,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 +323,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. */
@@ -392,7 +443,7 @@ export class MenuComponent implements Component {
 		const prefix = titlePrefix ?? "";
 		const suffix = titleSuffix ?? "";
 		const maxTitleLen = Math.max(0, innerWidth - prefix.length - suffix.length);
-		const shownTitle = title.length > maxTitleLen ? truncateToWidth(title, maxTitleLen) : title;
+		const shownTitle = visibleWidth(title) > maxTitleLen ? truncateToWidth(title, maxTitleLen) : title;
 		const styledTitle = boldTitle ? th.bold(shownTitle) : shownTitle;
 		const fillCount = Math.max(0, innerWidth - visibleWidth(prefix + shownTitle + suffix));
 		const titleContent = th.fg("text", styledTitle);
@@ -443,32 +494,42 @@ export class MenuComponent implements Component {
 	private renderItemRow(item: MenuItem, selected: boolean, innerWidth: number): string {
 		const th = this.theme;
 		const value = this.values[item.id]!;
-		const marker = selected ? "\u25b8" : " ";
+		const marker = selected ? "\u276f" : " ";
 		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 maxLabelLen = Math.max(0, innerWidth - ROW_PREFIX_WIDTH - visibleWidth(rightPlain) - 1);
+			const label = visibleWidth(item.label) > 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", selected ? th.bg("selectedBg", content) : content, "\u2551");
+		}
+
 		if (item.cycleValues) {
 			const enabled = item.cycleEnabledBy ? this.values[item.cycleEnabledBy] as boolean : true;
 			const stateWord = `‹ ${value} ›`;
-			const fixedLeftLen = 8;
-			const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - visibleWidth(stateWord) - 1);
-			const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
+			const maxLabelLen = Math.max(0, innerWidth - ROW_PREFIX_WIDTH - visibleWidth(stateWord) - 1);
+			const label = visibleWidth(item.label) > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 			const leftPlain = `  ${marker} [${enabled ? "■" : " "}] ${label}`;
 			const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
 			const content = `  ${markerColored} [${enabled ? th.fg("success", "■") : th.fg("muted", " ")}] ${th.fg("text", label)}${" ".repeat(gap)}${enabled ? th.fg("accent", stateWord) : th.fg("muted", stateWord)}  `;
-			return this.wrap("\u2551", content, "\u2551");
+			return this.wrap("\u2551", selected ? th.bg("selectedBg", content) : content, "\u2551");
 		}
 
 		const enabled = value as boolean;
 		const box = enabled ? "\u25a0" : " ";
 		const stateWord = enabled ? "ON" : "OFF";
 		const rightPlain = `${stateWord}  `;
-		const fixedLeftLen = 8; // "  " + marker(1) + " " + "[" + box(1) + "]" + " "
-		const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - rightPlain.length - 1);
-		const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
+		const maxLabelLen = Math.max(0, innerWidth - ROW_PREFIX_WIDTH - visibleWidth(rightPlain) - 1);
+		const label = visibleWidth(item.label) > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 		const leftPlain = `  ${marker} [${box}] ${label}`;
 		const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(rightPlain));
 		const content = `  ${markerColored} [${enabled ? th.fg("success", box) : th.fg("muted", box)}] ${th.fg("text", label)}${" ".repeat(gap)}${enabled ? th.fg("success", stateWord) : th.fg("muted", stateWord)}  `;
-		return this.wrap("\u2551", content, "\u2551");
+		return this.wrap("\u2551", selected ? th.bg("selectedBg", content) : content, "\u2551");
 	}
 }
 

package/src/preview.ts

@@ -1,61 +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_FRAMES } from "./format.ts";
-import { buildPromptBoxLines } from "./prompt-decorator.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", "promptIcon", "promptTimestamp"]);
-const MARKER_IDS = new Set(["doneMarker", "doneMarkerIcon", "randomizeDoneMarker", "doneMarkerTokens"]);
+// 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 / 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, 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(" ");
+		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);
+		}
+		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,
+			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 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 borderStyle = values.borderStyle;
+		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",
+			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;
-		const tail = (values.doneMarkerTokens ? " (↓ 949 tokens)" : "") as string;
-		return { lines: ["", `${values.doneMarkerIcon ? th.fg("text", icon) : ""}${th.fg("dim", `${word} for 2m 52s${tail}`)}`, ""] };
+		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 === 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,18 +1,73 @@
-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";
 
+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: "┃" },
+};
+
+/**
+ * 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,
@@ -23,7 +78,10 @@ export function buildPromptBoxLines(
 ): string[] {
 	if (width < 10) return [];
 
-	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);
@@ -36,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("╔")}${icon ? `${border("══ ")}${label(icon)}${border(" ")}` : ""}${border("═".repeat(topFill))}${time ? `${border(" ")}${muted(time)}${border(" ═")}` : ""}${border("╗")}`;
+	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) {
@@ -49,18 +122,20 @@ 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 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 {