From 8fc3e9fbd1d470b5fb4642b0309b36c166bb3b6b Mon Sep 17 00:00:00 2001
From: calesthio <celesthioailabs@gmail.com>
Date: Fri, 3 Jul 2026 06:55:43 -0700
Subject: [PATCH] backlot: fix dogfood findings + global type scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes surfaced by the "How Salt Changed History" run:

- Decisions rail showed a stale choice. Contract now requires a superseding
  decision_log entry when a logged choice changes mid-run; the board collapses
  by category+subject and renders the latest as current, tagged "revised"
  (AGENT_GUIDE Decision Communication Contract; board.js renderDecisions).
- Assets gate jumped by a draft render. The review surface is the filmstrip:
  render per-scene stills to snapshots/<scene_id>.png (scripts/atelier_snapshots.py)
  and STOP; the full/draft render is the compose stage, post-approval
  (checkpoint-protocol, bespoke-composition).
- Broken thumbnails / missing scenes. A .tsx "animation" asset is no longer a
  renderable visual — resolve snapshots/<scene_id>.* or a shot-spec placeholder;
  add <img onerror> fallback and a BESPOKE placeholder (state.py, board.js).
- Clicking a card video did nothing. .thumb video had no sizing, so the frame
  and click box drifted; add object-fit:cover. Click-to-play on the render-hero
  player; narration is clickable -> modal with the full text (board.css/js).
- Type too small everywhere. Add one --fs-scale (1.16) knob; every font-size is
  calc(px * var(--fs-scale)) so text scales proportionally and reversibly,
  verified for zero overflow at desktop + tablet widths.
---
 AGENT_GUIDE.md                     |   6 +
 backlot/state.py                   |  48 +++++++-
 backlot/ui/board.css               | 172 +++++++++++++++++------------
 backlot/ui/board.js                |  88 ++++++++++++---
 scripts/atelier_snapshots.py       | 121 ++++++++++++++++++++
 skills/meta/bespoke-composition.md |  23 +++-
 skills/meta/checkpoint-protocol.md |  21 +++-
 7 files changed, 384 insertions(+), 95 deletions(-)
 create mode 100644 scripts/atelier_snapshots.py

diff --git a/AGENT_GUIDE.md b/AGENT_GUIDE.md
index 488a03a1..c664c0d3 100644
--- a/AGENT_GUIDE.md
+++ b/AGENT_GUIDE.md
@@ -114,6 +114,12 @@ The agent must ask the user before changing any major production choice, includi
 
 Minor prompt refinements inside an already approved provider/model path do not require separate approval unless they materially change the creative direction.
 
+### Re-log Changed Decisions (Binding)
+
+The `decision_log` is the board's Decisions rail and the run's audit trail. It is **append-only history, not a scratchpad.** When a choice you already logged changes mid-run — the user swaps the voice, you switch provider/model/runtime/music, or a fallback overrides an earlier pick — you MUST **append a new `decision_log` entry** for the new choice (same `category`, e.g. `voice_selection`), with the superseded option moved into `options_considered` and `rejected_because` noting it was changed.
+
+Editing only a downstream artifact (the `asset_manifest`, a prop) while leaving the old decision in the log is a defect: the board keeps showing the stale choice (e.g. `voice → openai_onyx` after the user moved to Chirp3). The board renders the **latest** entry per `category` as current — so the fix is to write the new entry, never to silently mutate the old one. This applies at every stage, not just `idea`.
+
 ### Present Both Composition Runtimes (HARD RULE)
 
 When both Remotion and HyperFrames are available on the machine (check `video_compose.get_info()["render_engines"]`), the agent **MUST present both options to the user** before locking `render_runtime` at the proposal stage. The agent MAY recommend one with rationale — but silently picking a "default" is forbidden even when the pipeline manifest or a director skill suggests one.
diff --git a/backlot/state.py b/backlot/state.py
index ee891878..c28d60b1 100644
--- a/backlot/state.py
+++ b/backlot/state.py
@@ -311,12 +311,20 @@ def _asset_entry(project_dir: Path, asset: dict) -> dict:
             kind = "video"
         elif ext in MEDIA_AUDIO_EXT:
             kind = "audio"
+    # A visual is only *renderable* on the board if the file it points at is
+    # actually a raster image or a video. Bespoke/atelier assets (type
+    # "animation" pointing at a .tsx composition) exist on disk but can't be
+    # thumbnailed — routing them to <img> yields a broken image. The board
+    # falls back to a per-scene snapshot or the shot-spec placeholder instead.
+    ext = file_path.suffix.lower()
+    renderable = exists and ext in (MEDIA_IMAGE_EXT | MEDIA_VIDEO_EXT)
     return {
         "id": asset.get("id"),
         "type": kind,
         "scene_id": asset.get("scene_id"),
         "path": _rel(project_dir, file_path) if exists else raw_path,
         "exists": exists,
+        "renderable": renderable,
         "prompt": asset.get("prompt"),
         "model": asset.get("model"),
         "source_tool": asset.get("source_tool"),
@@ -328,6 +336,36 @@ def _asset_entry(project_dir: Path, asset: dict) -> dict:
     }
 
 
+def _find_scene_snapshot(project_dir: Path, scene_id: str) -> Optional[dict]:
+    """A per-scene review still, if the run wrote one.
+
+    Atelier/animation scenes have no thumbnailable asset file, so the
+    assets-stage snapshot (`snapshots/<scene_id>.png`) is what the filmstrip
+    shows. Accept exact `<scene_id>.<ext>` and `<scene_id>_*.<ext>` forms.
+    """
+    snap_dir = project_dir / "snapshots"
+    if not scene_id or not snap_dir.is_dir():
+        return None
+    try:
+        for f in sorted(snap_dir.iterdir()):
+            if not f.is_file() or f.suffix.lower() not in MEDIA_IMAGE_EXT:
+                continue
+            stem = f.stem
+            if stem == scene_id or stem.startswith(f"{scene_id}_"):
+                return {
+                    "id": f"snap_{scene_id}",
+                    "type": "image",
+                    "scene_id": scene_id,
+                    "path": _rel(project_dir, f),
+                    "exists": True,
+                    "renderable": True,
+                    "snapshot": True,
+                }
+    except OSError:
+        return None
+    return None
+
+
 def _find_script_section(scene: dict, sections: list[dict]) -> Optional[dict]:
     """Join scene → script section by id, falling back to timing overlap."""
     sid = scene.get("script_section_id")
