@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/video-pipeline/assets/project/STORYBOARD.md

@@ -1,77 +0,0 @@
-# STORYBOARD.md — Shot List Template
-
-> Fill this out and validate it with `node scripts/storyboard-validator.mjs STORYBOARD.md`
-> before writing any scene code. All four gates must pass.
->
-> Gate 1 — Every shot has an EVENT (what physically happens), not a description.
-> Gate 2 — Reads within each shot have non-overlapping timestamps.
-> Gate 3 — Every seam has a named transition, including the film open and close.
-> Gate 4 — No on-screen text. Emotion and story must be acted, not captioned.
-
----
-
-## Film
-
-- title: My Film
-- duration: 30.0
-- fps: 30
-- size: 1920 × 1080
-- palette: #0d1117 #f0f6ff #3b82f6
-- bpm: 120
-
----
-
-## Shot 1 — Opening
-- start: 0.0
-- end: 8.0
-- transition_in: fade-from-black
-- transition_out: cut
-- event: The camera pushes slowly through darkness until a single point of light fills the frame.
-- reads:
-  - 0.0–3.0: Viewer feels disorientation — where are we?
-  - 3.0–8.0: The light resolves into a planet, establishing scale.
-
----
-
-## Shot 2 — Reveal
-- start: 8.0
-- end: 18.0
-- transition_in: cut
-- transition_out: dissolve
-- event: The planet rotates a quarter-turn, revealing the continent below, and the camera begins a slow descent.
-- reads:
-  - 8.0–12.0: Viewer recognises the landmass.
-  - 12.0–18.0: Viewer understands we are descending toward a specific location.
-
----
-
-## Shot 3 — Close
-- start: 18.0
-- end: 30.0
-- transition_in: dissolve
-- transition_out: fade-to-black
-- event: A single window lights up in the city below as all other lights flicker off.
-- reads:
-  - 18.0–24.0: Viewer feels the loneliness of the lit window.
-  - 24.0–30.0: Viewer understands this story is about one person among millions.
-
----
-<!-- 
-  NOTES FOR THE MODEL
-  ───────────────────
-  • "event" is a physical action, not a mood adjective.
-    BAD:  "A beautiful landscape is shown."
-    GOOD: "A wave breaks over the seawall and spray hits the lens."
-
-  • "reads" timestamps must not overlap:
-    BAD:  0.0–2.0 and 1.5–3.0 (overlap at 1.5–2.0)
-    GOOD: 0.0–2.0 and 2.0–4.0
-
-  • Every transition must be named. Recognised values:
-    cut  fade-from-black  fade-to-black  dissolve  wipe-left  wipe-right
-    iris-in  iris-out  cross-dissolve  push-left  push-right  flash  dip-to-white
-
-  • No text means no lower-thirds, title cards, subtitles, or overlays.
-    The model cannot write `text()` calls that convey plot information.
-    Character names, place names, dates — all must be acted or implied visually.
--->

package/.agent/skills/video-pipeline/assets/project/index.html

@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!--
-    FrameForge HTML Compositor Page
-    ================================
-    This page is the render target for headless Playwright captures.
-    render.mjs navigates here, injects the virtual-clock shim, then calls
-    window.__seek(t) once per frame to advance to time t.
-
-    DO NOT add async resource loads (remote fonts, CDN scripts) — all assets
-    must be local so the page reaches `networkidle` deterministically.
-
-    The #stage div is required. engine.js appends all layer divs into it.
-    Its dimensions are set by reel() in edit.js and matched by
-    page.setViewportSize() in render.mjs.
-  -->
-  <link rel="stylesheet" href="reel/engine.css">
-  <style>
-    /* Reset */
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    html, body {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      background: #000;
-    }
-
-    /* #stage is sized by reel() in edit.js (via CSS custom props set inline).
-       Fallback: 1920×1080. render.mjs also calls page.setViewportSize(). */
-    #stage {
-      position: relative;
-      width:  var(--reel-width,  1920px);
-      height: var(--reel-height, 1080px);
-      overflow: hidden;
-      background: #000;
-    }
-
-    /* Layer divs injected by engine.js */
-    #stage > [data-layer] {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-
-    /* Captions overlay — placed by engine.js captions() */
-    #caption-overlay {
-      position: absolute;
-      bottom: 80px;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 9999;
-      text-align: center;
-      pointer-events: none;
-    }
-  </style>
-</head>
-<body>
-  <!-- The compositor stage. All layers are appended here by engine.js. -->
-  <div id="stage"></div>
-
-  <!--
-    edit.js is the author-written animation file.
-    It imports from ./reel/engine.js and calls:
-      reel({ width, height, fps, duration, title })
-      layer('name').on(t => ({ ...styles }))
-      at(t, element)
-    etc.
-
-    The module type is required — engine.js uses ES module exports.
-  -->
-  <script type="module" src="edit.js"></script>
-</body>
-</html>

