waygraph 0.15.45 → 0.15.46

package/dist/pilot-overlay/fixtures.js

@@ -188,7 +188,7 @@ export async function showPilotFixtures(page, fixtures) {
         };
         w.__wgPilotFxZoomOutOnHide = zoomOut;
         const clearFx = () => {
-            __wgQA(".wg-pilot-fx-ring, .wg-pilot-fx-label").forEach((el) => el.remove());
+            __wgQA('[id^="wg-fx-ring-"]').forEach((el) => el.remove());
             __wgById("wg-pilot-fx-todos")?.remove();
             clearFocus();
             if (w.__wgPilotFxZoomOutOnHide !== false || clearAll)
@@ -205,59 +205,34 @@ export async function showPilotFixtures(page, fixtures) {
         const missing = [];
         let painted = 0;
         let focusBox = null;
-        for (const ring of rings) {
+        // Paint through the SAME shared ring primitive the demo/auto singleton ring uses
+        // (window.__wgPaintRingAt, installed by runner/inpage/core.js's installCore - see
+        // ensureInstalled) - one ring implementation, not a separate DOM-building copy here.
+        rings.forEach((ring, i) => {
             const el = document.querySelector(ring.selector);
             if (!el) {
                 missing.push(ring.selector);
-                continue;
+                return;
             }
             const rect = el.getBoundingClientRect();
             if (rect.width === 0 && rect.height === 0) {
                 missing.push(ring.selector);
-                continue;
-            }
-            const pad = ring.size === "sm" ? 3 : ring.size === "lg" ? 10 : 6;
-            const ringEl = document.createElement("div");
-            ringEl.className = "wg-pilot-fx-ring";
-            ringEl.dataset.tone = ring.tone;
-            ringEl.dataset.size = ring.size;
-            ringEl.style.left = `${rect.left - pad}px`;
-            ringEl.style.top = `${rect.top - pad}px`;
-            ringEl.style.width = `${Math.max(4, rect.width + pad * 2)}px`;
-            ringEl.style.height = `${Math.max(4, rect.height + pad * 2)}px`;
-            ringEl.style.opacity = "1";
-            const labelEl = document.createElement("div");
-            labelEl.className = "wg-pilot-fx-label";
-            labelEl.dataset.tone = ring.tone;
-            labelEl.dataset.size = ring.size;
-            labelEl.dataset.weight = ring.weight;
-            labelEl.textContent = ring.label;
-            labelEl.style.opacity = "1";
-            if (ring.color) {
-                labelEl.style.color = ring.color;
+                return;
             }
-            __wgAdd(ringEl);
-            __wgAdd(labelEl);
-            const lw = labelEl.offsetWidth;
-            const lh = labelEl.offsetHeight;
-            let labelLeft = rect.left - pad;
-            let labelTop = rect.top - pad + rect.height + pad * 2 + 8;
-            if (labelTop + lh > window.innerHeight - 6)
-                labelTop = rect.top - pad - lh - 8;
-            if (labelTop < 6)
-                labelTop = 6;
-            if (labelLeft + lw > window.innerWidth - 6) {
-                labelLeft = Math.max(6, window.innerWidth - 6 - lw);
+            const box = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+            const ringId = `wg-fx-ring-${i}`;
+            const labelId = `wg-fx-ring-${i}-label`;
+            if (window.__wgPaintRingAt) {
+                window.__wgPaintRingAt(ringId, labelId, box, ring.label, ring.tone, {
+                    size: ring.size,
+                    weight: ring.weight,
+                    color: ring.color,
+                });
             }
-            if (labelLeft < 6)
-                labelLeft = 6;
-            labelEl.style.left = `${labelLeft}px`;
-            labelEl.style.top = `${labelTop}px`;
             painted += 1;
-            if (ring.focus) {
-                focusBox = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
-            }
-        }
+            if (ring.focus)
+                focusBox = box;
+        });
         // Real TodoDockState groups (same shape/builder the demo runner uses) - a group's own
         // style (sequential/checklist/bullets) and its own done/current flags drive rendering here,
         // not a re-derived index over a flattened string list.
@@ -324,7 +299,7 @@ export async function showPilotFixtures(page, fixtures) {
         }
         // Collision flip: if a painted ring intersects the dock, flip side once.
         if (dockEl && todoUi.collision !== false && painted > 0) {
-            const firstRing = __wgQ(".wg-pilot-fx-ring");
+            const firstRing = __wgQ('[id^="wg-fx-ring-"]:not([id$="-label"])');
             if (firstRing) {
                 const rr = firstRing.getBoundingClientRect();
                 const dr = dockEl.getBoundingClientRect();

package/dist/pilot-overlay/shell.js

@@ -62,7 +62,8 @@ const OVERLAY_CSS = `
   opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s;
 }
 #wg-pilot-activity.wg-pilot-toast-show { opacity: 1; transform: translateY(0); }
-/* Agent fixture rings (.wg-pilot-fx-ring/label), #wg-pilot-fx-todos, #wg-ring/#wg-ring-label and
+/* Agent fixture rings (painted via the shared .wg-ring-el primitive, see ui/css/ring.css and
+   runner/inpage/core.js's __wgPaintRingAt), #wg-pilot-fx-todos, #wg-ring/#wg-ring-label and
    #wg-banner all come from the ONE shared bundle ensureShadowRoot installs (ui/css/*.css) - not
    redefined here. */
 /* Spotlight (demo focus:true) - dim page, cutout around target. */
@@ -149,6 +150,11 @@ export async function installPersistentPilotOverlay(context) {
 export async function ensureInstalled(page) {
     await ensureShadowRoot(page);
     await page.evaluate(installPilotOverlayShell, OVERLAY_CSS).catch(() => { });
+    // The shared ring primitive (__wgEnsureRingEl/__wgPaintRingAt) - so Pilot's fixture rings paint
+    // through the SAME implementation the demo/auto singleton ring uses (see ui/css/ring.css / this
+    // file's own header comment on redundancy), not a separate DOM-building copy.
+    const { installCore } = await import("../runner/inpage/core.js");
+    await page.evaluate(installCore, {}).catch(() => { });
     // Device toast/chip CSS (runner/overlay-css.js's RUNNER_EXTRA_CSS) - same rules the demo runner
     // uses, reused here (not re-authored) so a device fixture looks identical on Pilot.
     const { RUNNER_EXTRA_CSS } = await import("../runner/overlay-css.js");

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

@@ -0,0 +1,4 @@
+/** In-page installer (page.evaluate target) - see core.js's own header. Installs the shared ring
+ * primitive (__wgEnsureRingEl/__wgPaintRingAt/__wgHideRingAt), cursor, click-pulse, focus veil,
+ * and the #wg-ring singleton every surface's "current action" ring uses. */
+export function installCore(args: Record<string, unknown>): void;

package/dist/runner/inpage/core.js

@@ -19,65 +19,37 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
         } catch {
           /* private mode / blocked storage - falls back to manual gating */
         }
-        if (!__wgById("wg-ring")) {
-          const ring = document.createElement("div");
-          ring.id = "wg-ring";
-          __wgAdd(ring);
-        }
-        if (!__wgById("wg-ring-label")) {
-          const ringLabel = document.createElement("div");
-          ringLabel.id = "wg-ring-label";
-          __wgAdd(ringLabel);
-        }
-        if (!__wgById("wg-cursor")) {
-          const cursor = document.createElement("div");
-          cursor.id = "wg-cursor";
-          // Dark fill + white stroke, same as help-center-clip-engine's own
-          // #clip-cursor - visible against any page background, light or
-          // dark, unlike a plain solid-white shape.
-          cursor.innerHTML =
-            "<svg viewBox='0 0 32 32' width='24' height='24'>" +
-            "<path fill='#0C0C1A' stroke='#fff' stroke-width='1.4' stroke-linejoin='round' " +
-            "d='M6 3.5l1.4 22.5 5.8-5.4 4.2 9.4 3.6-1.6-4.2-9.2H26z'/></svg>";
-          __wgAdd(cursor);
-        }
-        if (!__wgById("wg-click-pulse")) {
-          const pulse = document.createElement("div");
-          pulse.id = "wg-click-pulse";
-          __wgAdd(pulse);
-        }
-        window.__wgMoveCursorTo = (x, y, ms, instant) => {
-          const cursor = __wgById("wg-cursor");
-          if (!cursor) return;
-          cursor.style.setProperty("--wg-cursor-ms", (ms || 600) + "ms");
-          if (instant) {
-            const prev = cursor.style.transition;
-            cursor.style.transition = "none";
-            cursor.style.transform = "translate(" + x + "px," + y + "px)";
-            void cursor.offsetWidth;
-            cursor.style.transition = prev || "";
-          } else {
-            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+        // The one shared ring primitive (ui/css/ring.css) - #wg-ring/#wg-ring-label is just this
+        // surface's OWN ring instance, found by id like any other (see __wgEnsureRingEl below).
+        window.__wgEnsureRingEl = (ringId, labelId) => {
+          let ring = __wgById(ringId);
+          if (!ring) {
+            ring = document.createElement("div");
+            ring.id = ringId;
+            ring.className = "wg-ring-el";
+            __wgAdd(ring);
           }
-          cursor.style.opacity = "1";
-        };
-        window.__wgHideCursor = () => {
-          const cursor = __wgById("wg-cursor");
-          if (cursor) cursor.style.opacity = "0";
+          let label = __wgById(labelId);
+          if (!label) {
+            label = document.createElement("div");
+            label.id = labelId;
+            label.className = "wg-ring-el-label";
+            __wgAdd(label);
+          }
+          return [ring, label];
         };
-        window.__wgPositionRing = (box, label, tone, style) => {
-          const ring = __wgById("wg-ring");
-          const ringLabel = __wgById("wg-ring-label");
-          if (!ring || !ringLabel || !box) return;
+        /** Bare positioning only - no collision/follow/focus-veil (those are #wg-ring's own extras, see __wgPositionRing). */
+        window.__wgPaintRingAt = (ringId, labelId, box, label, tone, style) => {
+          const [ring, ringLabel] = window.__wgEnsureRingEl(ringId, labelId);
+          if (!box) return null;
           const raw = (tone || "planned") + "";
           const t =
-            raw === "auto" || raw === "info" || raw === "warning" || raw === "danger" || raw === "success"
+            raw === "auto" || raw === "info" || raw === "warning" || raw === "danger" || raw === "success" || raw === "orange"
               ? raw
               : "planned";
           const st = style && typeof style === "object" ? style : {};
           const sizeRaw = (st.size || "md") + "";
-          const size =
-            sizeRaw === "sm" || sizeRaw === "lg" ? sizeRaw : "md";
+          const size = sizeRaw === "sm" || sizeRaw === "lg" ? sizeRaw : "md";
           const weightRaw = (st.weight || "normal") + "";
           const weight = weightRaw === "bold" ? "bold" : "normal";
           ring.dataset.tone = t;
@@ -85,12 +57,12 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
           ring.dataset.size = size;
           ringLabel.dataset.size = size;
           ringLabel.dataset.weight = weight;
+          if (st.color) ringLabel.style.color = st.color;
+          else ringLabel.style.removeProperty("color");
           const pad = size === "sm" ? 3 : size === "lg" ? 10 : 6;
           const margin = 6;
           const vw = window.innerWidth;
           const vh = window.innerHeight;
-          // Pin ring EXACTLY to the element - never clamp the ring away from
-          // the target (that looked "strapped on" the viewport).
           const left = box.x - pad;
           const top = box.y - pad;
           const width = Math.max(4, box.width + pad * 2);
@@ -112,6 +84,57 @@ export function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, t
           if (labelLeft < margin) labelLeft = margin;
           ringLabel.style.left = labelLeft + "px";
           ringLabel.style.top = labelTop + "px";
+          return [ring, ringLabel];
+        };
+        window.__wgHideRingAt = (ringId, labelId) => {
+          const ring = __wgById(ringId);
+          const label = __wgById(labelId);
+          if (ring) ring.style.opacity = "0";
+          if (label) label.style.opacity = "0";
+        };
+        window.__wgEnsureRingEl("wg-ring", "wg-ring-label");
+        if (!__wgById("wg-cursor")) {
+          const cursor = document.createElement("div");
+          cursor.id = "wg-cursor";
+          // Dark fill + white stroke, same as help-center-clip-engine's own
+          // #clip-cursor - visible against any page background, light or
+          // dark, unlike a plain solid-white shape.
+          cursor.innerHTML =
+            "<svg viewBox='0 0 32 32' width='24' height='24'>" +
+            "<path fill='#0C0C1A' stroke='#fff' stroke-width='1.4' stroke-linejoin='round' " +
+            "d='M6 3.5l1.4 22.5 5.8-5.4 4.2 9.4 3.6-1.6-4.2-9.2H26z'/></svg>";
+          __wgAdd(cursor);
+        }
+        if (!__wgById("wg-click-pulse")) {
+          const pulse = document.createElement("div");
+          pulse.id = "wg-click-pulse";
+          __wgAdd(pulse);
+        }
+        window.__wgMoveCursorTo = (x, y, ms, instant) => {
+          const cursor = __wgById("wg-cursor");
+          if (!cursor) return;
+          cursor.style.setProperty("--wg-cursor-ms", (ms || 600) + "ms");
+          if (instant) {
+            const prev = cursor.style.transition;
+            cursor.style.transition = "none";
+            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+            void cursor.offsetWidth;
+            cursor.style.transition = prev || "";
+          } else {
+            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+          }
+          cursor.style.opacity = "1";
+        };
+        window.__wgHideCursor = () => {
+          const cursor = __wgById("wg-cursor");
+          if (cursor) cursor.style.opacity = "0";
+        };
+        // #wg-ring's own extras on top of the shared __wgPaintRingAt primitive: todo/banner
+        // collision avoidance only makes sense for the ONE "current action" ring, not Pilot's
+        // several independent fixture rings - kept here, not pushed down into the shared painter.
+        window.__wgPositionRing = (box, label, tone, style) => {
+          if (!box) return;
+          window.__wgPaintRingAt("wg-ring", "wg-ring-label", box, label, tone, style);
           if (window.__wgTodosSetBehind) window.__wgTodosSetBehind(true);
           if (window.__wgTodosAvoidRingCollision) window.__wgTodosAvoidRingCollision(box);
           if (window.__wgBannerAvoidRing) window.__wgBannerAvoidRing(box);

package/dist/runner/rings.js

@@ -363,6 +363,55 @@ export async function cycleHighlightRings(page, highlights, gatesFast, opts) {
 }
 
 
+/**
+ * Paint a NAMED ring instance (ui/css/ring.css's shared `.wg-ring-el`/`.wg-ring-el-label`) at a
+ * known viewport box - the primitive both the demo/auto singleton (`showRing`, always "wg-ring")
+ * and Pilot's several simultaneous fixture rings (their own ids) paint through, so there is one
+ * ring-rendering implementation, not two. No collision/follow/focus - those are `#wg-ring`'s own
+ * extras (see `showRing`/`inpage/core.js`'s `__wgPositionRing`), meaningless for an independent
+ * fixture ring that isn't "the current action."
+ */
+export async function showRingAt(page, ringId, labelId, box, label, tone, style) {
+  const size = normalizeHighlightSize(style && style.size);
+  const weight = normalizeHighlightWeight(style && style.weight);
+  const color = style && style.color ? String(style.color) : "";
+  await page
+    .evaluate(
+      ({ ringId, labelId, box, label, tone, size, weight, color }) => {
+        if (window.__wgPaintRingAt) {
+          window.__wgPaintRingAt(ringId, labelId, box, label, tone, { size, weight, color });
+        }
+      },
+      { ringId, labelId, box, label, tone: tone || "planned", size, weight, color },
+    )
+    .catch(() => {});
+}
+
+/** Hide (not remove) a named ring instance painted via {@link showRingAt}. */
+export async function hideRingAt(page, ringId, labelId) {
+  await page
+    .evaluate(
+      ({ ringId, labelId }) => {
+        if (window.__wgHideRingAt) window.__wgHideRingAt(ringId, labelId);
+      },
+      { ringId, labelId },
+    )
+    .catch(() => {});
+}
+
+/** Remove a named ring instance entirely (Pilot's fixture rings are short-lived, not reused). */
+export async function removeRingAt(page, ringId, labelId) {
+  await page
+    .evaluate(
+      ({ ringId, labelId }) => {
+        __wgById(ringId)?.remove();
+        __wgById(labelId)?.remove();
+      },
+      { ringId, labelId },
+    )
+    .catch(() => {});
+}
+
 export async function showRing(page, box, label, tone, style) {
   const size = normalizeHighlightSize(style && style.size);
   const weight = normalizeHighlightWeight(style && style.weight);

package/dist/ui/components/ring.d.ts

@@ -1,4 +1,2 @@
 /** The highlight ring + its label (`#wg-ring`, `#wg-ring-label`): tone / size / weight variants. */
 export declare function ringCss(): string;
-/** Agent-sent pilot fixture rings/labels (`.wg-pilot-fx-ring|label`), same tones as the demo ring. */
-export declare function pilotFxRingCss(): string;

package/dist/ui/components/ring.js

@@ -28,22 +28,7 @@ export function ringCss() {
         "#wg-ring-label[data-weight=bold]{font-weight:800;}" +
         "#wg-ring-label[data-weight=normal]{font-weight:600;}");
 }
-/** Agent-sent pilot fixture rings/labels (`.wg-pilot-fx-ring|label`), same tones as the demo ring. */
-export function pilotFxRingCss() {
-    const p = TONES.planned;
-    return (".wg-pilot-fx-ring{position:fixed;z-index:2147483645;pointer-events:none;opacity:0;" +
-        `border:3px solid ${p.ring};border-radius:10px;box-sizing:border-box;` +
-        "transition:opacity .12s ease,left .12s,top .12s,width .12s,height .12s;}" +
-        toneRules(".wg-pilot-fx-ring", (t) => `border-color:${t.ring};box-shadow:0 0 0 4px ${t.glow};`) +
-        ".wg-pilot-fx-label{position:fixed;z-index:2147483645;pointer-events:none;opacity:0;" +
-        "font:600 12px/1.3 ui-sans-serif,system-ui,sans-serif;padding:5px 9px;border-radius:6px;" +
-        "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;}" +
-        ".wg-pilot-fx-label[data-size=lg]{font-size:16px;padding:8px 14px;}" +
-        ".wg-pilot-fx-label[data-weight=bold]{font-weight:800;}");
-}
+// A former `pilotFxRingCss()` used to live here, generating a SECOND, byte-identical copy of
+// ringCss()'s own rules under `.wg-pilot-fx-ring`/`.wg-pilot-fx-label`. Pilot's fixture rings now
+// paint through the same shared primitive (`ui/css/ring.css`'s `.wg-ring-el`, `runner/inpage/core.js`'s
+// `__wgPaintRingAt`) as the demo/auto singleton ring - see src/ui/css/ring.css's own header.

package/dist/ui/overlay.css

@@ -50,81 +50,55 @@
 }
 
 
-/* The highlight ring + its label (#wg-ring, #wg-ring-label). Tone comes from data-tone, resolved
- * against the tokens in tokens.css - add a tone there, it works here with no new rule. */
-#wg-ring {
-  position: fixed; z-index: var(--wg-z-ring); pointer-events: none; opacity: 0;
+/*
+ * ONE ring implementation, shared by every surface (demo/auto's singleton #wg-ring, and Pilot's
+ * multiple simultaneous fixture rings) - `.wg-ring-el`/`.wg-ring-el-label` is the real class every
+ * ring element carries; `#wg-ring`/`#wg-ring-label` and Pilot's per-instance ids are just how each
+ * surface finds/targets ITS OWN ring(s) in JS (runner/inpage/core.js's __wgEnsureRingEl/
+ * __wgPaintRingAt). Before this file existed as one, the demo/auto ring and Pilot's fixture ring
+ * were two byte-identical copies of the same tone/size/weight rules - a real, provable case of the
+ * "why do we have two of everything" complaint that's easy to lose track of once it's spread across
+ * two selector families in one file. Tone comes from data-tone, resolved against tokens.css - add a
+ * tone there, it works here with no new rule.
+ */
+.wg-ring-el {
+  position: fixed; z-index: var(--wg-z-ring); pointer-events: none; opacity: 0; box-sizing: border-box;
   border: 2.5px solid var(--wg-tone-planned-ring, #7C3AED); border-radius: var(--wg-radius-md);
   box-shadow: 0 0 0 4px var(--wg-tone-planned-glow, rgba(124,58,237,.16));
   /* Opacity fade only - NEVER transition border-color/box-shadow: tone swaps must snap instantly. */
-  transition: opacity .3s ease;
+  transition: opacity .3s ease, left .12s, top .12s, width .12s, height .12s;
 }
-#wg-ring[data-tone] { border-color: var(--wg-tone-ring); box-shadow: 0 0 0 4px var(--wg-tone-glow); }
-#wg-ring[data-tone=planned] { --wg-tone-ring: var(--wg-tone-planned-ring); --wg-tone-glow: var(--wg-tone-planned-glow); }
-#wg-ring[data-tone=auto]    { --wg-tone-ring: var(--wg-tone-auto-ring);    --wg-tone-glow: var(--wg-tone-auto-glow); }
-#wg-ring[data-tone=info]    { --wg-tone-ring: var(--wg-tone-info-ring);    --wg-tone-glow: var(--wg-tone-info-glow); }
-#wg-ring[data-tone=warning] { --wg-tone-ring: var(--wg-tone-warning-ring); --wg-tone-glow: var(--wg-tone-warning-glow); }
-#wg-ring[data-tone=danger]  { --wg-tone-ring: var(--wg-tone-danger-ring);  --wg-tone-glow: var(--wg-tone-danger-glow); }
-#wg-ring[data-tone=success] { --wg-tone-ring: var(--wg-tone-success-ring); --wg-tone-glow: var(--wg-tone-success-glow); }
-#wg-ring[data-tone=orange]  { --wg-tone-ring: var(--wg-tone-orange-ring);  --wg-tone-glow: var(--wg-tone-orange-glow); }
-#wg-ring[data-size=sm] { border-width: 1.5px; border-radius: var(--wg-radius-sm); }
-#wg-ring[data-size=lg] { border-width: 4px; border-radius: var(--wg-radius-lg); }
-
-#wg-ring-label {
+.wg-ring-el[data-tone] { border-color: var(--wg-tone-ring); box-shadow: 0 0 0 4px var(--wg-tone-glow); }
+.wg-ring-el[data-tone=planned] { --wg-tone-ring: var(--wg-tone-planned-ring); --wg-tone-glow: var(--wg-tone-planned-glow); }
+.wg-ring-el[data-tone=auto]    { --wg-tone-ring: var(--wg-tone-auto-ring);    --wg-tone-glow: var(--wg-tone-auto-glow); }
+.wg-ring-el[data-tone=info]    { --wg-tone-ring: var(--wg-tone-info-ring);    --wg-tone-glow: var(--wg-tone-info-glow); }
+.wg-ring-el[data-tone=warning] { --wg-tone-ring: var(--wg-tone-warning-ring); --wg-tone-glow: var(--wg-tone-warning-glow); }
+.wg-ring-el[data-tone=danger]  { --wg-tone-ring: var(--wg-tone-danger-ring);  --wg-tone-glow: var(--wg-tone-danger-glow); }
+.wg-ring-el[data-tone=success] { --wg-tone-ring: var(--wg-tone-success-ring); --wg-tone-glow: var(--wg-tone-success-glow); }
+.wg-ring-el[data-tone=orange]  { --wg-tone-ring: var(--wg-tone-orange-ring);  --wg-tone-glow: var(--wg-tone-orange-glow); }
+.wg-ring-el[data-size=sm] { border-width: 1.5px; border-radius: var(--wg-radius-sm); }
+.wg-ring-el[data-size=lg] { border-width: 4px; border-radius: var(--wg-radius-lg); }
+
+.wg-ring-el-label {
   position: fixed; z-index: var(--wg-z-ring); pointer-events: none; opacity: 0;
   max-width: min(360px, 70vw); white-space: normal; padding: 6px 10px; border-radius: 7px;
   background: var(--wg-tone-bg, var(--wg-tone-planned-bg)); color: var(--wg-tone-fg, var(--wg-tone-planned-fg));
   font: 600 12px/1.35 var(--wg-font); transition: opacity .3s ease;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25);
 }
-#wg-ring-label[data-tone=planned] { --wg-tone-bg: var(--wg-tone-planned-bg); --wg-tone-fg: var(--wg-tone-planned-fg); }
-#wg-ring-label[data-tone=auto]    { --wg-tone-bg: var(--wg-tone-auto-bg);    --wg-tone-fg: var(--wg-tone-auto-fg); }
-#wg-ring-label[data-tone=info]    { --wg-tone-bg: var(--wg-tone-info-bg);    --wg-tone-fg: var(--wg-tone-info-fg); }
-#wg-ring-label[data-tone=warning] { --wg-tone-bg: var(--wg-tone-warning-bg); --wg-tone-fg: var(--wg-tone-warning-fg); }
-#wg-ring-label[data-tone=danger]  { --wg-tone-bg: var(--wg-tone-danger-bg);  --wg-tone-fg: var(--wg-tone-danger-fg); }
-#wg-ring-label[data-tone=success] { --wg-tone-bg: var(--wg-tone-success-bg); --wg-tone-fg: var(--wg-tone-success-fg); }
-#wg-ring-label[data-tone=orange]  { --wg-tone-bg: var(--wg-tone-orange-bg);  --wg-tone-fg: var(--wg-tone-orange-fg); }
+.wg-ring-el-label[data-tone=planned] { --wg-tone-bg: var(--wg-tone-planned-bg); --wg-tone-fg: var(--wg-tone-planned-fg); }
+.wg-ring-el-label[data-tone=auto]    { --wg-tone-bg: var(--wg-tone-auto-bg);    --wg-tone-fg: var(--wg-tone-auto-fg); }
+.wg-ring-el-label[data-tone=info]    { --wg-tone-bg: var(--wg-tone-info-bg);    --wg-tone-fg: var(--wg-tone-info-fg); }
+.wg-ring-el-label[data-tone=warning] { --wg-tone-bg: var(--wg-tone-warning-bg); --wg-tone-fg: var(--wg-tone-warning-fg); }
+.wg-ring-el-label[data-tone=danger]  { --wg-tone-bg: var(--wg-tone-danger-bg);  --wg-tone-fg: var(--wg-tone-danger-fg); }
+.wg-ring-el-label[data-tone=success] { --wg-tone-bg: var(--wg-tone-success-bg); --wg-tone-fg: var(--wg-tone-success-fg); }
+.wg-ring-el-label[data-tone=orange]  { --wg-tone-bg: var(--wg-tone-orange-bg);  --wg-tone-fg: var(--wg-tone-orange-fg); }
 /* Gray (auto) = a real Playwright-driven instruction - mark it, a human/AI watching can't "see" DOM state otherwise. */
-#wg-ring-label[data-tone=auto]::before { content: "\1F916\00a0"; }
-#wg-ring-label[data-size=sm] { font-size: 10px; line-height: 1.25; padding: 4px 7px; border-radius: 5px; }
-#wg-ring-label[data-size=lg] { font-size: 16px; line-height: 1.35; padding: 8px 14px; border-radius: 9px; max-width: min(480px, 85vw); }
-#wg-ring-label[data-weight=bold] { font-weight: 800; }
-#wg-ring-label[data-weight=normal] { font-weight: 600; }
-
-/* Agent-sent pilot fixture rings/labels (.wg-pilot-fx-ring|label) - identical tone language as #wg-ring. */
-.wg-pilot-fx-ring {
-  position: fixed; z-index: var(--wg-z-fx); pointer-events: none; opacity: 0; box-sizing: border-box;
-  border: 3px solid var(--wg-tone-planned-ring); border-radius: var(--wg-radius-md);
-  transition: opacity .12s ease, left .12s, top .12s, width .12s, height .12s;
-}
-.wg-pilot-fx-ring[data-tone] { border-color: var(--wg-tone-ring); box-shadow: 0 0 0 4px var(--wg-tone-glow); }
-.wg-pilot-fx-ring[data-tone=planned] { --wg-tone-ring: var(--wg-tone-planned-ring); --wg-tone-glow: var(--wg-tone-planned-glow); }
-.wg-pilot-fx-ring[data-tone=auto]    { --wg-tone-ring: var(--wg-tone-auto-ring);    --wg-tone-glow: var(--wg-tone-auto-glow); }
-.wg-pilot-fx-ring[data-tone=info]    { --wg-tone-ring: var(--wg-tone-info-ring);    --wg-tone-glow: var(--wg-tone-info-glow); }
-.wg-pilot-fx-ring[data-tone=warning] { --wg-tone-ring: var(--wg-tone-warning-ring); --wg-tone-glow: var(--wg-tone-warning-glow); }
-.wg-pilot-fx-ring[data-tone=danger]  { --wg-tone-ring: var(--wg-tone-danger-ring);  --wg-tone-glow: var(--wg-tone-danger-glow); }
-.wg-pilot-fx-ring[data-tone=success] { --wg-tone-ring: var(--wg-tone-success-ring); --wg-tone-glow: var(--wg-tone-success-glow); }
-.wg-pilot-fx-ring[data-tone=orange]  { --wg-tone-ring: var(--wg-tone-orange-ring);  --wg-tone-glow: var(--wg-tone-orange-glow); }
-.wg-pilot-fx-ring[data-size=sm] { border-width: 1.5px; border-radius: var(--wg-radius-sm); }
-.wg-pilot-fx-ring[data-size=lg] { border-width: 4px; border-radius: var(--wg-radius-lg); }
-
-.wg-pilot-fx-label {
-  position: fixed; z-index: var(--wg-z-fx); pointer-events: none; opacity: 0;
-  font: 600 12px/1.3 var(--wg-font); padding: 5px 9px; border-radius: 6px;
-  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;
-  background: var(--wg-tone-bg, var(--wg-tone-planned-bg)); color: var(--wg-tone-fg, var(--wg-tone-planned-fg));
-}
-.wg-pilot-fx-label[data-tone=planned] { --wg-tone-bg: var(--wg-tone-planned-bg); --wg-tone-fg: var(--wg-tone-planned-fg); }
-.wg-pilot-fx-label[data-tone=auto]    { --wg-tone-bg: var(--wg-tone-auto-bg);    --wg-tone-fg: var(--wg-tone-auto-fg); }
-.wg-pilot-fx-label[data-tone=info]    { --wg-tone-bg: var(--wg-tone-info-bg);    --wg-tone-fg: var(--wg-tone-info-fg); }
-.wg-pilot-fx-label[data-tone=warning] { --wg-tone-bg: var(--wg-tone-warning-bg); --wg-tone-fg: var(--wg-tone-warning-fg); }
-.wg-pilot-fx-label[data-tone=danger]  { --wg-tone-bg: var(--wg-tone-danger-bg);  --wg-tone-fg: var(--wg-tone-danger-fg); }
-.wg-pilot-fx-label[data-tone=success] { --wg-tone-bg: var(--wg-tone-success-bg); --wg-tone-fg: var(--wg-tone-success-fg); }
-.wg-pilot-fx-label[data-tone=orange]  { --wg-tone-bg: var(--wg-tone-orange-bg);  --wg-tone-fg: var(--wg-tone-orange-fg); }
-.wg-pilot-fx-label[data-tone=auto]::before { content: "\1F916\00a0"; }
-.wg-pilot-fx-label[data-size=sm] { font-size: 10px; padding: 4px 7px; }
-.wg-pilot-fx-label[data-size=lg] { font-size: 16px; padding: 8px 14px; }
-.wg-pilot-fx-label[data-weight=bold] { font-weight: 800; }
+.wg-ring-el-label[data-tone=auto]::before { content: "\1F916\00a0"; }
+.wg-ring-el-label[data-size=sm] { font-size: 10px; line-height: 1.25; padding: 4px 7px; border-radius: 5px; }
+.wg-ring-el-label[data-size=lg] { font-size: 16px; line-height: 1.35; padding: 8px 14px; border-radius: 9px; max-width: min(480px, 85vw); }
+.wg-ring-el-label[data-weight=bold] { font-weight: 800; }
+.wg-ring-el-label[data-weight=normal] { font-weight: 600; }
 
 
 /* Travelling mouse cursor + click ripple (#wg-cursor, #wg-click-pulse). */

package/examples/saucedemo/.waygraph-auto/20e91af6.log

@@ -0,0 +1,5 @@
+[13:33:09.962] waygraph pilot: highlight ctx.todos n=3 index=0
+[13:33:09.963] waygraph pilot: highlight ring #user-name tone=planned label="Username"
+[13:33:09.963] waygraph pilot: highlight ring #password tone=info label="Password"
+[13:33:16.194] waygraph pilot: highlight ring #no-such-element-waygraph tone=danger label="Gone"
+[13:33:19.571] waygraph pilot: highlight ring #login-button tone=success label="Login"

package/examples/saucedemo/.waygraph-auto/2e6bc35e.log

@@ -0,0 +1,6 @@
+[13:33:49.001] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:33:49.001] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:33:49.001] waygraph pilot: stub.before ctx.device(mobile)
+[13:33:49.001] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:33:49.001] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:33:50.662] waygraph pilot: stub.after ctx.todos n=6 index=1

package/examples/saucedemo/.waygraph-auto/432d09e3.log

@@ -0,0 +1,22 @@
+[13:30:37.236] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:30:37.237] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:30:37.237] waygraph pilot: stub.before ctx.device(mobile)
+[13:30:37.237] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:30:37.237] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:30:38.230] waygraph pilot: stub.after ctx.todos n=6 index=1
+[13:30:40.736] waygraph pilot: stub.before ring #password tone=planned label="Password"
+[13:30:40.806] waygraph pilot: stub.after ctx.todos n=6 index=2
+[13:30:43.109] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
+[13:30:43.277] waygraph pilot: stub.after ctx.title("Inventory · landscape")
+[13:30:43.277] waygraph pilot: stub.after ctx.todos n=6 index=3
+[13:30:43.277] waygraph pilot: stub.after ctx.device(mobile)
+[13:30:43.277] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
+[13:30:49.079] waygraph pilot: stub.before ctx.title("Pick a product · tablet")
+[13:30:49.079] waygraph pilot: stub.before ctx.todos n=6 index=3
+[13:30:49.079] waygraph pilot: stub.before ctx.device(tablet)
+[13:30:49.079] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:30:49.079] waygraph pilot: stub.before ring div.inventory_item:has(button[data-test="add-to-cart-sauce-labs-backpack"], button[data-test="remove-sauce-labs-backpack"]) .inventory_item_name tone=info label="Sauce Labs Backpack"
+[13:30:49.079] waygraph pilot: stub.before ring [data-test="add-to-cart-sauce-labs-backpack"] tone=success label="Add to cart"
+[13:30:50.084] waygraph pilot: stub.after ctx.title("In the cart")
+[13:30:50.084] waygraph pilot: stub.after ctx.todos n=6 index=4
+[13:30:50.084] waygraph pilot: stub.after ring .shopping_cart_badge tone=success label="Cart badge"

