@underactive/pi-topping-statusline 0.2.7 → 0.3.0

package/src/menu.ts

@@ -1,676 +0,0 @@
-/**
- * menu.ts
- *
- * A reusable, dependency-light box-drawing toggle-menu component for Pi
- * extensions, built on top of `@earendil-works/pi-tui`'s `Component`
- * contract and `ctx.ui.custom()` overlay API. Adapted from pi-topping's
- * menu.ts, minus its reorder rows, plus a preview width parameter.
- *
- * 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.:
- *
- *   ╔═[ Settings ]═════════════════════════════════════╗
- *   ╟─ Preview ────────────────────────────────────────╢
- *   ║                                                  ║
- *   ║ ╭── π ⬢ model ───────────────────── session ──╮  ║
- *   ║                                                  ║
- *   ╟─ Global ─────────────────────────────────────────╢
- *   ║  > [■] Transparent Segments                ON    ║
- *   ║    Separator                ‹ powerline-thin ›   ║
- *   ║                                                  ║
- *   ╟──────────────────────────────────────────────────╢
- *   ║  ↑↓ move  ␣ toggle  ⏎ apply  esc cancel          ║
- *   ╚══════════════════════════════════════════[ 1/2 ]═╝
- *
- * Intended to be reused by any extension that needs a simple modal toggle
- * menu; it has no dependency on this extension's own settings shape.
- */
-
-import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
-import {
-	type Component,
-	decodeKittyPrintable,
-	Key,
-	matchesKey,
-	truncateToWidth,
-	type TUI,
-	visibleWidth,
-} from "@earendil-works/pi-tui";
-
-export type MenuValue = boolean | string;
-
-/** Lines to display and an optional delay before the preview should refresh. */
-export interface PreviewResult {
-	lines: string[];
-	nextRefreshInMs?: number;
-}
-
-export interface MenuItem {
-	id: string;
-	label: string;
-	value: MenuValue;
-	/** Values cycled with left/right arrows. Omit for a boolean space-toggle. */
-	cycleValues?: readonly string[];
-	/** ID of the boolean value that gates cycling; space toggles it. */
-	cycleEnabledBy?: string;
-	/** Initial enabled state when `cycleEnabledBy` is set (default true). */
-	cycleEnabled?: boolean;
-	/** Value snapped to when the gating checkbox is unchecked. */
-	cycleDisabledValue?: string;
-	/** Free-text row: Enter opens an inline editor on the row itself. */
-	text?: boolean;
-	/** Dimmed stand-in shown while a text row's value is empty. */
-	placeholder?: string;
-	/** Runs `MenuConfig.onAction` on Enter or space instead of holding a value. */
-	action?: boolean;
-}
-
-export interface MenuSection {
-	title: string;
-	items: MenuItem[];
-}
-
-export interface MenuConfig {
-	title: string;
-	sections: MenuSection[];
-	hints?: string[];
-	/**
-	 * Optional preview renderer, shown in its own "Preview" section above the
-	 * toggle sections. Called on every render with the menu's current (possibly
-	 * toggled but not-yet-applied) values, the number of milliseconds elapsed
-	 * since the menu opened, the focused item id, and the box's inner width in
-	 * cells. Lines may contain ANSI styling and are truncated/padded to fit
-	 * automatically.
-	 *
-	 * Return `string[]` for legacy interval-based animation (see
-	 * `previewIntervalMs`), or a `PreviewResult` to declare the next refresh.
-	 * Omitting `nextRefreshInMs` from a `PreviewResult` makes the preview static.
-	 */
-	preview?: (
-		values: Record<string, MenuValue>,
-		elapsedMs: number,
-		activeItemId: string | undefined,
-		innerWidth: number,
-	) => string[] | PreviewResult;
-	/** Fallback delay in ms for legacy `string[]` previews. Default 50. */
-	previewIntervalMs?: number;
-	/**
-	 * Invoked when an action row fires, with the menu's current values. Return
-	 * fresh sections to rebuild the menu around them (adding or removing rows);
-	 * return undefined to leave the rows as they are. Values belonging to rows
-	 * that survive the rebuild are preserved.
-	 */
-	onAction?: (id: string, values: Record<string, MenuValue>) => MenuSection[] | undefined;
-}
-
-export interface MenuResult<T> {
-	applied: boolean;
-	values: T;
-}
-
-const DEFAULT_HINTS = ["\u2191\u2193 move", "\u2423 toggle", "\u23ce apply", "esc cancel"];
-const EDIT_HINTS = ["type to edit", "\u232b delete", "\u23ce commit", "esc discard"];
-const OVERLAY_WIDTH = "90%";
-/** Width of the "  <marker> " prefix shared by rows without a checkbox. */
-const PLAIN_ROW_PREFIX_LEN = 5;
-/** Width of the "  <marker> [■] " prefix shared by checkbox rows. */
-const CHECKBOX_ROW_PREFIX_LEN = 8;
-
-interface FlatItem {
-	item: MenuItem;
-	sectionIndex: number;
-}
-
-function flattenSections(sections: MenuSection[]): FlatItem[] {
-	const flat: FlatItem[] = [];
-	for (const [sectionIndex, section] of sections.entries()) {
-		for (const item of section.items) {
-			flat.push({ item, sectionIndex });
-		}
-	}
-	return flat;
-}
-
-function buildInitialValues(config: MenuConfig): Record<string, MenuValue> {
-	const values: Record<string, MenuValue> = {};
-	for (const section of config.sections) {
-		for (const item of section.items) {
-			if (item.action) continue;
-			values[item.id] = item.value;
-			if (item.cycleEnabledBy) values[item.cycleEnabledBy] = item.cycleEnabled ?? true;
-		}
-	}
-	return values;
-}
-
-/** Internal Component implementing the box-drawing toggle menu. */
-export class MenuComponent implements Component {
-	private readonly theme: Theme;
-	private readonly done: (result: MenuResult<Record<string, MenuValue>>) => void;
-	private readonly title: string;
-	// Sections and their flattened rows are rebuilt whenever an action row adds
-	// or removes entries, so neither can be readonly.
-	private sections: MenuSection[];
-	private readonly hints: string[];
-	private readonly initialValues: Record<string, MenuValue>;
-	private values: Record<string, MenuValue>;
-	private flat: FlatItem[];
-	private readonly onAction: MenuConfig["onAction"];
-	/** Set while a text row is being edited; holds the uncommitted buffer. */
-	private editing: { id: string; buffer: string } | undefined;
-	private readonly previewFn: MenuConfig["preview"];
-	private readonly previewIntervalMs: number | undefined;
-	private readonly previewOrigin: number | undefined;
-	private readonly tui: TUI | undefined;
-	private previewTimer: ReturnType<typeof setTimeout> | undefined;
-	private previewNextRefreshMs: number | undefined;
-	private disposed = false;
-	private cursor = 0;
-	private scrollStart = 0;
-	private cachedWidth: number | undefined;
-	private cachedRows: number | undefined;
-	private cachedLines: string[] | undefined;
-
-	constructor(
-		config: MenuConfig,
-		theme: Theme,
-		done: (result: MenuResult<Record<string, MenuValue>>) => void,
-		tui?: TUI,
-	) {
-		this.theme = theme;
-		this.done = done;
-		this.title = config.title;
-		this.sections = config.sections;
-		this.hints = config.hints ?? DEFAULT_HINTS;
-		this.tui = tui;
-		this.onAction = config.onAction;
-		this.values = buildInitialValues(config);
-		this.flat = flattenSections(this.sections);
-		this.initialValues = { ...this.values };
-
-		this.previewFn = config.preview;
-		this.previewIntervalMs = config.previewIntervalMs;
-		if (this.previewFn) {
-			this.previewOrigin = Date.now();
-			if (tui) {
-				this.samplePreview(Math.max(0, Math.floor(tui.terminal.columns * 0.9) - 2));
-				this.schedulePreview();
-			}
-		}
-	}
-
-	/** Stops the preview animation timer, if any. Called automatically when the overlay closes. */
-	dispose(): void {
-		this.disposed = true;
-		if (this.previewTimer !== undefined) {
-			clearTimeout(this.previewTimer);
-			this.previewTimer = undefined;
-		}
-	}
-
-	handleInput(data: string): void {
-		if (this.editing) {
-			this.handleEditInput(data);
-			return;
-		}
-		if (this.flat.length === 0) {
-			if (matchesKey(data, Key.enter)) {
-				this.done({ applied: true, values: { ...this.values } });
-			} else if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
-				this.done({ applied: false, values: { ...this.initialValues } });
-			}
-			return;
-		}
-
-		// Map input to a normalized key name.
-		let mappedKey: string | undefined;
-		for (const k of [Key.up, Key.down, Key.left, Key.right, Key.space, Key.enter, Key.escape]) {
-			if (matchesKey(data, k)) {
-				mappedKey = k;
-				break;
-			}
-		}
-		if (!mappedKey && matchesKey(data, Key.ctrl("c"))) mappedKey = Key.escape;
-
-		const keyActions: Record<string, () => void> = {
-			[Key.up]: () => {
-				this.cursor = (this.cursor - 1 + this.flat.length) % this.flat.length;
-				this.invalidate();
-			},
-			[Key.down]: () => {
-				this.cursor = (this.cursor + 1) % this.flat.length;
-				this.invalidate();
-			},
-			[Key.left]: () => this.cycleCurrentValue(-1),
-			[Key.right]: () => this.cycleCurrentValue(1),
-			[Key.space]: () => {
-				const item = this.flat[this.cursor]!;
-				if (item.item.action) {
-					this.runAction(item.item.id);
-					return;
-				}
-				if (item.item.text) {
-					this.beginEditing(item);
-					return;
-				}
-				if (item.item.cycleValues && item.item.cycleEnabledBy) {
-					this.values[item.item.cycleEnabledBy] = !this.values[item.item.cycleEnabledBy] as boolean;
-					if (!this.values[item.item.cycleEnabledBy] && item.item.cycleDisabledValue !== undefined) {
-						this.values[item.item.id] = item.item.cycleDisabledValue;
-					}
-				} else if (!item.item.cycleValues) this.values[item.item.id] = !this.values[item.item.id] as boolean;
-				this.invalidate();
-			},
-			// Enter opens an editor or fires an action on those rows, so applying
-			// the whole menu stays available from any other row.
-			[Key.enter]: () => {
-				const item = this.flat[this.cursor]!;
-				if (item.item.action) this.runAction(item.item.id);
-				else if (item.item.text) this.beginEditing(item);
-				else this.done({ applied: true, values: { ...this.values } });
-			},
-			[Key.escape]: () => this.done({ applied: false, values: { ...this.initialValues } }),
-		};
-
-		const handler = mappedKey ? keyActions[mappedKey] : undefined;
-		if (handler) handler();
-	}
-
-	invalidate(): void {
-		this.cachedWidth = undefined;
-		this.cachedRows = undefined;
-		this.cachedLines = undefined;
-	}
-
-	private beginEditing(item: FlatItem): void {
-		this.editing = { id: item.item.id, buffer: String(this.values[item.item.id] ?? "") };
-		this.invalidate();
-	}
-
-	private handleEditInput(data: string): void {
-		const editing = this.editing!;
-		if (matchesKey(data, Key.enter)) {
-			this.values[editing.id] = editing.buffer;
-			this.editing = undefined;
-			this.invalidate();
-			return;
-		}
-		if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
-			this.editing = undefined;
-			this.invalidate();
-			return;
-		}
-		if (matchesKey(data, Key.backspace)) {
-			editing.buffer = [...editing.buffer].slice(0, -1).join("");
-			this.invalidate();
-			return;
-		}
-		// Mirrors pi-tui's editor: prefer the terminal protocol's decoded key and
-		// fall back to raw data, so escape sequences never leak into the buffer.
-		const printable = decodeKittyPrintable(data) ?? (data.charCodeAt(0) >= 32 ? data : undefined);
-		if (printable === undefined || printable.startsWith("\x1b")) return;
-		const clean = [...printable].filter(ch => {
-			const code = ch.codePointAt(0) ?? 0;
-			return code >= 32 && code !== 127;
-		});
-		if (clean.length === 0) return;
-		editing.buffer += clean.join("");
-		this.invalidate();
-	}
-
-	/** Run an action row's handler and rebuild around any sections it returns. */
-	private runAction(id: string): void {
-		const next = this.onAction?.(id, { ...this.values });
-		if (next) this.rebuild(next);
-		this.invalidate();
-	}
-
-	private rebuild(sections: MenuSection[]): void {
-		this.sections = sections;
-		this.flat = flattenSections(sections);
-		// Carry over values for rows that survived; drop the rest so a removed
-		// row cannot resurrect its value on the next apply.
-		const next: Record<string, MenuValue> = {};
-		for (const section of sections) {
-			for (const item of section.items) {
-				if (item.action) continue;
-				next[item.id] = this.values[item.id] ?? item.value;
-				if (item.cycleEnabledBy) {
-					next[item.cycleEnabledBy] = this.values[item.cycleEnabledBy] ?? item.cycleEnabled ?? true;
-				}
-			}
-		}
-		this.values = next;
-		this.editing = undefined;
-		this.cursor = Math.max(0, Math.min(this.cursor, this.flat.length - 1));
-		this.scrollStart = Math.max(0, Math.min(this.scrollStart, Math.max(0, this.flat.length - 1)));
-	}
-
-	render(width: number): string[] {
-		const rows = this.availableRows();
-		if (this.cachedWidth === width && this.cachedRows === rows && this.cachedLines) return this.cachedLines;
-		const lines = this.buildLines(width, rows);
-		this.cachedWidth = width;
-		this.cachedRows = rows;
-		this.cachedLines = lines;
-		this.schedulePreview();
-		return lines;
-	}
-
-	private cycleCurrentValue(delta: number): void {
-		const item = this.flat[this.cursor]!;
-		if (!item.item.cycleValues?.length || (item.item.cycleEnabledBy && !this.values[item.item.cycleEnabledBy])) return;
-		const current = item.item.cycleValues.indexOf(this.values[item.item.id] as string);
-		const index = (current + delta + item.item.cycleValues.length) % item.item.cycleValues.length;
-		this.values[item.item.id] = item.item.cycleValues[index]!;
-		this.invalidate();
-	}
-
-	private samplePreview(innerWidth: number): string[] | undefined {
-		if (!this.previewFn) return undefined;
-
-		const result = this.previewFn(
-			this.values,
-			this.previewOrigin !== undefined ? Date.now() - this.previewOrigin : 0,
-			this.flat[this.cursor]?.item.id,
-			innerWidth,
-		);
-		if (Array.isArray(result)) {
-			this.previewNextRefreshMs = this.previewIntervalMs ?? 50;
-			return result;
-		}
-
-		this.previewNextRefreshMs = result.nextRefreshInMs;
-		return result.lines;
-	}
-
-	private schedulePreview(): void {
-		if (this.previewTimer !== undefined) {
-			clearTimeout(this.previewTimer);
-			this.previewTimer = undefined;
-		}
-
-		const nextRefreshInMs = this.previewNextRefreshMs;
-		if (this.disposed || !this.tui || nextRefreshInMs === undefined || nextRefreshInMs <= 0) return;
-
-		this.previewTimer = setTimeout(() => {
-			this.invalidate();
-			this.tui?.requestRender();
-		}, nextRefreshInMs);
-	}
-
-	private buildPreviewBlock(previewLines: string[] | undefined, innerWidth: number): string[] {
-		if (!previewLines?.length) return [];
-		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[] {
-		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. */
-	private buildToggleWindow(innerWidth: number, start: number, maxRows: number): { lines: string[]; end: number } {
-		const lines: string[] = [];
-		let currentSection = -1;
-		let end = start - 1;
-		for (let index = start; index < this.flat.length && lines.length < maxRows; index++) {
-			const flat = this.flat[index]!;
-			if (flat.sectionIndex !== currentSection) {
-				const remaining = maxRows - lines.length;
-				if (lines.length > 0 && remaining >= 3) lines.push(this.renderBlankRow(innerWidth));
-				if (maxRows - lines.length >= 2) {
-					lines.push(this.renderSectionDivider(this.sections[flat.sectionIndex]!.title, innerWidth));
-				}
-				currentSection = flat.sectionIndex;
-			}
-			if (lines.length >= maxRows) break;
-			lines.push(this.renderItemRow(flat.item, index === this.cursor, innerWidth));
-			end = index;
-		}
-		if (end === this.flat.length - 1 && lines.length < maxRows) lines.push(this.renderBlankRow(innerWidth));
-		return { lines, end };
-	}
-
-	/** Render the scrolling settings body while keeping the selected item in view. */
-	private buildResponsiveToggleSections(innerWidth: number, maxRows: number, naturalBody: string[]): string[] {
-		const allLines = naturalBody;
-		if (allLines.length <= maxRows) {
-			this.scrollStart = 0;
-			return allLines;
-		}
-		if (maxRows <= 0) return [];
-		if (maxRows === 1) return this.buildToggleWindow(innerWidth, this.cursor, 1).lines;
-
-		const contentRows = maxRows - 1; // Reserve one fixed row for scroll status.
-		if (this.cursor < this.scrollStart) this.scrollStart = this.cursor;
-		this.scrollStart = Math.max(0, Math.min(this.scrollStart, this.flat.length - 1));
-
-		let window = this.buildToggleWindow(innerWidth, this.scrollStart, contentRows);
-		while (window.end < this.cursor && this.scrollStart < this.cursor) {
-			this.scrollStart++;
-			window = this.buildToggleWindow(innerWidth, this.scrollStart, contentRows);
-		}
-		// Backfill from above whenever more context fits without hiding the cursor.
-		while (this.scrollStart > 0) {
-			const candidate = this.buildToggleWindow(innerWidth, this.scrollStart - 1, contentRows);
-			if (candidate.end < this.cursor) break;
-			this.scrollStart--;
-			window = candidate;
-		}
-
-		const rows = [...window.lines];
-		while (rows.length < contentRows) rows.push(this.renderBlankRow(innerWidth));
-		rows.push(this.renderScrollStatus(this.scrollStart > 0, window.end < this.flat.length - 1, innerWidth));
-		return rows;
-	}
-
-	private buildFooter(innerWidth: number): string[] {
-		return [this.renderSeparator(innerWidth), this.renderHintsRow(innerWidth), this.renderBottomBorder(innerWidth)];
-	}
-
-	private availableRows(): number | undefined {
-		const rows = this.tui?.terminal.rows;
-		return rows !== undefined && rows > 0 ? rows : undefined;
-	}
-
-	private buildLines(maxWidth: number, maxRows?: number): string[] {
-		const boxWidth = Math.max(0, maxWidth);
-		const innerWidth = Math.max(0, boxWidth - 2);
-		const previewLines = this.samplePreview(innerWidth);
-		const header = [this.renderTopBorder(innerWidth), ...this.buildPreviewBlock(previewLines, innerWidth)];
-		const footer = this.buildFooter(innerWidth);
-		const naturalBody = this.buildToggleSections(innerWidth);
-		const naturalHeight = header.length + naturalBody.length + footer.length;
-		if (maxRows === undefined || naturalHeight <= maxRows) {
-			return [...header, ...naturalBody, ...footer].map(line => truncateToWidth(line, boxWidth, ""));
-		}
-
-		const bodyRows = Math.max(0, maxRows - header.length - footer.length);
-		const body = this.buildResponsiveToggleSections(innerWidth, bodyRows, naturalBody);
-		return [...header, ...body, ...footer].slice(0, maxRows).map(line => truncateToWidth(line, boxWidth, ""));
-	}
-
-	private wrap(left: string, content: string, right: string): string {
-		const th = this.theme;
-		return th.fg("border", left) + content + th.fg("border", right);
-	}
-
-	/** Render a filled horizontal line with optional title. */
-	private renderFilledLine(
-		left: string,
-		right: string,
-		fillChar: string,
-		innerWidth: number,
-		title?: string,
-		titlePrefix?: string,
-		titleSuffix?: string,
-		boldTitle?: boolean,
-	): string {
-		const th = this.theme;
-		if (!title) {
-			const content = th.fg("border", fillChar.repeat(innerWidth));
-			return this.wrap(left, content, right);
-		}
-		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 styledTitle = boldTitle ? th.bold(shownTitle) : shownTitle;
-		const fillCount = Math.max(0, innerWidth - visibleWidth(prefix + shownTitle + suffix));
-		const titleContent = th.fg("text", styledTitle);
-		const content = `${th.fg("border", prefix)}${titleContent}${th.fg("border", suffix + fillChar.repeat(fillCount))}`;
-		return this.wrap(left, content, right);
-	}
-
-	private renderTopBorder(innerWidth: number): string {
-		return this.renderFilledLine("\u2554", "\u2557", "\u2550", innerWidth, this.title, "\u2550[ ", " ]", true);
-	}
-
-	private renderBottomBorder(innerWidth: number): string {
-		const counter = `[ ${this.cursor + 1}/${this.flat.length} ]`;
-		const fillCount = Math.max(0, innerWidth - counter.length);
-		const content = `${"\u2550".repeat(fillCount)}${counter}`;
-		return this.wrap("\u255a", this.theme.fg("border", content), "\u255d");
-	}
-
-	private renderSectionDivider(title: string, innerWidth: number): string {
-		return this.renderFilledLine("\u255f", "\u2562", "\u2500", innerWidth, title, "\u2500 ", " \u2500");
-	}
-
-	private renderSeparator(innerWidth: number): string {
-		return this.renderFilledLine("\u255f", "\u2562", "\u2500", innerWidth);
-	}
-
-	private renderBlankRow(innerWidth: number): string {
-		return this.wrap("\u2551", " ".repeat(innerWidth), "\u2551");
-	}
-
-	/** Pads/truncates an already-styled content string to exactly `innerWidth` and wraps it in border chars. */
-	private renderContentRow(content: string, innerWidth: number): string {
-		const shown = visibleWidth(content) > innerWidth ? truncateToWidth(content, innerWidth) : content;
-		const pad = Math.max(0, innerWidth - visibleWidth(shown));
-		return this.wrap("\u2551", `${shown}${" ".repeat(pad)}`, "\u2551");
-	}
-
-	private renderHintsRow(innerWidth: number): string {
-		const hints = this.editing ? EDIT_HINTS : this.hints;
-		const plain = `  ${hints.join("  ")}`;
-		return this.renderContentRow(this.theme.fg("dim", plain), innerWidth);
-	}
-
-	private renderScrollStatus(hasAbove: boolean, hasBelow: boolean, innerWidth: number): string {
-		const parts = [hasAbove ? "↑ more above" : "", hasBelow ? "↓ more below" : ""].filter(Boolean);
-		return this.renderContentRow(this.theme.fg("dim", `  ${parts.join("    ")}`), innerWidth);
-	}
-
-	private renderItemRow(item: MenuItem, selected: boolean, innerWidth: number): string {
-		const th = this.theme;
-		const value = this.values[item.id]!;
-		const marker = selected ? ">" : " ";
-		const markerColored = selected ? th.fg("accent", marker) : marker;
-		const rowBackground = (content: string) =>
-			selected ? th.bg("selectedBg", content.replaceAll("\x1b[0m", `\x1b[0m${th.getBgAnsi("selectedBg")}`)) : content;
-
-		if (item.action) {
-			const label = truncateToWidth(item.label, Math.max(0, innerWidth - 5));
-			const leftPlain = `  ${marker} ${label}`;
-			const pad = Math.max(0, innerWidth - visibleWidth(leftPlain));
-			const content = `  ${markerColored} ${th.fg(selected ? "accent" : "muted", label)}${" ".repeat(pad)}`;
-			return this.wrap("\u2551", rowBackground(content), "\u2551");
-		}
-
-		if (item.text) {
-			const editing = this.editing?.id === item.id ? this.editing : undefined;
-			const raw = editing ? editing.buffer : String(value ?? "");
-			const labelWidth = Math.min(16, Math.max(0, innerWidth - PLAIN_ROW_PREFIX_LEN - 4));
-			const label = truncateToWidth(item.label, labelWidth).padEnd(labelWidth);
-			const fieldWidth = Math.max(0, innerWidth - PLAIN_ROW_PREFIX_LEN - labelWidth - 3);
-			// Keep the caret in view by showing the buffer's tail once it overflows.
-			const shownRaw =
-				editing && raw.length > fieldWidth - 1 ? raw.slice(raw.length - (fieldWidth - 1)) : raw;
-			const empty = shownRaw.length === 0;
-			const fieldText = truncateToWidth(empty ? (item.placeholder ?? "") : shownRaw, fieldWidth);
-			const caret = editing ? "\u2588" : "";
-			const fieldStyled = empty
-				? th.fg("muted", fieldText)
-				: th.fg(editing ? "accent" : "text", fieldText);
-			const leftPlain = `  ${marker} ${label} ${fieldText}${caret}`;
-			const pad = Math.max(0, innerWidth - visibleWidth(leftPlain) - 1);
-			const content = `  ${markerColored} ${th.fg("dim", label)} ${fieldStyled}${editing ? th.fg("accent", caret) : ""}${" ".repeat(pad)} `;
-			return this.wrap("\u2551", rowBackground(content), "\u2551");
-		}
-
-		if (item.cycleValues) {
-			const stateWord = `‹ ${value} ›`;
-			// Ungated cycle rows carry no checkbox; gated ones keep it for the space toggle.
-			if (!item.cycleEnabledBy) {
-				const maxLabelLen = Math.max(0, innerWidth - PLAIN_ROW_PREFIX_LEN - visibleWidth(stateWord) - 1);
-				const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
-				const leftPlain = `  ${marker} ${label}`;
-				const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
-				const content = `  ${markerColored} ${th.fg("text", label)}${" ".repeat(gap)}${th.fg("accent", stateWord)}  `;
-				return this.wrap("\u2551", rowBackground(content), "\u2551");
-			}
-			const enabled = this.values[item.cycleEnabledBy] as boolean;
-			const maxLabelLen = Math.max(0, innerWidth - CHECKBOX_ROW_PREFIX_LEN - visibleWidth(stateWord) - 1);
-			const label = item.label.length > 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", rowBackground(content), "\u2551");
-		}
-
-		const enabled = value as boolean;
-		const box = enabled ? "\u25a0" : " ";
-		const stateWord = enabled ? "ON" : "OFF";
-		const rightPlain = `${stateWord}  `;
-		const maxLabelLen = Math.max(0, innerWidth - CHECKBOX_ROW_PREFIX_LEN - rightPlain.length - 1);
-		const label = item.label.length > 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", rowBackground(content), "\u2551");
-	}
-}
-
-/**
- * Show a modal box-drawing toggle menu and resolve once the user applies
- * (Enter) or cancels (Escape / Ctrl+C) it.
- *
- * Requires TUI mode; in any other mode this resolves immediately with
- * `applied: false` and the menu's initial values, doing nothing visible.
- */
-export async function showMenu<T extends Record<string, MenuValue>>(
-	ctx: ExtensionCommandContext,
-	config: MenuConfig,
-): Promise<MenuResult<T>> {
-	const initialValues = buildInitialValues(config) as T;
-
-	if (ctx.mode !== "tui") {
-		return { applied: false, values: initialValues };
-	}
-
-	return ctx.ui.custom<MenuResult<T>>(
-		(tui, theme, _keybindings, done) =>
-			new MenuComponent(config, theme, done as (result: MenuResult<Record<string, MenuValue>>) => void, tui),
-		{ overlay: true, overlayOptions: { width: OVERLAY_WIDTH, maxHeight: "100%" } },
-	);
-}