feat: add waveform generation and timeline display

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/timeline/waveformRenderer.ts

@@ -0,0 +1,44 @@
+import type { TimelineState } from './renderer';
+
+export function drawWaveform(
+  ctx: CanvasRenderingContext2D,
+  state: TimelineState,
+  peaks: number[],
+  duration: number,
+  y: number,
+  height: number
+): void {
+  if (peaks.length === 0 || duration <= 0) return;
+
+  const { width, visibleStart, visibleEnd } = state;
+  const visibleRange = visibleEnd - visibleStart;
+
+  ctx.fillStyle = '#89b4fa44';
+  ctx.strokeStyle = '#89b4fa88';
+  ctx.lineWidth = 1;
+
+  ctx.beginPath();
+  ctx.moveTo(0, y + height);
+
+  for (let px = 0; px < width; px++) {
+    const startSample = Math.floor(
+      ((visibleStart + ((px - 0.5) / width) * visibleRange) / duration) * peaks.length
+    );
+    const endSample = Math.floor(
+      ((visibleStart + ((px + 0.5) / width) * visibleRange) / duration) * peaks.length
+    );
+
+    let maxPeak = 0;
+    for (let i = Math.max(0, startSample); i <= Math.min(endSample, peaks.length - 1); i++) {
+      maxPeak = Math.max(maxPeak, peaks[i]);
+    }
+
+    const barHeight = maxPeak * height;
+    ctx.lineTo(px, y + height - barHeight);
+  }
+
+  ctx.lineTo(width, y + height);
+  ctx.closePath();
+  ctx.fill();
+  ctx.stroke();
+}