waygraph 0.15.31 → 0.15.32

package/dist/auto-session/session.js

@@ -1,6 +1,6 @@
 // Split out of the former 1,078-line auto-session.ts (see src/ARCHITECTURE.md). Behavior unchanged.
 import { CONSOLE_LOG_MAX_ENTRIES, FULL_MODE_DEFAULT_DEPTH, FULL_MODE_MAX_NODES, FULL_MODE_MAX_TEXT_LENGTH, TRACE_MAX_STEPS, buildSessionSnapshot, parsePick, stubFilePath, stubPhaseHasContent, walkFullDom } from "./helpers.js";
-import { installPersistentPilotOverlay, showPilotActivity, showPilotFixtures, showPilotVision, updatePilotOverlay } from "../pilot-overlay.js";
+import { instrumentPilotActions, installPersistentPilotOverlay, showPilotActivity, showPilotFixtures, showPilotVision, updatePilotOverlay } from "../pilot-overlay.js";
 import { buildExploreContext, buildExploreMenu } from "../auto-explore.js";
 import { MemPage } from "../mem-page.js";
 import { Engine } from "../engine.js";
@@ -92,6 +92,7 @@ export class AutoSession {
         const context = await browser.newContext(contextOpts);
         await installPersistentPilotOverlay(context);
         const page = await context.newPage();
+        instrumentPilotActions(page, headless ? 0 : 450);
         if (startUrl) {
             await page.goto(startUrl, { waitUntil: "domcontentloaded" }).catch(() => { });
             await page.waitForLoadState("load").catch(() => { });

package/dist/pilot-overlay/action-ring.d.ts

@@ -0,0 +1,16 @@
+import type { Page } from "@playwright/test";
+type Box = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Paint the gray "auto" ring (Playwright is about to act here) at a viewport rectangle. */
+export declare function showPilotRect(page: Page, box: Box, label: string, tone?: string): Promise<void>;
+/**
+ * Every Playwright instruction a Block runs against this session's page gets a gray (auto) ring + robot
+ * label first, so a human watching a pilot window sees WHAT is being driven. `dwellMs` holds the ring
+ * long enough to read before the action fires (0 for headless).
+ */
+export declare function instrumentPilotActions(page: Page, dwellMs: number): void;
+export {};

package/dist/pilot-overlay/action-ring.js

@@ -0,0 +1,67 @@
+import { ensureInstalled } from "./shell.js";
+/** Paint the gray "auto" ring (Playwright is about to act here) at a viewport rectangle. */
+export async function showPilotRect(page, box, label, tone = "auto") {
+    await ensureInstalled(page);
+    await page
+        .evaluate(({ box, label, tone }) => {
+        const ring = __wgById("wg-ring");
+        const tag = __wgById("wg-ring-label");
+        if (!ring || !tag)
+            return;
+        const w = window;
+        if (w.__wgVisionHideTimer)
+            clearTimeout(w.__wgVisionHideTimer);
+        ring.dataset.tone = tone;
+        ring.dataset.size = "md";
+        tag.dataset.tone = tone;
+        tag.dataset.size = "md";
+        tag.dataset.weight = "normal";
+        ring.style.left = `${box.x - 3}px`;
+        ring.style.top = `${box.y - 3}px`;
+        ring.style.width = `${box.width + 6}px`;
+        ring.style.height = `${box.height + 6}px`;
+        tag.textContent = label;
+        tag.style.left = `${Math.max(0, box.x)}px`;
+        tag.style.top = `${Math.max(0, box.y - 24)}px`;
+        ring.style.opacity = "1";
+        tag.style.opacity = "1";
+        w.__wgVisionHideTimer = setTimeout(() => {
+            ring.style.opacity = "0";
+            tag.style.opacity = "0";
+        }, 4_000);
+    }, { box, label, tone })
+        .catch(() => { });
+}
+const LOCATOR_ACTIONS = ["click", "dblclick", "hover", "tap", "fill", "check", "uncheck", "selectOption", "press", "pressSequentially", "setInputFiles"];
+const patched = new WeakSet();
+/**
+ * Every Playwright instruction a Block runs against this session's page gets a gray (auto) ring + robot
+ * label first, so a human watching a pilot window sees WHAT is being driven. `dwellMs` holds the ring
+ * long enough to read before the action fires (0 for headless).
+ */
+export function instrumentPilotActions(page, dwellMs) {
+    const proto = Object.getPrototypeOf(page.locator("html"));
+    if (patched.has(proto))
+        return;
+    patched.add(proto);
+    for (const action of LOCATOR_ACTIONS) {
+        const original = proto[action];
+        if (typeof original !== "function")
+            continue;
+        proto[action] = async function (...args) {
+            try {
+                const box = await this.first().boundingBox({ timeout: 1_500 });
+                if (box) {
+                    const desc = String(this).replace(/^locator\(['"]?|['"]?\)$/g, "").slice(0, 60);
+                    await showPilotRect(this.page(), box, `${action} ${desc}`);
+                    if (dwellMs > 0)
+                        await this.page().waitForTimeout(dwellMs);
+                }
+            }
+            catch {
+                /* decoration only - never block the real action */
+            }
+            return original.apply(this, args);
+        };
+    }
+}

package/dist/pilot-overlay.d.ts

@@ -1,3 +1,4 @@
 export * from "./pilot-overlay/shell.js";
 export * from "./pilot-overlay/fixtures.js";
 export * from "./pilot-overlay/panel.js";
+export * from "./pilot-overlay/action-ring.js";

package/dist/pilot-overlay.js

@@ -2,3 +2,4 @@
 export * from "./pilot-overlay/shell.js";
 export * from "./pilot-overlay/fixtures.js";
 export * from "./pilot-overlay/panel.js";
+export * from "./pilot-overlay/action-ring.js";

package/dist/ui/components/ring.js

@@ -1,4 +1,6 @@
 import { TONES } from "../tokens.js";
+/** Prefix icon for gray (auto) labels. */
+const ROBOT = 'content:"\\1F916\\00a0";';
 const toneNames = Object.keys(TONES);
 /** Tone rules for `sel[data-tone=x]{...}` from the token table. */
 function toneRules(sel, decl, only) {
@@ -17,6 +19,8 @@ export function ringCss() {
         `max-width:min(360px,70vw);white-space:normal;padding:6px 10px;border-radius:7px;background:${p.labelBg};color:${p.labelFg};` +
         "font:600 12px/1.35 system-ui,sans-serif;transition:opacity .3s ease;}" +
         toneRules("#wg-ring-label", (t) => `background:${t.labelBg};color:${t.labelFg};`) +
+        // Gray = a real Playwright-driven instruction: mark it with a robot.
+        `#wg-ring-label[data-tone=auto]::before{${ROBOT}}` +
         "#wg-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
         "#wg-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
         "#wg-ring-label[data-size=sm]{font-size:10px;line-height:1.25;padding:4px 7px;border-radius:5px;}" +
@@ -36,6 +40,7 @@ export function pilotFxRingCss() {
         "max-width:min(360px,80vw);box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;" +
         "overflow:hidden;text-overflow:ellipsis;transition:opacity .12s ease;}" +
         toneRules(".wg-pilot-fx-label", (t) => `background:${t.labelBg};color:${t.labelFg};`) +
+        `.wg-pilot-fx-label[data-tone=auto]::before{${ROBOT}}` +
         ".wg-pilot-fx-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
         ".wg-pilot-fx-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
         ".wg-pilot-fx-label[data-size=sm]{font-size:10px;padding:4px 7px;}" +

package/examples/saucedemo/.waygraph-auto/535e8922.json

@@ -0,0 +1,8 @@
+{
+  "sessionId": "535e8922",
+  "socketPath": "/tmp/waygraph-auto/535e8922.sock",
+  "pid": 699159,
+  "projectDir": "/home/dan/Desktop/Projects/waygraph/examples/saucedemo",
+  "startedAt": "2026-09-25T05:17:09.131Z",
+  "headless": false
+}

package/package.json

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