@oh-my-pi/pi-tui 18.2.4 → 18.2.6

package/src/apps/git/state.ts

@@ -0,0 +1,113 @@
+import type { DiffStreamProgress, DiffStreamResult } from "@oh-my-pi/pi-natives";
+
+/** Context lines retained around each exact streamed hunk. */
+export const DIFF_CONTEXT_LINES = 3;
+
+/** Change classification shown beside a file path. */
+export type ChangeKind = "modified" | "added" | "deleted" | "renamed" | "untracked" | "conflicted";
+/** Repository area represented by a file list. */
+export type ChangeArea = "unstaged" | "staged" | "commit";
+
+/** One changed path shown in the sidebar file lists. */
+export interface ChangedFile {
+	readonly path: string;
+	/** Pre-rename path for renames/copies. */
+	readonly origPath?: string;
+	readonly kind: ChangeKind;
+	readonly area: ChangeArea;
+	readonly additions?: number;
+	readonly deletions?: number;
+}
+
+/** HEAD commit metadata for the clean-tree sidebar view. */
+export interface HeadCommit {
+	readonly sha: string;
+	readonly shortSha: string;
+	readonly subject: string;
+	readonly body: string;
+	readonly authorName: string;
+	readonly authorEmail: string;
+	readonly authorDate: string;
+	readonly parents: readonly string[];
+	/** Changed paths once their numstats have loaded. */
+	readonly files: readonly ChangedFile[];
+	/** Whether {@link files} contains the complete commit file list. */
+	readonly filesLoaded: boolean;
+}
+
+/** A terminal-ready image decoded from one Git file side. */
+export interface ReviewImage {
+	readonly data: string;
+	readonly mimeType: "image/png";
+	readonly sourceMimeType: string;
+	readonly widthPx: number;
+	readonly heightPx: number;
+	readonly byteLength: number;
+	/** Stable content identity for terminal graphics placement. */
+	readonly key: string;
+	/** Git LFS object id when the preview came from local LFS storage. */
+	readonly lfsOid?: string;
+}
+
+/** One side of a media or binary Git change. */
+export type FileAssetSide =
+	| { readonly kind: "empty" }
+	| { readonly kind: "text"; readonly byteLength: number; readonly lfsOid?: string }
+	| { readonly kind: "image"; readonly image: ReviewImage }
+	| { readonly kind: "binary"; readonly byteLength?: number; readonly lfsOid?: string }
+	| { readonly kind: "tooLarge"; readonly byteLength?: number; readonly lfsOid?: string }
+	| { readonly kind: "lfsMissing"; readonly oid: string; readonly byteLength: number };
+
+/** Diffable UTF-8 content for both sides of a file. */
+export interface TextFileContents {
+	readonly kind: "text";
+	readonly oldText: string;
+	readonly newText: string;
+	readonly streamResult: DiffStreamResult;
+}
+
+/** Non-text sides rendered as previews or explicit placeholders. */
+export interface AssetFileContents {
+	readonly kind: "asset";
+	readonly old: FileAssetSide;
+	readonly new: FileAssetSide;
+}
+
+/** Loaded file content selected for text diffing or asset preview. */
+export type FileContents = TextFileContents | AssetFileContents;
+
+/** Newly completed lines and state emitted while a file pair streams. */
+export interface FileStreamUpdate {
+	readonly oldLineOffset: number;
+	readonly oldLines: readonly string[];
+	readonly newLineOffset: number;
+	readonly newLines: readonly string[];
+	readonly progress: DiffStreamProgress;
+}
+
+/** Repository values read by the sidebar. */
+export interface GitViewState {
+	readonly cwd: string;
+	readonly branch: string | null;
+	readonly clean: boolean;
+	readonly unstaged: readonly ChangedFile[];
+	readonly staged: readonly ChangedFile[];
+	readonly headCommit: HeadCommit | null;
+}
+
+/** Repository operations supplied by the command host. */
+export interface GitTuiModel extends GitViewState {
+	refresh(): Promise<boolean>;
+	loadChangeStats(): Promise<boolean>;
+	loadHeadFiles(): Promise<boolean>;
+	streamContents(
+		file: ChangedFile,
+		onProgress: (update: FileStreamUpdate) => void,
+		signal?: AbortSignal,
+	): Promise<FileContents>;
+	stage(files?: readonly ChangedFile[]): Promise<void>;
+	unstage(files?: readonly ChangedFile[]): Promise<void>;
+	discard(files: readonly ChangedFile[]): Promise<void>;
+	commit(message: string, options?: { amend?: boolean }): Promise<void>;
+	applyPatch(patchText: string, options?: { cached?: boolean; reverse?: boolean }): Promise<void>;
+}

