waygraph 0.12.41 → 0.12.43

package/README.md

@@ -3,7 +3,7 @@
 A typed graph of reusable Blocks for driving a browser through E2E flows, in place of a
 flat pile of ad hoc helper functions.
 
-**Current:** `0.10.9` — demo carousel stepper (default), `--fast` / `--full`, Hide = compact `N / M`.
+**Current:** `0.12.43` — overlay beacons (blind-agent gate), expected-failure panel on branched LoginPage, `--mini`, Hide stickiness.
 
 This repo is the `waygraph` npm package itself. The full live **Sauce Demo** example
 (Page inventory hub, Effect Add/Remove, MemNav Open details, `waygraph auto`) ships
@@ -429,6 +429,25 @@ npm run test        # playwright test
 npm run build       # tsc -p tsconfig.build.json, emits dist/
 ```
 
+### Blind-agent overlay gate (anti-blank)
+
+Every live modal (`#wg-panel`, `#wg-banner`, `#wg-auto-panel`) stamps
+`data-wg-ui` / `data-wg-modal` / `data-wg-ready="1"`. Do **not** claim the
+stepper works unless one of these passes:
+
+```bash
+# Playwright helper (exported from waygraph)
+import { assertWgOverlayReady } from "waygraph";
+await assertWgOverlayReady(page); // throws on blank / opacity-0 / missing stamp
+
+# Live demo prove (exit 0 = painted, exit 2 = blank)
+WAYGRAPH_PROVE_EXIT=1 WAYGRAPH_PROVE_SHOT=/tmp/wg.png \
+  waygraph demo --blocks loginFlow --data '...'
+# stderr: WAYGRAPH_PROVE {"ok":true,"beacons":[...],"readyAttr":"1"}
+```
+
+Tests: `tests/cli/overlay-beacon.spec.ts`. Helpers: `src/overlay-beacon.ts`.
+
 ## Layout
 
 ```

package/dist/auto-explore-run.js

@@ -177,6 +177,19 @@ async function setAutoPanelRunning(page, label) {
         if (typeof window.__wgWirePanelChrome === "function") {
             window.__wgWirePanelChrome(panel, "wg-auto-panel-hidden", "waygraph auto");
         }
+        if (typeof window.__wgStampModal === "function") {
+            window.__wgStampModal(panel, "auto-panel", {
+                phase: "running",
+                block: label,
+                ready: true,
+            });
+        }
+        else {
+            panel.setAttribute("data-wg-ui", "1");
+            panel.setAttribute("data-wg-modal", "auto-panel");
+            panel.setAttribute("data-wg-phase", "running");
+            panel.setAttribute("data-wg-ready", "1");
+        }
     }, label)
         .catch(() => { });
 }
@@ -399,6 +412,7 @@ async function headfulPick(page, menu, library, mem, waitPick) {
         }
         const apply = (hidden) => {
           el.classList.toggle("wg-collapsed", hidden);
+          el.setAttribute("data-wg-collapsed", hidden ? "1" : "0");
           const t = el.querySelector("[data-wg-toggle]");
           if (t) t.textContent = hidden ? "Show" : "Hide";
           try { localStorage.setItem(storageKey, hidden ? "1" : "0"); } catch {}
@@ -416,6 +430,41 @@ async function headfulPick(page, menu, library, mem, waitPick) {
         }
       };
       window.__wgWirePanelChrome(root, "wg-auto-panel-hidden", "waygraph auto");
+      if (typeof window.__wgStampModal === "function") {
+        window.__wgStampModal(root, "auto-panel", { phase: "pick", ready: true });
+      } else {
+        root.setAttribute("data-wg-ui", "1");
+        root.setAttribute("data-wg-modal", "auto-panel");
+        root.setAttribute("data-wg-phase", "pick");
+        root.setAttribute(
+          "data-wg-collapsed",
+          root.classList.contains("wg-collapsed") ? "1" : "0",
+        );
+        root.setAttribute("data-wg-ready", "1");
+        window.__wgOverlayBeacon =
+          window.__wgOverlayBeacon ||
+          (() =>
+            Array.from(document.querySelectorAll('[data-wg-ui="1"]')).map((el) => {
+              const r = el.getBoundingClientRect();
+              const st = getComputedStyle(el);
+              return {
+                id: el.id || null,
+                modal: el.getAttribute("data-wg-modal"),
+                ready: el.getAttribute("data-wg-ready") === "1",
+                phase: el.getAttribute("data-wg-phase"),
+                step: el.getAttribute("data-wg-step"),
+                block: el.getAttribute("data-wg-block"),
+                collapsed:
+                  el.getAttribute("data-wg-collapsed") === "1" ||
+                  el.classList.contains("wg-collapsed"),
+                opacity: st.opacity,
+                textLen: (el.innerText || "").trim().length,
+                w: Math.round(r.width),
+                h: Math.round(r.height),
+                visible: r.width > 0 && r.height > 0 && Number(st.opacity) > 0.05,
+              };
+            }));
+      }
       root.querySelectorAll("button[data-idx]").forEach((btn) => {
         btn.addEventListener("click", () => {
           const idx = Number(btn.getAttribute("data-idx"));