222 lines
19 KiB
Markdown
222 lines
19 KiB
Markdown
---
|
||
phase: 04-timeline-editor
|
||
verified: 2026-04-06T23:59:00Z
|
||
status: passed
|
||
score: 6/6 must-haves verified
|
||
gaps: []
|
||
human_verification:
|
||
- test: "Drag animation from ANIMATIONS palette onto a device track"
|
||
expected: "Block appears at the drop position (snapped to nearest beat if beats loaded); inspector shows animation name, color, speed, direction, length"
|
||
why_human: "Requires running browser with audio loaded and device registered — cannot verify drag-and-drop gesture programmatically"
|
||
- test: "Move a block by dragging its center, release near a beat position"
|
||
expected: "Block snaps to the nearest beat position (within 100ms threshold) on mouseup"
|
||
why_human: "Mouse event simulation with beat data requires live browser"
|
||
- test: "Resize a block by dragging the right edge; drag left edge (should move left edge while right edge stays fixed)"
|
||
expected: "Right drag extends duration only; left drag shifts timestamp and reduces duration, minimum 0.5s enforced"
|
||
why_human: "Requires live canvas interaction"
|
||
- test: "Perform 50+ block operations (place/move/resize/delete), then Ctrl+Z 50 times"
|
||
expected: "All operations revert correctly; timeline returns to initial state"
|
||
why_human: "Requires extended interaction in browser"
|
||
- test: "Place two blocks overlapping on the same track"
|
||
expected: "Second placement is rejected; no block appears at the overlapping position"
|
||
why_human: "Requires live drag-and-drop on canvas"
|
||
- test: "Load audio file; observe DETECTING BEATS... text, then beat marks appear"
|
||
expected: "Cyan vertical lines appear at beat positions; BEAT OFFSET slider shifts them; BPM label updates in header"
|
||
why_human: "Requires audio file and backend librosa analysis"
|
||
- test: "Select a block, open inspector, change color via color swatch"
|
||
expected: "Block fill on canvas updates to new color; Ctrl+Z reverts the color change"
|
||
why_human: "Requires native browser color picker interaction"
|
||
- test: "Click remove button in inspector"
|
||
expected: "Block is deleted, inspector hides, Ctrl+Z restores the block"
|
||
why_human: "Requires live block selection state"
|
||
- test: "Container rebuild and deployment: docker compose build && docker compose up -d"
|
||
expected: "Running container has timeline.py in /app/lightsync/api/ and all frontend timeline modules; all Phase 4 features accessible in browser"
|
||
why_human: "Container is currently running a stale image from before Phase 4 — rebuild required to deploy the changes"
|
||
---
|
||
|
||
# Phase 4: Timeline Editor Verification Report
|
||
|
||
**Phase Goal:** Build a fully interactive timeline editor where users can visually place, move, resize, and configure animation blocks on a per-device track canvas with beat-sync support.
|
||
**Verified:** 2026-04-06T23:59:00Z
|
||
**Status:** PASSED (with deployment note)
|
||
**Re-verification:** No — initial verification
|
||
|
||
---
|
||
|
||
## Goal Achievement
|
||
|
||
### Observable Truths
|
||
|
||
| # | Truth | Status | Evidence |
|
||
|---|-------|--------|----------|
|
||
| 1 | Per-device horizontal tracks display on a time axis; blocks can be placed from palette | VERIFIED | `TimelineCanvas.loadTracks()` builds tracks from `/api/devices`; `handleDrop()` creates `PlaceBlockCommand` at drop coordinates with snap; `dragstart`/`dragover`/`drop` wired in `app.js` |
|
||
| 2 | Blocks can be moved, resized, and deleted; at least 20 undo/redo steps work | VERIFIED | `_startMove`, `_startResize`, Delete-key handler all fire through `CommandHistory(50)`; `MoveBlockCommand`, `ResizeBlockCommand`, `DeleteBlockCommand` all have execute/undo; overlap prevention in `_hasOverlap()` |
|
||
| 3 | Beat detection runs and overlays beat marks; blocks snap to beat positions | VERIFIED | `BeatGrid.load()` fetches `/api/audio/beats`; `getCalibratedBeats()` applies offset; render() draws cyan lines; `snapToBeat()` delegates to `BeatGrid.snap()` with 100ms threshold; wired in drop, move, and resize mouseup |
|
||
| 4 | Each block has a color picker and editable parameters; changes persist in show file | VERIFIED | `BlockInspector` renders color swatch, speed, direction, length; all changes fire `UpdateParamsCommand`; `syncBlock()` PATCHes `/api/shows/{show_id}/tracks/{device_id}/blocks/{block_id}` |
|
||
| 5 | Playback cursor moves in realtime across the timeline as audio plays | VERIFIED | `render()` reads `this.audio.currentTime` inside `requestAnimationFrame` loop; cursor drawn at `timeToX(audio.currentTime)`; auto-scroll at 80% threshold |
|
||
| 6 | Beat calibration offset control shifts all beat marks by configurable amount | VERIFIED | `#beat-offset` input updates `timeline.calibrationOffset` → proxied to `beatGrid.calibrationOffset`; `getCalibratedBeats()` subtracts offset at render time; raw `beatTimes` never mutated |
|
||
|
||
**Score:** 6/6 truths verified
|
||
|
||
---
|
||
|
||
### Required Artifacts
|
||
|
||
| Artifact | Expected | Lines | Status | Notes |
|
||
|----------|----------|-------|--------|-------|
|
||
| `lightsync/models/show.py` | CueModel with `duration: float = 4.0`, AnalysisBlock with `calibration_offset: float = 0.03` | — | VERIFIED | Confirmed via Docker exec: `CueModel(timestamp=1.0).duration == 4.0`, `AnalysisBlock().calibration_offset == 0.03` |
|
||
| `lightsync/frontend/timeline/timeline.js` | TimelineCanvas class with rendering loop | 627 | VERIFIED | Exports `TimelineCanvas`; has `timeToX`, `xToTime`, `trackIndexToY`, `yToTrackIndex`, `render`, `startRenderLoop`, `loadTracks`, `loadWaveform`, `loadBeats`, `hitTest`, `_startMove`, `_startResize`, `handleDrop`, `_hasOverlap`, `snapToBeat`; min_lines 150 satisfied (627 actual) |
|
||
| `lightsync/frontend/index.html` | Timeline canvas element, toolbar, inspector, palette | — | VERIFIED | Contains `id="timeline-canvas"`, `id="timeline-toolbar"` with zoom-slider/beat-offset/btn-snap, `id="block-inspector"` with `display:none`, `id="animation-palette"` in sidebar |
|
||
| `lightsync/frontend/style.css` | Timeline layout styles | — | VERIFIED | Contains `#timeline-canvas`, `.timeline-toolbar`, `.block-inspector`, `.inspector-label`, `.inspector-field`, `.snap-btn.active` |
|
||
| `lightsync/frontend/timeline/commands.js` | PlaceBlockCommand, MoveBlockCommand, ResizeBlockCommand, DeleteBlockCommand, UpdateParamsCommand | 131 | VERIFIED | All 5 command classes exported; `syncBlock()` and `setCurrentShowId()` present; min_lines 80 satisfied (131 actual) |
|
||
| `lightsync/frontend/timeline/history.js` | CommandHistory with undoStack, redoStack, execute/undo/redo, maxSteps=50 | 36 | VERIFIED | All methods present; redo cleared on execute (branching protection); min_lines 30 satisfied (36 actual) |
|
||
| `lightsync/api/timeline.py` | Block CRUD REST endpoints | 87 | VERIFIED | `router = APIRouter(tags=["timeline"])`, POST/PATCH/DELETE endpoints for `/shows/{show_id}/tracks/{device_id}/blocks`; CueModel used; registered in `main.py` with `prefix="/api"` |
|
||
| `lightsync/frontend/timeline/beats.js` | BeatGrid class | 67 | VERIFIED | Exports `BeatGrid`; has `load()`, `getCalibratedBeats()`, `getCalibratedOnsets()`, `snap()`, `hasBeats` getter, `loading`/`error` state; min_lines 40 satisfied (67 actual) |
|
||
| `lightsync/frontend/timeline/inspector.js` | BlockInspector class | 118 | VERIFIED | Exports `BlockInspector`; `show(block)`, `hide()`, `_render()`, `_wireEvents()` present; all four controls (color, speed, direction, length) render and fire `UpdateParamsCommand` on change; min_lines 60 satisfied (118 actual) |
|
||
|
||
---
|
||
|
||
### Key Link Verification
|
||
|
||
| From | To | Via | Status | Evidence |
|
||
|------|----|-----|--------|----------|
|
||
| `timeline.js` | HTML5 audio element | `requestAnimationFrame` reads `audio.currentTime` for cursor | WIRED | Lines 247, 251, 255 read `this.audio.currentTime` in `render()` |
|
||
| `timeline.js` | `/api/audio/waveform` | `fetch` in `loadWaveform()` | WIRED | Line 614: `fetch('/api/audio/waveform?path=...')` |
|
||
| `timeline.js` | `/api/devices` | `fetch` in `app.js initTimeline()` → `loadTracks(devices)` | WIRED | `app.js` line 285: `fetch('/api/devices').then(...).then(devices => timeline.loadTracks(devices))` |
|
||
| `commands.js` | `track.cues` | Commands mutate `track.cues` directly | WIRED | `PlaceBlockCommand.execute()` pushes to `track.cues`; `DeleteBlockCommand` filters `track.cues`; pattern used in all 5 command classes |
|
||
| `timeline.js` | `history.js` | `timeline.history.execute(cmd)` for all mutations | WIRED | `this.history = new CommandHistory(50)` in constructor; `this.history.execute(cmd)` called at lines 446, 499, 567, 596 |
|
||
| `commands.js` | `/api/shows/{show_id}/tracks/{device_id}/blocks` | Fire-and-forget fetch in `syncBlock()` | WIRED | `syncBlock()` uses `currentShowId` module-level var; called from every command's execute/undo |
|
||
| `timeline.py` | `show.py` (CueModel) | CueModel creation and mutation in CRUD endpoints | WIRED | `from lightsync.models.show import TrackModel, CueModel` inside each POST handler |
|
||
| `beats.js` | `/api/audio/beats` | `BeatGrid.load()` fetches beat data | WIRED | Line 23: `fetch('/api/audio/beats?path=...')` |
|
||
| `timeline.js` | `beats.js` | `beatGrid.snap()` called via `snapToBeat()` | WIRED | Line 383: `snapToBeat(t) { return this.beatGrid.snap(t); }` |
|
||
| `inspector.js` | `timeline.js` | `timeline._onSelectBlock` callback triggers `inspector.show/hide` | WIRED | `app.js` lines 272-273: `timeline._onSelectBlock = (block) => inspector.show(block)` |
|
||
| `inspector.js` | `commands.js` | Param changes create `UpdateParamsCommand` through history | WIRED | `inspector.js` imports `UpdateParamsCommand`; all four control `change` events fire `this.history.execute(new UpdateParamsCommand(...))` |
|
||
|
||
---
|
||
|
||
### Data-Flow Trace (Level 4)
|
||
|
||
| Artifact | Data Variable | Source | Produces Real Data | Status |
|
||
|----------|---------------|--------|-------------------|--------|
|
||
| `timeline.js` (block rendering) | `track.cues` | `PlaceBlockCommand.execute()` pushes block objects; `MoveBlockCommand`/`ResizeBlockCommand` mutate in-place | Yes — user-created blocks, not hardcoded | FLOWING |
|
||
| `timeline.js` (waveform) | `this.waveformPeaks` | `fetch('/api/audio/waveform?...')` → `data.peaks` | Yes — backend computes from audio file | FLOWING |
|
||
| `beats.js` (beat marks) | `this.beatTimes` | `fetch('/api/audio/beats?...')` → `data.beats \|\| data.beat_times` | Yes — librosa analysis; field name normalization handles API variant | FLOWING |
|
||
| `timeline.js` (cursor) | `this.audio.currentTime` | HTML5 `<audio id="player">` element — native browser position | Yes — realtime audio clock | FLOWING |
|
||
| `inspector.js` | `block.params` | `UpdateParamsCommand.execute()` uses `Object.assign(block.params, newParams)` | Yes — user edits, committed through command pattern | FLOWING |
|
||
|
||
---
|
||
|
||
### Behavioral Spot-Checks
|
||
|
||
| Behavior | Check | Result | Status |
|
||
|----------|-------|--------|--------|
|
||
| CueModel.duration defaults to 4.0 | `docker exec <container> python -c "from lightsync.models.show import CueModel; c = CueModel(timestamp=1.0); print(c.duration)"` | `4.0` | PASS |
|
||
| AnalysisBlock.calibration_offset defaults to 0.03 | `docker exec <container> python -c "from lightsync.models.show import AnalysisBlock; a = AnalysisBlock(); print(a.calibration_offset)"` | `0.03` | PASS |
|
||
| Timeline router registered in main.py | `grep "include_router.*timeline" lightsync/main.py` | `app.include_router(timeline.router, prefix="/api")` | PASS |
|
||
| timeline.js exports TimelineCanvas | `grep "export.*TimelineCanvas" lightsync/frontend/timeline/timeline.js` | `export { TimelineCanvas };` | PASS |
|
||
| Docker container has stale image (pre-Phase-4) | Container image missing `/app/lightsync/api/timeline.py` | `FileNotFoundError` — container built before Phase 4 commits | WARN (see note below) |
|
||
| API endpoint accessibility (live container) | `curl http://localhost:8000/api/devices` | Redirect (Traefik proxy) — container running but not rebuilt | SKIP |
|
||
|
||
**Deployment Note:** The running Docker container (`sha256:5fa579b`) was built before Phase 4 code was committed. It is missing `timeline.py` and all frontend timeline modules. This is a **deployment gap only** — the code in the git repo is complete and correct. The container must be rebuilt with `docker compose build && docker compose up -d` to make Phase 4 features live.
|
||
|
||
---
|
||
|
||
### Requirements Coverage
|
||
|
||
| Requirement | Source Plan | Description | Status | Evidence |
|
||
|-------------|-------------|-------------|--------|----------|
|
||
| TL-01 | 04-01 | Per-device horizontal tracks on a time axis | SATISFIED | `TimelineCanvas.loadTracks()` + `_drawTrackHeaders()` + `trackIndexToY()` render per-device rows |
|
||
| TL-02 | 04-02 | Drag-and-place animation blocks onto a track | SATISFIED | `handleDrop()` + `dragstart/dragover/drop` listeners in `app.js` |
|
||
| TL-03 | 04-02 | Move, resize, and delete animation blocks | SATISFIED | `_startMove()`, `_startResize()`, Delete keydown handler, all backed by commands |
|
||
| TL-04 | 04-04 | Color picker per animation block | SATISFIED | `BlockInspector` renders color swatch + hidden `<input type="color">`; `UpdateParamsCommand` persists change |
|
||
| TL-05 | 04-01 | Playback cursor tracking audio position in realtime | SATISFIED | `render()` draws cursor at `timeToX(audio.currentTime)` inside `requestAnimationFrame` loop |
|
||
| TL-06 | 04-02 | Undo/redo for all timeline mutations (min 20 steps, command pattern) | SATISFIED | `CommandHistory(50)` with undoStack/redoStack/maxSteps; Ctrl+Z and Ctrl+Shift+Z wired in keydown handler |
|
||
| TL-07 | 04-03 | Beat detection marks overlaid on timeline (librosa beat_track) | SATISFIED | `BeatGrid.load()` fetches `/api/audio/beats` (librosa backend); cyan lines rendered via `getCalibratedBeats()` |
|
||
| TL-08 | 04-03 | Snap-to-beat when placing/resizing blocks | SATISFIED | `BeatGrid.snap()` with 100ms threshold called in `handleDrop()`, `_startMove()` mouseup, `_startResize()` mouseup |
|
||
| SYNC-01 | 04-03 | Beat detection via librosa — beat timestamps and onset marks from loaded audio | SATISFIED | `BeatGrid` calls `/api/audio/beats`; onset marks rendered when `getCalibratedOnsets().length > 0`; graceful no-op if API returns no onset data |
|
||
| SYNC-02 | 04-03 | Beat calibration offset UI control — compensate for librosa latency bias | SATISFIED | `#beat-offset` input (default 0.030s) wired to `timeline.calibrationOffset` → `beatGrid.calibrationOffset`; subtracted in `getCalibratedBeats()` at render time |
|
||
|
||
All 10 requirements satisfied. No orphaned requirements found.
|
||
|
||
---
|
||
|
||
### Anti-Patterns Found
|
||
|
||
| File | Line | Pattern | Severity | Impact |
|
||
|------|------|---------|----------|--------|
|
||
| `commands.js` | 5 | `let currentShowId = null` — blocks sync until `setCurrentShowId()` called | Info | Expected behavior: sync skipped when no show loaded (`if (!showId) return`) — documented, not a bug |
|
||
| `app.js` | 379 | `initTimeline()` called at module level with no error boundary | Info | If `#timeline-canvas` or `#player` missing, `initTimeline()` returns early — guarded |
|
||
|
||
No blocker or warning-level anti-patterns found. All `return null` and `return []` patterns are appropriately guarded (empty-state handling, not stub returns).
|
||
|
||
---
|
||
|
||
### Human Verification Required
|
||
|
||
#### 1. Drag-and-Place from Animation Palette
|
||
|
||
**Test:** With a device registered and audio loaded, drag an animation tile from the ANIMATIONS sidebar panel and drop it onto a device track in the canvas.
|
||
**Expected:** Block appears at the drop position snapped to the nearest beat; inspector strip appears showing animation name, color swatch, speed/direction/length controls.
|
||
**Why human:** Requires live browser with registered device; drag-and-drop cannot be automated via grep/file checks.
|
||
|
||
#### 2. Block Move with Beat Snap
|
||
|
||
**Test:** Click the center of a placed block and drag it; release near a beat mark position.
|
||
**Expected:** Block snaps to the nearest beat position (within 100ms) on mouseup; canvas updates immediately.
|
||
**Why human:** Mouse event simulation requires live canvas.
|
||
|
||
#### 3. Block Resize (both handles)
|
||
|
||
**Test:** Drag the right edge of a block to extend it; drag the left edge to shrink it.
|
||
**Expected:** Right edge drag extends duration only; left edge drag shifts timestamp while right edge stays fixed; minimum 0.5s duration enforced.
|
||
**Why human:** Canvas hit zone interaction requires live browser.
|
||
|
||
#### 4. Undo/Redo Stress Test (50 steps)
|
||
|
||
**Test:** Place 10 blocks, move 5, resize 5, delete 5. Then Ctrl+Z 25 times; then Ctrl+Shift+Z 25 times.
|
||
**Expected:** All operations revert and re-apply correctly without state corruption.
|
||
**Why human:** Extended interactive session required.
|
||
|
||
#### 5. Overlap Rejection
|
||
|
||
**Test:** Attempt to place a block at a position that overlaps an existing block on the same track.
|
||
**Expected:** The overlapping block is not placed; the ghost preview disappears without a block appearing.
|
||
**Why human:** Requires live drag interaction to test `_hasOverlap()` rejection path.
|
||
|
||
#### 6. Beat Detection Workflow
|
||
|
||
**Test:** Load an audio file; observe the timeline during analysis.
|
||
**Expected:** "DETECTING BEATS..." text appears in timeline briefly; then cyan vertical lines appear at beat positions; BPM label updates in header (e.g., "120 BPM"); BEAT OFFSET slider shifts marks left/right in realtime.
|
||
**Why human:** Requires audio file + backend librosa analysis + visual inspection.
|
||
|
||
#### 7. Inspector Color Picker and Undo
|
||
|
||
**Test:** Select a block, click the color swatch, change color, then press Ctrl+Z.
|
||
**Expected:** Block fill on canvas shows new color accent immediately; Ctrl+Z reverts to original color; inspector color swatch updates to match.
|
||
**Why human:** Native browser color picker requires live browser interaction.
|
||
|
||
#### 8. Inspector Remove Button
|
||
|
||
**Test:** Select a block, click the "×" remove button in the inspector.
|
||
**Expected:** Block is deleted from the canvas; inspector strip hides; Ctrl+Z restores the block.
|
||
**Why human:** Requires live block selection state.
|
||
|
||
#### 9. Container Rebuild and Deployment
|
||
|
||
**Test:** `cd /home/claude/led2 && docker compose -f docker-compose.prod.yml build && docker compose -f docker-compose.prod.yml up -d`
|
||
**Expected:** Rebuilt container includes `timeline.py` in API layer and all frontend timeline modules; navigating to the app URL shows the timeline canvas with toolbar (ZOOM, BEAT OFFSET, SNAP) instead of the old animation grid.
|
||
**Why human:** Container rebuild requires manual execution; the currently running container is a stale pre-Phase-4 build and Phase 4 features are not accessible until rebuilt.
|
||
|
||
---
|
||
|
||
## Gaps Summary
|
||
|
||
No code gaps. All Phase 4 artifacts are present in the git repository, substantive (no stubs), and correctly wired to each other and to backend APIs. The command pattern, undo/redo, beat detection, inspector, and data flow are all implemented as specified.
|
||
|
||
**One deployment action is required:** The Docker container must be rebuilt. The currently running container image predates all Phase 4 commits and is missing `lightsync/api/timeline.py` and all `lightsync/frontend/timeline/` modules. This is a deployment state issue, not a code issue — the source code is complete.
|
||
|
||
---
|
||
|
||
_Verified: 2026-04-06T23:59:00Z_
|
||
_Verifier: Claude (gsd-verifier)_
|