Timeline editor: CPU load visualization + UX improvements

Features:
- CPU load bar: Color-coded (green→yellow→red) effect density visualization
- Overlays under waveform to save space, always visible
- Constant load (1.0) per active effect, 0.1 beat resolution
- Add Effect button: Create new effects in selected sequence
- Delete buttons in properties panel for quick access
- Timeline favicon (green bars SVG)

Fixes:
- Handle drag no longer jumps on mousedown (offset tracking)
- Sequence name input accepts numbers (explicit inputmode)
- Start Time label corrected (beats, not seconds)

Updated timeline.seq with beat-based timing adjustments.

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

1 files changed, 16 insertions, 1 deletions

diff --git a/tools/timeline_editor/README.md b/tools/timeline_editor/README.md
index cc13a41..72b5ae0 100644
--- a/tools/timeline_editor/README.md
+++ b/tools/timeline_editor/README.md
@@ -17,13 +17,26 @@ Interactive web-based editor for `timeline.seq` files.
 - 🎼 Quantize grid (Off, 1/32, 1/16, 1/8, 1/4, 1/2, 1 beat)
 - 🎛️ BPM slider (60-200 BPM)
 - 🔄 Re-order sequences by time
-- 🗑️ Delete sequences/effects
+- ✨ Add effects to sequences
+- 🗑️ Delete sequences/effects (toolbar + properties panel)
+- 📊 **CPU load visualization** (color-coded effect density)
 - ▶️ Audio playback with auto-expand/collapse
 - 🎚️ Sticky audio track and timeline ticks
 - 🔴 **Playback indicator on waveform** (NEW)
 - 🎯 **Double-click seek during playback** (NEW)
 - 📍 **Click waveform to seek** (NEW)
 
+## CPU Load Visualization
+
+The editor displays a **CPU load bar** at the top (underneath audio waveform if loaded):
+- **Full-height bars** (80px) show effect density at each time point
+- **Color-coded:** Green (low) → Yellow (medium) → Red (high load)
+- **Load calculation:** Sum of all active effects across all sequences (1.0 per effect)
+- **Updates automatically** when effects/sequences are moved
+- **Collapsed sequences count** toward load
+
+This helps identify performance hotspots in your timeline.
+
 ## Usage
 
 1. **Open:** `open tools/timeline_editor/index.html` or double-click in browser
@@ -37,6 +50,8 @@ Interactive web-based editor for `timeline.seq` files.
    - Watch sequences auto-expand/collapse during playback
    - Red playback indicators on both timeline and waveform show current position
 5. **Edit:**
+   - **Add Effect:** Select sequence, click "✨ Add Effect" button
+   - **Delete:** Click item, use "🗑️ Delete Selected" or delete button in properties panel
    - Drag sequences/effects to reposition (works when collapsed or expanded)
    - Double-click anywhere on sequence to collapse/expand
    - Click item to edit properties in side panel