sentienceapi 0.90.9__py3-none-any.whl

sentience/extension/injected_api.js

@@ -0,0 +1,1473 @@
+// injected_api.js - MAIN WORLD (NO WASM! CSP-Resistant!)
+// This script ONLY collects raw DOM data and sends it to background for processing
+(async () => {
+    // console.log('[SentienceAPI] Initializing (CSP-Resistant Mode)...');
+
+    // Wait for Extension ID from content.js
+    const getExtensionId = () => document.documentElement.dataset.sentienceExtensionId;
+    let extId = getExtensionId();
+
+    if (!extId) {
+        await new Promise(resolve => {
+            const check = setInterval(() => {
+                extId = getExtensionId();
+                if (extId) { clearInterval(check); resolve(); }
+            }, 50);
+            setTimeout(() => resolve(), 5000); // Max 5s wait
+        });
+    }
+
+    if (!extId) {
+        console.error('[SentienceAPI] Failed to get extension ID');
+        return;
+    }
+
+    // console.log('[SentienceAPI] Extension ID:', extId);
+
+    // Registry for click actions (still needed for click() function)
+    window.sentience_registry = [];
+
+    // --- HELPER: Deep Walker with Native Filter ---
+    function getAllElements(root = document) {
+        const elements = [];
+        const filter = {
+            acceptNode: function(node) {
+                // Skip metadata and script/style tags
+                if (['SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'HEAD'].includes(node.tagName)) {
+                    return NodeFilter.FILTER_REJECT;
+                }
+                // Skip deep SVG children
+                if (node.parentNode && node.parentNode.tagName === 'SVG' && node.tagName !== 'SVG') {
+                    return NodeFilter.FILTER_REJECT;
+                }
+                return NodeFilter.FILTER_ACCEPT;
+            }
+        };
+
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, filter);
+        while(walker.nextNode()) {
+            const node = walker.currentNode;
+            if (node.isConnected) {
+                elements.push(node);
+                if (node.shadowRoot) elements.push(...getAllElements(node.shadowRoot));
+            }
+        }
+        return elements;
+    }
+
+    // --- HELPER: Smart Text Extractor ---
+    function getText(el) {
+        if (el.getAttribute('aria-label')) return el.getAttribute('aria-label');
+        if (el.tagName === 'INPUT') return el.value || el.placeholder || '';
+        if (el.tagName === 'IMG') return el.alt || '';
+        return (el.innerText || '').replace(/\s+/g, ' ').trim().substring(0, 100);
+    }
+
+    // --- HELPER: Safe Class Name Extractor (Handles SVGAnimatedString) ---
+    function getClassName(el) {
+        if (!el || !el.className) return '';
+
+        // Handle string (HTML elements)
+        if (typeof el.className === 'string') return el.className;
+
+        // Handle SVGAnimatedString (SVG elements)
+        if (typeof el.className === 'object') {
+            if ('baseVal' in el.className && typeof el.className.baseVal === 'string') {
+                return el.className.baseVal;
+            }
+            if ('animVal' in el.className && typeof el.className.animVal === 'string') {
+                return el.className.animVal;
+            }
+            // Fallback: convert to string
+            try {
+                return String(el.className);
+            } catch (e) {
+                return '';
+            }
+        }
+
+        return '';
+    }
+
+    // --- HELPER: Paranoid String Converter (Handles SVGAnimatedString) ---
+    function toSafeString(value) {
+        if (value === null || value === undefined) return null;
+
+        // 1. If it's already a primitive string, return it
+        if (typeof value === 'string') return value;
+
+        // 2. Handle SVG objects (SVGAnimatedString, SVGAnimatedNumber, etc.)
+        if (typeof value === 'object') {
+            // Try extracting baseVal (standard SVG property)
+            if ('baseVal' in value && typeof value.baseVal === 'string') {
+                return value.baseVal;
+            }
+            // Try animVal as fallback
+            if ('animVal' in value && typeof value.animVal === 'string') {
+                return value.animVal;
+            }
+            // Fallback: Force to string (prevents WASM crash even if data is less useful)
+            // This prevents the "Invalid Type" crash, even if the data is "[object SVGAnimatedString]"
+            try {
+                return String(value);
+            } catch (e) {
+                return null;
+            }
+        }
+
+        // 3. Last resort cast for primitives
+        try {
+            return String(value);
+        } catch (e) {
+            return null;
+        }
+    }
+
+    // --- HELPER: Get SVG Fill/Stroke Color ---
+    // For SVG elements, get the fill or stroke color (SVGs use fill/stroke, not backgroundColor)
+    function getSVGColor(el) {
+        if (!el || el.tagName !== 'SVG') return null;
+
+        const style = window.getComputedStyle(el);
+
+        // Try fill first (most common for SVG icons)
+        const fill = style.fill;
+        if (fill && fill !== 'none' && fill !== 'transparent' && fill !== 'rgba(0, 0, 0, 0)') {
+            // Convert fill to rgb() format if needed
+            const rgbaMatch = fill.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+            if (rgbaMatch) {
+                const alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1.0;
+                if (alpha >= 0.9) {
+                    return `rgb(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]})`;
+                }
+            } else if (fill.startsWith('rgb(')) {
+                return fill;
+            }
+        }
+
+        // Fallback to stroke if fill is not available
+        const stroke = style.stroke;
+        if (stroke && stroke !== 'none' && stroke !== 'transparent' && stroke !== 'rgba(0, 0, 0, 0)') {
+            const rgbaMatch = stroke.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+            if (rgbaMatch) {
+                const alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1.0;
+                if (alpha >= 0.9) {
+                    return `rgb(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]})`;
+                }
+            } else if (stroke.startsWith('rgb(')) {
+                return stroke;
+            }
+        }
+
+        return null;
+    }
+
+    // --- HELPER: Get Effective Background Color ---
+    // Traverses up the DOM tree to find the nearest non-transparent background color
+    // For SVGs, also checks fill/stroke properties
+    // This handles rgba(0,0,0,0) and transparent values that browsers commonly return
+    function getEffectiveBackgroundColor(el) {
+        if (!el) return null;
+
+        // For SVG elements, use fill/stroke instead of backgroundColor
+        if (el.tagName === 'SVG') {
+            const svgColor = getSVGColor(el);
+            if (svgColor) return svgColor;
+        }
+
+        let current = el;
+        const maxDepth = 10; // Prevent infinite loops
+        let depth = 0;
+
+        while (current && depth < maxDepth) {
+            const style = window.getComputedStyle(current);
+
+            // For SVG elements in the tree, also check fill/stroke
+            if (current.tagName === 'SVG') {
+                const svgColor = getSVGColor(current);
+                if (svgColor) return svgColor;
+            }
+
+            const bgColor = style.backgroundColor;
+
+            if (bgColor && bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') {
+                // Check if it's rgba with alpha < 1 (semi-transparent)
+                const rgbaMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+                if (rgbaMatch) {
+                    const alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1.0;
+                    // If alpha is high enough (>= 0.9), consider it opaque enough
+                    if (alpha >= 0.9) {
+                        // Convert to rgb() format for Gateway compatibility
+                        return `rgb(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]})`;
+                    }
+                    // If semi-transparent, continue up the tree
+                } else if (bgColor.startsWith('rgb(')) {
+                    // Already in rgb() format, use it
+                    return bgColor;
+                } else {
+                    // Named color or other format, return as-is
+                    return bgColor;
+                }
+            }
+
+            // Move up the DOM tree
+            current = current.parentElement;
+            depth++;
+        }
+
+        // Fallback: return null if nothing found
+        return null;
+    }
+
+    // --- HELPER: Viewport Check ---
+    function isInViewport(rect) {
+        return (
+            rect.top < window.innerHeight && rect.bottom > 0 &&
+            rect.left < window.innerWidth && rect.right > 0
+        );
+    }
+
+    // --- HELPER: Occlusion Check (Optimized to avoid layout thrashing) ---
+    // Only checks occlusion for elements likely to be occluded (high z-index, positioned)
+    // This avoids forced reflow for most elements, dramatically improving performance
+    function isOccluded(el, rect, style) {
+        // Fast path: Skip occlusion check for most elements
+        // Only check for elements that are likely to be occluded (overlays, modals, tooltips)
+        const zIndex = parseInt(style.zIndex, 10);
+        const position = style.position;
+
+        // Skip occlusion check for normal flow elements (vast majority)
+        // Only check for positioned elements or high z-index (likely overlays)
+        if (position === 'static' && (isNaN(zIndex) || zIndex <= 10)) {
+            return false; // Assume not occluded for performance
+        }
+
+        // For positioned/high z-index elements, do the expensive check
+        const cx = rect.x + rect.width / 2;
+        const cy = rect.y + rect.height / 2;
+
+        if (cx < 0 || cx > window.innerWidth || cy < 0 || cy > window.innerHeight) return false;
+
+        const topEl = document.elementFromPoint(cx, cy);
+        if (!topEl) return false;
+
+        return !(el === topEl || el.contains(topEl) || topEl.contains(el));
+    }
+
+    // --- HELPER: Screenshot Bridge ---
+    function captureScreenshot(options) {
+        return new Promise(resolve => {
+            const requestId = Math.random().toString(36).substring(7);
+            const listener = (e) => {
+                if (e.data.type === 'SENTIENCE_SCREENSHOT_RESULT' && e.data.requestId === requestId) {
+                    window.removeEventListener('message', listener);
+                    resolve(e.data.screenshot);
+                }
+            };
+            window.addEventListener('message', listener);
+            window.postMessage({ type: 'SENTIENCE_SCREENSHOT_REQUEST', requestId, options }, '*');
+            setTimeout(() => {
+                window.removeEventListener('message', listener);
+                resolve(null);
+            }, 10000); // 10s timeout
+        });
+    }
+
+    // --- HELPER: Snapshot Processing Bridge (NEW!) ---
+    function processSnapshotInBackground(rawData, options) {
+        return new Promise((resolve, reject) => {
+            const requestId = Math.random().toString(36).substring(7);
+            const TIMEOUT_MS = 25000; // 25 seconds (longer than content.js timeout)
+            let resolved = false;
+
+            const timeout = setTimeout(() => {
+                if (!resolved) {
+                    resolved = true;
+                    window.removeEventListener('message', listener);
+                    reject(new Error('WASM processing timeout - extension may be unresponsive. Try reloading the extension.'));
+                }
+            }, TIMEOUT_MS);
+
+            const listener = (e) => {
+                if (e.data.type === 'SENTIENCE_SNAPSHOT_RESULT' && e.data.requestId === requestId) {
+                    if (resolved) return; // Already handled
+                    resolved = true;
+                    clearTimeout(timeout);
+                    window.removeEventListener('message', listener);
+
+                    if (e.data.error) {
+                        reject(new Error(e.data.error));
+                    } else {
+                        resolve({
+                            elements: e.data.elements,
+                            raw_elements: e.data.raw_elements,
+                            duration: e.data.duration
+                        });
+                    }
+                }
+            };
+
+            window.addEventListener('message', listener);
+
+            try {
+                window.postMessage({
+                    type: 'SENTIENCE_SNAPSHOT_REQUEST',
+                    requestId,
+                    rawData,
+                    options
+                }, '*');
+            } catch (error) {
+                if (!resolved) {
+                    resolved = true;
+                    clearTimeout(timeout);
+                    window.removeEventListener('message', listener);
+                    reject(new Error(`Failed to send snapshot request: ${error.message}`));
+                }
+            }
+        });
+    }
+
+    // --- HELPER: Raw HTML Extractor (unchanged) ---
+    function getRawHTML(root) {
+        const sourceRoot = root || document.body;
+        const clone = sourceRoot.cloneNode(true);
+
+        const unwantedTags = ['nav', 'footer', 'header', 'script', 'style', 'noscript', 'iframe', 'svg'];
+        unwantedTags.forEach(tag => {
+            const elements = clone.querySelectorAll(tag);
+            elements.forEach(el => {
+                if (el.parentNode) el.parentNode.removeChild(el);
+            });
+        });
+
+        // Remove invisible elements
+        const invisibleSelectors = [];
+        const walker = document.createTreeWalker(sourceRoot, NodeFilter.SHOW_ELEMENT, null, false);
+        let node;
+        while (node = walker.nextNode()) {
+            const tag = node.tagName.toLowerCase();
+            if (tag === 'head' || tag === 'title') continue;
+
+            const style = window.getComputedStyle(node);
+            if (style.display === 'none' || style.visibility === 'hidden' ||
+                (node.offsetWidth === 0 && node.offsetHeight === 0)) {
+                let selector = tag;
+                if (node.id) {
+                    selector = `#${node.id}`;
+                } else if (node.className && typeof node.className === 'string') {
+                    const classes = node.className.trim().split(/\s+/).filter(c => c);
+                    if (classes.length > 0) {
+                        selector = `${tag}.${classes.join('.')}`;
+                    }
+                }
+                invisibleSelectors.push(selector);
+            }
+        }
+
+        invisibleSelectors.forEach(selector => {
+            try {
+                const elements = clone.querySelectorAll(selector);
+                elements.forEach(el => {
+                    if (el.parentNode) el.parentNode.removeChild(el);
+                });
+            } catch (e) {
+                // Invalid selector, skip
+            }
+        });
+
+        // Resolve relative URLs
+        const links = clone.querySelectorAll('a[href]');
+        links.forEach(link => {
+            const href = link.getAttribute('href');
+            if (href && !href.startsWith('http://') && !href.startsWith('https://') && !href.startsWith('#')) {
+                try {
+                    link.setAttribute('href', new URL(href, document.baseURI).href);
+                } catch (e) {}
+            }
+        });
+
+        const images = clone.querySelectorAll('img[src]');
+        images.forEach(img => {
+            const src = img.getAttribute('src');
+            if (src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:')) {
+                try {
+                    img.setAttribute('src', new URL(src, document.baseURI).href);
+                } catch (e) {}
+            }
+        });
+
+        return clone.innerHTML;
+    }
+
+    // --- HELPER: Markdown Converter (unchanged) ---
+    function convertToMarkdown(root) {
+        const rawHTML = getRawHTML(root);
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = rawHTML;
+
+        let markdown = '';
+        let insideLink = false;
+
+        function walk(node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent.replace(/[\r\n]+/g, ' ').replace(/\s+/g, ' ');
+                if (text.trim()) markdown += text;
+                return;
+            }
+
+            if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+            const tag = node.tagName.toLowerCase();
+
+            // Prefix
+            if (tag === 'h1') markdown += '\n# ';
+            if (tag === 'h2') markdown += '\n## ';
+            if (tag === 'h3') markdown += '\n### ';
+            if (tag === 'li') markdown += '\n- ';
+            if (!insideLink && (tag === 'p' || tag === 'div' || tag === 'br')) markdown += '\n';
+            if (tag === 'strong' || tag === 'b') markdown += '**';
+            if (tag === 'em' || tag === 'i') markdown += '_';
+            if (tag === 'a') {
+                markdown += '[';
+                insideLink = true;
+            }
+
+            // Children
+            if (node.shadowRoot) {
+                Array.from(node.shadowRoot.childNodes).forEach(walk);
+            } else {
+                node.childNodes.forEach(walk);
+            }
+
+            // Suffix
+            if (tag === 'a') {
+                const href = node.getAttribute('href');
+                if (href) markdown += `](${href})`;
+                else markdown += ']';
+                insideLink = false;
+            }
+            if (tag === 'strong' || tag === 'b') markdown += '**';
+            if (tag === 'em' || tag === 'i') markdown += '_';
+            if (!insideLink && (tag === 'h1' || tag === 'h2' || tag === 'h3' || tag === 'p' || tag === 'div')) markdown += '\n';
+        }
+
+        walk(tempDiv);
+        return markdown.replace(/\n{3,}/g, '\n\n').trim();
+    }
+
+    // --- HELPER: Text Extractor (unchanged) ---
+    function convertToText(root) {
+        let text = '';
+        function walk(node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                text += node.textContent;
+                return;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const tag = node.tagName.toLowerCase();
+                if (['nav', 'footer', 'header', 'script', 'style', 'noscript', 'iframe', 'svg'].includes(tag)) return;
+
+                const style = window.getComputedStyle(node);
+                if (style.display === 'none' || style.visibility === 'hidden') return;
+
+                const isBlock = style.display === 'block' || style.display === 'flex' || node.tagName === 'P' || node.tagName === 'DIV';
+                if (isBlock) text += ' ';
+
+                if (node.shadowRoot) {
+                    Array.from(node.shadowRoot.childNodes).forEach(walk);
+                } else {
+                    node.childNodes.forEach(walk);
+                }
+
+                if (isBlock) text += '\n';
+            }
+        }
+        walk(root || document.body);
+        return text.replace(/\n{3,}/g, '\n\n').trim();
+    }
+
+    // --- HELPER: Clean null/undefined fields ---
+    function cleanElement(obj) {
+        if (Array.isArray(obj)) {
+            return obj.map(cleanElement);
+        }
+        if (obj !== null && typeof obj === 'object') {
+            const cleaned = {};
+            for (const [key, value] of Object.entries(obj)) {
+                if (value !== null && value !== undefined) {
+                    if (typeof value === 'object') {
+                        const deepClean = cleanElement(value);
+                        if (Object.keys(deepClean).length > 0) {
+                            cleaned[key] = deepClean;
+                        }
+                    } else {
+                        cleaned[key] = value;
+                    }
+                }
+            }
+            return cleaned;
+        }
+        return obj;
+    }
+
+    // --- HELPER: Extract Raw Element Data (for Golden Set) ---
+    function extractRawElementData(el) {
+        const style = window.getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
+
+        return {
+            tag: el.tagName,
+            rect: {
+                x: Math.round(rect.x),
+                y: Math.round(rect.y),
+                width: Math.round(rect.width),
+                height: Math.round(rect.height)
+            },
+            styles: {
+                cursor: style.cursor || null,
+                backgroundColor: style.backgroundColor || null,
+                color: style.color || null,
+                fontWeight: style.fontWeight || null,
+                fontSize: style.fontSize || null,
+                display: style.display || null,
+                position: style.position || null,
+                zIndex: style.zIndex || null,
+                opacity: style.opacity || null,
+                visibility: style.visibility || null
+            },
+            attributes: {
+                role: el.getAttribute('role') || null,
+                type: el.getAttribute('type') || null,
+                ariaLabel: el.getAttribute('aria-label') || null,
+                id: el.id || null,
+                className: el.className || null
+            }
+        };
+    }
+
+    // --- HELPER: Generate Unique CSS Selector (for Golden Set) ---
+    function getUniqueSelector(el) {
+        if (!el || !el.tagName) return '';
+
+        // If element has a unique ID, use it
+        if (el.id) {
+            return `#${el.id}`;
+        }
+
+        // Try data attributes or aria-label for uniqueness
+        for (const attr of el.attributes) {
+            if (attr.name.startsWith('data-') || attr.name === 'aria-label') {
+                const value = attr.value ? attr.value.replace(/"/g, '\\"') : '';
+                return `${el.tagName.toLowerCase()}[${attr.name}="${value}"]`;
+            }
+        }
+
+        // Build path with classes and nth-child for uniqueness
+        const path = [];
+        let current = el;
+
+        while (current && current !== document.body && current !== document.documentElement) {
+            let selector = current.tagName.toLowerCase();
+
+            // If current element has ID, use it and stop
+            if (current.id) {
+                selector = `#${current.id}`;
+                path.unshift(selector);
+                break;
+            }
+
+            // Add class if available
+            if (current.className && typeof current.className === 'string') {
+                const classes = current.className.trim().split(/\s+/).filter(c => c);
+                if (classes.length > 0) {
+                    // Use first class for simplicity
+                    selector += `.${classes[0]}`;
+                }
+            }
+
+            // Add nth-of-type if needed for uniqueness
+            if (current.parentElement) {
+                const siblings = Array.from(current.parentElement.children);
+                const sameTagSiblings = siblings.filter(s => s.tagName === current.tagName);
+                const index = sameTagSiblings.indexOf(current);
+                if (index > 0 || sameTagSiblings.length > 1) {
+                    selector += `:nth-of-type(${index + 1})`;
+                }
+            }
+
+            path.unshift(selector);
+            current = current.parentElement;
+        }
+
+        return path.join(' > ') || el.tagName.toLowerCase();
+    }
+
+    // --- HELPER: Wait for DOM Stability (SPA Hydration) ---
+    // Waits for the DOM to stabilize before taking a snapshot
+    // Useful for React/Vue apps that render empty skeletons before hydration
+    async function waitForStability(options = {}) {
+        const {
+            minNodeCount = 500,
+            quietPeriod = 200, // milliseconds
+            maxWait = 5000 // maximum wait time
+        } = options;
+
+        const startTime = Date.now();
+
+        return new Promise((resolve) => {
+            // Check if DOM already has enough nodes
+            const nodeCount = document.querySelectorAll('*').length;
+            if (nodeCount >= minNodeCount) {
+                // DOM seems ready, but wait for quiet period to ensure stability
+                let lastChange = Date.now();
+                const observer = new MutationObserver(() => {
+                    lastChange = Date.now();
+                });
+
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                    attributes: false
+                });
+
+                const checkStable = () => {
+                    const timeSinceLastChange = Date.now() - lastChange;
+                    const totalWait = Date.now() - startTime;
+
+                    if (timeSinceLastChange >= quietPeriod) {
+                        observer.disconnect();
+                        resolve();
+                    } else if (totalWait >= maxWait) {
+                        observer.disconnect();
+                        console.warn('[SentienceAPI] DOM stability timeout - proceeding anyway');
+                        resolve();
+                    } else {
+                        setTimeout(checkStable, 50);
+                    }
+                };
+
+                checkStable();
+            } else {
+                // DOM doesn't have enough nodes yet, wait for them
+                const observer = new MutationObserver(() => {
+                    const currentCount = document.querySelectorAll('*').length;
+                    const totalWait = Date.now() - startTime;
+
+                    if (currentCount >= minNodeCount) {
+                        observer.disconnect();
+                        // Now wait for quiet period
+                        let lastChange = Date.now();
+                        const quietObserver = new MutationObserver(() => {
+                            lastChange = Date.now();
+                        });
+
+                        quietObserver.observe(document.body, {
+                            childList: true,
+                            subtree: true,
+                            attributes: false
+                        });
+
+                        const checkQuiet = () => {
+                            const timeSinceLastChange = Date.now() - lastChange;
+                            const totalWait = Date.now() - startTime;
+
+                            if (timeSinceLastChange >= quietPeriod) {
+                                quietObserver.disconnect();
+                                resolve();
+                            } else if (totalWait >= maxWait) {
+                                quietObserver.disconnect();
+                                console.warn('[SentienceAPI] DOM stability timeout - proceeding anyway');
+                                resolve();
+                            } else {
+                                setTimeout(checkQuiet, 50);
+                            }
+                        };
+
+                        checkQuiet();
+                    } else if (totalWait >= maxWait) {
+                        observer.disconnect();
+                        console.warn('[SentienceAPI] DOM node count timeout - proceeding anyway');
+                        resolve();
+                    }
+                });
+
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                    attributes: false
+                });
+
+                // Timeout fallback
+                setTimeout(() => {
+                    observer.disconnect();
+                    console.warn('[SentienceAPI] DOM stability max wait reached - proceeding');
+                    resolve();
+                }, maxWait);
+            }
+        });
+    }
+
+    // --- HELPER: Collect Iframe Snapshots (Frame Stitching) ---
+    // Recursively collects snapshot data from all child iframes
+    // This enables detection of elements inside iframes (e.g., Stripe forms)
+    //
+    // NOTE: Cross-origin iframes cannot be accessed due to browser security (Same-Origin Policy).
+    // Only same-origin iframes will return snapshot data. Cross-origin iframes will be skipped
+    // with a warning. For cross-origin iframes, users must manually switch frames using
+    // Playwright's page.frame() API.
+    async function collectIframeSnapshots(options = {}) {
+        const iframeData = new Map(); // Map of iframe element -> snapshot data
+
+        // Find all iframe elements in current document
+        const iframes = Array.from(document.querySelectorAll('iframe'));
+
+        if (iframes.length === 0) {
+            return iframeData;
+        }
+
+        console.log(`[SentienceAPI] Found ${iframes.length} iframe(s), requesting snapshots...`);
+        // Request snapshot from each iframe
+        const iframePromises = iframes.map((iframe, idx) => {
+            // OPTIMIZATION: Skip common ad domains to save time
+            const src = iframe.src || '';
+            if (src.includes('doubleclick') || src.includes('googleadservices') || src.includes('ads system')) {
+                console.log(`[SentienceAPI] Skipping ad iframe: ${src.substring(0, 30)}...`);
+                return Promise.resolve(null);
+            }
+
+            return new Promise((resolve) => {
+                const requestId = `iframe-${idx}-${Date.now()}`;
+
+                // 1. EXTENDED TIMEOUT (Handle slow children)
+                const timeout = setTimeout(() => {
+                    console.warn(`[SentienceAPI] ⚠️ Iframe ${idx} snapshot TIMEOUT (id: ${requestId})`);
+                    resolve(null);
+                }, 5000); // Increased to 5s to handle slow processing
+
+                // 2. ROBUST LISTENER with debugging
+                const listener = (event) => {
+                    // Debug: Log all SENTIENCE_IFRAME_SNAPSHOT_RESPONSE messages to see what's happening
+                    if (event.data?.type === 'SENTIENCE_IFRAME_SNAPSHOT_RESPONSE') {
+                        // Only log if it's not our request (for debugging)
+                        if (event.data?.requestId !== requestId) {
+                            // console.log(`[SentienceAPI] Received response for different request: ${event.data.requestId} (expected: ${requestId})`);
+                        }
+                    }
+
+                    // Check if this is the response we're waiting for
+                    if (event.data?.type === 'SENTIENCE_IFRAME_SNAPSHOT_RESPONSE' &&
+                        event.data?.requestId === requestId) {
+
+                        clearTimeout(timeout);
+                        window.removeEventListener('message', listener);
+
+                        if (event.data.error) {
+                            console.warn(`[SentienceAPI] Iframe ${idx} returned error:`, event.data.error);
+                            resolve(null);
+                        } else {
+                            const elementCount = event.data.snapshot?.raw_elements?.length || 0;
+                            console.log(`[SentienceAPI] ✓ Received ${elementCount} elements from Iframe ${idx} (id: ${requestId})`);
+                            resolve({
+                                iframe: iframe,
+                                data: event.data.snapshot,
+                                error: null
+                            });
+                        }
+                    }
+                };
+
+                window.addEventListener('message', listener);
+
+                // 3. SEND REQUEST with error handling
+                try {
+                    if (iframe.contentWindow) {
+                        // console.log(`[SentienceAPI] Sending request to Iframe ${idx} (id: ${requestId})`);
+                        iframe.contentWindow.postMessage({
+                            type: 'SENTIENCE_IFRAME_SNAPSHOT_REQUEST',
+                            requestId: requestId,
+                            options: {
+                                ...options,
+                                collectIframes: true // Enable recursion for nested iframes
+                            }
+                        }, '*'); // Use '*' for cross-origin, but browser will enforce same-origin policy
+                    } else {
+                        console.warn(`[SentienceAPI] Iframe ${idx} contentWindow is inaccessible (Cross-Origin?)`);
+                        clearTimeout(timeout);
+                        window.removeEventListener('message', listener);
+                        resolve(null);
+                    }
+                } catch (error) {
+                    console.error(`[SentienceAPI] Failed to postMessage to Iframe ${idx}:`, error);
+                    clearTimeout(timeout);
+                    window.removeEventListener('message', listener);
+                    resolve(null);
+                }
+            });
+        });
+
+        // Wait for all iframe responses
+        const results = await Promise.all(iframePromises);
+
+        // Store iframe data
+        results.forEach((result, idx) => {
+            if (result && result.data && !result.error) {
+                iframeData.set(iframes[idx], result.data);
+                console.log(`[SentienceAPI] ✓ Collected snapshot from iframe ${idx}`);
+            } else if (result && result.error) {
+                console.warn(`[SentienceAPI] Iframe ${idx} snapshot error:`, result.error);
+            } else if (!result) {
+                console.warn(`[SentienceAPI] Iframe ${idx} returned no data (timeout or error)`);
+            }
+        });
+
+        return iframeData;
+    }
+
+    // --- HELPER: Handle Iframe Snapshot Request (for child frames) ---
+    // When a parent frame requests snapshot, this handler responds with local snapshot
+    // NOTE: Recursion is safe because querySelectorAll('iframe') only finds direct children.
+    // Iframe A can ask Iframe B, but won't go back up to parent (no circular dependency risk).
+    function setupIframeSnapshotHandler() {
+        window.addEventListener('message', async (event) => {
+            // Security: only respond to snapshot requests from parent frames
+            if (event.data?.type === 'SENTIENCE_IFRAME_SNAPSHOT_REQUEST') {
+                const { requestId, options } = event.data;
+
+                try {
+                    // Generate snapshot for this iframe's content
+                    // Allow recursive collection - querySelectorAll('iframe') only finds direct children,
+                    // so Iframe A will ask Iframe B, but won't go back up to parent (safe recursion)
+                    // waitForStability: false makes performance better - i.e. don't wait for children frames
+                    const snapshotOptions = { ...options, collectIframes: true, waitForStability: options.waitForStability === false ? false : false };
+                    const snapshot = await window.sentience.snapshot(snapshotOptions);
+
+                    // Send response back to parent
+                    if (event.source && event.source.postMessage) {
+                        event.source.postMessage({
+                            type: 'SENTIENCE_IFRAME_SNAPSHOT_RESPONSE',
+                            requestId: requestId,
+                            snapshot: snapshot,
+                            error: null
+                        }, '*');
+                    }
+                } catch (error) {
+                    // Send error response
+                    if (event.source && event.source.postMessage) {
+                        event.source.postMessage({
+                            type: 'SENTIENCE_IFRAME_SNAPSHOT_RESPONSE',
+                            requestId: requestId,
+                            snapshot: null,
+                            error: error.message
+                        }, '*');
+                    }
+                }
+            }
+        });
+    }
+
+    // Setup iframe handler when script loads (only once)
+    if (!window.sentience_iframe_handler_setup) {
+        setupIframeSnapshotHandler();
+        window.sentience_iframe_handler_setup = true;
+    }
+
+    // --- GLOBAL API ---
+    window.sentience = {
+        // 1. Geometry snapshot (NEW ARCHITECTURE - No WASM in Main World!)
+        snapshot: async (options = {}) => {
+            try {
+                // Step 0: Wait for DOM stability if requested (for SPA hydration)
+                if (options.waitForStability !== false) {
+                    await waitForStability(options.waitForStability || {});
+                }
+
+                // Step 1: Collect raw DOM data (Main World - CSP can't block this!)
+                const rawData = [];
+                window.sentience_registry = [];
+
+                const nodes = getAllElements();
+
+                nodes.forEach((el, idx) => {
+                    if (!el.getBoundingClientRect) return;
+                    const rect = el.getBoundingClientRect();
+                    if (rect.width < 5 || rect.height < 5) return;
+
+                    window.sentience_registry[idx] = el;
+
+                    const textVal = getText(el);
+                    const inView = isInViewport(rect);
+
+                    // Get computed style once (needed for both occlusion check and data collection)
+                    const style = window.getComputedStyle(el);
+
+                    // Only check occlusion for elements likely to be occluded (optimized)
+                    // This avoids layout thrashing for the vast majority of elements
+                    const occluded = inView ? isOccluded(el, rect, style) : false;
+
+                    // Get effective background color (traverses DOM to find non-transparent color)
+                    const effectiveBgColor = getEffectiveBackgroundColor(el);
+
+                    rawData.push({
+                        id: idx,
+                        tag: el.tagName.toLowerCase(),
+                        rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+                        styles: {
+                            display: toSafeString(style.display),
+                            visibility: toSafeString(style.visibility),
+                            opacity: toSafeString(style.opacity),
+                            z_index: toSafeString(style.zIndex || "auto"),
+                            position: toSafeString(style.position),
+                            bg_color: toSafeString(effectiveBgColor || style.backgroundColor),
+                            color: toSafeString(style.color),
+                            cursor: toSafeString(style.cursor),
+                            font_weight: toSafeString(style.fontWeight),
+                            font_size: toSafeString(style.fontSize)
+                        },
+                        attributes: {
+                            role: toSafeString(el.getAttribute('role')),
+                            type_: toSafeString(el.getAttribute('type')),
+                            aria_label: toSafeString(el.getAttribute('aria-label')),
+                            href: toSafeString(el.href || el.getAttribute('href') || null),
+                            class: toSafeString(getClassName(el)),
+                            // Capture dynamic input state (not just initial attributes)
+                            value: el.value !== undefined ? toSafeString(el.value) : toSafeString(el.getAttribute('value')),
+                            checked: el.checked !== undefined ? String(el.checked) : null
+                        },
+                        text: toSafeString(textVal),
+                        in_viewport: inView,
+                        is_occluded: occluded
+                    });
+                });
+
+                console.log(`[SentienceAPI] Collected ${rawData.length} elements from main frame`);
+
+                // Step 1.5: Collect iframe snapshots and FLATTEN immediately
+                // "Flatten Early" architecture: Merge iframe elements into main array before WASM
+                // This allows WASM to process all elements uniformly (no recursion needed)
+                let allRawElements = [...rawData]; // Start with main frame elements
+                let totalIframeElements = 0;
+
+                if (options.collectIframes !== false) {
+                    try {
+                        console.log(`[SentienceAPI] Starting iframe collection...`);
+                        const iframeSnapshots = await collectIframeSnapshots(options);
+                        console.log(`[SentienceAPI] Iframe collection complete. Received ${iframeSnapshots.size} snapshot(s)`);
+
+                        if (iframeSnapshots.size > 0) {
+                            // FLATTEN IMMEDIATELY: Don't nest them. Just append them with coordinate translation.
+                            iframeSnapshots.forEach((iframeSnapshot, iframeEl) => {
+                                // Debug: Log structure to verify data is correct
+                                // console.log(`[SentienceAPI] Processing iframe snapshot:`, iframeSnapshot);
+
+                                if (iframeSnapshot && iframeSnapshot.raw_elements) {
+                                    const rawElementsCount = iframeSnapshot.raw_elements.length;
+                                    console.log(`[SentienceAPI] Processing ${rawElementsCount} elements from iframe (src: ${iframeEl.src || 'unknown'})`);
+                                    // Get iframe's bounding rect (offset for coordinate translation)
+                                    const iframeRect = iframeEl.getBoundingClientRect();
+                                    const offset = { x: iframeRect.x, y: iframeRect.y };
+
+                                    // Get iframe context for frame switching (Playwright needs this)
+                                    const iframeSrc = iframeEl.src || iframeEl.getAttribute('src') || '';
+                                    let isSameOrigin = false;
+                                    try {
+                                        // Try to access contentWindow to check if same-origin
+                                        isSameOrigin = iframeEl.contentWindow !== null;
+                                    } catch (e) {
+                                        isSameOrigin = false;
+                                    }
+
+                                    // Adjust coordinates and add iframe context to each element
+                                    const adjustedElements = iframeSnapshot.raw_elements.map(el => {
+                                        const adjusted = { ...el };
+
+                                        // Adjust rect coordinates to parent viewport
+                                        if (adjusted.rect) {
+                                            adjusted.rect = {
+                                                ...adjusted.rect,
+                                                x: adjusted.rect.x + offset.x,
+                                                y: adjusted.rect.y + offset.y
+                                            };
+                                        }
+
+                                        // Add iframe context so agents can switch frames in Playwright
+                                        adjusted.iframe_context = {
+                                            src: iframeSrc,
+                                            is_same_origin: isSameOrigin
+                                        };
+
+                                        return adjusted;
+                                    });
+
+                                    // Append flattened iframe elements to main array
+                                    allRawElements.push(...adjustedElements);
+                                    totalIframeElements += adjustedElements.length;
+                                }
+                            });
+
+                            // console.log(`[SentienceAPI] Merged ${iframeSnapshots.size} iframe(s). Total elements: ${allRawElements.length} (${rawData.length} main + ${totalIframeElements} iframe)`);
+                        }
+                    } catch (error) {
+                        console.warn('[SentienceAPI] Iframe collection failed:', error);
+                    }
+                }
+
+                // Step 2: Send EVERYTHING to WASM (One giant flat list)
+                // Now WASM prunes iframe elements and main elements in one pass!
+                // No recursion needed - everything is already flat
+                console.log(`[SentienceAPI] Sending ${allRawElements.length} total elements to WASM (${rawData.length} main + ${totalIframeElements} iframe)`);
+                const processed = await processSnapshotInBackground(allRawElements, options);
+
+                if (!processed || !processed.elements) {
+                    throw new Error('WASM processing returned invalid result');
+                }
+
+                // Step 3: Capture screenshot if requested
+                let screenshot = null;
+                if (options.screenshot) {
+                    screenshot = await captureScreenshot(options.screenshot);
+                }
+
+                // Step 4: Clean and return
+                const cleanedElements = cleanElement(processed.elements);
+                const cleanedRawElements = cleanElement(processed.raw_elements);
+
+                // FIXED: Removed undefined 'totalIframeRawElements'
+                // FIXED: Logic updated for "Flatten Early" architecture.
+                // processed.elements ALREADY contains the merged iframe elements,
+                // so we simply use .length. No addition needed.
+
+                const totalCount = cleanedElements.length;
+                const totalRaw = cleanedRawElements.length;
+                const iframeCount = totalIframeElements || 0;
+
+                console.log(`[SentienceAPI] ✓ Complete: ${totalCount} Smart Elements, ${totalRaw} Raw Elements (includes ${iframeCount} from iframes) (WASM took ${processed.duration?.toFixed(1)}ms)`);
+
+                return {
+                    status: "success",
+                    url: window.location.href,
+                    viewport: {
+                        width: window.innerWidth,
+                        height: window.innerHeight
+                    },
+                    elements: cleanedElements,
+                    raw_elements: cleanedRawElements,
+                    screenshot: screenshot
+                };
+            } catch (error) {
+                console.error('[SentienceAPI] snapshot() failed:', error);
+                console.error('[SentienceAPI] Error stack:', error.stack);
+                return {
+                    status: "error",
+                    error: error.message || 'Unknown error',
+                    stack: error.stack
+                };
+            }
+        },
+
+        // 2. Read Content (unchanged)
+        read: (options = {}) => {
+            const format = options.format || 'raw';
+            let content;
+
+            if (format === 'raw') {
+                content = getRawHTML(document.body);
+            } else if (format === 'markdown') {
+                content = convertToMarkdown(document.body);
+            } else {
+                content = convertToText(document.body);
+            }
+
+            return {
+                status: "success",
+                url: window.location.href,
+                format: format,
+                content: content,
+                length: content.length
+            };
+        },
+
+        // 2b. Find Text Rectangle - Get exact pixel coordinates of specific text
+        findTextRect: (options = {}) => {
+            const {
+                text,
+                containerElement = document.body,
+                caseSensitive = false,
+                wholeWord = false,
+                maxResults = 10
+            } = options;
+
+            if (!text || text.trim().length === 0) {
+                return {
+                    status: "error",
+                    error: "Text parameter is required"
+                };
+            }
+
+            const results = [];
+            const searchText = caseSensitive ? text : text.toLowerCase();
+
+            // Helper function to find text in a single text node
+            function findInTextNode(textNode) {
+                const nodeText = textNode.nodeValue;
+                const searchableText = caseSensitive ? nodeText : nodeText.toLowerCase();
+
+                let startIndex = 0;
+                while (startIndex < nodeText.length && results.length < maxResults) {
+                    const foundIndex = searchableText.indexOf(searchText, startIndex);
+
+                    if (foundIndex === -1) break;
+
+                    // Check whole word matching if required
+                    if (wholeWord) {
+                        const before = foundIndex > 0 ? nodeText[foundIndex - 1] : ' ';
+                        const after = foundIndex + text.length < nodeText.length
+                            ? nodeText[foundIndex + text.length]
+                            : ' ';
+
+                        // Check if surrounded by word boundaries
+                        if (!/\s/.test(before) || !/\s/.test(after)) {
+                            startIndex = foundIndex + 1;
+                            continue;
+                        }
+                    }
+
+                    try {
+                        // Create range for this occurrence
+                        const range = document.createRange();
+                        range.setStart(textNode, foundIndex);
+                        range.setEnd(textNode, foundIndex + text.length);
+
+                        const rect = range.getBoundingClientRect();
+
+                        // Only include visible rectangles
+                        if (rect.width > 0 && rect.height > 0) {
+                            results.push({
+                                text: nodeText.substring(foundIndex, foundIndex + text.length),
+                                rect: {
+                                    x: rect.left + window.scrollX,
+                                    y: rect.top + window.scrollY,
+                                    width: rect.width,
+                                    height: rect.height,
+                                    left: rect.left + window.scrollX,
+                                    top: rect.top + window.scrollY,
+                                    right: rect.right + window.scrollX,
+                                    bottom: rect.bottom + window.scrollY
+                                },
+                                viewport_rect: {
+                                    x: rect.left,
+                                    y: rect.top,
+                                    width: rect.width,
+                                    height: rect.height
+                                },
+                                context: {
+                                    before: nodeText.substring(Math.max(0, foundIndex - 20), foundIndex),
+                                    after: nodeText.substring(foundIndex + text.length, Math.min(nodeText.length, foundIndex + text.length + 20))
+                                },
+                                in_viewport: (
+                                    rect.top >= 0 &&
+                                    rect.left >= 0 &&
+                                    rect.bottom <= window.innerHeight &&
+                                    rect.right <= window.innerWidth
+                                )
+                            });
+                        }
+                    } catch (e) {
+                        console.warn('[SentienceAPI] Failed to get rect for text:', e);
+                    }
+
+                    startIndex = foundIndex + 1;
+                }
+            }
+
+            // Tree walker to find all text nodes
+            const walker = document.createTreeWalker(
+                containerElement,
+                NodeFilter.SHOW_TEXT,
+                {
+                    acceptNode: function(node) {
+                        // Skip script, style, and empty text nodes
+                        const parent = node.parentElement;
+                        if (!parent) return NodeFilter.FILTER_REJECT;
+
+                        const tagName = parent.tagName.toLowerCase();
+                        if (tagName === 'script' || tagName === 'style' || tagName === 'noscript') {
+                            return NodeFilter.FILTER_REJECT;
+                        }
+
+                        // Skip whitespace-only nodes
+                        if (!node.nodeValue || node.nodeValue.trim().length === 0) {
+                            return NodeFilter.FILTER_REJECT;
+                        }
+
+                        // Check if element is visible
+                        const computedStyle = window.getComputedStyle(parent);
+                        if (computedStyle.display === 'none' ||
+                            computedStyle.visibility === 'hidden' ||
+                            computedStyle.opacity === '0') {
+                            return NodeFilter.FILTER_REJECT;
+                        }
+
+                        return NodeFilter.FILTER_ACCEPT;
+                    }
+                }
+            );
+
+            // Walk through all text nodes
+            let currentNode;
+            while ((currentNode = walker.nextNode()) && results.length < maxResults) {
+                findInTextNode(currentNode);
+            }
+
+            return {
+                status: "success",
+                query: text,
+                case_sensitive: caseSensitive,
+                whole_word: wholeWord,
+                matches: results.length,
+                results: results,
+                viewport: {
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                    scroll_x: window.scrollX,
+                    scroll_y: window.scrollY
+                }
+            };
+        },
+
+        // 3. Click Action (unchanged)
+        click: (id) => {
+            const el = window.sentience_registry[id];
+            if (el) {
+                el.click();
+                el.focus();
+                return true;
+            }
+            return false;
+        },
+
+        // 4. Inspector Mode: Start Recording for Golden Set Collection
+        startRecording: (options = {}) => {
+            const {
+                highlightColor = '#ff0000',
+                successColor = '#00ff00',
+                autoDisableTimeout = 30 * 60 * 1000, // 30 minutes default
+                keyboardShortcut = 'Ctrl+Shift+I'
+            } = options;
+
+            console.log("🔴 [Sentience] Recording Mode STARTED. Click an element to copy its Ground Truth JSON.");
+            console.log(`   Press ${keyboardShortcut} or call stopRecording() to stop.`);
+
+            // Validate registry is populated
+            if (!window.sentience_registry || window.sentience_registry.length === 0) {
+                console.warn("⚠️ Registry empty. Call `await window.sentience.snapshot()` first to populate registry.");
+                alert("Registry empty. Run `await window.sentience.snapshot()` first!");
+                return () => {}; // Return no-op cleanup function
+            }
+
+            // Create reverse mapping for O(1) lookup (fixes registry lookup bug)
+            window.sentience_registry_map = new Map();
+            window.sentience_registry.forEach((el, idx) => {
+                if (el) window.sentience_registry_map.set(el, idx);
+            });
+
+            // Create highlight box overlay
+            let highlightBox = document.getElementById('sentience-highlight-box');
+            if (!highlightBox) {
+                highlightBox = document.createElement('div');
+                highlightBox.id = 'sentience-highlight-box';
+                highlightBox.style.cssText = `
+                    position: fixed;
+                    pointer-events: none;
+                    z-index: 2147483647;
+                    border: 2px solid ${highlightColor};
+                    background: rgba(255, 0, 0, 0.1);
+                    display: none;
+                    transition: all 0.1s ease;
+                    box-sizing: border-box;
+                `;
+                document.body.appendChild(highlightBox);
+            }
+
+            // Create visual indicator (red border on page when recording)
+            let recordingIndicator = document.getElementById('sentience-recording-indicator');
+            if (!recordingIndicator) {
+                recordingIndicator = document.createElement('div');
+                recordingIndicator.id = 'sentience-recording-indicator';
+                recordingIndicator.style.cssText = `
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    height: 3px;
+                    background: ${highlightColor};
+                    z-index: 2147483646;
+                    pointer-events: none;
+                `;
+                document.body.appendChild(recordingIndicator);
+            }
+            recordingIndicator.style.display = 'block';
+
+            // Hover handler (visual feedback)
+            const mouseOverHandler = (e) => {
+                const el = e.target;
+                if (!el || el === highlightBox || el === recordingIndicator) return;
+
+                const rect = el.getBoundingClientRect();
+                highlightBox.style.display = 'block';
+                highlightBox.style.top = (rect.top + window.scrollY) + 'px';
+                highlightBox.style.left = (rect.left + window.scrollX) + 'px';
+                highlightBox.style.width = rect.width + 'px';
+                highlightBox.style.height = rect.height + 'px';
+            };
+
+            // Click handler (capture ground truth data)
+            const clickHandler = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const el = e.target;
+                if (!el || el === highlightBox || el === recordingIndicator) return;
+
+                // Use Map for reliable O(1) lookup
+                const sentienceId = window.sentience_registry_map.get(el);
+                if (sentienceId === undefined) {
+                    console.warn("⚠️ Element not found in Sentience Registry. Did you run snapshot() first?");
+                    alert("Element not in registry. Run `await window.sentience.snapshot()` first!");
+                    return;
+                }
+
+                // Extract raw data (ground truth + raw signals, NOT model outputs)
+                const rawData = extractRawElementData(el);
+                const selector = getUniqueSelector(el);
+                const role = el.getAttribute('role') || el.tagName.toLowerCase();
+                const text = getText(el);
+
+                // Build golden set JSON (ground truth + raw signals only)
+                const snippet = {
+                    task: `Interact with ${text.substring(0, 20)}${text.length > 20 ? '...' : ''}`,
+                    url: window.location.href,
+                    timestamp: new Date().toISOString(),
+                    target_criteria: {
+                        id: sentienceId,
+                        selector: selector,
+                        role: role,
+                        text: text.substring(0, 50)
+                    },
+                    debug_snapshot: rawData
+                };
+
+                // Copy to clipboard
+                const jsonString = JSON.stringify(snippet, null, 2);
+                navigator.clipboard.writeText(jsonString).then(() => {
+                    console.log("✅ Copied Ground Truth to clipboard:", snippet);
+
+                    // Flash green to indicate success
+                    highlightBox.style.border = `2px solid ${successColor}`;
+                    highlightBox.style.background = 'rgba(0, 255, 0, 0.2)';
+                    setTimeout(() => {
+                        highlightBox.style.border = `2px solid ${highlightColor}`;
+                        highlightBox.style.background = 'rgba(255, 0, 0, 0.1)';
+                    }, 500);
+                }).catch(err => {
+                    console.error("❌ Failed to copy to clipboard:", err);
+                    alert("Failed to copy to clipboard. Check console for JSON.");
+                });
+            };
+
+            // Auto-disable timeout
+            let timeoutId = null;
+
+            // Cleanup function to stop recording (defined before use)
+            const stopRecording = () => {
+                document.removeEventListener('mouseover', mouseOverHandler, true);
+                document.removeEventListener('click', clickHandler, true);
+                document.removeEventListener('keydown', keyboardHandler, true);
+
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                    timeoutId = null;
+                }
+
+                if (highlightBox) {
+                    highlightBox.style.display = 'none';
+                }
+
+                if (recordingIndicator) {
+                    recordingIndicator.style.display = 'none';
+                }
+
+                // Clean up registry map (optional, but good practice)
+                if (window.sentience_registry_map) {
+                    window.sentience_registry_map.clear();
+                }
+
+                // Remove global reference
+                if (window.sentience_stopRecording === stopRecording) {
+                    delete window.sentience_stopRecording;
+                }
+
+                console.log("⚪ [Sentience] Recording Mode STOPPED.");
+            };
+
+            // Keyboard shortcut handler (defined after stopRecording)
+            const keyboardHandler = (e) => {
+                // Ctrl+Shift+I or Cmd+Shift+I
+                if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'I') {
+                    e.preventDefault();
+                    stopRecording();
+                }
+            };
+
+            // Attach event listeners (use capture phase to intercept early)
+            document.addEventListener('mouseover', mouseOverHandler, true);
+            document.addEventListener('click', clickHandler, true);
+            document.addEventListener('keydown', keyboardHandler, true);
+
+            // Set up auto-disable timeout
+            if (autoDisableTimeout > 0) {
+                timeoutId = setTimeout(() => {
+                    console.log("⏰ [Sentience] Recording Mode auto-disabled after timeout.");
+                    stopRecording();
+                }, autoDisableTimeout);
+            }
+
+            // Store stop function globally for keyboard shortcut access
+            window.sentience_stopRecording = stopRecording;
+
+            return stopRecording;
+        }
+    };
+
+    /**
+     * Show overlay highlighting specific elements with Shadow DOM
+     * @param {Array} elements - List of elements with bbox, importance, visual_cues
+     * @param {number} targetElementId - Optional ID of target element (shown in red)
+     */
+    window.sentience.showOverlay = function(elements, targetElementId = null) {
+        if (!elements || !Array.isArray(elements)) {
+            console.warn('[Sentience] showOverlay: elements must be an array');
+            return;
+        }
+
+        window.postMessage({
+            type: 'SENTIENCE_SHOW_OVERLAY',
+            elements: elements,
+            targetElementId: targetElementId,
+            timestamp: Date.now()
+        }, '*');
+
+        console.log(`[Sentience] Overlay requested for ${elements.length} elements`);
+    };
+
+    /**
+     * Clear overlay manually
+     */
+    window.sentience.clearOverlay = function() {
+        window.postMessage({
+            type: 'SENTIENCE_CLEAR_OVERLAY'
+        }, '*');
+        console.log('[Sentience] Overlay cleared');
+    };
+
+    console.log('[SentienceAPI] ✓ Ready! (CSP-Resistant - WASM runs in background)');
+})();