demobite 1.14.1 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demobite",
-  "version": "1.14.1",
+  "version": "1.16.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/skill/scripts/clock.mjs

@@ -0,0 +1,28 @@
+// THE CAMERA'S CLOCK (2026-10-15). What a storyboard step really costs on the camera, so the
+// planner's total is the take's total. Numbers from record.mjs: estimateSpeech = words / 2.6 + 0.4;
+// the hold is speech + 0.5 s breath measured from arrival; a click or hover spends ~1 s on cursor
+// flight and dwell before arrival; the first narrated beat carries STARTUP_LEAD_SLACK_S = 2.5;
+// the take closes on CLOSING_BEAT_MS = 2200. Keep the two in step.
+export const CLOSING_S = 2.2;
+const ms = (v, fallback) => (v == null ? fallback : v < 60 ? v * 1000 : v);
+const speech = (text) => { const n = String(text ?? "").trim().split(/\s+/).filter(Boolean).length; return n ? n / 2.6 + 0.4 + 0.5 : 0; };
+export const secondsOf = (s, firstNarrated) => {
+  const text = typeof s.narration === "string" ? s.narration : s.narration?.text ?? "";
+  const say = speech(text);
+  const slack = say && firstNarrated ? 2.5 : 0;
+  switch (s.action) {
+    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;
+    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;
+  }
+};
+export const estimateTake = (steps) => {
+  let first = true, total = CLOSING_S;
+  for (const s of steps ?? []) { total += secondsOf(s, first); if (s.narration) first = false; }
+  return total;
+};

