{/* Tool buttons: Select(V), Razor(C), Hand(H) */}
{/* Undo/Redo */}
{/* Save status indicator */}
);
}
```
The component mounts the timeline once, then pushes clip/playhead updates via `render()` and `setPlayhead()`. No rebuild needed on every frame.
**Tool toolbar state:**
- Three tool buttons (V/C/H) that call `Timeline.setTool(name)`
- Active tool highlighted — sync with keyboard shortcuts
- Undo/redo buttons call the editor's history stack (not timeline.js's — timeline.js doesn't have an undo stack, the editor page in the original plan managed it in the app state)
**Verify:** Timeline renders 4 track rows (V1, V2, A1, A2) with ruler, playhead at frame 0, no clips. Tool buttons switch cursor mode.
---
### Task 1.4: Rewrite screens-editor.jsx
**Files:** MODIFY `services/web-ui/public/screens-editor.jsx`
Full rewrite preserving the `Editor` component on `window.Editor`. The new structure:
```
┌─ SOURCE MONITOR ───────┬─ PROGRAM MONITOR ───────┐
│ [video preview] │ [video preview] │
│ TC: 00:00:00;00 │ TC: 00:00:00;00 │
│ [=====scrub=========] │ [=====scrub=========] │
│ [In] [Out] [Insert] │ [▶] [⏮] [⏭] │
├─ MEDIA PANEL ──────────┴─ TIMELINE ─────────────┤
│ [sequence picker ▼] [+]│ [V] [C] [H] | [↩] [↪] │
│ [filter by bin ▼] │ ruler: 00:00 — 00:05 … │
│ [asset list] │ V1 ░░░░[clip]░░░░ │
│ │ V2 │
│ │ A1 ░░░░[clip]░░░░ │
│ │ A2 │
└────────────────────────┴─────────────────────────┘
```
**App state (React hooks):**
```js
const [projectId, setProjectId] = React.useState(null);
const [sequences, setSequences] = React.useState([]);
const [currentSeq, setCurrentSeq] = React.useState(null); // { id, name, clips: [...] }
const [assets, setAssets] = React.useState([]); // from ZAMPP_DATA.ASSETS
const [sourceAsset, setSourceAsset] = React.useState(null);
const [srcIn, setSrcIn] = React.useState(null);
const [srcOut, setSrcOut] = React.useState(null);
const [playing, setPlaying] = React.useState(false);
const [playheadFrames, setPlayheadFrames] = React.useState(0);
const [saveStatus, setSaveStatus] = React.useState('');
const [history, setHistory] = React.useState([[]]);
const [historyIdx, setHistoryIdx] = React.useState(0);
```
**Source monitor:**
- `