waygraph 0.10.6 → 0.10.8

package/dist/cli.js

@@ -1286,10 +1286,12 @@ function extractVerifyHighlights(block, resultTag) {
  * __wgNext no-ops once already consumed - but looked live when it wasn't).
  * Disables the button and mem-key textareas, and swaps whichever gate
  * text was showing (manual button or "Auto-advancing...") to "Running...".
+ * When autoCollapsePanel is set (QA video / autoplay), tuck the stepper
+ * away so ring captions + the app fill the frame - Dan: stepper + auto panels.
  */
-async function markStepRunning(page) {
+async function markStepRunning(page, opts) {
   await page
-    .evaluate(() => {
+    .evaluate(({ autoCollapsePanel }) => {
       const runBtn = document.getElementById("wg-run");
       if (runBtn) {
         runBtn.disabled = true;
@@ -1300,7 +1302,15 @@ async function markStepRunning(page) {
       document.querySelectorAll("#wg-panel textarea[data-key]").forEach((ta) => {
         ta.disabled = true;
       });
-    })
+      if (autoCollapsePanel) {
+        const panel = document.getElementById("wg-panel");
+        if (panel) {
+          panel.classList.add("wg-collapsed");
+          const toggle = panel.querySelector("[data-wg-toggle]");
+          if (toggle) toggle.textContent = "Show";
+        }
+      }
+    }, { autoCollapsePanel: !!(opts && opts.autoCollapsePanel) })
     .catch(() => {});
 }
 
@@ -1815,7 +1825,9 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
         }
       }
     }
-    await markStepRunning(page);
+    const recordingVideo = !!process.env.WAYGRAPH_VIDEO;
+    const autoCollapsePanel = recordingVideo || (await currentAutoplay());
+    await markStepRunning(page, { autoCollapsePanel });
     // NavBlock click-nav: label the upcoming Locator.click demo cursor as
     // "nav: <block>" so pia/demo watchers see cursor+pulse on click nav
     // (not only on regular Block clicks).
@@ -1997,6 +2009,18 @@ async function runChainedFlows(chainFlow, chainFlows, context, mem, page) {
   }
 }
 
