feat(04-04): wire BlockInspector into timeline and app.js

- app.js imports BlockInspector and DeleteBlockCommand
- Inspector created with #block-inspector element and timeline.history
- timeline._onSelectBlock callback shows/hides inspector on block select
- inspector._onDelete fires DeleteBlockCommand and hides inspector
- inspector.tracks kept in sync after loadTracks() resolves
- timeline.js block rendering uses blockColor + '1a' for color accent fill
- undo/redo handlers re-trigger _onSelectBlock to refresh inspector values

lightsync/frontend/timeline/timeline.js

@@ -185,7 +185,13 @@ class TimelineCanvas {
                 if (x + w < HEADER_WIDTH || x > W) continue;
 
                 const isSelected = this.selectedBlock === cue;
-                ctx.fillStyle = isSelected ? '#0d3a3a' : '#0a2a2a';
+                // Block fill — use block color at low opacity for visual distinction
+                const blockColor = cue.params?.color || '#00ffff';
+                if (isSelected) {
+                    ctx.fillStyle = '#0d3a3a';
+                } else {
+                    ctx.fillStyle = blockColor + '1a';  // ~10% opacity hex suffix
+                }
                 ctx.fillRect(x, y + 1, w, TRACK_HEIGHT - 2);
 
                 ctx.strokeStyle = isSelected ? '#00ffff' : '#1a4a4a';
@@ -445,11 +451,13 @@ class TimelineCanvas {
             if (e.ctrlKey && !e.shiftKey && e.key === 'z') {
                 e.preventDefault();
                 this.history.undo();
+                if (this._onSelectBlock) this._onSelectBlock(this.selectedBlock);
             }
             // Redo: Ctrl+Shift+Z or Ctrl+Y
             if ((e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y')) {
                 e.preventDefault();
                 this.history.redo();
+                if (this._onSelectBlock) this._onSelectBlock(this.selectedBlock);
             }
         });
     }