From efa612380c7314e004ceb6126a2e4090e94b51e8 Mon Sep 17 00:00:00 2001
From: Claude <claude@groll.cloud>
Date: Mon, 6 Apr 2026 23:34:32 +0000
Subject: [PATCH] feat(04-01): TimelineCanvas class + CSS + app.js wiring

- Create lightsync/frontend/timeline/timeline.js with TimelineCanvas class
  - Per-device horizontal tracks with track headers and time axis
  - HiDPI canvas rendering with devicePixelRatio handling
  - Waveform peaks background layer, beat marks overlay, cue block rendering
  - Playback cursor synced to audio.currentTime via requestAnimationFrame
  - Auto-scroll when cursor approaches right edge
  - Mouse wheel scrolling on timeline canvas
  - loadTracks(), loadWaveform(), loadBeats() data loading methods
  - Empty state messages when no devices or audio loaded
- Add timeline CSS to style.css (toolbar, canvas, inspector strip, snap button)
- Wire timeline into app.js: import, initTimeline(), zoom/beat-offset/snap controls
- Remove old animation-grid click listener (element no longer exists in main-area)
- Populate animation palette dynamically in sidebar with 7 animation types
---
 lightsync/frontend/app.js               |  74 +++++-
 lightsync/frontend/style.css            | 130 ++++++++++
 lightsync/frontend/timeline/timeline.js | 328 ++++++++++++++++++++++++
 3 files changed, 519 insertions(+), 13 deletions(-)
 create mode 100644 lightsync/frontend/timeline/timeline.js

diff --git a/lightsync/frontend/app.js b/lightsync/frontend/app.js
index 3a1b4aa..60e2932 100644
--- a/lightsync/frontend/app.js
+++ b/lightsync/frontend/app.js
@@ -1,6 +1,8 @@
 // LightSync frontend — controller UI
 // Browser <audio> handles playback; server receives position ticks and sends beat events
 
