retake-demos 0.2.0 → 0.2.2

package/README.md

@@ -17,7 +17,7 @@ Retake drives a real browser through a web app, records it, and hands back an MP
 
 It is built for the way people work now: **you ask your coding agent for a demo in one sentence**, the agent drafts the file, dry-runs every selector, records a preview, reads the proof log, fixes what failed, and records the real one. Claude Code, Codex, Cursor and anything else that speaks MCP get Retake's tools; `retake ui` is the window you watch it in.
 
-<p align="center"><img src="assets/ui.png" width="900" alt="The Retake window: your demos on the left, the video and its scenes in the middle"></p>
+<p align="center"><img src="assets/window.png" width="900" alt="The Retake window: your demos on the left, the video and its scenes in the middle"></p>
 
 ## Install
 
@@ -53,7 +53,7 @@ outputs/<name>/
   take.json       the raw timeline the renderer reads
 ```
 
-In the window: play it, switch speed (0.75× to 2×, re-rendered in seconds), download, show in Finder, open the file to edit. Demos group by the app they point at; archive what you're done with.
+In the window: play it, switch speed (0.75× to 1.3×, re-rendered in seconds), download, or open its folder — stills, proof log, manifest. Demos group by the app they point at; archive what you're done with.
 
 ## The loop
 
@@ -78,7 +78,7 @@ Exit codes: `0` good · `2` a step failed or the video is a raw fallback · `3`
 name: first-project
 title: "Creating your first project"
 url: http://localhost:3000
-preset: post-landscape            # 1080p @ 30fps · `retake presets`
+preset: post-landscape            # `retake presets` — 1920×1080 page + caption band
 viewport: { width: 1440, height: 1080 }
 scale: 1.8                        # page drawn at 1.8× so text stays crisp
 reducedMotion: true
@@ -113,15 +113,17 @@ The full template is [`demos/example.yaml`](demos/example.yaml); `retake init` c
 
 Think in the publishing format, not the browser window.
 
-| Preset | Canvas | For |
-|---|---:|---|
-| `draft` | 960×540 @ 15fps | iterating — same layout as the finals at a quarter of the pixels, fastest |
-| `preview-fast` | 1920×1080 @ 24fps | checking timing and framing, hardware-encoded |
-| `post-landscape` *(default)* | 1920×1080 @ 30fps | the general-purpose demo, plus a CRF-14 master |
-| `post-square` | 1080×1080 @ 30fps | feeds |
-| `post-vertical` | 1080×1920 @ 30fps | shorts and reels |
-| `docs-gif` | 1440×900 @ 24fps | README and docs GIFs |
-| `master` | 1920×1080 @ 30fps | archive, CRF 12 |
+| Preset | Video | Page area | For |
+|---|---:|---:|---|
+| `draft` | 960×616 | 960×540 | iterating — the finals' layout at a quarter of the pixels, fastest |
+| `preview-fast` | 1920×1230 | 1920×1080 | checking timing and framing, hardware-encoded |
+| `post-landscape` *(default)* | 1920×1230 | 1920×1080 | the general-purpose demo, plus a CRF-14 master |
+| `post-square` | 1080×1080 | 1080×950 | feeds — a true square |
+| `post-vertical` | 1080×1920 | 1080×1750 | shorts and reels — a true 9:16 |
+| `docs-gif` | 1440×1000 | 1440×900 | README and docs GIFs |
+| `master` | 1920×1230 | 1920×1080 | archive, CRF 12 |
+
+**The video is the page area plus the caption band.** Landscape keeps a full 1920×1080 page and the band goes under it (1920×1230) — the captions never cover the app. Square and vertical fit the band inside the canvas, because a feed that wants 1:1 or 9:16 will letterbox anything else. A manifest's `viewport` replaces the page area and the video follows it, so a 1240×1080 viewport gives a 1240×1230 video. `retake presets` prints this table, and `retake validate` tells you the exact size of the video a manifest will produce before you record it.
 
 **Page scale** is what makes it crisp: the page lays out as if the viewport were smaller and every glyph is drawn at 2×, so 1080p text reads on a phone. **Camera** eases toward whatever the demo just touched, at render time, clamped so it can never crop the thing it points at — per scene: `camera: static` or `camera: { focus: ".result", zoom: 1.3 }`. Captions, camera, speed, trim, format and layout are all render-time: change them and `retake render` takes seconds, never touches the browser.
 
@@ -144,8 +146,7 @@ Apps that keep their session in IndexedDB (Firebase) can't be restored from `sto
 ## Limits worth knowing
 
 - **One page.** Retake records one tab. `keepInTab` (on by default) folds `window.open` and `target="_blank"` back into it, so popup logins and "preview" buttons stay on camera; flows that genuinely need a second window do not.