@@ -396,8 +434,12 @@ def _build_storyboard(
         scene_assets = assets_by_scene.get(sid, [])
         visuals = [a for a in scene_assets if a["type"] in ("image", "video", "diagram", "animation")]
         audio = [a for a in scene_assets if a["type"] in ("audio", "narration", "music", "sfx")]
-        # Takes: multiple visual assets for the same slot, ordered as listed.
-        active_visual = visuals[-1] if visuals else None
+        # Only files that can actually be shown (raster/video) are takes; a
+        # bespoke composition asset (.tsx animation) is real but not showable.
+        renderable = [a for a in visuals if a.get("renderable")]
+        # Active visual: newest renderable take, else a per-scene review
+        # snapshot, else nothing (card falls to the shot-spec placeholder).
+        active_visual = renderable[-1] if renderable else _find_scene_snapshot(project_dir, sid)
         cards.append({
             "id": sid,
             "type": scene.get("type"),
@@ -418,7 +460,7 @@ def _build_storyboard(
             "section_label": (section or {}).get("label"),
             "required_assets": scene.get("required_assets") or [],
             "visual": active_visual,
-            "takes": visuals,
+            "takes": renderable,
             "audio": audio,
             "generating": generating.get(sid) is not None,
             "generating_tool": (generating.get(sid) or {}).get("tool"),
diff --git a/backlot/ui/board.css b/backlot/ui/board.css
index 45655970..e4de79ff 100644
--- a/backlot/ui/board.css
+++ b/backlot/ui/board.css
@@ -29,6 +29,10 @@
   --sans: 'Inter', -apple-system, sans-serif;
   --mono: 'JetBrains Mono', ui-monospace, monospace;
   --screenplay: 'Courier Prime', 'Courier New', monospace;
+
+  /* Global type scale. Every font-size is calc(<px> * var(--fs-scale)), so this
+     one number scales all text proportionally for readability. 1 = original. */
+  --fs-scale: 1.16;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -43,7 +47,7 @@ body {
   background: var(--bg);
   color: var(--text);
   font-family: var(--sans);
-  font-size: 14px;
+  font-size: calc(14px * var(--fs-scale));
   line-height: 1.5;
   min-height: 100vh;
   /* faint vignette so media pops */
@@ -101,15 +105,15 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
   border: 1px solid var(--border);
 }
 .slate h1 {
-  font-family: var(--mono); font-size: 17px; font-weight: 600;
+  font-family: var(--mono); font-size: calc(17px * var(--fs-scale)); font-weight: 600;
   letter-spacing: 0.08em; text-transform: uppercase;
 }
 .slate .wordmark {
-  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
+  font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: 0.22em;
   color: var(--text-3); text-transform: uppercase; margin-right: 2px;
 }
 .chip {
-  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
+  font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); letter-spacing: 0.06em;
   padding: 3px 9px; border-radius: 99px;
   border: 1px solid var(--border); color: var(--text-2);
   white-space: nowrap;
@@ -119,7 +123,7 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 
 .live {
   display: inline-flex; align-items: center; gap: 7px;
-  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
+  font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: 0.14em;
   color: var(--amber);
 }
 .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
@@ -131,13 +135,13 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 }
 
 .cost { text-align: right; }
-.cost .nums { font-family: var(--mono); font-size: 13px; }
+.cost .nums { font-family: var(--mono); font-size: calc(13px * var(--fs-scale)); }
 .cost .nums b { color: var(--text); font-weight: 600; }
 .cost .nums span { color: var(--text-3); }
 .cost .bar { width: 150px; height: 3px; background: var(--surface-3); border-radius: 3px; margin-top: 5px; overflow: hidden; }
 .cost .bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
 .cost .bar i.warn { background: var(--amber); }
-.cost .label { font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
+.cost .label { font-size: calc(10px * var(--fs-scale)); color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
 
 /* ---------- stage rail ---------- */
 .rail { display: flex; align-items: flex-start; padding: 26px 0 22px; }
@@ -145,7 +149,7 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .stage .node {
   width: 26px; height: 26px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
-  font-size: 12px; z-index: 2; position: relative;
+  font-size: calc(12px * var(--fs-scale)); z-index: 2; position: relative;
   background: var(--surface-2); border: 1.5px solid var(--border);
   color: var(--text-3);
 }
@@ -155,10 +159,10 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 }
 .stage:first-child .line { display: none; }
 .stage .name {
-  margin-top: 10px; font-family: var(--mono); font-size: 11px;
+  margin-top: 10px; font-family: var(--mono); font-size: calc(11px * var(--fs-scale));
   letter-spacing: 0.05em; color: var(--text-3);
 }
-.stage .sub { font-size: 10.5px; color: var(--text-3); margin-top: 3px; text-align: center; max-width: 150px; }
+.stage .sub { font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); margin-top: 3px; text-align: center; max-width: 150px; }
 
 .stage.done .node { background: var(--surface-3); border-color: #3a3a42; color: var(--green); }
 .stage.done .line { background: #3a3a42; }
@@ -200,8 +204,8 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
   display: flex; align-items: baseline; gap: 10px;
   padding: 13px 16px 11px; border-bottom: 1px solid var(--border-soft);
 }
-.panel-head h2 { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--text-2); text-transform: uppercase; }
-.panel-head .meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); margin-left: auto; }
+.panel-head h2 { font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); font-weight: 600; letter-spacing: 0.18em; color: var(--text-2); text-transform: uppercase; }
+.panel-head .meta { font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); margin-left: auto; }
 .panel-body { padding: 14px 16px; }
 
 /* ---------- screenplay card ---------- */
@@ -222,31 +226,31 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
   background: rgba(0,0,0,.07);
 }
 .script-card .sp-title {
-  text-align: center; font-weight: 700; font-size: 16px;
+  text-align: center; font-weight: 700; font-size: calc(16px * var(--fs-scale));
   letter-spacing: 0.12em; text-transform: uppercase;
   margin-bottom: 4px;
 }
-.script-card .sp-meta { text-align: center; font-size: 11.5px; color: var(--cream-ink-2); margin-bottom: 26px; }
+.script-card .sp-meta { text-align: center; font-size: calc(11.5px * var(--fs-scale)); color: var(--cream-ink-2); margin-bottom: 26px; }
 .script-card .sp-slug {
-  font-weight: 700; font-size: 12.5px; text-transform: uppercase;
+  font-weight: 700; font-size: calc(12.5px * var(--fs-scale)); text-transform: uppercase;
   letter-spacing: 0.04em; margin: 18px 0 6px;
 }
-.script-card .sp-slug .tc { color: var(--cream-ink-2); font-weight: 400; float: right; font-size: 11px; }
-.script-card .sp-action { font-size: 13px; line-height: 1.62; }
-.script-card .sp-paren { font-size: 11.5px; font-style: italic; color: var(--cream-ink-2); margin: 4px 0 0 42px; }
+.script-card .sp-slug .tc { color: var(--cream-ink-2); font-weight: 400; float: right; font-size: calc(11px * var(--fs-scale)); }
+.script-card .sp-action { font-size: calc(13px * var(--fs-scale)); line-height: 1.62; }
+.script-card .sp-paren { font-size: calc(11.5px * var(--fs-scale)); font-style: italic; color: var(--cream-ink-2); margin: 4px 0 0 42px; }
 .script-card .sp-cue {
-  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-style: normal;
+  display: inline-block; font-family: var(--mono); font-size: calc(9.5px * var(--fs-scale)); font-style: normal;
   background: rgba(0,0,0,.06); border-radius: 3px; padding: 1px 6px; margin: 6px 0 0;
   color: #7d6f52; letter-spacing: .03em;
 }
