feat(waveform): precompute and store peaks in DB for instant rendering

Store waveform peaks inline in audio_versions (JSONB columns) so WaveSurfer
can render the waveform immediately on page load without waiting for audio
decode. Adds a 100-point mini-waveform for version selector thumbnails.

Backend:
- Migration 0006: adds waveform_peaks and waveform_peaks_mini JSONB columns
- Worker generates both resolutions (500-pt full, 100-pt mini) during transcode
  and stores them directly in DB — replaces file-based waveform_url approach
- AudioVersionRead schema exposes both fields inline (no extra HTTP round-trip)
- GET /versions/{id}/waveform reads from DB; adds ?resolution=mini support

Frontend:
- audioService.initialize() accepts peaks and calls ws.load(url, Float32Array)
  so waveform renders instantly without audio decode
- useWaveform hook threads peaks option through to audioService
- PlayerPanel passes waveform_peaks from the active version to the hook
- New MiniWaveform SVG component (no WaveSurfer) renders mini peaks in the
  version selector buttons

Fix: docker-compose.dev.yml now runs alembic upgrade head before starting
the API server, so a fresh volume gets the full schema automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/components/MiniWaveform.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { MiniWaveform } from "./MiniWaveform";
+
+describe("MiniWaveform", () => {
+  it("renders an SVG element", () => {
+    const peaks = Array.from({ length: 100 }, (_, i) => i / 100);
+    const { container } = render(<MiniWaveform peaks={peaks} width={120} height={32} />);
+    const svg = container.querySelector("svg");
+    expect(svg).not.toBeNull();
+  });
+
+  it("renders the correct number of bars matching peaks length", () => {
+    const peaks = Array.from({ length: 100 }, (_, i) => i / 100);
+    const { container } = render(<MiniWaveform peaks={peaks} width={120} height={32} />);
+    const rects = container.querySelectorAll("rect");
+    expect(rects.length).toBe(100);
+  });
+
+  it("renders a placeholder when peaks is null", () => {
+    const { container } = render(<MiniWaveform peaks={null} width={120} height={32} />);
+    const svg = container.querySelector("svg");
+    expect(svg).not.toBeNull();
+    // With null peaks, no bars — just the placeholder rect
+    const rects = container.querySelectorAll("rect");
+    expect(rects.length).toBe(1); // single placeholder bar
+  });
+
+  it("renders a placeholder when peaks is empty array", () => {
+    const { container } = render(<MiniWaveform peaks={[]} width={120} height={32} />);
+    const rects = container.querySelectorAll("rect");
+    expect(rects.length).toBe(1);
+  });
+
+  it("applies correct SVG dimensions", () => {
+    const peaks = [0.5, 0.5];
+    const { container } = render(<MiniWaveform peaks={peaks} width={200} height={48} />);
+    const svg = container.querySelector("svg");
+    expect(svg?.getAttribute("width")).toBe("200");
+    expect(svg?.getAttribute("height")).toBe("48");
+  });
+
+  it("uses the provided color for bars", () => {
+    const peaks = [0.5, 0.5];
+    const { container } = render(
+      <MiniWaveform peaks={peaks} width={100} height={32} color="#ff0000" />
+    );
+    const rect = container.querySelector("rect");
+    expect(rect?.getAttribute("fill")).toBe("#ff0000");
+  });
+});

web/src/components/MiniWaveform.tsx

