@juicesharp/rpiv-voice 1.4.2

package/state/voice-session.ts

@@ -0,0 +1,176 @@
+import { DynamicBorder, type Theme } from "@earendil-works/pi-coding-agent";
+import { getKeybindings } from "@earendil-works/pi-tui";
+import type { VoiceConfig } from "../config/voice-config.js";
+import { saveVoiceConfig } from "../config/voice-config.js";
+import { globalBinding } from "../view/component-binding.js";
+import { EqualizerView } from "../view/components/equalizer-view.js";
+import { SettingsFieldView } from "../view/components/settings-field-view.js";
+import { SettingsFormView } from "../view/components/settings-form-view.js";
+import { StatusBarView } from "../view/components/status-bar-view.js";
+import { TranscriptView } from "../view/components/transcript-view.js";
+import { OverlayView } from "../view/overlay-view.js";
+import { VoiceOverlayPropsAdapter } from "../view/props-adapter.js";
+import { DictationScreenStrategy, SettingsScreenStrategy } from "../view/screen-content-strategy.js";
+import { routeKey, type VoiceAction } from "./key-router.js";
+import {
+	selectEqualizerFieldProps,
+	selectEqualizerProps,
+	selectHallucinationFilterFieldProps,
+	selectLanguageReadonlyFieldProps,
+	selectMicReadonlyFieldProps,
+	selectStatusBarProps,
+	selectTranscriptProps,
+} from "./selectors/projections.js";
+import { initialVoiceState, type VoiceState } from "./state.js";
+import { type ApplyContext, draftFromConfig, type Effect, reduce, type VoiceResult } from "./state-reducer.js";
+
+export interface VoiceSessionDeps {
+	pasteToEditor: (text: string) => void;
+	notify: (message: string, level: "error" | "info") => void;
+	abort: () => void;
+	stopMic: () => void;
+	setPipelinePaused: (paused: boolean) => void;
+	setHallucinationFilterEnabled: (enabled: boolean) => void;
+}
+
+export interface VoiceSessionConfig {
+	tui: { terminal: { columns: number; rows?: number }; requestRender(): void };
+	theme: Theme;
+	persistedConfig: VoiceConfig;
+	deps: VoiceSessionDeps;
+	done: (result: VoiceResult) => void;
+}
+
+export interface VoiceSessionComponent {
+	render(width: number): string[];
+	invalidate(): void;
+	handleInput(data: string): void;
+}
+
+export class VoiceSession {
+	private state: VoiceState;
+	private readonly persistedConfig: VoiceConfig;
+	private readonly adapter: VoiceOverlayPropsAdapter;
+	private readonly overlay: OverlayView;
+	private readonly tui: VoiceSessionConfig["tui"];
+	private readonly deps: VoiceSessionDeps;
+	private readonly done: (result: VoiceResult) => void;
+	private readonly statusBar: StatusBarView;
+
+	readonly component: VoiceSessionComponent;
+
+	constructor(config: VoiceSessionConfig) {
+		this.tui = config.tui;
+		this.deps = config.deps;
+		this.done = config.done;
+		this.persistedConfig = config.persistedConfig;
+		this.state = initialVoiceState(draftFromConfig(config.persistedConfig));
+
+		const transcript = new TranscriptView(config.theme);
+		const divider = new DynamicBorder((s) => config.theme.fg("accent", s));
+		const equalizer = new EqualizerView(config.theme);
+		const statusBar = new StatusBarView(config.theme);
+		this.statusBar = statusBar;
+		const micField = new SettingsFieldView(config.theme);
+		const languageField = new SettingsFieldView(config.theme);
+		const hallucinationField = new SettingsFieldView(config.theme);
+		const equalizerField = new SettingsFieldView(config.theme);
+		const settingsForm = new SettingsFormView({
+			fields: [micField, languageField, hallucinationField, equalizerField],
+		});
+
+		const dictation = new DictationScreenStrategy({ transcript, divider, equalizer, statusBar });
+		const settings = new SettingsScreenStrategy({ settingsForm, divider, equalizer, statusBar });
+		this.overlay = new OverlayView({
+			tui: config.tui,
+			dictation,
+			settings,
+		});
+
+		// Predicates are intentionally absent: OverlayView pre-renders the inactive
+		// strategy on every tick to compute the height-pad target, so every
+		// component must hold fresh props regardless of which screen is visible.
+		const bindings = [
+			globalBinding({ component: statusBar, select: selectStatusBarProps }),
+			globalBinding({ component: transcript, select: selectTranscriptProps }),
+			globalBinding({ component: equalizer, select: selectEqualizerProps }),
+			globalBinding({ component: micField, select: selectMicReadonlyFieldProps }),
+			globalBinding({ component: languageField, select: selectLanguageReadonlyFieldProps }),
+			globalBinding({ component: hallucinationField, select: selectHallucinationFilterFieldProps }),
+			globalBinding({ component: equalizerField, select: selectEqualizerFieldProps }),
+			globalBinding({ component: this.overlay, select: (state) => ({ state }) }),
+		];
+
+		this.adapter = new VoiceOverlayPropsAdapter({ tui: config.tui, bindings });
+
+		this.component = {
+			render: (w) => this.overlay.render(w),
+			invalidate: () => this.adapter.invalidate(),
+			handleInput: (data) => this.dispatch(data),
+		};
+
+		this.adapter.apply(this.state);
+	}
+
+	dispatchAction(action: VoiceAction): void {
+		this.commit(action);
+	}
+
+	tickPulse(): void {
+		this.statusBar.tickPulse();
+		this.tui.requestRender();
+	}
+
+	dispatch(data: string): void {
+		const action = routeKey(data, this.state, this.runtime());
+		if (action.kind === "ignore") return;
+		this.commit(action);
+	}
+
+	private commit(action: VoiceAction): void {
+		const result = reduce(this.state, action, this.applyContext());
+		this.state = result.state;
+		for (const e of result.effects) this.runEffect(e);
+		this.adapter.apply(this.state);
+	}
+
+	private runEffect(effect: Effect): void {
+		switch (effect.kind) {
+			case "request_render":
+				this.tui.requestRender();
+				return;
+			case "paste_to_editor":
+				this.deps.pasteToEditor(effect.text);
+				return;
+			case "notify":
+				this.deps.notify(effect.message, effect.level);
+				return;
+			case "abort_session":
+				this.deps.abort();
+				return;
+			case "stop_mic":
+				this.deps.stopMic();
+				return;
+			case "set_pipeline_paused":
+				this.deps.setPipelinePaused(effect.paused);
+				return;
+			case "set_hallucination_filter":
+				this.deps.setHallucinationFilterEnabled(effect.enabled);
+				return;
+			case "save_config":
+				saveVoiceConfig(effect.config);
+				return;
+			case "done":
+				this.done(effect.result);
+				return;
+		}
+	}
+
+	private runtime() {
+		return { keybindings: getKeybindings() };
+	}
+
+	private applyContext(): ApplyContext {
+		return { persistedConfig: this.persistedConfig };
+	}
+}

