donobu 5.60.3 → 5.60.5

package/dist/managers/InteractionVisualizer.js

@@ -6,11 +6,22 @@ const PlaywrightUtils_1 = require("../utils/PlaywrightUtils");
 class InteractionVisualizer {
     constructor(defaultMessageDurationMillis) {
         this.defaultMessageDurationMillis = defaultMessageDurationMillis;
-        this.cursorPos = { x: 150, y: 150 };
+        /**
+         * Per-page cursor state. Keyed weakly so closed/GC'd pages drop out without
+         * us tracking page lifecycles.
+         */
+        this.states = new WeakMap();
     }
     /* ------------------------------------------------------------------ */
     /*  Public API                                                        */
     /* ------------------------------------------------------------------ */
+    static escapeHtml(text) {
+        return text
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
     /**
      * Moves the virtual cursor to the center of the specified element and optionally displays a message.
      *
@@ -23,26 +34,29 @@ class InteractionVisualizer {
      * @returns Promise that resolves when the cursor movement and message display are complete
      *
      * @remarks
-     * - The target element will be scrolled into view if necessary
      * - The cursor animates smoothly to the element's center point
      * - Messages are positioned automatically to avoid viewport edges
-     * - The virtual cursor does not interfere with actual page interactions
+     * - Overlays are `pointer-events: none`, so they never intercept real interactions
      */
     async pointAt(page, locator, message, duration = this.defaultMessageDurationMillis) {
         if (!duration || duration <= 0) {
             return;
         }
         try {
-            let target = { x: this.cursorPos.x, y: this.cursorPos.y };
+            const state = this.getState(page);
+            const from = { ...state.pos };
+            let target = from;
             if (locator) {
                 const box = await locator.boundingBox();
                 if (box) {
                     target = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
                 }
             }
-            await this.ensureContainer(page);
+            state.pos = target;
             await Promise.all([
-                this.moveCursor(page, target, duration / 2),
+                state.visible
+                    ? this.renderCursor(page, state, from, target, duration / 2)
+                    : Promise.resolve(),
                 message?.trim()
                     ? this.showMessage(page, target, message.trim(), duration)
                     : Promise.resolve(),
@@ -55,28 +69,16 @@ class InteractionVisualizer {
         }
     }
     /**
-     * Shows the virtual mouse cursor on the page.
+     * Shows the virtual mouse cursor on the page at its current position.
      *
      * @param page - The Playwright page instance where the cursor will be displayed.
-     *
      * @returns Promise that resolves when the cursor is shown.
-     *
-     * @remarks
-     * - If the cursor doesn't exist yet, it will be created.
-     * - The cursor will be made visible with a smooth opacity transition.
      */
     async showMouse(page) {
         try {
-            await this.ensureContainer(page);
-            await this.ensureCursor(page);
-            await page.evaluate(([containerId]) => {
-                const root = document.getElementById(containerId)
-                    .shadowRoot;
-                const cursor = root.querySelector('.donobu-virtual-mouse');
-                if (cursor) {
-                    cursor.classList.remove('hidden');
-                }
-            }, [InteractionVisualizer.CONTAINER_ID]);
+            const state = this.getState(page);
+            state.visible = true;
+            await this.renderCursor(page, state, state.pos, state.pos, 0);
         }
         catch (error) {
             if (!PlaywrightUtils_1.PlaywrightUtils.isPageClosedError(error)) {
@@ -84,30 +86,22 @@ class InteractionVisualizer {
             }
         }
     }
+    /* ------------------------------------------------------------------ */
+    /*  Private helpers                                                   */
+    /* ------------------------------------------------------------------ */
     /**
      * Hides the virtual mouse cursor on the page.
      *
      * @param page - The Playwright page instance where the cursor is displayed.
-     *
-     * @returns Promise that resolves when the cursor is hidden
-     *
-     * @remarks
-     * - The cursor will be hidden with a smooth opacity transition
-     * - The cursor element remains in the DOM but becomes invisible
+     * @returns Promise that resolves when the cursor is hidden.
      */
     async hideMouse(page) {
         try {
-            const id = InteractionVisualizer.CONTAINER_ID;
-            await page.evaluate(([containerId]) => {
-                const container = document.getElementById(containerId);
-                if (!container?.shadowRoot) {
-                    return;
-                }
-                const cursor = container.shadowRoot.querySelector('.donobu-virtual-mouse');
-                if (cursor) {
-                    cursor.classList.add('hidden');
-                }
-            }, [id]);
+            const state = this.getState(page);
+            state.visible = false;
+            const cursor = state.cursor;
+            state.cursor = undefined;
+            await cursor?.dispose();
         }
         catch (error) {
             if (!PlaywrightUtils_1.PlaywrightUtils.isPageClosedError(error)) {
@@ -115,138 +109,110 @@ class InteractionVisualizer {
             }
         }
     }
-    /* ------------------------------------------------------------------ */
-    /*  Private helpers                                                   */
-    /* ------------------------------------------------------------------ */
-    async ensureContainer(page) {
-        const id = InteractionVisualizer.CONTAINER_ID;
-        await page.evaluate(([containerId, css]) => {
-            if (document.getElementById(containerId)) {
-                return;
-            }
-            const el = document.createElement('div');
-            el.id = containerId;
-            Object.assign(el.style, {
-                position: 'fixed',
-                top: '0',
-                left: '0',
-                width: '100vw',
-                height: '100vh',
-                pointerEvents: 'none',
-                zIndex: '2147483646', // just below the message itself
-            });
-            const shadow = el.attachShadow({ mode: 'open' });
-            const style = document.createElement('style');
-            style.textContent = css;
-            shadow.appendChild(style);
-            // Append to <html> so it is not clipped by overflow/transform on <body>
-            (document.documentElement || document.body).appendChild(el);
-        }, [id, InteractionVisualizer.CSS]);
+    getState(page) {
+        let state = this.states.get(page);
+        if (!state) {
+            state = { pos: { x: 150, y: 150 }, visible: false };
+            this.states.set(page, state);
+        }
+        return state;
     }
-    async ensureCursor(page) {
-        const id = InteractionVisualizer.CONTAINER_ID;
-        await page.evaluate(([containerId, position, svg, svgAttrs, tipX, tipY]) => {
-            const root = document.getElementById(containerId).shadowRoot;
-            let cursor = root.querySelector('.donobu-virtual-mouse');
-            if (cursor) {
-                return;
-            }
-            cursor = document.createElement('div');
-            cursor.className = 'donobu-virtual-mouse hidden';
-            // Hybrid approach: try insertAdjacentHTML first, fallback to createElementNS
+    /**
+     * Replaces the sticky cursor overlay with one positioned at `to`, gliding
+     * from `from` when `animMs > 0`. We show the new overlay before disposing
+     * the old one to avoid a visible flicker, and tolerate a stale disposable
+     * (e.g. cleared by a navigation) by swallowing its dispose error.
+     */
+    async renderCursor(page, state, from, to, animMs) {
+        const previous = state.cursor;
+        state.cursor = await page.screencast.showOverlay(this.buildCursorHtml(from, to, animMs));
+        if (previous) {
             try {
-                cursor.insertAdjacentHTML('beforeend', svg);
+                await previous.dispose();
             }
-            catch (_error) {
-                // Fallback: create SVG programmatically using attributes object
-                const attrs = JSON.parse(svgAttrs);
-                const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                // Set SVG attributes
-                Object.entries(attrs.svg).forEach(([key, value]) => {
-                    svgElement.setAttribute(key, value);
-                });
-                // Create and add path element
-                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                Object.entries(attrs.path).forEach(([key, value]) => {
-                    path.setAttribute(key, value);
-                });
-                svgElement.appendChild(path);
-                cursor.appendChild(svgElement);
+            catch {
+                // Stale overlay (page navigated/closed) — the fresh one already replaced it.
             }
-            const pos = position;
-            cursor.style.transitionDuration = '0s';
-            cursor.style.transform = `translate(${pos.x - tipX}px, ${pos.y - tipY}px)`;
-            root.appendChild(cursor);
-        }, [
-            id,
-            this.cursorPos,
-            InteractionVisualizer.SVG_MOUSE,
-            JSON.stringify(InteractionVisualizer.SVG_MOUSE_JSON),
-            InteractionVisualizer.TIP_X,
-            InteractionVisualizer.TIP_Y,
-        ]);
-    }
-    async moveCursor(page, target, duration) {
-        await this.ensureCursor(page);
-        const id = InteractionVisualizer.CONTAINER_ID;
-        await page.evaluate(([containerId, end, duration, tipX, tipY]) => {
-            const root = document.getElementById(containerId).shadowRoot;
-            const cursor = root.querySelector('.donobu-virtual-mouse');
-            cursor.style.transitionDuration = `${duration}ms`;
-            const endPos = end;
-            cursor.style.transform = `translate(${endPos.x - tipX}px, ${endPos.y - tipY}px)`;
-            cursor.classList.add('rippling');
-            const done = new Promise((resolve) => {
-                const finish = () => {
-                    cursor.removeEventListener('transitionend', finish);
-                    cursor.classList.remove('rippling');
-                    resolve();
-                };
-                cursor.addEventListener('transitionend', finish);
-                setTimeout(finish, duration + 50);
+        }
+        // showOverlay resolves the moment the overlay is added, before the CSS
+        // glide plays. Callers (e.g. ClickTool) await pointAt expecting the cursor
+        // to reach the element *before* they act, so block for the animation here.
+        if (animMs > 0) {
+            await new Promise((resolve) => {
+                setTimeout(resolve, animMs);
             });
-            return done;
-        }, [
-            id,
-            target,
-            duration,
-            InteractionVisualizer.TIP_X,
-            InteractionVisualizer.TIP_Y,
-        ]);
-        this.cursorPos = target;
+        }
     }
     async showMessage(page, target, text, duration) {
-        const id = InteractionVisualizer.CONTAINER_ID;
-        await page.evaluate(([containerId, target, text, duration]) => {
-            containerId = containerId;
-            target = target;
-            text = text;
-            duration = duration;
-            const root = document.getElementById(containerId)
-                .shadowRoot;
-            const msg = document.createElement('div');
-            msg.className = 'donobu-message';
-            msg.textContent = text;
-            root.appendChild(msg);
-            /* ── compute final coordinates ────────────────────────────────── */
-            const { width, height } = msg.getBoundingClientRect();
-            let x = target.x - width / 2;
-            let y = target.y + 24; // default - below cursor
-            /* clamp horizontally inside viewport */
-            x = Math.max(8, Math.min(window.innerWidth - width - 8, x));
-            /* if it overflows bottom, flip above the element */
-            if (y + height + 8 > window.innerHeight) {
-                y = target.y - height - 24;
-            }
-            /* if still off-screen at the top, clamp to 8 px margin */
-            if (y < 8) {
-                y = 8;
-            }
-            msg.style.left = `${x}px`;
-            msg.style.top = `${y}px`;
-            /* auto-remove after the requested duration */
-            setTimeout(() => msg.remove(), duration);
-        }, [id, target, text, duration]);
+        // Sticky overlay + self-managed removal. The `duration` option on
+        // showOverlay only composites into the recorded screencast stream, not the
+        // live page render layer (so it would be invisible in headed/screenshots);
+        // a no-duration overlay renders everywhere, matching the cursor.
+        const handle = await page.screencast.showOverlay(this.buildMessageHtml(page, target, text));
+        const timer = setTimeout(() => {
+            handle.dispose().catch(() => {
+                // Page navigated/closed before the message expired — nothing to clean up.
+            });
+        }, duration);
+        // Don't let a pending message removal keep the process alive on shutdown.
+        timer.unref?.();
+    }
+    /**
+     * Builds the cursor overlay markup: the arrow SVG plus a `@keyframes` glide
+     * from the previous position and a one-shot ripple at the arrow tip.
+     */
+    buildCursorHtml(from, to, animMs) {
+        const tipX = InteractionVisualizer.TIP_X;
+        const tipY = InteractionVisualizer.TIP_Y;
+        const fx = from.x - tipX;
+        const fy = from.y - tipY;
+        const tx = to.x - tipX;
+        const ty = to.y - tipY;
+        const animate = animMs > 0 && (from.x !== to.x || from.y !== to.y);
+        return `
+<style>
+  @keyframes donobu-glide { from { transform: translate(${fx}px, ${fy}px); } to { transform: translate(${tx}px, ${ty}px); } }
+  @keyframes donobu-ripple { 0% { transform: translate(-50%,-50%) scale(.5); opacity:0; } 40% { transform: translate(-50%,-50%) scale(1); opacity:.5; } 100% { transform: translate(-50%,-50%) scale(2); opacity:0; } }
+  .donobu-cursor { position:fixed; left:0; top:0; width:32px; height:32px; z-index:2147483646; pointer-events:none; filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5)); transform: translate(${tx}px, ${ty}px); ${animate ? `animation: donobu-glide ${animMs}ms ease-in-out;` : ''} }
+  .donobu-cursor svg { width:100%; height:100%; display:block; }
+  ${animate ? `.donobu-cursor::after { content:""; position:absolute; left:${tipX}px; top:${tipY}px; width:24px; height:24px; border-radius:50%; background:#FF781B; opacity:0; animation: donobu-ripple .6s ease-out ${animMs}ms both; }` : ''}
+</style>
+<div class="donobu-cursor">${InteractionVisualizer.SVG_MOUSE}</div>`;
+    }
+    /**
+     * Builds the message tooltip markup, positioned near `target` and clamped
+     * inside the viewport. Without being able to measure the rendered box, we
+     * keep it on-screen with a conservative max-width clamp and anchor it above
+     * the cursor (via `translateY(-100%)`) when the cursor sits low in the page.
+     */
+    buildMessageHtml(page, target, text) {
+        const maxW = InteractionVisualizer.MESSAGE_MAX_WIDTH;
+        const margin = InteractionVisualizer.MESSAGE_MARGIN;
+        const vp = page.viewportSize() ?? { width: 1280, height: 720 };
+        // Clamp the (centered) anchor so a max-width box can't overflow either edge.
+        const centerX = Math.max(maxW / 2 + margin, Math.min(vp.width - maxW / 2 - margin, target.x));
+        const placeAbove = target.y > vp.height * 0.6;
+        const top = placeAbove ? Math.max(margin, target.y - 24) : target.y + 24;
+        const translate = placeAbove
+            ? 'translate(-50%, -100%)'
+            : 'translate(-50%, 0)';
+        const style = [
+            'position:fixed',
+            `left:${centerX}px`,
+            `top:${top}px`,
+            `transform:${translate}`,
+            `max-width:${maxW}px`,
+            'z-index:2147483647',
+            'pointer-events:none',
+            'background:#000',
+            'color:#fff',
+            'padding:8px 10px',
+            'border-radius:5px',
+            "font:12px/1 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif",
+            'white-space:pre-wrap',
+            'box-shadow:2px 2px 10px rgba(0,0,0,.2)',
+        ].join(';');
+        return `<div style="${style}">${InteractionVisualizer.escapeHtml(text)}</div>`;
     }
 }
 exports.InteractionVisualizer = InteractionVisualizer;
@@ -269,29 +235,7 @@ InteractionVisualizer.SVG_MOUSE = `
      stroke-linejoin="round">
   <path d="${InteractionVisualizer.RAW_MOUSE_D}" />
 </svg>`;
-InteractionVisualizer.SVG_MOUSE_JSON = {
-    svg: {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: '32',
-        height: '32',
-        viewBox: '0 0 24 24',
-        fill: 'oklch(13.09% 0.005 165.18)',
-        stroke: '#FF781B',
-        'stroke-width': '2',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-    },
-    path: {
-        d: InteractionVisualizer.RAW_MOUSE_D,
-    },
-};
-InteractionVisualizer.CSS = `
-  .donobu-message{position:absolute;z-index:2147483647;background:#000;color:#fff;padding:8px 10px;border-radius:5px;font:12px/1 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;max-width:300px;white-space:pre-wrap;box-shadow:2px 2px 10px rgba(0,0,0,.2);pointer-events:none}
-  .donobu-virtual-mouse{width:24px;height:24px;position:absolute;z-index:2147483646;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5));transition:transform .15s ease-in-out;pointer-events:none;opacity:1;visibility:visible}
-  .donobu-virtual-mouse.hidden{opacity:0;visibility:hidden}
-  .donobu-virtual-mouse svg{width:100%;height:100%;display:block}
-  .donobu-virtual-mouse.rippling::after{content:"";position:absolute;left:${InteractionVisualizer.TIP_X}px;top:${InteractionVisualizer.TIP_Y}px;width:24px;height:24px;border-radius:50%;background:#FF781B;transform:translate(-50%,-50%) scale(.5);opacity:.4;animation:ripple-pop .6s ease-out forwards}
-  @keyframes ripple-pop{40%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
-`;
-InteractionVisualizer.CONTAINER_ID = 'donobu-iv-overlay';
+/** Message tooltip box styling — mirrors the legacy `.donobu-message` rule. */
+InteractionVisualizer.MESSAGE_MAX_WIDTH = 300;
+InteractionVisualizer.MESSAGE_MARGIN = 8;
 //# sourceMappingURL=InteractionVisualizer.js.map

package/dist/reporter/buildReport.js

@@ -41,27 +41,6 @@ function buildDonobuReport(resultsByTest, rootDir) {
         }
         byTitle.get(test.title).push(test);
     }
-    // Declared project dependency graph (`FullProject.dependencies`), keyed by
-    // project name. The auto-heal orchestrator uses it to keep the rerun gate
-    // away from projects that are declared dependencies of heal targets — those
-    // must run in full, exactly as Playwright schedules them.
-    const projectDependencies = {};
-    for (const test of resultsByTest.keys()) {
-        try {
-            let suite = test.parent;
-            while (suite && suite.type !== 'project') {
-                suite = suite.parent;
-            }
-            const project = suite?.project();
-            if (project?.name && !(project.name in projectDependencies)) {
-                projectDependencies[project.name] = [...(project.dependencies ?? [])];
-            }
-        }
-        catch {
-            // Reporter shape drift — omit the entry; the orchestrator degrades to
-            // gating only the heal targets' own projects.
-        }
-    }
     const suites = [];
     for (const [file, titleMap] of byFile) {
         const specs = [];
@@ -137,7 +116,7 @@ function buildDonobuReport(resultsByTest, rootDir) {
         }
         suites.push({ file, specs });
     }
-    return { suites, metadata: { projectDependencies } };
+    return { suites, metadata: {} };
 }
 /**
  * Whether any enclosing suite is in serial mode (`test.describe.serial` or

package/dist/reporter/model.d.ts

@@ -57,13 +57,6 @@ export interface DonobuReportMetadata {
     /** True on reports that are the result of merging an initial + heal run. */
     donobuMergedReport?: boolean;
     mergedAtIso?: string;
-    /**
-     * Declared Playwright project dependency graph (`FullProject.dependencies`)
-     * keyed by project name, recorded by the reporter. The auto-heal
-     * orchestrator uses it to exclude declared dependencies of heal targets
-     * from the rerun gate — they must run in full.
-     */
-    projectDependencies?: Record<string, string[]>;
     sources?: {
         initial?: string | null;
         autoHeal?: string | null;

package/dist/utils/BrowserUtils.js

@@ -199,22 +199,7 @@ class BrowserUtils {
                     // If the entry exists but doesn't have sessionStorage yet, add the property
                     originEntry.sessionStorage = [];
                 }
-                // Extract sessionStorage from the page
-                const sessionStorageItems = await page.evaluate(() => {
-                    const items = [];
-                    for (let i = 0; i < sessionStorage.length; i++) {
-                        const name = sessionStorage.key(i);
-                        if (name) {
-                            items.push({
-                                name,
-                                value: sessionStorage.getItem(name) || '',
-                            });
-                        }
-                    }
-                    return items;
-                });
-                // Add sessionStorage items to the origin entry
-                originEntry.sessionStorage = sessionStorageItems;
+                originEntry.sessionStorage = await page.sessionStorage.items();
             }
             catch (error) {
                 Logger_1.appLogger.warn(`Failed to extract sessionStorage for page: ${pageUrl}`, error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "donobu",
-  "version": "5.60.3",
+  "version": "5.60.5",
   "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
   "main": "dist/main.js",
   "module": "dist/esm/main.js",
@@ -46,7 +46,7 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.0",
     "@types/better-sqlite3": "^7.6.13",
     "@types/express": "^5.0.6",
     "@types/node": "^22.10.5",
@@ -59,8 +59,8 @@
     "eslint-plugin-perfectionist": "^5.9.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^16.0.0",
-    "playwright": "^1.60.0",
-    "playwright-core": "^1.60.0",
+    "playwright": "^1.61.0",
+    "playwright-core": "^1.61.0",
     "typescript-eslint": "^8.47.0",
     "vitest": "^4.0.17",
     "winston-transport": "^4.9.0"
@@ -86,9 +86,9 @@
     "zod": "^4.3.5"
   },
   "peerDependencies": {
-    "@playwright/test": ">=1.40.0",
-    "playwright": ">=1.40.0",
-    "playwright-core": ">=1.40.0"
+    "@playwright/test": ">=1.61.0",
+    "playwright": ">=1.61.0",
+    "playwright-core": ">=1.61.0"
   },
   "peerDependenciesMeta": {
     "playwright": {