@@ -0,0 +1,62 @@
+/**
+ * MiniWaveform — pure SVG component for rendering waveform_peaks_mini.
+ *
+ * Renders pre-computed 100-point peaks as vertical bars. No WaveSurfer dependency —
+ * lightweight enough to use in library/song list views for every song card.
+ *
+ * Props:
+ *   peaks   — array of 0-1 normalized peak values (ideally 100 points), or null
+ *   width   — SVG width in px
+ *   height  — SVG height in px
+ *   color   — bar fill color (default: teal accent)
+ */
+
+interface MiniWaveformProps {
+  peaks: number[] | null;
+  width: number;
+  height: number;
+  color?: string;
+}
+
+export function MiniWaveform({
+  peaks,
+  width,
+  height,
+  color = "#14b8a6",
+}: MiniWaveformProps) {
+  const isEmpty = !peaks || peaks.length === 0;
+
+  if (isEmpty) {
+    return (
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+        <rect x={0} y={0} width={width} height={height} fill="rgba(255,255,255,0.06)" rx={2} />
+      </svg>
+    );
+  }
+
+  const barCount = peaks.length;
+  const gap = 1;
+  const barWidth = Math.max(1, (width - gap * (barCount - 1)) / barCount);
+  const midY = height / 2;
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+      {peaks.map((peak, i) => {
+        const barHeight = Math.max(1, peak * height);
+        const x = i * (barWidth + gap);
+        const y = midY - barHeight / 2;
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={y}
+            width={barWidth}
+            height={barHeight}
+            fill={color}
+            rx={0.5}
+          />
+        );
+      })}
+    </svg>
+  );
+}

web/src/components/PlayerPanel.tsx

@@ -4,6 +4,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/client";
 import type { MemberRead } from "../api/auth";
 import { useWaveform } from "../hooks/useWaveform";
+import { MiniWaveform } from "./MiniWaveform";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -24,6 +25,8 @@ interface SongVersion {
   version_number: number;
   label: string | null;
   analysis_status: string;
+  waveform_peaks: number[] | null;
+  waveform_peaks_mini: number[] | null;
 }
 
 interface SongComment {
@@ -214,12 +217,14 @@ export function PlayerPanel({ songId, bandId, onBack }: PlayerPanelProps) {
   });
 
   const activeVersion = selectedVersionId ?? versions?.[0]?.id ?? null;
+  const activeVersionData = versions?.find((v) => v.id === activeVersion) ?? versions?.[0] ?? null;
 
   // ── Waveform ──────────────────────────────────────────────────────────────
 
   const { isPlaying, isReady, currentTime, duration, play, pause, seekTo, error } = useWaveform(waveformRef, {
     url: activeVersion ? `/api/v1/versions/${activeVersion}/stream` : null,
-    peaksUrl: activeVersion ? `/api/v1/versions/${activeVersion}/waveform` : null,
+    peaksUrl: null,
+    peaks: activeVersionData?.waveform_peaks ?? null,
     songId,
     bandId,
   });
@@ -304,7 +309,15 @@ export function PlayerPanel({ songId, bandId, onBack }: PlayerPanelProps) {
           <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
             {versions.map((v) => (
               <button key={v.id} onClick={() => setSelectedVersionId(v.id)}
-                style={{ background: v.id === activeVersion ? "rgba(20,184,166,0.12)" : "transparent", border: `1px solid ${v.id === activeVersion ? "rgba(20,184,166,0.3)" : "rgba(255,255,255,0.09)"}`, borderRadius: 6, padding: "4px 10px", color: v.id === activeVersion ? "#2dd4bf" : "rgba(232,233,240,0.38)", cursor: "pointer", fontSize: 11, fontFamily: "monospace" }}>
+                style={{ background: v.id === activeVersion ? "rgba(20,184,166,0.12)" : "transparent", border: `1px solid ${v.id === activeVersion ? "rgba(20,184,166,0.3)" : "rgba(255,255,255,0.09)"}`, borderRadius: 6, padding: "4px 10px", color: v.id === activeVersion ? "#2dd4bf" : "rgba(232,233,240,0.38)", cursor: "pointer", fontSize: 11, fontFamily: "monospace", display: "flex", alignItems: "center", gap: 6 }}>
+                {v.waveform_peaks_mini && (
+                  <MiniWaveform
+                    peaks={v.waveform_peaks_mini}
+                    width={32}
+                    height={16}
+                    color={v.id === activeVersion ? "#2dd4bf" : "rgba(232,233,240,0.25)"}
+                  />
+                )}
                 v{v.version_number}{v.label ? ` · ${v.label}` : ""}
               </button>
             ))}