package/examples/saucedemo/.waygraph-auto/4cebc228.log

@@ -0,0 +1,20 @@
+[13:33:33.648] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:33:33.648] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:33:33.648] waygraph pilot: stub.before ctx.device(mobile)
+[13:33:33.648] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:33:33.648] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:33:35.319] waygraph pilot: stub.after ctx.todos n=6 index=1
+[13:33:37.648] waygraph pilot: stub.before ring #password tone=planned label="Password"
+[13:33:37.918] waygraph pilot: stub.after ctx.todos n=6 index=2
+[13:33:40.322] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
+[13:33:40.631] waygraph pilot: stub.after ctx.title("Inventory · landscape")
+[13:33:40.631] waygraph pilot: stub.after ctx.todos n=6 index=3
+[13:33:40.635] waygraph pilot: stub.after ctx.device(mobile)
+[13:33:40.635] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
+[13:33:45.020] waygraph pilot: stub.before ctx.title("Open cart · landscape")
+[13:33:45.023] waygraph pilot: stub.before ctx.todos n=6 index=5
+[13:33:45.023] waygraph pilot: stub.before ctx.device(mobile)
+[13:33:45.023] waygraph pilot: stub.before ctx.zoom(1.4)
+[13:33:45.023] waygraph pilot: stub.before ring .shopping_cart_link tone=planned label="Cart"
+[13:33:45.685] waygraph pilot: stub.after ctx.title("Your cart · desktop")
+[13:33:45.685] waygraph pilot: stub.after ring .cart_item tone=success label="Cart items"

