@wong2kim/wmux 1.1.2 → 2.0.1

package/dist/mcp/mcp/playwright/tools/inspection.js

@@ -5,6 +5,8 @@ const zod_1 = require("zod");
 const PlaywrightEngine_1 = require("../PlaywrightEngine");
 const snapshot_1 = require("../snapshot");
 const anti_detection_1 = require("../anti-detection");
+const security_1 = require("../security");
+const wmux_client_1 = require("../../wmux-client");
 // Optional surfaceId schema reused across tools
 const optionalSurfaceId = zod_1.z
     .string()
@@ -126,13 +128,53 @@ function registerInspectionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ format, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+            // Try Playwright for full snapshot
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                const snapshot = await (0, snapshot_1.generateSnapshot)(page, { format: format ?? 'ai' });
+                return {
+                    content: [{ type: 'text', text: snapshot }],
+                };
             }
-            const snapshot = await (0, snapshot_1.generateSnapshot)(page, { format: format ?? 'ai' });
+            // Fallback: extract page structure via RPC evaluation
+            // Tags interactive elements with data-wmux-ref so interaction tools can resolve them
+            const result = await (0, wmux_client_1.sendRpc)('browser.evaluate', {
+                expression: `(() => {
+            const sel = 'a[href], button, input:not([type="hidden"]), textarea, select, [role="button"], [role="link"], [role="textbox"], [role="checkbox"], [role="radio"], [role="combobox"], [role="searchbox"], [role="tab"], [contenteditable="true"]';
+            const interactives = [...document.querySelectorAll(sel)].slice(0, 100);
+            interactives.forEach((el, i) => el.setAttribute('data-wmux-ref', String(i)));
+            const title = document.title;
+            const url = location.href;
+            const lines = ['Page: ' + title, 'URL: ' + url, ''];
+            document.querySelectorAll('h1,h2,h3').forEach(h => {
+              lines.push(h.tagName + ': ' + (h.textContent || '').trim().substring(0, 80));
+            });
+            lines.push('', 'Interactive elements (use ref number for click/fill/type):');
+            interactives.forEach((el, i) => {
+              const tag = el.tagName.toLowerCase();
+              const role = el.getAttribute('role') || '';
+              const text = (el.textContent || '').trim().substring(0, 60);
+              const label = el.getAttribute('aria-label') || '';
+              const name = el.getAttribute('name') || '';
+              const type = el.getAttribute('type') || '';
+              const placeholder = el.getAttribute('placeholder') || '';
+              const href = el.getAttribute('href') || '';
+              let desc = '  [ref=' + i + '] ' + tag;
+              if (type) desc += '[type=' + type + ']';
+              if (role) desc += '[role=' + role + ']';
+              if (name) desc += ' name="' + name + '"';
+              if (label) desc += ' "' + label + '"';
+              else if (text) desc += ' "' + text + '"';
+              if (placeholder) desc += ' placeholder="' + placeholder + '"';
+              if (href) desc += ' -> ' + href.substring(0, 60);
+              lines.push(desc);
+            });
+            return lines.join('\\n');
+          })()`,
+                ...(surfaceId && { surfaceId }),
+            });
             return {
-                content: [{ type: 'text', text: snapshot }],
+                content: [{ type: 'text', text: result.value }],
             };
         }
         catch (error) {
@@ -146,7 +188,7 @@ function registerInspectionTools(server) {
     // -----------------------------------------------------------------------
     // browser_screenshot
     // -----------------------------------------------------------------------
-    server.tool('browser_screenshot', 'Take a screenshot of the current page or a specific element. Returns the image as base64-encoded PNG.', {
+    server.tool('browser_screenshot', 'Take a screenshot of the current page or a specific element. Returns the image as base64-encoded PNG. Requires browser_open to be called first to establish a connection, even if a browser panel is already visible.', {
         fullPage: zod_1.z
             .boolean()
             .optional()
@@ -158,27 +200,30 @@ function registerInspectionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ fullPage, ref, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
-            }
-            let buffer;
+            // Try Playwright for element-level screenshots (ref)
             if (ref) {
-                const el = await (0, snapshot_1.resolveRef)(page, ref);
-                if (!el) {
-                    throw new Error(`Could not resolve ref="${ref}" to an element.`);
+                const page = await engine.getPage(surfaceId);
+                if (page) {
+                    const el = await (0, snapshot_1.resolveRef)(page, ref);
+                    if (!el) {
+                        throw new Error(`Could not resolve ref="${ref}" to an element.`);
+                    }
+                    const buffer = (await el.screenshot());
+                    return {
+                        content: [{ type: 'image', data: buffer.toString('base64'), mimeType: 'image/png' }],
+                    };
                 }
-                buffer = (await el.screenshot());
             }
-            else {
-                buffer = (await page.screenshot({ fullPage: fullPage ?? false }));
-            }
-            const base64 = buffer.toString('base64');
+            // Use RPC for fast, reliable screenshots (bypasses Playwright CDP discovery)
+            const result = await (0, wmux_client_1.sendRpc)('browser.screenshot', {
+                ...(surfaceId && { surfaceId }),
+                ...(fullPage && { fullPage }),
+            });
             return {
                 content: [
                     {
                         type: 'image',
-                        data: base64,
+                        data: result.data,
                         mimeType: 'image/png',
                     },
                 ],
@@ -200,12 +245,31 @@ function registerInspectionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ expression, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+            const warnings = (0, security_1.detectDangerousPatterns)(expression);
+            if (warnings.length > 0) {
+                console.warn(`[browser_evaluate] Dangerous patterns detected: ${warnings.join(', ')}`);
+            }
+            let result;
+            // Try Playwright first for gesture-aware evaluation
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                result = await (0, anti_detection_1.evaluateWithGesture)(page, expression);
+            }
+            else {
+                // Fallback: RPC evaluation via main process webContents
+                const rpcResult = await (0, wmux_client_1.sendRpc)('browser.evaluate', {
+                    expression,
+                    ...(surfaceId && { surfaceId }),
+                });
+                result = rpcResult.value;
+            }
+            const text = typeof result === 'string' ? result : (JSON.stringify(result, null, 2) ?? 'undefined');
+            if (warnings.length > 0) {
+                const warningText = `\u26A0 Security warning: expression contains potentially dangerous patterns: ${warnings.join(', ')}. Exercise caution with untrusted input.\n\n`;
+                return {
+                    content: [{ type: 'text', text: warningText + text }],
+                };
             }
-            const result = await (0, anti_detection_1.evaluateWithGesture)(page, expression);
-            const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
             return {
                 content: [{ type: 'text', text: text ?? 'undefined' }],
             };
@@ -235,7 +299,7 @@ function registerInspectionTools(server) {
         try {
             const page = await engine.getPage(surfaceId);
             if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+                throw new Error('No browser page available. Call browser_open with a URL first to establish a CDP connection (required even if a browser panel is already visible).');
             }
             const key = surfaceKey(surfaceId);
             ensureConsoleListener(page, key);
@@ -280,7 +344,7 @@ function registerInspectionTools(server) {
         try {
             const page = await engine.getPage(surfaceId);
             if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+                throw new Error('No browser page available. Call browser_open with a URL first to establish a CDP connection (required even if a browser panel is already visible).');
             }
             const key = surfaceKey(surfaceId);
             ensureNetworkListener(page, key);
@@ -320,7 +384,7 @@ function registerInspectionTools(server) {
         try {
             const page = await engine.getPage(surfaceId);
             if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+                throw new Error('No browser page available. Call browser_open with a URL first to establish a CDP connection (required even if a browser panel is already visible).');
             }
             const key = surfaceKey(surfaceId);
             ensureNetworkListener(page, key);
@@ -370,7 +434,7 @@ function registerInspectionTools(server) {
         try {
             const page = await engine.getPage(surfaceId);
             if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+                throw new Error('No browser page available. Call browser_open with a URL first to establish a CDP connection (required even if a browser panel is already visible).');
             }
             const el = await (0, snapshot_1.resolveRef)(page, ref);
             if (!el) {

package/dist/mcp/mcp/playwright/tools/interaction.js

@@ -6,6 +6,7 @@ const PlaywrightEngine_1 = require("../PlaywrightEngine");
 const snapshot_1 = require("../snapshot");
 const dom_intelligence_1 = require("../dom-intelligence");
 const human_typing_1 = require("../human-typing");
+const wmux_client_1 = require("../../wmux-client");
 // Optional surfaceId schema reused across tools
 const optionalSurfaceId = zod_1.z
     .string()
@@ -15,6 +16,46 @@ const REF_NOT_FOUND_HINT = 'Element with ref={ref} not found. Run browser_snapsh
 function refNotFound(ref) {
     return REF_NOT_FOUND_HINT.replace('{ref}', ref);
 }
+// ---------------------------------------------------------------------------
+// RPC-based interaction helpers (used when Playwright page is unavailable)
+// These resolve elements via data-wmux-ref attributes set by browser_snapshot.
+// ---------------------------------------------------------------------------
+async function rpcEval(expression, surfaceId) {
+    const result = await (0, wmux_client_1.sendRpc)('browser.evaluate', {
+        expression,
+        ...(surfaceId && { surfaceId }),
+    });
+    return result.value;
+}
+async function rpcClick(ref, surfaceId, _double) {
+    // Use CDP click: first get element coordinates via JS, then dispatch mouse events
+    await (0, wmux_client_1.sendRpc)('browser.click.cdp', {
+        selector: `[data-wmux-ref="${ref}"]`,
+        ...(surfaceId && { surfaceId }),
+    });
+}
+async function rpcFill(ref, value, surfaceId) {
+    // Click on the element first to focus it
+    await rpcClick(ref, surfaceId);
+    // Small delay for focus
+    await new Promise(r => setTimeout(r, 100));
+    // Select all existing text
+    await (0, wmux_client_1.sendRpc)('browser.evaluate', {
+        expression: `document.execCommand('selectAll')`,
+        ...(surfaceId && { surfaceId }),
+    });
+    // Type the new value via CDP Input.insertText (handles CJK, React controlled inputs)
+    await (0, wmux_client_1.sendRpc)('browser.type.cdp', {
+        text: value,
+        ...(surfaceId && { surfaceId }),
+    });
+}
+async function rpcPressKey(key, surfaceId) {
+    await (0, wmux_client_1.sendRpc)('browser.press.cdp', {
+        key,
+        ...(surfaceId && { surfaceId }),
+    });
+}
 /**
  * Register interaction-related MCP tools on the given server.
  *
@@ -46,52 +87,43 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ ref, smartRef, double, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
-            }
-            if (smartRef !== undefined) {
-                // Use dom-intelligence ref resolution
-                const selector = (0, dom_intelligence_1.getLocatorByRef)(smartRef);
-                if (!selector) {
-                    throw new Error(`Element with smartRef=${smartRef} not found. Run browser_smart_snapshot to get current refs.`);
-                }
-                const locator = page.locator(selector);
-                if (double) {
-                    await locator.dblclick();
-                }
-                else {
-                    await locator.click();
+            // Try Playwright first
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                if (smartRef !== undefined) {
+                    const selector = (0, dom_intelligence_1.getLocatorByRef)(smartRef);
+                    if (!selector) {
+                        throw new Error(`Element with smartRef=${smartRef} not found. Run browser_smart_snapshot to get current refs.`);
+                    }
+                    const locator = page.locator(selector);
+                    if (double)
+                        await locator.dblclick();
+                    else
+                        await locator.click();
+                    return {
+                        content: [{ type: 'text', text: `Clicked${double ? ' (double)' : ''} element smartRef=${smartRef}` }],
+                    };
                 }
+                if (!ref)
+                    throw new Error('Either ref or smartRef must be provided.');
+                const el = await (0, snapshot_1.resolveRef)(page, ref);
+                if (!el)
+                    throw new Error(refNotFound(ref));
+                if (double)
+                    await el.dblclick();
+                else
+                    await el.click();
                 return {
-                    content: [
-                        {
-                            type: 'text',
-                            text: `Clicked${double ? ' (double)' : ''} element smartRef=${smartRef}`,
-                        },
-                    ],
+                    content: [{ type: 'text', text: `Clicked${double ? ' (double)' : ''} element ref=${ref}` }],
                 };
             }
-            if (!ref) {
+            // RPC fallback
+            if (!ref && smartRef === undefined)
                 throw new Error('Either ref or smartRef must be provided.');
-            }
-            const el = await (0, snapshot_1.resolveRef)(page, ref);
-            if (!el) {
-                throw new Error(refNotFound(ref));
-            }
-            if (double) {
-                await el.dblclick();
-            }
-            else {
-                await el.click();
-            }
+            const resolvedRef = ref ?? String(smartRef);
+            await rpcClick(resolvedRef, surfaceId, double);
             return {
-                content: [
-                    {
-                        type: 'text',
-                        text: `Clicked${double ? ' (double)' : ''} element ref=${ref}`,
-                    },
-                ],
+                content: [{ type: 'text', text: `Clicked${double ? ' (double)' : ''} element ref=${resolvedRef}` }],
             };
         }
         catch (error) {
@@ -119,24 +151,26 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ ref, text, submit, humanlike, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
-            }
-            const el = await (0, snapshot_1.resolveRef)(page, ref);
-            if (!el) {
-                throw new Error(refNotFound(ref));
-            }
-            if (humanlike) {
-                // Focus the element first, then use human-like typing via keyboard
-                await el.click();
-                await (0, human_typing_1.typeHumanlike)(page, '', text);
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                const el = await (0, snapshot_1.resolveRef)(page, ref);
+                if (!el)
+                    throw new Error(refNotFound(ref));
+                if (humanlike) {
+                    await el.click();
+                    await (0, human_typing_1.typeHumanlike)(page, '', text);
+                }
+                else {
+                    await el.fill(text);
+                }
+                if (submit)
+                    await page.keyboard.press('Enter');
             }
             else {
-                await el.fill(text);
-            }
-            if (submit) {
-                await page.keyboard.press('Enter');
+                // RPC fallback
+                await rpcFill(ref, text, surfaceId);
+                if (submit)
+                    await rpcPressKey('Enter', surfaceId);
             }
             return {
                 content: [
@@ -168,20 +202,27 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ fields, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
-            }
+            const page = await engine.getPage(surfaceId).catch(() => null);
             let filled = 0;
             const errors = [];
             for (const field of fields) {
-                const el = await (0, snapshot_1.resolveRef)(page, field.ref);
-                if (!el) {
-                    errors.push(refNotFound(field.ref));
-                    continue;
+                try {
+                    if (page) {
+                        const el = await (0, snapshot_1.resolveRef)(page, field.ref);
+                        if (!el) {
+                            errors.push(refNotFound(field.ref));
+                            continue;
+                        }
+                        await el.fill(field.value);
+                    }
+                    else {
+                        await rpcFill(field.ref, field.value, surfaceId);
+                    }
+                    filled++;
+                }
+                catch (err) {
+                    errors.push(err instanceof Error ? err.message : String(err));
                 }
-                await el.fill(field.value);
-                filled++;
             }
             let resultText = `Filled ${filled}/${fields.length} field(s).`;
             if (errors.length > 0) {
@@ -210,11 +251,13 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ key, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                await page.keyboard.press(key);
+            }
+            else {
+                await rpcPressKey(key, surfaceId);
             }
-            await page.keyboard.press(key);
             return {
                 content: [{ type: 'text', text: `Pressed key: ${key}` }],
             };
@@ -235,19 +278,28 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ ref, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                const el = await (0, snapshot_1.resolveRef)(page, ref);
+                if (!el)
+                    throw new Error(refNotFound(ref));
+                await el.hover();
             }
-            const el = await (0, snapshot_1.resolveRef)(page, ref);
-            if (!el) {
-                throw new Error(refNotFound(ref));
+            else {
+                // RPC fallback: dispatch mouseover event
+                const val = await rpcEval(`(() => {
+            const el = document.querySelector('[data-wmux-ref="${ref}"]');
+            if (!el) return 'not_found';
+            el.scrollIntoView({ block: 'center', behavior: 'instant' });
+            el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+            el.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+            return 'ok';
+          })()`, surfaceId);
+                if (val === 'not_found')
+                    throw new Error(refNotFound(ref));
             }
-            await el.hover();
             return {
-                content: [
-                    { type: 'text', text: `Hovered over element ref=${ref}` },
-                ],
+                content: [{ type: 'text', text: `Hovered over element ref=${ref}` }],
             };
         }
         catch (error) {
@@ -269,40 +321,49 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ sourceRef, targetRef, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
-            }
-            const sourceEl = await (0, snapshot_1.resolveRef)(page, sourceRef);
-            if (!sourceEl) {
-                throw new Error(refNotFound(sourceRef));
-            }
-            const targetEl = await (0, snapshot_1.resolveRef)(page, targetRef);
-            if (!targetEl) {
-                throw new Error(refNotFound(targetRef));
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                const sourceEl = await (0, snapshot_1.resolveRef)(page, sourceRef);
+                if (!sourceEl)
+                    throw new Error(refNotFound(sourceRef));
+                const targetEl = await (0, snapshot_1.resolveRef)(page, targetRef);
+                if (!targetEl)
+                    throw new Error(refNotFound(targetRef));
+                const sourceBox = await sourceEl.boundingBox();
+                const targetBox = await targetEl.boundingBox();
+                if (!sourceBox || !targetBox) {
+                    throw new Error('Could not determine bounding box for source or target element.');
+                }
+                const sourceX = sourceBox.x + sourceBox.width / 2;
+                const sourceY = sourceBox.y + sourceBox.height / 2;
+                const targetX = targetBox.x + targetBox.width / 2;
+                const targetY = targetBox.y + targetBox.height / 2;
+                await page.mouse.move(sourceX, sourceY);
+                await page.mouse.down();
+                await page.mouse.move(targetX, targetY, { steps: 10 });
+                await page.mouse.up();
             }
-            // Get bounding boxes for source and target
-            const sourceBox = await sourceEl.boundingBox();
-            const targetBox = await targetEl.boundingBox();
-            if (!sourceBox || !targetBox) {
-                throw new Error('Could not determine bounding box for source or target element.');
+            else {
+                // RPC fallback: simplified drag via JS events
+                const val = await rpcEval(`(() => {
+            const src = document.querySelector('[data-wmux-ref="${sourceRef}"]');
+            const tgt = document.querySelector('[data-wmux-ref="${targetRef}"]');
+            if (!src) return 'source_not_found';
+            if (!tgt) return 'target_not_found';
+            const dt = new DataTransfer();
+            src.dispatchEvent(new DragEvent('dragstart', { bubbles: true, dataTransfer: dt }));
+            tgt.dispatchEvent(new DragEvent('dragover', { bubbles: true, dataTransfer: dt }));
+            tgt.dispatchEvent(new DragEvent('drop', { bubbles: true, dataTransfer: dt }));
+            src.dispatchEvent(new DragEvent('dragend', { bubbles: true, dataTransfer: dt }));
+            return 'ok';
+          })()`, surfaceId);
+                if (val === 'source_not_found')
+                    throw new Error(refNotFound(sourceRef));
+                if (val === 'target_not_found')
+                    throw new Error(refNotFound(targetRef));
             }
-            // Perform drag from center of source to center of target
-            const sourceX = sourceBox.x + sourceBox.width / 2;
-            const sourceY = sourceBox.y + sourceBox.height / 2;
-            const targetX = targetBox.x + targetBox.width / 2;
-            const targetY = targetBox.y + targetBox.height / 2;
-            await page.mouse.move(sourceX, sourceY);
-            await page.mouse.down();
-            await page.mouse.move(targetX, targetY, { steps: 10 });
-            await page.mouse.up();
             return {
-                content: [
-                    {
-                        type: 'text',
-                        text: `Dragged element ref=${sourceRef} to ref=${targetRef}`,
-                    },
-                ],
+                content: [{ type: 'text', text: `Dragged element ref=${sourceRef} to ref=${targetRef}` }],
             };
         }
         catch (error) {
@@ -324,22 +385,28 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ ref, values, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                const el = await (0, snapshot_1.resolveRef)(page, ref);
+                if (!el)
+                    throw new Error(refNotFound(ref));
+                await el.selectOption(values);
             }
-            const el = await (0, snapshot_1.resolveRef)(page, ref);
-            if (!el) {
-                throw new Error(refNotFound(ref));
+            else {
+                const escapedValues = JSON.stringify(values);
+                const val = await rpcEval(`(() => {
+            const el = document.querySelector('[data-wmux-ref="${ref}"]');
+            if (!el || el.tagName !== 'SELECT') return 'not_found';
+            const vals = ${escapedValues};
+            [...el.options].forEach(o => { o.selected = vals.includes(o.value); });
+            el.dispatchEvent(new Event('change', { bubbles: true }));
+            return 'ok';
+          })()`, surfaceId);
+                if (val === 'not_found')
+                    throw new Error(refNotFound(ref));
             }
-            await el.selectOption(values);
             return {
-                content: [
-                    {
-                        type: 'text',
-                        text: `Selected value(s) [${values.join(', ')}] in element ref=${ref}`,
-                    },
-                ],
+                content: [{ type: 'text', text: `Selected value(s) [${values.join(', ')}] in element ref=${ref}` }],
             };
         }
         catch (error) {
@@ -358,22 +425,25 @@ function registerInteractionTools(server) {
         surfaceId: optionalSurfaceId,
     }, async ({ ref, surfaceId }) => {
         try {
-            const page = await engine.getPage(surfaceId);
-            if (!page) {
-                throw new Error('No browser page available. Call browser_open first.');
+            const page = await engine.getPage(surfaceId).catch(() => null);
+            if (page) {
+                const el = await (0, snapshot_1.resolveRef)(page, ref);
+                if (!el)
+                    throw new Error(refNotFound(ref));
+                await el.scrollIntoViewIfNeeded();
             }
-            const el = await (0, snapshot_1.resolveRef)(page, ref);
-            if (!el) {
-                throw new Error(refNotFound(ref));
+            else {
+                const val = await rpcEval(`(() => {
+            const el = document.querySelector('[data-wmux-ref="${ref}"]');
+            if (!el) return 'not_found';
+            el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            return 'ok';
+          })()`, surfaceId);
+                if (val === 'not_found')
+                    throw new Error(refNotFound(ref));
             }
-            await el.scrollIntoViewIfNeeded();
             return {
-                content: [
-                    {
-                        type: 'text',
-                        text: `Scrolled element ref=${ref} into view`,
-                    },
-                ],
+                content: [{ type: 'text', text: `Scrolled element ref=${ref} into view` }],
             };
         }
         catch (error) {