From cd53ff0be8971b592d8d01836a6572c4123e5495 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Tue, 17 Feb 2026 07:52:48 +0100
Subject: feat: add Sequence V2 format support to timeline editor

Implements full support for the sequence v2 DAG format with explicit
node routing and arrow syntax.

New features:
- timeline-format.js module for parsing/serializing v2 format
- NODE declarations with typed buffers (u8x4_norm, f32x4, etc.)
- Arrow syntax for effect routing: input1 input2 -> output1 output2
- Buffer chain visualization in properties panel and tooltips
- Node editor modal for adding/deleting node declarations
- Validation for undeclared node references (when NODEs explicit)
- Backward compatible with auto-inferred nodes

Files added:
- tools/timeline_editor/timeline-format.js (214 lines)
- tools/timeline_editor/test_format.html (automated tests)
- workspaces/test/timeline_v2_test.seq (test file with NODE declarations)

Files modified:
- tools/timeline_editor/index.html (~40 changes for v2 support)

All success criteria met. Round-trip tested with existing timelines.

handoff(Claude): Timeline editor now fully supports v2 format with
explicit node routing, NODE declarations, and buffer chain visualization.
Parser handles both explicit NODE declarations and auto-inferred nodes.
Validation only runs when explicit NODEs exist. Ready for production use.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/timeline_editor/index.html | 179 ++++++++++++++++++++++++---------------
 1 file changed, 112 insertions(+), 67 deletions(-)

(limited to 'tools/timeline_editor/index.html')

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index c5e0264..856d314 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -537,11 +537,36 @@
         </div>
 
         <div class="stats" id="stats"></div>
+
+        <div id="nodeEditorModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center;">
+            <div style="background: var(--bg-secondary); padding: 20px; border-radius: 8px; min-width: 300px;">
+                <h3 style="margin-top: 0;">Add Node Declaration</h3>
+                <div style="margin-bottom: 10px;">
+                    <label>Node Name</label>
+                    <input type="text" id="nodeNameInput" placeholder="temp1" style="width: 100%; padding: 8px; margin-top: 5px;">
+                </div>
+                <div style="margin-bottom: 20px;">
+                    <label>Node Type</label>
+                    <select id="nodeTypeSelect" style="width: 100%; padding: 8px; margin-top: 5px;">
+                        <option value="u8x4_norm">u8x4_norm (RGBA8 standard)</option>
+                        <option value="f32x4">f32x4 (RGBA float32)</option>
+                        <option value="f16x8">f16x8 (8-channel float16)</option>
+                        <option value="depth24">depth24 (Depth buffer)</option>
+                        <option value="compute_f32">compute_f32 (Storage buffer)</option>
+                    </select>
+                </div>
+                <div style="display: flex; gap: 10px;">
+                    <button onclick="addNodeToSequence()" style="flex: 1;">Add</button>
+                    <button onclick="closeNodeEditor()" style="flex: 1; background: var(--bg-tertiary);">Cancel</button>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script type="module">
         import { ViewportController } from './timeline-viewport.js';
         import { PlaybackController } from './timeline-playback.js';
