npm - zan-browser - Versions diffs - 1.3.38 → 2.0.0 - Mend

zan-browser 1.3.38 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/ai.d.ts +3 -16
package/dist/ai.d.ts.map +1 -1
package/dist/ai.js +101 -208
package/dist/ai.js.map +1 -1
package/dist/blacklist.d.ts +2 -0
package/dist/blacklist.d.ts.map +1 -0
package/dist/blacklist.js +115 -0
package/dist/blacklist.js.map +1 -0
package/dist/browser-provider.d.ts +81 -0
package/dist/browser-provider.d.ts.map +1 -0
package/dist/browser-provider.js +6 -0
package/dist/browser-provider.js.map +1 -0
package/dist/browser.d.ts +1 -1
package/dist/browser.d.ts.map +1 -1
package/dist/browser.js +51 -60
package/dist/browser.js.map +1 -1
package/dist/index.d.ts +7 -1
package/dist/index.d.ts.map +1 -1
package/dist/index.js +5 -1
package/dist/index.js.map +1 -1
package/dist/interceptor.d.ts +3 -3
package/dist/interceptor.d.ts.map +1 -1
package/dist/interceptor.js +45 -19
package/dist/interceptor.js.map +1 -1
package/dist/navigator.d.ts +40 -0
package/dist/navigator.d.ts.map +1 -0
package/dist/navigator.js +507 -0
package/dist/navigator.js.map +1 -0
package/dist/observer.d.ts +23 -3
package/dist/observer.d.ts.map +1 -1
package/dist/observer.js +310 -270
package/dist/observer.js.map +1 -1
package/dist/perception.d.ts +42 -0
package/dist/perception.d.ts.map +1 -0
package/dist/perception.js +140 -0
package/dist/perception.js.map +1 -0
package/dist/providers/browserbase.d.ts +12 -0
package/dist/providers/browserbase.d.ts.map +1 -0
package/dist/providers/browserbase.js +226 -0
package/dist/providers/browserbase.js.map +1 -0
package/dist/providers/puppeteer-local.d.ts +5 -0
package/dist/providers/puppeteer-local.d.ts.map +1 -0
package/dist/providers/puppeteer-local.js +218 -0
package/dist/providers/puppeteer-local.js.map +1 -0
package/dist/session.d.ts +17 -23
package/dist/session.d.ts.map +1 -1
package/dist/session.js +112 -407
package/dist/session.js.map +1 -1
package/dist/types.d.ts +1 -32
package/dist/types.d.ts.map +1 -1
package/package.json +3 -2

package/dist/observer.js CHANGED Viewed

@@ -12,292 +12,208 @@ const PREFIX = {
     radio: "R",
     other: "O",
 };