package/view/component-binding.ts

@@ -0,0 +1,24 @@
+import type { BindingContext, GlobalSelector } from "../state/selectors/contract.js";
+import type { VoiceState } from "../state/state.js";
+import type { StatefulView } from "./stateful-view.js";
+
+export interface ComponentBinding<P> {
+	readonly component: StatefulView<P>;
+	readonly select: GlobalSelector<P>;
+	readonly predicate?: (state: VoiceState, ctx: BindingContext) => boolean;
+}
+
+export interface BoundGlobalBinding {
+	apply(state: VoiceState, ctx: BindingContext): void;
+	invalidate(): void;
+}
+
+export function globalBinding<P>(spec: ComponentBinding<P>): BoundGlobalBinding {
+	return {
+		apply: (state, ctx) => {
+			if (spec.predicate && !spec.predicate(state, ctx)) return;
+			spec.component.setProps(spec.select(state, ctx));
+		},
+		invalidate: () => spec.component.invalidate(),
+	};
+}

package/view/components/equalizer-view.ts

@@ -0,0 +1,237 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { RecordingStatus } from "../../state/state.js";
+import type { StatefulView } from "../stateful-view.js";
+
+const COLOR_ACCENT = "accent";
+const COLOR_MUTED = "muted";
+const COLOR_DIM = "dim";
+
+// Lower-block glyph ladder: each cell fills from its baseline upward in
+// eighths. Used for BOTH cell rows now — the bottom row fills first, the top
+// row continues filling above it, giving us 16 distinct amplitude steps
+// (vs. 8 in the old mirrored design) for the same two-row chrome height.
+const BAR_GLYPHS = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"] as const;
+const SUB_LEVELS_PER_ROW = BAR_GLYPHS.length - 1; // 8 — the highest non-empty index
+const MAX_AMP = SUB_LEVELS_PER_ROW * 2; // 16 sub-levels stacked across two rows
+
+// Perceptual gain on the live RMS reading. RMS for normal speech sits around
+// 0.02–0.15; sqrt(level * 5) reaches roughly 0.7 at quiet talking volume and
+// saturates on loud peaks.
+const PERCEPTUAL_GAIN = 5;
+
+// Single-pole low-pass on `level`. Half-life ~25 ms at 10 Hz updates — fast
+// enough that loud peaks visibly punch through, slow enough to suppress the
+// glyph-quantization shimmer.
+const SMOOTHING = 0.3;
+
+// Trapezoid envelope: flat plateau across the middle PLATEAU_HALF_WIDTH × 2 of
+// the row, linear fade to zero over FADE_WIDTH on each side, hard zero past
+// that. This is the cover-art silhouette: confident centred bell with tails
+// that go fully blank, so the equalizer never reads as filling the whole row.
+const PLATEAU_HALF_WIDTH = 0.4;
+const FADE_WIDTH = 0.08;
+
+// Per-column noise floor on the static envelope. Keeps adjacent bars at
+// different heights even when held at peak so the silhouette has texture.
+const SHAPE_FLOOR = 0.15;
+
+// Per-tick fall range. Each column draws a deterministic decay rate from
+// [FALL_MIN, FALL_MAX] — that's what makes adjacent bars fall back at
+// different speeds after a loud onset, so the lattice dances instead of
+// pulsing in lockstep. Range is tuned to the canonical voice-meter release
+// window: at 10 Hz update rate, FALL_MIN=0.10 ⇒ ~1.0 s tail, FALL_MAX=0.22 ⇒
+// ~450 ms. Audio-engineering literature (IEC 60268-17 / BS 6840 PPM) puts the
+// "feels alive on speech" sweet spot at 300–500 ms release, faster than VU's
+// 300 ms symmetric and slower than PPM's 1.5 s decay-to-−20 dB.
+const FALL_MIN = 0.1;
+const FALL_MAX = 0.22;
+
+// Peak-hold latency: every new local maximum latches the column at its peak
+// height for HOLD_TICKS frames before the per-column gravity kicks in. At
+// 10 Hz tick that is ~600 ms — the recognisable "memory of the loudest recent
+// moment" you see in Winamp / classic VU plug-ins. We can't dedicate a
+// separate cap row in two-row chrome, so the ballistic lives inside the bar
+// itself: the bar freezes briefly at its peak, then resumes its asymmetric
+// release.
+const HOLD_TICKS = 6;
+
+interface ColumnTuning {
+	envelope: number;
+	fall: number;
+}
+
+export interface EqualizerViewProps {
+	level: number;
+	status: RecordingStatus;
+	enabled: boolean;
+}
+
+export class EqualizerView implements StatefulView<EqualizerViewProps> {
+	private props: EqualizerViewProps = { level: 0, status: "recording", enabled: false };
+	private smoothedLevel = 0;
+	private tuning: ColumnTuning[] = [];
+	private level: Float64Array = new Float64Array(0);
+	// Ticks remaining in each column's peak-hold latch. Reset to HOLD_TICKS
+	// every time level[i] rises to a new local max; counts down on every
+	// non-rise tick. While > 0 the column's gravity is suppressed.
+	private holdLeft: Uint8Array = new Uint8Array(0);
+	// Each setProps tick that should advance the lattice queues one step here;
+	// render() consumes them. Decoupling keeps render() idempotent for the same
+	// audio frame even if the TUI calls it more than once.
+	private pendingTicks = 0;
+
+	constructor(private readonly theme: Theme) {}
+
+	setProps(props: EqualizerViewProps): void {
+		// Live RMS only feeds the smoother + lattice while recording AND enabled.
+		// Pausing freezes the silhouette at its last shape (the dim colour carries
+		// the paused state). Disabling drops to zero rows from render() so the
+		// dictation pane reclaims the space.
+		if (props.enabled && props.status === "recording") {
+			this.smoothedLevel = (1 - SMOOTHING) * this.smoothedLevel + SMOOTHING * props.level;
+			this.pendingTicks += 1;
+		}
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		if (!this.props.enabled) return [];
+		if (width <= 0) return ["", ""];
+
+		if (this.tuning.length !== width) {
+			this.tuning = buildTuning(width);
+			this.level = new Float64Array(width);
+			this.holdLeft = new Uint8Array(width);
+		}
+
+		const recording = this.props.status === "recording";
+		const gain = recording ? Math.min(1, Math.sqrt(this.smoothedLevel * PERCEPTUAL_GAIN)) : 0;
+		// Drain queued ticks; while paused pendingTicks is always 0, so the level
+		// array holds whatever shape it had at the moment of pause.
+		for (let n = 0; n < this.pendingTicks; n++) advanceLevels(this.level, this.holdLeft, this.tuning, gain);
+		this.pendingTicks = 0;
+
+		const amps = new Uint8Array(width);
+		let topRow = "";
+		let botRow = "";
+		for (let i = 0; i < width; i++) {
+			const amp = quantize(this.level[i] ?? 0);
+			amps[i] = amp;
+			// Bottom row holds the first SUB_LEVELS_PER_ROW eighths; once it's
+			// saturated, the top row picks up the rest. Both rows draw from the
+			// same lower-block ladder so the bar visibly grows from the bottom.
+			const botIdx = amp >= SUB_LEVELS_PER_ROW ? SUB_LEVELS_PER_ROW : amp;
+			const topIdx = amp > SUB_LEVELS_PER_ROW ? amp - SUB_LEVELS_PER_ROW : 0;
+			botRow += BAR_GLYPHS[botIdx]!;
+			topRow += BAR_GLYPHS[topIdx]!;
+		}
+
+		return [this.paint(topRow, amps, recording), this.paint(botRow, amps, recording)];
+	}
+
+	// Run-length encode the row into theme.fg() segments — one segment per
+	// contiguous run of cells that share the same shade tier. Paused state
+	// collapses to a single dim segment, matching the "frozen, gone quiet"
+	// semantic the rest of the overlay uses.
+	private paint(row: string, amps: Uint8Array, recording: boolean): string {
+		if (!recording) return this.theme.fg(COLOR_DIM, row);
+		const width = row.length;
+		if (width === 0) return "";
+		const cells = [...row];
+		let out = "";
+		let runStart = 0;
+		let currentShade = pickShade(amps[0] ?? 0);
+		for (let i = 1; i < width; i++) {
+			const shade = pickShade(amps[i] ?? 0);
+			if (shade !== currentShade) {
+				out += this.theme.fg(currentShade, cells.slice(runStart, i).join(""));
+				runStart = i;
+				currentShade = shade;
+			}
+		}
+		out += this.theme.fg(currentShade, cells.slice(runStart).join(""));
+		return out;
+	}
+}
+
+// Three-tier shade picker over the 0..MAX_AMP amplitude range. Splits roughly
+// thirds: lower bottom-row eighths render dim, the upper bottom-row + lower
+// top-row eighths render muted, anything in the upper top-row burns accent.
+function pickShade(amp: number): "dim" | "muted" | "accent" {
+	if (amp <= 5) return COLOR_DIM;
+	if (amp <= 10) return COLOR_MUTED;
+	return COLOR_ACCENT;
+}
+
+function buildTuning(width: number): ColumnTuning[] {
+	const out: ColumnTuning[] = new Array(width);
+	for (let i = 0; i < width; i++) {
+		const t = width === 1 ? 0.5 : i / (width - 1);
+		const envelope = trapezoidEnvelope(t) * columnShape(i);
+		const fall = FALL_MIN + columnHash(i) * (FALL_MAX - FALL_MIN);
+		out[i] = { envelope, fall };
+	}
+	return out;
+}
+
+// Rise-fast / hold / fall-slow per column. The latch refreshes on every
+// rising-or-stable tick so sustained loud audio keeps the column pinned to
+// peak; only when target drops below prev does the HOLD_TICKS countdown
+// start, and only after it expires does the column-specific gravity (release
+// time) take over. End result: bars freeze at the loudest recent moment for
+// ~600 ms, then start dropping at their per-column rates — the classic
+// peak-hold ballistic of Winamp-class meters.
+function advanceLevels(level: Float64Array, holdLeft: Uint8Array, tuning: ColumnTuning[], gain: number): void {
+	for (let i = 0; i < level.length; i++) {
+		const t = tuning[i]!;
+		const target = gain * t.envelope;
+		const prev = level[i]!;
+		if (target >= prev) {
+			level[i] = target;
+			holdLeft[i] = HOLD_TICKS;
+		} else if (holdLeft[i]! > 0) {
+			holdLeft[i] = holdLeft[i]! - 1;
+		} else {
+			level[i] = Math.max(0, prev - t.fall);
+		}
+	}
+}
+
+// Trapezoid centered at t=0.5: flat 1.0 across [0.5±PLATEAU_HALF_WIDTH], linear
+// fade to 0 over the next FADE_WIDTH, then hard zero at the very edges.
+function trapezoidEnvelope(t: number): number {
+	const d = Math.abs(t - 0.5);
+	if (d <= PLATEAU_HALF_WIDTH) return 1;
+	const fadeT = (d - PLATEAU_HALF_WIDTH) / FADE_WIDTH;
+	if (fadeT >= 1) return 0;
+	return 1 - fadeT;
+}
+
+// Deterministic per-column multiplier in [SHAPE_FLOOR, 1]. Two hash phases are
+// summed so adjacent columns vary like a frozen audio snapshot — dense peaks
+// and dips, no obvious periodicity.
+function columnShape(i: number): number {
+	const a = Math.sin(i * 12.9898 + 78.233) * 43758.5453;
+	const b = Math.sin(i * 7.523 + 41.31) * 13371.337;
+	const fa = a - Math.floor(a);
+	const fb = b - Math.floor(b);
+	const f = (fa + fb) / 2;
+	return SHAPE_FLOOR + (1 - SHAPE_FLOOR) * f;
+}
+
+// Independent per-column [0, 1) hash for fall rates — different sine phases
+// from columnShape so envelope-tall columns don't all share a single fall
+// speed.
+function columnHash(i: number): number {
+	const a = Math.sin(i * 97.13 + 12.345) * 43758.5453;
+	return a - Math.floor(a);
+}
+
+function quantize(level: number): number {
+	const idx = Math.round(level * MAX_AMP);
+	return idx < 0 ? 0 : idx > MAX_AMP ? MAX_AMP : idx;
+}