+        import { TimelineFormat } from './timeline-format.js';
 
         // Constants
         const POST_PROCESS_EFFECTS = new Set(['FadeEffect', 'FlashEffect', 'GaussianBlurEffect',
@@ -576,6 +601,9 @@
             ...computeBPMValues(DEFAULT_BPM)
         };
 
+        // Timeline format handler
+        const timelineFormat = new TimelineFormat();
+
         // DOM
         const dom = {
             timeline: document.getElementById('timeline'),
@@ -613,55 +641,9 @@
             waveformTooltip: document.getElementById('waveformTooltip')
         };
 
-        // Parser
+        // Parser (delegated to TimelineFormat)
         function parseSeqFile(content) {
-            const sequences = [];
-            let currentSequence = null, bpm = 120, currentPriority = 0;
-
-            const parseTime = (timeStr) => {
-                if (timeStr.endsWith('s')) return parseFloat(timeStr.slice(0, -1)) * bpm / 60.0; // Local bpm during parsing
-                if (timeStr.endsWith('b')) return parseFloat(timeStr.slice(0, -1));
-                return parseFloat(timeStr);
-            };
-
-            const stripComment = (line) => {
-                const idx = line.indexOf('#');
-                return idx >= 0 ? line.slice(0, idx).trim() : line;
-            };
-
-            for (let line of content.split('\n')) {
-                line = line.trim();
-                if (!line || line.startsWith('#')) {
-                    if (line.startsWith('# BPM ')) {
-                        const m = line.match(/# BPM (\d+)/);
-                        if (m) bpm = parseInt(m[1]);
-                    }
-                    continue;
-                }
-                line = stripComment(line);
-                if (!line) continue;
-
-                const seqMatch = line.match(/^SEQUENCE\s+(\S+)\s+(\d+)(?:\s+"([^"]+)")?(?:\s+(\S+))?$/);
-                if (seqMatch) {
-                    currentSequence = { type: 'sequence', startTime: parseTime(seqMatch[1]), priority: parseInt(seqMatch[2]), effects: [], name: seqMatch[3] || '', _collapsed: true };
-                    sequences.push(currentSequence);
-                    currentPriority = -1;
-                    continue;
-                }
-
-                const effectMatch = line.match(/^EFFECT\s+([+=-])\s+(\w+)\s+(\S+)\s+(\S+)(?:\s+(.*))?$/);
-                if (effectMatch && currentSequence) {
-                    const modifier = effectMatch[1];
-                    if (modifier === '+') currentPriority++;
-                    else if (modifier === '-') currentPriority--;
-                    currentSequence.effects.push({
-                        type: 'effect', className: effectMatch[2],
-                        startTime: parseTime(effectMatch[3]), endTime: parseTime(effectMatch[4]),
-                        priority: currentPriority, priorityModifier: modifier, args: effectMatch[5] || ''
-                    });
-                }
-            }
-            return { sequences, bpm };
+            return timelineFormat.parse(content, 120);
         }
 
         // Helpers
@@ -702,19 +684,7 @@
         }
 
         function serializeSeqFile(sequences) {
-            let output = `# Demo Timeline\n# Generated by Timeline Editor\n# BPM ${state.bpm}\n\n`;
-            for (const seq of sequences) {
-                output += `SEQUENCE ${seq.startTime.toFixed(2)} ${seq.priority}${seq.name ? ` "${seq.name}"` : ''}\n`;
-                for (const effect of seq.effects) {
-                    const modifier = effect.priorityModifier || '+';
-                    const cleanArgs = effect.args?.replace(/\s*#\s*Priority:\s*\d+/i, '').trim();
-                    output += `  EFFECT ${modifier} ${effect.className} ${effect.startTime.toFixed(2)} ${effect.endTime.toFixed(2)}`;
-                    if (cleanArgs) output += ` ${cleanArgs}`;
-                    output += '\n';
-                }
-                output += '\n';
-            }
-            return output;
+            return timelineFormat.serialize(sequences, state.bpm);
         }
 
         // Controllers - initialized after DOM setup
@@ -880,7 +850,8 @@
                         effectDiv.innerHTML = `<div class="effect-handle left"></div><small>${effect.className}</small><div class="effect-handle right"></div>`;
                         const conflictWarning = conflicts.has(effectIndex) ?
                             `\n⚠️ CONFLICT: Multiple post-process effects share priority ${effect.priority}` : '';
-                        effectDiv.title = `${effect.className}\n${beatRange(effect.startTime, effect.endTime)}\nPriority: ${effect.priority}${conflictWarning}\n${effect.args || '(no args)'}`;
+                        const bufferChain = timelineFormat.renderBufferChain(effect);
+                        effectDiv.title = `${effect.className}\n${beatRange(effect.startTime, effect.endTime)}\nPriority: ${effect.priority}${conflictWarning}\nBuffer: ${bufferChain}\n${effect.params || '(no params)'}`;
                         if (state.selectedItem?.type === 'effect' && state.selectedItem.seqIndex === seqIndex && state.selectedItem.effectIndex === effectIndex)
                             effectDiv.classList.add('selected');
                         effectDiv.querySelector('.effect-handle.left').addEventListener('mousedown', e => {
@@ -982,10 +953,16 @@
                 dom.propertiesContent.innerHTML = `
                     <div class="property-group"><label>Name</label><input type="text" id="propName" value="${seq.name || ''}" placeholder="Sequence name" inputmode="text"></div>
                     <div class="property-group"><label>Start Time (beats)</label><input type="number" id="propStartTime" value="${seq.startTime}" step="0.1" min="0"></div>
+                    <div class="property-group">
+                        <label>Nodes</label>
+                        <div id="nodesList" style="margin-bottom: 10px;">${timelineFormat.renderNodesList(seq.nodes)}</div>
+                        <button id="addNodeBtn" style="width: 100%;">+ Add Node</button>
+                    </div>
                     <div class="property-group"><button id="propDeleteBtn" style="width: 100%; background: var(--accent-red);">🗑️ Delete Sequence</button></div>
                 `;
                 document.getElementById('propName').addEventListener('input', applyProperties);
                 document.getElementById('propStartTime').addEventListener('input', applyProperties);
+                document.getElementById('addNodeBtn').addEventListener('click', showNodeEditor);
                 document.getElementById('propDeleteBtn').addEventListener('click', () => dom.deleteBtn.click());
             } else if (state.selectedItem.type === 'effect') {
                 const effect = state.sequences[state.selectedItem.seqIndex].effects[state.selectedItem.effectIndex];
@@ -994,9 +971,17 @@
                 const samePriority = effect.priorityModifier === '=';
                 dom.propertiesContent.innerHTML = `
                     <div class="property-group"><label>Effect Class</label><input type="text" id="propClassName" value="${effect.className}"></div>
+                    <div class="property-group"><label>Inputs (space-separated)</label><input type="text" id="propInputs" value="${(effect.inputs || ['source']).join(' ')}" placeholder="source"></div>
+                    <div class="property-group"><label>Outputs (space-separated)</label><input type="text" id="propOutputs" value="${(effect.outputs || ['sink']).join(' ')}" placeholder="sink"></div>
                     <div class="property-group"><label>Start Time (beats, relative to sequence)</label><input type="number" id="propStartTime" value="${effect.startTime}" step="0.1"></div>
                     <div class="property-group"><label>End Time (beats, relative to sequence)</label><input type="number" id="propEndTime" value="${effect.endTime}" step="0.1"></div>
-                    <div class="property-group"><label>Constructor Arguments</label><input type="text" id="propArgs" value="${effect.args || ''}"></div>
+                    <div class="property-group"><label>Parameters</label><input type="text" id="propParams" value="${effect.params || ''}" placeholder="Optional effect parameters"></div>
+                    <div class="property-group">
+                        <label>Buffer Chain</label>
+                        <div id="bufferChain" style="font-family: monospace; padding: 8px; background: rgba(255,255,255,0.05); border-radius: 3px; color: var(--accent-cyan);">
+                            ${timelineFormat.renderBufferChain(effect)}
+                        </div>
+                    </div>
                     <div class="property-group"><label>Stack Position (determines priority)</label>
                         <div style="display: flex; gap: 5px; margin-bottom: 10px;">
                             <button id="moveUpBtn" ${!canMoveUp ? 'disabled' : ''} style="flex: 1;">↑ Up</button>
@@ -1007,9 +992,11 @@
                     <div class="property-group"><button id="propDeleteBtn" style="width: 100%; background: var(--accent-red);">🗑️ Delete Effect</button></div>
                 `;
                 document.getElementById('propClassName').addEventListener('input', applyProperties);
+                document.getElementById('propInputs').addEventListener('input', applyProperties);
+                document.getElementById('propOutputs').addEventListener('input', applyProperties);
                 document.getElementById('propStartTime').addEventListener('input', applyProperties);
                 document.getElementById('propEndTime').addEventListener('input', applyProperties);
-                document.getElementById('propArgs').addEventListener('input', applyProperties);
+                document.getElementById('propParams').addEventListener('input', applyProperties);
                 document.getElementById('moveUpBtn').addEventListener('click', moveEffectUp);
                 document.getElementById('moveDownBtn').addEventListener('click', moveEffectDown);
                 document.getElementById('togglePriorityBtn').addEventListener('click', toggleSamePriority);
@@ -1026,9 +1013,11 @@
             } else if (state.selectedItem.type === 'effect') {
                 const effect = state.sequences[state.selectedItem.seqIndex].effects[state.selectedItem.effectIndex];
                 effect.className = document.getElementById('propClassName').value;
+                effect.inputs = document.getElementById('propInputs').value.trim().split(/\s+/).filter(s => s);
+                effect.outputs = document.getElementById('propOutputs').value.trim().split(/\s+/).filter(s => s);
                 effect.startTime = parseFloat(document.getElementById('propStartTime').value);
                 effect.endTime = parseFloat(document.getElementById('propEndTime').value);
-                effect.args = document.getElementById('propArgs').value;
+                effect.params = document.getElementById('propParams').value;
             }
             renderTimeline();
         }
@@ -1058,6 +1047,52 @@
             updateProperties();
         }
 
+        // Node management functions (global for onclick handlers)
+        window.showNodeEditor = function() {
+            document.getElementById('nodeEditorModal').style.display = 'flex';
+            document.getElementById('nodeNameInput').value = '';
+            document.getElementById('nodeTypeSelect').value = 'u8x4_norm';
+            document.getElementById('nodeNameInput').focus();
+        };
+
+        window.closeNodeEditor = function() {
+            document.getElementById('nodeEditorModal').style.display = 'none';
+        };
+
+        window.addNodeToSequence = function() {
+            if (!state.selectedItem || state.selectedItem.type !== 'sequence') return;
+
+            const name = document.getElementById('nodeNameInput').value.trim();
+            const type = document.getElementById('nodeTypeSelect').value;
+
+            if (!name) {
+                showMessage('Node name required', 'error');
+                return;
+            }
+
+            const seq = state.sequences[state.selectedItem.index];
+            if (!seq.nodes) seq.nodes = [];
+
+            // Check duplicate
+            if (seq.nodes.some(n => n.name === name)) {
+                showMessage(`Node "${name}" already exists`, 'error');
+                return;
+            }
+
+            seq.nodes.push({ name, type });
+            window.closeNodeEditor();
+            updateProperties();
+            showMessage(`Node "${name}" added`, 'success');
+        };
+
+        window.deleteNode = function(index) {
+            if (!state.selectedItem || state.selectedItem.type !== 'sequence') return;
+            const seq = state.sequences[state.selectedItem.index];
+            seq.nodes.splice(index, 1);
+            updateProperties();
+            showMessage('Node deleted', 'success');
+        };
+
         function updateStats() {
             const effectCount = state.sequences.reduce((sum, seq) => sum + seq.effects.length, 0);
             const maxTimeBeats = Math.max(0, ...state.sequences.flatMap(seq =>
@@ -1115,6 +1150,16 @@
         });
 
         dom.saveBtn.addEventListener('click', () => {
+            // Validate all sequences before saving
+            const allErrors = state.sequences.flatMap((seq, i) =>
+                timelineFormat.validateSequence(seq).map(err => `Sequence ${i}: ${err}`)
+            );
+
+            if (allErrors.length > 0) {
+                showMessage(`Validation errors:\n${allErrors.join('\n')}`, 'error');
+                return; // Block save
+            }
+
             const content = serializeSeqFile(state.sequences), blob = new Blob([content], { type: 'text/plain' });
             const url = URL.createObjectURL(blob), a = document.createElement('a');
             a.href = url; a.download = state.currentFile || 'timeline.seq'; a.click(); URL.revokeObjectURL(url);
@@ -1124,14 +1169,14 @@
         // Audio/playback event handlers - managed by PlaybackController
 
         dom.addSequenceBtn.addEventListener('click', () => {
-            state.sequences.push({ type: 'sequence', startTime: 0, priority: 0, effects: [], _collapsed: true });
+            state.sequences.push({ type: 'sequence', startTime: 0, priority: 0, nodes: [], effects: [], _collapsed: true });
             renderTimeline(); showMessage('New sequence added', 'success');
         });
 
         dom.addEffectBtn.addEventListener('click', () => {
             if (!state.selectedItem || state.selectedItem.type !== 'sequence') return;
             const seq = state.sequences[state.selectedItem.index];
-            seq.effects.push({ type: 'effect', className: 'Effect', startTime: 0, endTime: 10, priority: 0, priorityModifier: '+', args: '' });
+            seq.effects.push({ type: 'effect', className: 'Effect', inputs: ['source'], outputs: ['sink'], startTime: 0, endTime: 10, priority: 0, priorityModifier: '+', params: '' });
             seq._collapsed = false;
             renderTimeline(); showMessage('New effect added', 'success');
         });
-- 
cgit v1.2.3