opencode-nanobanana 0.1.0

package/prd.json

@@ -0,0 +1,216 @@
+{
+  "projectName": "opencode-visual-toolkit-storyboard",
+  "description": "Add storyboard video generation feature using Veo 3.1 with native audio, multi-scene support, transitions, and video stitching capabilities.",
+  "branchName": "ralph/storyboard-video",
+  "repository": "48Nauts-Operator/opencode-nanobanana",
+  "techStack": {
+    "runtime": "Bun",
+    "language": "TypeScript",
+    "framework": "OpenCode Plugin",
+    "dependencies": [
+      "@google/genai",
+      "@opencode-ai/plugin",
+      "sharp",
+      "zod"
+    ],
+    "externalTools": [
+      "ffmpeg"
+    ]
+  },
+  "userStories": [
+    {
+      "id": "VEO3-001",
+      "title": "Upgrade to Veo 3.1 API",
+      "description": "Update GeminiProvider to use Veo 3.1 model with native audio support and new features.",
+      "priority": 1,
+      "acceptanceCriteria": [
+        "Update generateVideo() to use model 'veo-3.1-generate-001'",
+        "Add support for native audio generation (enabled by default)",
+        "Add resolution option: '720p' or '1080p' (default: '720p')",
+        "Add duration option: 4, 6, or 8 seconds (default: 8)",
+        "Update animateImage() to use Veo 3.1",
+        "Add generateAudio config option to enable/disable audio",
+        "Update tests for new Veo 3.1 parameters",
+        "Verify audio is included in generated videos"
+      ],
+      "passes": true
+    },
+    {
+      "id": "VEO3-002",
+      "title": "Video Extension API Support",
+      "description": "Add support for Veo 3.1 video extension feature to extend existing videos with new content.",
+      "priority": 2,
+      "acceptanceCriteria": [
+        "Add extendVideo(videoBuffer, prompt, options) method to GeminiProvider",
+        "Method takes existing video and extends it with new prompt",
+        "Returns extended video buffer",
+        "Supports same options as generateVideo (aspectRatio, resolution)",
+        "Handles API polling for long-running operation",
+        "Add unit test for extendVideo method"
+      ],
+      "passes": true
+    },
+    {
+      "id": "VEO3-003",
+      "title": "Reference Image Support",
+      "description": "Add support for Veo 3.1 reference images feature to guide video generation with up to 3 reference images.",
+      "priority": 3,
+      "acceptanceCriteria": [
+        "Add generateVideoWithReferences(prompt, referenceImages[], options) method",
+        "referenceImages is array of {buffer, description} objects (max 3)",
+        "Reference images guide character/object/scene consistency",
+        "Returns video buffer with content matching references",
+        "Add unit test for reference image feature"
+      ],
+      "passes": true
+    },
+    {
+      "id": "FFMPEG-001",
+      "title": "FFmpeg Utility Module",
+      "description": "Create FFmpeg utility module for video processing operations.",
+      "priority": 4,
+      "acceptanceCriteria": [
+        "Create src/utils/ffmpeg.ts utility module",
+        "checkFfmpegInstalled() returns boolean",
+        "concatenateVideos(videoPaths[], outputPath, transition) stitches videos",
+        "Transition options: 'cut', 'crossfade', 'fade'",
+        "transitionDuration parameter for crossfade/fade (default: 0.5s)",
+        "getVideoDuration(videoPath) returns duration in seconds",
+        "trimVideo(videoPath, startTime, duration, outputPath) trims video",
+        "addAudioTrack(videoPath, audioPath, outputPath) adds background music",
+        "All functions return Promise and handle errors gracefully",
+        "Add unit tests with mocked ffmpeg commands"
+      ],
+      "passes": true
+    },
+    {
+      "id": "STORY-001",
+      "title": "Storyboard Video Tool - Core",
+      "description": "Implement generate_storyboard_video tool that generates multiple scenes and stitches them together.",
+      "priority": 5,
+      "acceptanceCriteria": [
+        "Create src/tools/video/storyboard-video.ts",
+        "Tool accepts scenes[] array of scene description strings",
+        "Tool accepts style option to prefix all scenes (e.g., 'cinematic', 'commercial')",
+        "Tool accepts aspectRatio option (default: '16:9')",
+        "Tool accepts transition option: 'cut', 'crossfade', 'fade' (default: 'crossfade')",
+        "Tool accepts transitionDuration option (default: 0.5)",
+        "Tool accepts outputPath option",
+        "Generates all scenes in parallel for speed",
+        "Uses FFmpeg to stitch scenes with transitions",
+        "Returns path to final combined video",
+        "Handles errors for individual scenes gracefully"
+      ],
+      "passes": true
+    },
+    {
+      "id": "STORY-002",
+      "title": "Storyboard Character Consistency",
+      "description": "Add character consistency feature to storyboard tool using style prefix and reference images.",
+      "priority": 6,
+      "acceptanceCriteria": [
+        "Add characterDescription option to storyboard tool",
+        "Character description is prepended to each scene prompt",
+        "Add referenceImages option (array of image paths)",
+        "Reference images are used with Veo 3.1 reference feature",
+        "Character appears consistent across all scenes",
+        "Add example in tool description showing character consistency usage"
+      ],
+      "passes": true
+    },
+    {
+      "id": "STORY-003",
+      "title": "Storyboard Audio Options",
+      "description": "Add audio control options to storyboard tool.",
+      "priority": 7,
+      "acceptanceCriteria": [
+        "Add generateAudio option (default: true) to enable/disable native Veo audio",
+        "Add backgroundMusic option (path to audio file)",
+        "Background music is mixed with native audio if both enabled",
+        "Add musicVolume option (0.0-1.0, default: 0.3) for background music level",
+        "FFmpeg handles audio mixing",
+        "Final video has properly mixed audio track"
+      ],
+      "passes": true
+    },
+    {
+      "id": "STORY-004",
+      "title": "Storyboard Progress Callback",
+      "description": "Add progress reporting for long-running storyboard generation.",
+      "priority": 8,
+      "acceptanceCriteria": [
+        "Tool logs progress for each scene generation",
+        "Format: 'Generating scene 1/5...' etc.",
+        "Logs when stitching begins",
+        "Logs total generation time at completion",
+        "Returns detailed result with per-scene timing"
+      ],
+      "passes": true
+    },
+    {
+      "id": "EXTEND-001",
+      "title": "Extend Video Tool",
+      "description": "Implement extend_video tool that extends an existing video with new content.",
+      "priority": 9,
+      "acceptanceCriteria": [
+        "Create src/tools/video/extend-video.ts",
+        "Tool accepts videoPath (required) - path to existing video",
+        "Tool accepts prompt (required) - description of extension content",
+        "Tool accepts outputPath (optional)",
+        "Uses Veo 3.1 video extension API",
+        "Returns path to extended video",
+        "Add tool to plugin exports"
+      ],
+      "passes": true
+    },
+    {
+      "id": "TEST-001",
+      "title": "Storyboard Integration Tests",
+      "description": "Add integration tests for storyboard video generation.",
+      "priority": 10,
+      "acceptanceCriteria": [
+        "Create tests/video/storyboard.test.ts",
+        "Test multi-scene generation with mocked Veo API",
+        "Test FFmpeg stitching with mocked commands",
+        "Test transition options (cut, crossfade, fade)",
+        "Test character consistency with style prefix",
+        "Test error handling for failed scenes",
+        "All tests pass"
+      ],
+      "passes": true
+    },
+    {
+      "id": "DOCS-001",
+      "title": "Update README with Storyboard Documentation",
+      "description": "Document the new storyboard video generation feature in README.",
+      "priority": 11,
+      "acceptanceCriteria": [
+        "Add Storyboard Video section to README",
+        "Document generate_storyboard_video tool parameters",
+        "Document extend_video tool parameters",
+        "Add example usage for multi-scene video",
+        "Add example usage for character consistency",
+        "Add example usage for background music",
+        "Document FFmpeg requirement",
+        "Update feature list at top of README"
+      ],
+      "passes": true
+    },
+    {
+      "id": "UPDATE-001",
+      "title": "Update Existing Video Tools for Veo 3.1",
+      "description": "Update generate_video and image_to_video tools to use Veo 3.1 and expose new options.",
+      "priority": 12,
+      "acceptanceCriteria": [
+        "Update generate_video tool to use Veo 3.1",
+        "Add resolution parameter (720p/1080p)",
+        "Add duration parameter (4/6/8 seconds)",
+        "Add generateAudio parameter (default: true)",
+        "Update image_to_video tool similarly",
+        "Update tool descriptions to mention audio support",
+        "Update README video tools section"
+      ],
+      "passes": true
+    }
+  ]
+}