-- **~45 cursor moves per take.** The cursor overlay is one nested expression per move and ffmpeg's parser has a depth limit. `validate` warns, the recorder detects it, `check` fails. Split long stories into chapters of 30–45 seconds — the viewer agrees.
-- **`scale` uses CSS zoom**, which shifts the coordinate space some forms rely on for focus; if typing goes nowhere, `scale: 1`. (`deviceScaleFactor` is not the fix — Playwright's screencast never upscales.)
+- **~180 cursor moves per take.** Retake flattens testreel's cursor expressions at install time (the stock ones hit ffmpeg's nesting limit at ~45 moves); the remaining ceiling is the filter's size as one process argument. `validate` warns, the recorder detects it, `check` fails. Long stories still want chapters of 30–45 seconds — for the viewer, not the tool.
 - **macOS is where it's used daily.** `videotoolbox` hardware encoding falls back to libx264 elsewhere; Linux is untested beyond CI.
 
 ## How it's built

package/dist/cli.js

@@ -384,15 +384,26 @@ program
     .description("list quality presets")
     .action(async () => {
     const { PRESETS } = await import("./presets.js");
-    for (const p of Object.values(PRESETS))
-        say(`${p.name.padEnd(16)} ${String(p.width + "×" + p.height).padEnd(10)} ${p.fps}fps  scale ${p.scale}×  ${p.layout.padEnd(5)} — ${p.description}`);
+    say(`${"preset".padEnd(16)} ${"video".padEnd(11)} ${"page".padEnd(11)} fps  layout`);
+    for (const p of Object.values(PRESETS)) {
+        const video = p.layout === "card" ? `${p.width}×${p.height}` : `${p.width}×${p.height + (p.layout === "band" ? p.bandHeight : 0)}`;
+        say(`${p.name.padEnd(16)} ${video.padEnd(11)} ${String(p.width + "×" + p.height).padEnd(11)} ${String(p.fps).padEnd(4)} ${p.layout.padEnd(5)} — ${p.description}`);
+    }
+    say(`\nvideo = page + caption band. A manifest's \`viewport\` replaces the page size (the video follows it).`);
 });
 program
     .command("validate")
     .argument("<manifest>")