package/.agent/skills/video-pipeline/assets/project/pipeline/briefings/diagram-author.md

@@ -1,43 +0,0 @@
-# pipeline/briefings/diagram-author.md
-# Loaded by diagram-author subagents. Read this fully before writing diagram code.
-
-## Your role
-
-You are a **diagram-author** subagent. You produce one or more animated diagram
-scenes (flowcharts, data visualisations, timeline graphics, explainer layouts).
-
-## Constraints
-
-1. **Read ANIMATION_GUIDE.md in full** before writing code.
-2. Do not edit shared helpers (`reel/engine.js`, etc.).
-3. Diagrams are still subject to the IRON RULE: every style is a pure function of `t`.
-4. **No rotateY / perspective** on flat diagrams — breaks layout.
-5. **No photoreal expectations** — diagrams are motion graphics. Flat fills, SVG,
-   Canvas 2D, or Three.js orthographic only.
-
-## Recommended stack by diagram type
-
-| Diagram type | Recommended |
-|---|---|
-| Flowchart / boxes and arrows | SVG + GSAP timeline `.seek(t)` |
-| Data chart (bar, line, scatter) | Canvas 2D + lerp() |
-| Network / force-directed | Precomputed positions + lerp() |
-| Timeline / Gantt | CSS absolute positioning + `layer()` |
-| 3D architecture | Three.js orthographic + `camera.position` driven by `t` |
-
-## GSAP pattern (paused + seeked)
-
-```js
-import gsap from 'https://cdn.skypack.dev/gsap'
-// Build the timeline PAUSED — the renderer drives it
-const tl = gsap.timeline({ paused: true })
-tl.to('#box', { x: 200, duration: 1 })
-layer('diagram').on(t => { tl.seek(t); return {} })
-```
-
-Never call `tl.play()` or `tl.resume()` — the virtual clock shim drives `rAF`,
-but GSAP's internal clock is separate and will desync if started.
-
-## Returning
-
-Reply with the complete diagram scene file and a storyboard still.

package/.agent/skills/video-pipeline/assets/project/pipeline/briefings/orchestrator.md