-.script-card .sp-fade { text-align: right; font-size: 12px; font-weight: 700; margin-top: 20px; text-transform: uppercase; }
+.script-card .sp-fade { text-align: right; font-size: calc(12px * var(--fs-scale)); font-weight: 700; margin-top: 20px; text-transform: uppercase; }
 .script-card .sp-expand {
   position: absolute; right: 16px; bottom: 12px;
-  font-family: var(--mono); font-size: 10px; color: var(--cream-ink-2); letter-spacing: .06em;
+  font-family: var(--mono); font-size: calc(10px * var(--fs-scale)); color: var(--cream-ink-2); letter-spacing: .06em;
 }
 .script-approved {
   position: absolute; top: 20px; right: 26px;
-  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em;
+  font-family: var(--mono); font-size: calc(10px * var(--fs-scale)); font-weight: 600; letter-spacing: .14em;
   color: #2c7a4b; border: 1.5px solid #2c7a4b; border-radius: 3px;
   padding: 3px 8px; transform: rotate(6deg); opacity: .8;
 }
@@ -255,19 +259,20 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .decision { padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
 .decision:last-child { border-bottom: none; }
 .decision .d-head { display: flex; gap: 8px; align-items: baseline; }
-.decision .d-cat { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
-.decision .d-pick { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
+.decision .d-cat { font-family: var(--mono); font-size: calc(9.5px * var(--fs-scale)); color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
+.decision .d-revised { color: var(--amber); }
+.decision .d-pick { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; margin-top: 3px; }
 .decision .d-pick .arrow { color: var(--amber); font-weight: 400; }
-.decision .d-why { font-size: 11.5px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
-.decision .d-alt { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
+.decision .d-why { font-size: calc(11.5px * var(--fs-scale)); color: var(--text-2); margin-top: 3px; line-height: 1.45; }
+.decision .d-alt { font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); margin-top: 4px; }
 .decision .d-alt s { opacity: .8; }
 
-.act-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); font-size: 11px; }
+.act-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); }
 .act-row:last-child { border-bottom: none; }
-.act-row .t { color: var(--text-3); font-size: 10px; flex: none; }
+.act-row .t { color: var(--text-3); font-size: calc(10px * var(--fs-scale)); flex: none; }
 .act-row .tool { color: var(--text-2); }
 .act-row .target { color: var(--text-3); }
-.act-row .status { margin-left: auto; flex: none; font-size: 10.5px; }
+.act-row .status { margin-left: auto; flex: none; font-size: calc(10.5px * var(--fs-scale)); }
 .act-row .status.ok { color: var(--green); }
 .act-row .status.run { color: var(--amber); animation: blink 1.4s ease-in-out infinite; }
 .act-row .status.err { color: var(--red); }
@@ -286,7 +291,7 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .scene-card { flex: none; display: flex; flex-direction: column; position: relative; }
 .scene-card .sc-slate {
   display: flex; align-items: baseline; gap: 8px;
-  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
+  font-family: var(--mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .05em;
   color: var(--text-3); padding: 0 2px 6px;
 }
 .scene-card .sc-slate .num { color: var(--text-2); font-weight: 600; }
@@ -300,15 +305,26 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
   border: 1px solid var(--border);
 }
 .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* Videos must fill the thumb box exactly — without this the <video> renders at
+   its intrinsic size, so the visible frame and the clickable box drift apart
+   (clicking the picture did nothing; clicking below it toggled play). */
+.thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb.approved { cursor: pointer; }
+/* bespoke/atelier scene placeholder */
+.thumb.spec.bespoke { border-color: rgba(240,168,60,.4); }
+.thumb.spec .bespoke-tag {
+  font-family: var(--mono); font-size: calc(9px * var(--fs-scale)); letter-spacing: .1em;
+  color: var(--amber); margin-bottom: 2px;
+}
 .thumb .badge {
   position: absolute; left: 7px; bottom: 7px;
-  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
+  font-family: var(--mono); font-size: calc(9px * var(--fs-scale)); letter-spacing: .06em;
   background: rgba(8,8,10,.72); color: var(--text-2);
   padding: 2px 7px; border-radius: 3px; backdrop-filter: blur(4px);
 }
 .thumb .play {
   position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
-  color: rgba(255,255,255,.85); font-size: 26px; text-shadow: 0 2px 12px rgba(0,0,0,.7);
+  color: rgba(255,255,255,.85); font-size: calc(26px * var(--fs-scale)); text-shadow: 0 2px 12px rgba(0,0,0,.7);
   opacity: 0; transition: opacity .18s;
 }
 .thumb:hover .play { opacity: 1; }
@@ -326,9 +342,9 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .thumb.generating .gen-label {
   position: absolute; inset: 0; display: flex; flex-direction: column;
   align-items: center; justify-content: center; gap: 6px; padding: 0 14px; text-align: center;
-  font-family: var(--mono); font-size: 10px; color: var(--amber); letter-spacing: .08em;
+  font-family: var(--mono); font-size: calc(10px * var(--fs-scale)); color: var(--amber); letter-spacing: .08em;
 }
-.thumb.generating .gen-label .sub { color: var(--text-3); font-size: 9.5px; letter-spacing: .03em; line-height: 1.5; }
+.thumb.generating .gen-label .sub { color: var(--text-3); font-size: calc(9.5px * var(--fs-scale)); letter-spacing: .03em; line-height: 1.5; }
 
 /* pending spec card */
 .thumb.spec { border-style: dashed; border-color: #2c2c34; background: transparent; }
@@ -336,49 +352,61 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
   position: absolute; inset: 0; padding: 10px 12px;
   display: flex; flex-direction: column; justify-content: center; gap: 4px;
 }
-.thumb.spec .spec-desc { font-size: 10.5px; color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-.thumb.spec .spec-shot { font-family: var(--mono); font-size: 9px; color: #4a4a54; letter-spacing: .04em; }
+.thumb.spec .spec-desc { font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.thumb.spec .spec-shot { font-family: var(--mono); font-size: calc(9px * var(--fs-scale)); color: #4a4a54; letter-spacing: .04em; }
 
 /* missing asset */
 .thumb.missing { border-color: rgba(240,168,60,.55); border-style: dashed; background: var(--amber-dim); }
 .thumb.missing .spec-in { align-items: center; text-align: center; }
-.thumb.missing .warn-ic { color: var(--amber); font-size: 15px; }
+.thumb.missing .warn-ic { color: var(--amber); font-size: calc(15px * var(--fs-scale)); }
 .thumb.missing .spec-desc { color: var(--amber); -webkit-line-clamp: 2; }
 
 /* text-card scene (typographic placeholder) */
 .thumb.textcard { display: flex; align-items: center; justify-content: center; background: #0d0d10; }
 .thumb.textcard .tc-copy {
   font-family: var(--mono); font-weight: 500; text-align: center;
-  letter-spacing: .2em; font-size: 11px; color: #d8d8de; padding: 0 10px;
+  letter-spacing: .2em; font-size: calc(11px * var(--fs-scale)); color: #d8d8de; padding: 0 10px;
 }
 
 .narr {
-  padding: 8px 3px 0; font-size: 11px; color: var(--text-2); line-height: 1.45;
-  font-style: italic; max-height: 52px; overflow: hidden;
+  padding: 8px 3px 0; font-size: calc(11px * var(--fs-scale)); color: var(--text-2); line-height: 1.45;
+  font-style: italic; max-height: 52px; overflow: hidden; position: relative;
 }
+/* Long narration is clamped with a soft fade + expand glyph; click opens the
+   full text in the modal instead of hard-cutting mid-word. */
+.narr.clip {
+  cursor: pointer;
+  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
+  mask-image: linear-gradient(180deg, #000 62%, transparent);
+}
+.narr .narr-more {
+  position: absolute; right: 2px; bottom: 2px; font-style: normal;
+  color: var(--text-3); font-size: calc(11px * var(--fs-scale));
+}
+.narr.clip:hover { color: var(--text-1); }
 .narr.tc-note { color: var(--text-3); }
 
 .wave { display: flex; align-items: flex-end; gap: 1.5px; height: 14px; padding: 6px 3px 0; }
 .wave i { width: 2.5px; background: #3d3d47; border-radius: 1px; }
 .wave.played i { background: #565664; }
-.wave .wv-time { font-family: var(--mono); font-size: 9px; color: var(--text-3); margin-left: 6px; align-self: center; }
+.wave .wv-time { font-family: var(--mono); font-size: calc(9px * var(--fs-scale)); color: var(--text-3); margin-left: 6px; align-self: center; }
 
 /* takes drawer */
 .takes { display: flex; gap: 5px; padding: 8px 2px 0; align-items: center; }
 .takes .tk { width: 44px; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; border: 1px solid var(--border); opacity: .55; position: relative; }
 .takes .tk img { width: 100%; height: 100%; object-fit: cover; }
 .takes .tk.active { opacity: 1; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
-.takes .tk-label { font-family: var(--mono); font-size: 9px; color: var(--text-3); letter-spacing: .05em; }
+.takes .tk-label { font-family: var(--mono); font-size: calc(9px * var(--fs-scale)); color: var(--text-3); letter-spacing: .05em; }
 
 /* ---------- empty state ---------- */
 .empty {
   border: 1.5px dashed #26262e; border-radius: 10px; padding: 40px;
   text-align: center; color: var(--text-3);
 }
-.empty .big { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; color: #4a4a54; }
+.empty .big { font-family: var(--mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; color: #4a4a54; }
 
 /* ---------- review findings ---------- */
-.findings { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 10.5px; }
+.findings { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); }
 .findings .f { padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-3); }
 .findings .f.crit { color: var(--red); border-color: rgba(229,84,75,.35); }
 .findings .f.sugg { color: var(--amber); border-color: rgba(240,168,60,.3); }
@@ -393,7 +421,7 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .modal-page { max-width: 640px; width: 100%; }
 .modal-close {
   position: fixed; top: 18px; right: 26px; font-family: var(--mono);
-  color: var(--text-2); font-size: 12px; cursor: pointer; letter-spacing: .1em;
+  color: var(--text-2); font-size: calc(12px * var(--fs-scale)); cursor: pointer; letter-spacing: .1em;
   background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px;
 }
 
@@ -405,17 +433,17 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .lib-poster { aspect-ratio: 16/9; background: var(--surface-2); position: relative; overflow: hidden; }
 .lib-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .lib-poster .lp-live {
-  position: absolute; top: 9px; left: 9px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
+  position: absolute; top: 9px; left: 9px; font-family: var(--mono); font-size: calc(9px * var(--fs-scale)); letter-spacing: .12em;
   color: var(--amber); background: rgba(8,8,10,.75); border: 1px solid rgba(240,168,60,.45);
   padding: 3px 8px; border-radius: 99px; display: flex; gap: 5px; align-items: center; backdrop-filter: blur(4px);
 }
 .lib-poster .lp-live .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); animation: pulse 1.6s infinite; }
-.lib-poster .lp-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); letter-spacing: .16em; font-size: 12px; color: #3f3f4a; }
+.lib-poster .lp-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); letter-spacing: .16em; font-size: calc(12px * var(--fs-scale)); color: #3f3f4a; }
 .lib-body { padding: 13px 15px 14px; }
-.lib-body h3 { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; }
+.lib-body h3 { font-family: var(--mono); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; letter-spacing: .05em; }
 .lib-body .lb-meta { display: flex; gap: 8px; margin-top: 5px; align-items: center; }
-.lib-body .lb-meta .chip { font-size: 9.5px; padding: 2px 7px; }
-.lib-body .lb-meta .when { font-size: 10.5px; color: var(--text-3); margin-left: auto; }
+.lib-body .lb-meta .chip { font-size: calc(9.5px * var(--fs-scale)); padding: 2px 7px; }
+.lib-body .lb-meta .when { font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); margin-left: auto; }
 .mini-rail { display: flex; gap: 4px; margin-top: 11px; align-items: center; }
 .mini-rail i { height: 4px; flex: 1; border-radius: 2px; background: var(--surface-3); }
 .mini-rail i.d { background: #3d5c4b; }
@@ -426,16 +454,16 @@ aside .panel:nth-of-type(1) { animation-delay: .32s } aside .panel:nth-of-type(2
 .notice {
   display: flex; gap: 10px; align-items: center;
   border: 1px solid rgba(240,168,60,.3); background: var(--amber-dim);
-  border-radius: 9px; padding: 11px 15px; font-size: 12.5px; color: var(--text-2); margin: 18px 0 4px;
+  border-radius: 9px; padding: 11px 15px; font-size: calc(12.5px * var(--fs-scale)); color: var(--text-2); margin: 18px 0 4px;
 }
 .notice b { color: var(--amber); font-weight: 600; }
 .section-title {
-  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em;
+  font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); font-weight: 600; letter-spacing: .18em;
   text-transform: uppercase; color: var(--text-2); padding: 26px 0 2px;
   display: flex; align-items: baseline; gap: 12px;
 }
-.section-title .meta { font-size: 10.5px; color: var(--text-3); font-weight: 400; letter-spacing: .05em; margin-left: auto; }
-a.backlink { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-decoration: none; letter-spacing: .08em; }
+.section-title .meta { font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); font-weight: 400; letter-spacing: .05em; margin-left: auto; }
+a.backlink { font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); text-decoration: none; letter-spacing: .08em; }
 a.backlink:hover { color: var(--text-2); }
 
 /* ============================================================
@@ -457,29 +485,29 @@ a.backlink:hover { color: var(--text-2); }
   display: flex; gap: 10px; align-items: baseline;
   padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
 }
-.drawer .drawer-head h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
-.drawer .drawer-head .close { margin-left: auto; cursor: pointer; color: var(--text-3); font-family: var(--mono); font-size: 11px; }
+.drawer .drawer-head h3 { font-family: var(--mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .14em; text-transform: uppercase; }
+.drawer .drawer-head .close { margin-left: auto; cursor: pointer; color: var(--text-3); font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); }
 .drawer .drawer-head .close:hover { color: var(--text-2); }
 .drawer .drawer-body { padding: 14px 16px; }
 .drawer pre {
-  font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--text-2);
+  font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); line-height: 1.55; color: var(--text-2);
   background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
   padding: 12px 14px; overflow: auto; max-height: 420px; white-space: pre-wrap;
 }
 .gate-chip {
-  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
+  font-family: var(--mono); font-size: calc(9.5px * var(--fs-scale)); letter-spacing: .08em;
   padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(229,84,75,.45);
   color: var(--red); background: var(--red-dim);
 }
 .ver-chip {
-  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
+  font-family: var(--mono); font-size: calc(9.5px * var(--fs-scale)); letter-spacing: .06em;
   padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-3);
 }
 
 /* render section */
 .render-hero { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #000; }
 .render-hero video { width: 100%; display: block; max-height: 560px; }
-.render-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); padding: 8px 2px; display: flex; gap: 14px; flex-wrap: wrap; }
+.render-meta { font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); padding: 8px 2px; display: flex; gap: 14px; flex-wrap: wrap; }
 .render-meta .v { color: var(--text-2); cursor: pointer; }
 .render-meta .v.active { color: var(--amber); }
 
@@ -499,19 +527,19 @@ a.backlink:hover { color: var(--text-2); }
 }
 .replay-bar input[type=range] { flex: 1; accent-color: var(--amber); }
 .replay-bar .rp-btn {
-  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; cursor: pointer;
+  font-family: var(--mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .08em; cursor: pointer;
   border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; color: var(--text-2);
   background: var(--surface-2);
 }
 .replay-bar .rp-btn:hover { color: var(--amber); border-color: rgba(240,168,60,.4); }
-.replay-bar .rp-time { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); min-width: 130px; text-align: right; }
+.replay-bar .rp-time { font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); color: var(--text-3); min-width: 130px; text-align: right; }
 body.replaying .live .dot { background: var(--blue); animation: none; }
 
 /* filmstrip thumbs at fixed height (duration drives width) */
 .filmstrip .thumb { height: 118px; aspect-ratio: auto; }
 
 /* empty board hints */
-.hint { font-size: 12px; color: var(--text-3); padding: 10px 2px; }
+.hint { font-size: calc(12px * var(--fs-scale)); color: var(--text-3); padding: 10px 2px; }
 
 a { color: inherit; }
 
@@ -550,8 +578,8 @@ body:not(.first) .lib-card, body:not(.first) .drawer { animation: none; }
     scrollbar-width: thin;
   }
   .stage { flex: 0 0 82px; }
