real-browser-mcp-server 1.5.0 → 2.0.0

package/dist/src/mcp/handlers/vision.js

@@ -1,616 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visionHandlers = void 0;
-const path = __importStar(require("path"));
-const fs = __importStar(require("fs"));
-const state_1 = require("./state");
-const helpers_1 = require("./helpers");
-// Auto-generated vision handlers
+const vision_captcha_1 = require("./vision-captcha");
+const vision_see_page_1 = require("./vision-see-page");
 exports.visionHandlers = {
     async solve_captcha(params = {}) {
-        const { page } = (0, state_1.requireBrowser)();
-        const { type = 'auto', timeout = 30000, 
-        // OCR-specific options
-        captchaSelector, inputSelector, refreshSelector, lang = 'eng', expectedLength, allowedChars, maxRetries = 3, 
-        // iFrame Support
-        iframe = null, iframeSelector = null, 
-        // Accuracy options
-        analyzeFirst = true, // Analyze page before solving
-        autoRetry = true, // Auto-retry until success
-        // MERGED: Form automation options (from form_automator)
-        formData, // Form field data to fill
-        formSelector, // Form selector (auto-detect if not provided)
-        submit = false, // Auto-submit after filling
-        humanLike = true, // Human-like typing delays
-        aiMatch = true, // AI matches fields even if names differ
-         } = params;
-        // Resolve target frame
-        let targetFrame = page;
-        if (iframe !== null && iframe !== undefined || iframeSelector) {
-            const resolved = await helpers_1.helpersHandlers._resolveIframeContext(page, iframe, iframeSelector);
-            if (resolved.success) {
-                targetFrame = resolved.targetFrame;
-                (0, state_1.notifyProgress)('solve_captcha', 'progress', `🎯 Targeting iframe ${iframe ?? iframeSelector}...`);
-            }
-            else {
-                return { success: false, error: resolved.error };
-            }
-        }
-        // ═══════════════════════════════════════════════════════════════
-        // STEP 0: FORM AUTOMATION (if formData is provided)
-        // ═══════════════════════════════════════════════════════════════
-        let formResult = null;
-        if (formData && Object.keys(formData).length > 0) {
-            (0, state_1.notifyProgress)('solve_captcha', 'started', `📋 Smart Form + Captcha Mode: Filling ${Object.keys(formData).length} fields...`);
-            formResult = await helpers_1.helpersHandlers._fillFormFields(page, formData, formSelector, humanLike, aiMatch);
-        }
-        else {
-            (0, state_1.notifyProgress)('solve_captcha', 'started', `🎯 100% Accuracy Mode: Solving ${type} captcha...`);
-        }
-        // ═══════════════════════════════════════════════════════════════
-        // STEP 0.5: AUTO-DETECT JS CAPTCHA TYPE (Cloudflare/reCAPTCHA/hCaptcha)
-        // ═══════════════════════════════════════════════════════════════
-        let detectedJsType = null;
-        if (type === 'auto') {
-            detectedJsType = await page.evaluate(() => {
-                // Cloudflare WAF challenge page
-                if (document.title.includes('Just a moment') ||
-                    document.querySelector('#challenge-stage') !== null ||
-                    document.querySelector('.cf-turnstile') !== null ||
-                    document.querySelector('input[name="cf-turnstile-response"]') !== null) {
-                    return 'turnstile';
-                }
-                // reCAPTCHA v2/v3
-                if (document.querySelector('.g-recaptcha') !== null ||
-                    document.querySelector('iframe[src*="recaptcha"]') !== null ||
-                    document.querySelector('#g-recaptcha-response') !== null) {
-                    return 'recaptcha';
-                }
-                // hCaptcha
-                if (document.querySelector('.h-captcha') !== null ||
-                    document.querySelector('iframe[src*="hcaptcha"]') !== null) {
-                    return 'hcaptcha';
-                }
-                return null;
-            });
-            if (detectedJsType) {
-                (0, state_1.notifyProgress)('solve_captcha', 'progress', `🔍 Auto-detected JS captcha type: ${detectedJsType}`);
-            }
-        }
-        // ═══════════════════════════════════════════════════════════════
-        // STEP 1: ANALYZE PAGE (if enabled)
-        // ═══════════════════════════════════════════════════════════════
-        let pageAnalysis = null;
-        let detectedCaptchaSelector = captchaSelector;
-        let detectedInputSelector = inputSelector;
-        if (analyzeFirst) {
-            (0, state_1.notifyProgress)('solve_captcha', 'progress', '🔍 Analyzing page structure...');
-            pageAnalysis = await targetFrame.evaluate(() => {
-                const result = {
-                    captchas: [],
-                    captchaInputs: [],
-                    forms: [],
-                };
-                // Find all captcha images
-                const captchaSelectors = [
-                    'img[src*="captcha"]', 'img[alt*="captcha"]', 'img[id*="captcha"]',
-                    '.captcha-image', '#captcha_image', '#captchaImg', '.captcha',
-                    'img[src*="Captcha"]', 'canvas[id*="captcha"]'
-                ];
-                captchaSelectors.forEach(sel => {
-                    document.querySelectorAll(sel).forEach((el) => {
-                        if (el.offsetParent !== null) { // Visible
-                            // AI is smart: we don't need hardcoded filters. We just grab candidate images.
-                            // To avoid grabbing top-header logos, we can just check if the image is inside a form.
-                            const isInsideForm = el.closest('form') !== null;
-                            result.captchas.push({
-                                selector: el.id ? `#${el.id}` : sel,
-                                src: el.src || null,
-                                width: el.width,
-                                height: el.height,
-                                isInsideForm: isInsideForm
-                            });
-                        }
-                    });
-                });
-                // Find captcha input fields
-                const inputSelectors = [
-                    'input[name*="captcha"]', 'input[id*="captcha"]', '#fcaptcha_code',
-                    'input[placeholder*="captcha"]', 'input[placeholder*="Enter"]',
-                    '#captchaInput', '.captcha-input'
-                ];
-                inputSelectors.forEach(sel => {
-                    document.querySelectorAll(sel).forEach((el) => {
-                        if (el.offsetParent !== null && el.type !== 'hidden') {
-                            result.captchaInputs.push({
-                                selector: el.id ? `#${el.id}` : (el.name ? `[name="${el.name}"]` : sel),
-                                placeholder: el.placeholder,
-                                maxLength: el.maxLength > 0 ? el.maxLength : null,
-                            });
-                        }
-                    });
-                });
-                // Find forms
-                document.querySelectorAll('form').forEach(form => {
-                    const hasCaptcha = form.querySelector('img[src*="captcha"], input[name*="captcha"]');
-                    if (hasCaptcha) {
-                        result.forms.push({
-                            id: form.id || null,
-                            action: form.action,
-                            submitBtn: form.querySelector('button[type="submit"], input[type="submit"]')?.id || null,
-                        });
-                    }
-                });
-                return result;
-            });
-            // Auto-detect selectors if not provided
-            if (!captchaSelector && pageAnalysis.captchas.length > 0) {
-                detectedCaptchaSelector = pageAnalysis.captchas[0].selector;
-                (0, state_1.notifyProgress)('solve_captcha', 'progress', `📍 Auto-detected captcha: ${detectedCaptchaSelector}`);
-            }
-            if (!inputSelector && pageAnalysis.captchaInputs.length > 0) {
-                detectedInputSelector = pageAnalysis.captchaInputs[0].selector;
-                // Auto-detect expected length from maxLength
-                if (!expectedLength && pageAnalysis.captchaInputs[0].maxLength) {
-                    params.expectedLength = pageAnalysis.captchaInputs[0].maxLength;
-                }
-                (0, state_1.notifyProgress)('solve_captcha', 'progress', `📍 Auto-detected input: ${detectedInputSelector}`);
-            }
-        }
-        // Handle text/image captcha with OCR/Vision
-        // ponytail: only enter OCR path if explicitly text/image or auto-detected an image captcha (not a JS captcha)
-        if (type === 'text' || type === 'image' || (type === 'auto' && detectedCaptchaSelector && !detectedJsType)) {
-            if (!detectedCaptchaSelector) {
-                return { success: false, error: 'captchaSelector not provided and could not auto-detect' };
-            }
-            const effectiveMaxRetries = autoRetry ? maxRetries : 1;
-            for (let attempt = 1; attempt <= effectiveMaxRetries; attempt++) {
-                try {
-                    (0, state_1.notifyProgress)('solve_captcha', 'progress', `📸 Capturing CAPTCHA image... (attempt ${attempt}/${effectiveMaxRetries})`);
-                    // If retrying, refresh captcha first
-                    if (attempt > 1 && refreshSelector) {
-                        try {
-                            (0, state_1.notifyProgress)('solve_captcha', 'progress', '🔄 Refreshing CAPTCHA...');
-                            await targetFrame.click(refreshSelector);
-                            await new Promise(r => setTimeout(r, 1500));
-                        }
-                        catch (refreshErr) {
-                            (0, state_1.notifyProgress)('solve_captcha', 'progress', `⚠️ Could not refresh captcha: ${refreshErr.message}`);
-                        }
-                    }
-                    let targetHandle = null;
-                    // 1. SMART AI CONTEXT: Try to capture the form container so AI sees the full context
-                    if (detectedInputSelector) {
-                        try {
-                            const containerHandle = await targetFrame.evaluateHandle((sel) => {
-                                const input = document.querySelector(sel);
-                                if (!input)
-                                    return null;
-                                return input.closest('form') || input.closest('div.captcha-wrapper') || input.parentElement?.parentElement || input.parentElement;
-                            }, detectedInputSelector);
-                            if (containerHandle && await containerHandle.evaluate((n) => n !== null)) {
-                                targetHandle = containerHandle.asElement();
-                            }
-                        }
-                        catch (e) { }
-                    }
-                    // 2. Fallback to just the captcha image if no container found
-                    if (!targetHandle && detectedCaptchaSelector) {
-                        try {
-                            targetHandle = await targetFrame.waitForSelector(detectedCaptchaSelector, { timeout: 5000 });
-                        }
-                        catch (e) { }
-                    }
-                    if (!targetHandle) {
-                        return { success: false, error: 'Could not find elements to capture' };
-                    }
-                    // Scroll into view
-                    await targetHandle.evaluate((el) => el.scrollIntoView({ behavior: 'smooth', block: 'center' }));
-                    await new Promise(r => setTimeout(r, 500));
-                    // CAPTCHA इमेज का स्क्रीनशॉट — सीधे AI IDE एजेंट को भेजना है
-                    let captchaImageBase64 = null;
-                    try {
-                        const captchaEl = await targetFrame.$(detectedCaptchaSelector);
-                        if (captchaEl) {
-                            captchaImageBase64 = (await captchaEl.screenshot()).toString('base64');
-                        }
-                    }
-                    catch (e) { }
-                    // पूरे context का स्क्रीनशॉट (form + captcha एक साथ दिखे)
-                    const screenshotBase64 = (await targetHandle.screenshot()).toString('base64');
-                    // ═══════════════════════════════════════════════════════════
-                    // AI IDE एजेंट को CAPTCHA इमेज भेजो — वो पढ़ कर जवाब देगा
-                    // ponytail: कोई external API नहीं, AI IDE एजेंट ही काफ़ी है
-                    // ═══════════════════════════════════════════════════════════
-                    const langHint = lang !== 'eng' ? `\nध्यान दें: टेक्स्ट ${lang === 'hin' ? 'हिन्दी' : lang} भाषा में हो सकता है।` : '';
-                    (0, state_1.notifyProgress)('solve_captcha', 'progress', '📤 CAPTCHA इमेज AI IDE एजेंट को भेज रहे हैं...');
-                    const instructions = `[कार्रवाई आवश्यक: CAPTCHA हल करें]\n\nCAPTCHA इमेज सफलतापूर्वक कैप्चर की गई (संलग्न देखें)।${langHint}\n\n1. अपनी Vision क्षमता से इमेज में दिखे टेक्स्ट/अक्षर पढ़ें।\n2. टेक्स्ट मिलने पर \`type\` टूल से selector \`${detectedInputSelector || '<input_selector>'}\` में भरें।\n3. सबमिट अनुरोध: ${submit ? 'हाँ — फॉर्म सबमिट भी करें' : 'नहीं'}।\n\nनोट: इस CAPTCHA के लिए \`solve_captcha\` दोबारा न बुलाएं, इमेज पहले ही मिल चुकी है।`;
-                    return {
-                        success: true,
-                        mcpContent: [
-                            { type: 'text', text: instructions },
-                            { type: 'image', data: captchaImageBase64 || screenshotBase64, mimeType: 'image/png' }
-                        ]
-                    };
-                }
-                catch (err) {
-                    (0, state_1.notifyProgress)('solve_captcha', 'error', `Vision capture error (attempt ${attempt}): ${err.message}`);
-                    if (attempt >= effectiveMaxRetries) {
-                        return { success: false, error: err.message, type: 'vision_capture', formResult };
-                    }
-                }
-            }
-            return { success: false, error: 'All captcha solving attempts exhausted', formResult };
-        }
-        // ═══════════════════════════════════════════════════════════════
-        // JS-BASED CAPTCHA HANDLING (Turnstile / reCAPTCHA / hCaptcha)
-        // ═══════════════════════════════════════════════════════════════
-        const effectiveType = type !== 'auto' ? type : (detectedJsType || 'turnstile');
-        // reCAPTCHA / hCaptcha — not yet implemented, return honest error
-        // ponytail: no fake support — tell the user the truth
-        if (effectiveType === 'recaptcha' || effectiveType === 'hcaptcha') {
-            return {
-                success: false,
-                error: `${effectiveType} solving is not yet implemented. Use a third-party service (e.g. 2Captcha) or the browser extension approach.`,
-                detectedType: effectiveType,
-                formResult
-            };
-        }
-        // Turnstile / Cloudflare WAF handling — active click + token polling
-        const start = Date.now();
-        let attempts = 0;
-        while (Date.now() - start < timeout) {
-            attempts++;
-            // ACTIVE: Try clicking the Cloudflare checkbox (like turnstile.ts does)
-            // ponytail: click attempt every 3rd iteration to avoid spam, passive poll otherwise
-            if (attempts % 3 === 1) {
-                try {
-                    await page.evaluate(() => {
-                        // Method 1: Find turnstile widget container and click checkbox area
-                        const coordinates = [];
-                        document.querySelectorAll('div').forEach(item => {
-                            try {
-                                const rect = item.getBoundingClientRect();
-                                const css = window.getComputedStyle(item);
-                                // Turnstile checkbox container: ~300px wide, no children, minimal styling
-                                if (rect.width > 290 && rect.width <= 310 && !item.querySelector('*')) {
-                                    if (css.margin === '0px' && css.padding === '0px') {
-                                        coordinates.push({ x: rect.x, y: rect.y, h: rect.height });
-                                    }
-                                }
-                            }
-                            catch (_) { }
-                        });
-                        return coordinates;
-                    }).then(async (coords) => {
-                        for (const item of coords) {
-                            await page.mouse.click(item.x + 30, item.y + item.h / 2);
-                        }
-                    });
-                }
-                catch (_) { }
-            }
-            // PASSIVE: Check if token is ready
-            const turnstileToken = await page.evaluate(() => {
-                const input = document.querySelector('input[name="cf-turnstile-response"]');
-                return input && input.value ? input.value : null;
-            });
-            if (turnstileToken) {
-                (0, state_1.notifyProgress)('solve_captcha', 'completed', `✅ Turnstile solved after ${attempts} checks`, { type: 'turnstile', attempts });
-                // Handle form submission if requested
-                if (submit) {
-                    (0, state_1.notifyProgress)('solve_captcha', 'progress', '🚀 Submitting form...');
-                    const submitResult = await helpers_1.helpersHandlers._submitForm(page);
-                    return {
-                        success: true,
-                        type: 'turnstile',
-                        solved: true,
-                        formResult,
-                        submitted: submitResult.success,
-                        submitMessage: submitResult.message
-                    };
-                }
-                return { success: true, type: 'turnstile', solved: true, formResult };
-            }
-            // Check if Cloudflare challenge page has resolved (redirect happened)
-            const stillOnChallenge = await page.evaluate(() => {
-                return document.title.includes('Just a moment') ||
-                    document.querySelector('#challenge-stage') !== null;
-            });
-            if (!stillOnChallenge && attempts > 3) {
-                // Challenge page gone — WAF solved via redirect
-                (0, state_1.notifyProgress)('solve_captcha', 'completed', `✅ Cloudflare WAF challenge passed after ${attempts} checks (page redirected)`);
-                return {
-                    success: true,
-                    type: 'cloudflare_waf',
-                    solved: true,
-                    method: 'challenge_redirect',
-                    attempts,
-                    formResult
-                };
-            }
-            if (attempts % 10 === 0) {
-                (0, state_1.notifyProgress)('solve_captcha', 'progress', `Still solving... (${attempts} checks)`, { attempts });
-            }
-            await new Promise(r => setTimeout(r, 1000));
-        }
-        (0, state_1.notifyProgress)('solve_captcha', 'error', 'Captcha solving timeout');
-        return { success: false, error: 'Captcha solving timeout', type: effectiveType, formResult };
+        return (0, vision_captcha_1.solveCaptcha)(params);
     },
     async see_page(params = {}) {
-        const { page } = (0, state_1.requireBrowser)();
-        const { fullPage = false, format = 'jpeg', quality = 70, includeElements = true, annotate = false, includeDomText = false, maxElements = 60, path: savePath, autoHover = false, watchMutations = false } = params;
-        (0, state_1.notifyProgress)('see_page', 'started', `👁️ Looking at the page (${fullPage ? 'full page' : 'viewport'})${annotate ? ' with Super Annotations' : ''}...`);
-        let mutationsSinceLastCheck = [];
-        if (watchMutations) {
-            mutationsSinceLastCheck = await page.evaluate(() => {
-                if (!window.__mutations) {
-                    window.__mutations = [];
-                    const observer = new MutationObserver((mutations) => {
-                        for (const m of mutations) {
-                            if (m.addedNodes.length) {
-                                const text = Array.from(m.addedNodes).map((n) => n.innerText || '').join(' ').trim();
-                                if (text.length > 5)
-                                    window.__mutations.push({ time: Date.now(), text: text.slice(0, 100) });
-                            }
-                        }
-                    });
-                    observer.observe(document.body, { childList: true, subtree: true });
-                }
-                const recent = [...window.__mutations];
-                window.__mutations = []; // clear after reading
-                return recent;
-            });
-        }
-        if (autoHover) {
-            (0, state_1.notifyProgress)('see_page', 'progress', 'Hovering over menus to reveal dropdowns...');
-            await page.evaluate(() => {
-                const hoverables = document.querySelectorAll('nav, li, [role="menuitem"], .dropdown, [aria-haspopup="true"]');
-                hoverables.forEach(el => {
-                    try {
-                        el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-                        el.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-                    }
-                    catch (e) { }
-                });
-            });
-            await new Promise(r => setTimeout(r, 400)); // Wait for CSS transitions
-        }
-        let elements = [];
-        let pageInfo = {};
-        // 1. Build a "visual map" of visible interactive elements (what a human can act on)
-        // If annotate=true, this also injects visual bounding boxes into the DOM
-        if (includeElements || annotate) {
-            const data = await page.evaluate(({ maxEls, isFullPage, doAnnotate }) => {
-                const out = [];
-                const seen = new Set();
-                const sel = 'a[href], button, input, select, textarea, [role="button"], [role="link"], [onclick], [tabindex]';
-                const nodes = document.querySelectorAll(sel);
-                const cssPath = (el) => {
-                    if (el.id)
-                        return `#${CSS.escape(el.id)}`;
-                    if (el.name)
-                        return `${el.tagName.toLowerCase()}[name="${el.name}"]`;
-                    const parts = [];
-                    let node = el;
-                    while (node && node.nodeType === 1 && parts.length < 4) {
-                        let part = node.tagName.toLowerCase();
-                        if (node.classList.length) {
-                            const cls = Array.from(node.classList).slice(0, 2).map((c) => '.' + CSS.escape(c)).join('');
-                            part += cls;
-                        }
-                        const parent = node.parentElement;
-                        if (parent) {
-                            const sibs = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
-                            if (sibs.length > 1)
-                                part += `:nth-of-type(${sibs.indexOf(node) + 1})`;
-                        }
-                        parts.unshift(part);
-                        node = node.parentElement;
-                    }
-                    return parts.join(' > ');
-                };
-                let elementIdCounter = 1;
-                const boxesToInject = [];
-                for (const el of nodes) {
-                    if (out.length >= maxEls)
-                        break;
-                    const rect = el.getBoundingClientRect();
-                    // Only elements actually visible on screen
-                    if (rect.width < 2 || rect.height < 2)
-                        continue;
-                    const style = window.getComputedStyle(el);
-                    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0')
-                        continue;
-                    if (!isFullPage) {
-                        if (rect.bottom < 0 || rect.right < 0 || rect.top > window.innerHeight || rect.left > window.innerWidth) {
-                            // outside current viewport — skip (we report what is seen)
-                            continue;
-                        }
-                    }
-                    const tag = el.tagName.toLowerCase();
-                    let label = (el.innerText || el.value || el.getAttribute('aria-label') || el.getAttribute('placeholder') || el.getAttribute('title') || el.getAttribute('alt') || '').trim().replace(/\s+/g, ' ').slice(0, 80);
-                    let kind = tag;
-                    if (tag === 'a')
-                        kind = 'link';
-                    else if (tag === 'button' || el.getAttribute('role') === 'button')
-                        kind = 'button';
-                    else if (tag === 'input')
-                        kind = `input:${el.type || 'text'}`;
-                    else if (tag === 'select')
-                        kind = 'select';
-                    else if (tag === 'textarea')
-                        kind = 'textarea';
-                    const selector = cssPath(el);
-                    if (seen.has(selector + '|' + label))
-                        continue;
-                    seen.add(selector + '|' + label);
-                    const annotationId = elementIdCounter++;
-                    if (doAnnotate) {
-                        boxesToInject.push({ id: annotationId, rect, tag: kind });
-                    }
-                    out.push({
-                        id: annotationId,
-                        kind,
-                        text: label,
-                        selector,
-                        href: tag === 'a' ? el.href : undefined,
-                        box: { x: Math.round(rect.x), y: Math.round(rect.y), w: Math.round(rect.width), h: Math.round(rect.height) }
-                    });
-                }
-                // Inject the boxes into the DOM
-                if (doAnnotate && boxesToInject.length > 0) {
-                    let container = document.getElementById('real-browser-annotations');
-                    if (container)
-                        container.remove();
-                    container = document.createElement('div');
-                    container.id = 'real-browser-annotations';
-                    // Ensure container sits exactly on top of the document without affecting layout
-                    container.style.position = 'absolute';
-                    container.style.top = '0';
-                    container.style.left = '0';
-                    container.style.width = '100%';
-                    container.style.height = '100%';
-                    container.style.pointerEvents = 'none';
-                    container.style.zIndex = '2147483647'; // Max z-index
-                    for (const box of boxesToInject) {
-                        // Adjust box coordinates by scroll position because container is absolute (document relative)
-                        const absoluteY = box.rect.y + window.scrollY;
-                        const absoluteX = box.rect.x + window.scrollX;
-                        const div = document.createElement('div');
-                        div.style.position = 'absolute';
-                        div.style.border = '2px solid red';
-                        div.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
-                        div.style.left = absoluteX + 'px';
-                        div.style.top = absoluteY + 'px';
-                        div.style.width = box.rect.width + 'px';
-                        div.style.height = box.rect.height + 'px';
-                        div.style.boxSizing = 'border-box';
-                        const label = document.createElement('div');
-                        label.innerText = String(box.id);
-                        label.style.position = 'absolute';
-                        label.style.top = '-2px';
-                        label.style.left = '-2px';
-                        label.style.backgroundColor = 'red';
-                        label.style.color = 'white';
-                        label.style.fontSize = '12px';
-                        label.style.fontWeight = 'bold';
-                        label.style.padding = '1px 4px';
-                        label.style.fontFamily = 'monospace';
-                        label.style.borderBottomRightRadius = '4px';
-                        div.appendChild(label);
-                        container.appendChild(div);
-                    }
-                    document.body.appendChild(container);
-                }
-                return {
-                    elements: out,
-                    info: {
-                        title: document.title,
-                        url: location.href,
-                        viewport: { width: window.innerWidth, height: window.innerHeight },
-                        scrollY: Math.round(window.scrollY),
-                        scrollHeight: document.body ? document.body.scrollHeight : 0
-                    }
-                };
-            }, { maxEls: maxElements, isFullPage: fullPage, doAnnotate: annotate }).catch((e) => { console.error(e); return { elements: [], info: {} }; });
-            elements = data.elements || [];
-            pageInfo = data.info || {};
-            // Save elements to state for quick annotation ID mapping
-            state_1.state.activeAnnotations = {};
-            for (const el of elements) {
-                state_1.state.activeAnnotations[el.id] = { selector: el.selector, text: el.text, type: el.kind };
-            }
-        }
-        // 2. Capture what the page looks like (with annotations if injected)
-        const shotOpts = { type: format, fullPage };
-        if (format === 'jpeg' && typeof quality === 'number')
-            shotOpts.quality = quality;
-        let buffer;
-        try {
-            buffer = await page.screenshot(shotOpts);
-        }
-        catch (e) {
-            return { success: false, error: `Vision capture failed: ${e.message}` };
-        }
-        // 2.1 Cleanup annotations if we injected them
-        if (annotate) {
-            await page.evaluate(() => {
-                const container = document.getElementById('real-browser-annotations');
-                if (container)
-                    container.remove();
-            }).catch(() => { });
-        }
-        let domText = undefined;
-        if (includeDomText) {
-            domText = await page.evaluate(() => {
-                return document.body ? document.body.innerText : '';
-            }).catch(() => '');
-        }
-        // 3. Optionally save the image too
-        let savedTo = null;
-        if (savePath) {
-            const dir = path.dirname(savePath);
-            if (dir && !fs.existsSync(dir))
-                fs.mkdirSync(dir, { recursive: true });
-            fs.writeFileSync(savePath, buffer);
-            savedTo = savePath;
-        }
-        (0, state_1.notifyProgress)('see_page', 'completed', `👁️ Saw the page: ${elements.length} interactive elements visible${savedTo ? ' (saved ' + savedTo + ')' : ''}`);
-        const base64 = Buffer.from(buffer).toString('base64');
-        const summary = {
-            success: true,
-            url: pageInfo.url || page.url(),
-            title: pageInfo.title,
-            viewport: pageInfo.viewport,
-            scroll: { y: pageInfo.scrollY, pageHeight: pageInfo.scrollHeight },
-            visibleInteractiveElements: elements.length,
-            domText,
-            mutationsSinceLastCheck: watchMutations ? mutationsSinceLastCheck : undefined,
-            elements,
-            savedTo
-        };
-        // Return BOTH the actual image (so the AI literally "sees" it) and the visual map text
-        return {
-            mcpContent: [
-                { type: 'image', data: base64, mimeType: format === 'jpeg' ? 'image/jpeg' : 'image/png' },
-                { type: 'text', text: JSON.stringify(summary, null, 2) }
-            ],
-            ...summary
-        };
+        return (0, vision_see_page_1.seePage)(params);
     }
 };
 //# sourceMappingURL=vision.js.map