@@ -1,75 +0,0 @@
-# pipeline/briefings/orchestrator.md
-# Loaded by the orchestrator agent. Read this fully before spawning subagents.
-
-## Your role
-
-You are the **orchestrator**. You own the full production timeline and the final output.
-You spawn scene-author and diagram-author subagents, integrate their output, and run
-the verification loop.
-
-## Model effort settings (Opus 5.5 / Claude Code)
-
-Use the right effort level at each stage — wrong effort wastes cost or quality:
-
-| Stage | effort | Reason |
-|-------|--------|--------|
-| Beat sheet + storyboard authorship | `xhigh` | New creative work — maximum reasoning |
-| First-time scene code authorship | `xhigh` | New composition, determinism matters |
-| Storyboard gate review / patch | `medium` | Analytical, not creative |
-| Strip-range patch (fix failing frames) | `medium` | Targeted surgical fix |
-| Encode-only / mux-only runs | `medium` | No creative decisions |
-| Research / scripting (Path 3) | `xhigh` for first draft, `medium` for revisions |
-
-`tool_choice` must always be `auto` — forced tool use is not supported in Opus 5.5.
-
-## Order of operations
-
-```
-1. Brief → storyboard (STORYBOARD.md) — STOP, await human approval
-2. Storyboard passes all 4 gates (storyboard-validator.mjs)
-3. TTS first: generate audio, get word-level timestamps (transcribe.py)
-4. Assign chapters to scene-author / diagram-author subagents
-5. Collect scenes — each must include a storyboard still
-6. Run look.mjs (preflight DOM check)
-7. Run render.mjs sheet (one sheet per shot)
-8. Review sheets, request patches from the responsible subagent
-9. Run render.mjs full (full encode, all workers)
-    → After full render, out/sfx-events.json is auto-generated from window.__events()
-10. Run mix_audio_pro.py (professional signal chain):
-    uv run scripts/mix_audio_pro.py --room broadcast --platform youtube
-    (--sfx-events flag reads out/sfx-events.json automatically if present)
-11. Run verify.py (7-gate QC)
-12. If QC fails: identify the responsible chapter, re-assign to a fresh subagent
-13. Mux audio: render.mjs mux --audio=out/audio_mix_pro.m4a
-14. Final verify.py pass
-```
-
-## Subagent rules
-
-- Each subagent receives a briefing from `pipeline/briefings/<role>.md`.
-- **Subagents may not edit shared helpers.** If a subagent proposes an edit to
-  `reel/engine.js` or `scripts/render.mjs`, reject it and ask for a chapter-local
-  workaround.
-- Run verification with subagents: 2 subagents at a time, each scanning 10 frames
-  (every 5 frames of the rendered sequence).
-- Chapter seams are the weakest point. Always run a strip over the last 0.5s of
-  one chapter and the first 0.5s of the next to catch missing anticipation frames.
-
-## Spend gate
-
-If `video_job.py` is running this production, it enforces `--max-usd`. You must call
-`estimate_cost()` before the visuals phase. If the estimate would exceed the cap,
-reduce the chapter count or shorten scenes before proceeding.
-
-## Quality gate pass criteria
-
-`verify.py` checks:
-1. Output file exists and is non-empty
-2. Duration within 2% of spec
-3. Resolution matches spec
-4. No corrupt frames (mean pixel value > 1, < 254)
-5. Audio track present in muxed file
-6. BT.709 colour tags present
-7. `-faststart` moov atom at file head
-
-All 7 must pass before the job is marked `done`.

package/.agent/skills/video-pipeline/assets/project/pipeline/briefings/scene-author.md

@@ -1,63 +0,0 @@
-# pipeline/briefings/scene-author.md
-# Loaded by scene-author subagents — read this fully before writing any scene code.
-
-## Your role
-
-You are a **scene-author** subagent. Your only job is to write the scene file(s)
-assigned to you by the orchestrator. You do not edit shared helpers.
-
-## Hard constraints
-
-1. **Read ANIMATION_GUIDE.md in full** before you write a single line of scene code.
-2. **Do not edit** `reel/engine.js`, `reel/engine.css`, `scripts/render.mjs`,
-   `scripts/look.mjs`, or any other file outside your assigned chapter directory.
-3. Every style property must be a **pure function of `t`**. No `setTimeout`,
-   no `Math.random()`, no module-level mutable state.
-4. After writing, run:
-   ```bash
-   node scripts/render.mjs storyboard
-   ```
-   Attach the output PNG to your reply. The orchestrator will not accept your scene
-   without a storyboard still.
-5. If `cuePhrase()` throws a fatal error, your scene has a missing voiceover phrase.
-   Fix the phrase match before returning.
-
-## Revision attempt cap — 3 maximum
-
-You have a maximum of **3 revision attempts** per chapter assignment.
-
-- Attempt 1: Initial write → storyboard still → return.
-- Attempt 2: Patch based on orchestrator review → storyboard → return.
-- Attempt 3: Final fix → storyboard → return.
-
-**If the chapter does not pass storyboard-validator + purity gate after 3 attempts:**
-Stop. Do not attempt a 4th revision. Return to the orchestrator with:
-1. The exact error message from `storyboard-validator.mjs` or `verify-purity.mjs`.
-2. The specific line(s) in your scene file you believe are responsible.
-3. What you have already tried.
-
-Unbounded revision loops are the primary driver of token waste. 3 attempts is the cap.
-
-## Model effort
-
-Use `effort: xhigh` for the initial scene authorship. Use `effort: medium` for patch revisions.
-This matches the Opus 5.5 recommended settings: `xhigh` for new creative work, `medium` for targeted fixes.
-
-## File naming
-
-Your chapter file is: `edit_chapter_N.js` where N is your chapter number.
-The orchestrator's `index.html` `<script>` tag already imports it. Do not create
-additional entry points.
-
-## Transition seams
-
-The orchestrator's storyboard specifies the transition_in and transition_out for your
-chapter. Implement them exactly. The fade/dissolve between your chapter and the next
-is your responsibility on the out-side; the next chapter handles its in-side.
-
-## Returning
-
-Reply with:
-1. The complete scene file contents (no diffs, no fragments).
-2. The storyboard still (PNG attached or path printed).
-3. Any `cuePhrase()` timestamps you resolved, so the orchestrator can verify sync.

