demobites 1.27.0 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demobites",
-  "version": "1.27.0",
+  "version": "1.29.0",
   "description": "The DemoBites agentic recorder — you prompt, it films a real browser, and DemoBites turns the take into an editable demo bite.",
   "bin": {
     "demobites": "launcher/index.mjs"

package/scripts/record.mjs

@@ -12,6 +12,8 @@
 import { chromium } from "playwright";
 import fs from "node:fs";
 import path from "node:path";
+import { spawn } from "node:child_process";
+import { ffmpeg as FFMPEG } from "./media-tools.mjs";
 // LISTENING (2026-10-14): the app's mailbox, when `npx demobite listen` runs
 // this take; a no-op everywhere else (the terminal flow, the cloud sandbox
 // copy that may not ship listen-event.mjs).
@@ -146,7 +148,8 @@ fs.mkdirSync(profileDir, { recursive: true });
 // a customer's own uploaded voice. Holding a shot to cover an estimated line
 // is what produced a 60-second take with the cursor parked for 12 seconds.
 const DEFAULT_SETTLE_MS = 2200;
-const DEFAULT_HOVER_DWELL = 3200;
+// 1.6 s (was 3.2 s; the planner's clock budgets 2 s for the beat — founder 2026-10-18: planned 31 s, filmed 46 s).
+const DEFAULT_HOVER_DWELL = 1600;
 const DEFAULT_CLICK_DWELL = 700;
 const DEFAULT_CLICK_AFTER = 2000;
 const CLOSING_BEAT_MS = 2200;
@@ -385,14 +388,64 @@ const postFrame = async () => {
   const within = (p, ms) => Promise.race([p, new Promise((_, rej) => setTimeout(() => rej(new Error(`timeout ${ms} ms`)), ms))]);
   try {
     frameCdp ??= await within(ctx.newCDPSession(page), 4000);
-    const scale = Math.min(1, 480 / VIEW.width);
-    const { data } = await within(frameCdp.send("Page.captureScreenshot", { format: "jpeg", quality: 55, clip: { x: 0, y: 0, width: VIEW.width, height: VIEW.height, scale } }), 4000);
-    await within(postEvent("frame", { ...frameStep, jpeg: data }), 8000);
+    // THE CAMERA'S VIEWPORT IS NEVER TOUCHED (founder's take of 2026-10-18, bite 1234: grey quarter-size frames at
+    // 0.6 s, 8.3 s, 11.1 s, 16.1 s). A captureScreenshot with a clip at scale 0.25 made Chromium emulate that scale
+    // for the capture, and the video screencast recorded those frames. So: capture at scale 1, no clip, and shrink
+    // the JPEG OUTSIDE the page with ffmpeg. No ffmpeg → no thumbnail, never a glitch.
+    const { data } = await within(frameCdp.send("Page.captureScreenshot", { format: "jpeg", quality: 60 }), 4000);
+    const small = await within(shrinkJpeg(Buffer.from(data, "base64"), 480), 4000);
+    if (small) await within(postEvent("frame", { ...frameStep, jpeg: small.toString("base64") }), 8000);
   } catch (e) {
     if (!frameWarned) { frameWarned = true; console.error(`frame: dropped (${String(e?.message ?? e).split("\n")[0]})`); }
   } finally { framing = false; }
 };
 const framer = setInterval(() => void postFrame(), FRAME_EVERY_MS);
+/** A JPEG scaled to `width` by ffmpeg, in memory; null when ffmpeg is not there. */
+let ffmpegPath;
+function shrinkJpeg(buf, width) {
+  if (ffmpegPath === undefined) { try { ffmpegPath = FFMPEG() || null; } catch { ffmpegPath = null; } }
+  if (!ffmpegPath) return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const ff = spawn(ffmpegPath, ["-hide_banner", "-loglevel", "error", "-f", "image2pipe", "-i", "pipe:0", "-vf", `scale=${width}:-2`, "-q:v", "7", "-f", "image2pipe", "-vcodec", "mjpeg", "pipe:1"], { stdio: ["pipe", "pipe", "ignore"] });
+    const out = [];
+    ff.stdout.on("data", (d) => out.push(d));
+    ff.on("error", () => resolve(null));
+    ff.on("close", (code) => resolve(code === 0 && out.length ? Buffer.concat(out) : null));
+    ff.stdin.on("error", () => {});
+    ff.stdin.end(buf);
+  });
+}
+
+/**
+ * THE PICTURE IS STILL (founder 2026-10-18: "wait till the page loads before you're actually recording"; bite 1234
+ * opened on skeleton cards). Paint is not load: text and boxes exist while thumbnails and skeletons still shimmer.
+ * This waits until no skeleton / busy / shimmer element shows AND two stills 350 ms apart are identical, up to
+ * `maxMs`. Stills are full-frame captures at scale 1: they never touch the camera's viewport.
+ */
+async function settledPicture(maxMs, label) {
+  const deadline = Date.now() + maxMs;
+  let prev = null;
+  while (Date.now() < deadline) {
+    const busy = await page.evaluate(() => {
+      let n = 0;
+      for (const el of document.querySelectorAll('.animate-pulse, [class*="skeleton" i], [class*="shimmer" i], [aria-busy="true"], [data-loading="true"]')) {
+        const r = el.getBoundingClientRect();
+        if (r.width > 8 && r.height > 8) n++;
+      }
+      return n;
+    }).catch(() => 0);
+    let shot = null;
+    try {
+      frameCdp ??= await ctx.newCDPSession(page);
+      shot = (await frameCdp.send("Page.captureScreenshot", { format: "jpeg", quality: 25 })).data;
+    } catch { frameCdp = null; }
+    if (!busy && shot && prev && shot === prev) return true;
+    prev = shot;
+    await page.waitForTimeout(350);
+  }
+  console.log(`STILL GATE (${label}): the picture kept changing for ${Math.round(maxMs / 1000)} s — going on anyway.`);
+  return false;
+}
 
 /** Ask the element what cursor it shows. Takes the locator visibleBox already
  *  resolved — re-scanning cost ~1s of dead video per step, which inflated a
@@ -629,9 +682,13 @@ async function revealedBox(step) {
 // Pace matched to the reference: a 350px move lands in ~0.75s INCLUDING its
 // deceleration tail. The ballistic shape covers most distance early, so the
 // same wall duration reads far snappier than min-jerk did.
-const GLIDE_MIN_MS = 650;
-const GLIDE_MAX_MS = 1250;
-const GLIDE_PER_PX = 1.3;
+// THE GLIDE IS PACED BY THE CLOCK (founder's take of 2026-10-18, bite 1234: four glides took 7.2 s, 3.6 s, 3.5 s and
+// 4.8 s against this cap — the loop awaited a browser round trip on each of its ~60 sub-steps, so its pace was the
+// protocol's latency, not the design). Now the recorded cursor advances by wall time at 60 Hz, and the real mouse
+// follows with at most one move in flight, skipping points it cannot keep up with.
+const GLIDE_MIN_MS = 420;
+const GLIDE_MAX_MS = 900;
+const GLIDE_PER_PX = 0.85;
 
 // LAW (ballistic motion, measured off the founder's reference hero-demo,
 // 2026-08-09): the life is in the VELOCITY PROFILE, not the path. Frame-by-
@@ -668,7 +725,6 @@ async function glide(x, y) {
   // not the 2x capture space, or every move doubles in duration and bow.
   const designDist = dist / SUPERSAMPLE;
   const dur = Math.min(GLIDE_MAX_MS, Math.max(GLIDE_MIN_MS, designDist * GLIDE_PER_PX));
-  const steps = Math.max(12, Math.round(dur / 16));
   // Near-straight trace: the reference hero-demo's moves are straight to
   // within 2% (path/chord 1.02) — a big swoop reads as fake, a trace of
   // curvature reads as a hand. 4.5% capped 20px, DETERMINISTIC.
@@ -679,36 +735,30 @@ async function glide(x, y) {
   const c1y = y0 + (y - y0) * 0.3 + perpY * arcMag * sign;
   const c2x = x0 + (x - x0) * 0.75 + perpX * arcMag * 0.35 * sign;
   const c2y = y0 + (y - y0) * 0.75 + perpY * arcMag * 0.35 * sign;
-  for (let i = 1; i <= steps; i++) {
-    const e = ballistic(i / steps);
+  const started = Date.now();
+  let inflight = null;
+  for (;;) {
+    const f = Math.min(1, (Date.now() - started) / dur);
+    const e = ballistic(f);
     const u = 1 - e;
     const nx = u * u * u * x0 + 3 * u * u * e * c1x + 3 * u * e * e * c2x + e * e * e * x;
     const ny = u * u * u * y0 + 3 * u * u * e * c1y + 3 * u * e * e * c2y + e * e * e * y;
-    // LAW (record what you animate, founder 2026-08-09): cx/cy used to be
-    // assigned only AFTER this loop, so the background sampler recorded the
-    // OLD position for the entire glide and then teleported. 98% of a real
-    // take's events were duplicates and the cursor jumped 458px in 0ms. Every
-    // reported symptom (rigid, jumping, too fast, missing where the action is,
-    // appearing and reappearing) came from that one omission — at a 3x zoom
-    // the visible frame is 640x360, so a cursor parked at the previous target
-    // is off-frame entirely. Advance the live position EVERY frame and record
-    // it, so the event track is the motion the viewer actually sees.
+    // LAW (record what you animate, founder 2026-08-09): advance the live position EVERY frame and record it, so
+    // the event track is the motion the viewer actually sees.
     cx = nx; cy = ny;
     pushMouse("move", nx, ny);
-    // The burned-in cursor only exists in the STANDALONE ending. In the
-    // DemoBites lane __recSetCursor is undefined, and awaiting a no-op
-    // evaluate cost a full protocol round trip PER STEP — it doubled the
-    // step cadence to ~33ms and made the motion chunkier than designed.
-    if (BURN_CURSOR) {
-      await page.evaluate(([a, b]) => window.__recSetCursor?.(a, b), [nx, ny]);
-    }
-    // LAW (mouse-coordinate clicks): the real mouse tracks the drawn cursor,
-    // so hover states fire naturally and the click lands where the pulse is.
-    await page.mouse.move(nx, ny);
-    await page.waitForTimeout(dur / steps);
+    // The burned-in cursor only exists in the STANDALONE ending.
+    if (BURN_CURSOR) await page.evaluate(([a, b]) => window.__recSetCursor?.(a, b), [nx, ny]);
+    // LAW (mouse-coordinate clicks): the real mouse tracks the drawn cursor, so hover states fire naturally and the
+    // click lands where the pulse is. One move in flight at a time: a slow round trip skips points, never the clock.
+    if (!inflight) inflight = page.mouse.move(nx, ny).catch(() => {}).finally(() => { inflight = null; });
+    if (f >= 1) break;
+    await page.waitForTimeout(16);
   }
+  if (inflight) await inflight;
   cx = x; cy = y;
   pushMouse("move", x, y);
+  await page.mouse.move(x, y).catch(() => {});
 }
 
 async function smoothScroll(dy, ms = 1400, within = null) {
@@ -821,7 +871,7 @@ try {
         // then stamp the window so manifest.mjs cuts it out with a fade —
         // the viewer sees page one, a fade, page two. No zoom or narration
         // may live inside that window (manifest.mjs keeps them out).
-        await page.waitForLoadState("networkidle", { timeout: 5000 }).catch(() => {});
+        await page.waitForLoadState("networkidle", { timeout: 2500 }).catch(() => {});
         const paintDeadline = Date.now() + 10000;
         while (Date.now() < paintDeadline) {
           const painted = await page.evaluate(() => {
@@ -836,6 +886,7 @@ try {
           if (painted) break;
           await page.waitForTimeout(200);
         }
+        await settledPicture(3000, "navigation");
         await page.waitForTimeout(350);
         rec.nav = { from: navIssuedAt, to: t() };
       }
@@ -871,6 +922,7 @@ try {
         if (!painted) {
           console.log("PAINT GATE: page never showed real content within 15s — the take would open on a blank frame. Judge the footage carefully.");
         }
+        await settledPicture(8000, "first frame");
         const nextStep = STORYBOARD.steps[STORYBOARD.steps.indexOf(step) + 1];
         if (nextStep?.action === "expect" && nextStep.selector) {
           const sel = nextStep.text
@@ -1073,7 +1125,7 @@ try {
         // the dialog opened in the middle of the screen. A step framed wide
         // already frames its result; a click that changed the URL leaves the
         // landing to the settle that follows (framed wide there).
-        if (page.url() !== urlBeforeClick) landingPending = true;
+        if (page.url() !== urlBeforeClick) { landingPending = true; await settledPicture(2500, "landing"); }
         if (step.reveals !== false && !stepWide) {
           const opened = await revealedBox(step);
           if (opened) {
@@ -1168,7 +1220,9 @@ try {
         // the rest of the take.
         await page.waitForLoadState("domcontentloaded", { timeout: 30000 }).catch(() => {});
         if (page.url() !== urlBefore) {
-          await page.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
+          // The still gate replaces a networkidle that long-pollers never let end (6 s of dead air, 2026-10-18).
+          await page.waitForLoadState("domcontentloaded", { timeout: 6000 }).catch(() => {});
+          await settledPicture(2500, "landing");
           await ensureCursor();
           await applyHideCss();
           await page.evaluate(([a, b]) => window.__recSetCursor?.(a, b), [x, y]);
@@ -1232,6 +1286,10 @@ try {
   }
   // Closing beat so the last action breathes before the cut ends.
   await page.waitForTimeout(CLOSING_BEAT_MS);
+  // THE TAKE SAYS WHAT IT COST (2026-10-18): per step, so a slow take explains itself.
+  const glides = manifest.camera.filter((c) => c.glide).map((c) => c.glide.t_end - c.glide.t_start);
+  manifest.timing = { filmed_s: Math.round(t() * 100) / 100, steps: manifest.steps.map((st) => ({ n: st.n, action: st.action, s: Math.round(((st.t_end ?? 0) - (st.t_start ?? 0)) * 100) / 100 })), glide_s: Math.round(glides.reduce((a, b) => a + b, 0) * 100) / 100, glides: glides.length };
+  console.log(`timing: filmed ${manifest.timing.filmed_s}s; steps ${manifest.timing.steps.map((st) => `${st.n}:${st.s}s`).join(" ")}; glides ${glides.length} totalling ${manifest.timing.glide_s}s`);
 } catch (e) {
   failure = e;
 }

package/scripts/trim.mjs

@@ -150,6 +150,51 @@ execFileSync(FFMPEG(), [
   clean,
 ], { stdio: "inherit" });
 
+// GLITCH GUARD (founder 2026-10-18, bite 1234: "extremely bad glitches"): a frame the camera should never have
+// produced — the page painted small over a grey canvas (a viewport emulation caught by the screencast) — must never
+// reach a demo, whatever caused it. Each such frame is replaced by the last good one (freezeframes), the count is
+// logged and kept in the manifest. Detection: the bottom-right quadrant is flat mid-grey (Y≈128, almost no spread);
+// real UI there is white, dark or busy. Needs signalstats + freezeframes in the ffmpeg build; without them it skips.
+try {
+  const filters = execFileSync(FFMPEG(), ["-hide_banner", "-filters"], { stdio: ["ignore", "pipe", "ignore"] }).toString();
+  if (/\bfreezeframes\b/.test(filters) && /\bsignalstats\b/.test(filters)) {
+    const stats = spawnSync(FFMPEG(), ["-hide_banner", "-loglevel", "error", "-i", clean, "-vf", "crop=iw/2:ih/2:iw/2:ih/2,signalstats,metadata=print:file=-", "-f", "null", "-"], { encoding: "utf8", maxBuffer: 64 * 1024 * 1024 });
+    const bad = [];
+    let frame = -1, yavg = null, ymin = null, ymax = null;
+    const flush = () => { if (frame >= 0 && yavg !== null && yavg >= 118 && yavg <= 138 && ymin !== null && ymax !== null && ymax - ymin <= 24) bad.push(frame); };
+    for (const line of (stats.stdout || "").split("\n")) {
+      const f = line.match(/^frame:(\d+)/);
+      if (f) { flush(); frame = Number(f[1]); yavg = ymin = ymax = null; continue; }
+      const m = line.match(/lavfi\.signalstats\.(YAVG|YMIN|YMAX)=([\d.]+)/);
+      if (!m) continue;
+      if (m[1] === "YAVG") yavg = Number(m[2]); else if (m[1] === "YMIN") ymin = Number(m[2]); else ymax = Number(m[2]);
+    }
+    flush();
+    const total = frame + 1;
+    if (bad.length && bad.length < total * 0.5) {
+      const runs = [];
+      for (const n of bad) { const r = runs[runs.length - 1]; if (r && n === r.last + 1) r.last = n; else runs.push({ first: n, last: n }); }
+      // Replace each run with the frame before it; a run at the very start takes the first good frame after it.
+      const chain = runs.map((r) => ({ ...r, replace: r.first > 0 ? r.first - 1 : Math.min(total - 1, r.last + 1) })).filter((r) => r.replace >= 0 && r.replace < total);
+      const labels = chain.map((_, i) => `[r${i}]`).join("");
+      let graph = `[0:v]split=${chain.length + 1}[a0]${labels};`;
+      chain.forEach((r, i) => { graph += `[a${i}][r${i}]freezeframes=first=${r.first}:last=${r.last}:replace=${r.replace}[a${i + 1}];`; });
+      graph += `[a${chain.length}]format=yuv420p[out]`;
+      const fixed = path.join(dir, "clean-fixed.mp4");
+      void postEvent("finishing", { text: `Replacing ${bad.length} glitch frame${bad.length === 1 ? "" : "s"}…` });
+      execFileSync(FFMPEG(), ["-y", "-loglevel", "error", "-i", clean, "-filter_complex", graph, "-map", "[out]", "-c:v", "libx264", "-preset", "medium", "-crf", "19", "-movflags", "+faststart", fixed], { stdio: "inherit" });
+      fs.renameSync(fixed, clean);
+      man.glitch = { frames: bad.length, windows: chain.map((r) => ({ first: r.first, last: r.last })) };
+      fs.writeFileSync(manPath, JSON.stringify(man, null, 2));
+      console.log(`glitch guard: ${bad.length} frame${bad.length === 1 ? "" : "s"} in ${chain.length} window${chain.length === 1 ? "" : "s"} replaced by the last good frame (${chain.map((r) => `${(r.first / 30).toFixed(2)}–${((r.last + 1) / 30).toFixed(2)}s`).join(", ")})`);
+    } else if (bad.length) {
+      console.log(`glitch guard: ${bad.length} of ${total} frames look padded — too many to be a glitch, left as filmed`);
+    } else console.log(`glitch guard: clean (${total} frames)`);
+  } else console.log("glitch guard: skipped (ffmpeg build without signalstats/freezeframes)");
+} catch (e) {
+  console.error("glitch guard: skipped (" + String(e?.message ?? e).split("\n")[0] + ")");
+}
+
 const dur = execFileSync(FFPROBE(), [
   "-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", clean,
 ]).toString().trim();

package/skill/scripts/clock.mjs

@@ -14,8 +14,10 @@ export const secondsOf = (s, firstNarrated) => {
     case "goto": return 0.1;
     case "settle": return Math.max(ms(s.ms, 1200) / 1000, say) + slack;
     case "scroll": return Math.max(ms(s.ms, 1900) / 1000, say) + slack;
-    case "click":
-    case "hover": return 1.0 + Math.max(ms(s.after, 2000) / 1000, say) + slack;
+    // A click: the glide (~0.7 s), the dwell and the press (0.9 s), then the beat; a click that opens another page
+    // lands first (~1 s). A hover: the glide, then the beat (1.6 s at least). Numbers of record.mjs 1.29.0.
+    case "click": return 0.7 + 0.9 + Math.max(ms(s.after, 2000) / 1000, say) + (/href|^a\b|url/i.test(String(s.selector ?? "")) || s.url ? 1.0 : 0.3) + slack;
+    case "hover": return 0.7 + Math.max(ms(s.dwell, 1600) / 1000, say) + slack;
     case "type": return 1.0 + String(s.text ?? "").length * 0.05 + Math.max(ms(s.after, 1500) / 1000, say) + slack;
     case "expect": return 0.3;
     default: return 1 + say;