package/progress.txt

@@ -0,0 +1,145 @@
+# Ralph Ultra Progress Log
+Started: Thu Jan 15 22:01:15 CET 2026
+
+## Codebase Patterns
+- Use Veo 3.1 API with correct field names: `durationSeconds`, `imageBytes`, `videoBytes`
+- Always import enums from @google/genai (e.g., VideoGenerationReferenceType)
+- GeminiProvider handles all API polling automatically - return VideoGenerationResult with buffer
+- Tests use vitest with mocked GenAI SDK - use `importOriginal` for accessing real types
+- Use fake timers for testing async operations with delays
+- FFmpeg operations require exec() for complex shell features - ensure all paths are validated and quoted
+- Mock child_process.exec using callback pattern in tests
+---
+
+## 2026-01-15 22:07 - VEO3-001, VEO3-002, VEO3-003
+- Implemented GeminiProvider with full Veo 3.1 support
+- Files changed:
+  - src/providers/gemini.ts (new) - Complete provider implementation
+  - src/utils/file-handler.ts (new) - Placeholder utility
+  - src/utils/image-processing.ts (new) - Placeholder utility
+  - tests/providers/gemini.test.ts (new) - Comprehensive test suite
+- **Learnings for future iterations:**
+  - Veo 3.1 API uses `durationSeconds` not `duration`, `imageBytes` not `data`, `videoBytes` for video input
+  - Reference images use `VideoGenerationReferenceType.ASSET` enum for character/scene consistency
+  - Import actual types from @google/genai using `importOriginal` in mocks to access enums
+  - Use fake timers (`vi.useFakeTimers()`) for tests with polling to avoid timeouts
+  - TypeScript strict mode catches many API mismatches early - always run typecheck
+  - The GeminiProvider wraps Google GenAI SDK and handles all polling automatically
+---
+## 2026-01-15 22:11 - FFMPEG-001
+- Implemented FFmpeg utility module for video processing
+- Files changed:
+  - src/utils/ffmpeg.ts (new) - FFmpeg utility functions
+  - tests/utils/ffmpeg.test.ts (new) - Comprehensive test suite with 27 tests
+- **Learnings for future iterations:**
+  - Use promisify pattern from 'util' to convert exec callback to async/await
+  - Always check file existence with existsSync before FFmpeg operations
+  - FFmpeg concatenation has 3 approaches: cut (simple concat file), crossfade (xfade filter), fade (fade in/out filter)
+  - Mock child_process.exec in tests - use callback pattern: callback(error, {stdout, stderr})
+  - TypeScript strict mode catches array access issues (videoPaths[0] can be undefined)
+  - Handle single video edge case by copying file instead of concatenating
+  - Add volume parameter to addAudioTrack for mixing audio levels (0.0-1.0)
+  - FFmpeg filter_complex is powerful but complex - keep fallback to simple approaches
+---
+## 2026-01-15 22:15 - STORY-001
+- Implemented storyboard video generation tool with parallel scene generation
+- Files changed:
+  - src/tools/video/storyboard-video.ts (new) - Complete storyboard video tool implementation
+  - src/index.ts (modified) - Export storyboard tool and ffmpeg utilities
+- **Learnings for future iterations:**
+  - Use Promise.all() for parallel scene generation to maximize throughput
+  - Store temporary scene files in tmpdir() and clean up after stitching
+  - Graceful error handling: partial success is acceptable, filter failed scenes
+  - Always remove unused imports to pass TypeScript strict checks
+  - GeminiProvider.generateVideo() returns buffer directly, write to temp file for FFmpeg
+  - Tool returns detailed result object with timing per scene and success/failure counts
+  - Console.log progress messages help users track long-running operations
+  - The style option is prepended to each scene prompt for consistent styling
+---
+## 2026-01-15 23:15 - STORY-002
+- Implemented character consistency feature for storyboard videos
+- Files changed:
+  - src/tools/video/storyboard-video.ts (modified) - Added characterDescription and referenceImages options
+- **Learnings for future iterations:**
+  - Character consistency uses two complementary approaches: text description prepended to prompts + reference images
+  - Reference images are loaded from file paths and converted to ReferenceImage objects with buffers
+  - GeminiProvider.generateVideoWithReferences() uses the same options as generateVideo()
+  - When both characterDescription and referenceImages are provided, they work together for maximum consistency
+  - The prompt building order is: characterDescription + style + scene description
+  - Import readFile from 'fs/promises' to load reference image buffers
+  - Reference images max limit is 3 (validated before loading)
+  - Console.log messages help users understand what consistency features are being used
+---
+## 2026-01-15 22:17 - STORY-003
+- Implemented audio control options for storyboard video generation
+- Files changed:
+  - src/tools/video/storyboard-video.ts (modified) - Added audio options and mixing logic
+- **Learnings for future iterations:**
+  - The addAudioTrack() FFmpeg utility already handles mixing native video audio with background music using amix filter
+  - Audio mixing happens AFTER stitching - create temporary stitched video, then mix audio, then clean up
+  - Use two-stage output path approach: stitchedVideoPath (temp if music) vs outputPath (final)
+  - musicVolume parameter controls background music level (0.0-1.0), native audio stays at full volume
+  - Console.log progress messages help users understand when audio mixing is happening
+  - generateAudio option is passed directly to Veo API calls to control native audio generation
+  - All acceptance criteria met: generateAudio option, backgroundMusic option, musicVolume control, proper mixing
+---
+## 2026-01-15 22:30 - STORY-004
+- Enhanced progress reporting for storyboard video generation
+- Files changed:
+  - src/tools/video/storyboard-video.ts (modified) - Enhanced progress logging throughout
+- **Learnings for future iterations:**
+  - Progress reporting should be comprehensive and structured: initial config summary → per-scene progress → stitching phase → completion summary
+  - Use consistent formatting with indentation for hierarchical progress messages: top-level operations without indent, sub-operations with 3-space indent
+  - Show configuration upfront so users understand what's happening before long operations begin
+  - Include timing metrics in summary: total time, average per-scene time, success rate
+  - Progress format "[X/Y]" is clearer than "X/Y" when mixed with descriptive text
+  - Calculate derived metrics (avg scene time, success rate) to give users actionable insights
+  - Use emojis consistently for visual categorization: 🎬 for storyboard ops, 📹 for scenes, 🎞️ for stitching, ✨ for completion
+  - Always show output path at the end so users know where to find their result
+---
+## 2026-01-15 22:42 - EXTEND-001
+- Implemented extend_video tool for extending existing videos with new content
+- Files changed:
+  - src/tools/video/extend-video.ts (new) - Complete extend video tool implementation
+  - src/index.ts (modified) - Added extend-video export
+- **Learnings for future iterations:**
+  - Tools follow consistent pattern: options interface, result interface, main function
+  - GeminiProvider.extendVideo() wraps Veo 3.1 video extension API with automatic polling
+  - Read input video with readFile from 'fs/promises', pass buffer to provider
+  - Progress logging pattern from STORY-004 is valuable for all long-running operations
+  - Tool exports must be added to src/index.ts for public API access
+  - TypeScript strict mode validates all option types and return types
+  - Use tmpdir() for default output paths with timestamp to avoid collisions
+  - The extend video API is simpler than generate - just video buffer + prompt + options
+---
+## 2026-01-15 23:45 - TEST-001
+- Implemented comprehensive integration tests for storyboard video generation
+- Files changed:
+  - tests/video/storyboard.test.ts (new) - 20 integration tests covering all functionality
+  - prd.json (modified) - Marked TEST-001 as complete
+- **Learnings for future iterations:**
+  - Bun test runner doesn't support vi.mocked() helper - use type casting (ffmpeg.func as any).mockX() instead
+  - Don't use vi.clearAllTimers() - not available in this test environment
+  - Integration tests should verify complete workflows: API calls → file operations → stitching → cleanup
+  - Test error paths are important: partial failures, total failures, and edge cases
+  - Mocked operations complete instantly, so totalTime may be 0 - use toBeGreaterThanOrEqual(0) instead of toBeGreaterThan(0)
+  - Organize tests by feature area with describe blocks for better readability
+  - Test both happy path and error scenarios for robust coverage
+  - All 20 tests passing: multi-scene generation, FFmpeg stitching, transitions, character consistency, error handling, progress reporting
+---
+## 2026-01-15 22:37 - DOCS-001
+- Created comprehensive README.md with complete documentation
+- Files changed:
+  - README.md (new) - 513 lines of comprehensive documentation
+  - prd.json (modified) - Marked DOCS-001 as complete
+- **Learnings for future iterations:**
+  - README should be comprehensive yet scannable - use clear sections and hierarchies
+  - Include both API reference (parameters, types) and practical examples (code snippets)
+  - Document requirements prominently (FFmpeg, Node version) early in the README
+  - Best practices section helps users avoid common pitfalls
+  - Multiple examples for different use cases (basic, advanced, edge cases) improve usability
+  - Troubleshooting section addresses common setup issues proactively
+  - Progress logging output in examples helps users understand what to expect
+  - The README serves both as reference documentation and tutorial/guide
+  - Include TypeScript type definitions reference for better developer experience
+---

