retake-demos 0.2.1 → 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
 
@@ -146,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/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;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-demos",
-  "version": "0.2.1",
+  "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