demobites 1.22.0 → 1.23.0

package/launcher/index.mjs

@@ -36,7 +36,8 @@ const warn = (m) => console.log(`  ! ${m}`);
 
 // The skill's home and the project's key. The key lives in <cwd>/.recorder/config.json
 // (login.mjs writes it there), so everything here is per-project.
-const skillsDir = path.join(os.homedir(), ".claude", "skills");
+// A test home (DEMOBITE_HOME) keeps its own skill copy too: two recorders on one Mac must never refresh each other's camera.
+const skillsDir = process.env.DEMOBITE_HOME ? path.join(process.env.DEMOBITE_HOME, "skills") : path.join(os.homedir(), ".claude", "skills");
 const dest = path.join(skillsDir, "agentic-recorder");
 const readCfg = () => {
   try { return JSON.parse(fs.readFileSync(path.join(process.cwd(), ".recorder", "config.json"), "utf8")); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demobites",
-  "version": "1.22.0",
+  "version": "1.23.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

@@ -367,6 +367,33 @@ const pushMouse = (type, x, y, button = null, extra = null) => {
 // has nothing to sit on between moves.
 const sampler = setInterval(() => pushMouse("move", cx, cy), CURSOR_SAMPLE_MS);
 
+// THE LIVE FRAME (founder 2026-10-16, "a thumbnail of what we're recording"): a small still of what the
+// camera sees, posted at every step and every few seconds, so the Recordings row in the app shows the
+// take as it happens. Never on the take's path: a frame that fails is dropped, never waited on. One CDP
+// capture at ~480 px wide, JPEG, well under 40 KB; the server keeps only the latest and drops it when
+// the take ends.
+const FRAME_EVERY_MS = 5000;
+let frameCdp = null;
+let framing = false;
+let frameStep = { n: 0, N: 0 };
+let frameWarned = false;
+const postFrame = async () => {
+  if (framing || !frameStep.N) return;
+  framing = true;
+  // A capture can stall while the page navigates (the first take of 2026-10-16 posted nothing: one hung
+  // capture held the flag for the whole take). Four seconds, then the frame is dropped and the next one tries.
+  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);
+  } 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);
+
 /** 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
  *  29s take to 36s purely from instrumentation. Playwright locators pierce
@@ -779,7 +806,7 @@ try {
     process.stdout.write(`step ${rec.n} ${step.action} ${step.label ?? ""}\n`);
     // The customer's line (founder 2026-10-14): one bar, step n of N. The
     // agent relays this, never the step/action lines above.
-    { const N = STORYBOARD.steps.length, filled = Math.round((rec.n / N) * 20); process.stdout.write(`Filming  ${"█".repeat(filled)}${"░".repeat(20 - filled)}  step ${rec.n} of ${N}\n`); void postEvent("filming", { n: rec.n, N }); }
+    { const N = STORYBOARD.steps.length, filled = Math.round((rec.n / N) * 20); process.stdout.write(`Filming  ${"█".repeat(filled)}${"░".repeat(20 - filled)}  step ${rec.n} of ${N}\n`); void postEvent("filming", { n: rec.n, N }); frameStep = { n: rec.n, N }; void postFrame(); }
     if (step.action === "goto") {
       const navIssuedAt = t();
       // domcontentloaded, not load: a heavy site behind a proxy (the cloud
@@ -1210,6 +1237,7 @@ try {
 }
 
 clearInterval(sampler);
+clearInterval(framer);
 manifest.duration = t();
 void postEvent("finishing", { text: "Camera off. Saving the take…" });
 const video = page.video();