package/view/components/settings-field-view.ts

@@ -0,0 +1,77 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { StatefulView } from "../stateful-view.js";
+
+// Rows start at col 0 so the settings surface aligns with dictation
+// (transcript + status bar are also flush-left). The pointer occupies a fixed
+// 2-col slot so active/inactive rows share the same label start column.
+const ACTIVE_POINTER = "❯ ";
+const INACTIVE_POINTER = "  ";
+const VALUE_SEPARATOR = ": ";
+const EMPTY_PLACEHOLDER = "<unset>";
+const TRUNCATE_ELLIPSIS = "…";
+
+const COLOR_ACCENT = "accent";
+const COLOR_MUTED = "muted";
+const COLOR_DIM = "dim";
+const COLOR_SUCCESS = "success";
+
+export type SettingsFieldKind = { kind: "readonly"; value: string } | { kind: "toggle"; enabled: boolean };
+
+export interface SettingsFieldViewProps {
+	label: string;
+	active: boolean;
+	field: SettingsFieldKind;
+	/** Optional muted hint rendered on the next line when active. */
+	hint?: string;
+}
+
+export class SettingsFieldView implements StatefulView<SettingsFieldViewProps> {
+	private props: SettingsFieldViewProps = {
+		label: "",
+		active: false,
+		field: { kind: "readonly", value: "" },
+	};
+
+	constructor(private readonly theme: Theme) {}
+
+	setProps(props: SettingsFieldViewProps): void {
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const pointer = this.props.active ? this.theme.fg(COLOR_ACCENT, ACTIVE_POINTER) : INACTIVE_POINTER;
+		const labelText = this.props.active
+			? this.theme.fg(COLOR_ACCENT, this.theme.bold(this.props.label))
+			: this.props.label;
+		const head = `${pointer}${labelText}${VALUE_SEPARATOR}`;
+		const valueText = this.renderValue();
+		const headWidth = visibleWidth(head);
+		const valueWidth = Math.max(1, width - headWidth);
+		const clamped = truncateToWidth(valueText, valueWidth, TRUNCATE_ELLIPSIS, false);
+		const lines = [`${head}${clamped}`];
+		// Hints render unconditionally — gating on `active` made the form's row
+		// count change as focus moved between toggles, which translated to a
+		// visible jump of the bottom chrome each time the user pressed an arrow.
+		// A stable height is worth the extra noise of inactive hints.
+		const hint = this.props.hint;
+		if (hint) {
+			const hintIndent = " ".repeat(visibleWidth(ACTIVE_POINTER));
+			const hintLine = `${hintIndent}${this.theme.fg(COLOR_DIM, hint)}`;
+			lines.push(truncateToWidth(hintLine, width, TRUNCATE_ELLIPSIS, false));
+		}
+		return lines;
+	}
+
+	private renderValue(): string {
+		const f = this.props.field;
+		if (f.kind === "readonly") {
+			return f.value.length > 0 ? this.theme.fg(COLOR_MUTED, f.value) : this.theme.fg(COLOR_DIM, EMPTY_PLACEHOLDER);
+		}
+		return f.enabled ? this.theme.fg(COLOR_SUCCESS, "[ on ]") : this.theme.fg(COLOR_DIM, "[ off ]");
+	}
+}

