feat(player): click-to-seek progress bar; 2-row waveform bars with peak normalization

- ProgressBar: full-width played/remaining bar in the player pane, click-to-seek;
  waveform no longer handles seeking or the played/future color split (pure visual)
- bars: 2 terminal rows per bar (16 levels) via barChars, partial block in the
  top row so the column renders continuously
- fix bars maxing at audio start: disable cava autosens (silence gain-ramp),
  pre-warm the malloc'd FFT window with zeros, skip partial FFT windows
- createBarScaler peak follower + power curve replaces cava autosens for
  level-to-height mapping (src/utils/bar-mapping.ts, unit-tested)

src/pages/Player/PlayerPage.tsx

@@ -12,6 +12,7 @@
 
 import { Show } from "solid-js";
 import { PlaybackControls } from "./PlaybackControls";
+import { ProgressBar } from "./ProgressBar";
 import { RealtimeWaveform } from "./RealtimeWaveform";
 import { useAudio } from "@/hooks/useAudio";
 import { useAppStore } from "@/stores/app";
@@ -79,6 +80,8 @@ export function PlayerPage() {
 							{ep().description?.slice(0, 500) ?? "No description available."}
 						</text>
 
+						<ProgressBar />
+
 						<RealtimeWaveform
 							visualizerConfig={(() => {
 								const viz = useAppStore().state().settings.visualizer;

src/pages/Player/ProgressBar.tsx

@@ -0,0 +1,56 @@
+/**
+ * ProgressBar — one-row, click-to-seek playback progress bar for the
+ * player pane. Played portion renders as full blocks (█) in the theme's
+ * primary color, the remainder as light shade blocks (░) in the muted
+ * color. The header time/percent text lives in PlayerPage — this is only
+ * the bar itself.
+ */
+
+import { useTerminalDimensions } from "@opentui/solid";
+import { useAudio } from "@/hooks/useAudio";
+import { useTheme } from "@/context/ThemeContext";
+
+// ── Component ────────────────────────────────────────────────────────
+
+export function ProgressBar() {
+	const audio = useAudio();
+	const { theme } = useTheme();
+	const dimensions = useTerminalDimensions();
+
+	// Full content width of the player pane: the player is a 2-pane row
+	// (parent 1/5 + current 4/5 of the terminal width). Subtract ~8 chars
+	// of border/padding chrome (same math as RealtimeWaveform's numBars).
+	const width = () => Math.max(8, Math.floor((dimensions().width * 4) / 5) - 8);
+
+	const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+
+	const playedChars = () => {
+		const duration = audio.duration();
+		if (duration <= 0) return 0;
+		return Math.round(clamp01(audio.position() / duration) * width());
+	};
+
+	const remainingColor = theme.muted || theme.text;
+
+	return (
+		<box
+			border
+			borderColor={theme.border}
+			padding={0}
+			flexDirection="row"
+			gap={0}
+			onMouseDown={(e: { x: number }) => {
+				const duration = audio.duration();
+				if (duration <= 0) return;
+				// e.x = 0 is the box border; content starts at x = 1.
+				const ratio = Math.max(0, Math.min(1, (e.x - 1) / width()));
+				void audio.seek(ratio * duration);
+			}}
+		>
+			<text fg={theme.primary}>{"\u2588".repeat(playedChars())}</text>
+			<text fg={remainingColor}>
+				{"\u2591".repeat(width() - playedChars())}
+			</text>
+		</box>
+	);
+}

src/pages/Player/RealtimeWaveform.tsx

@@ -15,6 +15,7 @@ import {
 	type CavaCoreConfig,
 } from "@/utils/cavacore";
 import { AudioStreamReader } from "@/utils/audio-stream-reader";
+import { BAR_LEVELS, barChars, createBarScaler } from "@/utils/bar-mapping";
 import { useAudio } from "@/hooks/useAudio";
 import { useTheme } from "@/context/ThemeContext";
 import { PANE_RATIO } from "@/utils/navigation";
@@ -25,19 +26,6 @@ export type RealtimeWaveformProps = {
 	visualizerConfig?: Partial<CavaCoreConfig>;
 };
 
-/** Unicode lower block elements: space (silence) through full block (max) */
-const BARS = [
-	" ",
-	"\u2581",
-	"\u2582",
-	"\u2583",
-	"\u2584",
-	"\u2585",
-	"\u2586",
-	"\u2587",
-	"\u2588",
-];
-
 /** Target frame interval in ms (~30 fps) */
 const FRAME_INTERVAL = 33;
 
@@ -53,6 +41,11 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
 	// Frequency bar values (0.0–1.0 per bar)
 	const [barData, setBarData] = createSignal<number[]>([]);
 
+	// Peak-follower scaler replaces cava's autosens: normalizes each FFT
+	// frame against the running peak so a loud start can't pin every bar
+	// at full height and quiet content still gets normalized up.
+	const scaler = createBarScaler();
+
 	let cava: CavaCore | null = null;
 	let reader: AudioStreamReader | null = null;
 	let frameTimer: ReturnType<typeof setInterval> | null = null;
@@ -91,10 +84,10 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
 	// ── Smooth position clock ──────────────────────────────────────────
 	//
 	// audio.position() updates at the useAudio poll rate (~150ms). Between
-	// polls, interpolate the position from wall time so the FFT window (and
-	// the played/future split) tracks the audio continuously instead of
-	// stepping. The 0.5s cap prevents extrapolating far beyond reality when
-	// the player stalls (e.g. network re-buffering).
+	// polls, interpolate the position from wall time so the FFT window
+	// tracks the audio continuously instead of stepping. The 0.5s cap
+	// prevents extrapolating far beyond reality when the player stalls
+	// (e.g. network re-buffering).
 
 	let lastPolledPosition = 0;
 	let lastPolledAt = 0;
@@ -121,14 +114,26 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
 		// Initialize cavacore with current resolution + any overrides.
 		// bars is width-derived (see numBars); visualizerConfig supplies the
 		// audio-processing params (noise reduction, cutoffs, etc.).
+		// autosens is disabled (after the spread so it always wins): cava's
+		// autosens gain-ramps during silence then clips everything to 1.0
+		// when audio arrives — the JS peak scaler handles dynamics instead.
 		const config: CavaCoreConfig = {
 			bars: numBars(),
 			sampleRate: 44100,
 			channels: 1,
 			...props.visualizerConfig,
+			autosens: 0,
 		};
 		cava.init(config);
 
+		// Pre-warm the FFT window: libcavacore's window is malloc'd
+		// uninitialized, so the first real frame would FFT garbage and
+		// render full-scale bars. One zero frame the size of the whole
+		// input buffer clears it (at 44.1kHz mono the window is 8192
+		// samples — FFTbassbufferSize × channels; a 512-sample frame would
+		// leave the tail garbage).
+		cava.execute(new Float64Array(8192));
+
 		// Pre-allocate sample read buffer
 		sampleBuffer = new Float64Array(SAMPLES_PER_FRAME);
 
@@ -167,16 +172,13 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
 		// ties the bars to what's actually playing.
 		const target = smoothPosition();
 		const count = reader.read(sampleBuffer, target);
-		if (count === 0) return;
+		// Never feed a partial FFT window to cava.
+		if (count < sampleBuffer.length) return;
 
-		const input =
-			count < sampleBuffer.length
-				? sampleBuffer.subarray(0, count)
-				: sampleBuffer;
-		const output = cava.execute(input);
+		const output = cava.execute(sampleBuffer);
 
-		// Copy bar values to a new array for the signal
-		setBarData(Array.from(output as Float64Array));
+		// Normalize against the running peak and copy to a new array
+		setBarData(scaler(output));
 	};
 
 	createEffect(
@@ -236,11 +238,6 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
 
 	// ── Rendering ──────────────────────────────────────────────────────
 
-	const playedRatio = () =>
-		audio.duration() <= 0
-			? 0
-			: Math.min(1, smoothPosition() / audio.duration());
-
 	const renderLine = () => {
 		const bars = barData();
 		const count = numBars();
@@ -248,51 +245,27 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
 		if (bars.length === 0) {
 			const placeholder = ".".repeat(count);
 			return (
-				<box flexDirection="row" gap={0}>
-					<text fg="#3b4252">{placeholder}</text>
+				<box flexDirection="column" gap={0}>
+					<text fg={theme.primary}>{placeholder}</text>
+					<text fg={theme.primary}>{placeholder}</text>
 				</box>
 			);
 		}
 
-		const played = Math.floor(count * playedRatio());
-		const playedColor = audio.isPlaying() ? "#6fa8ff" : "#7d8590";
-		const futureColor = "#3b4252";
-
-		const playedChars = bars
-			.slice(0, played)
-			.map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
-			.join("");
-
-		const futureChars = bars
-			.slice(played)
-			.map((v) => BARS[Math.min(BARS.length - 1, Math.floor(v * BARS.length))])
-			.join("");
+		const pairs = bars.map((v) => barChars(Math.floor(v * BAR_LEVELS)));
+		const top = pairs.map((pair) => pair.top).join("");
+		const bottom = pairs.map((pair) => pair.bottom).join("");
 
 		return (
-			<box flexDirection="row" gap={0}>
-				<text fg={playedColor}>{playedChars || " "}</text>
-				<text fg={futureColor}>{futureChars || " "}</text>
+			<box flexDirection="column" gap={0}>
+				<text fg={theme.primary}>{top}</text>
+				<text fg={theme.primary}>{bottom}</text>
 			</box>
 		);
 	};
 
-	const handleClick = (event: { x: number }) => {
-		const count = numBars();
-		const ratio = event.x / count;
-		const next = Math.max(
-			0,
-			Math.min(audio.duration(), Math.round(audio.duration() * ratio)),
-		);
-		audio.seek(next);
-	};
-
 	return (
-		<box
-			border
-			borderColor={theme.border}
-			padding={1}
-			onMouseDown={handleClick}
-		>
+		<box border borderColor={theme.border} padding={1}>
 			{renderLine()}
 		</box>
 	);

src/utils/bar-mapping.ts

@@ -0,0 +1,102 @@
+/**
+ * Pure bar-scaling helpers for the terminal waveform.
+ *
+ * barChars maps a 0..16 level to the two characters of a 2-row bar built
+ * from Unicode lower block elements (U+2581..U+2588). The partial block
+ * sits in the TOP row (its glyph bottom edge = row bottom), so a full
+ * block below makes a visually continuous 2-cell column — the "double the
+ * default height" requirement (each bar = 2 terminal rows, 16 heights).
+ *
+ * createBarScaler is a stateful fast-attack / slow-release peak follower
+ * that replaces cava's autosens: a loud start cannot pin every bar at
+ * full height (the peak follower absorbs it) and quiet content gets
+ * normalized up.
+ */
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export interface BarScalerOptions {
+	/** Peak follower decay per frame (default: 0.985) */
+	release?: number;
+	/** Power curve applied after normalization (default: 0.7) */
+	curve?: number;
+	/** Silence threshold — below this the input is treated as silent (default: 1e-6) */
+	epsilon?: number;
+}
+
+// ── Constants ────────────────────────────────────────────────────────
+
+/** Number of discrete bar heights (2 rows × 8 block levels). */
+export const BAR_LEVELS = 16;
+
+/** Lower block elements, index 0 = space (silence) through full block (max). */
+const LOWER = [
+	" ",
+	"\u2581",
+	"\u2582",
+	"\u2583",
+	"\u2584",
+	"\u2585",
+	"\u2586",
+	"\u2587",
+	"\u2588",
+];
+
+// ── Bar mapping ──────────────────────────────────────────────────────
+
+/**
+ * Map a bar level (0..16) to the two characters that render it as a
+ * 2-row column: top row + bottom row.
+ *
+ * level 0        → { top: " ", bottom: " " }
+ * level 1..8     → { top: " ", bottom: LOWER[level] }
+ * level 9..16    → { top: LOWER[level - 8], bottom: "\u2588" }
+ */
+export function barChars(level: number): { top: string; bottom: string } {
+	const raw = Math.floor(level);
+	const lvl = Number.isFinite(raw)
+		? Math.max(0, Math.min(BAR_LEVELS, raw))
+		: 0;
+
+	if (lvl === 0) return { top: " ", bottom: " " };
+	if (lvl <= 8) return { top: " ", bottom: LOWER[lvl] };
+	return { top: LOWER[lvl - 8], bottom: "\u2588" };
+}
+
+// ── Peak-follower scaler ─────────────────────────────────────────────
+
+const clamp01 = (value: number): number => Math.max(0, Math.min(1, value));
+
+/**
+ * Create a stateful bar scaler. Each call normalizes its input against a
+ * peak follower (instant attack, multiplicative release), then applies a
+ * power curve so low-energy content remains visible. Returns a new
+ * number[] per call.
+ */
+export function createBarScaler(
+	opts?: BarScalerOptions,
+): (values: ArrayLike<number>) => number[] {
+	const release = opts?.release ?? 0.985;
+	const curve = opts?.curve ?? 0.7;
+	const epsilon = opts?.epsilon ?? 1e-6;
+	let peak = 0;
+
+	return (values: ArrayLike<number>): number[] => {
+		let frameMax = 0;
+		for (let i = 0; i < values.length; i++) {
+			const magnitude = Math.abs(values[i]);
+			if (magnitude > frameMax) frameMax = magnitude;
+		}
+
+		// Fast attack, slow release
+		peak = frameMax > peak ? frameMax : peak * release;
+
+		const gain = peak > epsilon ? 1 / peak : 0;
+
+		const output = new Array<number>(values.length);
+		for (let i = 0; i < values.length; i++) {
+			output[i] = Math.pow(clamp01(values[i] * gain), curve);
+		}
+		return output;
+	};
+}