@nexus-cortex/executors 4.26.0

package/dist/implementations/addon/VisualFeedbackBridge.js

@@ -0,0 +1,888 @@
+/**
+ * Visual Feedback Bridge
+ *
+ * Enables the MODEL to see and interact with tools it creates.
+ *
+ * Flow:
+ * 1. Model creates tool → UI spins up
+ * 2. Bridge captures screenshot/DOM
+ * 3. Returns visual data to model
+ * 4. Model analyzes output
+ * 5. Model edits code or spawns interaction agent
+ * 6. Hot reload applies changes
+ * 7. Repeat until satisfied
+ */
+import { chromium } from 'playwright';
+import { getChromiumBinary } from '../../utils/ChromiumBrowserManager.js';
+import { PRELOAD_SCRIPT, DETECT_SCRIPT, SCAN_SCRIPT, GRAB_SCRIPT, TREE_SCRIPT, TRACE_START_SCRIPT, TRACE_REPORT_SCRIPT } from './injectables/reactIntrospection.js';
+/**
+ * Visual Feedback Bridge
+ *
+ * Allows model to:
+ * - See its creations (screenshot + DOM)
+ * - Interact with UI (Playwright automation)
+ * - Iterate rapidly (hot reload + visual diff)
+ * - Delegate to sub-agents (complex interactions)
+ */
+export class VisualFeedbackBridge {
+    browser = null;
+    page = null;
+    consoleLogs = [];
+    networkRequests = [];
+    reactIntrospection = false;
+    /**
+     * Enable React introspection for all SUBSEQUENT navigations: installs the
+     * DevTools-hook shim + fiber utilities via addInitScript (must run before the
+     * page's React loads — addInitScript guarantees pre-script execution).
+     * Idempotent; safe to call lazily because captureSnapshot/sandboxScan/etc.
+     * always navigate after this.
+     */
+    async enableReactIntrospection() {
+        if (this.reactIntrospection)
+            return;
+        if (!this.page)
+            throw new Error('Browser not initialized');
+        await this.page.addInitScript(PRELOAD_SCRIPT);
+        this.reactIntrospection = true;
+    }
+    isReactIntrospectionEnabled() {
+        return this.reactIntrospection;
+    }
+    /** Ensure the page is on the given URL (navigates only when needed). */
+    async ensureOnUrl(url) {
+        if (!this.page)
+            throw new Error('Browser not initialized');
+        // Normalize before comparing — the browser adds a trailing slash to an origin-only URL
+        // (http://host:port -> http://host:port/). Without this, every call re-navigates, which
+        // (critically) resets the in-page render-trace counters between start and report.
+        const norm = (u) => { try {
+            return new URL(u).href;
+        }
+        catch {
+            return u;
+        } };
+        if (norm(this.page.url()) !== norm(url)) {
+            await this.page.goto(url, { waitUntil: 'networkidle' });
+            // Settle for client-side frameworks. The definitive "React rendered" signal is the
+            // introspection commit hook setting __lastRoot; for non-React/SSR pages, fall back to
+            // the mount point gaining children. Generous timeout for cold bundle parse + mount.
+            await this.page
+                .waitForFunction(() => {
+                const cr = window.__cortexReact;
+                if (cr && cr.__lastRoot)
+                    return true; // React committed
+                const m = document.querySelector('#root, #app, [data-reactroot]');
+                return !m || m.childElementCount > 0; // non-React or DOM populated
+            }, { timeout: 2500 })
+                .catch(() => { });
+            await this.page.waitForTimeout(200);
+        }
+    }
+    /**
+     * Wait for React to have committed at least once (the introspection commit hook sets
+     * __lastRoot) — runs even when ensureOnUrl did NOT navigate, so a tree/scan/grab/trace
+     * call on an already-loaded page doesn't race a still-mounting app. No-op for non-React.
+     */
+    async awaitReactReady() {
+        if (!this.page)
+            return;
+        await this.page
+            .waitForFunction(() => {
+            const cr = window.__cortexReact;
+            if (cr && cr.__lastRoot)
+                return true; // React committed
+            const m = document.querySelector('#root, #app, [data-reactroot]');
+            return !m || m.childElementCount > 0; // non-React or DOM populated
+        }, { timeout: 2500 })
+            .catch(() => { });
+    }
+    /** Is a render trace currently active on the live page? (no navigation) */
+    async isTraceActive() {
+        if (!this.page)
+            return false;
+        try {
+            return await this.page.evaluate(() => !!(window.__cortexRenderTrace && window.__cortexRenderTrace.enabled));
+        }
+        catch {
+            return false;
+        }
+    }
+    /** detect_framework against the given sandbox URL (nexus-browser schema). */
+    async sandboxDetect(url) {
+        await this.enableReactIntrospection();
+        await this.ensureOnUrl(url);
+        await this.awaitReactReady();
+        return (await this.page.evaluate(DETECT_SCRIPT));
+    }
+    /**
+     * Element discovery (nexus-browser scan contract): elements carry a unique
+     * cssSelector + isInteractive/relevanceScore, and componentName on React pages.
+     */
+    async sandboxScan(url, args = {}) {
+        await this.enableReactIntrospection();
+        await this.ensureOnUrl(url);
+        await this.awaitReactReady();
+        return await this.page.evaluate(`(${SCAN_SCRIPT})(${JSON.stringify(args)})`);
+    }
+    /**
+     * Single-element query by selector or coordinates (nexus-browser grab contract),
+     * auto-enriched with react:{componentName,componentStack,props,sourceLocation}.
+     */
+    async sandboxGrab(url, args) {
+        await this.enableReactIntrospection();
+        await this.ensureOnUrl(url);
+        await this.awaitReactReady();
+        return await this.page.evaluate(`(${GRAB_SCRIPT})(${JSON.stringify(args)})`);
+    }
+    /** Component hierarchy of the React tree (component-tree role). */
+    async sandboxComponentTree(url, args = {}) {
+        await this.enableReactIntrospection();
+        await this.ensureOnUrl(url);
+        await this.awaitReactReady();
+        return await this.page.evaluate(`(${TREE_SCRIPT})(${JSON.stringify(args)})`);
+    }
+    /** Begin a render trace (react-scan role). Resets + enables the commit interceptor. */
+    async sandboxTraceStart(url) {
+        await this.enableReactIntrospection();
+        await this.ensureOnUrl(url);
+        await this.awaitReactReady();
+        return await this.page.evaluate(TRACE_START_SCRIPT);
+    }
+    /** Stop (or peek) a render trace and return per-component render counts/timings. */
+    async sandboxTraceReport(url, args = {}) {
+        await this.enableReactIntrospection();
+        await this.ensureOnUrl(url);
+        return await this.page.evaluate(`(${TRACE_REPORT_SCRIPT})(${JSON.stringify(args)})`);
+    }
+    /**
+     * Initialize browser for visual feedback
+     * @param config Optional configuration for browser launch
+     */
+    async initialize(config = {}) {
+        if (this.browser)
+            return;
+        const launchOptions = {
+            headless: config.headless ?? true,
+            slowMo: config.slowMo ?? 0,
+            args: [
+                '--no-sandbox',
+                '--disable-setuid-sandbox',
+                '--disable-dev-shm-usage', // Prevent shared memory issues
+                '--disable-gpu' // Disable GPU for headless
+            ]
+        };
+        // Use system chromium if specified, otherwise auto-detect
+        if (config.executablePath) {
+            launchOptions.executablePath = config.executablePath;
+            console.log(`[VisualFeedbackBridge] Using provided chromium: ${config.executablePath}`);
+        }
+        else {
+            // Auto-detect chromium binary
+            const chromiumBin = getChromiumBinary();
+            if (chromiumBin) {
+                launchOptions.executablePath = chromiumBin;
+                console.log(`[VisualFeedbackBridge] Using auto-detected chromium: ${chromiumBin}`);
+            }
+            else {
+                console.warn(`[VisualFeedbackBridge] No chromium binary found, using Playwright's bundled browser (may require dependencies)`);
+            }
+        }
+        // Add user data directory if specified (for persistent profiles)
+        if (config.userDataDir) {
+            launchOptions.args.push(`--user-data-dir=${config.userDataDir}`);
+        }
+        this.browser = await chromium.launch(launchOptions);
+        this.page = await this.browser.newPage();
+        // Capture console logs
+        this.page.on('console', (msg) => {
+            this.consoleLogs.push(`[${msg.type()}] ${msg.text()}`);
+        });
+        // Capture network requests
+        this.page.on('request', (request) => {
+            // Track requests
+        });
+        this.page.on('response', async (response) => {
+            try {
+                const request = response.request();
+                this.networkRequests.push({
+                    url: request.url(),
+                    method: request.method(),
+                    status: response.status(),
+                    timing: 0 // TODO: Calculate from timing API
+                });
+            }
+            catch (error) {
+                // Ignore errors
+            }
+        });
+    }
+    /**
+     * Get the Playwright page instance
+     */
+    getPage() {
+        return this.page;
+    }
+    /**
+     * Navigate to a URL
+     */
+    async navigate(url) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        await this.page.goto(url, { waitUntil: 'networkidle' });
+    }
+    /**
+     * Capture screenshot of current page
+     */
+    async captureScreenshot() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        return await this.page.screenshot({ type: 'png', fullPage: true });
+    }
+    /**
+     * Navigate to tool URL and capture snapshot
+     */
+    async captureSnapshot(url) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        // Reset tracking
+        this.consoleLogs = [];
+        this.networkRequests = [];
+        // Navigate to page
+        const startTime = Date.now();
+        await this.page.goto(url, { waitUntil: 'networkidle' });
+        const loadTime = Date.now() - startTime;
+        // Wait for render
+        await this.page.waitForTimeout(1000);
+        // Capture screenshot
+        const screenshot = await this.page.screenshot({
+            type: 'png',
+            fullPage: true
+        });
+        // Get DOM structure
+        const dom = await this.page.content();
+        // Get performance metrics
+        const performanceMetrics = await this.page.evaluate(() => {
+            const perf = performance.getEntriesByType?.('navigation')?.[0];
+            return {
+                loadTime: perf?.loadEventEnd - perf?.fetchStart || 0,
+                renderTime: perf?.domContentLoadedEventEnd - perf?.fetchStart || 0,
+                memoryUsage: performance.memory?.usedJSHeapSize || 0
+            };
+        });
+        // Get accessibility tree
+        const accessibilityTree = await this.captureAccessibilityTree();
+        // Framework detection (only when React introspection is enabled)
+        let frameworkReport;
+        if (this.reactIntrospection) {
+            try {
+                frameworkReport = (await this.page.evaluate(DETECT_SCRIPT));
+            }
+            catch { /* introspection is optional — never fail the snapshot */ }
+        }
+        return {
+            ...(frameworkReport ? { react: frameworkReport } : {}),
+            screenshot: screenshot.toString('base64'),
+            dom,
+            console: this.consoleLogs,
+            network: this.networkRequests,
+            performance: {
+                loadTime,
+                renderTime: performanceMetrics.renderTime,
+                memoryUsage: performanceMetrics.memoryUsage
+            },
+            accessibility: accessibilityTree
+        };
+    }
+    /**
+     * Capture accessibility tree for semantic understanding
+     */
+    async captureAccessibilityTree() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        const snapshot = await this.page.accessibility.snapshot();
+        const roles = [];
+        const labels = [];
+        const traverse = (node) => {
+            if (!node)
+                return;
+            if (node.role)
+                roles.push(node.role);
+            if (node.name)
+                labels.push(node.name);
+            if (node.children) {
+                node.children.forEach(traverse);
+            }
+        };
+        traverse(snapshot);
+        return {
+            roles: Array.from(new Set(roles)),
+            labels: Array.from(new Set(labels)),
+            structure: snapshot
+        };
+    }
+    /**
+     * Execute interaction command
+     */
+    async interact(command) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        switch (command.type) {
+            case 'click':
+                if (command.selector) {
+                    await this.page.click(command.selector);
+                }
+                else if (command.coordinates) {
+                    await this.page.mouse.click(command.coordinates.x, command.coordinates.y);
+                }
+                break;
+            case 'type':
+                if (command.selector && command.value) {
+                    await this.page.fill(command.selector, command.value);
+                }
+                break;
+            case 'navigate':
+                if (command.value) {
+                    await this.page.goto(command.value);
+                }
+                break;
+            case 'scroll':
+                if (command.selector) {
+                    await this.page.locator(command.selector).scrollIntoViewIfNeeded();
+                }
+                else if (command.deltaX !== undefined || command.deltaY !== undefined) {
+                    await this.scroll({ deltaX: command.deltaX, deltaY: command.deltaY });
+                }
+                else if (command.coordinates) {
+                    // Legacy support
+                    await this.page.mouse.wheel(0, command.coordinates.y);
+                }
+                break;
+            case 'select':
+                if (command.selector && command.value) {
+                    await this.page.selectOption(command.selector, command.value);
+                }
+                break;
+            case 'hover':
+                if (command.selector) {
+                    await this.page.hover(command.selector);
+                }
+                break;
+            case 'keypress':
+                if (command.key) {
+                    await this.keyPress(command.key, command.modifiers);
+                }
+                break;
+            case 'zoom':
+                if (command.zoomLevel) {
+                    await this.zoom(command.zoomLevel);
+                }
+                break;
+        }
+        // Wait for any animations/updates
+        await this.page.waitForTimeout(500);
+    }
+    /**
+     * Press keyboard key or key combination
+     * @param key Key to press ('Enter', 'Escape', 'a', 'Ctrl+V', etc.)
+     * @param modifiers Optional modifier keys (['Control', 'Shift', 'Alt', 'Meta'])
+     */
+    async keyPress(key, modifiers) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        // Handle shorthand notation like 'Ctrl+V'
+        if (key.includes('+')) {
+            const parts = key.split('+');
+            if (parts.length >= 2 && parts[0] && parts[1]) {
+                const modifier = parts[0].toLowerCase();
+                const actualKey = parts[1];
+                // Convert shorthand to Playwright format
+                const modifierMap = {
+                    'ctrl': 'Control',
+                    'control': 'Control',
+                    'shift': 'Shift',
+                    'alt': 'Alt',
+                    'meta': 'Meta',
+                    'cmd': 'Meta',
+                    'command': 'Meta'
+                };
+                const playwrightModifier = modifierMap[modifier] || modifier;
+                await this.page.keyboard.press(`${playwrightModifier}+${actualKey}`);
+            }
+        }
+        else if (modifiers && modifiers.length > 0) {
+            // Use explicit modifiers
+            const modifierString = modifiers.join('+');
+            await this.page.keyboard.press(`${modifierString}+${key}`);
+        }
+        else {
+            // Simple key press
+            await this.page.keyboard.press(key);
+        }
+    }
+    /**
+     * Scroll the page
+     * @param delta Scroll delta { deltaX, deltaY }
+     */
+    async scroll(delta) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        await this.page.mouse.wheel(delta.deltaX || 0, delta.deltaY || 0);
+    }
+    /**
+     * Zoom the page
+     * @param level Zoom level (1.0 = 100%, 1.5 = 150%, 0.5 = 50%)
+     */
+    async zoom(level) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        await this.page.evaluate((zoomLevel) => {
+            document.body.style.zoom = `${zoomLevel * 100}%`;
+        }, level);
+    }
+    /**
+     * Copy text to clipboard
+     * @param text Text to copy to clipboard
+     */
+    async copyToClipboard(text) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        await this.page.evaluate((textToCopy) => {
+            return navigator.clipboard.writeText(textToCopy);
+        }, text);
+    }
+    /**
+     * Get text from clipboard
+     * @returns Text from clipboard
+     */
+    async getClipboard() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        return await this.page.evaluate(() => {
+            return navigator.clipboard.readText();
+        });
+    }
+    /**
+     * Paste text from clipboard at current focus
+     * Combines clipboard.writeText() with Ctrl+V keypress
+     * @param text Text to paste
+     */
+    async paste(text) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        // Write to clipboard
+        await this.copyToClipboard(text);
+        // Wait a moment for clipboard to be ready
+        await this.page.waitForTimeout(100);
+        // Press Ctrl+V to paste
+        await this.keyPress('Ctrl+V');
+    }
+    /**
+     * Execute JavaScript code in page context
+     * Much faster than visual parsing for data extraction
+     *
+     * @param code JavaScript code to execute (string or function)
+     * @returns Result of the execution
+     *
+     * @example
+     * // Get all button texts
+     * const buttons = await executeJS(() => {
+     *   return Array.from(document.querySelectorAll('button'))
+     *     .map(b => b.textContent);
+     * });
+     */
+    async executeJS(code) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        if (typeof code === 'function') {
+            return await this.page.evaluate(code);
+        }
+        else {
+            return await this.page.evaluate(code);
+        }
+    }
+    /**
+     * Execute JavaScript with arguments
+     * @param fn Function to execute in page context
+     * @param args Arguments to pass to the function
+     */
+    async executeJSWithArgs(fn, ...args) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        // Playwright evaluate accepts (fn, arg) format, not spread args
+        return await this.page.evaluate(fn, args.length === 1 ? args[0] : args);
+    }
+    /**
+     * Get complete page state including JavaScript runtime data
+     * Much faster and more comprehensive than visual parsing
+     */
+    async getPageState() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        return await this.page.evaluate(() => {
+            // @ts-ignore - Runs in browser context
+            return {
+                // Interactive elements
+                buttons: Array.from(document.querySelectorAll('button')).map((b) => ({
+                    text: b.textContent?.trim(),
+                    id: b.id,
+                    className: b.className,
+                    disabled: b.disabled,
+                    visible: b.offsetParent !== null,
+                    position: b.getBoundingClientRect()
+                })),
+                inputs: Array.from(document.querySelectorAll('input, textarea')).map((i) => ({
+                    type: i.type,
+                    name: i.name,
+                    id: i.id,
+                    value: i.value,
+                    placeholder: i.placeholder,
+                    required: i.required,
+                    disabled: i.disabled
+                })),
+                forms: Array.from(document.querySelectorAll('form')).map((f) => ({
+                    id: f.id,
+                    name: f.name,
+                    action: f.action,
+                    method: f.method,
+                    elements: f.elements.length
+                })),
+                links: Array.from(document.querySelectorAll('a')).map((a) => ({
+                    text: a.textContent?.trim(),
+                    href: a.href,
+                    target: a.target
+                })),
+                // Page metadata
+                meta: {
+                    title: document.title,
+                    url: window.location.href,
+                    referrer: document.referrer,
+                    readyState: document.readyState
+                },
+                // Storage
+                storage: {
+                    localStorage: { ...localStorage },
+                    sessionStorage: { ...sessionStorage },
+                    cookies: document.cookie
+                },
+                // Scripts and styles
+                resources: {
+                    scripts: Array.from(document.scripts).map((s) => ({
+                        src: s.src,
+                        type: s.type,
+                        async: s.async,
+                        defer: s.defer
+                    })),
+                    stylesheets: Array.from(document.styleSheets).map((s) => ({
+                        href: s.href,
+                        disabled: s.disabled
+                    }))
+                },
+                // Viewport and dimensions
+                viewport: {
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                    scrollX: window.scrollX,
+                    scrollY: window.scrollY,
+                    scrollHeight: document.documentElement.scrollHeight,
+                    scrollWidth: document.documentElement.scrollWidth
+                }
+            };
+        });
+    }
+    /**
+     * Get JavaScript errors from the page
+     * Uses Chrome DevTools Protocol for deep inspection
+     */
+    async getJavaScriptErrors() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        const errors = [];
+        // Listen for runtime exceptions
+        this.page.on('pageerror', (error) => {
+            errors.push({
+                message: error.message,
+                stack: error.stack || '',
+                timestamp: Date.now()
+            });
+        });
+        return errors;
+    }
+    /**
+     * Enable Chrome DevTools Protocol for advanced debugging
+     * Returns CDP session for direct protocol access
+     */
+    async enableDevTools() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        const client = await this.page.context().newCDPSession(this.page);
+        // Enable various DevTools domains
+        await client.send('Runtime.enable');
+        await client.send('Debugger.enable');
+        await client.send('Network.enable');
+        await client.send('Performance.enable');
+        // Listen to JavaScript exceptions
+        client.on('Runtime.exceptionThrown', (exception) => {
+            console.log('[CDP] JS Exception:', exception);
+        });
+        // Listen to console API calls
+        client.on('Runtime.consoleAPICalled', (call) => {
+            console.log('[CDP] Console call:', call);
+        });
+        return client;
+    }
+    /**
+     * Get detailed performance metrics from browser
+     * Uses Chrome DevTools Protocol Performance domain
+     */
+    async getDetailedPerformanceMetrics() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        const client = await this.page.context().newCDPSession(this.page);
+        await client.send('Performance.enable');
+        const metrics = await client.send('Performance.getMetrics');
+        const getMetric = (name) => metrics.metrics.find((m) => m.name === name)?.value || 0;
+        return {
+            scriptDuration: getMetric('ScriptDuration'),
+            layoutDuration: getMetric('LayoutDuration'),
+            recalcStyleDuration: getMetric('RecalcStyleDuration'),
+            taskDuration: getMetric('TaskDuration'),
+            jsHeapUsedSize: getMetric('JSHeapUsedSize'),
+            jsHeapTotalSize: getMetric('JSHeapTotalSize'),
+            domNodes: getMetric('Nodes'),
+            layoutCount: getMetric('LayoutCount'),
+            recalcStyleCount: getMetric('RecalcStyleCount')
+        };
+    }
+    /**
+     * Comprehensive parallel analysis - visual + structural + performance
+     * Runs all analysis types simultaneously for maximum speed
+     */
+    async comprehensiveAnalysis() {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        const url = this.page.url();
+        // Run ALL analyses in parallel for speed!
+        const [screenshot, dom, pageState, accessibilityTree, performanceMetrics] = await Promise.all([
+            this.page.screenshot({ type: 'png', fullPage: true }),
+            this.page.content(),
+            this.getPageState(),
+            this.captureAccessibilityTree(),
+            this.getDetailedPerformanceMetrics()
+        ]);
+        return {
+            url,
+            timestamp: Date.now(),
+            visual: {
+                screenshot: screenshot.toString('base64'),
+                viewport: pageState.viewport
+            },
+            structural: {
+                dom,
+                pageState,
+                accessibility: accessibilityTree
+            },
+            runtime: {
+                console: [...this.consoleLogs],
+                network: [...this.networkRequests],
+                performance: performanceMetrics
+            }
+        };
+    }
+    /**
+     * Execute batch of interactions
+     */
+    async interactBatch(commands) {
+        for (const command of commands) {
+            await this.interact(command);
+        }
+        // Capture state after interactions
+        return await this.captureSnapshot(this.page.url());
+    }
+    /**
+     * Extract structured data from page
+     */
+    async extractData(selector) {
+        if (!this.page) {
+            throw new Error('Browser not initialized');
+        }
+        if (selector) {
+            // @ts-ignore - This code runs in browser context where document exists
+            return await this.page.evaluate((sel) => {
+                const element = document.querySelector(sel);
+                return element ? element.textContent : null;
+            }, selector);
+        }
+        // Extract all structured data
+        // @ts-ignore - This code runs in browser context where document exists
+        return await this.page.evaluate(() => {
+            const data = {
+                title: document.title,
+                headings: Array.from(document.querySelectorAll('h1, h2, h3')).map((h) => h.textContent),
+                buttons: Array.from(document.querySelectorAll('button')).map((b) => ({
+                    text: b.textContent,
+                    disabled: b.disabled
+                })),
+                inputs: Array.from(document.querySelectorAll('input')).map((i) => ({
+                    type: i.type,
+                    placeholder: i.placeholder,
+                    value: i.value
+                })),
+                links: Array.from(document.querySelectorAll('a')).map((a) => ({
+                    text: a.textContent,
+                    href: a.href
+                }))
+            };
+            return data;
+        });
+    }
+    /**
+     * Get visual diff between snapshots
+     */
+    async compareSnapshots(before, after) {
+        // TODO: Implement visual diff using pixelmatch or similar
+        // For now, return DOM differences
+        const domDiff = [];
+        // Simple text diff (in production, use proper diff algorithm)
+        if (before.dom !== after.dom) {
+            domDiff.push('DOM structure changed');
+        }
+        const behaviorDiff = [];
+        // Check console logs
+        const newLogs = after.console.filter(log => !before.console.includes(log));
+        if (newLogs.length > 0) {
+            behaviorDiff.push(`New console logs: ${newLogs.length}`);
+        }
+        // Check network requests
+        if (after.network.length !== before.network.length) {
+            behaviorDiff.push(`Network requests changed: ${before.network.length} → ${after.network.length}`);
+        }
+        return {
+            imageDiff: '', // TODO: Implement pixel diff
+            domDiff,
+            behaviorDiff
+        };
+    }
+    /**
+     * Cleanup
+     */
+    async close() {
+        if (this.page) {
+            await this.page.close();
+            this.page = null;
+        }
+        if (this.browser) {
+            await this.browser.close();
+            this.browser = null;
+        }
+    }
+    /**
+     * Format snapshot for model consumption
+     */
+    formatForModel(snapshot) {
+        const lines = [];
+        lines.push('# Visual Snapshot');
+        lines.push('');
+        // Screenshot (model can see this with vision models)
+        lines.push('## Screenshot');
+        lines.push('');
+        lines.push(`![Screenshot](data:image/png;base64,${snapshot.screenshot.substring(0, 100)}...)`);
+        lines.push('');
+        lines.push('*Note: Full screenshot available as base64 in metadata*');
+        lines.push('');
+        // Framework report (when React introspection is enabled)
+        if (snapshot.react) {
+            const r = snapshot.react;
+            lines.push('## Framework');
+            lines.push('');
+            if (r.react) {
+                lines.push(`React ${r.reactVersion ?? '(version unknown)'} detected (${r.rendererCount} renderer${r.rendererCount === 1 ? '' : 's'})${r.next ? ' + Next.js' : ''}`);
+                lines.push('Use sandbox_scan / sandbox_grab for component-level inspection (componentName, props, source).');
+            }
+            else {
+                const other = ['vue', 'svelte', 'angular'].filter((k) => r[k]);
+                lines.push(other.length ? `Framework: ${other.join(', ')}` : 'No framework detected (vanilla page)');
+            }
+            if (r.heavyLibraries.length)
+                lines.push(`Heavy libraries: ${r.heavyLibraries.join(', ')}`);
+            lines.push('');
+        }
+        // Structured data the model can easily parse
+        lines.push('## Page Structure');
+        lines.push('');
+        lines.push('```html');
+        lines.push(this.simplifyDOM(snapshot.dom));
+        lines.push('```');
+        lines.push('');
+        // Accessibility tree (semantic structure)
+        lines.push('## Semantic Structure');
+        lines.push('');
+        lines.push(`**Roles**: ${snapshot.accessibility.roles.join(', ')}`);
+        lines.push(`**Labels**: ${snapshot.accessibility.labels.slice(0, 10).join(', ')}`);
+        lines.push('');
+        // Console output
+        if (snapshot.console.length > 0) {
+            lines.push('## Console Output');
+            lines.push('');
+            lines.push('```');
+            snapshot.console.forEach(log => lines.push(log));
+            lines.push('```');
+            lines.push('');
+        }
+        // Network activity
+        if (snapshot.network.length > 0) {
+            lines.push('## Network Activity');
+            lines.push('');
+            snapshot.network.slice(0, 10).forEach(req => {
+                lines.push(`- ${req.method} ${req.url} → ${req.status}`);
+            });
+            lines.push('');
+        }
+        // Performance
+        lines.push('## Performance');
+        lines.push('');
+        lines.push(`- Load Time: ${snapshot.performance.loadTime}ms`);
+        lines.push(`- Render Time: ${snapshot.performance.renderTime}ms`);
+        lines.push(`- Memory: ${(snapshot.performance.memoryUsage / 1024 / 1024).toFixed(2)} MB`);
+        lines.push('');
+        return lines.join('\n');
+    }
+    /**
+     * Simplify DOM for model understanding
+     */
+    simplifyDOM(html) {
+        // Remove scripts, styles, comments
+        let simplified = html
+            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+            .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
+            .replace(/<!--[\s\S]*?-->/g, '');
+        // Extract key structure
+        const lines = simplified.split('\n')
+            .filter(line => line.trim())
+            .map(line => line.trim())
+            .slice(0, 50); // Limit to first 50 lines
+        return lines.join('\n');
+    }
+}
+/**
+ * Singleton instance
+ */
+export const visualBridge = new VisualFeedbackBridge();
+//# sourceMappingURL=VisualFeedbackBridge.js.map