@juicesharp/rpiv-voice 1.4.2

package/view/components/status-bar-view.ts

@@ -0,0 +1,112 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { RecordingStatus } from "../../state/state.js";
+import { STATUS_META } from "../../state/status-intent.js";
+import type { StatefulView } from "../stateful-view.js";
+
+const GAP = "  ";
+const TRUNCATE_ELLIPSIS = "…";
+
+const COLOR_ACCENT = "accent";
+const COLOR_DIM = "dim";
+const COLOR_MUTED = "muted";
+
+const RECORDING_PULSE_COLORS = ["error", "error", "error", "dim"] as const;
+export const STATUS_BAR_PULSE_FRAME_INTERVAL_MS = 200;
+
+// Plain text key names instead of glyphs (`⏎ ␣ ⇥ ⎋`): most terminal fonts
+// substitute lookalikes whose vertical metrics don't match the surrounding
+// letters, producing a wobbly baseline. Latin word labels always sit cleanly.
+const HINT_SEP = " · ";
+
+// Splits each i18n string on its first space so the leading key word ("Enter",
+// "Space", …) renders in `muted` while the rest stays `dim`. The split is
+// locale-stable as long as translations preserve the "Key <verb-phrase>"
+// shape — e.g. "Enter to paste", "Введите для вставки" both split cleanly.
+function splitHint(literal: string): { key: string; action: string } {
+	const sp = literal.indexOf(" ");
+	if (sp <= 0) return { key: literal, action: "" };
+	return { key: literal.slice(0, sp), action: literal.slice(sp + 1) };
+}
+
+export interface StatusBarViewProps {
+	status: RecordingStatus;
+	/** Pre-resolved i18n strings ("Enter to paste", "Esc to go back"…). The
+	 *  selector decides which set to pass based on the current screen. */
+	hints: readonly string[];
+}
+
+export class StatusBarView implements StatefulView<StatusBarViewProps> {
+	private props: StatusBarViewProps = { status: "recording", hints: [] };
+	private pulseFrame = 0;
+	private readonly startedAtMs: number;
+	private pausedAtMs: number | undefined;
+	private pausedAccumMs = 0;
+
+	constructor(private readonly theme: Theme) {
+		this.startedAtMs = Date.now();
+	}
+
+	setProps(props: StatusBarViewProps): void {
+		const wasPaused = this.props.status === "paused";
+		const isPaused = props.status === "paused";
+		if (!wasPaused && isPaused) {
+			this.pausedAtMs = Date.now();
+		} else if (wasPaused && !isPaused && this.pausedAtMs !== undefined) {
+			this.pausedAccumMs += Date.now() - this.pausedAtMs;
+			this.pausedAtMs = undefined;
+		}
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	tickPulse(): void {
+		this.pulseFrame = (this.pulseFrame + 1) % RECORDING_PULSE_COLORS.length;
+	}
+
+	render(width: number): string[] {
+		const meta = STATUS_META[this.props.status];
+		const glyphColor =
+			this.props.status === "recording"
+				? RECORDING_PULSE_COLORS[this.pulseFrame % RECORDING_PULSE_COLORS.length]
+				: meta.glyphColorKey;
+		const glyph = this.theme.fg(glyphColor, meta.glyph);
+		const timerColor = this.props.status === "recording" ? COLOR_ACCENT : COLOR_MUTED;
+		const timer = this.theme.fg(timerColor, formatElapsed(this.elapsedMs()));
+		const hints = this.props.hints
+			.map((literal) => {
+				const { key, action } = splitHint(literal);
+				return `${this.theme.fg(COLOR_MUTED, key)} ${this.theme.fg(COLOR_DIM, action)}`;
+			})
+			.join(this.theme.fg(COLOR_DIM, HINT_SEP));
+
+		const line = `${glyph} ${timer}${GAP}${hints}`;
+		return [truncateToWidth(line, width, TRUNCATE_ELLIPSIS, false)];
+	}
+
+	private elapsedMs(): number {
+		const now = Date.now();
+		const livePauseMs = this.pausedAtMs !== undefined ? now - this.pausedAtMs : 0;
+		return Math.max(0, now - this.startedAtMs - this.pausedAccumMs - livePauseMs);
+	}
+}
+
+const MS_PER_SECOND = 1000;
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_PADDING_DIGITS = 2;
+
+function decomposeElapsed(ms: number): { minutes: number; seconds: number } {
+	const totalSeconds = Math.floor(ms / MS_PER_SECOND);
+	return {
+		minutes: Math.floor(totalSeconds / SECONDS_PER_MINUTE),
+		seconds: totalSeconds % SECONDS_PER_MINUTE,
+	};
+}
+
+function formatElapsed(ms: number): string {
+	const { minutes, seconds } = decomposeElapsed(ms);
+	return `${minutes}:${seconds.toString().padStart(SECONDS_PADDING_DIGITS, "0")}`;
+}

package/view/components/transcript-view.ts

@@ -0,0 +1,50 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { StatefulView } from "../stateful-view.js";
+
+const COLOR_MUTED = "muted";
+const COLOR_DIM = "dim";
+
+export interface TranscriptViewProps {
+	/** Committed (final-decoded) transcript — what gets pasted on Enter. */
+	text: string;
+	/** In-progress reading of the still-active utterance. Rendered in dim
+	 *  immediately after `text`, separated by a single space when both are
+	 *  non-empty. Replaced wholesale on each rolling decode and cleared the
+	 *  moment the final commit lands. */
+	partial?: string;
+	placeholder: string;
+}
+
+export class TranscriptView implements StatefulView<TranscriptViewProps> {
+	private props: TranscriptViewProps = { text: "", partial: "", placeholder: "Listening..." };
+
+	constructor(private readonly theme: Theme) {}
+
+	setProps(props: TranscriptViewProps): void {
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const committed = this.props.text;
+		const partial = this.props.partial ?? "";
+		if (!committed && !partial) {
+			return [this.theme.fg(COLOR_MUTED, this.props.placeholder)];
+		}
+		// Concatenate committed + partial with a separating space so wrapping
+		// treats them as one paragraph; the partial portion is themed dim.
+		const partialColored = partial ? this.theme.fg(COLOR_DIM, partial) : "";
+		const merged = committed && partialColored ? `${committed} ${partialColored}` : `${committed}${partialColored}`;
+
+		const lines: string[] = [];
+		for (const ln of merged.split("\n")) {
+			const src = ln.length === 0 ? " " : ln;
+			lines.push(...wrapTextWithAnsi(src, width));
+		}
+		return lines;
+	}
+}

package/view/overlay-view.ts

@@ -0,0 +1,82 @@
+import { Container } from "@earendil-works/pi-tui";
+import { clipToTerminalHeight } from "../state/selectors/derivations.js";
+import type { VoiceState } from "../state/state.js";
+import type { ScreenContentStrategy } from "./screen-content-strategy.js";
+import type { StatefulView } from "./stateful-view.js";
+
+const FALLBACK_TERMINAL_ROWS = 24;
+
+// Bottom chrome rows depend on whether the equalizer is enabled. With the
+// equalizer ON, the chrome is `[divider, eq-top, eq-bottom, statusBar]` (4
+// rows); with it OFF the equalizer renders zero rows and the chrome collapses
+// to `[divider, statusBar]` (2 rows). Subtracting the chrome count from total
+// rows gives the body row count that needs height equalization.
+const BOTTOM_CHROME_ROWS_WITH_EQ = 4;
+const BOTTOM_CHROME_ROWS_WITHOUT_EQ = 2;
+
+export interface OverlayViewProps {
+	state: VoiceState;
+}
+
+export interface OverlayViewConfig {
+	tui: { terminal: { rows?: number; columns: number } };
+	dictation: ScreenContentStrategy;
+	settings: ScreenContentStrategy;
+}
+
+/**
+ * OverlayView keeps the divider + status-bar pinned at the same vertical
+ * offset across screen flips. Each render:
+ *   1. Renders both strategies (cheap — components are pure renderers).
+ *   2. Updates a high-water mark of the body height (rows above the bottom
+ *      chrome) across both. Once dictation has grown to N rows, every
+ *      subsequent settings render pads up to N too — so the user never sees
+ *      the chrome jump after switching screens.
+ *   3. Top-pads the active strategy's rows with empty lines to match the
+ *      target.
+ *   4. Top-clips to ~85% of terminal height (handled by clipToTerminalHeight).
+ */
+export class OverlayView implements StatefulView<OverlayViewProps> {
+	private liveState: VoiceState | undefined;
+	private targetBodyHeight = 0;
+
+	constructor(private readonly config: OverlayViewConfig) {}
+
+	setProps(props: OverlayViewProps): void {
+		this.liveState = props.state;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const state = this.liveState;
+		if (!state) return [];
+
+		const chromeRows = state.settingsDraft.equalizerEnabled
+			? BOTTOM_CHROME_ROWS_WITH_EQ
+			: BOTTOM_CHROME_ROWS_WITHOUT_EQ;
+		const dictRows = this.renderStrategy(this.config.dictation, width);
+		const settRows = this.renderStrategy(this.config.settings, width);
+		const dictBody = Math.max(0, dictRows.length - chromeRows);
+		const settBody = Math.max(0, settRows.length - chromeRows);
+		this.targetBodyHeight = Math.max(this.targetBodyHeight, dictBody, settBody);
+
+		const activeRows = state.currentScreen === "settings" ? settRows : dictRows;
+		const currentBody = Math.max(0, activeRows.length - chromeRows);
+		const padNeeded = this.targetBodyHeight - currentBody;
+		const padded = padNeeded > 0 ? [...new Array<string>(padNeeded).fill(""), ...activeRows] : activeRows;
+		return clipToTerminalHeight(padded, this.terminalRows());
+	}
+
+	private renderStrategy(strategy: ScreenContentStrategy, width: number): string[] {
+		const container = new Container();
+		for (const child of strategy.children()) container.addChild(child);
+		return container.render(width);
+	}
+
+	private terminalRows(): number {
+		return this.config.tui.terminal.rows ?? FALLBACK_TERMINAL_ROWS;
+	}
+}

package/view/props-adapter.ts

@@ -0,0 +1,29 @@
+import type { BindingContext } from "../state/selectors/contract.js";
+import { selectActiveView } from "../state/selectors/focus.js";
+import type { VoiceState } from "../state/state.js";
+import type { BoundGlobalBinding } from "./component-binding.js";
+
+export interface VoiceOverlayPropsAdapterConfig {
+	tui: { requestRender(): void };
+	bindings: ReadonlyArray<BoundGlobalBinding>;
+}
+
+export class VoiceOverlayPropsAdapter {
+	private readonly tui: VoiceOverlayPropsAdapterConfig["tui"];
+	private readonly bindings: ReadonlyArray<BoundGlobalBinding>;
+
+	constructor(config: VoiceOverlayPropsAdapterConfig) {
+		this.tui = config.tui;
+		this.bindings = config.bindings;
+	}
+
+	apply(state: VoiceState): void {
+		const ctx: BindingContext = { activeView: selectActiveView(state) };
+		for (const b of this.bindings) b.apply(state, ctx);
+		this.tui.requestRender();
+	}
+
+	invalidate(): void {
+		for (const b of this.bindings) b.invalidate();
+	}
+}

package/view/screen-content-strategy.ts

@@ -0,0 +1,58 @@
+import { type Component, Spacer } from "@earendil-works/pi-tui";
+import type { EqualizerViewProps } from "./components/equalizer-view.js";
+import type { SettingsFormViewProps } from "./components/settings-form-view.js";
+import type { StatusBarViewProps } from "./components/status-bar-view.js";
+import type { TranscriptViewProps } from "./components/transcript-view.js";
+import type { StatefulView } from "./stateful-view.js";
+
+/**
+ * Per-screen layout. Returns the ordered list of pi-tui Components that the
+ * overlay container renders top-down. Both screens share the same bottom
+ * chrome (mint divider + equalizer + status row) so the equalizer column and
+ * key hints stay vertically pinned when flipping between dictation and
+ * settings.
+ */
+export interface ScreenContentStrategy {
+	readonly kind: "dictation" | "settings";
+	children(): readonly Component[];
+}
+
+export interface DictationScreenStrategyConfig {
+	transcript: StatefulView<TranscriptViewProps>;
+	divider: Component;
+	equalizer: StatefulView<EqualizerViewProps>;
+	statusBar: StatefulView<StatusBarViewProps>;
+}
+
+export class DictationScreenStrategy implements ScreenContentStrategy {
+	readonly kind = "dictation" as const;
+
+	constructor(private readonly config: DictationScreenStrategyConfig) {}
+
+	children(): readonly Component[] {
+		return [new Spacer(1), this.config.transcript, this.config.divider, this.config.equalizer, this.config.statusBar];
+	}
+}
+
+export interface SettingsScreenStrategyConfig {
+	settingsForm: StatefulView<SettingsFormViewProps>;
+	divider: Component;
+	equalizer: StatefulView<EqualizerViewProps>;
+	statusBar: StatefulView<StatusBarViewProps>;
+}
+
+export class SettingsScreenStrategy implements ScreenContentStrategy {
+	readonly kind = "settings" as const;
+
+	constructor(private readonly config: SettingsScreenStrategyConfig) {}
+
+	children(): readonly Component[] {
+		return [
+			new Spacer(1),
+			this.config.settingsForm,
+			this.config.divider,
+			this.config.equalizer,
+			this.config.statusBar,
+		];
+	}
+}

package/view/stateful-view.ts

@@ -0,0 +1,7 @@
+import type { Component } from "@earendil-works/pi-tui";
+
+export interface StatefulView<P> extends Component {
+	setProps(props: P): void;
+}
+
+export type ActiveView = "dictation" | "settings";