-    .action((file) => {
+    .action(async (file) => {
     const { manifest } = loadManifest(file);
+    const { resolve } = await import("./manifest.js");
+    const q = resolve(manifest);
+    // The video is the page area plus the caption band, so say the real number
+    // here rather than letting it surprise someone after a two-minute take.
+    const outW = q.layout === "card" ? q.width : q.viewport.width;
+    const outH = (q.layout === "card" ? q.height : q.viewport.height) + (q.layout === "band" ? q.bandHeight : 0);
     say(`ok: ${manifest.name} · ${manifest.steps.length} steps · ${manifest.steps.filter((s) => s.action === "scene").length} scenes`);
+    say(`   ${q.name} · video ${outW}×${outH}${q.layout === "band" ? ` (page ${q.viewport.width}×${q.viewport.height} + ${q.bandHeight}px caption band)` : ""} @ ${q.fps}fps${q.gif ? ` · gif ${q.gif.width}px` : ""}`);
     for (const w of warnings(manifest))
         say(`⚠ ${w}`);
 });

package/dist/manifest.js

@@ -203,10 +203,9 @@ const ManifestShape = z.object({
     waitForSelector: Selector.optional(),
     speed: z.number().positive().default(1),
     /** Cursor overlay (testreel). false → none; {style: touch} → tap dot. Size is preset-scaled unless set. */
-    /** cursor.idleHide: fade the cursor out when idle (testreel default). Each
-        idle gap adds a nested if() to the ffmpeg alpha expression, and ffmpeg's
-        parser has a depth limit — long demos blow past it. Retake turns it off
-        automatically above 60 steps; set it explicitly either way. */
+    /** cursor.idleHide: fade the cursor out when idle (testreel default). Long
+        demos used to lose it (nested-if depth in ffmpeg); the flat cursor
+        expressions lifted that, so it is simply on unless you say otherwise. */
     cursor: z.union([z.boolean(), z.object({ style: z.enum(["default", "pointer", "text", "touch"]).optional(), size: z.number().optional(), idleHideMs: z.number().optional(), idleHide: z.boolean().optional() })]).default(true),
     seed: z.array(Seed).default([]),
     /** What a failed step does to the take. "stop" (default): the camera stops
@@ -294,7 +293,14 @@ export function loadManifest(file) {
         }).join("\n");
         throw new Error(`Invalid manifest ${file}:\n${issues}`);
     }
-    return { manifest: parsed.data, file: abs, dir: path.dirname(abs) };
+    const dir = path.dirname(abs);
+    // A fixture page can live next to its manifest: `url: file://./page.html`
+    // resolves against the manifest's folder, so a cloned repo's demos work.
+    const m = parsed.data;
+    const rel = /^file:\/\/(\.{1,2}\/.*)$/.exec(m.url);
+    if (rel)
+        m.url = "file://" + path.resolve(dir, rel[1]);
+    return { manifest: m, file: abs, dir };
 }
 /** Things worth saying out loud before a run. Not errors — the run proceeds. */
 export function warnings(m) {
@@ -312,8 +318,8 @@ export function warnings(m) {
     if (m.auth && !m.auth.setup.length && !m.setup.length)
         w.push("`auth.storageState` is set but there are no sign-in steps under `auth.setup` — there is nothing to save a session from.");
     const moves = m.steps.filter((st) => ["click", "type", "fill", "hover", "scroll", "upload"].includes(st.action)).length;
-    if (m.cursor !== false && moves > 45)
-        w.push(`~${moves} cursor moves — the cursor overlay (testreel/ffmpeg) cannot exceed ~45 in one take and will be MISSING from the video. Split the demo into shorter ones, or set \`cursor: false\`.`);
+    if (m.cursor !== false && moves > 180)
+        w.push(`~${moves} cursor moves — past ~180 in one take the cursor filter no longer fits in one ffmpeg argument and the overlay will be MISSING. Split the demo into chapters, or set \`cursor: false\`.`);
     m.steps.forEach((st, i) => {
         if (st.action !== "scene")
             return;
@@ -339,7 +345,14 @@ export function resolve(m) {
     const p = PRESETS[m.preset] ?? PRESETS[DEFAULT_PRESET];
     const viewport = { width: m.viewport?.width ?? p.width, height: m.viewport?.height ?? p.height };
     const gifOverride = m.outputs.gif;
-    const gif = gifOverride === false ? false : gifOverride === true ? p.gif : p.gif === false ? { width: gifOverride.width ?? 720, fps: gifOverride.fps ?? 15 } : { width: gifOverride.width ?? p.gif.width, fps: gifOverride.fps ?? p.gif.fps };
+    /* `gif: true` means "yes, a GIF" on any preset. Only docs-gif carries GIF
+       settings, so asking for one anywhere else used to resolve to the preset's
+       `false` and produce nothing, silently. */
+    const GIF_DEFAULT = { width: 900, fps: 15 };
+    const gif = gifOverride === false ? false
+        : gifOverride === true ? (p.gif === false ? GIF_DEFAULT : p.gif)
+            : p.gif === false ? { width: gifOverride.width ?? GIF_DEFAULT.width, fps: gifOverride.fps ?? GIF_DEFAULT.fps }
+                : { width: gifOverride.width ?? p.gif.width, fps: gifOverride.fps ?? p.gif.fps };
     const cursor = m.cursor === false ? false : { style: (m.cursor === true ? "default" : m.cursor.style ?? "default"), size: m.cursor === true ? p.cursorSize : m.cursor.size ?? p.cursorSize, idleHideMs: m.cursor === true ? 2000 : m.cursor.idleHideMs ?? 2000, idleHide: m.cursor === true ? undefined : m.cursor.idleHide };
     const captions = m.captions === false ? false : { fontSize: m.captions === true ? p.captionFontSize : m.captions.fontSize ?? p.captionFontSize, color: m.captions === true ? undefined : m.captions.color };
     return {

package/dist/presets.js

@@ -38,19 +38,22 @@ export const PRESETS = {
     },
     "post-square": {
         name: "post-square",
-        width: 1080, height: 1080, scale: 1.6, fps: 30, crf: 17,
+        /* The page area is the canvas minus the caption band, so the file really
+           is 1080×1080 — a square preset that produced 1080×1210 got letterboxed
+           by every feed. Landscape keeps its full-height page on purpose. */
+        width: 1080, height: 950, scale: 1.6, fps: 30, crf: 17,
         gif: false, layout: "band", cameraZoom: 1.25,
         cursorSize: 60, captionFontSize: 40, bandHeight: 130,
         encoder: "x264", master: true,
-        description: "1080×1080, feed-friendly.",
+        description: "A true 1080×1080 (page 1080×950 + caption band), feed-friendly.",
     },
     "post-vertical": {
         name: "post-vertical",
-        width: 1080, height: 1920, scale: 2, fps: 30, crf: 17,
+        width: 1080, height: 1750, scale: 2, fps: 30, crf: 17,
         gif: false, layout: "band", cameraZoom: 1.3,
         cursorSize: 60, captionFontSize: 44, bandHeight: 170,
         encoder: "x264", master: true,
-        description: "9:16 for shorts/reels. Apps with a narrow column suit it best.",
+        description: "A true 1080×1920 (page 1080×1750 + caption band) for shorts/reels. Narrow-column apps suit it best.",
     },
     "docs-gif": {
         name: "docs-gif",

package/dist/record.js

@@ -44,7 +44,11 @@ export function capSecondsFor(m) {
     return Math.min(3600, Math.max(240, Math.round(m.steps.length * 10 + waits)));
 }
 /** Roughly how many times the cursor will move on camera. */
-export const CURSOR_MOVE_LIMIT = 45;
+/** Cursor moves per take. testreel's nested-if overlay died at ~45 (ffmpeg's
+    parser stops at 98 levels); scripts/patch-testreel.mjs flattens those
+    expressions, so the ceiling is now the size of the filter graph as one
+    argv string — ~630 bytes a move against Linux's 128 KB per-argument cap. */
+export const CURSOR_MOVE_LIMIT = 180;
 export function cursorMoves(m) {
     return m.steps.filter((s) => ["click", "type", "fill", "hover", "scroll", "upload"].includes(s.action)).length;
 }
@@ -293,10 +297,7 @@ export async function record(m, opts) {
         // past roughly sixty steps the nesting exceeds ffmpeg's parser and the
         // composite fails. Long demos get an always-visible cursor unless told
         // otherwise — the fade was never the point of the video.
-        const LONG = 60;
-        const cursorIdleHide = q.cursor === false ? undefined : q.cursor.idleHide ?? (m.steps.length <= LONG);
-        if (q.cursor !== false && q.cursor.idleHide === undefined && m.steps.length > LONG)
-            log(`cursor: ${m.steps.length} steps — idle-hide fades off (ffmpeg nesting limit); set cursor.idleHide to override`);
+        const cursorIdleHide = q.cursor === false ? undefined : q.cursor.idleHide;
         const rec = await recordPage(page, {
             outputDir: opts.outDir,
             name: m.name,
@@ -343,7 +344,7 @@ export async function record(m, opts) {
         // overlay silently fails and the video ships with no cursor at all.
         const moves = cursorMoves(m);
         if (q.cursor !== false && moves > CURSOR_MOVE_LIMIT)
-            log(`cursor: ~${moves} cursor moves — testreel's overlay cannot exceed ~${CURSOR_MOVE_LIMIT}; the cursor may be MISSING from this video. Split the demo, or set cursor: false to be honest about it.`);
+            log(`cursor: ~${moves} cursor moves — past ~${CURSOR_MOVE_LIMIT} the cursor filter no longer fits in one ffmpeg argument and the overlay may be MISSING. Split the demo (a viewer wants chapters anyway), or set cursor: false to be honest about it.`);
         let pastUntil = false;
         for (const [i, step] of m.steps.entries()) {
             // --until <scene>: record that scene in full, stop at the next one.
@@ -430,7 +431,7 @@ export async function record(m, opts) {
             screenshots = result.screenshots;
             const joined = compositeLog.join("");
             if (/Error initializing filters|Missing '\)' or too many args/.test(joined)) {
-                const why = `cursor overlay failed in testreel's ffmpeg pass (expression too deep — ~${moves} moves, limit ~${CURSOR_MOVE_LIMIT}); the video has NO CURSOR. Split the demo or set cursor: false.`;
+                const why = `cursor overlay failed in testreel's ffmpeg pass (~${moves} moves; the filter is too large past ~${CURSOR_MOVE_LIMIT}); the video has NO CURSOR. Split the demo or set cursor: false.`;
                 partial = partial ? `${partial}; ${why}` : why;
                 ok = false;
                 log(`✗ ${why}`);

package/dist/ui/chat.html

@@ -140,15 +140,15 @@
           <option value="0.75">0.75×</option><option value="0.85">0.85×</option><option value="1" selected>1×</option><option value="1.15">1.15×</option><option value="1.3">1.3×</option>
         </select>
         <a id="vidDl" download>Download</a>
-        <button id="vidFolder">Show in Finder</button>
-        <a id="vidEdit" href="/classic">Edit</a>
+        <button id="vidFolder">Show in folder</button>
+        <!-- The workshop (/classic) still exists but is not advertised until it has been tested as carefully as this page. -->
       </div>
       <div class="stills" id="stills"></div>
     </div>
     <div class="empty" id="empty" style="display:none">
       <div class="mark"><i></i><i></i><i></i><i></i></div>
       <h2>Nothing recorded yet</h2>
-      <p>Ask your agent for a demo — <code>record a demo of my app showing the sign-up flow</code> —<br>or build one by hand in the <a href="/classic">workshop</a>. It will appear here.<br><a href="/guide">How Retake works</a> — one page, two minutes.</p>
+      <p>Ask your agent for a demo — <code>record a demo of my app showing the sign-up flow</code> —<br>It will appear here.<br><a href="/guide">How Retake works</a> — one page, two minutes.</p>
     </div>
     </div>
     <aside class="lib" id="lib" style="display:none">
@@ -246,7 +246,6 @@ async function pin(name) {
   $('vidMeta').title = failed?.screen ? 'On screen at that moment: ' + failed.screen : '';
   $('vidDl').href = `/out/${name}/demo.mp4${q}`; $('vidDl').setAttribute('download', name + '.mp4');
   $('vidFolder').onclick = () => api('/api/open/' + name, { method: 'POST' }).catch(() => {});
-  $('vidEdit').href = '/classic#' + encodeURIComponent(name);
   const tempo = (demos.find((x) => x.name === name)?.settings?.tempo) || 1;
   $('vidSpeed').value = String(tempo);
   $('vid').playbackRate = 1; // the file already carries its tempo
@@ -286,7 +285,7 @@ async function drawDemos() {
       const dot = p.lastTake ? (p.lastTake.ok && !p.lastTake.partial ? 'ok' : 'bad') : '';
       const when = p.lastTake ? new Date(p.lastTake.finishedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : 'no take yet';
       el.innerHTML = `<span class="dot ${dot}"></span><span class="nm">${esc(p.name)}</span><small>${esc(when)}</small><button class="zap" title="Archive this demo">✕</button>`;
-      el.onclick = () => { if (p.lastTake) pin(p.name); else location.href = '/classic#' + encodeURIComponent(p.name); };
+      el.onclick = () => { if (p.lastTake) pin(p.name); };
       el.querySelector('.zap').onclick = async (ev) => {
         ev.stopPropagation();
         // Archive, not destroy — but moving someone's work still deserves a beat.

package/dist/ui/guide.html

@@ -50,7 +50,7 @@
 
   <section>
     <h3>2 · Judge the take</h3>
-    <p>The video lands here — newest on top, one still per scene under it. <b>Download</b> for the file, <b>Edit</b> to open its steps and knobs in the workshop.</p>
+    <p>The video lands here — newest on top, one still per scene under it. <b>Download</b> for the file, <b>Show in folder</b> for everything else — the stills, the proof log, the manifest.</p>
   </section>
 
   <section>

package/dist/ui/index.html

@@ -381,7 +381,9 @@ function saveDraftSoon() { clearTimeout(draftTimer); draftTimer = setTimeout(asy
 }, 500); }
 
 // ---------- demo view ----------
-const PRESET_LABEL = { 'post-landscape': '1080p', 'post-square': 'square', 'post-vertical': 'vertical', 'docs-gif': 'docs', 'proof-fast': 'small', 'master': 'master', 'preview-fast': 'preview' };
+// Shape, not a resolution: the video is the page plus the caption band, so
+// "1080p" was never true of what post-landscape actually writes (1920×1230).
+const PRESET_LABEL = { 'post-landscape': 'landscape', 'post-square': 'square', 'post-vertical': 'vertical', 'docs-gif': 'docs', 'proof-fast': 'small', 'master': 'master', 'preview-fast': 'preview', 'draft': 'draft' };
 async function select(name) {
   if (dirty && !confirm('Discard unsaved manifest edits?')) return;
   current = name; dirty = false; setMsg('');
@@ -708,7 +710,7 @@ document.addEventListener('keydown', (e) => {
 // ---------- boot ----------
 (async () => {
   setQuality(quality);
-  try { const ps = await api('/api/presets'); $('sPreset').innerHTML = ps.filter((p) => p.name !== 'preview-fast').map((p) => `<option value="${p.name}">${p.name} — ${p.width}×${p.height}</option>`).join(''); } catch {}
+  try { const ps = await api('/api/presets'); $('sPreset').innerHTML = ps.filter((p) => p.name !== 'preview-fast').map((p) => { const h = p.layout === 'card' ? p.height : p.height + (p.layout === 'band' ? p.bandHeight : 0); return `<option value="${p.name}">${p.name} — ${p.width}×${h}</option>`; }).join(''); } catch {}
   try { settings = await api('/api/settings'); $('modelTag').textContent = settings.active ? 'model: ' + settings.active : 'no model — set one in Settings'; } catch {}
   const list = await loadDemos();
   // Arriving from the review page's Edit link: /classic#<demo> opens that demo.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-demos",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Demo-as-code for coding agents: a YAML manifest in, a product walkthrough video out. Rerun the demo instead of re-recording it.",
   "keywords": [
     "demo",
@@ -37,10 +37,12 @@
     "demos/example.yaml",
     ".env.example",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "scripts/patch-testreel.mjs"
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && mkdir -p dist/ui && cp src/ui/*.html dist/ui/ && chmod +x dist/cli.js",
+    "postinstall": "node scripts/patch-testreel.mjs",
     "prepare": "npm run build",
     "prepublishOnly": "npm run typecheck && npm test",
     "retake": "tsx src/cli.ts",
@@ -52,7 +54,7 @@
     "@modelcontextprotocol/sdk": "^1.30.0",
     "commander": "^14.0.3",
     "playwright": "^1.58.2",
-    "testreel": "^0.2.0",
+    "testreel": "0.2.0",
     "yaml": "^2.8.3",
     "zod": "^4.4.3"
   },

package/scripts/patch-testreel.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+/**
+ * Lift testreel's cursor cap.
+ *
+ * testreel draws the cursor overlay with ffmpeg expressions it builds as one
+ * nested `if(lt(t,…),…,if(lt(t,…),…,…))` per keyframe. ffmpeg's expression
+ * parser stops at 98 nesting levels, so past ~45 cursor moves the overlay
+ * silently drops out of the video. Upstream (0.2.0) has not changed this.
+ *
+ * The same piecewise functions can be written flat — a sum of windowed
+ * segments, `gte(t,a)*lt(t,b)*value` — with no nesting and the same result
+ * frame for frame. This script rewrites the four builders Retake relies on
+ * (x/y position, show/hide, fade, cursor style) in testreel's dist files.
+ *
+ * It runs on `postinstall`, is idempotent, and refuses to touch anything if
+ * the functions are not byte-identical to testreel 0.2.0 — a newer testreel
+ * means re-checking, not guessing. (testreel is pinned to an exact version
+ * in package.json for the same reason.)
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const MARK = "/*retake:flat-cursor*/";
+
+// The originals, exactly as shipped in testreel 0.2.0 (dist/index.js).
+const ORIGINALS = {
+  Qe: 'function Qe(e,t){if(e.length===0)return"0";if(e.length===1)return String(e[0].value);let o=String(e[e.length-1].value);for(let r=e.length-1;r>=1;r--){let n=e[r-1],i=e[r],s=i.transitionMs/1e3,a=i.time,u=a+s,l=`${n.value}+(${i.value}-${n.value})*(t-${a.toFixed(4)})/${s.toFixed(4)}`;o=`if(lt(t,${a.toFixed(4)}),${n.value},if(lt(t,${u.toFixed(4)}),${l},${o}))`}return o}',
+  _t: 'function _t(e){let t=e.filter(n=>n.type==="hide"||n.type==="show");if(t.length===0)return"1";let r=t[t.length-1].type==="hide"?"0":"1";for(let n=t.length-2;n>=0;n--){let i=t[n].type==="hide"?"0":"1";r=`if(lt(t,${t[n+1].time.toFixed(4)}),${i},${r})`}return r=`if(lt(t,${t[0].time.toFixed(4)}),1,${r})`,r}',
+  zt: 'function zt(e,t,o="T"){let r=e.filter(a=>a.type==="hide"||a.type==="show").sort((a,u)=>a.time-u.time);if(r.length===0)return"1";let n=Math.max(.001,t/1e3),s=r[r.length-1].type==="hide"?"0":"1";for(let a=r.length-1;a>=0;a--){let u=r[a],l=a===0?1:r[a-1].type==="hide"?0:1,p=u.type==="hide"?0:1,w=u.time,d=u.time+n;if(l===p){s=`if(lt(${o},${w.toFixed(4)}),${l},${s})`;continue}let f=p-l,h=`${l}+(${f})*(${o}-${w.toFixed(4)})/${n.toFixed(4)}`;s=`if(lt(${o},${w.toFixed(4)}),${l},if(lt(${o},${d.toFixed(4)}),${h},${s}))`}return s}',
+  Mt: 'function Mt(e,t,o){let r=e.filter(a=>a.type==="move"&&a.cursorStyle!==void 0);if(r.length===0)return o===t?"1":"0";let n=[];n.push({time:0,active:o===t});for(let a of r)n.push({time:a.time,active:(a.cursorStyle??o)===t});let i=[n[0]];for(let a=1;a<n.length;a++)n[a].active!==i[i.length-1].active&&i.push(n[a]);if(i.length===1)return i[0].active?"1":"0";let s=i[i.length-1].active?"1":"0";for(let a=i.length-2;a>=0;a--){let u=i[a].active?"1":"0";s=`if(lt(t,${i[a+1].time.toFixed(4)}),${u},${s})`}return s}',
+};
+
+// Flat replacements. `__flat(v, segs)` sums windowed segments; a segment is
+// {f, t, e}: from time f (null = -∞) to time t (null = +∞), expression e.
+// Segments are contiguous and non-overlapping, so the sum IS the function.
+// Where the originals let a running transition finish before the next
+// keyframe takes over (nested ifs, outermost wins), these do the same.
+const FLAT = {
+  helper: `${MARK}function __flat(v,a){a=a.filter(s=>s.f==null||s.t==null||s.t>s.f);if(a.length===0)return"0";if(a.length===1)return"("+a[0].e+")";return a.map(s=>{let g=s.f==null?"":"gte("+v+","+s.f.toFixed(4)+")*",l=s.t==null?"":"lt("+v+","+s.t.toFixed(4)+")*";return g+l+"("+s.e+")"}).join("+")}`,
+  Qe: 'function Qe(e,t){if(e.length===0)return"0";if(e.length===1)return String(e[0].value);let a=[{f:null,t:e[1].time,e:String(e[0].value)}],cur=e[1].time;for(let r=1;r<e.length;r++){let n=e[r-1],i=e[r],s=i.transitionMs/1e3,st=Math.max(i.time,cur),u=i.time+s,nx=r+1<e.length?e[r+1].time:null;if(u>st){a.push({f:st,t:u,e:`${n.value}+(${i.value}-${n.value})*(t-${i.time.toFixed(4)})/${s.toFixed(4)}`});cur=u}if(nx==null||nx>cur){a.push({f:cur,t:nx,e:String(i.value)});if(nx!=null)cur=nx}}return __flat("t",a)}',
+  _t: 'function _t(e){let t=e.filter(n=>n.type==="hide"||n.type==="show");if(t.length===0)return"1";let a=[{f:null,t:t[0].time,e:"1"}];for(let n=0;n<t.length;n++)a.push({f:t[n].time,t:n+1<t.length?t[n+1].time:null,e:t[n].type==="hide"?"0":"1"});return __flat("t",a)}',
+  zt: 'function zt(e,t,o="T"){let r=e.filter(a=>a.type==="hide"||a.type==="show").sort((a,u)=>a.time-u.time);if(r.length===0)return"1";let n=Math.max(.001,t/1e3),a=[{f:null,t:r[0].time,e:"1"}],cur=r[0].time;for(let i=0;i<r.length;i++){let u=r[i],l=i===0?1:r[i-1].type==="hide"?0:1,p=u.type==="hide"?0:1,w=u.time,nx=i+1<r.length?r[i+1].time:null;if(l!==p){let st=Math.max(w,cur),d=w+n;if(d>st){a.push({f:st,t:d,e:`${l}+(${p-l})*(${o}-${w.toFixed(4)})/${n.toFixed(4)}`});cur=d}}if(nx==null||nx>cur){a.push({f:cur,t:nx,e:String(p)});if(nx!=null)cur=nx}}return __flat(o,a)}',
+  Mt: 'function Mt(e,t,o){let r=e.filter(a=>a.type==="move"&&a.cursorStyle!==void 0);if(r.length===0)return o===t?"1":"0";let n=[];n.push({time:0,active:o===t});for(let a of r)n.push({time:a.time,active:(a.cursorStyle??o)===t});let i=[n[0]];for(let a=1;a<n.length;a++)n[a].active!==i[i.length-1].active&&i.push(n[a]);if(i.length===1)return i[0].active?"1":"0";let s=[];for(let a=0;a<i.length;a++)s.push({f:a===0?null:i[a].time,t:a+1<i.length?i[a+1].time:null,e:i[a].active?"1":"0"});return __flat("t",s)}',
+};
+
+function patchFile(file) {
+  let src = fs.readFileSync(file, "utf8");
+  if (src.includes(MARK)) return "already patched";
+  for (const [name, original] of Object.entries(ORIGINALS)) {
+    const n = src.split(original).length - 1;
+    if (n !== 1) throw new Error(`${path.basename(file)}: expected exactly one copy of ${name} as shipped in testreel 0.2.0, found ${n} — testreel changed; re-check scripts/patch-testreel.mjs before trusting the cursor past ~45 moves`);
+  }
+  // Prepend the helper to the first builder so it is defined once, in scope.
+  src = src.replace(ORIGINALS.Qe, FLAT.helper + FLAT.Qe);
+  for (const name of ["_t", "zt", "Mt"]) src = src.replace(ORIGINALS[name], FLAT[name]);
+  fs.writeFileSync(file, src);
+  return "patched";
+}
+
+let dir;
+try {
+  // testreel's exports map hides package.json; walk up from the resolved entry.
+  let d = path.dirname(require.resolve("testreel"));
+  while (!fs.existsSync(path.join(d, "package.json"))) d = path.dirname(d);
+  dir = d;
+} catch { console.log("patch-testreel: testreel not installed yet — nothing to do"); process.exit(0); }
+const version = JSON.parse(fs.readFileSync(path.join(dir, "package.json"), "utf8")).version;
+if (version !== "0.2.0") throw new Error(`patch-testreel: written for testreel 0.2.0, found ${version}`);
+
+// Retake imports the ESM build; the CJS build has different minified names
+// and is left alone.
+console.log(`patch-testreel: dist/index.js — ${patchFile(path.join(dir, "dist", "index.js"))}`);

package/skill/SKILL.md

@@ -122,9 +122,9 @@ outcome there is.
 
 ## Long demos: split, and record up to the beat you are fixing
 
-Hard limit to know: the cursor overlay cannot survive more than ~45 cursor
-moves in one take (an ffmpeg expression-depth limit in testreel). `validate`
-warns, `check` fails if it happened. Past that, split — or `cursor: false`.
+Hard limit to know: ~180 cursor moves in one take (the cursor filter must
+fit in one ffmpeg argument). `validate` warns, `check` fails if it happened.
+Past that, split — or `cursor: false`.
 
 A take is real time: a six-minute walkthrough costs six minutes per
 attempt and nobody watches six minutes. Above ~40 steps, split the story