-  .stage .name { font-size: 10px; max-width: 76px; overflow-wrap: anywhere; text-align: center; }
-  .stage .sub { max-width: 76px; font-size: 9.5px; }
+  .stage .name { font-size: calc(10px * var(--fs-scale)); max-width: 76px; overflow-wrap: anywhere; text-align: center; }
+  .stage .sub { max-width: 76px; font-size: calc(9.5px * var(--fs-scale)); }
 
   .board { display: block; }
   .main-col, aside { width: 100%; min-width: 0; }
@@ -578,10 +606,10 @@ body:not(.first) .lib-card, body:not(.first) .drawer { animation: none; }
   .wrap { padding: 0 12px 52px; }
   .slate { padding-top: 14px; }
   .clapper { width: 30px; height: 23px; }
-  .slate .wordmark { font-size: 10px; }
-  .slate h1 { font-size: 15px; letter-spacing: .06em; }
-  .chip { font-size: 9.5px; padding: 3px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
-  .live { font-size: 10px; letter-spacing: .1em; }
+  .slate .wordmark { font-size: calc(10px * var(--fs-scale)); }
+  .slate h1 { font-size: calc(15px * var(--fs-scale)); letter-spacing: .06em; }
+  .chip { font-size: calc(9.5px * var(--fs-scale)); padding: 3px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+  .live { font-size: calc(10px * var(--fs-scale)); letter-spacing: .1em; }
   .cost { width: 100%; }
   .cost .bar { width: 100%; }
 
@@ -593,8 +621,8 @@ body:not(.first) .lib-card, body:not(.first) .drawer { animation: none; }
     padding: 24px 20px 28px;
     border-radius: 5px;
   }
-  .script-approved { top: 14px; right: 16px; font-size: 9px; padding: 2px 6px; }
-  .script-card .sp-title { font-size: 14px; padding-right: 58px; }
+  .script-approved { top: 14px; right: 16px; font-size: calc(9px * var(--fs-scale)); padding: 2px 6px; }
+  .script-card .sp-title { font-size: calc(14px * var(--fs-scale)); padding-right: 58px; }
   .script-card .sp-meta { margin-bottom: 18px; }
   .script-card .sp-slug .tc { float: none; display: block; margin-top: 2px; }
   .script-card .sp-expand { right: 12px; bottom: 10px; }
@@ -602,6 +630,6 @@ body:not(.first) .lib-card, body:not(.first) .drawer { animation: none; }
   .panel-head { flex-wrap: wrap; }
   .panel-head .meta { margin-left: 0; }
   .drawer .drawer-head { flex-wrap: wrap; }
-  .drawer pre { font-size: 10.5px; }
+  .drawer pre { font-size: calc(10.5px * var(--fs-scale)); }
   .scene-card { max-width: calc(100vw - 42px); }
 }