package/skill/scripts/explore.mjs

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+// EXPLORE (the built-in agent, founder 2026-10-15: "the agent we're building does
+// a very short exploration if the brief isn't enough… the customer needs
+// nothing but identity"). Without the app's code, the planner knows only the
+// words on the starting page. This walks the live app for it: from the start
+// address it follows the nav links, tabs and menus whose words match what the
+// planner is looking for (the brief's nouns), two hops deep, and brings back
+// every screen it reached — address, title, headings, tabs, controls — with a
+// screenshot of the best matches. Headless, on the camera's profile (signed
+// in), no video, no window. Reversible clicks only: links, tabs, menu
+// openers; never a button that submits, creates, deletes or pays.
+//
+//   node scripts/explore.mjs <url> --for "integrations,settings,github" [--depth 2] [--out <dir>]
+//   prints one "· phrase" per screen (the app shows them live), then RESULT {json}
+import fs from "node:fs";
+import path from "node:path";
+
+const argv = process.argv.slice(2);
+const url = argv.find((a) => /^https?:\/\//.test(a));
+const forArg = argv[argv.indexOf("--for") + 1] || "";
+const depth = Math.min(3, Math.max(1, Number(argv[argv.indexOf("--depth") + 1]) || 2));
+const outDir = argv.includes("--out") ? argv[argv.indexOf("--out") + 1] : process.cwd();
+if (!url || !forArg) { console.error('Usage: node scripts/explore.mjs <url> --for "word,word" [--depth 2] [--out <dir>]'); process.exit(2); }
+const STOP = new Set(["the", "a", "an", "and", "or", "of", "to", "in", "on", "at", "for", "with", "page", "section", "tab", "go", "open", "show", "explain", "demo", "record", "then", "available", "there", "it", "its", "this", "that", "your", "our", "my", "how", "what", "all", "about", "from", "into"]);
+const stem = (w) => w.toLowerCase().replace(/[^a-z0-9]/g, "").replace(/(ings|ing|ies|es|s|ed)$/, "");
+const wants = [...new Set(forArg.split(/[,\s]+/).map(stem).filter((w) => w.length > 2 && !STOP.has(w)))];
+const say = (t) => console.log(`· ${t}`);
+const DANGER = /\b(delete|remove|pay|purchase|buy|subscribe|upgrade|publish|send|submit|save|create|add|invite|export|sign out|log out|logout|cancel|disconnect|revoke|reset|confirm)\b/i;
+
+const { chromium } = await import("playwright");
+const profileDir = process.env.RECORDER_PROFILE || path.resolve(process.cwd(), ".recorder", "profile");
+const launchOpts = { headless: true, viewport: { width: 1440, height: 900 }, args: ["--force-color-profile=srgb", "--disable-blink-features=AutomationControlled"], ignoreDefaultArgs: ["--enable-automation"] };
+let ctx;
+try { ctx = await chromium.launchPersistentContext(profileDir, { ...launchOpts, channel: "chrome" }); }
+catch { ctx = await chromium.launchPersistentContext(profileDir, launchOpts); }
+const page = ctx.pages()[0] ?? (await ctx.newPage());
+const origin = new URL(url).origin;
+
+// What is on this screen, and which of its controls could lead somewhere.
+const harvest = () => page.evaluate(() => {
+  const vis = (el) => { const r = el.getBoundingClientRect(); const cs = getComputedStyle(el); return r.width > 0 && r.height > 0 && cs.visibility !== "hidden" && cs.display !== "none"; };
+  const clean = (t) => (t || "").replace(/\s+/g, " ").trim();
+  const label = (el) => clean(el.innerText || el.getAttribute("aria-label") || el.getAttribute("title") || "");
+  const uniq = (xs) => { const seen = new Set(); return xs.filter((x) => { const k = JSON.stringify(x); if (!x || seen.has(k)) return false; seen.add(k); return true; }); };
+  const headings = uniq([...document.querySelectorAll("h1, h2, h3")].filter(vis).map((el) => clean(el.innerText)).filter((t) => t && t.length < 90));
+  const links = uniq([...document.querySelectorAll("a[href]")].filter(vis).map((el) => ({ kind: "link", text: label(el).slice(0, 60), href: el.href, tip: clean(el.closest("[title],[aria-label]")?.getAttribute("title") || el.closest("[aria-label]")?.getAttribute("aria-label") || "").slice(0, 60) })).filter((l) => (l.text || l.tip) && l.href.startsWith(location.origin) && !/^(mailto|tel):/.test(l.href)));
+  const tabs = uniq([...document.querySelectorAll("[role='tab'], [role='tablist'] button, [data-state] button[data-value], nav button, header button, aside button, button[aria-haspopup], button[aria-expanded]")].filter(vis).map((el) => ({ kind: el.getAttribute("role") === "tab" ? "tab" : "menu", text: label(el).slice(0, 60), id: el.id || el.getAttribute("data-value") || "" })).filter((t) => t.text));
+  const buttons = uniq([...document.querySelectorAll("button, [role='button']")].filter(vis).map((el) => label(el).slice(0, 60)).filter(Boolean)).slice(0, 40);
+  const fields = uniq([...document.querySelectorAll("input, textarea, select")].filter(vis).map((el) => clean(el.getAttribute("aria-label") || el.getAttribute("placeholder") || el.closest("label")?.innerText || "")).filter(Boolean)).slice(0, 20);
+  const dialog = clean(document.querySelector("[role='dialog'] h1, [role='dialog'] h2, [role='dialog'] h3")?.innerText || "");
+  return { title: document.title, url: location.href, headings, links, tabs, buttons, fields, dialog };
+});
+const score = (text) => { const s = stem(text); let n = 0; for (const w of wants) if (s.includes(w) || w.includes(s) && s.length > 3) n++; return n; };
+
+const screens = [];
+const seen = new Set();
+let shots = 0;
+const started = Date.now();
+const budgetMs = 75000;
+const settle = async () => { await page.waitForLoadState("load").catch(() => {}); await page.waitForTimeout(1800); };
+
+const record = async (how) => {
+  const h = await harvest();
+  const key = h.url.replace(/[#?].*$/, "") + (h.dialog ? `#${h.dialog}` : "") + (h.url.includes("?") ? `?${new URL(h.url).search.slice(1)}` : "");
+  if (seen.has(key)) return null;
+  seen.add(key);
+  const sc = score([h.title, ...h.headings, h.dialog].join(" ")) * 2 + h.tabs.reduce((n, t) => n + score(t.text), 0) + h.buttons.reduce((n, b) => n + score(b), 0);
+  const entry = { how, url: h.url, title: h.title, headings: h.headings.slice(0, 12), tabs: h.tabs.map((t) => t.text).slice(0, 20), buttons: h.buttons, fields: h.fields, dialog: h.dialog || undefined, nav: h.links.filter((l) => l.tip || l.text).slice(0, 40).map((l) => `${l.text || l.tip} → ${l.href.replace(origin, "")}`), score: sc, shot: null };
+  if (shots < 6) { const f = path.join(outDir, `explore-${++shots}.jpg`); await page.screenshot({ path: f, type: "jpeg", quality: 50 }).catch(() => {}); entry.shot = f; }
+  screens.push(entry);
+  say(`${how}: "${(h.dialog || h.headings[0] || h.title || h.url).slice(0, 70)}"${h.tabs.length ? ` · tabs: ${h.tabs.map((t) => t.text).slice(0, 6).join(", ")}` : ""}`);
+  return { h, entry };
+};
+
+const candidates = (h) => {
+  const out = [];
+  for (const l of h.links) { const s = score(`${l.text} ${l.tip} ${l.href.replace(origin, "")}`); if (s) out.push({ s, kind: "link", text: l.text || l.tip, href: l.href }); }
+  for (const t of h.tabs) { const s = score(t.text); if (s && !DANGER.test(t.text)) out.push({ s, kind: t.kind, text: t.text }); }
+  return out.sort((a, b) => b.s - a.s).slice(0, 4);
+};
+
+const visit = async (c, fromUrl) => {
+  if (c.kind === "link") {
+    await page.goto(c.href, { waitUntil: "load", timeout: 30000 }).catch(() => null);
+    await settle();
+    return record(`${c.text}`);
+  }
+  // A tab or a menu opener on the current page: click it by its text, stay on the page.
+  if (page.url() !== fromUrl) { await page.goto(fromUrl, { waitUntil: "load", timeout: 30000 }).catch(() => null); await settle(); }
+  const loc = page.locator(c.kind === "tab" ? `[role='tab']:has-text("${c.text.replace(/"/g, "")}")` : `button:has-text("${c.text.replace(/"/g, "")}")`).first();
+  const ok = await loc.click({ timeout: 5000 }).then(() => true).catch(() => false);
+  if (!ok) return null;
+  await page.waitForTimeout(1500);
+  const r = await record(`${c.text}`);
+  // A menu that opened: its links are candidates too, then close it.
+  if (c.kind === "menu" && r) { r.menu = true; }
+  return r;
+};
+
+try {
+  say(`Looking around ${new URL(url).host} for ${wants.join(", ")}…`);
+  await page.goto(url, { waitUntil: "load", timeout: 45000 });
+  await settle();
+  let frontier = [];
+  const root = await record("Start");
+  if (root) frontier.push({ ...root, d: 0 });
+  while (frontier.length && Date.now() - started < budgetMs && screens.length < 10) {
+    const cur = frontier.shift();
+    if (cur.d >= depth) continue;
+    for (const c of candidates(cur.h)) {
+      if (Date.now() - started > budgetMs || screens.length >= 10) break;
+      const r = await visit(c, cur.entry.url);
+      if (r) frontier.push({ ...r, d: cur.d + 1 });
+      if (r?.menu) await page.keyboard.press("Escape").catch(() => {});
+    }
+  }
+  say(screens.length > 1 ? `Found ${screens.length - 1} screen${screens.length > 2 ? "s" : ""} beyond the start.` : "Nothing beyond the start page matched.");
+  screens.sort((a, b) => b.score - a.score);
+  console.log("RESULT " + JSON.stringify({ wants, screens }));
+} catch (e) {
+  console.error(String(e.message).split("\n")[0].slice(0, 160));
+  console.log("RESULT " + JSON.stringify({ wants, screens, error: String(e.message).slice(0, 120) }));
+}
+await ctx.close();

package/skill/scripts/manifest.mjs

@@ -347,6 +347,10 @@ const wire = {
   frame: { width: FW, height: FH },
   // BROWSER HEADER (2026-09-16): true by default; DemoBites adds the dark macOS bar on top at ingest. A workspace rule "No browser header" sets it false.
   ...(typeof man.browserHeader === "boolean" ? { browserHeader: man.browserHeader } : {}),
+  // APPROVED STORY (founder 2026-10-15, bite 1228: "the storyteller is blabbing"): the lines came from the
+  // director and the person said Film it to THESE lines. DemoBites keeps them verbatim and never writes
+  // a filler into a silence or a longer line into a longer beat.
+  narration_approved: true,
   duration,
   steps,
   camera,

package/skill/scripts/plan.mjs

@@ -18,6 +18,7 @@
 // reads is logged on the take (<takeDir>/code-shared.log) so the person can
 // see exactly what left the machine.
 import fs from "node:fs";
+import { estimateTake } from "./clock.mjs";
 import path from "node:path";
 import { spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
@@ -108,6 +109,26 @@ const screenshot = (url) => {
     { type: "image", source: { type: "base64", media_type: "image/jpeg", data: fs.readFileSync(file).toString("base64") } },
   ];
 };
+let explored = 0;
+const explore = (from, lookingFor, depth) => {
+  if (!/^https?:\/\//.test(String(from))) return [{ type: "text", text: "from (a url) required" }];
+  const words = Array.isArray(lookingFor) ? lookingFor.join(",") : String(lookingFor || "");
+  if (!words.trim()) return [{ type: "text", text: "looking_for required" }];
+  if (++explored > 3) return [{ type: "text", text: "No more exploring for this storyboard; write it from what you saw." }];
+  const exDir = path.join(dir, `explore-${explored}`);
+  fs.mkdirSync(exDir, { recursive: true });
+  const child = spawnSync("node", [script("explore.mjs"), from, "--for", words, "--depth", String(Math.min(3, Math.max(1, Number(depth) || 2))), "--out", exDir], { cwd: process.cwd(), encoding: "utf8", env: process.env, maxBuffer: 64 * 1024 * 1024 });
+  const lines = (child.stdout || "").split("\n");
+  for (const l of lines) if (l.startsWith("· ")) say(l.slice(2));
+  const last = lines.filter((l) => l.startsWith("RESULT ")).pop();
+  let res = null; try { res = JSON.parse(last.slice(7)); } catch { /* none */ }
+  if (!res) return [{ type: "text", text: `Exploring failed: ${(child.stderr || "").trim().split("\n").pop() || "no result"}` }];
+  const content = [];
+  const text = res.screens.map((sc, i) => `## Screen ${i + 1}: ${sc.title || sc.url}\n${sc.url}\nreached by: ${sc.how}${sc.dialog ? `\ndialog: ${sc.dialog}` : ""}\nheadings: ${sc.headings.join(" · ") || "(none)"}\ntabs: ${sc.tabs.join(" · ") || "(none)"}\nbuttons: ${sc.buttons.join(" · ") || "(none)"}${sc.fields.length ? `\nfields: ${sc.fields.join(" · ")}` : ""}\nnav: ${sc.nav.slice(0, 25).join(" · ") || "(none)"}`).join("\n\n");
+  content.push({ type: "text", text: `${text || "(no screens)"}${res.error ? `\n\n(stopped early: ${res.error})` : ""}\n\nScreenshots follow for the best matches, in that order.` });
+  for (const sc of res.screens.slice(0, 3)) if (sc.shot && fs.existsSync(sc.shot)) content.push({ type: "image", source: { type: "base64", media_type: "image/jpeg", data: fs.readFileSync(sc.shot).toString("base64") } });
+  return content;
+};
 const probe = (sb) => {
   if (!sb || !Array.isArray(sb.steps)) return "storyboard with steps[] required";
   const file = path.join(dir, "probe.json");
@@ -130,6 +151,10 @@ const validate = (sb) => {
     if (s.frame !== undefined && s.frame !== "close" && s.frame !== "wide") return `${at}: frame must be close or wide`;
   }
   if (sb.steps.length > 14) return "more than 14 steps; 6 to 10 is the law";
+  // THE CAMERA'S CLOCK (founder 2026-10-15): the take may not run past 45 s. The estimate is the
+  // camera's own (clock.mjs); the model gets the number and the cure.
+  const est = estimateTake(sb.steps);
+  if (est > 45) return `the camera would run this take about ${Math.round(est)} s; the law is 30 to 45. Cut words (6 to 11 a line) or steps (5 to 8 narrated); never pad, never add.`;
   return null;
 };
 
@@ -158,7 +183,7 @@ const prune = (messages) => {
       if (b.type !== "tool_result" || !Array.isArray(b.content)) continue;
       for (let k = 0; k < b.content.length; k++) {
         if (b.content[k].type !== "image") continue;
-        if (++seen > 2) b.content[k] = { type: "text", text: "(a screenshot shown earlier)" };
+        if (++seen > 4) b.content[k] = { type: "text", text: "(a screenshot shown earlier)" };
       }
     }
   }
@@ -172,7 +197,7 @@ const firstMessage = () => {
     `## The app's words on the starting screen\n${vocab}`,
     `## Workspace rules (version ${rules.version || 0})\n${rules.lines?.length ? rules.lines.map((l, i) => `${i + 1}. ${l}`).join("\n") : "(none)"}`,
     `## The project's files${codeOn ? " (this machine sits in the app's repository; read_file is on)" : " (no code here)"}\n${listFiles()}`,
-    `Write the storyboard, probe it, fix it, probe again, then submit_storyboard.`,
+    codeOn ? `Write the storyboard, probe it, fix it, probe again, then submit_storyboard.` : `There is no code: explore first (explore from the starting address, looking_for = the brief's nouns), then write the storyboard, probe it, fix it, probe again, then submit_storyboard.`,
   ];
   return parts.join("\n\n");
 };
@@ -206,6 +231,7 @@ const plan = async () => {
         if (u.name === "list_files") out = listFiles();
         else if (u.name === "read_file") out = readFile(input.path);
         else if (u.name === "harvest_words") { console.log(`  harvesting ${(input.urls || []).join(", ")}`); out = harvest(input.urls); }
+        else if (u.name === "explore") out = explore(input.from, input.looking_for, input.depth);
         else if (u.name === "screenshot") { console.log(`  looking at ${input.url}`); out = screenshot(input.url); }
         else if (u.name === "probe") { console.log("  dry run…"); out = probe(input.storyboard); }
         else if (u.name === "submit_storyboard") {

package/skill/scripts/storyboard.mjs

@@ -23,11 +23,13 @@ if (!mode || !file || !["print", "words", "await"].includes(mode)) {
 }
 const sb = JSON.parse(fs.readFileSync(file, "utf8"));
 const steps = Array.isArray(sb.steps) ? sb.steps : [];
-const FLOOR = { goto: 1.5, settle: 2, click: 2.5, hover: 2, type: 3, scroll: 2, expect: 1 };
-const secondsOf = (s) => {
-  const words = String(s.narration ?? "").trim().split(/\s+/).filter(Boolean).length;
-  return Math.max(typeof s.dwell === "number" ? s.dwell : 0, words / 2.5, FLOOR[s.action] ?? 2);
-};
+// THE CAMERA'S CLOCK (founder 2026-10-15, bite 1228 said 0:36 and ran 0:51): a beat is held until its
+// line would have finished (words / 2.6 s + 0.4 s, record.mjs estimateSpeech) plus half a second of
+// breath; a click or hover adds about a second of cursor flight and dwell; the first narrated settle
+// carries 2.5 s of startup slack; the take closes on a 2.2 s beat. Same numbers as record.mjs.
+import { secondsOf as cameraSeconds, CLOSING_S } from "./clock.mjs";
+let firstNarrated = true;
+const secondsOf = (s) => { const r = cameraSeconds(s, firstNarrated); if (s.narration) firstNarrated = false; return r; };
 const mmss = (sec) => `${Math.floor(sec / 60)}:${String(Math.round(sec % 60)).padStart(2, "0")}`;
 // A row per step that says or shows something; silent plumbing (a bare goto,
 // an expect) rides inside the previous row's time.
@@ -39,7 +41,7 @@ for (const s of steps) {
   if (text && !(s.action === "expect" && !s.narration)) rows.push({ at: clock, text: text.replace(/\s+/g, " "), pointed: s.pointed === true, step: s });
   clock += dur;
 }
-const total = clock;
+const total = clock + CLOSING_S;
 const title = (sb.title ?? sb.app ?? "Demo").toString().trim();
 
 if (mode === "words") {