From c1fc6be0e9e06e0955e71cff11620cdd88eb3f5a Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Thu, 5 Feb 2026 00:01:11 +0100
Subject: feat: Add validation-only mode and HTML/SVG Gantt charts to
 seq_compiler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhances seq_compiler with flexible output modes and beautiful HTML visualization.

## New Features

### 1. Optional C++ Output (Validation Mode)
- Output .cc file is now optional
- Running without output performs validation only
- Useful for checking .seq syntax before committing
- Example: `./seq_compiler assets/demo.seq`

### 2. HTML/SVG Gantt Chart
- New --gantt-html=<file.html> option
- Generates interactive HTML page with SVG timeline
- Much more readable than ASCII version
- Features:
  * Color-coded sequences (blue) and effects (teal)
  * Invalid time ranges highlighted in red
  * Hover tooltips with full effect details
  * Time axis with 5-second markers
  * Dark theme matching IDE aesthetics
  * Vertical time markers for easy reading
  * Legend explaining visual elements

### 3. Flexible Command Line
All output modes can be combined:
```bash
# Validation only
./seq_compiler demo.seq

# Code + ASCII Gantt
./seq_compiler demo.seq timeline.cc --gantt=chart.txt

# Code + HTML Gantt
./seq_compiler demo.seq timeline.cc --gantt-html=chart.html

# All outputs
./seq_compiler demo.seq timeline.cc --gantt=t.txt --gantt-html=t.html
```

## HTML Gantt Advantages Over ASCII
✓ Precise pixel-perfect positioning
✓ Scalable vector graphics (zoom without quality loss)
✓ Color coding for priorities and validity
✓ Interactive hover tooltips
✓ Professional dark theme
✓ Much easier to read complex timelines
✓ Can be shared via browser or screenshots

## Implementation Details
- Added ~190 lines for HTML/SVG generation
- Dark theme (#1e1e1e background) matches IDE
- SVG dynamically sized based on sequence count
- Invalid time ranges rendered in red with warning symbol
- Time scale automatically calculated from demo duration
- Hover effects provide detailed information

## Use Cases
- **Validation**: Quick syntax check without code generation
- **ASCII Gantt**: Terminal-friendly, git-friendly text visualization
- **HTML Gantt**: Beautiful presentation for design discussions
- **Combined**: Full toolchain for timeline development

The HTML output answers your question about SVG generation - it turned out
to be straightforward (~190 lines) and provides significantly better
visualization than ASCII art!

## Files Changed
- tools/seq_compiler.cc: Added validation mode and HTML generation
- assets/demo.seq: Updated documentation with new usage examples
- .gitignore: Exclude generated timeline files

Example HTML output: 17KB file with full interactive timeline visualization.
---
 assets/demo.seq | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'assets/demo.seq')

diff --git a/assets/demo.seq b/assets/demo.seq
index 833e5f7..0d73374 100644
--- a/assets/demo.seq
+++ b/assets/demo.seq
@@ -4,9 +4,19 @@
 # This file defines the timeline and layering of visual effects.
 # Compiled by seq_compiler into src/generated/timeline.cc at build time.
 #
-# DEBUGGING: Generate a Gantt chart visualization of the timeline:
-#   ./build/seq_compiler assets/demo.seq src/generated/timeline.cc --gantt=timeline.txt
-#   The chart shows sequences and effects on a time axis with labels.
+# DEBUGGING & VALIDATION:
+#   Validate without generating code:
+#     ./build/seq_compiler assets/demo.seq
+#
+#   Generate ASCII Gantt chart:
+#     ./build/seq_compiler assets/demo.seq --gantt=timeline.txt
+#
+#   Generate HTML/SVG Gantt chart (recommended):
+#     ./build/seq_compiler assets/demo.seq --gantt-html=timeline.html
+#     Open timeline.html in browser for interactive visualization
+#
+#   All modes can be combined:
+#     ./build/seq_compiler assets/demo.seq timeline.cc --gantt=t.txt --gantt-html=t.html
 #
 # BPM 120
 #
-- 
cgit v1.2.3