demobite 1.8.2 → 1.9.0

package/launcher/index.mjs

@@ -141,6 +141,19 @@ if (needed.length) {
   if (r.status === 0) ok("Playwright ready");
   else warn(`Install failed — run: npm install --prefix ~/.claude/skills/agentic-recorder ${needed.join(" ")}`);
 }
+// Playwright's OWN ffmpeg: recordVideo needs it even when the real Chrome is
+// the browser (founder's test 2026-10-14: the first take failed — the
+// launcher had checked the system ffmpeg, not the one Playwright's capture
+// uses, and with Chrome present `playwright install` never ran). Always.
+{
+  const pw = path.join(dest, "node_modules", "playwright", "cli.js");
+  const marker = path.join(dest, ".pw-ffmpeg-ready");
+  if (!fs.existsSync(marker) && fs.existsSync(pw)) {
+    const r = spawnSync("node", [pw, "install", "ffmpeg"], { stdio: "inherit", cwd: dest });
+    if (r.status === 0) { fs.writeFileSync(marker, new Date().toISOString()); ok("Playwright's video encoder ready"); }
+    else warn(`Playwright's ffmpeg install failed — run: node ${pw} install ffmpeg`);
+  } else if (fs.existsSync(marker)) ok("Playwright's video encoder ready");
+}
 // No Chrome on this machine: fetch Playwright's Chromium once so the first
 // take has a browser. Linux needs the shared libraries too (--with-deps).
 if (!haveChrome) {
@@ -165,6 +178,103 @@ if (!haveChrome) {
   if (r.status !== 0) warn("Recording will fail until ffmpeg and ffprobe both work. Re-run this command, or install them on your system.");
 }
 
+
+// ── LISTENING (founder 2026-10-14 night, "YES!!!!"): `npx demobite listen`.
+// The machine checks in to the app with the person's recorder key, pulls
+// the jobs the Capture tab created for this owner, runs the person's own
+// coding agent headless with the recorder skill, and posts every moment
+// back. One verb — record — for the owner only; never "remote control".
+// Closing the terminal ends it. `--base <url>` points at dev or a preview.
+if (arg === "listen") {
+  const argvRest = process.argv.slice(3);
+  const baseFlag = argvRest[argvRest.indexOf("--base") + 1];
+  let cfg = readCfg();
+  const base = (argvRest.includes("--base") && baseFlag ? baseFlag : cfg?.base || "https://app.demobites.com").replace(/\/+$/, "");
+  if (!cfg?.api_key || (argvRest.includes("--base") && cfg?.base && cfg.base.replace(/\/+$/, "") !== base)) {
+    console.log("\n  Connecting this project to your DemoBites account first…\n");
+    const r = spawnSync("node", [path.join(dest, "scripts", "login.mjs"), base], { stdio: "inherit", cwd: process.cwd() });
+    if (r.status !== 0) process.exit(r.status ?? 1);
+    cfg = readCfg();
+  }
+  if (!cfg?.api_key) { warn("Not connected — run: npx demobite login"); process.exit(1); }
+  const listenFile = path.join(process.cwd(), ".recorder", "listen.json");
+  let listen = {};
+  try { listen = JSON.parse(fs.readFileSync(listenFile, "utf8")); } catch { /* first time */ }
+  if (!listen.machine_id) {
+    listen.machine_id = (await import("node:crypto")).randomBytes(12).toString("hex");
+    fs.mkdirSync(path.dirname(listenFile), { recursive: true });
+    fs.writeFileSync(listenFile, JSON.stringify(listen, null, 2) + "\n");
+  }
+  const name = (argvRest[argvRest.indexOf("--name") + 1] && argvRest.includes("--name")) ? argvRest[argvRest.indexOf("--name") + 1] : os.hostname().replace(/\.local$/, "");
+  const agentBin = (() => { const r = spawnSync(process.platform === "win32" ? "where" : "which", ["claude"], { encoding: "utf8" }); return r.status === 0 ? r.stdout.trim().split("\n")[0] : null; })();
+  const readiness = () => {
+    let signins = [];
+    try { signins = Object.keys(JSON.parse(fs.readFileSync(path.join(process.cwd(), ".recorder", "signins.json"), "utf8")).origins || {}); } catch { /* none */ }
+    return { agent: agentBin ? "Claude Code" : null, chrome: haveChrome, recorder: pkg.version, signins, cwd: process.cwd(), platform: process.platform };
+  };
+  const api = async (body) => {
+    try {
+      const res = await fetch(`${base}/api/recorder/listen`, { method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${cfg.api_key}` }, body: JSON.stringify(body) });
+      if (res.status === 401) { console.error("\n  The recorder key was refused. Run: npx demobite login"); process.exit(1); }
+      return res.ok ? await res.json() : null;
+    } catch { return null; }
+  };
+  const event = (job_id, kind, payload) => api({ action: "event", job_id, kind, payload });
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+  console.log(`\n  Listening as "${name}" for ${cfg.workspace?.name ?? "your workspace"} on ${base.replace(/^https?:\/\//, "")}.`);
+  console.log(`  Ask for a demo in the app (Create → Agentic Capture). ${agentBin ? "Claude Code found." : "! Claude Code was not found on this machine — install it and sign in, it does the thinking."}`);
+  console.log("  Leave this terminal open; closing it stops the listening.\n");
+
+  const runJob = async (job) => {
+    console.log(`\n  ▶ Job ${job.id}: ${job.brief.slice(0, 100)}${job.brief.length > 100 ? "…" : ""}`);
+    if (!agentBin) { await event(job.id, "failed", { message: "Claude Code is not installed on this machine" }); return; }
+    await event(job.id, "started", { machine: name });
+    const prompt = [
+      "Film a demo with the agentic-recorder skill. Read ~/.claude/skills/agentic-recorder/SKILL.md first and follow it exactly, in LISTENING MODE (its section \"Listening mode\"): the person is watching in the DemoBites app, not here — never ask anything in this conversation; the scripts carry every question to the app and bring the answer back.",
+      `Brief: ${job.brief}`,
+      job.url ? `Address to start from: ${job.url}` : "Address: work it out from this project (the saved config, the codebase).",
+      `Show the storyboard before filming: ${job.review_storyboard ? "yes — run storyboard.mjs await and obey its answer" : "no — storyboard.mjs await returns film at once"}.`,
+    ].join("\n");
+    const child = (await import("node:child_process")).spawn(agentBin, ["-p", prompt, "--output-format", "stream-json", "--verbose", "--dangerously-skip-permissions"], {
+      cwd: process.cwd(),
+      env: { ...process.env, RECORDER_JOB: job.id, RECORDER_BASE: base, RECORDER_LISTEN: "1" },
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+    let buf = "";
+    child.stdout.on("data", (chunk) => {
+      buf += chunk.toString();
+      let nl;
+      while ((nl = buf.indexOf("\n")) >= 0) {
+        const line = buf.slice(0, nl); buf = buf.slice(nl + 1);
+        if (!line.trim()) continue;
+        try {
+          const m = JSON.parse(line);
+          if (m.type === "assistant") {
+            for (const c of m.message?.content ?? []) {
+              if (c.type === "text" && c.text?.trim()) { console.log(`  · ${c.text.trim().split("\n")[0].slice(0, 140)}`); void event(job.id, "agent", { text: c.text.trim().slice(0, 1200) }); }
+            }
+          }
+        } catch { /* not a JSON line */ }
+      }
+    });
+    child.stderr.on("data", (chunk) => { const t = chunk.toString().trim(); if (t) console.error(`  ! ${t.split("\n")[0].slice(0, 160)}`); });
+    const code = await new Promise((resolve) => child.on("close", resolve));
+    const st = await api({ action: "poll", job_id: job.id });
+    if (st && !["ready", "failed", "cancelled"].includes(st.status)) {
+      if (code === 0) await event(job.id, "note", { text: "The agent finished without a ready signal." });
+      await event(job.id, "failed", { message: code === 0 ? "The demo did not come through — try again" : `The agent stopped (exit ${code})` });
+    }
+    console.log(`  ■ Job ${job.id} ${st?.status ?? "ended"}.`);
+  };
+
+  for (;;) {
+    const r = await api({ action: "checkin", machine_id: listen.machine_id, name, readiness: readiness() });
+    if (r?.job) await runJob(r.job);
+    else await sleep(5000);
+  }
+}
+
 // ── 3. Subcommands ─────────────────────────────────────────────────────────
 if (arg === "login" || arg === "logout") {
   // `login <base>` forwards the base (dev, a preview) to login.mjs, which

package/package.json

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

package/scripts/record.mjs

@@ -12,6 +12,10 @@
 import { chromium } from "playwright";
 import fs from "node:fs";
 import path from "node:path";
+// 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).
+const postEvent = await import("./listen-event.mjs").then((m) => m.postEvent).catch(() => async () => null);
 
 const [, , outArg, storyArg] = process.argv;
 if (!outArg || !storyArg) {
@@ -775,7 +779,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`); }
+    { 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 }); }
     if (step.action === "goto") {
       const navIssuedAt = t();
       // domcontentloaded, not load: a heavy site behind a proxy (the cloud

package/skill/SKILL.md

@@ -24,6 +24,17 @@ The plugin is a product. Every line you say is read by the person who asked for
 - **Progress you can glance at.** While filming, relay record.mjs's `Filming ████░░ step n of N` line. While writing the storyboard, one dim line of what you are reading.
 - **Plain words only.** Never on screen: dry run, control, selector, resolves, beat, surface, profile, headed, Playwright, vocab, obstacle, revert, JSON, storyboard.json, manifest, take. Use: step, demo, page, window, sign in, film, deliver, Demos grid.
 - **Demo, never recording.** The thing the person gets is a demo; the act is filming.
+- **Findings go to us, never to the person.** Anything you learned about the recorder, the installer, the camera or DemoBites itself (a title that got cut, a merge rule, a missing encoder) is written to `.recorder/notes.md` in the project — dated, one paragraph each — and never said in the chat. The person asked for a demo, not a report on our product. (Founder 2026-10-14: "all this nonsense and all this explanation is not relevant.")
+
+## Listening mode — the person is in the app, not here
+
+When `RECORDER_JOB` is set (the take was asked for in the DemoBites app and `npx demobite listen` is running you), the person watches the Capture tab, not this conversation. Everything you would have said to them, the scripts carry to the app; everything you would have asked, the app answers:
+
+- **Never ask anything here.** No sign-in question, no "1 / 2 / 3", no "say yes". Nobody reads this conversation.
+- **The sign-in:** when `signin.mjs --check <url>` says "none", run `signin.mjs <url>` at once — it tells the app "sign in on your machine" and the window opens there.
+- **The storyboard:** after writing `storyboard.json`, run `node scripts/storyboard.mjs await <takeDir>/storyboard.json` instead of printing the box. It sends the box to the app and prints the person's answer: `film` → Phase 5; `change: <note>` → rewrite the storyboard, run `await` again; `cancelled` → stop, say nothing.
+- **Filming, delivery, ready:** `record.mjs`, `upload.mjs` and `status.mjs` post their moments by themselves. Run them exactly as in the phases; the app shows the bar and the editor link.
+- **Findings** still go to `.recorder/notes.md`.
 
 ## Phase 0: Auth gate, ALWAYS FIRST — announced, never silent
 
@@ -366,7 +377,7 @@ On the person's "1": say "Filming. About <m:ss>; I'll tell you when it lands." a
 
 ## Phase 6: Deliver into DemoBites
 
-When `upload.mjs` prints its last line, say: "✓ Delivered. \"<title>\" (<m:ss>) is landing in your Demos grid now: <base>/demos — watch it come in there. You can change any sentence, the voice and the zooms in the editor." When minutes ran out, relay upload.mjs's "Kept…" line as it is.
+When `upload.mjs` prints its last line, say ONE line: "✓ Delivered. \"<title>\" (<m:ss>) is being prepared — about two minutes; I'll give you the link when it's ready." Then run `node scripts/status.mjs <takeDir>` (it waits until the demo is completed and prints `Studio: <url>`). When it does, say exactly, and only: "✓ Ready — open it: <that url>". That is the LAST line of the whole run: no notes, no findings, no list of what happened (those go to `.recorder/notes.md`, How you talk). When minutes ran out, relay upload.mjs's "Kept…" line as it is, and stop.
 
 
 Send the TRIMMED CLEAN take into DemoBites. The studio owns the look: NO backdrop, NO rounded corners, NO shadow on the uploaded file. Everything (voice, zooms, look, intro, outro) becomes editable there.

package/skill/scripts/listen-event.mjs

@@ -0,0 +1,27 @@
+// AGENTIC CAPTURE — LISTENING (founder 2026-10-14): the recorder's moments,
+// posted to the app's mailbox when a job is running (`npx demobite listen`
+// sets RECORDER_JOB and RECORDER_BASE). Outside listening mode every call is
+// a no-op, so the terminal flow is untouched. Never throws: a lost event
+// never stops a take.
+import fs from "node:fs";
+import path from "node:path";
+
+const job = process.env.RECORDER_JOB || "";
+const base = (process.env.RECORDER_BASE || "").replace(/\/+$/, "");
+export const listening = Boolean(job && base);
+
+const apiKey = () => {
+  try { return JSON.parse(fs.readFileSync(path.resolve(process.cwd(), ".recorder", "config.json"), "utf8")).api_key || ""; } catch { return ""; }
+};
+const call = async (body) => {
+  const key = apiKey();
+  if (!listening || !key) return null;
+  try {
+    const res = await fetch(`${base}/api/recorder/listen`, { method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` }, body: JSON.stringify({ job_id: job, ...body }) });
+    return res.ok ? await res.json() : null;
+  } catch { return null; }
+};
+/** One moment of the job: started | signin_wait | signed_in | storyboard | filming | delivered | ready | failed | note | agent */
+export const postEvent = (kind, payload) => call({ action: "event", kind, payload });
+/** The job's status and the person's answer at a stopping point. */
+export const poll = () => call({ action: "poll" });

package/skill/scripts/signin.mjs

@@ -26,6 +26,7 @@
 // recorder's own health check, no human needed.
 import fs from "node:fs";
 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");
@@ -86,6 +87,7 @@ if (probe) {
 }
 
 console.log("⏳ Waiting for you — sign in in the Chrome window that just opened. Your hands only; nothing you type is seen.");
+await postEvent("signin_wait", { url });
 const started = Date.now();
 let lastCheck = "none";
 while (Date.now() - started < timeoutMs) {
@@ -94,6 +96,7 @@ while (Date.now() - started < timeoutMs) {
   try { here = new URL(page.url()); } catch { continue; }
   if (here.pathname !== startPath && !/sign-?in|log-?in|auth|sso|oauth|callback/i.test(here.pathname)) {
     console.log(`✓ Signed in. The session is saved for ${here.origin}; next time there is no question and no window.`);
+    await postEvent("signed_in", { origin: here.origin });
     try { const l = readLedger(); l.origins = { ...(l.origins ?? {}), [here.origin]: new Date().toISOString() }; fs.mkdirSync(path.dirname(ledgerPath), { recursive: true }); fs.writeFileSync(ledgerPath, JSON.stringify(l, null, 2) + "\n"); } catch { /* the session still lives in the profile */ }
     await ctx.close();
     process.exit(0);

package/skill/scripts/stage-wait.mjs

@@ -18,6 +18,10 @@
 // waiting: "minutes", resetsAt, dashboardUrl, stagingId }) and waits on the
 // same grid; the stage status reads "waiting" until minutes are back.
 
+// 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).
+const postEvent = await import("./listen-event.mjs").then((m) => m.postEvent).catch(() => async () => null);
 /** Where the person watches their takes: the Demos grid. `dashboardUrl` from
  * the server wins (relative or absolute), else <base>/demos. */
 export function gridUrl(base, dashboardUrl) {
@@ -106,6 +110,7 @@ export async function waitForDecision({ base, apiKey, stagingId, pageUrl, delive
       if (!announced) {
         process.stdout.write("\n");
         console.log(st.status === "delivered" ? `delivered: bite ${st.biteId} is being created` : `Approved — bite ${st.biteId} is being created`);
+        void postEvent("delivered", { biteId: st.biteId });
         announced = true;
         approvedBiteId = st.biteId;
         finalStudioUrl = st.studioUrl ? new URL(st.studioUrl, base).toString() : null;
@@ -146,6 +151,7 @@ export async function waitForDecision({ base, apiKey, stagingId, pageUrl, delive
     if (last.zooms === 0) console.error("WARNING: no camera shots landed.");
   }
   if (finalStudioUrl) console.log(`Studio: ${finalStudioUrl}`);
+  await postEvent("ready", { biteId: approvedBiteId, studioUrl: finalStudioUrl ?? null });
   return { exitCode: 0, status: "completed", biteId: approvedBiteId, studioUrl: finalStudioUrl };
 }
 

package/skill/scripts/storyboard.mjs

@@ -6,15 +6,19 @@
 //
 //   node scripts/storyboard.mjs print <storyboard.json>   the box: number, time, one line per step, the total
 //   node scripts/storyboard.mjs words <storyboard.json>   every step's narration, word for word (option 3)
+//   node scripts/storyboard.mjs await <storyboard.json>   LISTENING MODE: posts the box to the app and waits for the
+//                                                         person's answer there — prints "film" or "change: <note>"
+//                                                         (or "cancelled"); never asks anything in the chat
 //
 // Times are estimates from the steps themselves: a step lasts its dwell, or
 // as long as its narration takes to say (about 2.5 words a second), with a
 // floor per action. The real cut is fitted by DemoBites afterwards.
 import fs from "node:fs";
+import { listening, postEvent, poll } from "./listen-event.mjs";
 
 const [mode, file] = process.argv.slice(2);
-if (!mode || !file || !["print", "words"].includes(mode)) {
-  console.error("Usage: node scripts/storyboard.mjs print|words <storyboard.json>");
+if (!mode || !file || !["print", "words", "await"].includes(mode)) {
+  console.error("Usage: node scripts/storyboard.mjs print|words|await <storyboard.json>");
   process.exit(2);
 }
 const sb = JSON.parse(fs.readFileSync(file, "utf8"));
@@ -45,6 +49,33 @@ if (mode === "words") {
   process.exit(0);
 }
 
+if (mode === "await") {
+  // The box goes to the app; the answer comes back from the app. With the
+  // person's "show me the storyboard" box off, the app moves the job on at
+  // once and this prints "film" without waiting.
+  const boxOut = [];
+  const W2 = 76;
+  const cap2 = (t, n) => (t.length > n ? t.slice(0, n - 1) + "…" : t);
+  const head2 = `─ STORYBOARD · ${cap2(title, 40)} `; const tail2 = ` ${mmss(total)} ─`;
+  boxOut.push(`┌${head2}${"─".repeat(Math.max(1, W2 - head2.length - tail2.length))}${tail2}┐`); boxOut.push(`│ ${"".padEnd(W2 - 2)} │`);
+  rows.forEach((r, i) => boxOut.push(`│ ${`${String(i + 1).padStart(2)}  ${mmss(r.at)}  ${cap2(r.text + (r.pointed ? " — pointed at, not pressed" : ""), W2 - 14)}`.padEnd(W2 - 2)} │`));
+  boxOut.push(`│ ${"".padEnd(W2 - 2)} │`); boxOut.push(`└${"─".repeat(W2)}┘`);
+  if (!listening) { console.log(boxOut.join("\n")); console.log("film"); process.exit(0); }
+  await postEvent("storyboard", { box: boxOut.join("\n"), total: mmss(total), steps: rows.map((r, i) => ({ n: i + 1, at: mmss(r.at), text: r.text, pointed: r.pointed })) });
+  const started = Date.now();
+  while (Date.now() - started < 30 * 60 * 1000) {
+    const st = await poll();
+    if (st?.status === "cancelled" || st?.status === "failed") { console.log("cancelled"); process.exit(2); }
+    if (st && st.status !== "waiting_storyboard") {
+      const a = st.answer && typeof st.answer === "object" ? st.answer : null;
+      if (a?.action === "change") { console.log(`change: ${a.note ?? ""}`); process.exit(0); }
+      console.log("film"); process.exit(0);
+    }
+    await new Promise((r) => setTimeout(r, 3000));
+  }
+  console.log("cancelled"); process.exit(2);
+}
+
 const W = 76;
 const cap = (t, n) => (t.length > n ? t.slice(0, n - 1) + "…" : t);
 const head = `─ STORYBOARD · ${cap(title, 40)} `;