package/examples/saucedemo/.waygraph-auto/625e7f65.log

@@ -0,0 +1,5 @@
+[13:30:29.135] waygraph pilot: highlight ctx.todos n=3 index=0
+[13:30:29.135] waygraph pilot: highlight ring #user-name tone=planned label="Username"
+[13:30:29.135] waygraph pilot: highlight ring #password tone=info label="Password"
+[13:30:31.729] waygraph pilot: highlight ring #no-such-element-waygraph tone=danger label="Gone"
+[13:30:34.364] waygraph pilot: highlight ring #login-button tone=success label="Login"

package/examples/saucedemo/.waygraph-auto/7fdd47ee.log

@@ -0,0 +1,2 @@
+[13:28:46.645] waygraph pilot: highlight ring #user-name tone=info label="Username"
+[13:28:46.645] waygraph pilot: highlight ring #password tone=planned label="Password"

package/examples/saucedemo/.waygraph-auto/8e12e34f.log

@@ -0,0 +1,22 @@
+[13:33:41.969] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:33:41.970] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:33:41.970] waygraph pilot: stub.before ctx.device(mobile)
+[13:33:41.970] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:33:41.971] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:33:43.496] waygraph pilot: stub.after ctx.todos n=6 index=1
+[13:33:47.539] waygraph pilot: stub.before ring #password tone=planned label="Password"
+[13:33:47.674] waygraph pilot: stub.after ctx.todos n=6 index=2
+[13:33:51.047] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
+[13:33:51.434] waygraph pilot: stub.after ctx.title("Inventory · landscape")
+[13:33:51.434] waygraph pilot: stub.after ctx.todos n=6 index=3
+[13:33:51.434] waygraph pilot: stub.after ctx.device(mobile)
+[13:33:51.434] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
+[13:33:58.614] waygraph pilot: stub.before ctx.title("Pick a product · tablet")
+[13:33:58.614] waygraph pilot: stub.before ctx.todos n=6 index=3
+[13:33:58.614] waygraph pilot: stub.before ctx.device(tablet)
+[13:33:58.614] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:33:58.614] waygraph pilot: stub.before ring div.inventory_item:has(button[data-test="add-to-cart-sauce-labs-backpack"], button[data-test="remove-sauce-labs-backpack"]) .inventory_item_name tone=info label="Sauce Labs Backpack"
+[13:33:58.614] waygraph pilot: stub.before ring [data-test="add-to-cart-sauce-labs-backpack"] tone=success label="Add to cart"
+[13:34:00.150] waygraph pilot: stub.after ctx.title("In the cart")
+[13:34:00.158] waygraph pilot: stub.after ctx.todos n=6 index=4
+[13:34:00.158] waygraph pilot: stub.after ring .shopping_cart_badge tone=success label="Cart badge"

