demobites 1.26.0 → 1.28.0

package/launcher/index.mjs

@@ -509,11 +509,41 @@ if (arg === "listen") {
   })();
   writeJson(LOCK, { pid: process.pid, since: new Date().toISOString(), cwd: process.cwd(), service: SERVICE, repo });
   const noteState = (extra) => writeJson(STATE, { at: new Date().toISOString(), machine_id: listen.machine_id, name, base, workspace: cfg.workspace?.name ?? null, ...extra });
+  // PERSONAS (1.27.0, founder 2026-10-17: "the same domain, but three different users sign in, so three tabs"):
+  // a tab's jobs run in the tab's own Chrome profile, seeded once from the machine's profile (so what was
+  // signed in stays), with its own ledger. The server names the profile on the job ("t12"); none = the machine's.
+  const SKIP_IN_PROFILE = /^(Singleton|lockfile$|.*Cache$|Crashpad$|BrowserMetrics|Safe Browsing|component_crx_cache|extensions_crx_cache)/i;
+  const rec = () => path.join(process.cwd(), ".recorder");
+  const profileFor = (job) => {
+    const key = typeof job?.profile === "string" && /^[a-z0-9_-]{1,40}$/i.test(job.profile) ? job.profile : null;
+    if (!key) return {};
+    const dir = path.join(rec(), "profiles", key);
+    const ledger = path.join(rec(), "sessions", `${key}.json`);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+      const base = path.join(rec(), "profile");
+      if (fs.existsSync(base)) { try { fs.cpSync(base, dir, { recursive: true, force: true, filter: (src) => !SKIP_IN_PROFILE.test(path.basename(src)) }); } catch (e) { console.log(`  ! profile seed: ${e.message}`); } }
+      fs.mkdirSync(path.dirname(ledger), { recursive: true });
+      if (!fs.existsSync(ledger)) { try { fs.copyFileSync(path.join(rec(), "signins.json"), ledger); } catch { fs.writeFileSync(ledger, JSON.stringify({ origins: {} }, null, 2) + "\n"); } }
+      console.log(`  · a profile of its own for this tab (${key}), seeded from the machine's`);
+    }
+    return { RECORDER_PROFILE: dir, RECORDER_LEDGER: ledger };
+  };
   const readiness = () => {
     let signins = [], whos = {};
     try { const l = JSON.parse(fs.readFileSync(path.join(process.cwd(), ".recorder", "signins.json"), "utf8")); signins = Object.keys(l.origins || {}); whos = l.who && typeof l.who === "object" ? l.who : {}; } catch { /* none */ }
+    // Every session on this machine, by profile: the machine's own, then each tab's.
+    const sessions = [];
+    for (const o of signins) sessions.push({ profile: "default", origin: o, who: whos[o] ?? null });
+    try {
+      const dir = path.join(process.cwd(), ".recorder", "sessions");
+      for (const f of fs.existsSync(dir) ? fs.readdirSync(dir) : []) {
+        if (!f.endsWith(".json")) continue;
+        try { const l = JSON.parse(fs.readFileSync(path.join(dir, f), "utf8")); const key = f.slice(0, -5); for (const o of Object.keys(l.origins || {})) sessions.push({ profile: key, origin: o, who: l.who?.[o] ?? null }); } catch { /* skip */ }
+      }
+    } catch { /* none */ }
     const repos = Object.entries(readJson(reposFile(process.cwd())) ?? {}).filter(([, v]) => v && typeof v.folder === "string" && fs.existsSync(v.folder)).map(([site, v]) => ({ site, folder: v.folder, repo: v.repo ?? null }));
-    return { ...agentInfo, chrome: haveChrome, recorder: pkg.version, signins, whos, cwd: process.cwd(), platform: process.platform, repo, repos };
+    return { ...agentInfo, chrome: haveChrome, recorder: pkg.version, signins, whos, sessions, cwd: process.cwd(), platform: process.platform, repo, repos };
   };
   // The code bound to a job's site (1.22.0): the planner reads there.
   const codeFor = (url) => { try { const site = siteOf(new URL(url).hostname); const b = (readJson(reposFile(process.cwd())) ?? {})[site]; return b && fs.existsSync(b.folder) ? { site, ...b } : null; } catch { return null; } };
