demobite 1.14.0 → 1.15.0

package/launcher/index.mjs

@@ -333,9 +333,12 @@ if (arg === "listen") {
       const takeDir = path.join(process.cwd(), ".recorder", "takes", job.id);
       fs.mkdirSync(takeDir, { recursive: true });
       fs.writeFileSync(path.join(takeDir, "job.json"), JSON.stringify({ id: job.id, brief: job.brief, url: job.url ?? null, model, review_storyboard: job.review_storyboard !== false }, null, 2) + "\n");
-      const r = spawnSync("node", [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" } });
+      // Spawned async (1.14.1): a spawnSync here blocked the event loop, so the 5 s heartbeat never fired
+      // during a take and the rail called the machine offline mid-recording (founder 2026-10-15 17:39).
+      const child = (await import("node:child_process")).spawn("node", [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" } });
+      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)) await event(job.id, "failed", { message: r.status === 0 ? "The demo did not come through — try again" : `The take stopped (exit ${r.status})` });
+      if (st && !["ready", "failed", "cancelled"].includes(st.status)) await event(job.id, "failed", { message: code === 0 ? "The demo did not come through — try again" : `The take stopped (exit ${code})` });
       clearInterval(heartbeat);
       console.log(`  ■ Job ${job.id} ${st?.status ?? "ended"}.\n`);
       waitOn();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demobite",
-  "version": "1.14.0",
+  "version": "1.15.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/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/plan.mjs

@@ -108,6 +108,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");
@@ -158,7 +178,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 +192,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 +226,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") {