package/examples/saucedemo/.waygraph-auto/aa7323f8.log

@@ -0,0 +1,20 @@
+[13:30:39.074] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:30:39.075] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:30:39.076] waygraph pilot: stub.before ctx.device(mobile)
+[13:30:39.077] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:30:39.077] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:30:40.400] waygraph pilot: stub.after ctx.todos n=6 index=1
+[13:30:41.700] waygraph pilot: stub.before ring #password tone=planned label="Password"
+[13:30:41.847] waygraph pilot: stub.after ctx.todos n=6 index=2
+[13:30:43.065] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
+[13:30:43.238] waygraph pilot: stub.after ctx.title("Inventory · landscape")
+[13:30:43.238] waygraph pilot: stub.after ctx.todos n=6 index=3
+[13:30:43.238] waygraph pilot: stub.after ctx.device(mobile)
+[13:30:43.238] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
+[13:30:47.003] waygraph pilot: stub.before ctx.title("Open cart · landscape")
+[13:30:47.003] waygraph pilot: stub.before ctx.todos n=6 index=5
+[13:30:47.003] waygraph pilot: stub.before ctx.device(mobile)
+[13:30:47.003] waygraph pilot: stub.before ctx.zoom(1.4)
+[13:30:47.003] waygraph pilot: stub.before ring .shopping_cart_link tone=planned label="Cart"
+[13:30:47.239] waygraph pilot: stub.after ctx.title("Your cart · desktop")
+[13:30:47.239] waygraph pilot: stub.after ring .cart_item tone=success label="Cart items"

package/examples/saucedemo/.waygraph-auto/ad0bfad9.log

@@ -0,0 +1,5 @@
+[13:32:46.154] waygraph pilot: highlight ctx.todos n=3 index=0
+[13:32:46.154] waygraph pilot: highlight ring #user-name tone=planned label="Username"
+[13:32:46.155] waygraph pilot: highlight ring #password tone=info label="Password"
+[13:32:48.514] waygraph pilot: highlight ring #no-such-element-waygraph tone=danger label="Gone"
+[13:32:49.667] waygraph pilot: highlight ring #login-button tone=success label="Login"

package/examples/saucedemo/.waygraph-auto/de8cb83d.log

@@ -0,0 +1,6 @@
+[13:31:17.677] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:31:17.678] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:31:17.678] waygraph pilot: stub.before ctx.device(mobile)
+[13:31:17.678] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:31:17.678] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:31:18.813] waygraph pilot: stub.after ctx.todos n=6 index=1

package/package.json

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