waygraph 0.15.47 → 0.15.50

package/dist/runner/device-stage.js

@@ -242,6 +242,21 @@ export async function applyDeviceToPage(page, device, sync) {
   } catch {
     from = null;
   }
+  // Non-headless (no --video) used to literally resize the real OS browser window/viewport to
+  // each device's pixel size - a real, confirmed complaint: it didn't look like the same animated
+  // device-shell bezel the --video path already has, just a plain resize. Both now use the exact
+  // same applyVideoDeviceStage bezel technique - the "stage" (the fixed outer viewport the shell is
+  // centered within) is the recordVideo canvas size when recording, or the window's own size at
+  // the FIRST device switch when not (captured once, persisted on the page - the window itself is
+  // only really resized that one time, to establish a stable stage; every device switch after that
+  // paints the animated shell inside it instead of resizing the window again).
+  let establishingHeadedStage = false;
+  if (!videoStage && !page.__wgHeadedStage) {
+    page.__wgHeadedStage =
+      from && from.width > 0 && from.height > 0 ? { width: from.width, height: from.height } : { width: 1280, height: 720 };
+    establishingHeadedStage = true;
+  }
+  const stage = videoStage || page.__wgHeadedStage;
   const announce = mode === "set" || mode === "clear";
   const toDesktop =
     mode === "clear" || (d.preset === "desktop" && !d.touchMode);