@@ -624,7 +654,7 @@ if (arg === "listen") {
     // Alive while the person signs in (a window can wait minutes): the heartbeat, or the rail calls this machine offline.
     const heartbeat = setInterval(() => { void api({ action: "checkin", machine_id: listen.machine_id, name, readiness: readiness(), busy: true }); }, 5000);
     const { spawn } = await import("node:child_process");
-    const child = spawn(process.execPath, [script, job.url], { cwd: process.cwd(), env: { ...process.env, RECORDER_JOB: job.id, RECORDER_BASE: base, RECORDER_LISTEN: "1" }, stdio: ["ignore", "pipe", "pipe"], detached: process.platform !== "win32" });
+    const child = spawn(process.execPath, [script, job.url, ...(job.fresh && !isLook && !isOut ? ["--fresh"] : [])], { cwd: process.cwd(), env: { ...process.env, RECORDER_JOB: job.id, RECORDER_BASE: base, RECORDER_LISTEN: "1", ...profileFor(job) }, stdio: ["ignore", "pipe", "pipe"], detached: process.platform !== "win32" });
     track(child);
     let verdict = null;
     let buf = "";
@@ -664,7 +694,7 @@ if (arg === "listen") {
     await event(job.id, "started", { machine: name });
     await event(job.id, "ready", { disconnected: true, machine: name });
     const rec = path.join(process.cwd(), ".recorder");
-    for (const f of ["profile", "signins.json", "config.json", "listen.json"]) fs.rmSync(path.join(rec, f), { recursive: true, force: true });
+    for (const f of ["profile", "profiles", "sessions", "signins.json", "config.json", "listen.json"]) fs.rmSync(path.join(rec, f), { recursive: true, force: true });
     noteState({ busy: false, job: null, last_error: null, disconnected: true });
     console.log(`  ○ Disconnected. The sign-ins and the key are gone from this machine; the login service is removed.`);
     if (SERVICE) removeService(); // bootout ends this process; the handlers below clear the lock
@@ -705,7 +735,7 @@ if (arg === "listen") {
       // during a take and the rail called the machine offline mid-recording (founder 2026-10-15 17:39).
       const bound = job.url ? codeFor(job.url) : null;
       if (bound) console.log(`  Code: ${bound.repo ?? bound.site} (${bound.folder.replace(os.homedir(), "~")})`);
-      const child = (await import("node:child_process")).spawn(process.execPath, [path.join(dest, "scripts", "plan.mjs"), takeDir], { cwd: process.cwd(), stdio: "inherit", env: { ...process.env, RECORDER_JOB: job.id, RECORDER_BASE: base, RECORDER_LISTEN: "1", ...(bound ? { DEMOBITES_CODE_DIR: bound.folder } : {}) }, detached: process.platform !== "win32" });
+      const child = (await import("node:child_process")).spawn(process.execPath, [path.join(dest, "scripts", "plan.mjs"), takeDir], { cwd: process.cwd(), stdio: "inherit", env: { ...process.env, RECORDER_JOB: job.id, RECORDER_BASE: base, RECORDER_LISTEN: "1", ...(bound ? { DEMOBITES_CODE_DIR: bound.folder } : {}), ...profileFor(job) }, detached: process.platform !== "win32" });
       track(child);
       const code = await new Promise((resolve) => child.on("close", resolve));
       const st = await api({ action: "poll", job_id: job.id });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demobites",
-  "version": "1.26.0",
+  "version": "1.28.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).
@@ -385,14 +387,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
@@ -836,6 +888,7 @@ try {
           if (painted) break;
           await page.waitForTimeout(200);
         }
+        await settledPicture(6000, "navigation");
         await page.waitForTimeout(350);
         rec.nav = { from: navIssuedAt, to: t() };
       }
@@ -871,6 +924,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 +1127,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(5000, "landing"); }
         if (step.reveals !== false && !stepWide) {
           const opened = await revealedBox(step);
           if (opened) {
@@ -1169,6 +1223,7 @@ try {
         await page.waitForLoadState("domcontentloaded", { timeout: 30000 }).catch(() => {});
         if (page.url() !== urlBefore) {
           await page.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
+          await settledPicture(5000, "landing");
           await ensureCursor();
           await applyHideCss();
           await page.evaluate(([a, b]) => window.__recSetCursor?.(a, b), [x, y]);

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/look.mjs

@@ -20,7 +20,7 @@ const host = target.host;
 say(`Knocking on ${host}…`);
 
 let ledger = {};
-try { ledger = JSON.parse(fs.readFileSync(path.resolve(process.cwd(), ".recorder", "signins.json"), "utf8")).origins ?? {}; } catch { /* none yet */ }
+try { ledger = JSON.parse(fs.readFileSync(process.env.RECORDER_LEDGER ? path.resolve(process.env.RECORDER_LEDGER) : path.resolve(process.cwd(), ".recorder", "signins.json"), "utf8")).origins ?? {}; } catch { /* none yet */ }
 
 const { chromium } = await import("playwright");
 const profileDir = process.env.RECORDER_PROFILE || path.resolve(process.cwd(), ".recorder", "profile");

package/skill/scripts/signin.mjs

@@ -29,7 +29,9 @@ import path from "node:path";
 import { postEvent } from "./listen-event.mjs";
 
 const argv = process.argv.slice(2);
-const ledgerPath = path.resolve(process.cwd(), ".recorder", "signins.json");
+// PERSONAS (1.27.0, founder 2026-10-17: "three different users sign in, three tabs"): a tab has its own profile
+// and its own ledger (RECORDER_PROFILE / RECORDER_LEDGER from the listener); the defaults are the machine's.
+const ledgerPath = process.env.RECORDER_LEDGER ? path.resolve(process.env.RECORDER_LEDGER) : path.resolve(process.cwd(), ".recorder", "signins.json");
 const readLedger = () => { try { return JSON.parse(fs.readFileSync(ledgerPath, "utf8")); } catch { return { origins: {} }; } };
 if (argv[0] === "--check") {
   let origin; try { origin = new URL(argv[1]).origin; } catch { console.error("Usage: node scripts/signin.mjs --check <url>"); process.exit(2); }
@@ -41,6 +43,8 @@ const { chromium } = await import("playwright"); // after --check, which needs n
 const url = argv.find((a) => !a.startsWith("--"));
 if (!url) { console.error("Usage: node scripts/signin.mjs <login url> [--timeout <ms>] [--probe]"); process.exit(2); }
 const probe = argv.includes("--probe");
+// --fresh: sign in as a different user — the site's cookies in THIS profile go first, so the wall shows.
+const fresh = argv.includes("--fresh");
 const timeoutMs = Number(argv[argv.indexOf("--timeout") + 1]) || 10 * 60 * 1000;
 const profileDir = process.env.RECORDER_PROFILE || path.resolve(process.cwd(), ".recorder", "profile");
 
@@ -60,6 +64,15 @@ try {
   ctx = await chromium.launchPersistentContext(profileDir, launchOpts);
 }
 const page = ctx.pages()[0] ?? (await ctx.newPage());
+if (fresh) {
+  try {
+    const host = new URL(url).hostname;
+    const site = host.split(".").slice(-2).join(".");
+    await ctx.clearCookies({ domain: new RegExp(`(^|\\.)${site.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`, "i") });
+    try { const l = readLedger(); for (const o of Object.keys(l.origins ?? {})) { try { if (new URL(o).hostname.endsWith(site)) { delete l.origins[o]; if (l.who) delete l.who[o]; } } catch { /* skip */ } } fs.writeFileSync(ledgerPath, JSON.stringify(l, null, 2) + "\n"); } catch { /* fine */ }
+    console.log(`· Forgot ${site} in this tab's profile; sign in as the other user.`);
+  } catch { /* the wall may still show */ }
+}
 await page.goto(url, { waitUntil: "domcontentloaded" });
 const startPath = new URL(page.url()).pathname;
 

package/skill/scripts/signout.mjs

@@ -32,7 +32,7 @@ export const siteOf = (hostname) => {
 const site = siteOf(target.hostname);
 const ofSite = (hostname) => { const h = String(hostname).replace(/^\./, "").toLowerCase(); return h === site || h.endsWith("." + site); };
 
-const ledgerPath = path.resolve(process.cwd(), ".recorder", "signins.json");
+const ledgerPath = process.env.RECORDER_LEDGER ? path.resolve(process.env.RECORDER_LEDGER) : path.resolve(process.cwd(), ".recorder", "signins.json");
 let ledger = { origins: {} };
 try { ledger = JSON.parse(fs.readFileSync(ledgerPath, "utf8")); } catch { /* none */ }
 const origins = Object.keys(ledger.origins ?? {}).filter((o) => { try { return ofSite(new URL(o).hostname); } catch { return false; } });