diff --git a/backlot/ui/board.js b/backlot/ui/board.js
index 5eb8246e..f8ed62be 100644
--- a/backlot/ui/board.js
+++ b/backlot/ui/board.js
@@ -155,7 +155,7 @@ function renderDrawer(s) {
       el("span", { class: `f ${st.review.critical ? "crit" : ""}` }, `${st.review.critical ?? 0} critical`),
       el("span", { class: `f ${st.review.suggestions ? "sugg" : ""}` }, `${st.review.suggestions ?? 0} suggestions`),
       el("span", { class: "f" }, `${st.review.nitpicks ?? 0} nitpicks`),
-      typeof st.review.summary === "string" ? el("span", { style: "font-size:11.5px;color:var(--text-2);margin-left:8px" }, st.review.summary) : null,
+      typeof st.review.summary === "string" ? el("span", { style: "font-size:calc(11.5px * var(--fs-scale));color:var(--text-2);margin-left:8px" }, st.review.summary) : null,
     ));
   }
 
@@ -166,7 +166,7 @@ function renderDrawer(s) {
     if (!artifact) continue;
     shown = true;
     body.append(
-      el("div", { class: "d-cat", style: "font-family:var(--mono);font-size:9.5px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;margin:6px 0 4px" }, name),
+      el("div", { class: "d-cat", style: "font-family:var(--mono);font-size:calc(9.5px * var(--fs-scale));color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;margin:6px 0 4px" }, name),
       el("pre", {}, JSON.stringify(artifact, null, 2)),
     );
   }