+import { TimelineCanvas } from './timeline/timeline.js';
+
 const WS_URL = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`;
 
 // ── API helpers ──────────────────────────────────────────────────────────────
@@ -196,19 +198,6 @@ document.getElementById('btn-load')?.addEventListener('click', async () => {
     fetch(`/api/audio/beats?path=${encodeURIComponent(path)}`).catch(() => {});
 });
 
-// ── Animation tiles ──────────────────────────────────────────────────────────
-
-let selectedAnim = 'beat_pulse';
-
-document.getElementById('animation-grid')?.addEventListener('click', (e) => {
-    const tile = e.target.closest('.anim-tile');
-    if (!tile) return;
-    document.querySelectorAll('.anim-tile').forEach(t => t.classList.remove('active'));
-    tile.classList.add('active');
-    selectedAnim = tile.dataset.anim;
-    client.send({ type: 'select_animation', animation: selectedAnim });
-});
-
 // ── Devices ──────────────────────────────────────────────────────────────────
 
 async function loadDevices() {
@@ -260,3 +249,62 @@ document.getElementById('add-device-form')?.addEventListener('submit', async (e)
 // ── Init ─────────────────────────────────────────────────────────────────────
 
 wireAudio();
+
+// ── Timeline ─────────────────────────────────────────────────────────────────
+
+let timeline = null;
+
+function initTimeline() {
+    const canvas = document.getElementById('timeline-canvas');
+    const audio = document.getElementById('player');
+    if (!canvas || !audio) return;
+
+    timeline = new TimelineCanvas(canvas, audio);
+
+    // Load device tracks
+    fetch('/api/devices').then(r => r.json()).then(devices => {
+        timeline.loadTracks(devices);
+    }).catch(e => console.warn('[timeline]', e));
+
+    // When audio loads, fetch waveform + beats
+    audio.addEventListener('loadedmetadata', () => {
+        const src = audio.src;
+        const filename = src.split('/').pop();
+        const path = `/app/shows/${filename}`;
+        timeline.audioDuration = audio.duration;
+        timeline.loadWaveform(path);
+        timeline.loadBeats(path);
+    });
+
+    // Zoom slider
+    document.getElementById('zoom-slider')?.addEventListener('input', (e) => {
+        timeline.pixelsPerSecond = parseFloat(e.target.value);
+    });
+
+    // Beat offset
+    document.getElementById('beat-offset')?.addEventListener('input', (e) => {
+        timeline.calibrationOffset = parseFloat(e.target.value) || 0.03;
+    });
+
+    // Snap toggle
+    document.getElementById('btn-snap')?.addEventListener('click', (e) => {
+        timeline.snapEnabled = !timeline.snapEnabled;
+        e.target.classList.toggle('active', timeline.snapEnabled);
+    });
+
+    // Populate animation palette in sidebar
+    const palette = document.getElementById('animation-palette');
+    if (palette) {
+        const anims = ['chase', 'pulse', 'rainbow', 'strobe', 'color_wipe', 'fire', 'solid'];
+        palette.innerHTML = anims.map(name => `
+            <button class="anim-tile" data-anim="${name}" draggable="true">
+                <span class="anim-cursor">&gt;</span>
+                <span class="anim-name">${name.toUpperCase().replace('_', ' ')}</span>
+            </button>
+        `).join('');
+    }
+
+    timeline.startRenderLoop();
+}
+
+initTimeline();
diff --git a/lightsync/frontend/style.css b/lightsync/frontend/style.css
index f810c55..496d877 100644
--- a/lightsync/frontend/style.css
+++ b/lightsync/frontend/style.css
@@ -354,3 +354,133 @@ button:hover {
 
 .text-dim    { color: var(--text-dim); }
 .text-accent { color: var(--text-accent); }
+
+/* ── Timeline ──────────────────────────────────── */
+#timeline-canvas {
+    flex: 1;
+    display: block;
+    min-height: 0;
+    cursor: default;
+}
+
+.timeline-toolbar {
+    height: 32px;
+    background: var(--bg-panel-dark);
+    border-bottom: 1px solid var(--border-dim);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 12px;
+    flex-shrink: 0;
+}
+
+.toolbar-field {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.toolbar-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    letter-spacing: 0.1em;
+    white-space: nowrap;
+}
+
+.toolbar-unit {
+    font-size: 10px;
+    color: var(--text-dim);
+}
+
+.toolbar-sep {
+    width: 1px;
+    height: 20px;
+    background: var(--border-dim);
+    flex-shrink: 0;
+}
+
+#zoom-slider {
+    width: 100px;
+    accent-color: var(--accent);
+    height: 3px;
+}
+
+#beat-offset {
+    width: 70px;
+    font-size: 12px;
+    padding: 2px 4px;
+}
+
+.snap-btn.active {
+    background: var(--accent);
+    color: var(--bg-primary);
+    border-color: var(--accent);
+}
+
+/* ── Block Inspector Strip ─────────────────────── */
+.block-inspector {
+    height: 40px;
+    background: var(--bg-panel-dark);
+    border-top: 1px solid var(--border-dim);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 12px;
+    flex-shrink: 0;
+}
+
+.inspector-label {
+    color: var(--text-accent);
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    flex-shrink: 0;
+    min-width: 120px;
+}
+
+.inspector-field {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    letter-spacing: 0.1em;
+}
+
+.inspector-field input,
+.inspector-field select {
+    font-size: 12px;
+    padding: 2px 4px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border-dim);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+}
+
+.inspector-field input[type="number"] {
+    width: 60px;
+}
+
+.inspector-color-swatch {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--border-dim);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.inspector-remove {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 16px;
+    cursor: pointer;
+    padding: 0 4px;
+}
+.inspector-remove:hover {
+    color: #ff3333;
+    border: none;
+}
diff --git a/lightsync/frontend/timeline/timeline.js b/lightsync/frontend/timeline/timeline.js
new file mode 100644
index 0000000..a775dcf
--- /dev/null
+++ b/lightsync/frontend/timeline/timeline.js
@@ -0,0 +1,328 @@
+// TimelineCanvas — DAW-style canvas timeline renderer for LightSync
+// Renders per-device tracks, waveform background, beat marks, cue blocks,
+// and a realtime playback cursor synced to an HTML5 audio element.
+
+const PIXELS_PER_SECOND = 100;  // default, adjustable via zoom
+const TRACK_HEIGHT = 48;
+const HEADER_WIDTH = 140;
+const TIME_AXIS_HEIGHT = 24;
+
+class TimelineCanvas {
+    constructor(canvasEl, audioEl) {
+        this.canvas = canvasEl;
+        this.ctx = canvasEl.getContext('2d');
+        this.audio = audioEl;
+
+        this.pixelsPerSecond = PIXELS_PER_SECOND;
+        this.scrollX = 0;
+        this.tracks = [];          // [{device_id, device_name, strip_type, cues: []}]
+        this.waveformPeaks = [];
+        this.audioDuration = 0;
+        this.beatTimes = [];
+        this.calibrationOffset = 0.03;
+        this.snapEnabled = true;
+        this.selectedBlock = null;
+        this._dragState = null;
+        this._onSelectBlock = null;  // callback(cue, trackIndex) for inspector
+
+        this._resizeCanvas();
+        window.addEventListener('resize', () => this._resizeCanvas());
+
+        // Scroll via wheel
+        this.canvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            this.scrollX = Math.max(0, this.scrollX + e.deltaX + e.deltaY);
+        }, { passive: false });
+    }
+
+    // ── Coordinate helpers ────────────────────────────────────────────────────
+
+    timeToX(t) {
+        return HEADER_WIDTH + t * this.pixelsPerSecond - this.scrollX;
+    }
+
+    xToTime(x) {
+        return (x - HEADER_WIDTH + this.scrollX) / this.pixelsPerSecond;
+    }
+
+    trackIndexToY(i) {
+        return TIME_AXIS_HEIGHT + i * TRACK_HEIGHT;
+    }
+
+    yToTrackIndex(y) {
+        if (y < TIME_AXIS_HEIGHT) return -1;
+        return Math.floor((y - TIME_AXIS_HEIGHT) / TRACK_HEIGHT);
+    }
+
+    // ── Canvas resize (HiDPI) ─────────────────────────────────────────────────
+
+    _resizeCanvas() {
+        const dpr = window.devicePixelRatio || 1;
+        const rect = this.canvas.getBoundingClientRect();
+        this.canvas.width = rect.width * dpr;
+        this.canvas.height = rect.height * dpr;
+        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    // ── Render loop ───────────────────────────────────────────────────────────
+
+    startRenderLoop() {
+        const loop = () => {
+            this.render();
+            requestAnimationFrame(loop);
+        };
+        requestAnimationFrame(loop);
+    }
+
+    render() {
+        const ctx = this.ctx;
+        const dpr = window.devicePixelRatio || 1;
+        const W = this.canvas.width / dpr;
+        const H = this.canvas.height / dpr;
+
+        // 1. Background
+        ctx.fillStyle = '#0a0a0a';
+        ctx.fillRect(0, 0, W, H);
+
+        // Empty state
+        if (this.tracks.length === 0) {
+            ctx.fillStyle = '#555555';
+            ctx.font = '12px monospace';
+            ctx.textAlign = 'center';
+            ctx.fillText('NO DEVICES — add a device in the sidebar to create tracks', W / 2, H / 2);
+            ctx.textAlign = 'left';
+            this._drawTimeAxis(ctx, W, H);
+            this._drawTrackHeaders(ctx, W, H);
+            return;
+        }
+
+        if (this.audioDuration === 0) {
+            ctx.fillStyle = '#555555';
+            ctx.font = '12px monospace';
+            ctx.textAlign = 'center';
+            ctx.fillText('LOAD AUDIO — use the transport bar to load a file', W / 2, H / 2);
+            ctx.textAlign = 'left';
+        }
+
+        // 2. Track row banding
+        this.tracks.forEach((_, i) => {
+            const y = this.trackIndexToY(i);
+            ctx.fillStyle = i % 2 === 0 ? '#0a0a0a' : '#0c0c0c';
+            ctx.fillRect(HEADER_WIDTH, y, W - HEADER_WIDTH, TRACK_HEIGHT);
+        });
+
+        // 3. Waveform background
+        if (this.waveformPeaks.length > 0 && this.audioDuration > 0) {
+            const totalH = this.tracks.length * TRACK_HEIGHT;
+            const midY = TIME_AXIS_HEIGHT + totalH / 2;
+            ctx.fillStyle = '#1a3a3a';
+            for (let i = 0; i < this.waveformPeaks.length; i++) {
+                const t = (i / this.waveformPeaks.length) * this.audioDuration;
+                const x = this.timeToX(t);
+                if (x < HEADER_WIDTH || x > W) continue;
+                const peak = this.waveformPeaks[i];
+                const h = peak * totalH * 0.4;
+                ctx.fillRect(x, midY - h, 1, h * 2);
+            }
+        }
+
+        // 4. Beat marks
+        if (this.beatTimes.length > 0) {
+            ctx.strokeStyle = 'rgba(0, 255, 255, 0.4)';
+            ctx.lineWidth = 1;
+            for (const beatTime of this.beatTimes) {
+                const displayTime = beatTime - this.calibrationOffset;
+                const x = this.timeToX(displayTime);
+                if (x < HEADER_WIDTH || x > W) continue;
+                ctx.beginPath();
+                ctx.moveTo(x, TIME_AXIS_HEIGHT);
+                ctx.lineTo(x, H);
+                ctx.stroke();
+            }
+        }
+
+        // 5. Block rendering
+        this.tracks.forEach((track, trackIdx) => {
+            const y = this.trackIndexToY(trackIdx);
+            for (const cue of track.cues) {
+                const x = this.timeToX(cue.timestamp);
+                const w = (cue.duration || 4.0) * this.pixelsPerSecond;
+                if (x + w < HEADER_WIDTH || x > W) continue;
+
+                const isSelected = this.selectedBlock === cue;
+                ctx.fillStyle = isSelected ? '#0d3a3a' : '#0a2a2a';
+                ctx.fillRect(x, y + 1, w, TRACK_HEIGHT - 2);
+
+                ctx.strokeStyle = isSelected ? '#00ffff' : '#1a4a4a';
+                ctx.lineWidth = isSelected ? 1.5 : 1;
+                ctx.strokeRect(x, y + 1, w, TRACK_HEIGHT - 2);
+
+                // Label
+                if (w > 20) {
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.rect(x + 2, y + 1, w - 4, TRACK_HEIGHT - 2);
+                    ctx.clip();
+                    ctx.fillStyle = '#00ffff';
+                    ctx.font = '10px monospace';
+                    ctx.textAlign = 'left';
+                    const label = (cue.animation || 'CUE').toUpperCase();
+                    ctx.fillText(label, x + 6, y + TRACK_HEIGHT / 2 + 4);
+                    ctx.restore();
+                }
+            }
+        });
+
+        // 6. Drag ghost
+        if (this._dragState && this._dragState.ghost) {
+            const g = this._dragState.ghost;
+            ctx.fillStyle = 'rgba(0, 255, 255, 0.15)';
+            ctx.fillRect(g.x, g.y, g.w, g.h);
+            ctx.strokeStyle = '#00ffff';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(g.x, g.y, g.w, g.h);
+        }
+
+        // 7. Track headers (drawn over track rows)
+        this._drawTrackHeaders(ctx, W, H);
+
+        // 8. Time axis
+        this._drawTimeAxis(ctx, W, H);
+
+        // 9. Playback cursor + auto-scroll
+        if (!this.audio.paused) {
+            const cursorX = this.timeToX(this.audio.currentTime);
+
+            // Auto-scroll: if cursor approaches right edge, shift viewport
+            if (cursorX > W * 0.8) {
+                this.scrollX = HEADER_WIDTH + this.audio.currentTime * this.pixelsPerSecond - W * 0.2;
+                this.scrollX = Math.max(0, this.scrollX);
+            }
+
+            const cursorXAfterScroll = this.timeToX(this.audio.currentTime);
+            if (cursorXAfterScroll >= HEADER_WIDTH && cursorXAfterScroll <= W) {
+                ctx.strokeStyle = '#00ffff';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(cursorXAfterScroll, TIME_AXIS_HEIGHT);
+                ctx.lineTo(cursorXAfterScroll, H);
+                ctx.stroke();
+            }
+        }
+    }
+
+    _drawTrackHeaders(ctx, W, H) {
+        // Header background
+        ctx.fillStyle = '#0f0f0f';
+        ctx.fillRect(0, TIME_AXIS_HEIGHT, HEADER_WIDTH, H - TIME_AXIS_HEIGHT);
+
+        // Separator lines + labels
+        ctx.strokeStyle = '#1a4a4a';
+        ctx.lineWidth = 1;
+        this.tracks.forEach((track, i) => {
+            const y = this.trackIndexToY(i);
+
+            // Bottom border of track row
+            ctx.beginPath();
+            ctx.moveTo(0, y + TRACK_HEIGHT);
+            ctx.lineTo(HEADER_WIDTH, y + TRACK_HEIGHT);
+            ctx.stroke();
+
+            // Device name label
+            ctx.fillStyle = '#cccccc';
+            ctx.font = '12px monospace';
+            ctx.textAlign = 'left';
+            const label = track.device_name || `Device ${i + 1}`;
+            // Clip to header width
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, y, HEADER_WIDTH - 4, TRACK_HEIGHT);
+            ctx.clip();
+            ctx.fillText(label, 8, y + TRACK_HEIGHT / 2 + 4);
+            ctx.restore();
+        });
+
+        // Right border of header area
+        ctx.beginPath();
+        ctx.moveTo(HEADER_WIDTH, TIME_AXIS_HEIGHT);
+        ctx.lineTo(HEADER_WIDTH, H);
+        ctx.stroke();
+    }
+
+    _drawTimeAxis(ctx, W, H) {
+        // Time axis background
+        ctx.fillStyle = '#080808';
+        ctx.fillRect(0, 0, W, TIME_AXIS_HEIGHT);
+
+        ctx.strokeStyle = '#1a4a4a';
+        ctx.fillStyle = '#555555';
+        ctx.font = '10px monospace';
+        ctx.textAlign = 'left';
+        ctx.lineWidth = 1;
+
+        const visibleStart = Math.max(0, this.xToTime(HEADER_WIDTH));
+        const visibleEnd = this.xToTime(W);
+
+        // Draw second marks
+        const firstSec = Math.ceil(visibleStart);
+        for (let sec = firstSec; sec <= visibleEnd; sec++) {
+            const x = this.timeToX(sec);
+            const isMajor = sec % 10 === 0;
+            const isMid = sec % 5 === 0;
+            const tickH = isMajor ? 10 : (isMid ? 7 : 4);
+
+            ctx.beginPath();
+            ctx.moveTo(x, TIME_AXIS_HEIGHT - tickH);
+            ctx.lineTo(x, TIME_AXIS_HEIGHT);
+            ctx.stroke();
+
+            if (isMajor || (isMid && this.pixelsPerSecond >= 40)) {
+                const m = Math.floor(sec / 60);
+                const s = sec % 60;
+                const label = m > 0 ? `${m}:${String(s).padStart(2, '0')}` : `${s}s`;
+                ctx.fillText(label, x + 2, TIME_AXIS_HEIGHT - 2);
+            }
+        }
+
+        // Bottom border
+        ctx.strokeStyle = '#1a4a4a';
+        ctx.beginPath();
+        ctx.moveTo(0, TIME_AXIS_HEIGHT);
+        ctx.lineTo(W, TIME_AXIS_HEIGHT);
+        ctx.stroke();
+    }
+
+    // ── Data loading ──────────────────────────────────────────────────────────
+
+    loadTracks(devices) {
+        this.tracks = devices.map(d => ({
+            device_id: d.id,
+            device_name: d.name,
+            strip_type: d.strip_type,
+            cues: [],
+        }));
+    }
+
+    async loadWaveform(audioPath) {
+        try {
+            const res = await fetch(`/api/audio/waveform?path=${encodeURIComponent(audioPath)}&peaks=2000`);
+            const data = await res.json();
+            this.waveformPeaks = data.peaks || [];
+        } catch (e) {
+            console.warn('[waveform]', e);
+        }
+    }
+
+    async loadBeats(audioPath) {
+        try {
+            const res = await fetch(`/api/audio/beats?path=${encodeURIComponent(audioPath)}`);
+            const data = await res.json();
+            // API returns 'beats' field (list of timestamps in seconds)
+            this.beatTimes = data.beats || data.beat_times || [];
+        } catch (e) {
+            console.warn('[beats]', e);
+        }
+    }
+}
+
+export { TimelineCanvas };