nixamp 0.1.0

package/src/audio.ts

@@ -0,0 +1,233 @@
+/**
+ * Decoding and playback, both by way of ffmpeg.
+ *
+ * One decode feeds both the speakers and the analyser: ffmpeg writes raw f32
+ * samples to our stdout pipe, we compute the spectrum from them and pass the
+ * same bytes to the output process. Running two decoders instead would drift
+ * apart within seconds and the bars would stop matching what you hear.
+ */
+import { spawn, spawnSync, type ChildProcess } from "node:child_process";
+
+export const RATE = 44100;
+export const CHANNELS = 2;
+
+export interface Track {
+  path: string;
+  title: string;
+  artist: string;
+  album: string;
+  /** Seconds; 0 when ffprobe could not tell us. */
+  duration: number;
+}
+
+export interface Tools {
+  ffmpeg: string[];
+  ffprobe: string[];
+  /** Argv prefix for the player, or null when nothing can make sound here. */
+  play: string[] | null;
+}
+
+function works(argv: string[]): boolean {
+  const [cmd, ...rest] = argv;
+  if (!cmd) return false;
+  const r = spawnSync(cmd, [...rest, "-version"], { encoding: "utf8", timeout: 10_000 });
+  return !r.error && r.status === 0;
+}
+
+/**
+ * Find the tools. A bare `ffmpeg` on PATH is tried first; mise shims are common
+ * on developer machines and need `mise exec` because the shim itself fails when
+ * no version is pinned.
+ */
+export function detectTools(): Tools {
+  const candidates = (name: string): string[][] => [
+    [name],
+    ["mise", "exec", `ffmpeg@latest`, "--", name],
+  ];
+  const pick = (name: string): string[] | null =>
+    candidates(name).find((argv) => works(argv)) ?? null;
+
+  const ffmpeg = pick("ffmpeg");
+  const ffprobe = pick("ffprobe");
+  const play = pick("ffplay");
+  return {
+    ffmpeg: ffmpeg ?? ["ffmpeg"],
+    ffprobe: ffprobe ?? ["ffprobe"],
+    play,
+  };
+}
+
+export function probe(tools: Tools, path: string): Track {
+  const [cmd, ...rest] = tools.ffprobe;
+  const fallback: Track = {
+    path,
+    title: path.split("/").pop() ?? path,
+    artist: "",
+    album: "",
+    duration: 0,
+  };
+  if (!cmd) return fallback;
+  const result = spawnSync(cmd, [
+    ...rest,
+    "-v", "quiet", "-print_format", "json",
+    "-show_format", "-show_entries", "format_tags=title,artist,album",
+    path,
+  ], { encoding: "utf8", timeout: 20_000, maxBuffer: 4 * 1024 * 1024 });
+  if (result.error || result.status !== 0) return fallback;
+  try {
+    const parsed = JSON.parse(result.stdout) as {
+      format?: { duration?: string; tags?: Record<string, string> };
+    };
+    const tags = parsed.format?.tags ?? {};
+    const lower: Record<string, string> = {};
+    for (const [k, v] of Object.entries(tags)) lower[k.toLowerCase()] = v;
+    return {
+      path,
+      title: lower.title || fallback.title,
+      artist: lower.artist ?? "",
+      album: lower.album ?? "",
+      duration: Number(parsed.format?.duration ?? 0) || 0,
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+export interface StreamHandlers {
+  /** Interleaved stereo f32 samples, as decoded. */
+  onSamples: (pcm: Float32Array) => void;
+  onEnd: (error?: string) => void;
+}
+
+/**
+ * A playing track: one ffmpeg decoding, one player consuming, and us in the
+ * middle reading every sample on its way past.
+ */
+export class Stream {
+  private decoder: ChildProcess | null = null;
+  private output: ChildProcess | null = null;
+  private stopped = false;
+  /**
+   * Which start each callback belongs to. A killed ffmpeg still fires `close`,
+   * and without this its "exited null" lands on the track that replaced it —
+   * so skipping a track would report an error and stop the player.
+   */
+  private generation = 0;
+  /** Samples handed to the output so far, per channel. */
+  private framesOut = 0;
+  /** Leftover bytes when a chunk does not divide into whole f32 samples. */
+  private tail: Buffer<ArrayBufferLike> = Buffer.alloc(0);
+
+  constructor(
+    private readonly tools: Tools,
+    private readonly handlers: StreamHandlers,
+  ) {}
+
+  /** Seconds of audio delivered so far. */
+  get position(): number {
+    return this.framesOut / RATE;
+  }
+
+  get silent(): boolean {
+    return this.tools.play === null;
+  }
+
+  start(track: Track, from = 0): void {
+    this.stop();
+    this.stopped = false;
+    const generation = ++this.generation;
+    this.framesOut = Math.round(from * RATE);
+
+    const [ff, ...ffRest] = this.tools.ffmpeg;
+    if (!ff) { this.handlers.onEnd("ffmpeg not found"); return; }
+
+    this.decoder = spawn(ff, [
+      ...ffRest,
+      "-hide_banner", "-loglevel", "error",
+      ...(from > 0 ? ["-ss", String(from)] : []),
+      "-i", track.path,
+      "-f", "f32le", "-ac", String(CHANNELS), "-ar", String(RATE), "-",
+    ], { stdio: ["ignore", "pipe", "pipe"] });
+
+    if (this.tools.play) {
+      const [player, ...playerRest] = this.tools.play;
+      this.output = spawn(player as string, [
+        ...playerRest,
+        "-hide_banner", "-loglevel", "quiet",
+        "-nodisp", "-autoexit",
+        "-f", "f32le", "-ac", String(CHANNELS), "-ar", String(RATE), "-i", "-",
+      ], { stdio: ["pipe", "ignore", "ignore"] });
+      // The player exiting first must not kill us with EPIPE.
+      this.output.stdin?.on("error", () => {});
+    }
+
+    let stderr = "";
+    this.decoder.stderr?.on("data", (c: Buffer) => { stderr += c.toString(); });
+
+    this.decoder.stdout?.on("data", (chunk: Buffer) => {
+      if (this.stopped || generation !== this.generation) return;
+      this.output?.stdin?.write(chunk);
+      const joined = this.tail.length ? Buffer.concat([this.tail, chunk]) : chunk;
+      const usable = joined.length - (joined.length % 4);
+      this.tail = usable === joined.length ? Buffer.alloc(0) : joined.subarray(usable);
+      if (usable === 0) return;
+      // Copy rather than view: the underlying buffer is reused by the stream.
+      const samples = new Float32Array(usable / 4);
+      for (let i = 0; i < samples.length; i++) samples[i] = joined.readFloatLE(i * 4);
+      this.framesOut += samples.length / CHANNELS;
+      this.handlers.onSamples(samples);
+    });
+
+    this.decoder.on("close", (code) => {
+      if (this.stopped || generation !== this.generation) return;
+      this.output?.stdin?.end();
+      this.handlers.onEnd(code === 0 ? undefined : stderr.trim() || `ffmpeg exited ${code}`);
+    });
+    this.decoder.on("error", (error) => {
+      if (this.stopped || generation !== this.generation) return;
+      this.handlers.onEnd(error.message);
+    });
+  }
+
+  stop(): void {
+    this.stopped = true;
+    // Anything still in flight from the last start belongs to nobody now.
+    this.generation++;
+    this.decoder?.kill("SIGKILL");
+    this.output?.stdin?.end();
+    this.output?.kill("SIGKILL");
+    this.decoder = null;
+    this.output = null;
+    this.tail = Buffer.alloc(0);
+  }
+}
+
+/** Left and right peak levels from an interleaved stereo frame, 0..1. */
+export function peaks(pcm: Float32Array): [number, number] {
+  let left = 0;
+  let right = 0;
+  for (let i = 0; i + 1 < pcm.length; i += 2) {
+    const l = Math.abs(pcm[i] as number);
+    const r = Math.abs(pcm[i + 1] as number);
+    if (l > left) left = l;
+    if (r > right) right = r;
+  }
+  return [Math.min(1, left), Math.min(1, right)];
+}
+
+/** Interleaved stereo down to mono, for the analyser. */
+export function toMono(pcm: Float32Array): Float32Array {
+  const mono = new Float32Array(Math.floor(pcm.length / CHANNELS));
+  for (let i = 0; i < mono.length; i++) {
+    mono[i] = (((pcm[i * 2] as number) + (pcm[i * 2 + 1] as number)) / 2);
+  }
+  return mono;
+}
+
+export function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return "--:--";
+  const total = Math.floor(seconds);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}

package/src/fft.ts

@@ -0,0 +1,165 @@
+/**
+ * The analyser: real audio in, spectrum bands out.
+ *
+ * An iterative radix-2 Cooley-Tukey FFT, which is enough for a visualiser and
+ * small enough to read. No dependency, because pulling a DSP library in for
+ * one transform would be the largest thing in the tree.
+ */
+
+/** Bit-reversal permutation table for a transform of size n (a power of two). */
+function reversalTable(n: number): Uint32Array {
+  const bits = Math.log2(n);
+  const table = new Uint32Array(n);
+  for (let i = 0; i < n; i++) {
+    let reversed = 0;
+    for (let b = 0; b < bits; b++) if (i & (1 << b)) reversed |= 1 << (bits - 1 - b);
+    table[i] = reversed;
+  }
+  return table;
+}
+
+export function isPowerOfTwo(n: number): boolean {
+  return n > 0 && (n & (n - 1)) === 0;
+}
+
+/**
+ * A Hann window, precomputed.
+ *
+ * Without one, a tone that does not complete a whole number of cycles in the
+ * frame leaks across every bin and the display turns to mush.
+ */
+export function hann(n: number): Float32Array {
+  const w = new Float32Array(n);
+  for (let i = 0; i < n; i++) w[i] = 0.5 * (1 - Math.cos((2 * Math.PI * i) / (n - 1)));
+  return w;
+}
+
+export class Analyser {
+  readonly size: number;
+  readonly sampleRate: number;
+  private readonly re: Float64Array;
+  private readonly im: Float64Array;
+  private readonly rev: Uint32Array;
+  private readonly window: Float32Array;
+  /** Magnitudes for bins 0..size/2, reused between frames. */
+  readonly magnitudes: Float32Array;
+
+  constructor(size = 2048, sampleRate = 44100) {
+    if (!isPowerOfTwo(size)) throw new Error(`FFT size must be a power of two, got ${size}`);
+    this.size = size;
+    this.sampleRate = sampleRate;
+    this.re = new Float64Array(size);
+    this.im = new Float64Array(size);
+    this.rev = reversalTable(size);
+    this.window = hann(size);
+    this.magnitudes = new Float32Array(size / 2 + 1);
+  }
+
+  /** Frequency at the centre of a bin. */
+  frequencyOf(bin: number): number {
+    return (bin * this.sampleRate) / this.size;
+  }
+
+  /**
+   * Transform one frame of mono samples. Shorter input is zero padded; longer
+   * is truncated, so a partial final frame still draws rather than throwing.
+   */
+  run(samples: Float32Array | number[]): Float32Array {
+    const { size, re, im, rev, window } = this;
+    for (let i = 0; i < size; i++) {
+      const s = (samples[rev[i] as number] as number | undefined) ?? 0;
+      re[i] = s * (window[rev[i] as number] as number);
+      im[i] = 0;
+    }
+
+    for (let len = 2; len <= size; len <<= 1) {
+      const step = (-2 * Math.PI) / len;
+      const half = len >> 1;
+      for (let i = 0; i < size; i += len) {
+        for (let j = 0; j < half; j++) {
+          const angle = step * j;
+          const wr = Math.cos(angle);
+          const wi = Math.sin(angle);
+          const a = i + j;
+          const b = a + half;
+          const tr = (re[b] as number) * wr - (im[b] as number) * wi;
+          const ti = (re[b] as number) * wi + (im[b] as number) * wr;
+          re[b] = (re[a] as number) - tr;
+          im[b] = (im[a] as number) - ti;
+          re[a] = (re[a] as number) + tr;
+          im[a] = (im[a] as number) + ti;
+        }
+      }
+    }
+
+    const half = size / 2;
+    // 2/size normalises a full-scale sine to 1.0 in its bin; DC and Nyquist
+    // appear once rather than twice, so they are not doubled.
+    for (let k = 0; k <= half; k++) {
+      const scale = k === 0 || k === half ? 1 / size : 2 / size;
+      this.magnitudes[k] = Math.hypot(re[k] as number, im[k] as number) * scale;
+    }
+    return this.magnitudes;
+  }
+
+  /** The loudest bin, ignoring DC. Useful for tests and for a tuner readout. */
+  peakBin(): number {
+    let best = 1;
+    for (let k = 2; k < this.magnitudes.length; k++) {
+      if ((this.magnitudes[k] as number) > (this.magnitudes[best] as number)) best = k;
+    }
+    return best;
+  }
+}
+
+/**
+ * Edges of `count` logarithmically spaced bands between two frequencies.
+ *
+ * Linear bins would put nearly every bar above 10 kHz, where there is little to
+ * see; hearing is roughly logarithmic and the display should match it.
+ */
+export function bandEdges(count: number, sampleRate: number, size: number, low = 40, high = 16000): number[] {
+  const nyquist = sampleRate / 2;
+  const top = Math.min(high, nyquist);
+  const edges: number[] = [];
+  for (let i = 0; i <= count; i++) {
+    const hz = low * (top / low) ** (i / count);
+    edges.push(Math.min(size / 2, Math.max(1, Math.round((hz * size) / sampleRate))));
+  }
+  return edges;
+}
+
+/** Peak magnitude in each band, in decibels, normalised to 0..1. */
+export function bands(
+  magnitudes: Float32Array,
+  edges: number[],
+  floorDb = -70,
+): number[] {
+  const out: number[] = [];
+  for (let i = 0; i < edges.length - 1; i++) {
+    const lo = edges[i] as number;
+    const hi = Math.max(lo + 1, edges[i + 1] as number);
+    let peak = 0;
+    for (let k = lo; k < hi && k < magnitudes.length; k++) {
+      const m = magnitudes[k] as number;
+      if (m > peak) peak = m;
+    }
+    const db = 20 * Math.log10(Math.max(peak, 1e-9));
+    out.push(Math.max(0, Math.min(1, (db - floorDb) / -floorDb)));
+  }
+  return out;
+}
+
+/**
+ * Bars fall smoothly and rise instantly.
+ *
+ * A spectrum drawn straight from each frame flickers badly at 30fps. Winamp's
+ * analyser rose immediately and decayed, which is both prettier and easier to
+ * read; this is that, as one pass over the previous frame.
+ */
+export function decay(previous: number[], next: number[], fall = 0.12): number[] {
+  return next.map((value, i) => {
+    const was = previous[i] ?? 0;
+    return value >= was ? value : Math.max(value, was - fall);
+  });
+}

package/src/main.ts

@@ -0,0 +1,311 @@
+/**
+ * nixamp — it really whips the terminal's ass.
+ *
+ *   bunx nixamp ~/Music
+ *   bunx nixamp track.flac
+ *
+ * ffmpeg decodes; we read every sample on its way to the speakers and draw it.
+ */
+import { createApp, themes, type BrailleCanvas, type Container, type KeyEvent, type Theme } from "@profullstack/hqtui";
+import { resolve } from "node:path";
+import {
+  detectTools, formatTime, peaks, RATE, Stream, toMono,
+  type Tools, type Track,
+} from "./audio.ts";
+import { Analyser, bandEdges, bands, decay } from "./fft.ts";
+import { version } from "./meta.ts";
+import { displayName, loadPlaylist } from "./playlist.ts";
+import { DEFAULT_PORT } from "./server.ts";
+
+const FFT_SIZE = 2048;
+export const BAND_COUNT = 24;
+
+export interface State {
+  tracks: Track[];
+  index: number;
+  offset: number;
+  playing: boolean;
+  position: number;
+  bars: number[];
+  peakHold: number[];
+  levels: [number, number];
+  note: string;
+  silent: boolean;
+  root: string;
+}
+
+export function createState(tracks: Track[], root: string, silent: boolean): State {
+  return {
+    tracks,
+    index: 0,
+    offset: 0,
+    playing: false,
+    position: 0,
+    bars: new Array(BAND_COUNT).fill(0),
+    peakHold: new Array(BAND_COUNT).fill(0),
+    levels: [0, 0],
+    note: silent ? "No audio output found (install ffplay) — analyser only." : "",
+    silent,
+    root,
+  };
+}
+
+export function current(state: State): Track | undefined {
+  return state.tracks[state.index];
+}
+
+/** The classic block ramp, low to high. */
+const RAMP = "▁▂▃▄▅▆▇█";
+
+export function barGlyph(value: number): string {
+  const i = Math.max(0, Math.min(RAMP.length - 1, Math.round(value * (RAMP.length - 1))));
+  return RAMP[i] as string;
+}
+
+const HELP = `nixamp — it really whips the terminal's ass.
+
+  nixamp [path]                  play a directory or a file in the terminal
+  nixamp serve [path] [options]  play here, and hand out a browser remote
+  nixamp update [version]        re-run the installer, keeping your choices
+  nixamp uninstall [--yes]       remove everything the installer created
+
+Options for serve:
+  -p, --port N     port to listen on (default ${DEFAULT_PORT})
+  -h, --host HOST  address to bind (default 127.0.0.1; 0.0.0.0 for the LAN)
+      --web DIR    directory of built PWA files to serve at /
+      --no-media   do not stream the library's bytes to remotes
+
+  -v, --version    print the version
+      --help       print this
+`;
+
+/**
+ * The whole CLI, as a function. `bin/nixamp.mjs` imports and calls it: relying
+ * on `import.meta.main` there would leave the installed binary doing nothing,
+ * because the flag is false in a module that was imported rather than run.
+ */
+export async function main(): Promise<void> {
+  const [first, ...rest] = process.argv.slice(2);
+
+  if (first === "serve") {
+    const { serve } = await import("./server.ts");
+    await serve(rest, version());
+    return;
+  }
+  if (first === "update" || first === "uninstall") {
+    const manage = await import("./manage.ts");
+    process.exitCode = first === "update" ? manage.update(rest) : manage.uninstall(rest);
+    return;
+  }
+  if (first === "--version" || first === "-v") { console.log(version()); return; }
+  if (first === "--help") { console.log(HELP); return; }
+
+  const target = resolve(first ?? ".");
+  const tools = detectTools();
+  const tracks = loadPlaylist(tools, target);
+  if (tracks.length === 0) {
+    console.error(`nixamp: no audio files under ${target}`);
+    process.exit(1);
+  }
+
+  const state = createState(tracks, target, tools.play === null);
+  const app = await createApp({ theme: themes.matrix, title: "nixamp", quitKeys: ["ctrl+c"] });
+
+  const analyser = new Analyser(FFT_SIZE, RATE);
+  const edges = bandEdges(BAND_COUNT, RATE, FFT_SIZE);
+  // Samples accumulate until there are enough for one transform.
+  let pending = new Float32Array(0);
+
+  const stream = new Stream(tools, {
+    onSamples: (pcm) => {
+      state.levels = peaks(pcm);
+      state.position = stream.position;
+      const mono = toMono(pcm);
+      const joined = new Float32Array(pending.length + mono.length);
+      joined.set(pending);
+      joined.set(mono, pending.length);
+      let at = 0;
+      while (joined.length - at >= FFT_SIZE) {
+        analyser.run(joined.subarray(at, at + FFT_SIZE));
+        state.bars = decay(state.bars, bands(analyser.magnitudes, edges));
+        state.peakHold = state.peakHold.map((p, i) =>
+          Math.max((state.bars[i] as number), p - 0.02));
+        at += FFT_SIZE;
+      }
+      pending = joined.subarray(at);
+      app.invalidate();
+    },
+    onEnd: (error) => {
+      if (error) { state.note = error; state.playing = false; app.invalidate(); return; }
+      next(1);
+    },
+  });
+
+  const play = (): void => {
+    const track = current(state);
+    if (!track) return;
+    pending = new Float32Array(0);
+    state.position = 0;
+    state.playing = true;
+    state.note = state.silent ? "No audio output found (install ffplay) — analyser only." : "";
+    stream.start(track);
+    app.invalidate();
+  };
+
+  const next = (delta: number): void => {
+    if (state.tracks.length === 0) return;
+    state.index = (state.index + delta + state.tracks.length) % state.tracks.length;
+    if (state.playing) play(); else { state.position = 0; app.invalidate(); }
+  };
+
+  const stopAll = (): void => {
+    stream.stop();
+    state.playing = false;
+    state.bars = new Array(BAND_COUNT).fill(0);
+    state.peakHold = new Array(BAND_COUNT).fill(0);
+    state.levels = [0, 0];
+    state.position = 0;
+    app.invalidate();
+  };
+
+  app.on("key", (event: KeyEvent) => {
+    switch (event.key) {
+      case "q": stream.stop(); app.quit(); return;
+      case "space": state.playing ? stopAll() : play(); return;
+      case "enter": play(); return;
+      case "s": stopAll(); return;
+      case "n": case "right": next(1); return;
+      case "p": case "left": next(-1); return;
+      case "up":
+        state.index = Math.max(0, state.index - 1);
+        if (state.playing) play(); else app.invalidate();
+        return;
+      case "down":
+        state.index = Math.min(state.tracks.length - 1, state.index + 1);
+        if (state.playing) play(); else app.invalidate();
+        return;
+    }
+  });
+
+  app.on("exit", () => stream.stop());
+  app.render((args) => view(args, state));
+  await app.start();
+}
+
+
+/**
+ * The bars, on a braille canvas: four vertical pixels per cell, so a bar moves
+ * smoothly instead of stepping through eight block glyphs.
+ *
+ * Each band gets a column of pixels with a one-pixel gap, and its peak is held
+ * as a single floating pixel that sinks — the detail that made Winamp's
+ * analyser readable rather than just busy.
+ */
+export function drawSpectrum(canvas: BrailleCanvas, state: State): void {
+  const high = canvas.height;
+  const wide = canvas.width;
+  if (high <= 0 || wide <= 0) return;
+  const perBand = Math.max(1, Math.floor(wide / state.bars.length));
+  state.bars.forEach((value, i) => {
+    const x0 = i * perBand;
+    const top = Math.round((1 - value) * (high - 1));
+    for (let x = x0; x < x0 + Math.max(1, perBand - 1) && x < wide; x++) {
+      canvas.vline(x, top, high - 1);
+      canvas.pixel(x, Math.round((1 - (state.peakHold[i] as number)) * (high - 1)));
+    }
+  });
+}
+
+export function view(
+  { ui, theme, height }: { ui: Container; theme: Theme; height: number },
+  state: State,
+): void {
+  const track = current(state);
+  const duration = track?.duration ?? 0;
+  const progress = duration > 0 ? Math.min(1, state.position / duration) : 0;
+
+  ui.row({ size: 1 }, (header) => {
+    header.text(" ⣿ NIXAMP", { fg: theme.title, bold: true, size: 11 });
+    header.text(state.playing ? "▶ PLAYING" : "■ STOPPED", {
+      fg: state.playing ? theme.success : theme.muted,
+      size: 12,
+    });
+    header.text(`${state.tracks.length} tracks  ${state.root} `, { fg: theme.muted, align: "right" });
+  });
+
+  ui.panel({ title: "Now Playing", size: 6 }, (p) => {
+    if (!track) { p.label("Nothing loaded."); return; }
+    p.text(displayName(track), { fg: theme.accent, bold: true, size: 1 });
+    p.text(track.album || "—", { fg: theme.muted, size: 1 });
+    p.row({ size: 1 }, (r) => {
+      r.text(formatTime(state.position), { fg: theme.foreground, size: 7 });
+      r.progress({ value: progress, color: theme.success });
+      r.text(duration > 0 ? formatTime(duration) : "--:--", {
+        fg: theme.muted, size: 7, align: "right",
+      });
+    });
+  });
+
+  ui.row({ size: height - 10, gap: 1 }, (row) => {
+    row.panel({ title: "Spectrum Analyser", width: "1.3fr" }, (p) => {
+      // Braille gives four vertical pixels per cell, so the bars move smoothly
+      // rather than stepping through eight block glyphs.
+      p.canvas((canvas) => {
+        drawSpectrum(canvas, state);
+      }, { color: theme.success });
+      p.row({ size: 1 }, (r) => {
+        r.text(state.bars.map(barGlyph).join(""), { fg: theme.success });
+        r.text(
+          `L${"▮".repeat(Math.round(state.levels[0] * 6)).padEnd(6, "·")} ` +
+          `R${"▮".repeat(Math.round(state.levels[1] * 6)).padEnd(6, "·")}`,
+          { fg: theme.accent, align: "right" },
+        );
+      });
+    });
+
+    row.panel({ title: `Playlist (${state.tracks.length})`, width: "1fr" }, (p) => {
+      if (state.tracks.length === 0) { p.label("Empty."); return; }
+      p.table({
+        rows: state.tracks.map((t, i) => ({
+          n: String(i + 1).padStart(2, " "),
+          name: displayName(t),
+          time: t.duration > 0 ? formatTime(t.duration) : "--:--",
+          playing: i === state.index && state.playing,
+        })),
+        selected: state.index,
+        offset: state.offset,
+        followSelection: true,
+        scrollbar: true,
+        onScroll: (d) => { state.offset = Math.max(0, state.offset + d); },
+        header: false,
+        columns: [
+          { key: "n", title: "", width: 3, color: theme.muted },
+          {
+            key: "name", title: "", min: 8,
+            color: (row) => (row.playing ? theme.success : theme.foreground),
+          },
+          { key: "time", title: "", width: 6, align: "right", color: theme.muted },
+        ],
+      });
+    });
+  });
+
+  if (state.note !== "") ui.text(state.note, { fg: theme.warning, size: 1 });
+
+  ui.statusBar({
+    items: [
+      { key: "Space", label: state.playing ? "Stop" : "Play", active: state.playing },
+      { key: "↑↓", label: "Select" },
+      { key: "n/p", label: "Next/Prev" },
+      { key: "Enter", label: "Play" },
+      { key: "q", label: "Quit" },
+    ],
+  });
+}
+
+if (import.meta.main) {
+  main().catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
+}