@@ -180,7 +180,7 @@ function renderDrawer(s) {
       el("h3", {}, `${st.name} — ${st.status}`),
       st.gate_skipped ? el("span", { class: "gate-chip" }, "⚑ GATE SKIPPED") : null,
       st.versions > 1 ? el("span", { class: "ver-chip" }, `v${st.versions}`) : null,
-      st.timestamp ? el("span", { class: "meta", style: "font-family:var(--mono);font-size:10.5px;color:var(--text-3)" }, st.timestamp) : null,
+      st.timestamp ? el("span", { class: "meta", style: "font-family:var(--mono);font-size:calc(10.5px * var(--fs-scale));color:var(--text-3)" }, st.timestamp) : null,
       el("span", { class: "close", onclick: () => toggleDrawer(st.name) }, "CLOSE ✕"),
     ),
     body,
@@ -248,6 +248,23 @@ function openScriptModal() {
   modal.classList.add("open");
 }
 
+function openNarrModal(card) {
+  modal.innerHTML = "";
+  const meta = [sceneLabel(card.id), card.section_label, fmtDuration(card.duration_seconds)]
+    .filter(Boolean).join(" · ");
+  modal.append(
+    el("span", { class: "modal-close", onclick: closeModal }, "ESC · CLOSE"),
+    el("div", { class: "modal-page" },
+      el("div", { class: "script-card", style: "cursor:default" },
+        el("div", { class: "sp-meta" }, meta),
+        card.narration ? el("div", { class: "sp-action", style: "margin-left:0" }, card.narration) : null,
+        card.shot_intent ? el("div", { class: "sp-paren", style: "margin-left:0" }, `Intent — ${card.shot_intent}`) : null,
+        card.description ? el("div", { class: "sp-paren", style: "margin-left:0" }, card.description) : null,
+      )),
+  );
+  modal.classList.add("open");
+}
+
 function closeModal() { modal.classList.remove("open"); }
 document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeModal(); });
 modal.addEventListener("click", (e) => { if (e.target === modal) closeModal(); });