package/view/components/settings-form-view.ts

@@ -0,0 +1,26 @@
+import type { StatefulView } from "../stateful-view.js";
+import type { SettingsFieldView } from "./settings-field-view.js";
+
+// The settings screen is a flat stack of rows: a read-only mic line and a
+// hallucination-filter toggle. No tabs — too few rows to justify chrome.
+export interface SettingsFormViewProps {}
+
+export interface SettingsFormViewConfig {
+	fields: ReadonlyArray<SettingsFieldView>;
+}
+
+export class SettingsFormView implements StatefulView<SettingsFormViewProps> {
+	constructor(private readonly config: SettingsFormViewConfig) {}
+
+	setProps(_props: SettingsFormViewProps): void {}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+		for (const view of this.config.fields) lines.push(...view.render(width));
+		return lines;
+	}
+}

package/view/components/splash-view.ts

@@ -0,0 +1,98 @@
+import { DynamicBorder, type Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { t } from "../../state/i18n-bridge.js";
+import type { StatefulView } from "../stateful-view.js";
+
+export const SPLASH_FRAMES = ["⠴", "⠦", "⠖", "⠲"] as const;
+export const SPLASH_FRAME_INTERVAL_MS = 160;
+
+export type SplashPhase =
+	| {
+			kind: "downloading";
+			message: string;
+			/** 0-100 integer when Content-Length was provided. */
+			percent?: number;
+			bytesReceived?: number;
+			totalBytes?: number;
+	  }
+	| { kind: "extracting"; message: string }
+	| { kind: "verifying"; message: string }
+	| { kind: "loading_engine" }
+	| { kind: "initializing_mic" };
+
+export interface SplashViewProps {
+	phase: SplashPhase;
+	frame: number;
+}
+
+const TRUNCATE_ELLIPSIS = "…";
+
+const COLOR_ACCENT = "accent";
+const COLOR_MUTED = "muted";
+
+function phaseLabel(phase: SplashPhase): string {
+	switch (phase.kind) {
+		case "downloading":
+			return appendDownloadProgress(phase.message, phase);
+		case "extracting":
+		case "verifying":
+			return phase.message;
+		case "loading_engine":
+			return t("splash.loading_engine", "Loading speech model…");
+		case "initializing_mic":
+			return t("splash.initializing_mic", "Initializing microphone…");
+	}
+}
+
+const BYTES_PER_MB = 1024 * 1024;
+
+function formatMB(bytes: number): string {
+	return `${(bytes / BYTES_PER_MB).toFixed(1)} MB`;
+}
+
+// Decorate the downloading label with whatever progress information we have:
+//   - percent + bytes when Content-Length was present
+//   - byte counter only when the server didn't send Content-Length
+//   - bare label on the very first emit before any chunk has arrived
+function appendDownloadProgress(
+	base: string,
+	progress: { percent?: number; bytesReceived?: number; totalBytes?: number },
+): string {
+	if (progress.bytesReceived === undefined) return base;
+	if (progress.totalBytes && progress.percent !== undefined) {
+		return `${base} ${progress.percent}% (${formatMB(progress.bytesReceived)} / ${formatMB(progress.totalBytes)})`;
+	}
+	return `${base} ${formatMB(progress.bytesReceived)}`;
+}
+
+/**
+ * Splash chrome mirrors the in-session layout: a divider line on top followed
+ * by a single status line. The status line uses the same `${glyph} ${label}`
+ * shape as `StatusBarView` (`● 0:42 …`) — a leading colored glyph, single
+ * space, then a muted label — so the splash feels like a quieter sibling of
+ * the dictation/settings chrome rather than a separate widget.
+ */
+export class SplashView implements StatefulView<SplashViewProps> {
+	private readonly divider: DynamicBorder;
+	private props: SplashViewProps = { phase: { kind: "loading_engine" }, frame: 0 };
+
+	constructor(private readonly theme: Theme) {
+		this.divider = new DynamicBorder((s) => theme.fg(COLOR_ACCENT, s));
+	}
+
+	setProps(props: SplashViewProps): void {
+		this.props = props;
+	}
+
+	handleInput(_data: string): void {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const frameChar = SPLASH_FRAMES[this.props.frame % SPLASH_FRAMES.length];
+		const spinner = this.theme.fg(COLOR_ACCENT, frameChar);
+		const label = this.theme.fg(COLOR_MUTED, phaseLabel(this.props.phase));
+		const statusLine = `${spinner} ${label}`;
+		return [...this.divider.render(width), truncateToWidth(statusLine, width, TRUNCATE_ELLIPSIS, false)];
+	}
+}