-// Notte whitelist: only these attributes are included in the rendered output
-const ATTR_WHITELIST = [
-    "title", "type", "name", "role", "tabindex", "aria_label",
-    "placeholder", "value", "alt", "src", "href", "aria_expanded",
-];
-// Map from HTML attribute names to our whitelist keys
-const HTML_ATTR_MAP = {
-    "title": "title",
-    "type": "type",
-    "name": "name",
-    "role": "role",
-    "tabindex": "tabindex",
-    "aria-label": "aria_label",
-    "placeholder": "placeholder",
-    "value": "value",
-    "alt": "alt",
-    "src": "src",
-    "href": "href",
-    "aria-expanded": "aria_expanded",
-};
-// Interactive element selectors
-const INTERACTIVE_SELECTOR = [
-    "button", "[role='button']", "input[type='submit']", "input[type='button']",
-    "input:not([type='submit']):not([type='button']):not([type='hidden'])",
-    "a[href]", "select", "textarea",
-    "[role='link']", "[role='menuitem']", "[role='tab']", "[role='option']",
-    "[onclick]", "[tabindex]",
-].join(", ");
-// Dialog/modal selectors
-const DIALOG_SELECTORS = [
-    "[role='dialog']", "[role='alertdialog']", "[aria-modal='true']",
-    "dialog", ".modal",
-];
+// ─── Observer ──────────────────────────────────────────────────────────────────
 class Observer {
     page;
+    // Cache of element selectors from last observation for reliable re-targeting
+    elementSelectors = new Map();
     constructor(page) {
         this.page = page;
     }
+    // Returns the full DOM state as structured data + human-readable text
     async observe() {
-        const result = await this.page.evaluate((args) => {
-            const { INTERACTIVE_SEL, DIALOG_SELS, HTML_ATTR_KEYS } = args;
-            const baseUrl = window.location.href;
+        const result = await this.page.evaluate(() => {
+            const elements = [];
             const isVisible = (el) => {
-                const htmlEl = el;
-                // offsetParent is null when the element or any ancestor has display:none.
-                // Exception: <body>, <html>, and position:fixed/sticky elements legitimately have offsetParent === null.
-                if (htmlEl.offsetParent === null) {
-                    const style = window.getComputedStyle(el);
-                    const pos = style.position;
-                    if (pos !== "fixed" && pos !== "sticky" && el.tagName !== "BODY" && el.tagName !== "HTML") {
-                        return false;
-                    }
-                }
-                const style = window.getComputedStyle(el);
-                if (style.visibility === "hidden" || style.opacity === "0")
-                    return false;
                 const rect = el.getBoundingClientRect();
-                return rect.width > 0 && rect.height > 0;
+                const style = window.getComputedStyle(el);
+                return (rect.width > 0 &&
+                    rect.height > 0 &&
+                    style.display !== "none" &&
+                    style.visibility !== "hidden" &&
+                    style.opacity !== "0");
+            };
+            const getText = (el) => {
+                const aria = el.getAttribute("aria-label");
+                if (aria)
+                    return aria.trim();
+                const title = el.getAttribute("title");
+                if (title)
+                    return title.trim();
+                return (el.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 100);
             };
-            const resolveUrl = (url) => {
-                if (!url)
-                    return url;
-                try {
-                    return new URL(url, baseUrl).href;
+            // Build a CSS selector that uniquely identifies an element
+            const getSelector = (el) => {
+                // Try id first
+                if (el.id)
+                    return `#${CSS.escape(el.id)}`;
+                // Try name for inputs
+                const name = el.getAttribute("name");
+                if (name) {
+                    const tag = el.tagName.toLowerCase();
+                    return `${tag}[name="${CSS.escape(name)}"]`;
                 }
-                catch {
-                    return url;
+                // Try aria-label
+                const aria = el.getAttribute("aria-label");
+                if (aria) {
+                    const tag = el.tagName.toLowerCase();
+                    return `${tag}[aria-label="${CSS.escape(aria)}"]`;
                 }
-            };
-            const truncate = (val, max) => val.length > max ? val.slice(0, max) : val;
-            const getWhitelistedAttrs = (el) => {
-                const out = {};
-                for (const htmlAttr of HTML_ATTR_KEYS) {
-                    const val = el.getAttribute(htmlAttr);
-                    if (val == null || val === "")
-                        continue;
-                    // Map HTML attr name to our key
-                    const key = htmlAttr.replace(/-/g, "_");
-                    let resolved = val;
-                    if (htmlAttr === "href" || htmlAttr === "src") {
-                        resolved = resolveUrl(val);
-                    }
-                    out[key] = truncate(resolved, 60);
+                // Try placeholder for inputs
+                const placeholder = el.getAttribute("placeholder");
+                if (placeholder) {
+                    const tag = el.tagName.toLowerCase();
+                    return `${tag}[placeholder="${CSS.escape(placeholder)}"]`;
                 }
-                // For inputs, also grab the live .value if different from attr
-                if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) {
-                    if (el.value && el.value !== out["value"]) {
-                        out["value"] = truncate(el.value, 60);
+                // Fallback to nth-child path
+                const path = [];
+                let current = el;
+                while (current && current !== document.body) {
+                    const parentEl = current.parentElement;
+                    if (!parentEl)
+                        break;
+                    const tag = current.tagName;
+                    const siblings = Array.from(parentEl.children).filter((c) => c.tagName === tag);
+                    if (siblings.length === 1) {
+                        path.unshift(tag.toLowerCase());
                     }
-                }
-                return out;
-            };
-            const getInnerText = (el) => {
-                return (el.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 100);
-            };
-            // Find which dialog (if any) an element is inside
-            const findParentDialog = (el) => {
-                for (const sel of DIALOG_SELS) {
-                    const dialog = el.closest(sel);
-                    if (dialog) {
-                        const label = dialog.getAttribute("aria-label")
-                            ?? dialog.getAttribute("title")
-                            ?? (dialog.textContent ?? "").trim().slice(0, 40);
-                        return { inDialog: true, dialogLabel: label };
+                    else {
+                        const idx = siblings.indexOf(current) + 1;
+                        path.unshift(`${tag.toLowerCase()}:nth-of-type(${idx})`);
                     }
+                    current = parentEl;
                 }
-                return { inDialog: false };
+                return path.join(" > ");
             };
-            // Scroll info
-            const scrollTop = window.scrollY;
-            const scrollHeight = document.documentElement.scrollHeight;
-            const viewportHeight = window.innerHeight;
-            const pixelsAbove = Math.round(scrollTop);
-            const pixelsBelow = Math.max(0, Math.round(scrollHeight - scrollTop - viewportHeight));
-            // Gather all interactive elements
-            const interactiveSet = new Set();
-            document.querySelectorAll(INTERACTIVE_SEL).forEach((el) => interactiveSet.add(el));
-            // Build the node list — walk the DOM in order to get interleaved text context
-            const nodes = [];
-            let order = 0;
-            const walk = (node) => {
-                if (node.nodeType === Node.TEXT_NODE) {
-                    const text = (node.textContent ?? "").replace(/\s+/g, " ").trim();
-                    if (text.length < 2)
-                        return;
-                    // Skip if parent is an interactive element (text goes inside the tag)
-                    const parent = node.parentElement;
-                    if (parent && interactiveSet.has(parent))
-                        return;
-                    // Also skip script/style
-                    if (parent && (parent.tagName === "SCRIPT" || parent.tagName === "STYLE"))
-                        return;
-                    // Check visibility of parent
-                    if (parent && !isVisible(parent))
-                        return;
-                    const dialog = parent ? findParentDialog(parent) : { inDialog: false };
-                    nodes.push({
-                        tag: "_text",
-                        text: text.slice(0, 150),
-                        attrs: {},
-                        isInteractive: false,
-                        visible: true,
-                        inDialog: dialog.inDialog,
-                        dialogLabel: dialog.dialogLabel,
-                        order: order++,
-                    });
-                    return;
-                }
-                if (node.nodeType !== Node.ELEMENT_NODE)
-                    return;
-                const el = node;
-                // Skip script/style/noscript
-                const tagName = el.tagName.toLowerCase();
-                if (tagName === "script" || tagName === "style" || tagName === "noscript")
-                    return;
-                if (interactiveSet.has(el)) {
-                    const visible = isVisible(el);
-                    const dialog = findParentDialog(el);
-                    const attrs = getWhitelistedAttrs(el);
-                    const text = getInnerText(el);
-                    let resolvedTag = tagName;
-                    // Normalize tag for our type system
-                    if (tagName === "a")
-                        resolvedTag = "link";
-                    if (el.getAttribute("role") === "button" && tagName !== "button")
-                        resolvedTag = "button";
-                    nodes.push({
-                        tag: resolvedTag,
-                        inputType: el.type || undefined,
-                        text,
-                        attrs,
-                        isInteractive: true,
-                        visible,
-                        inDialog: dialog.inDialog,
-                        dialogLabel: dialog.dialogLabel,
-                        order: order++,
-                    });
-                    // Don't recurse into interactive elements — text is already captured
+            // Buttons
+            document.querySelectorAll("button, [role='button'], input[type='submit'], input[type='button']").forEach((el) => {
+                elements.push({
+                    tag: "button",
+                    text: getText(el),
+                    disabled: el.disabled ?? false,
+                    visible: isVisible(el),
+                    ariaLabel: el.getAttribute("aria-label") ?? undefined,
+                    selector: getSelector(el),
+                });
+            });
+            // Inputs
+            document.querySelectorAll("input:not([type='submit']):not([type='button']):not([type='hidden']):not([type='checkbox']):not([type='radio'])").forEach((el) => {
+                const input = el;
+                elements.push({
+                    tag: "input",
+                    type: input.type,
+                    text: getText(el),
+                    placeholder: input.placeholder || undefined,
+                    value: input.value || undefined,
+                    disabled: input.disabled,
+                    visible: isVisible(el),
+                    selector: getSelector(el),
+                    name: input.name || undefined,
+                });
+            });
+            // Links
+            document.querySelectorAll("a[href]").forEach((el) => {
+                const anchor = el;
+                const text = getText(el);
+                if (!text)
                     return;
-                }
-                // Recurse children for non-interactive elements
-                for (const child of Array.from(el.childNodes)) {
-                    walk(child);
-                }
-            };
-            walk(document.body);
+                elements.push({
+                    tag: "link",
+                    text,
+                    href: anchor.href,
+                    disabled: false,
+                    visible: isVisible(el),
+                    selector: getSelector(el),
+                });
+            });
+            // Selects
+            document.querySelectorAll("select").forEach((el) => {
+                const select = el;
+                elements.push({
+                    tag: "select",
+                    text: getText(el),
+                    value: select.value || undefined,
+                    disabled: select.disabled,
+                    visible: isVisible(el),
+                    selector: getSelector(el),
+                    name: select.name || undefined,
+                });
+            });
+            // Textareas
+            document.querySelectorAll("textarea").forEach((el) => {
+                const textarea = el;
+                elements.push({
+                    tag: "textarea",
+                    text: getText(el),
+                    placeholder: textarea.placeholder || undefined,
+                    value: textarea.value || undefined,
+                    disabled: textarea.disabled,
+                    visible: isVisible(el),
+                    selector: getSelector(el),
+                    name: textarea.name || undefined,
+                });
+            });
+            // Checkboxes & radios
+            document.querySelectorAll("input[type='checkbox'], input[type='radio']").forEach((el) => {
+                const input = el;
+                elements.push({
+                    tag: input.type,
+                    text: getText(el),
+                    value: input.checked ? "checked" : "unchecked",
+                    disabled: input.disabled,
+                    visible: isVisible(el),
+                    selector: getSelector(el),
+                    name: input.name || undefined,
+                });
+            });
             // Modal detection
-            const hasModal = DIALOG_SELS.some((s) => document.querySelector(s) !== null);
+            const modalSelectors = [
+                "[role='dialog']", "[role='alertdialog']",
+                ".modal", ".overlay", "[aria-modal='true']",
+            ];
+            const hasModal = modalSelectors.some((s) => document.querySelector(s) !== null);
             // Cookie banner detection
-            const cookieKeywords = ["cookie", "gdpr", "consent", "accept all"];
-            const bodyText = document.body.innerText.toLowerCase().slice(0, 5000);
+            const cookieKeywords = ["cookie", "gdpr", "consent", "accept all", "accept cookies"];
+            const bodyText = document.body.innerText.toLowerCase();
             const hasCookieBanner = cookieKeywords.some((k) => bodyText.includes(k));
-            // Loading detection
+            // Loading detection (expanded)
             const loadingSelectors = [
                 "[aria-busy='true']", ".loading", ".spinner", "[role='progressbar']",
+                "[class*='skeleton']", "[class*='shimmer']", "[class*='placeholder']",
+                "[class*='loading']",
             ];
             const isLoading = loadingSelectors.some((s) => document.querySelector(s) !== null);
             return {
-                url: baseUrl,
+                url: window.location.href,
                 title: document.title,
-                nodes,
+                elements,
                 hasModal,
                 hasCookieBanner,
                 isLoading,
-                pixelsAbove,
-                pixelsBelow,
             };
-        }, {
-            INTERACTIVE_SEL: INTERACTIVE_SELECTOR,
-            DIALOG_SELS: DIALOG_SELECTORS,
-            HTML_ATTR_KEYS: Object.keys(HTML_ATTR_MAP),
         });
-        // Assign IDs to interactive elements and build structured list
+        // Assign IDs and build structured list + cache selectors
         const counters = {};
         const typedElements = [];
-        const textLines = [];
-        // Separate dialog vs non-dialog nodes
-        const dialogNodes = result.nodes.filter((n) => n.inDialog);
-        const mainNodes = result.nodes.filter((n) => !n.inDialog);
-        // Render main content
-        if (result.pixelsAbove > 0) {
-            textLines.push(`... ${result.pixelsAbove} pixels above - scroll to see more ...`);
-        }
-        for (const node of mainNodes) {
-            if (!node.isInteractive) {
-                // Context text node
-                textLines.push(`_[:]${node.text}`);
-                continue;
-            }
-            if (!node.visible)
-                continue;
-            const type = this.resolveType(node.tag, node.inputType);
+        this.elementSelectors.clear();
+        for (const raw of result.elements) {
+            const type = this.resolveType(raw.tag, raw.type);
             counters[type] = (counters[type] ?? 0) + 1;
-            const id = `${PREFIX[type]}${counters[type]}`;
+            const id = `@${PREFIX[type]}${counters[type]}`;
+            // Cache the CSS selector for reliable re-targeting
+            this.elementSelectors.set(id, raw.selector);
             typedElements.push({
                 id,
                 type,
-                text: node.text || undefined,
-                placeholder: node.attrs.placeholder,
-                href: node.attrs.href,
-                value: node.attrs.value,
-                disabled: false,
-                visible: node.visible,
+                text: raw.text || undefined,
+                placeholder: raw.placeholder,
+                href: raw.href,
+                value: raw.value,
+                disabled: raw.disabled,
+                visible: raw.visible,
             });
-            textLines.push(this.renderElementLine(id, node.tag, node.text, node.attrs));
-        }
-        if (result.pixelsBelow > 0) {
-            textLines.push(`... ${result.pixelsBelow} pixels below - scroll to see more ...`);
-        }
-        // Render dialog content separately
-        if (dialogNodes.length > 0) {
-            const dialogGroups = new Map();
-            for (const node of dialogNodes) {
-                const key = node.dialogLabel ?? "dialog";
-                if (!dialogGroups.has(key))
-                    dialogGroups.set(key, []);
-                dialogGroups.get(key).push(node);
-            }
-            for (const [label, nodes] of dialogGroups) {
-                textLines.push("");
-                textLines.push(`### Content of 'dialog' component with text '${label.slice(0, 50)}'`);
-                for (const node of nodes) {
-                    if (!node.isInteractive) {
-                        textLines.push(`_[:]${node.text}`);
-                        continue;
-                    }
-                    if (!node.visible)
-                        continue;
-                    const type = this.resolveType(node.tag, node.inputType);
-                    counters[type] = (counters[type] ?? 0) + 1;
-                    const id = `${PREFIX[type]}${counters[type]}`;
-                    typedElements.push({
-                        id,
-                        type,
-                        text: node.text || undefined,
-                        placeholder: node.attrs.placeholder,
-                        href: node.attrs.href,
-                        value: node.attrs.value,
-                        disabled: false,
-                        visible: node.visible,
-                    });
-                    textLines.push(this.renderElementLine(id, node.tag, node.text, node.attrs));
-                }
-            }
         }
-        const text = textLines.join("\n");
+        const text = this.buildTextRepresentation(typedElements, result);
         return {
             url: result.url,
             title: result.title,
@@ -306,34 +222,139 @@ class Observer {
             hasCookieBanner: result.hasCookieBanner,
             isLoading: result.isLoading,
             text,
-            currentUrl: result.url,
-            pageTitle: result.title,
-            scrollPixelsAbove: result.pixelsAbove,
-            scrollPixelsBelow: result.pixelsBelow,
         };
     }
-    // Find an element by ID (B3, I1, etc.) and return its locator
+    // ─── Element resolution — uses cached CSS selectors for reliability ──────────
     async resolveElementId(id) {
+        // First try cached selector (reliable)
+        const cachedSelector = this.elementSelectors.get(id);
+        if (cachedSelector) {
+            const coords = await this.page.evaluate((sel) => {
+                const el = document.querySelector(sel);
+                if (!el)
+                    return null;
+                const rect = el.getBoundingClientRect();
+                return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+            }, cachedSelector);
+            if (coords)
+                return coords;
+        }
+        // Fallback: find by text content (original behavior)
         const elements = await this.observe();
         const el = elements.elements.find((e) => e.id === id);
         if (!el)
             return null;
         return await this.page.evaluate((targetText) => {
-            const all = document.querySelectorAll("button, input, a, select, textarea, [role='button'], [role='link'], [role='menuitem'], [role='tab'], [onclick], [tabindex]");
+            const all = document.querySelectorAll("button, input, a, select, textarea, [role='button']");
             for (const el of Array.from(all)) {
                 const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
                 const aria = el.getAttribute("aria-label") ?? "";
                 if (text.includes(targetText) || aria.includes(targetText)) {
                     const rect = el.getBoundingClientRect();
-                    return {
-                        x: rect.left + rect.width / 2,
-                        y: rect.top + rect.height / 2,
-                    };
+                    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
                 }
             }
             return null;
         }, el.text ?? el.placeholder ?? "");
     }
+    // Get the cached CSS selector for an element ID
+    getSelector(id) {
+        return this.elementSelectors.get(id);
+    }
+    // ─── Form detection ─────────────────────────────────────────────────────────
+    async detectForms() {
+        const observation = await this.observe();
+        const visibleInputs = observation.elements.filter((e) => e.visible && (e.type === "input" || e.type === "textarea"));
+        const visibleButtons = observation.elements.filter((e) => e.visible && e.type === "button" && !e.disabled);
+        if (visibleInputs.length === 0)
+            return [];
+        const forms = [];
+        // Detect search forms: single input + optional submit button
+        const searchInput = visibleInputs.find((e) => /search|buscar|query|find|lookup/i.test(e.placeholder ?? "") ||
+            /search|buscar|query|find|lookup/i.test(e.text ?? "")) ?? visibleInputs[0]; // default to first visible input
+        const submitButton = visibleButtons.find((e) => /search|submit|go|find|buscar|enter/i.test(e.text ?? "")) ?? visibleButtons[0] ?? null;
+        const isMultiField = visibleInputs.length > 2;
+        const isLogin = visibleInputs.some((e) => /password|contraseña/i.test(e.placeholder ?? ""));
+        forms.push({
+            mainInput: searchInput?.id ?? null,
+            submitButton: submitButton?.id ?? null,
+            fields: visibleInputs.map((e) => ({
+                elementId: e.id,
+                name: e.text ?? e.placeholder ?? "",
+                type: e.type,
+                isMain: e.id === searchInput?.id,
+            })),
+            formType: isLogin ? "login" : isMultiField ? "multi-field" : "search",
+        });
+        return forms;
+    }
+    // ─── Autocomplete/dropdown detection ────────────────────────────────────────
+    async detectAutocomplete() {
+        return await this.page.evaluate(() => {
+            const selectors = [
+                '[class*="autocomplete"] li',
+                '[class*="autocomplete"] a',
+                '[class*="suggestion"] li',
+                '[class*="suggestion"] a',
+                '[class*="dropdown"] li a',
+                '[class*="search-result"] a',
+                '[class*="search-result"] li',
+                '[role="listbox"] [role="option"]',
+                '[role="listbox"] li',
+                'ul[class*="result"] li',
+                'ul[class*="result"] a',
+                ".autocomplete-results a",
+                ".tt-suggestion",
+                ".ui-autocomplete li",
+                ".search-suggestions a",
+                ".pac-item",
+            ];
+            const items = [];
+            for (const sel of selectors) {
+                const els = document.querySelectorAll(sel);
+                for (const el of Array.from(els)) {
+                    const text = (el.textContent ?? "").trim();
+                    if (text.length > 0 && text.length < 200) {
+                        items.push({ text, selector: sel });
+                    }
+                }
+                if (items.length > 0)
+                    break; // found autocomplete items
+            }
+            return items.slice(0, 10);
+        });
+    }
+    // ─── Error message detection ────────────────────────────────────────────────
+    async detectErrors() {
+        return await this.page.evaluate(() => {
+            const errorSelectors = [
+                '[class*="error"]', '[class*="no-results"]', '[class*="empty-state"]',
+                '[class*="not-found"]', '[role="alert"]',
+            ];
+            const errorTexts = [];
+            for (const sel of errorSelectors) {
+                const els = document.querySelectorAll(sel);
+                for (const el of Array.from(els)) {
+                    const text = (el.textContent ?? "").trim();
+                    if (text.length > 5 && text.length < 300) {
+                        const style = window.getComputedStyle(el);
+                        if (style.display !== "none" && style.visibility !== "hidden") {
+                            errorTexts.push(text);
+                        }
+                    }
+                }
+            }
+            // Also check for common error text patterns
+            const body = document.body.innerText.toLowerCase();
+            const patterns = ["no results", "no se encontr", "not found", "no data", "no matches"];
+            for (const p of patterns) {
+                if (body.includes(p) && !errorTexts.some((t) => t.toLowerCase().includes(p))) {
+                    errorTexts.push(`Page contains: "${p}"`);
+                }
+            }
+            return [...new Set(errorTexts)].slice(0, 5);
+        });
+    }
     // ─── Helpers ─────────────────────────────────────────────────────────────────
     resolveType(tag, inputType) {
         if (tag === "button")
@@ -345,7 +366,7 @@ class Observer {
                 return "radio";
             return "input";
         }
-        if (tag === "link" || tag === "a")
+        if (tag === "link")
             return "link";
         if (tag === "select")
             return "select";
@@ -357,19 +378,38 @@ class Observer {
             return "radio";
         return "other";
     }
-    // Renders: B1[:]<button type="submit" aria_label="Search">Google Search</button>
-    renderElementLine(id, tag, text, attrs) {
-        // Map our tag names to HTML tag names for rendering
-        const htmlTag = tag === "link" ? "a" : tag;
-        const attrParts = [];
-        for (const key of ATTR_WHITELIST) {
-            const val = attrs[key];
-            if (val != null && val !== "") {
-                attrParts.push(`${key}="${val}"`);
-            }
+    buildTextRepresentation(elements, meta) {
+        const lines = [
+            `PAGE: ${meta.title}`,
+            `URL: ${meta.url}`,
+        ];
+        if (meta.isLoading)
+            lines.push("[PAGE IS LOADING]");
+        if (meta.hasModal)
+            lines.push("[MODAL IS OPEN - may block interactions]");
+        if (meta.hasCookieBanner)
+            lines.push("[COOKIE BANNER DETECTED - dismiss first]");
+        lines.push("", "INTERACTIVE ELEMENTS:");
+        const visible = elements.filter((e) => e.visible !== false);
+        const hidden = elements.filter((e) => e.visible === false);
+        for (const el of visible) {
+            let desc = `  ${el.id} [${el.type}]`;
+            if (el.text)
+                desc += ` "${el.text}"`;
+            if (el.placeholder)
+                desc += ` placeholder="${el.placeholder}"`;
+            if (el.value)
+                desc += ` value="${el.value}"`;
+            if (el.href)
+                desc += ` -> ${el.href.slice(0, 80)}`;
+            if (el.disabled)
+                desc += " (disabled)";
+            lines.push(desc);
+        }
+        if (hidden.length > 0) {
+            lines.push(`  ... and ${hidden.length} hidden elements`);
         }
-        const attrStr = attrParts.length > 0 ? " " + attrParts.join(" ") : "";
-        return `${id}[:]<${htmlTag}${attrStr}>${text}</${htmlTag}>`;
+        return lines.join("\n");
     }
 }
 exports.Observer = Observer;