package/.agent/skills/video-pipeline/assets/project/reel/engine.css

@@ -1,140 +0,0 @@
-/**
- * engine.css — FrameForge HTML Compositor Base Reset + Design Tokens
- *
- * Loaded by index.html before edit.js.
- * No animation or transition rules — every visual state is driven by engine.js seek(t).
- */
-
-/* ── Design tokens ─────────────────────────────────────────────────────────── */
-
-:root {
-  /* Colours */
-  --bg:        #0d1117;
-  --surface:   #161b22;
-  --border:    rgba(255, 255, 255, 0.08);
-  --primary:   #ffffff;
-  --secondary: rgba(255, 255, 255, 0.6);
-  --accent:    #3b82f6;
-  --accent2:   #7c5cd8;
-  --success:   #22c55e;
-  --warning:   #f59e0b;
-  --danger:    #ef4444;
-
-  /* Typography scale */
-  --font-body:    -apple-system, "Segoe UI", "Nirmala UI", "Noto Sans Malayalam", "Malayalam Sangam MN", "Kartika", "Meera", "Manjari", system-ui, sans-serif;
-  --font-mono:    "Fira Code", "Cascadia Code", "Consolas", monospace;
-  --font-display: "Archivo", "Nirmala UI", "Noto Sans Malayalam", "Malayalam Sangam MN", "Kartika", "Meera", "Manjari", -apple-system, "Segoe UI", system-ui, sans-serif;
-
-  /* Spacing */
-  --gap-sm:  8px;
-  --gap-md:  16px;
-  --gap-lg:  32px;
-  --gap-xl:  64px;
-
-  /* Safe zones (match FFmpeg drawtext safe area) */
-  --safe-top:    120px;
-  --safe-bottom: 120px;
-  --safe-left:   80px;
-  --safe-right:  80px;
-}
-
-/* ── Full reset ─────────────────────────────────────────────────────────────── */
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  width:    100%;
-  height:   100%;
-  overflow: hidden;
-  background: var(--bg);
-}
-
-body {
-  font-family: var(--font-body);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--primary);
-  /* Disable ALL browser animations — seek(t) owns every frame */
-  animation: none !important;
-  transition: none !important;
-}
-
-/* ── Stage ─────────────────────────────────────────────────────────────────── */
-
-#stage {
-  position: relative;
-  overflow: hidden;
-  background: var(--bg);
-  /* No transform on the stage itself — Playwright screenshots the viewport */
-}
-
-/* ── Layer base ─────────────────────────────────────────────────────────────── */
-
-[data-layer] {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-/* ── Typography utilities ───────────────────────────────────────────────────── */
-
-.text-display {
-  font-family: var(--font-display);
-  font-weight: 800;
-  letter-spacing: -0.02em;
-}
-
-.text-body {
-  font-family: var(--font-body);
-  font-weight: 400;
-  line-height: 1.6;
-}
-
-.text-mono {
-  font-family: var(--font-mono);
-}
-
-/* ── Utility classes ────────────────────────────────────────────────────────── */
-
-.center-x {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.center-y {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.center-xy {
-  top:  50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-/* ── Image defaults ─────────────────────────────────────────────────────────── */
-
-img {
-  display: block;
-  max-width: 100%;
-}
-
-/* ── Scrollbar hide (for overflow containers) ───────────────────────────────── */
-
-::-webkit-scrollbar { display: none; }
-* { scrollbar-width: none; }
-
-/* ── Font imports — loaded from CDN in index.html; this is a fallback stack ── */
-
-/* Archivo (display) */
-@font-face {
-  font-family: 'Archivo';
-  font-style:  normal;
-  font-weight: 400 900;
-  font-display: block;
-  /* Served by index.html via Google Fonts; this block avoids FOUT in preview */
-}