1 files changed, 29 insertions, 108 deletions
diff --git a/tools/timeline_editor/README.md b/tools/timeline_editor/README.md
index adf9d4e..a76a5ed 100644
--- a/tools/timeline_editor/README.md
+++ b/tools/timeline_editor/README.md
@@ -1,73 +1,35 @@
 # Timeline Editor
 
-Interactive web-based editor for `demo.seq` timeline files.
+Interactive web-based editor for `timeline.seq` files.
 
 ## Features
 
-✅ **Implemented:**
-- 📂 Load/save `demo.seq` files
-- 📊 Visual Gantt-style timeline
-- 🎯 Drag & drop sequences along timeline
-- 🎯 Drag & drop effects along timeline
-- 🎯 Resize effects with left/right handles
-- ⏱️ Edit timing (start/end times)
+- 📂 Load/save `timeline.seq` files
+- 📊 Visual Gantt-style timeline with sticky time markers
+- 🎯 Drag & drop sequences and effects
+- 🎯 Resize effects with handles
+- 📦 Collapsible sequences (double-click to collapse)
+- 📏 Vertical grid lines synchronized with time ticks
+- ⏱️ Edit timing and properties
 - ⚙️ Stack-order based priority system
-- ⚙️ Edit effect class names and constructor arguments
-- 🔍 Zoom in/out (10% - 200%)
-- 🎵 Audio waveform visualization (WAV files)
-- 📋 Real-time statistics
+- 🔍 Zoom (10%-500%) with mouse wheel + Ctrl/Cmd
+- 🎵 Audio waveform visualization
+- 🎼 Snap-to-beat mode
+- 🔄 Re-order sequences by time
 - 🗑️ Delete sequences/effects
-- ➕ Add new sequences
-- 🎼 Snap-to-beat mode with beat markers
 
 ## Usage
 
-1. **Open the editor:**
-   ```bash
-   open tools/timeline_editor/index.html
-   ```
-   Or double-click `index.html` in Finder.
-
-2. **Load a timeline:**
-   - Click "📂 Load demo.seq"
-   - Select your `assets/demo.seq` file
-
-3. **Edit the timeline:**
-   - **Drag sequences/effects** to move them along the timeline
-   - **Click an item** to select it and view properties
-   - **Edit properties** in the panel below
-   - **Click "Apply"** to save property changes
-
-4. **Save your changes:**
-   - Click "💾 Save demo.seq"
-   - Choose where to save the modified file
-
-5. **Load audio waveform (optional):**
-   - Click "🎵 Load Audio (WAV)" to visualize your music track
-   - The waveform appears above the timeline for visual reference
-   - Use it to align sequences with beats, drops, and musical phrases
-   - Click "✖ Clear Audio" to remove the waveform
-
-   **Tip:** Generate a WAV file from your demo using:
-   ```bash
-   ./build/demo64k --dump_wav output.wav
-   ```
-   Then load `output.wav` in the timeline editor to align sequences with the actual audio output.
-
-6. **Zoom controls:**
-   - Use the zoom slider to adjust timeline scale
-   - Higher zoom = more pixels per second
-   - Waveform scales automatically with zoom
-
-7. **Snap-to-beat mode:**
-   - Enable "Show Beats" checkbox to display beat markers
-   - Sequences and effects snap to beat boundaries when dragged
-   - Helps maintain musical timing
-
-## Keyboard Shortcuts
-
-- **Delete key**: Delete selected item (when implemented)
-- **Escape**: Deselect current item
+1. **Open:** `open tools/timeline_editor/index.html` or double-click in browser
+2. **Load timeline:** Click "📂 Load timeline.seq" → select `workspaces/main/timeline.seq`
+3. **Edit:**
+   - Drag sequences/effects to reposition
+   - Double-click sequence header to collapse/expand
+   - Click item to edit properties in side panel
+   - Drag effect handles to resize
+4. **Zoom:** Ctrl/Cmd + mouse wheel (zooms at cursor position)
+5. **Audio:** Load WAV file for waveform visualization
+6. **Save:** Click "💾 Save timeline.seq"
 
 ## File Format
 
@@ -106,52 +68,11 @@ SEQUENCE 4b 1 "Beat Drop"
   EFFECT = ParticlesEffect 0.0 2.0   # Priority 0 (same layer)
 ```
 
-## Color Coding
-
-- **Blue boxes**: Sequences (container for effects)
-- **Gray boxes**: Effects (visual elements)
-- **Green highlight**: Selected sequence
-- **Orange highlight**: Selected effect
-
-## Tips
-
-- **Sequences** have absolute start times
-- **Effects** have start/end times **relative to their sequence**
-- Priority determines rendering order (higher = rendered later = on top)
-- Effect constructor arguments are passed as-is to the C++ code
-
-## Limitations
-
-- No preview rendering (this is intentional - it's just a timeline editor)
-- No automatic overlap detection yet
-- No undo/redo (coming soon)
-- Cannot add effects to sequences (manually edit properties for now)
-
-## Future Enhancements
-
-- [ ] Undo/redo functionality
-- [ ] Add effect button (create new effects within sequences)
-- [ ] Overlap detection warnings
-- [ ] Timeline playback indicator
-- [ ] Multiple file comparison
-- [ ] Export to different formats
-- [ ] **Music.track visualization**: Parse `music.track` file and overlay tracker patterns/samples on timeline for alignment assistance
-
-## Technical Details
-
-- Pure HTML/CSS/JavaScript (no dependencies)
-- No backend required
-- Works offline
-- All processing happens in the browser
-- Files are saved via browser download API
-
-## Integration
-
-After editing in the timeline editor:
-
-1. Save the modified `demo.seq`
-2. Copy it to `assets/demo.seq`
-3. Rebuild the project: `cmake --build build`
-4. The new timeline will be compiled into the demo
+## Technical Notes
 
-No code changes needed - the `seq_compiler` automatically processes the updated file.
+- Pure HTML/CSS/JavaScript (no dependencies, works offline)
+- Sequences have absolute times, effects are relative to parent sequence
+- Priority determines render order (higher = on top)
+- Collapsed sequences show 35px title bar, expanded show full effect stack
+- Time markers sticky at top when scrolling
+- Vertical grid lines aid alignment