@@ -261,12 +278,28 @@ function renderDecisions(s) {
   const decisions = (log && log.decisions) || [];
   if (!decisions.length) return null;
   const body = el("div", { class: "panel-body" });
-  for (const d of decisions.slice(-8).reverse()) {
+  // Collapse by category+subject: a decision that changed mid-run (e.g. voice
+  // openai_onyx → chirp3) is superseded by the later entry — show the CURRENT
+  // choice, not the first one recorded, and mark that it was revised.
+  const current = new Map();
+  decisions.forEach((d, i) => {
+    const key = `${d.category || "decision"}::${d.subject || ""}`;
+    const prev = current.get(key);
+    current.set(key, { d, order: i, revised: prev ? prev.revised + 1 : 0 });
+  });
+  const shown = [...current.values()].sort((a, b) => b.order - a.order).slice(0, 8);
+  for (const { d, revised } of shown) {
+    const selLabel = (() => {
+      // Prefer the human label of the selected option over its bare id.
+      const opt = (d.options_considered || []).find((o) => (o.option_id ?? o.label) === d.selected);
+      return (opt && opt.label) || d.selected || "";
+    })();
     const alts = (d.options_considered || [])
       .filter((o) => (o.option_id ?? o.label) !== d.selected && (o.option_id || o.label));
     body.append(el("div", { class: "decision" },
-      el("div", { class: "d-cat" }, `${d.category || "decision"}${d.confidence ? ` · ${d.confidence}` : ""}`),
-      el("div", { class: "d-pick" }, `${d.subject || ""} `, el("span", { class: "arrow" }, "→"), ` ${d.selected || ""}`),
+      el("div", { class: "d-cat" }, `${d.category || "decision"}${d.confidence ? ` · ${d.confidence}` : ""}`,
+        revised ? el("span", { class: "d-revised" }, " · revised") : null),
+      el("div", { class: "d-pick" }, `${d.subject || ""} `, el("span", { class: "arrow" }, "→"), ` ${selLabel}`),
       d.reason ? el("div", { class: "d-why" }, d.reason) : null,
       alts.length ? el("div", { class: "d-alt" }, "also considered: ",
         alts.slice(0, 3).map((o, i) => [i ? " · " : "", el("s", {}, o.label || o.option_id)]).flat()) : null,
@@ -373,10 +406,29 @@ function sceneCard(s, card) {
         if (vid.paused) vid.play(); else vid.pause();
       };
     } else {
-      thumb = el("div", { class: "thumb approved" },
-        el("img", { src: thumbURL(s.project_id, v.path, 640), loading: "lazy", alt: "" }),
-        badge ? el("span", { class: "badge" }, badge) : null);
+      const img = el("img", { src: thumbURL(s.project_id, v.path, 640), loading: "lazy", alt: "" });
+      // A thumbnail that fails to load must never show a broken-image icon —
+      // fall back to the shot spec in place (F: broken links).
+      img.onerror = () => {
+        const t = img.closest(".thumb");
+        if (!t) return;
+        t.className = "thumb spec";
+        t.innerHTML = "";
+        t.append(el("div", { class: "spec-in" },
+          el("div", { class: "spec-desc" }, card.description || "asset unavailable"),
+          el("div", { class: "spec-shot" }, [card.framing, card.movement].filter(Boolean).join(" · ").slice(0, 70))));
+      };
+      thumb = el("div", { class: "thumb approved" }, img,
+        v.snapshot ? el("span", { class: "badge" }, "snapshot") : (badge ? el("span", { class: "badge" }, badge) : null));
     }
+  } else if (card.type === "animation") {
+    // Bespoke/atelier scene with no snapshot yet — name it as such rather
+    // than "no asset yet" (the composition IS the asset).
+    thumb = el("div", { class: "thumb spec bespoke" },
+      el("div", { class: "spec-in" },
+        el("span", { class: "bespoke-tag" }, "◆ BESPOKE"),
+        el("div", { class: "spec-desc" }, card.description || ""),
+        el("div", { class: "spec-shot" }, "hand-authored composition")));
   } else if (card.visual && !card.visual.exists) {
     thumb = el("div", { class: "thumb missing" },
       el("div", { class: "spec-in" },
@@ -406,7 +458,7 @@ function sceneCard(s, card) {
     wrap.append(el("div", { class: "shotchips", style: "display:flex;flex-wrap:wrap;gap:4px;padding:7px 2px 0" },
       [sl.shot_size, sl.camera_movement, sl.lens_mm ? `${sl.lens_mm}mm` : null, sl.lighting_key]
         .filter(Boolean)
-        .map((t) => el("span", { style: "font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:#62626c;border:1px solid #212129;border-radius:3px;padding:1px 5px" }, String(t).replaceAll("_", " ")))));
+        .map((t) => el("span", { style: "font-family:var(--mono);font-size:calc(8.5px * var(--fs-scale));letter-spacing:.04em;color:#62626c;border:1px solid #212129;border-radius:3px;padding:1px 5px" }, String(t).replaceAll("_", " ")))));
   }
 
   // takes drawer
@@ -426,9 +478,14 @@ function sceneCard(s, card) {
     wrap.append(takes);
   }
 
-  // narration + audio
+  // narration + audio — clickable to read in full (F: narration text cut off)
   if (card.narration) {
-    wrap.append(el("div", { class: "narr" }, card.narration));
+    const long = card.narration.length > 90;
+    wrap.append(el("div", {
+      class: `narr${long ? " clip" : ""}`,
+      title: "Click to read the full narration",
+      onclick: () => openNarrModal(card),
+    }, card.narration, long ? el("span", { class: "narr-more" }, "⤢") : null));
   } else if (card.shot_intent || card.description) {
     wrap.append(el("div", { class: "narr tc-note" }, (card.shot_intent || card.description || "").slice(0, 110)));
   }
@@ -472,6 +529,9 @@ function renderRenders(s) {
   const prev = document.querySelector(".render-hero video");
   const src = mediaURL(s.project_id, current.path);
   const video = el("video", { src, controls: "", preload: "none" });
+  // Click the frame to start playback (controls handle pause/scrub) — the
+  // big player was inert to a click on the picture itself.
+  video.addEventListener("click", () => { if (video.paused) video.play().catch(() => {}); });
   if (prev && prev.getAttribute("src") === src && (prev.currentTime > 0 || !prev.paused)) {
     const t = prev.currentTime;
     const wasPlaying = !prev.paused && !prev.ended;
@@ -510,7 +570,7 @@ function renderFoundMedia(s) {
 function renderNoState(s) {
   if (s.has_pipeline_state) return null;
   return el("div", { class: "notice", style: "border-color:#2b2b33;background:var(--surface-2);color:var(--text-3)" },
-    el("span", { style: "font-size:15px" }, "◌"),
+    el("span", { style: "font-size:calc(15px * var(--fs-scale))" }, "◌"),
     el("span", {},
       el("b", { style: "color:var(--text-2)" }, "No pipeline state. "),
       "This project has no checkpoints — Backlot is showing what it found on disk. ",
@@ -521,7 +581,7 @@ function renderAwaitingNotice(s) {
   const awaiting = s.stages.find((x) => x.status === "awaiting_human");
   if (!awaiting) return null;
   return el("div", { class: "notice" },
-    el("span", { style: "font-size:16px" }, "◈"),
+    el("span", { style: "font-size:calc(16px * var(--fs-scale))" }, "◈"),
     el("span", {},
       el("b", {}, `The ${awaiting.name} stage is waiting for your review. `),
       "The agent is paused at this gate — reply ", el("b", {}, "in chat"), " to approve or request changes."));
diff --git a/scripts/atelier_snapshots.py b/scripts/atelier_snapshots.py
new file mode 100644
index 00000000..fc1e1867
--- /dev/null
+++ b/scripts/atelier_snapshots.py
@@ -0,0 +1,121 @@
+"""Render one review still per scene for an atelier (bespoke) composition.
+
+The Backlot storyboard can't thumbnail a `.tsx` scene, so a bespoke run
+populates the assets-gate filmstrip by writing `projects/<slug>/snapshots/
+<scene_id>.png` — one Remotion `still` per scene at a representative frame.
+Run this AT THE ASSETS GATE (before any draft/compose render):
+
+    python scripts/atelier_snapshots.py <slug>
+
+It reads scene timings from `artifacts/scene_plan.json` and the bespoke render
+config from `artifacts/edit_decisions.json` (falling back to conventional
+paths: index.tsx / artifacts/props.json / public/). The composition id comes
+from edit_decisions.bespoke.composition_id or --composition-id.
+
+See skills/meta/bespoke-composition.md and skills/meta/checkpoint-protocol.md.
+"""
+from __future__ import annotations
+
+import argparse
+import json
+import shutil
+import subprocess
+import sys
+from pathlib import Path
+
+# On Windows npx is npx.cmd — resolve it so subprocess finds it without a shell.
+NPX = shutil.which("npx") or "npx"
+
+REPO_ROOT = Path(__file__).resolve().parent.parent
+COMPOSER_DIR = REPO_ROOT / "remotion-composer"
+
+
+def _load(path: Path) -> dict:
+    try:
+        return json.loads(path.read_text(encoding="utf-8"))
+    except (OSError, json.JSONDecodeError):
+        return {}
+
+
+def main(argv: list[str] | None = None) -> int:
+    ap = argparse.ArgumentParser(description=__doc__)
+    ap.add_argument("slug", help="project slug under projects/")
+    ap.add_argument("--composition-id", help="Remotion composition id (else from edit_decisions)")
+    ap.add_argument("--entry", help="entry .tsx (default projects/<slug>/index.tsx)")
+    ap.add_argument("--props", help="props JSON (default artifacts/props.json)")
+    ap.add_argument("--public-dir", help="public dir (default projects/<slug>/public)")
+    ap.add_argument("--fps", type=int, default=None, help="frames per second (default from props or 30)")
+    ap.add_argument("--only", nargs="*", help="only these scene ids")
+    args = ap.parse_args(argv)
+
+    proj = REPO_ROOT / "projects" / args.slug
+    if not proj.is_dir():
+        print(f"error: no project at {proj}", file=sys.stderr)
+        return 2
+
+    scene_plan = _load(proj / "artifacts" / "scene_plan.json")
+    scenes = (scene_plan.get("scenes") or []) if isinstance(scene_plan, dict) else []
+    if not scenes:
+        print("error: no scenes in artifacts/scene_plan.json", file=sys.stderr)
+        return 2
+
+    edit = _load(proj / "artifacts" / "edit_decisions.json")
+    bespoke = (edit.get("bespoke") or {}) if isinstance(edit, dict) else {}
+    props_path = Path(args.props or bespoke.get("props_path") or (proj / "artifacts" / "props.json"))
+    entry = Path(args.entry or bespoke.get("entry") or (proj / "index.tsx"))
+    if not entry.is_absolute():
+        entry = (REPO_ROOT / entry).resolve()
+    public_dir = Path(args.public_dir or bespoke.get("public_dir") or (proj / "public"))
+    comp_id = args.composition_id or bespoke.get("composition_id")
+    if not comp_id:
+        print("error: composition id unknown (pass --composition-id or set edit_decisions.bespoke)", file=sys.stderr)
+        return 2
+
+    fps = args.fps
+    if fps is None:
+        props = _load(props_path)
+        fps = int(props.get("fps") or 30)
+
+    # Stage the project into remotion-composer so webpack resolves node_modules.
+    sys.path.insert(0, str(REPO_ROOT))
+    from tools.video.video_compose import VideoCompose  # noqa: E402
+    staged_entry = VideoCompose()._stage_atelier_project(entry, COMPOSER_DIR)
+
+    snap_dir = proj / "snapshots"
+    snap_dir.mkdir(exist_ok=True)
+
+    ok, fail = 0, 0
+    for sc in scenes:
+        sid = str(sc.get("id") or "").strip()
+        if not sid:
+            continue
+        if args.only and sid not in args.only:
+            continue
+        start = sc.get("start_seconds")
+        end = sc.get("end_seconds")
+        mid = ((start + end) / 2) if (start is not None and end is not None) else (start or 0)
+        frame = max(0, round(mid * fps))
+        out = snap_dir / f"{sid}.png"
+        cmd = [
+            NPX, "remotion", "still", str(staged_entry), str(comp_id), str(out.resolve()),
+            f"--frame={frame}",
+            f"--props={props_path.resolve()}",
+            f"--public-dir={public_dir.resolve()}",
+        ]
+        try:
+            subprocess.run(cmd, cwd=COMPOSER_DIR, check=True, capture_output=True, text=True, timeout=600)
+            ok += 1
+            print(f"  {sid}: frame {frame} -> {out.relative_to(REPO_ROOT)}")
+        except subprocess.CalledProcessError as e:
+            fail += 1
+            print(f"  {sid}: FAILED — {(e.stderr or e.stdout or '')[-300:]}", file=sys.stderr)
+        except Exception as e:  # noqa: BLE001
+            fail += 1
+            print(f"  {sid}: FAILED — {e}", file=sys.stderr)
+
+    print(f"snapshots: {ok} ok, {fail} failed -> {snap_dir.relative_to(REPO_ROOT)}")
+    return 0 if fail == 0 else 1
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/skills/meta/bespoke-composition.md b/skills/meta/bespoke-composition.md
index c2cadf9b..dc2e13b9 100644
--- a/skills/meta/bespoke-composition.md
+++ b/skills/meta/bespoke-composition.md
@@ -224,8 +224,27 @@ registry (`src/components`, `src/Explainer`, etc.), and warns if `art_direction`
   so the user opts in knowingly. Quality varies more without a stock baseline — mitigate with strong
   principle skills (above) and the distinctness review, not by reintroducing reuse.
 - **Checkpoint cadence.** Follow `skills/meta/checkpoint-protocol.md`: present script + scene plan
-  for approval BEFORE generating assets, then a footage/asset checkpoint, then a first-render
-  checkpoint. Do not batch-generate ahead of sign-off.
+  for approval BEFORE generating assets, then the **assets gate**, then a first-render checkpoint.
+  Do not batch-generate ahead of sign-off, and **do not render a draft to earn the assets review** —
+  the assets gate is held *before* compose (see below).
+
+- **Populate the filmstrip with per-scene stills at the assets gate.** A bespoke scene's "asset" is
+  a `.tsx` composition — not thumbnailable — so the board can't show it until a still exists. Once
+  the composition compiles, render one still per scene at a representative frame into
+  `projects/<slug>/snapshots/<scene_id>.png`, so the assets-gate filmstrip shows real frames instead
+  of "◆ BESPOKE" placeholders. Use Remotion's still renderer (fast — one frame each), driven off the
+  scene_plan timings:
+
+  ```bash
+  # one still per scene at mid-scene frame (fps * mid_seconds), into snapshots/<scene_id>.png
+  npx remotion still projects/<slug>/index.tsx <CompositionId> \
+    projects/<slug>/snapshots/<scene_id>.png \
+    --frame=<mid_frame> --props=<abs artifacts/props.json> --public-dir=<abs public/>
+  ```
+
+  A helper that reads the scene_plan and renders all stills is at
+  `scripts/atelier_snapshots.py` (`python scripts/atelier_snapshots.py <slug>`). Then STOP at the
+  assets gate. The full/draft render is the **compose** stage, after approval.
 
 ## Worked precedents (for the *workflow*, not the look)
 
diff --git a/skills/meta/checkpoint-protocol.md b/skills/meta/checkpoint-protocol.md
index 7adfc043..c2674f66 100644
--- a/skills/meta/checkpoint-protocol.md
+++ b/skills/meta/checkpoint-protocol.md
@@ -148,10 +148,23 @@ When `human_approval_default: true`:
    `decision_log` entry (`category: "approval_policy"`) at the moment they
    say it — absent that entry, stop at every gate.
 
-6. **The assets gate reviews the storyboard.** `assets` now gates in every
-   pipeline: present the generated assets scene-by-scene (the Backlot board's
-   filmstrip is the natural review surface), including spend so far and the
-   projected compose cost. A bad asset caught here saves a full re-render.
+6. **The assets gate reviews the storyboard — before any draft render.**
+   `assets` now gates in every pipeline: present the generated assets
+   scene-by-scene (the Backlot board's filmstrip is the natural review
+   surface), including spend so far and the projected compose cost. A bad
+   asset caught here saves a full re-render.
+
+   **Do not render a draft/full composition to earn this review.** The review
+   surface is the filmstrip populated with per-scene assets — stock picks,
+   generated stills, narration waveforms — *not* a rendered video. For scenes
+   whose "asset" is a bespoke/atelier composition (no thumbnailable file), the
+   agent writes one **per-scene review still** to
+   `projects/<id>/snapshots/<scene_id>.png` (a `remotion still` at a
+   representative frame — see `skills/meta/bespoke-composition.md`); the board
+   shows those on the filmstrip. Refresh `metadata.partial_progress` as stills
+   land, then STOP at the gate. The draft/final render is the **compose**
+   stage — it runs only after the assets gate is approved. Rendering a full
+   draft inside the assets stage jumps the gate the user is meant to hold.
 
 ### Step 6: Determine Next Stage