package/ralph-report.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ralph Report - opencode-nanobanana</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { 
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      color: #e2e8f0;
+      min-height: 100vh;
+      padding: 2rem;
+    }
+    .container { max-width: 1200px; margin: 0 auto; }
+    h1 { 
+      font-size: 2.5rem; 
+      margin-bottom: 0.5rem;
+      background: linear-gradient(90deg, #60a5fa, #a78bfa);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .subtitle { color: #94a3b8; margin-bottom: 2rem; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
+    .card {
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 1rem;
+      padding: 1.5rem;
+      backdrop-filter: blur(10px);
+    }
+    .card-title { font-size: 0.875rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
+    .card-value { font-size: 2rem; font-weight: 700; }
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border-radius: 9999px;
+      font-weight: 600;
+      background: #3b82f622;
+      color: #3b82f6;
+      border: 1px solid #3b82f644;
+    }
+    .section { margin-bottom: 2rem; }
+    .section-title { font-size: 1.25rem; margin-bottom: 1rem; color: #f1f5f9; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); }
+    th { color: #94a3b8; font-weight: 500; font-size: 0.875rem; text-transform: uppercase; }
+    tr:hover { background: rgba(255,255,255,0.03); }
+    .event-type {
+      display: inline-block;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+    .event-complete { background: #22c55e22; color: #22c55e; }
+    .event-restart { background: #f59e0b22; color: #f59e0b; }
+    .event-error { background: #ef444422; color: #ef4444; }
+    .event-start { background: #3b82f622; color: #3b82f6; }
+    .event-info { background: #6b728022; color: #94a3b8; }
+    .progress-bar {
+      height: 8px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 0.5rem;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #22c55e, #3b82f6);
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+    .duration-comparison {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .faster { color: #22c55e; }
+    .slower { color: #f59e0b; }
+    .timestamp { color: #64748b; font-size: 0.875rem; }
+    .empty-state { text-align: center; padding: 3rem; color: #64748b; }
+    footer { margin-top: 3rem; text-align: center; color: #64748b; font-size: 0.875rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Ralph Report</h1>
+      <p class="subtitle">opencode-nanobanana on macos</p>
+    </header>
+
+    <div class="grid">
+      <div class="card">
+        <div class="card-title">Status</div>
+        <div class="status-badge">
+          <span>⟳</span>
+          <span>running</span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-title">Stories Completed</div>
+        <div class="card-value">4 / 12</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Total Time</div>
+        <div class="card-value">25m</div>
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: 31%"></div>
+        </div>
+        <div style="font-size: 0.875rem; color: #64748b; margin-top: 0.25rem;">vs 1h 20m estimated</div>
+      </div>
+      <div class="card">
+        <div class="card-title">ETA</div>
+        <div class="card-value" style="color: #60a5fa">24m</div>
+        <div style="font-size: 0.875rem; color: #64748b; margin-top: 0.25rem;">~2026-01-15 22:50 (medium)</div>
+      </div>
+    </div>
+
+    <div class="grid">
+      <div class="card">
+        <div class="card-title">Files Changed</div>
+        <div class="card-value">43</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Lines Added</div>
+        <div class="card-value" style="color: #22c55e">+3030</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Lines Removed</div>
+        <div class="card-value" style="color: #ef4444">-263</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Restarts</div>
+        <div class="card-value" style="color: #22c55e">0</div>
+      </div>
+    </div>
+
+    <div class="grid">
+      <div class="card">
+        <div class="card-title">Total Cost</div>
+        <div class="card-value" style="color: #a78bfa">$11.37</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Input Tokens</div>
+        <div class="card-value">241.3K</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Output Tokens</div>
+        <div class="card-value">709.4K</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Total Tokens</div>
+        <div class="card-value">950.8K</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2 class="section-title">Stories Completed</h2>
+      <div class="card">
+        <table>
+          <thead>
+            <tr>
+              <th>Story</th>
+              <th>Duration</th>
+              <th>Estimate</th>
+              <th>Diff</th>
+              <th>Files</th>
+              <th>Lines</th>
+              <th>Completed</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><strong>VEO3-001</strong></td>
+              <td>10m</td>
+              <td>20m</td>
+              <td class="faster">-10m</td>
+              <td>7</td>
+              <td><span class="faster">+834</span>/<span class="slower">-219</span></td>
+              <td class="timestamp">2026-01-15T22:11:20+01:00</td>
+            </tr>
+            <tr>
+              <td><strong>FFMPEG-001</strong></td>
+              <td>5m</td>
+              <td>20m</td>
+              <td class="faster">-15m</td>
+              <td>6</td>
+              <td><span class="faster">+829</span>/<span class="slower">-3</span></td>
+              <td class="timestamp">2026-01-15T22:16:23+01:00</td>
+            </tr>
+            <tr>
+              <td><strong>STORY-002</strong></td>
+              <td>5m</td>
+              <td>20m</td>
+              <td class="faster">-15m</td>
+              <td>22</td>
+              <td><span class="faster">+1204</span>/<span class="slower">-13</span></td>
+              <td class="timestamp">2026-01-15T22:21:26+01:00</td>
+            </tr>
+            <tr>
+              <td><strong>STORY-003</strong></td>
+              <td>5m</td>
+              <td>20m</td>
+              <td class="faster">-15m</td>
+              <td>8</td>
+              <td><span class="faster">+163</span>/<span class="slower">-28</span></td>
+              <td class="timestamp">2026-01-15T22:26:28+01:00</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2 class="section-title">Restarts</h2>
+      <div class="card">
+        <table>
+          <thead>
+            <tr>
+              <th>Reason</th>
+              <th>Story</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr><td colspan="3" class="empty-state">No restarts - clean run!</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2 class="section-title">Event Timeline</h2>
+      <div class="card">
+        <table>
+          <thead>
+            <tr>
+              <th>Type</th>
+              <th>Message</th>
+              <th>Story</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><span class="event-type event-start">started</span></td>
+              <td>Monitor started for opencode-nanobanana</td>
+              <td></td>
+              <td class="timestamp">2026-01-15T22:01:15+01:00</td>
+            </tr>
+            <tr>
+              <td><span class="event-type event-start">start</span></td>
+              <td>Ralph started</td>
+              <td>VEO3-001</td>
+              <td class="timestamp">2026-01-15T22:01:18+01:00</td>
+            </tr>
+            <tr>
+              <td><span class="event-type event-complete">story_complete</span></td>
+              <td>Completed: VEO3-001 in 10m</td>
+              <td>VEO3-001</td>
+              <td class="timestamp">2026-01-15T22:11:20+01:00</td>
+            </tr>
+            <tr>
+              <td><span class="event-type event-complete">story_complete</span></td>
+              <td>Completed: FFMPEG-001 in 5m</td>
+              <td>FFMPEG-001</td>
+              <td class="timestamp">2026-01-15T22:16:23+01:00</td>
+            </tr>
+            <tr>
+              <td><span class="event-type event-complete">story_complete</span></td>
+              <td>Completed: STORY-002 in 5m</td>
+              <td>STORY-002</td>
+              <td class="timestamp">2026-01-15T22:21:26+01:00</td>
+            </tr>
+            <tr>
+              <td><span class="event-type event-complete">story_complete</span></td>
+              <td>Completed: STORY-003 in 5m</td>
+              <td>STORY-003</td>
+              <td class="timestamp">2026-01-15T22:26:28+01:00</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <footer>
+      <p>Generated by Ralph Monitor on 2026-01-15 22:26:30</p>
+      <p>Started: 2026-01-15T22:01:15+01:00 | Ended: running</p>
+    </footer>
+  </div>
+</body>
+</html>