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.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>
+  );
+}