package/src/apps/if-bench-board.ts

@@ -0,0 +1,324 @@
+/**
+ * Live board and scoreboard for `omp if-bench`.
+ *
+ * Interactive terminals get one repainted row per model — a turn ladder that
+ * fills as turns pass, the in-flight turn as a spinner cell, and the live
+ * position of the cat directive — plus a permanent verdict line per model as it
+ * settles. Non-TTY output falls back to one plain line per turn so scripted
+ * callers keep a parseable trace.
+ */
+
+import { replaceTabs, truncateToWidth } from "../utils";
+import { renderTableRow, type TableColumn } from "../components/table";
+import { formatDuration, formatNumber } from "@oh-my-pi/pi-utils";
+import { fgOrPlain, theme } from "../theme/theme";
+import { createLiveBoard, type LiveBoardOutput } from "../chrome/live-board";
+
+/** Failure category displayed in benchmark verdicts. */
+export type IfBenchFailure = "result" | "cat" | "result+cat" | "format" | "provider";
+
+/** Scored turn fields consumed by the live board and failure details. */
+export interface IfBenchTurnRecord {
+	turn: number;
+	cumulativeActions: number;
+	placement: string;
+	durationMs: number;
+	passed: boolean;
+	failure?: IfBenchFailure;
+	expected: string;
+	response: string;
+}
+
+/** Per-model scoreboard and verdict fields. */
+export interface IfBenchModelReport {
+	label: string;
+	turns: readonly IfBenchTurnRecord[];
+	turnsPassed: number;
+	actionsPassed: number;
+	failure?: { turn: number; kind: IfBenchFailure };
+	durationMs: number;
+	outputTokens: number;
+	cost: number;
+}
+
+/** Benchmark results consumed by the ranked scoreboard. */
+export interface IfBenchSummary {
+	maxTurns: number;
+	models: readonly IfBenchModelReport[];
+}
+
+/** Optional live-progress callbacks accepted by a benchmark runner. */
+export interface IfBenchObserver<
+	Turn extends IfBenchTurnRecord = IfBenchTurnRecord,
+	Report extends IfBenchModelReport = IfBenchModelReport,
+> {
+	modelStarted?(label: string): void;
+	turnStarted?(label: string, turn: number, actions: number): void;
+	turnFinished?(label: string, record: Turn): void;
+	modelFinished?(report: Report): void;
+}
+
+const LADDER_WIDTH = 28;
+const LABEL_WIDTH = 34;
+const DETAIL_WIDTH = 120;
+
+/** Human-readable verdict for each scored failure mode. */
+const FAILURE_TEXT: Record<IfBenchFailure, string> = {
+	result: "wrong array",
+	cat: "no cat sound",
+	"result+cat": "wrong array + no cat sound",
+	format: "no <result> block",
+	provider: "provider error",
+};
+
+/** Rendering surface for one `omp if-bench` run. */
+export interface IfBenchBoard extends IfBenchObserver {
+	readonly interactive: boolean;
+	/** Print a permanent line above the live rows (plain write when non-TTY). */
+	log(text: string): void;
+	/** Clear the live area and restore the cursor. Idempotent. */
+	close(): void;
+}
+
+interface RowState {
+	startedAt: number;
+	turn: number;
+	actions: number;
+	passed: number;
+	failed: boolean;
+	placement: string;
+	lastDurationMs: number;
+}
+
+/** Static run parameters shown in the board header. */
+export interface IfBenchBoardMeta {
+	maxTurns: number;
+	arrayLength: number;
+	nyaMax: number;
+}
+
+/**
+ * Create the if-bench board bound to `output`.
+ *
+ * `errors` receives non-TTY failure lines so a piped stdout stays a clean
+ * turn-by-turn trace.
+ */
+export function createIfBenchBoard(
+	meta: IfBenchBoardMeta,
+	output: LiveBoardOutput = process.stdout,
+	errors: LiveBoardOutput = process.stderr,
+): IfBenchBoard {
+	const rows = new Map<string, RowState>();
+	const startedAt = Date.now();
+	const board = createLiveBoard(spinner => renderLive(meta, rows, spinner, startedAt), output);
+
+	return {
+		interactive: board.interactive,
+		log: board.log,
+		modelStarted(label) {
+			rows.set(label, {
+				startedAt: Date.now(),
+				turn: 0,
+				actions: 0,
+				passed: 0,
+				failed: false,
+				placement: "",
+				lastDurationMs: 0,
+			});
+			board.repaint();
+		},
+		turnStarted(label, turn) {
+			const row = rows.get(label);
+			if (!row) return;
+			row.turn = turn;
+			board.repaint();
+		},
+		turnFinished(label, record) {
+			const row = rows.get(label);
+			if (row) {
+				row.actions = record.cumulativeActions;
+				row.placement = record.placement;
+				row.lastDurationMs = record.durationMs;
+				if (record.passed) row.passed = record.turn;
+				else row.failed = true;
+				board.repaint();
+			}
+			if (!board.interactive) {
+				const sink = record.passed ? output : errors;
+				sink.write(`${formatTurnLine(label, record)}\n`);
+			}
+		},
+		modelFinished(report) {
+			rows.delete(report.label);
+			board.log(formatVerdict(report, meta));
+			if (report.failure) {
+				for (const line of failureDetail(report)) board.log(line);
+			}
+		},
+		close: board.close,
+	};
+}
+
+function renderLive(
+	meta: IfBenchBoardMeta,
+	rows: ReadonlyMap<string, RowState>,
+	spinner: string,
+	startedAt: number,
+): string[] {
+	if (rows.size === 0) return [];
+	const deepest = Math.max(0, ...[...rows.values()].map(row => row.actions));
+	const header =
+		`${fgOrPlain("accent", spinner)} ${theme ? theme.bold("if-bench") : "if-bench"} ${fgOrPlain("dim", "·")} ` +
+		`${rows.size} live ${fgOrPlain("dim", "·")} ${deepest} actions ${fgOrPlain("dim", "·")} ` +
+		`${fgOrPlain("dim", `L=${meta.arrayLength} nya{1,${meta.nyaMax}}`)} ${fgOrPlain("dim", "·")} ` +
+		`${formatDuration(Date.now() - startedAt)}`;
+	const lines = [header];
+	for (const [label, row] of rows) {
+		const meterCells = ladder(row, meta.maxTurns, spinner);
+		const parts = [
+			`turn ${Math.max(row.turn, 1)}/${meta.maxTurns}`,
+			`${row.actions} acts`,
+			formatDuration(Date.now() - row.startedAt),
+		];
+		if (row.placement) parts.push(fgOrPlain("dim", `cat@${row.placement}`));
+		lines.push(
+			renderTableRow(
+				[
+					{ text: spinner, style: text => fgOrPlain("warning", text) },
+					{ text: label },
+					{ text: meterCells },
+					{ text: parts.join(fgOrPlain("dim", " · ")) },
+				],
+				LIVE_ROW_COLUMNS[Math.min(meta.maxTurns, LADDER_WIDTH)]!,
+				undefined,
+				{ indent: "  ", gap: " " },
+			),
+		);
+	}
+	return lines;
+}
+
+const LIVE_ROW_COLUMNS: readonly (readonly TableColumn[])[] = Array.from(
+	{ length: LADDER_WIDTH + 1 },
+	(_, meterWidth): readonly TableColumn[] => [
+		{ width: 1, align: "left", overflow: "truncate" },
+		{ width: LABEL_WIDTH, align: "left", overflow: "truncate" },
+		{ width: meterWidth, align: "left", overflow: "truncate" },
+		{ width: DETAIL_WIDTH, align: "left", overflow: "allow" },
+	],
+);
+
+/**
+ * Turn meter: filled cells for passed turns, a spinner cell for the in-flight
+ * turn, dim cells for the remaining budget. Scales to {@link LADDER_WIDTH} when
+ * the turn budget is larger so the row never wraps.
+ */
+function ladder(row: RowState, maxTurns: number, spinner: string): string {
+	const width = Math.min(maxTurns, LADDER_WIDTH);
+	const scale = width / maxTurns;
+	const filled = Math.min(width, Math.round(row.passed * scale));
+	const active = row.failed || filled >= width ? 0 : Math.max(0, Math.min(width - filled, Math.round(scale)) || 1);
+	const rest = Math.max(0, width - filled - active);
+	return (
+		fgOrPlain("success", "█".repeat(filled)) +
+		(row.failed ? fgOrPlain("error", "▚") : fgOrPlain("warning", spinner.repeat(active))) +
+		fgOrPlain("dim", "░".repeat(rest))
+	);
+}
+
+function formatTurnLine(label: string, record: IfBenchTurnRecord): string {
+	const head = `[turn ${record.turn}] ${label} ${record.cumulativeActions} acts cat@${record.placement}`;
+	if (record.passed) return `${head} PASS ${formatDuration(Math.round(record.durationMs))}`;
+	return `${head} FAIL ${record.failure ?? "format"}`;
+}
+
+function formatVerdict(report: IfBenchModelReport, meta: IfBenchBoardMeta): string {
+	const stats = [
+		`${report.turnsPassed}/${meta.maxTurns} turns`,
+		`${report.actionsPassed} actions`,
+		`${formatDuration(Math.round(meanTurnMs(report)))}/turn`,
+	];
+	if (report.outputTokens > 0) stats.push(`${formatNumber(report.outputTokens)} tok`);
+	if (report.cost > 0) stats.push(formatCost(report.cost));
+	const body = `${theme ? theme.bold(report.label) : report.label} ${stats.join(fgOrPlain("dim", " · "))}`;
+	if (!report.failure) return `${fgOrPlain("success", "✓")} ${body}`;
+	return `${fgOrPlain("error", "✗")} ${body} ${fgOrPlain("dim", "·")} ${fgOrPlain("error", `broke on turn ${report.failure.turn}: ${FAILURE_TEXT[report.failure.kind]}`)}`;
+}
+
+/** Expected/actual pair for the turn that ended a run, clipped for the terminal. */
+function failureDetail(report: IfBenchModelReport): string[] {
+	const failed = report.turns[report.turns.length - 1];
+	if (!failed) return [];
+	const oneLine = (text: string): string =>
+		truncateToWidth(replaceTabs(text).replace(/\s+/g, " ").trim(), DETAIL_WIDTH);
+	if (failed.failure === "provider")
+		return [`    ${fgOrPlain("dim", "provider")} ${fgOrPlain("error", oneLine(failed.response))}`];
+	return [
+		`    ${fgOrPlain("dim", "expected")} <${failed.expected}>`,
+		`    ${fgOrPlain("dim", "actual  ")} ${oneLine(failed.response)}`,
+	];
+}
+
+function meanTurnMs(report: IfBenchModelReport): number {
+	if (report.turns.length === 0) return 0;
+	return report.durationMs / report.turns.length;
+}
+
+function formatCost(cost: number): string {
+	return `$${cost >= 0.095 ? cost.toFixed(2) : cost.toFixed(3)}`;
+}
+
+interface ScoreboardColumn {
+	header: string;
+	value(report: IfBenchModelReport): string;
+	align?: "right";
+}
+
+/**
+ * Ranked comparison table: depth first (turns, then actions), latency only as a
+ * tie-break, because surviving one more turn always beats answering faster.
+ */
+export function formatIfBenchScoreboard(summary: IfBenchSummary): string {
+	const ranked = [...summary.models].sort(
+		(a, b) => b.turnsPassed - a.turnsPassed || b.actionsPassed - a.actionsPassed || meanTurnMs(a) - meanTurnMs(b),
+	);
+	const columns: ScoreboardColumn[] = [
+		{ header: "model", value: report => report.label },
+		{ header: "turns", value: report => `${report.turnsPassed}/${summary.maxTurns}`, align: "right" },
+		{ header: "actions", value: report => String(report.actionsPassed), align: "right" },
+		{
+			header: "broke on",
+			value: report =>
+				report.failure ? `turn ${report.failure.turn} · ${FAILURE_TEXT[report.failure.kind]}` : "survived",
+		},
+		{ header: "per turn", value: report => formatDuration(Math.round(meanTurnMs(report))), align: "right" },
+		{
+			header: "tokens",
+			value: report => (report.outputTokens > 0 ? formatNumber(report.outputTokens) : "-"),
+			align: "right",
+		},
+		{ header: "cost", value: report => (report.cost > 0 ? formatCost(report.cost) : "-"), align: "right" },
+	];
+	const cells = ranked.map(report => columns.map(column => column.value(report)));
+	const widths = columns.map((column, index) =>
+		Math.max(column.header.length, ...cells.map(row => row[index]!.length)),
+	);
+	const tableColumns: TableColumn[] = columns.map((column, index): TableColumn => ({
+		width: widths[index]!,
+		align: column.align === "right" ? "right" : "left",
+		overflow: "truncate",
+	}));
+	const layout = (row: string[]): string =>
+		renderTableRow(
+			row.map(cell => ({ text: cell })),
+			tableColumns,
+			undefined,
+			{ gap: "  " },
+		).trimEnd();
+	const lines = [fgOrPlain("dim", layout(columns.map(column => column.header)))];
+	for (const [index, row] of cells.entries()) {
+		const line = layout(row);
+		lines.push(index === 0 && ranked[0]!.turnsPassed > 0 ? fgOrPlain("success", line) : line);
+	}
+	return `${lines.join("\n")}\n`;
+}