@@ -275,13 +290,18 @@ export async function applyDeviceToPage(page, device, sync) {
   page.__wgDeviceOrient = nextOrient;
   page.__wgDevicePreset = toDesktop ? "desktop" : d.preset || "";
 
-  if (videoStage) {
-    // Lock Playwright viewport to the recordVideo size so frames fill the
-    // .webm; center the device shell inside (OS window centering alone does not).
-    // Do NOT fitWindow to the device size - that shrinks the viewport below the
-    // recordVideo canvas and Playwright pads the .webm with grey (top-left bias).
+  if (stage) {
+    // Lock the Playwright viewport to the stage size so frames/window fill it; center the device
+    // shell inside (OS window centering alone does not). Do NOT fitWindow to the device size -
+    // that shrinks the viewport below the stage and (when recording) pads the .webm with grey
+    // (top-left bias). Headed-without-video reuses this exact technique (see `stage`'s own
+    // comment above) - the real OS window is only ever resized once, right here, to establish the
+    // stage itself; every device switch after that paints the animated shell inside it instead.
+    if (!videoStage && establishingHeadedStage) {
+      await fitWindowToDeviceViewport(page, stage, { maximize: false }).catch(() => {});
+    }
     try {
-      await realSet(videoStage);
+      await realSet(stage);
     } catch {
       /* ignore */
     }
@@ -290,22 +310,22 @@ export async function applyDeviceToPage(page, device, sync) {
       // Zoom already cleared above. Full-bleed desktop shell (no matte frame).
       // Shutter-out: soft rounded -> radius 0, then flat edge-to-edge.
       const desk = {
-        width: videoStage.width,
-        height: videoStage.height,
+        width: stage.width,
+        height: stage.height,
       };
       page.__wgDeviceShell = { ...desk };
-      await applyVideoDeviceStage(page, desk, videoStage, {
+      await applyVideoDeviceStage(page, desk, stage, {
         clear: false,
         shutterOut: true,
         desktopFlat: true,
       });
       try {
-        await realSet(videoStage);
+        await realSet(stage);
       } catch {
         /* ignore */
       }
     } else {
-      // Lerp shell size when switching mobile <-> tablet mid-video.
+      // Lerp shell size when switching mobile <-> tablet mid-run.
       const firstDevice = !page.__wgDeviceShell;
       if (
         announce &&
@@ -322,22 +342,22 @@ export async function applyDeviceToPage(page, device, sync) {
             width: Math.round(shellFrom.width + (target.width - shellFrom.width) * e),
             height: Math.round(shellFrom.height + (target.height - shellFrom.height) * e),
           };
-          await applyVideoDeviceStage(page, mid, videoStage, {
+          await applyVideoDeviceStage(page, mid, stage, {
             clear: false,
             enterIn: i === 1 && firstDevice,
           });
           if (i < steps) await new Promise((r) => setTimeout(r, stepMs));
         }
       } else {
-        await applyVideoDeviceStage(page, target, videoStage, {
+        await applyVideoDeviceStage(page, target, stage, {
           clear: false,
           enterIn: firstDevice || announce,
         });
       }
       page.__wgDeviceShell = { ...target };
-      // Re-assert stage size after any prior non-video fitWindow.
+      // Re-assert stage size after any prior fitWindow.
       try {
-        await realSet(videoStage);
+        await realSet(stage);
       } catch {
         /* ignore */
       }

package/dist/runner/inpage/banner.d.ts

@@ -8,6 +8,14 @@ export function installBanner(args: {
   todoPos?: string | undefined;
   envAutoplay?: boolean | undefined;
   todoDockUi?: unknown;
-  bannerUi?: { hidden?: boolean | undefined; collision?: boolean | undefined; pos?: string | undefined } | undefined;
+  bannerUi?:
+    | {
+        hidden?: boolean | undefined;
+        collision?: boolean | undefined;
+        pos?: string | undefined;
+        /** Title-change fade duration in ms (default 220); 0 = instant swap, no fade. */
+        captionFadeMs?: number | undefined;
+      }
+    | undefined;
   tag?: string | undefined;
 }): void;

package/dist/runner/inpage/banner.js

@@ -43,14 +43,31 @@ export function installBanner({ title, favicon, bannerPos, todoPos, envAutoplay,
             __wgAdd(banner);
           } else {
             // Fixture / episode title changes every step - update in place
-            // (banner is created once; do not leave the first step's text stuck).
+            // (banner is created once; do not leave the first step's text stuck). Fades out/in
+            // instead of an instant swap, so a title change reads as a deliberate beat, not a
+            // flicker - opt-out (or re-tune) via bannerUi.captionFadeMs, 0 = instant.
             let text = banner.querySelector(".wg-banner-text");
             if (!text) {
               text = document.createElement("span");
               text.className = "wg-banner-text";
               banner.appendChild(text);
             }
-            text.textContent = title;
+            if (text.textContent !== title) {
+              const fadeMs =
+                bannerUi && Number.isFinite(Number(bannerUi.captionFadeMs))
+                  ? Math.max(0, Number(bannerUi.captionFadeMs))
+                  : 220;
+              if (fadeMs <= 0 || !text.textContent) {
+                text.textContent = title;
+              } else {
+                text.style.transition = "opacity " + fadeMs + "ms ease";
+                text.style.opacity = "0";
+                setTimeout(() => {
+                  text.textContent = title;
+                  text.style.opacity = "1";
+                }, fadeMs);
+              }
+            }
           }
         }
         // Authored banner UX (StubCtx.titlePos / bannerUi): applied every step, wins over click/env.
@@ -107,6 +124,14 @@ export function installBanner({ title, favicon, bannerPos, todoPos, envAutoplay,
           if (b.dataset.home) b.dataset.pos = b.dataset.home;
           delete b.dataset.moved;
         };
+        // Dim the banner while a ring caption is the focus - same "auto opacity" effect the todo
+        // dock already has via __wgTodosSetBehind, extended to the banner so both floating chrome
+        // pieces step back the same way instead of only one of them fading.
+        window.__wgBannerSetBehind = (on) => {
+          const b = __wgById("wg-banner");
+          if (!b) return;
+          b.classList.toggle("wg-banner-behind", !!on);
+        };
         // Tab title/favicon: a real navigation resets document.title and any
         // <link rel="icon"> the new document brings, so re-check (not
         // re-append) on every call instead of a one-time flag.

package/dist/runner/inpage/caption.d.ts

@@ -0,0 +1,3 @@
+/** In-page installer (page.evaluate target) - see caption.js's own header. */
+export function showCaption(text: string): void;
+export function hideCaption(): void;

package/dist/runner/inpage/caption.js

@@ -0,0 +1,23 @@
+// In-page installer (page.evaluate target) - must stay self-contained, no module-scope closure.
+// Bottom narration caption - a white rounded card, not the dark zsign-ported scrim this started as
+// (see ui/css/caption.css's own header); narration-timeline/TTS sync not ported yet.
+export function showCaption(text) {
+  let bar = __wgById("wg-caption-bar");
+  if (!bar) {
+    bar = document.createElement("div");
+    bar.id = "wg-caption-bar";
+    bar.setAttribute("data-wg-ui", "1");
+    const span = document.createElement("span");
+    span.className = "wg-caption-text";
+    bar.appendChild(span);
+    __wgAdd(bar);
+  }
+  const span = bar.querySelector(".wg-caption-text");
+  span.textContent = text;
+  bar.classList.add("wg-in");
+}
+
+export function hideCaption() {
+  const bar = __wgById("wg-caption-bar");
+  if (bar) bar.classList.remove("wg-in");
+}

package/dist/runner/inpage/core.js

@@ -78,7 +78,25 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
           const lh = ringLabel.offsetHeight;
           let labelLeft = left;
           let labelTop = top + height + 8;
-          if (labelTop + lh > vh - margin) labelTop = top - lh - 8;
+          const aboveTop = top - lh - 8;
+          if (labelTop + lh > vh - margin) {
+            labelTop = aboveTop;
+          } else {
+            // Below the ringed box is often the NEXT form field in a tightly stacked list (e.g.
+            // saucedemo's checkout "First Name" / "Last Name" / "Zip" inputs) - a fixed +8px gap
+            // has no idea that's there and the label just sits on top of it. Sample a few points
+            // under the would-be label and flip above if any land on real page content (not our
+            // own ring/label elements, which are the only things expected there otherwise).
+            const probe = (x, y) => {
+              const el = document.elementFromPoint(x, y);
+              return el && el.id !== ringId && el.id !== labelId && !(el.closest && el.closest("#wg-root"));
+            };
+            const hitsPageContent =
+              probe(labelLeft + 2, labelTop + 2) ||
+              probe(labelLeft + lw - 2, labelTop + 2) ||
+              probe(labelLeft + 2, labelTop + lh - 2);
+            if (hitsPageContent && aboveTop >= margin) labelTop = aboveTop;
+          }
           if (labelTop < margin) labelTop = margin;
           if (labelLeft + lw > vw - margin) labelLeft = Math.max(margin, vw - margin - lw);
           if (labelLeft < margin) labelLeft = margin;
@@ -136,6 +154,7 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
           if (!box) return;
           window.__wgPaintRingAt("wg-ring", "wg-ring-label", box, label, tone, style);
           if (window.__wgTodosSetBehind) window.__wgTodosSetBehind(true);
+          if (window.__wgBannerSetBehind) window.__wgBannerSetBehind(true);
           if (window.__wgTodosAvoidRingCollision) window.__wgTodosAvoidRingCollision(box);
           if (window.__wgBannerAvoidRing) window.__wgBannerAvoidRing(box);
         };
@@ -188,22 +207,25 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
             break;
           }
         };
-        /** Live-follow a selector with rAF (accurate under device shell scale). */
+        /** Live-follow a resolved element with rAF (accurate under device shell scale). */
         window.__wgStopRingFollow = () => {
           if (window.__wgRingFollowRaf) {
             cancelAnimationFrame(window.__wgRingFollowRaf);
             window.__wgRingFollowRaf = 0;
           }
-          window.__wgRingFollowSel = "";
+          window.__wgRingFollowEl = null;
         };
-        window.__wgFollowRing = (sel, label, tone, style, focus) => {
+        // `el` is a real DOM element (a Playwright ElementHandle unwrapped by evaluate() - see
+        // rings.js's showRing), not a selector string - >> piercing / :has-text() are Playwright's
+        // own selector-engine syntax, which document.querySelector has no way to understand, so
+        // resolution happens once on the Node side via page.locator(), before this ever runs.
+        window.__wgFollowRing = (el, label, tone, style, focus) => {
           window.__wgStopRingFollow();
-          if (!sel) return;
-          window.__wgRingFollowSel = sel;
+          if (!el) return;
+          window.__wgRingFollowEl = el;
           const tick = () => {
-            if (window.__wgRingFollowSel !== sel) return;
-            const el = document.querySelector(sel);
-            if (!el) {
+            if (window.__wgRingFollowEl !== el) return;
+            if (!el.isConnected) {
               window.__wgRingFollowRaf = requestAnimationFrame(tick);
               return;
             }
@@ -244,6 +266,7 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
           if (ringLabel) ringLabel.style.opacity = "0";
           if (window.__wgClearFocus) window.__wgClearFocus();
           if (window.__wgTodosSetBehind) window.__wgTodosSetBehind(false);
+          if (window.__wgBannerSetBehind) window.__wgBannerSetBehind(false);
           if (window.__wgBannerRestore) window.__wgBannerRestore();
           window.__wgTodoCollisionLocked = false;
           __wgQA(".wg-todo-dock[data-tucked], #wg-todo-dock[data-tucked]").forEach((el) => {

package/dist/runner/inpage/network.d.ts

@@ -0,0 +1,15 @@
+/** In-page installer (page.evaluate target) - see network.js's own header. */
+export interface NetworkEntry {
+  method: string;
+  url: string;
+  status: number;
+  ok: boolean;
+  ms?: number | undefined;
+  reqHeaders?: Record<string, string> | undefined;
+  resHeaders?: Record<string, string> | undefined;
+  reqBody?: string | undefined;
+  resBody?: string | undefined;
+}
+export function addNetworkEntry(entry: NetworkEntry): void;
+export function setNetworkTabVisible(visible: boolean): void;
+export function clearNetworkLog(): void;

package/dist/runner/inpage/network.js

@@ -0,0 +1,217 @@
+// In-page installer (page.evaluate target) - must stay self-contained, no module-scope closure
+// (page.evaluate serializes ONLY the passed function's own source, not sibling top-level
+// functions in this file - every helper below is nested inside addNetworkEntry itself for exactly
+// that reason; a row's click handler still works after addNetworkEntry returns because it's a
+// closure over ITS OWN invocation's nested helpers, not a reference to module scope).
+//
+// A real network-tab overlay (`#wg-network-log`): the DevTools Network panel itself can't be
+// embedded (it lives in browser chrome, not reachable from automation), but every entry's real
+// data is - this renders that, on-page: method, url, status, and (click a row) request/response
+// headers + bodies + a "copy as cURL" command, a Postman-style inspector for both real page
+// traffic (installNetworkCapture, network-capture.js) and defineApiBlock's own page.request calls.
+export function addNetworkEntry(entry) {
+  // No-op outside a demo/pilot/auto run - ensureShadowRoot() (and its __wgById/__wgAdd globals)
+  // is never installed for a plain `waygraph run`/Playwright test, and this must not throw there.
+  if (typeof __wgById !== "function" || typeof __wgAdd !== "function") return;
+
+  function esc(s) {
+    const d = document.createElement("div");
+    d.textContent = String(s == null ? "" : s);
+    return d.innerHTML;
+  }
+
+  function methodClass(method) {
+    const m = (method || "GET").toUpperCase();
+    if (m === "GET") return "get";
+    if (m === "POST") return "post";
+    if (m === "PUT" || m === "PATCH") return "put";
+    if (m === "DELETE") return "delete";
+    return "other";
+  }
+
+  function toCurl(e) {
+    let cmd = "curl -X " + (e.method || "GET") + " '" + String(e.url || "").replace(/'/g, "'\\''") + "'";
+    const headers = e.reqHeaders || {};
+    for (const k of Object.keys(headers)) {
+      if (/^:/.test(k)) continue; // HTTP/2 pseudo-headers - not valid curl -H input
+      cmd += " \\\n  -H '" + k + ": " + String(headers[k]).replace(/'/g, "'\\''") + "'";
+    }
+    if (e.reqBody) cmd += " \\\n  --data '" + String(e.reqBody).replace(/'/g, "'\\''") + "'";
+    return cmd;
+  }
+
+  function renderHeaders(headers) {
+    const h = headers || {};
+    const keys = Object.keys(h);
+    if (keys.length === 0) return '<div class="wg-net-empty">(none)</div>';
+    return (
+      '<table class="wg-net-headers">' +
+      keys.map((k) => "<tr><td>" + esc(k) + "</td><td>" + esc(h[k]) + "</td></tr>").join("") +
+      "</table>"
+    );
+  }
+
+  function renderBody(body) {
+    if (body === undefined || body === null || body === "") return '<div class="wg-net-empty">(empty)</div>';
+    let text = body;
+    try {
+      text = JSON.stringify(JSON.parse(body), null, 2);
+    } catch {
+      /* not JSON - show raw */
+    }
+    return "<pre class=\"wg-net-body\">" + esc(String(text).slice(0, 4000)) + "</pre>";
+  }
+
+  function renderDetail(e) {
+    return (
+      '<div class="wg-net-detail-section"><h4>Request headers</h4>' +
+      renderHeaders(e.reqHeaders) +
+      "</div>" +
+      (e.reqBody
+        ? '<div class="wg-net-detail-section"><h4>Request body</h4>' + renderBody(e.reqBody) + "</div>"
+        : "") +
+      '<div class="wg-net-detail-section"><h4>Response headers</h4>' +
+      renderHeaders(e.resHeaders) +
+      "</div>" +
+      '<div class="wg-net-detail-section"><h4>Response body</h4>' +
+      renderBody(e.resBody) +
+      "</div>" +
+      '<div class="wg-net-detail-section"><h4>cURL</h4>' +
+      '<pre class="wg-net-body wg-net-curl">' +
+      esc(toCurl(e)) +
+      "</pre>" +
+      '<button type="button" class="wg-net-copy" data-copy="1">Copy as cURL</button></div>'
+    );
+  }
+
+  let panel = __wgById("wg-network-log");
+  if (!panel) {
+    panel = document.createElement("div");
+    panel.id = "wg-network-log";
+    panel.setAttribute("data-wg-ui", "1");
+    const header = document.createElement("div");
+    header.className = "wg-net-header";
+    const title = document.createElement("span");
+    title.className = "wg-net-title";
+    title.textContent = "Network";
+    const count = document.createElement("span");
+    count.className = "wg-net-count";
+    count.textContent = "0";
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "wg-net-collapse";
+    toggle.textContent = "−"; // minus
+    toggle.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      panel.classList.toggle("wg-net-collapsed");
+      toggle.textContent = panel.classList.contains("wg-net-collapsed") ? "+" : "−";
+    });
+    header.appendChild(title);
+    header.appendChild(count);
+    header.appendChild(toggle);
+    const list = document.createElement("ol");
+    list.className = "wg-net-list";
+    panel.appendChild(header);
+    panel.appendChild(list);
+    __wgAdd(panel);
+  }
+
+  const w = window;
+  w.__wgNetworkEntries = w.__wgNetworkEntries || [];
+  w.__wgNetworkEntries.push(entry);
+  while (w.__wgNetworkEntries.length > 30) w.__wgNetworkEntries.shift();
+
+  const list = panel.querySelector(".wg-net-list");
+  const row = document.createElement("li");
+  row.className = "wg-net-row";
+  row.dataset.ok = entry.ok ? "1" : "0";
+  let path = entry.url;
+  try {
+    const u = new URL(entry.url);
+    path = u.pathname + u.search;
+  } catch {
+    /* not an absolute URL - show as given */
+  }
+  row.innerHTML =
+    '<span class="wg-net-method wg-net-method-' +
+    methodClass(entry.method) +
+    '">' +
+    esc((entry.method || "GET").toUpperCase()) +
+    '</span><span class="wg-net-path" title="' +
+    esc(entry.url) +
+    '">' +
+    esc(path) +
+    '</span><span class="wg-net-status">' +
+    esc(entry.status) +
+    (entry.ms !== undefined ? '</span><span class="wg-net-ms">' + esc(entry.ms) + "ms</span>" : "</span>");
+  row.addEventListener("click", () => {
+    const open = row.classList.contains("wg-net-open");
+    __wgQA(".wg-net-row.wg-net-open").forEach((r) => {
+      r.classList.remove("wg-net-open");
+      const d = r.nextElementSibling;
+      if (d && d.classList && d.classList.contains("wg-net-detail")) d.remove();
+    });
+    if (open) return;
+    row.classList.add("wg-net-open");
+    const detail = document.createElement("li");
+    detail.className = "wg-net-detail";
+    detail.innerHTML = renderDetail(entry);
+    const copyBtn = detail.querySelector("[data-copy]");
+    if (copyBtn) {
+      copyBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        const text = toCurl(entry);
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).catch(() => {});
+        }
+        copyBtn.textContent = "Copied!";
+        setTimeout(() => {
+          copyBtn.textContent = "Copy as cURL";
+        }, 1200);
+      });
+    }
+    row.after(detail);
+  });
+  list.appendChild(row);
+  while (list.children.length > 30) list.removeChild(list.firstChild);
+  const countEl = panel.querySelector(".wg-net-count");
+  if (countEl) countEl.textContent = String(w.__wgNetworkEntries.length);
+  // Always captured, only shown when explicitly turned on (ctx.showNetworkTab(); default hidden -
+  // see StubCtx's own doc comment) - the DOM/row still gets built either way, so toggling visible
+  // later shows the full history immediately, not just entries captured after that point.
+  if (w.__wgNetworkTabVisible) {
+    panel.classList.remove("wg-out");
+    void panel.offsetWidth;
+    panel.classList.add("wg-in");
+    void row.offsetWidth;
+    row.classList.add("wg-in");
+  }
+}
+
+/**
+ * Shows or hides the network-tab panel - capture keeps happening either way (addNetworkEntry
+ * always builds the DOM row; this only toggles whether the panel itself is visible). Safe to call
+ * before any entry exists yet - it just remembers the flag for addNetworkEntry to check later.
+ */
+export function setNetworkTabVisible(visible) {
+  if (typeof __wgById !== "function") return;
+  window.__wgNetworkTabVisible = !!visible;
+  const panel = __wgById("wg-network-log");
+  if (!panel) return;
+  if (visible) {
+    panel.classList.remove("wg-out");
+    panel.classList.add("wg-in");
+    __wgQA(".wg-net-row").forEach((r) => r.classList.add("wg-in"));
+  } else {
+    panel.classList.remove("wg-in");
+    panel.classList.add("wg-out");
+  }
+}
+
+/** Clears every captured entry and removes the panel - a fresh navigation/session starting over. */
+export function clearNetworkLog() {
+  if (typeof __wgById !== "function") return;
+  window.__wgNetworkEntries = [];
+  const panel = __wgById("wg-network-log");
+  if (panel) panel.remove();
+}

package/dist/runner/inpage/panel-chrome.js

@@ -60,6 +60,40 @@ export function installPanelChrome({ title, favicon, bannerPos, todoPos, envAuto
           ensureChrome();
           const stepLabel = opts.stepLabel || panel.dataset.wgStepLabel || "";
           if (stepLabel) panel.dataset.wgStepLabel = stepLabel;
+          if (opts.fastForward !== undefined) {
+            panel.dataset.wgFastForward = opts.fastForward ? "1" : "0";
+          }
+          if (opts.isApi !== undefined) {
+            panel.dataset.wgIsApi = opts.isApi ? "1" : "0";
+          }
+          const buildFfIcon = () => {
+            const span = document.createElement("span");
+            span.className = "wg-ff-icon";
+            span.setAttribute("aria-hidden", "true");
+            span.innerHTML =
+              '<svg viewBox="0 0 16 16" fill="none">' +
+              '<path class="wg-ff-chev" d="M2 3l5 5-5 5" stroke="#c9a6ff" stroke-width="1.8" ' +
+              'stroke-linecap="round" stroke-linejoin="round"/>' +
+              '<path class="wg-ff-chev" d="M8 3l5 5-5 5" stroke="#c9a6ff" stroke-width="1.8" ' +
+              'stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            return span;
+          };
+          // Terminal icon: the current step is an API check (defineApiBlock) - no DOM change, no
+          // ring of its own, so without this it's an unexplained instant step with nothing visibly
+          // happening on the page at all (worse than a fast-forward block, which at least has the
+          // FF icon marking it as different).
+          const buildApiIcon = () => {
+            const span = document.createElement("span");
+            span.className = "wg-api-icon";
+            span.setAttribute("aria-hidden", "true");
+            span.innerHTML =
+              '<svg viewBox="0 0 16 16" fill="none">' +
+              '<rect x="1" y="2" width="14" height="12" rx="1.5" stroke="#7dd3fc" stroke-width="1.3"/>' +
+              '<path d="M3.5 5.5l2.5 2.5-2.5 2.5" stroke="#7dd3fc" stroke-width="1.3" ' +
+              'stroke-linecap="round" stroke-linejoin="round"/>' +
+              '<path d="M7.5 10.5h4" stroke="#7dd3fc" stroke-width="1.3" stroke-linecap="round"/></svg>';
+            return span;
+          };
           const syncMiniNext = (hidden) => {
             const miniNext = panel.querySelector("[data-wg-mini-next]");
             if (!miniNext) return;
@@ -85,10 +119,16 @@ export function installPanelChrome({ title, favicon, bannerPos, todoPos, envAuto
             const t = panel.querySelector("[data-wg-toggle]");
             const titleEl = panel.querySelector(".wg-chrome-title");
             const label = panel.dataset.wgStepLabel || stepLabel;
+            const isFf = panel.dataset.wgFastForward === "1";
+            const isApi = panel.dataset.wgIsApi === "1";
             if (titleEl) {
-              titleEl.textContent = hidden
+              const text = hidden
                 ? (label || chromeTitle || "waygraph demo")
                 : (chromeTitle || "waygraph demo");
+              titleEl.textContent = "";
+              if (hidden && isFf) titleEl.appendChild(buildFfIcon());
+              if (hidden && isApi) titleEl.appendChild(buildApiIcon());
+              titleEl.appendChild(document.createTextNode(text));
             }
             if (t) t.textContent = hidden ? "Show" : "Hide";
             syncMiniNext(hidden);

package/dist/runner/inpage/swipe-zoom.js

@@ -125,7 +125,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
           if (window.__wgSetZoomBadge) window.__wgSetZoomBadge(1, "");
         };
         const ZOOM_ICO =
-          '<svg viewBox="0 0 24 24" fill="none" stroke="#fde68a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+          '<svg viewBox="0 0 24 24" fill="none" stroke="#c9a6ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
           '<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>';
         window.__wgSetZoomBadge = (scale, sel) => {
           const n = Number(scale);

package/dist/runner/inpage/todos.js

@@ -51,7 +51,12 @@ export function installTodos({ title, favicon, bannerPos, todoPos, envAutoplay,
             );
           const relayoutTodoDocks = () => {
             const docks = allDocks();
-            let top = 72;
+            // Must match .wg-todo-dock/#wg-todo-dock's own CSS `top` (runner/overlay-css.js,
+            // ui/css/dock.css) - this inline style OVERRIDES that CSS the instant more than one
+            // dock exists (multi-todo stacking), so a CSS-only change here is silently underwater;
+            // real bug this was: the CSS top was bumped 72 -> 104 for banner clearance, but this
+            // hardcoded 72 kept winning at runtime and nothing actually moved.
+            let top = 104;
             for (const el of docks) {
               el.style.top = top + "px";
               top += Math.max(48, el.getBoundingClientRect().height) + 10;

package/dist/runner/main.js

@@ -8,7 +8,7 @@ import { isExpectedChainFailure, parseVideoViewport, runChainedFlows, runJsonRep
 import { runStepMode } from "./step-mode.js";
 import { connect } from "../types.js";
 import { MemPage } from "../mem-page.js";
-import { Engine, start, end, chainFlow, isFastForwardBlock, branchRoutes, runBranchRegression } from "../engine.js";
+import { Engine, start, end, chainFlow, isFastForwardBlock, branchRoutes, runBranchRegression } from "../core.js";
 
 async function main() {
   const projectDir = process.argv[2];
@@ -356,6 +356,13 @@ async function main() {
         }
       }
     } finally {
+      // A recorded run's last visible state (a fixture ring, the network panel, a todo dock update)
+      // gets cut off mid-fade otherwise - context.close() used to fire the instant the flow's own
+      // promise resolved, with zero trailing room. Real, confirmed case: defineApiBlock's network
+      // panel only became visible in the recording's final ~1-2s because of this.
+      if (process.env.WAYGRAPH_VIDEO && pageForVideo && !pageForVideo.isClosed()) {
+        await new Promise((r) => setTimeout(r, 1800));
+      }
       await context.close();
       const savedVideo =
         pageForVideo?.video() !== null && pageForVideo?.video() !== undefined
@@ -394,7 +401,7 @@ async function main() {
 
 /**
  * `waygraph run --blocks <flowName> --all-branches`: explore every path through that flow's own
- * `.branch()` tree (see src/engine/branch-regression.ts), not just whichever one the live state
+ * `.branch()` tree (see src/core/branch-regression.ts), not just whichever one the live state
  * would dispatch to. Needs a single, bare Flow reference - a multi-segment chain spec has no one
  * Flow to walk. `--shared-session` opts out of session cloning (WAYGRAPH_SHARED_SESSION=1).
  */

package/dist/runner/network-capture.d.ts

@@ -0,0 +1,9 @@
+import type { Page } from "@playwright/test";
+import type { NetworkEntry } from "./inpage/network.js";
+
+/** Records one network-tab entry (and paints it live) - see network-capture.js's own header. */
+export function recordNetworkEntry(page: Page, entry: NetworkEntry): Promise<void>;
+/** Replays page.__wgNetworkHistory into a freshly (re)installed panel after a navigation. */
+export function restoreNetworkHistory(page: Page): Promise<void>;
+/** Hooks page.on('request'/'requestfinished') to capture real page traffic into the same panel. */
+export function installNetworkCapture(page: Page): void;