retake-demos 0.4.0 → 0.4.1

package/dist/operator/tools.js

@@ -72,6 +72,15 @@ async function waitForHuman(kind, text, detail) {
             return s.answer ?? "";
     }
 }
+/** Tell the window how far into a recording we are. Fire-and-forget: a demo
+    must never fail because a progress ping did not land. */
+async function progress(p) {
+    if (!UI)
+        return;
+    const body = JSON.stringify({ progress: { ...p, demo: LAST_DEMO || undefined } });
+    const url = SESSION ? `${UI}/api/operator/${SESSION}/log` : `${UI}/api/activity`;
+    await fetch(url, { method: "POST", body }).catch(() => { });
+}
 const text = (s) => ({ content: [{ type: "text", text: s }] });
 const safe = (s) => /^[a-z0-9-]+$/.test(s);
 const manifestPath = (name) => path.join(DEMOS, `${name}.yaml`);
@@ -374,46 +383,72 @@ server.registerTool("run", { description: "Record the demo and render it. Slow (
         await tell(`preview overrides the pinned ${pinned.width}×${pinned.height} viewport`);
     const outDir = path.join(OUT, name);
     acquireLock(outDir);
-    try {
-        // Moved aside, not deleted: a failed recording must not cost the person
-        // the take they already had.
-        stashPrevious(outDir);
-        await tell(`Recording ${name}${preview ? " (preview)" : ""}…`);
-        let take;
+    return await holdOpen(async () => {
         try {
-            take = await record(manifest, { outDir, manifestDir: DEMOS, locked: true, until, from, log: () => { } });
+            // Moved aside, not deleted: a failed recording must not cost the person
+            // the take they already had.
+            stashPrevious(outDir);
+            // The clock has to measure THIS run. It used to count from whenever the
+            // activity feed first went active, which on a long-lived window meant
+            // hours: someone watched a four-minute take report 529 minutes.
+            const runStart = Date.now();
+            void progress({ phase: "recording", step: 0, total: manifest.steps.length, label: "starting", runStart });
+            await tell(`Recording ${name}${preview ? " (preview)" : ""}…`);
+            let take;
+            try {
+                take = await record(manifest, {
+                    outDir, manifestDir: DEMOS, locked: true, until, from, log: () => { },
+                    // Throttled: a 251-step demo would otherwise be 251 posts, and the
+                    // window only needs to know roughly how far along this is.
+                    onProgress: (pr) => { if (pr.step === 1 || pr.step === pr.total || pr.step % 2 === 0)
+                        void progress({ ...pr, runStart }); },
+                });
+            }
+            catch (e) {
+                if (restorePrevious(outDir))
+                    await tell("Recording failed — your previous take has been put back.");
+                throw e;
+            }
+            keepPrevious(outDir, (l) => void tell(l));
+            // Render has no per-stage hook, but the last render of THIS demo measured
+            // itself into facts.json — so the bar can run on a real number rather
+            // than a spinner. It is an estimate and is labelled as one.
+            let etaSec = 0;
+            try {
+                const f = JSON.parse(fs.readFileSync(path.join(outDir, "facts.json"), "utf8"));
+                etaSec = Math.round(Object.values(f.timings ?? {}).reduce((a, b) => a + Number(b), 0));
+            }
+            catch { /* first render of this demo: no estimate to give */ }
+            void progress({ phase: "rendering", step: 0, total: 0, label: "rendering", etaSec, runStart });
+            await tell(`Rendering…`);
+            const a = await render(manifest, take, outDir, {});
+            const c = check(outDir, manifest);
+            const failed = take.timeline.find((e) => e.ok === false);
+            await tell(failed ? `Stopped at step ${failed.index}: ${failed.summary}` : `Take done — all steps ok · ${(take.duration - take.trimBefore).toFixed(0)}s`);
+            // A failed take is a finding, not a result: say exactly where and what
+            // the page showed, so even a small model gets a one-line repair.
+            if (failed)
+                return text(`FAILED at step ${failed.index} — ${failed.summary}: ${failed.error ?? "error"}${failed.screen ? `\nOn screen at that moment: “${failed.screen}”` : ""}\nThe camera stopped there (${(take.duration - take.trimBefore).toFixed(0)}s recorded). This is not a demo yet: edit the manifest, dry, run again. Do NOT call done on a failed take.\n\n${summariseTake(take)}`);
+            // The gate: a person's eyes are the only check for whether this is the
+            // RIGHT video, and they are cheapest to apply to a draft. Say so here,
+            // where the agent is deciding what to do next, rather than after the
+            // expensive take has already been spent.
+            // Measured, not estimated: this draft just performed the same demo against
+            // the same app, so its own capture time is what the full take will cost.
+            const took = take.captureSec ?? 0;
+            const mins = took >= 120 ? `${Math.round(took / 60)} min` : `${Math.round(took)}s`;
+            const gate = preview && took >= EXPENSIVE_TAKE_SECONDS && c.ok
+                ? `\n\nTHIS DRAFT TOOK ${mins} TO RECORD, and the full take costs about the same again. Do not run it at full quality yet. Show this draft to the person — \`ask\` them, say how long it is and what it shows, and point them at the Retake window. Their answer is the one thing no check here can give you: whether this is the right video. If they cannot be reached, stop and say what is ready and what the full take would cost; do not spend it on their behalf.`
+                : "";
+            return text(`${summariseTake(take)}\nvideo: ${a.mp4 ?? "none"}\ncheck: ${c.ok ? "pass" : "FAIL"}\n${c.lines.filter((l) => l.startsWith("FAIL")).join("\n")}${gate}`);
         }
-        catch (e) {
-            if (restorePrevious(outDir))
-                await tell("Recording failed — your previous take has been put back.");
-            throw e;
+        finally {
+            releaseLock(outDir);
+            // The run is over. `done` is a separate tool the agent may never call, so
+            // waiting for it left the bar sitting at "nearly there" indefinitely.
+            void progress({ phase: "idle", step: 0, total: 0, label: "", clear: true });
         }
-        keepPrevious(outDir, (l) => void tell(l));
-        await tell(`Rendering…`);
-        const a = await render(manifest, take, outDir, {});
-        const c = check(outDir, manifest);
-        const failed = take.timeline.find((e) => e.ok === false);
-        await tell(failed ? `Stopped at step ${failed.index}: ${failed.summary}` : `Take done — all steps ok · ${(take.duration - take.trimBefore).toFixed(0)}s`);
-        // A failed take is a finding, not a result: say exactly where and what
-        // the page showed, so even a small model gets a one-line repair.
-        if (failed)
-            return text(`FAILED at step ${failed.index} — ${failed.summary}: ${failed.error ?? "error"}${failed.screen ? `\nOn screen at that moment: “${failed.screen}”` : ""}\nThe camera stopped there (${(take.duration - take.trimBefore).toFixed(0)}s recorded). This is not a demo yet: edit the manifest, dry, run again. Do NOT call done on a failed take.\n\n${summariseTake(take)}`);
-        // The gate: a person's eyes are the only check for whether this is the
-        // RIGHT video, and they are cheapest to apply to a draft. Say so here,
-        // where the agent is deciding what to do next, rather than after the
-        // expensive take has already been spent.
-        // Measured, not estimated: this draft just performed the same demo against
-        // the same app, so its own capture time is what the full take will cost.
-        const took = take.captureSec ?? 0;
-        const mins = took >= 120 ? `${Math.round(took / 60)} min` : `${Math.round(took)}s`;
-        const gate = preview && took >= EXPENSIVE_TAKE_SECONDS && c.ok
-            ? `\n\nTHIS DRAFT TOOK ${mins} TO RECORD, and the full take costs about the same again. Do not run it at full quality yet. Show this draft to the person — \`ask\` them, say how long it is and what it shows, and point them at the Retake window. Their answer is the one thing no check here can give you: whether this is the right video. If they cannot be reached, stop and say what is ready and what the full take would cost; do not spend it on their behalf.`
-            : "";
-        return text(`${summariseTake(take)}\nvideo: ${a.mp4 ?? "none"}\ncheck: ${c.ok ? "pass" : "FAIL"}\n${c.lines.filter((l) => l.startsWith("FAIL")).join("\n")}${gate}`);
-    }
-    finally {
-        releaseLock(outDir);
-    }
+    });
 });
 server.registerTool("render", { description: "Re-render the last recording with the current manifest. No browser, seconds. THIS, NOT `run`, IS THE ANSWER TO ALMOST EVERY CHANGE: size and shape and format, a caption's words, speed, zoom, cards, music, the poster, and WHERE a caption sits (`nudge: <ms>` on the scene moves its marker, and the still and thumbnail follow). Only a change to what the demo DOES needs the camera again — and even then, `run` with `from`/`until` records one end of it rather than all of it.", inputSchema: { name: z.string() }, annotations: RETAKE_WRITE }, async ({ name }) => {
     LAST_DEMO = name;
@@ -496,11 +531,31 @@ const transport = new StdioServerTransport();
 // forever — a day of agent sessions left a row of them running, each holding a
 // Node runtime for a client that had long since exited.
 let leaving = false;
+/** Work that must not be abandoned halfway. A recording is minutes of real
+    time against a real app; dropping it because the agent's socket closed
+    throws away the expensive half of the job and leaves nothing behind. */
+let inFlight = 0;
+export function holdOpen(work) {
+    inFlight++;
+    return work().finally(() => { inFlight--; if (leaving && inFlight === 0)
+        process.exit(0); });
+}
 const leave = () => {
     if (leaving)
         return;
     leaving = true;
-    void server.close().catch(() => { }).finally(() => process.exit(0));
+    // Stop accepting new work immediately, but let a take in progress finish
+    // and write its files. Before this, the server exited the moment the
+    // client's socket closed and the recording died at whatever step it was
+    // on -- the person came back to nothing.
+    void server.close().catch(() => { });
+    if (inFlight > 0) {
+        process.stderr.write(`retake: client disconnected, finishing ${inFlight} job(s) in flight\n`);
+        // A take cannot outlive its own ceiling, so this is a backstop, not a policy.
+        setTimeout(() => process.exit(0), 65 * 60_000).unref();
+        return;
+    }
+    process.exit(0);
 };
 transport.onclose = leave;
 process.stdin.once("end", leave);

package/dist/record.js

@@ -504,6 +504,18 @@ export async function record(m, opts) {
                 entry.camera = await resolveCamera(page, m, q, step, i);
             }
             log(`[${String(i).padStart(2, "0")}] ${entry.summary}${entry.camera ? ` · camera ${entry.camera.zoom}× on ${entry.camera.focus}` : ""}`);
+            opts.onProgress?.({ phase: "recording", step: i + 1, total: m.steps.length, label: entry.summary });
+            // A resume point on disk, so a take that dies is not a take lost. It
+            // survives a kill because it is written as it goes, not at the end —
+            // and `--from <that scene>` re-records only what came after it.
+            if (step.action === "scene" && step.label) {
+                try {
+                    fs.writeFileSync(path.join(opts.outDir, "reached.json"), JSON.stringify({
+                        demo: m.name, scene: step.label, step: i + 1, of: m.steps.length, at: new Date().toISOString(),
+                    }));
+                }
+                catch { /* a resume hint is a courtesy, never a reason to fail */ }
+            }
             try {
                 await runStep(rec, page, step, m, ctx);
             }
@@ -631,6 +643,12 @@ export async function record(m, opts) {
     // Timeline offsets are already relative to videoStartedAt (= document commit,
     // calibrated to within ~0.2s of the first video frame on a warm route). The
     // real file length is authoritative for the end.
+    // The take finished, so there is nothing to resume: leaving the hint would
+    // send someone back into the middle of a demo they already have.
+    try {
+        fs.rmSync(path.join(opts.outDir, "reached.json"), { force: true });
+    }
+    catch { /* fine */ }
     const trimBefore = sec(setupEnd - t0);
     // The recording keeps rolling while the browser is torn down, so the raw
     // video always has a tail of nothing after the last step. The take ends

package/dist/ui/chat.html

@@ -171,6 +171,19 @@
   .arch summary .emptybtn { margin-left:auto; border:1px solid var(--rule2); background:#fff; color:var(--muted); border-radius:8px; font-size:11px; padding:2px 8px; cursor:pointer; }
   .arch summary .emptybtn:hover { background:var(--bad); border-color:var(--bad); color:#fff; }
   .arch summary { display:flex; align-items:center; gap:6px; }
+  .live .prog { margin-top:12px; }
+  .live .bar { height:4px; border-radius:99px; background:var(--rule); overflow:hidden; }
+  .live .bar i { display:block; height:100%; background:var(--amber); border-radius:99px;
+    transition:width .45s cubic-bezier(.2,.7,.3,1); }
+  .live .under { display:flex; align-items:baseline; gap:8px; margin-top:7px; font-size:12.5px; color:var(--muted); }
+  .live .under .sp { flex:1; }
+  .live .count { font-variant-numeric:tabular-nums; }
+  .live .quip { color:var(--ink); font-weight:500; }
+  .live .elapsed { font-variant-numeric:tabular-nums; opacity:.7; }
+  .spin { width:9px; height:9px; border-radius:99px; background:var(--amber); flex:none;
+    animation:pulse 1.4s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { opacity:.35; transform:scale(.82) } 50% { opacity:1; transform:scale(1) } }
+  @media (prefers-reduced-motion:reduce) { .spin { animation:none; opacity:.9 } .live .bar i { transition:none } }
 </style>
 </head>
 <body>
@@ -186,7 +199,11 @@
   <div class="wrap two">
     <div class="col-main">
     <div class="live" id="live">
-      <div class="head"><span class="dot live" id="liveDot"></span><b id="liveWho"></b><span id="liveWhat"></span></div>
+      <div class="head"><span class="spin" id="liveDot"></span><b id="liveWho"></b><span id="liveWhat"></span></div>
+      <div class="prog" id="liveProg" style="display:none">
+        <div class="bar"><i id="liveBar" style="width:0%"></i></div>
+        <div class="under"><span class="quip" id="liveQuip"></span><span class="sp"></span><span class="count" id="liveCount"></span><span class="elapsed" id="liveElapsed"></span></div>
+      </div>
       <div class="lines" id="liveLines"></div>
     </div>
     <div class="pin" id="pin">
@@ -613,14 +630,107 @@ function askSecrets(r) {
 
 // ---- the live feed: an agent working shows up here as it works -------------
 function watchActivity() {
+
+// While a take runs there is nothing to look at and a lot of time to look at
+// it. A bar for how far in, a clock for how long, and something to read that
+// is not a spinner. Recording-flavoured, because that is what is happening,
+// and none of them claim progress they do not have.
+const QUIPS = [
+  'Rolling.', 'Lining up the shot.', 'Waiting on your app.',
+  'Not fumbling the take.', 'Holding the frame.', 'Letting the app think.',
+  'Clicking things, patiently.', 'Doing the boring part.',
+  'Take one. Also the only take.', 'Typing at a speed people can read.',
+  'Watching the spinner so you do not have to.', 'No sighing this time.',
+  'Getting it right the first time, on purpose.',
+];
+let quipAt = 0, quipTimer = null, elapsedTimer = null, runStart = 0, lastActivity = null;
+
+function fmtElapsed(ms) {
+  const t = Math.max(0, Math.round(ms / 1000));
+  return t < 60 ? t + 's' : Math.floor(t / 60) + 'm ' + String(t % 60).padStart(2, '0') + 's';
+}
+
+function startLiveTickers(startedAt) {
+  const want = startedAt || Date.now();
+  if (runStart !== want) runStart = want;   // a new run restarts the clock
+  if (!quipTimer) {
+    // Slow enough to read, and it only moves while something is happening.
+    quipTimer = setInterval(() => {
+      quipAt = (quipAt + 1) % QUIPS.length;
+      const q = $('liveQuip'); if (q) q.textContent = QUIPS[quipAt];
+    }, 4200);
+  }
+  if (!elapsedTimer) {
+    elapsedTimer = setInterval(() => {
+      const e = $('liveElapsed'); if (e) e.textContent = fmtElapsed(Date.now() - runStart);
+      // No events arrive while ffmpeg works, so the render bar advances on
+      // the clock or it would look frozen for the whole render.
+      if (lastActivity && lastActivity.progress && lastActivity.progress.phase === 'rendering') drawProgress(lastActivity);
+    }, 1000);
+  }
+}
+function stopLiveTickers() {
+  clearInterval(quipTimer); clearInterval(elapsedTimer);
+  quipTimer = elapsedTimer = null;
+}
+
+function drawProgress(a) {
+  const box = $('liveProg'); if (!box) return;
+  if (a) lastActivity = a;
+  const p = a && a.progress;
+  if (!a || !a.active) { box.style.display = 'none'; stopLiveTickers(); return; }
+  // Nothing has reported in five minutes: the run is over, or whatever was
+  // running is gone. Either way the bar is lying, so stop showing it.
+  if (p && p.since && Date.now() - p.since > 5 * 60_000) { box.style.display = 'none'; stopLiveTickers(); return; }
+  if (!p) { box.style.display = 'none'; stopLiveTickers(); return; }
+  // Measure THIS run, not the activity feed. The feed goes active on the
+  // first line and stays that way, so a window left open all day reported a
+  // four-minute take as 529 minutes.
+  startLiveTickers(p.runStart || a.startedAt);
+  if (!$('liveQuip').textContent) $('liveQuip').textContent = QUIPS[0];
+  $('liveElapsed').textContent = fmtElapsed(Date.now() - runStart);
+  // Rendering: there are no steps to count, but the last render of this demo
+  // measured itself, so the bar can run on that. Capped at 95% — it must not
+  // claim finished before it is, and an estimate is never a promise.
+  if (p && p.phase === 'rendering') {
+    box.style.display = '';
+    const eta = (p.etaSec || 0) * 1000;
+    const gone = Date.now() - (p.since || Date.now());
+    $('liveBar').style.width = (eta ? Math.min(95, Math.round((gone / eta) * 100)) : 0) + '%';
+    const left = Math.max(0, Math.round((eta - gone) / 1000));
+    $('liveCount').textContent = eta
+      ? (left > 0 ? `rendering · about ${left}s left` : 'rendering · nearly there')
+      : 'rendering';
+    return;
+  }
+  if (!p || !p.total) {
+    // Working, but nothing countable yet — show the clock, not a fake bar.
+    box.style.display = '';
+    $('liveBar').style.width = '0%';
+    $('liveCount').textContent = '';
+    return;
+  }
+  box.style.display = '';
+  // The last STEP is not the end of the take: the final hold still has to
+  // play, the video still has to be finalised and its dead tail trimmed. A
+  // bar sitting at 100% while the thing is visibly still going is the kind
+  // of small lie that makes someone stop trusting the rest of the window.
+  const pct = Math.min(96, Math.round((p.step / p.total) * 96));
+  $('liveBar').style.width = pct + '%';
+  $('liveCount').textContent = `step ${p.step} of ${p.total}`;
+}
+
   const es = new EventSource('/api/activity/stream');
   const apply = (a) => {
     if (!a || (!a.active && !a.lines?.length)) return;
     $('live').classList.add('show');
-    $('liveDot').className = 'dot ' + (a.active ? 'live' : 'ok');
+    // 'spin' has to survive: this line used to replace it wholesale, so the
+    // spinner existed in the markup and never once appeared.
+    $('liveDot').className = a.active ? 'spin' : 'dot ok';
     $('liveWho').textContent = a.active ? (a.who || 'your agent') : 'Done';
     $('liveWhat').textContent = a.demo ? `· ${a.demo}` : '';
     $('liveLines').innerHTML = (a.lines || []).slice(-4).map((l) => `<div>${esc(l)}</div>`).join('');
+    drawProgress(a);
   };
   es.addEventListener('state', (ev) => {
     const d = JSON.parse(ev.data);
@@ -631,6 +741,7 @@ function watchActivity() {
     for (const r of d.secrets || []) askSecrets(r);
   });
   es.addEventListener('line', (ev) => apply(JSON.parse(ev.data)));
+  es.addEventListener('progress', (ev) => apply(JSON.parse(ev.data)));
   es.addEventListener('secrets', (ev) => askSecrets(JSON.parse(ev.data)));
   es.addEventListener('finished', async (ev) => { apply(JSON.parse(ev.data)); await drawDemos(); await newest(); setTimeout(() => $('live').classList.remove('show'), 8000); });
   es.onerror = () => { es.close(); setTimeout(watchActivity, 3000); };

package/dist/ui/server.js

@@ -441,12 +441,18 @@ function noteActivity(b) {
         if (activity.lines.length > 200)
             activity.lines.shift();
     }
+    if (b.progress) {
+        activity.progress = b.progress.clear ? undefined : { ...b.progress, since: Date.now() };
+        if (b.progress.demo)
+            activity.demo = b.progress.demo;
+    }
     if (b.done) {
         activity.active = false;
         activity.finishedAt = Date.now();
+        activity.progress = undefined;
     }
     for (const w of activityWatchers)
-        w({ type: b.done ? "finished" : "line", data: { ...activity, latest: b.line } });
+        w({ type: b.done ? "finished" : b.progress ? "progress" : "line", data: { ...activity, latest: b.line } });
 }
 export function serve(port) {
     loadDotenv(ROOT);
@@ -471,13 +477,19 @@ export function serve(port) {
             // root when deployed, so its asset paths are relative either way.
             // releases.json sits beside index.html when deployed, so the preview
             // has to serve it from the same two prefixes the page might be under.
-            const mrel = /^(?:\/landing)?\/releases\.json$/.exec(p);
-            if (mrel && (req.method === "GET" || req.method === "HEAD")) {
-                const f = path.join(PKG_ROOT, "site", "releases.json");
+            // Files that sit at the root of site/ when deployed — releases.json, the
+            // photo in the maker note. The preview has to serve them from the same
+            // two prefixes the page might be under, or it shows a broken page for a
+            // site that is actually fine.
+            const mroot = /^(?:\/landing)?\/([A-Za-z0-9._-]+\.(?:json|jpg|jpeg|png|svg|webp|ico|txt))$/.exec(p);
+            if (mroot && (req.method === "GET" || req.method === "HEAD")) {
+                const f = path.join(PKG_ROOT, "site", mroot[1]);
                 if (!fs.existsSync(f))
                     return json(res, 404, { error: "not found" });
-                res.writeHead(200, { "content-type": "application/json" });
-                return res.end(req.method === "HEAD" ? undefined : fs.readFileSync(f));
+                res.writeHead(200, { "content-type": MIME[path.extname(f)] ?? "application/octet-stream", "content-length": fs.statSync(f).size });
+                if (req.method === "HEAD")
+                    return res.end();
+                return fs.createReadStream(f).pipe(res);
             }
             const msite = /^(?:\/landing)?\/(media|logos)\/([A-Za-z0-9._-]+)$/.exec(p);
             if (msite && (req.method === "GET" || req.method === "HEAD")) {

package/package.json

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

package/site/releases.json

@@ -1,6 +1,16 @@
 {
   "_readme": "What's new, written for the person using Retake — not for whoever wrote it. Both the landing page and the Retake window read THIS file; there is no second copy. Rules for adding one: say what changed for them, name no files, no flags they will not type, no words like refactor or regression. If a line only makes sense to someone who has read the source, it does not belong here. Newest first. Add an entry on every release that changes what people see.",
   "releases": [
+    {
+      "version": "0.4.1",
+      "date": "2026-08-26",
+      "headline": "You can see what your agent is doing, and it finishes what it started",
+      "notes": [
+        "A progress bar while a demo records — how many steps in, how long it has been going, and roughly how long the render has left. The window used to just say \"Recording…\" and then nothing at all, sometimes for a quarter of an hour.",
+        "If your agent disconnects mid-recording, the recording now finishes and saves instead of dying halfway.",
+        "And if a recording is killed outright, it leaves a note saying which part it reached — so you can pick up from there instead of starting the whole thing again."
+      ]
+    },
     {
       "version": "0.4.0",
       "date": "2026-08-25",