package/src/apps/live-visualizer.ts

@@ -0,0 +1,238 @@
+import type { Component } from "../tui";
+import { OverlayPanel, PanelRows } from "../chrome/overlay-box";
+import { type KeyId, matchesKey } from "../keys";
+import { sliceWithWidth, truncateToWidth, visibleWidth } from "../utils";
+import { sanitizeDisplaySingleLine } from "../overlays/extensions/display-text";
+import { type ThemeColor, theme } from "../theme/theme";
+
+/** Distinct states of a realtime call connection. */
+export type LivePhase = "connecting" | "listening" | "working" | "speaking" | "muted" | "error";
+
+const PHASE_ICONS: Record<LivePhase, string> = {
+	connecting: "○",
+	listening: "●",
+	working: "○",
+	speaking: "»",
+	muted: "×",
+	error: "!",
+};
+const PHASE_COLORS: Record<LivePhase, ThemeColor> = {
+	connecting: "dim",
+	listening: "success",
+	working: "warning",
+	speaking: "accent",
+	muted: "dim",
+	error: "error",
+};
+const SPECTRUM_BLOCKS = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"] as const;
+
+/** Configuration callbacks for user interactions in the visualizer. */
+export interface LiveVisualizerOptions {
+	onStop(): void;
+	onToggleMute(): void;
+	/** Configured `app.live.toggle` chords that also end the call (Ctrl+L by default). */
+	stopKeys?: readonly KeyId[];
+}
+
+function truncateFromStart(text: string, width: number): string {
+	if (width <= 0) return "";
+	const textWidth = visibleWidth(text);
+	if (textWidth <= width) return text;
+	if (width === 1) return "…";
+	return `…${sliceWithWidth(text, textWidth - width + 1, width - 1, true).text}`;
+}
+
+/** A compact, fixed-height terminal component for displaying a realtime call. */
+export class LiveVisualizer implements Component {
+	readonly wantsKeyRelease = false;
+
+	readonly #options: LiveVisualizerOptions;
+	readonly #body = new PanelRows();
+	readonly #panel = new OverlayPanel();
+
+	#phase: LivePhase = "connecting";
+	#inputLevel = 0;
+	#displayLevel = 0;
+	#frame = 0;
+	#userTranscript = "";
+
+	#cache:
+		| {
+				width: number;
+				phase: LivePhase;
+				displayLevel: number;
+				frame: number;
+				userTranscript: string;
+				lines: readonly string[];
+		  }
+		| undefined;
+
+	constructor(options: LiveVisualizerOptions) {
+		this.#options = options;
+		this.#body.setHeight(3);
+		this.#panel.addChild(this.#body);
+	}
+
+	/** Updates the current call phase. */
+	setPhase(phase: LivePhase): void {
+		if (this.#phase !== phase) {
+			this.#phase = phase;
+			this.invalidate();
+		}
+	}
+
+	/** Updates the microphone volume level (0..1). */
+	setInputLevel(level: number): void {
+		const next = Number.isFinite(level) ? Math.min(1, Math.max(0, level)) : 0;
+		if (this.#inputLevel === next) return;
+		this.#inputLevel = next;
+		if (next > this.#displayLevel) this.#displayLevel = next;
+		this.invalidate();
+	}
+
+	/** Advances the spectrum animation and its peak decay. */
+	setFrame(frame: number): void {
+		const nextLevel = Math.max(this.#inputLevel, this.#displayLevel * 0.84);
+		if (this.#frame !== frame || this.#displayLevel !== nextLevel) {
+			this.#frame = frame;
+			this.#displayLevel = nextLevel;
+			this.invalidate();
+		}
+	}
+
+	/** Updates the user's streaming voice transcript. */
+	setTranscript(text: string): void {
+		const normalized = sanitizeDisplaySingleLine(text).replace(/\s+/g, " ").trim();
+		if (this.#userTranscript === normalized) return;
+		this.#userTranscript = normalized;
+		this.invalidate();
+	}
+
+	/** Clears the user's voice transcript row. */
+	clearTranscript(): void {
+		if (!this.#userTranscript) return;
+		this.#userTranscript = "";
+		this.invalidate();
+	}
+
+	/** Processes user keypresses. */
+	handleInput(data: string): void {
+		if (
+			matchesKey(data, "escape") ||
+			matchesKey(data, "ctrl+c") ||
+			this.#options.stopKeys?.some(key => matchesKey(data, key))
+		) {
+			this.#options.onStop();
+		} else if (matchesKey(data, "space")) {
+			this.#options.onToggleMute();
+		}
+	}
+
+	/** Clears the render cache. */
+	invalidate(): void {
+		this.#cache = undefined;
+		this.#panel.invalidate();
+	}
+
+	/** Renders the microphone spectrum into a compact fixed-height panel. */
+	render(width: number): readonly string[] {
+		if (
+			this.#cache &&
+			this.#cache.width === width &&
+			this.#cache.phase === this.#phase &&
+			this.#cache.displayLevel === this.#displayLevel &&
+			this.#cache.frame === this.#frame &&
+			this.#cache.userTranscript === this.#userTranscript
+		) {
+			return this.#cache.lines;
+		}
+
+		const lines = this.#renderLines(width);
+		this.#cache = {
+			width,
+			phase: this.#phase,
+			displayLevel: this.#displayLevel,
+			frame: this.#frame,
+			userTranscript: this.#userTranscript,
+			lines,
+		};
+		return lines;
+	}
+
+	#renderLines(maxWidth: number): readonly string[] {
+		const width = Math.max(2, maxWidth);
+		const spectrumColor: ThemeColor = this.#phase === "muted" ? "dim" : this.#phase === "error" ? "error" : "success";
+		if (width < 4) {
+			const innerWidth = width - 2;
+			const border = (content: string): string =>
+				theme.fg("border", "│") + content + (width > 1 ? theme.fg("border", "│") : "");
+			const top = theme.fg("border", `┌${"─".repeat(innerWidth)}${width > 1 ? "┐" : ""}`);
+			const spectrum = this.#generateSpectrum(innerWidth, 2);
+			return [
+				top,
+				...spectrum.map(row => border(theme.fg(spectrumColor, row))),
+				border(this.#renderTranscript(this.#userTranscript, innerWidth)),
+				this.#renderFooter(width, innerWidth),
+			];
+		}
+
+		const contentWidth = width - 4;
+		const spectrum = this.#generateSpectrum(contentWidth, 2);
+		this.#body.setLines([
+			...spectrum.map(row => theme.fg(spectrumColor, row)),
+			this.#renderTranscript(this.#userTranscript, contentWidth),
+		]);
+		const lines = [...this.#panel.render(width)];
+		lines[lines.length - 1] = this.#renderFooter(width, width - 2);
+		return lines;
+	}
+
+	#renderTranscript(transcript: string, width: number): string {
+		const content = truncateFromStart(transcript, width);
+		const padding = " ".repeat(Math.max(0, width - visibleWidth(content)));
+		return theme.fg("accent", content) + padding;
+	}
+
+	#renderFooter(width: number, innerWidth: number): string {
+		const frames = theme.spinnerFrames;
+		const icon = this.#phase === "working" ? frames[this.#frame % frames.length] : PHASE_ICONS[this.#phase];
+		const status = `${icon} ${this.#phase}`;
+		const fullLabel = ` ${status} · space mute · esc end `;
+		const shortLabel = ` ${status} `;
+		const label =
+			innerWidth >= visibleWidth(fullLabel) + 1
+				? fullLabel
+				: innerWidth >= visibleWidth(shortLabel) + 1
+					? shortLabel
+					: "";
+		const box = width >= 4 ? theme.boxRound : undefined;
+		const bottomLeft = box?.bottomLeft ?? "└";
+		const horizontal = box?.horizontal ?? "─";
+		const bottomRight = box?.bottomRight ?? "┘";
+		if (!label) {
+			return theme.fg("border", `${bottomLeft}${horizontal.repeat(innerWidth)}${width > 1 ? bottomRight : ""}`);
+		}
+		const remaining = Math.max(0, innerWidth - visibleWidth(label) - 1);
+		return (
+			theme.fg("border", `${bottomLeft}${horizontal}`) +
+			theme.fg(PHASE_COLORS[this.#phase], truncateToWidth(label, innerWidth - 1)) +
+			theme.fg("border", `${horizontal.repeat(remaining)}${width > 1 ? bottomRight : ""}`)
+		);
+	}
+
+	#generateSpectrum(width: number, rows: number): string[] {
+		const output = Array.from({ length: rows }, () => "");
+		const energy = this.#phase === "muted" ? 0 : Math.min(1, Math.sqrt(this.#displayLevel * 5));
+		const maxHeight = rows * (SPECTRUM_BLOCKS.length - 1);
+		for (let column = 0; column < width; column += 1) {
+			const carrier = 0.5 + 0.5 * Math.sin(this.#frame * 0.43 + column * 0.71);
+			const shimmer = 0.5 + 0.5 * Math.sin(this.#frame * 0.19 - column * 1.17);
+			const height = Math.round(energy * (0.3 + carrier * 0.5 + shimmer * 0.2) * maxHeight);
+			for (let row = 0; row < rows; row += 1) {
+				const units = Math.max(0, Math.min(SPECTRUM_BLOCKS.length - 1, height - (rows - row - 1) * 8));
+				output[row] += SPECTRUM_BLOCKS[units];
+			}
+		}
+		return output;
+	}
+}