+/** Parses WAYGRAPH_VIDEO_VIEWPORT / --video-viewport: "1920x1080" or "1920,1080". */
+function parseVideoViewport(raw) {
+  if (!raw || !raw.trim()) return null;
+  const m = raw.trim().match(/^(\d{3,5})[xX,](\d{3,5})$/);
+  if (!m) return null;
+  const width = Number(m[1]);
+  const height = Number(m[2]);
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  if (width < 320 || height < 240 || width > 7680 || height > 4320) return null;
+  return { width, height };
+}
+
 async function main() {
   const projectDir = process.argv[2];
   const spec = process.argv[3];
@@ -2170,6 +2194,13 @@ async function main() {
     videoDir = videoEnv === "1" ? join(projectDir, ".waygraph-videos") : videoEnv;
     mkdirSync(videoDir, { recursive: true });
   }
+  /** Fixed 16:9 capture for --video (demo QA and headless run). Step+video no longer maximizes. */
+  const DEFAULT_VIDEO_VIEWPORT = { width: 1920, height: 1080 };
+  const DEFAULT_RUN_VIDEO_VIEWPORT = { width: 1280, height: 720 };
+  const videoViewportParsed = parseVideoViewport(process.env.WAYGRAPH_VIDEO_VIEWPORT);
+  const fixedVideoViewport = videoDir
+    ? (videoViewportParsed ?? (step ? DEFAULT_VIDEO_VIEWPORT : DEFAULT_RUN_VIDEO_VIEWPORT))
+    : null;
   const engine = new Engine({ headless: !headed, slowMo });
   let result;
   // Non-interactive execution (no --step) runs the whole chain as one
@@ -2200,14 +2231,20 @@ async function main() {
     const browser = await chromium.launch({
       headless: !headed,
       slowMo,
-      args: step ? ["--start-maximized"] : [],
+      // Maximized only for interactive step mode WITHOUT a fixed video viewport -
+      // recording uses a locked 16:9 viewport so .webm has no gray letterboxing.
+      args: step && !fixedVideoViewport ? ["--start-maximized"] : [],
       ...(executablePath ? { executablePath } : {}),
     });
-    const contextOpts = step
-      ? { baseURL, viewport: null }
-      : { baseURL, viewport: { width: 1280, height: 720 } };
+    const contextOpts = fixedVideoViewport
+      ? { baseURL, viewport: fixedVideoViewport }
+      : step
+        ? { baseURL, viewport: null }
+        : { baseURL, viewport: { width: 1280, height: 720 } };
     if (videoDir) {
-      contextOpts.recordVideo = { dir: videoDir };
+      contextOpts.recordVideo = fixedVideoViewport
+        ? { dir: videoDir, size: fixedVideoViewport }
+        : { dir: videoDir };
     }
     const context = await browser.newContext(contextOpts);
     let pageForVideo = null;
@@ -2693,6 +2730,7 @@ function initCommand(projectName) {
         process.exit(1);
     }
     const targetDir = resolve(process.cwd(), projectName);
+    const pkgName = basename(targetDir);
     if (existsSync(targetDir)) {
         const entries = readdirSync(targetDir);
         if (entries.length > 0) {
@@ -2715,10 +2753,10 @@ function initCommand(projectName) {
         rmSync(gitignoreSrc);
     }
     const packageJsonPath = join(targetDir, "package.json");
-    writeFileSync(packageJsonPath, readFileSync(packageJsonPath, "utf-8").replaceAll("__PROJECT_NAME__", projectName));
-    console.log(`Scaffolded ${projectName}/`);
+    writeFileSync(packageJsonPath, readFileSync(packageJsonPath, "utf-8").replaceAll("__PROJECT_NAME__", pkgName));
+    console.log(`Scaffolded ${pkgName}/`);
     console.log("");
-    console.log(`  cd ${projectName}`);
+    console.log(`  cd ${relative(process.cwd(), targetDir) || pkgName}`);
     console.log("  npm install");
     console.log("  npx playwright install chromium");
     console.log("  npm test");
@@ -2847,6 +2885,11 @@ function parseRunFlags(argv) {
                 }
             }
         }
+        else if (a === "--video-viewport" || a.startsWith("--video-viewport=")) {
+            const t = takeFlagValue(argv, i, a, "--video-viewport");
+            out.videoViewport = t.value;
+            i = t.nextI;
+        }
         else if (a === "--blocks" || a.startsWith("--blocks=")) {
             if (a.startsWith("--blocks=")) {
                 out.blocks = a.slice("--blocks=".length);
@@ -2873,6 +2916,21 @@ function parseRunFlags(argv) {
     }
     return out;
 }
+/** Parses WAYGRAPH_VIDEO_VIEWPORT / --video-viewport: "1920x1080" or "1920,1080". */
+function parseVideoViewportFlag(raw) {
+    if (!raw?.trim())
+        return null;
+    const m = raw.trim().match(/^(\d{3,5})[xX,](\d{3,5})$/);
+    if (!m)
+        return null;
+    const width = Number(m[1]);
+    const height = Number(m[2]);
+    if (!Number.isFinite(width) || !Number.isFinite(height))
+        return null;
+    if (width < 320 || height < 240 || width > 7680 || height > 4320)
+        return null;
+    return { width, height };
+}
 /** Writes flag values into process.env so the chain child inherits them. Flags beat prior env. */
 function applyRunFlags(flags, opts) {
     if (flags.autoPlayVideo) {
@@ -2912,6 +2970,13 @@ function applyRunFlags(flags, opts) {
     if (flags.video !== undefined) {
         process.env.WAYGRAPH_VIDEO = flags.video || "1";
     }
+    if (flags.videoViewport !== undefined) {
+        if (!parseVideoViewportFlag(flags.videoViewport)) {
+            console.error('waygraph: --video-viewport must look like "1920x1080"');
+            process.exit(1);
+        }
+        process.env.WAYGRAPH_VIDEO_VIEWPORT = flags.videoViewport;
+    }
     if (flags.data !== undefined) {
         process.env.WAYGRAPH_DATA = flags.data;
     }
@@ -3071,11 +3136,13 @@ Primary (less is more):
                  --data '{...}'            Mem seed JSON (or inline flow({...}))
                  --auto-next               Auto-advance steps (alias: --autoplay)
                  --auto-play-video         QA: --auto-next + --video (+ step)
+                 --video-viewport WxH       Recording size (default demo: 1920x1080)
                  --title / --base-url
   waygraph run   [--blocks <flow|file|spec>]  Execute (no overlay unless --step)
                  --data '{...}'
                  --non-headless            Show browser
                  --video [dir]             Record .webm
+                 --video-viewport WxH       Recording size (default run: 1280x720)
 
 Also:
   waygraph list | nav | validate | check | graph | init <name>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",