explorbot 0.1.11 → 0.1.13

package/dist/src/utils/hooks-runner.js

@@ -1,4 +1,5 @@
 import { createDebug } from "./logger.js";
+import { extractStatePath } from "./url-matcher.js";
 import { matchesUrl } from "./url-matcher.js";
 const debugLog = createDebug('explorbot:hooks');
 export class HooksRunner {
@@ -64,13 +65,6 @@ export class HooksRunner {
         return 'type' in config && 'hook' in config;
     }
     extractPath(url) {
-        if (url.startsWith('/'))
-            return url;
-        try {
-            return new URL(url).pathname;
-        }
-        catch {
-            return url;
-        }
+        return extractStatePath(url);
     }
 }

package/dist/src/utils/html.js

@@ -65,6 +65,377 @@ const INTERACTIVE_TAGS = new Set(['a', 'button', 'details', 'input', 'option', '
 const INTERACTIVE_ROLES = new Set(['button', 'checkbox', 'combobox', 'link', 'listbox', 'radio', 'search', 'switch', 'tab', 'textbox']);
 const INTERACTIVE_EVENT_ATTRIBUTES = new Set(['onclick', 'onchange', 'onblur', 'onfocus', 'onmousedown', 'onmouseup']);
 const HIDDEN_CLASSES = new Set(['hidden', 'invisible', 'd-none', 'hide', 'dn', 'u-hidden', 'is-hidden', 'visually-hidden', 'sr-only', 'screen-reader-only', 'visuallyhidden', 'opacity-0']);
+export const EXPLORBOT_ATTRS = {
+    area: 'data-explorbot-area',
+    context: 'data-explorbot-context',
+    eidx: 'data-explorbot-eidx',
+    variant: 'data-explorbot-variant',
+};
+export const HTML_SELECTORS = {
+    headingLabel: 'h1, h2, h3, h4, h5, h6, legend, caption, label, [role="heading"]',
+    interactiveContent: 'button, a[href], input, select, textarea, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="switch"], [role="checkbox"], [role="radio"], [aria-label], [tabindex]',
+    interactiveControl: 'button, a[href], input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="tab"], [role="menuitem"]',
+    labelLike: 'h1, h2, h3, h4, h5, h6, legend, caption, label, [role="heading"], [class*="title"], [class*="label"], [class*="header"], [class*="name"]',
+    semanticContextContainer: 'section, article, form, fieldset, li, tr, td, th, [role="group"], [role="tabpanel"], [role="region"], [class*="card"], [class*="panel"], [class*="item"], [class*="usage"], [class*="group"]',
+    semanticOverlays: ['[role="dialog"]', '[role="listbox"]', '[role="menu"]', '[role="tooltip"]:not([style*="display: none"]):not([style*="visibility: hidden"])'],
+};
+export const HTML_VISIBILITY_LIMITS = {
+    maxViewportOverlayRatio: 0.95,
+    minOpacity: 0.1,
+    minOverlayHeight: 40,
+    minOverlayWidth: 80,
+};
+export const HTML_EXTRACTION_LIMITS = {
+    componentScopeHtmlLength: 8000,
+    maxOverlayCount: 3,
+    maxScopeInteractiveCount: 16,
+    overlayHtmlLength: 6000,
+};
+export const CODE_EDITOR_MARKERS = ['monaco', 'codemirror', 'ace', 'ace_editor', 'code'];
+export const HTML_INTERACTIVE_ROLES = new Set(['button', 'link', 'checkbox', 'radio', 'switch', 'tab', 'combobox', 'iframe', 'code-editor', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'option', 'slider', 'spinbutton', 'textbox', 'searchbox', 'treeitem']);
+export const HTML_FORM_CONTROL_ROLES = new Set(['checkbox', 'radio', 'switch', 'combobox', 'option', 'slider', 'spinbutton', 'textbox', 'searchbox']);
+export const HTML_COMPOSITE_TARGET_ROLES = new Set(['tab', 'option', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'treeitem']);
+export const HTML_COMPOSITE_AREA_HINTS = new Set(['role:tab', 'role:option', 'role:menuitem', 'role:menuitemcheckbox', 'role:menuitemradio', 'role:treeitem']);
+export const HTML_FORM_CONTROL_TAGS = new Set(['input', 'select', 'textarea']);
+export function inferHtmlRole(data) {
+    if (data.tag === 'iframe' && data.variantHints?.includes('code-editor'))
+        return 'code-editor';
+    if (data.role)
+        return data.role.toLowerCase();
+    const explicitRole = data.attrs.role;
+    if (explicitRole)
+        return explicitRole.toLowerCase();
+    if (data.tag === 'a' && data.attrs.href)
+        return 'link';
+    if (data.tag === 'button')
+        return 'button';
+    if (data.tag === 'iframe')
+        return 'iframe';
+    if (data.tag === 'select')
+        return 'combobox';
+    if (data.tag === 'textarea')
+        return 'textbox';
+    if (data.tag === 'input') {
+        const type = (data.attrs.type || 'text').toLowerCase();
+        if (type === 'checkbox')
+            return 'checkbox';
+        if (type === 'radio')
+            return 'radio';
+        return 'textbox';
+    }
+    return data.tag;
+}
+export const ELEMENT_EXTRACTION_CONFIG = {
+    attrs: EXPLORBOT_ATTRS,
+    codeEditorMarkers: CODE_EDITOR_MARKERS,
+    maxAreaDepth: 5,
+    maxContextLength: 120,
+    maxOuterHTMLLength: 2000,
+    maxTextLength: 80,
+    minOpacity: HTML_VISIBILITY_LIMITS.minOpacity,
+    selectors: {
+        headingLabel: HTML_SELECTORS.headingLabel,
+        labelLike: HTML_SELECTORS.labelLike,
+        semanticContextContainer: HTML_SELECTORS.semanticContextContainer,
+    },
+};
+export function extractElementData(el, config) {
+    const cfg = config ||
+        {
+            attrs: {
+                area: 'data-explorbot-area',
+                context: 'data-explorbot-context',
+                eidx: 'data-explorbot-eidx',
+                variant: 'data-explorbot-variant',
+            },
+            codeEditorMarkers: ['monaco', 'codemirror', 'ace', 'ace_editor', 'code'],
+            maxAreaDepth: 5,
+            maxContextLength: 120,
+            maxOuterHTMLLength: 2000,
+            maxTextLength: 80,
+            minOpacity: 0.1,
+            selectors: {
+                headingLabel: 'h1, h2, h3, h4, h5, h6, legend, caption, label, [role="heading"]',
+                labelLike: 'h1, h2, h3, h4, h5, h6, legend, caption, label, [role="heading"], [class*="title"], [class*="label"], [class*="header"], [class*="name"]',
+                semanticContextContainer: 'section, article, form, fieldset, li, tr, td, th, [role="group"], [role="tabpanel"], [role="region"], [class*="card"], [class*="panel"], [class*="item"], [class*="usage"], [class*="group"]',
+            },
+        };
+    function normalizeText(value) {
+        return value.replace(/\s+/g, ' ').trim();
+    }
+    function readText(node) {
+        if (!node)
+            return '';
+        return normalizeText(node.textContent || '').slice(0, cfg.maxContextLength);
+    }
+    function getLabelLikeText(node) {
+        if (!node)
+            return '';
+        const direct = readText(node);
+        if (direct)
+            return direct;
+        const labelLike = node.querySelector(cfg.selectors.labelLike);
+        return readText(labelLike);
+    }
+    function collectVariantHints(target) {
+        const tokens = new Set();
+        const className = target.getAttribute('class') || '';
+        const tagName = target.tagName.toLowerCase();
+        for (const cls of className.split(/\s+/).filter(Boolean)) {
+            const lower = cls.toLowerCase();
+            if (/^(xs|sm|md|lg|xl|xxl)$/.test(lower))
+                tokens.add(lower);
+            if (/^(mini|small|medium|large|xlarge|xl|compact|dense)$/.test(lower))
+                tokens.add(lower);
+            if (/(^|[-_])(xs|sm|md|lg|xl|xxl|mini|small|medium|large|compact|dense)([-_]|$)/.test(lower))
+                tokens.add(lower);
+            if (/(selected|disabled|primary|secondary|tertiary|danger|success|warning|outline|ghost|icon|dropdown)/.test(lower))
+                tokens.add(lower);
+        }
+        const type = (target.getAttribute('type') || '').toLowerCase();
+        if (type)
+            tokens.add(type);
+        if (target.hasAttribute('disabled') || target.getAttribute('aria-disabled') === 'true')
+            tokens.add('disabled');
+        if (className.toLowerCase().includes('selected') || target.getAttribute('aria-pressed') === 'true')
+            tokens.add('selected');
+        if (tagName === 'iframe')
+            tokens.add('iframe');
+        if (tagName === 'iframe' && isEmbeddedCodeEditorFrame(target))
+            tokens.add('code-editor');
+        const svgCount = target.querySelectorAll('svg').length;
+        if (svgCount > 0)
+            tokens.add('has-icon');
+        if (svgCount > 1)
+            tokens.add('double-icon');
+        const normalizedText = normalizeText(target.textContent || '');
+        if (!normalizedText && svgCount > 0)
+            tokens.add('icon-only');
+        if (normalizedText && svgCount > 0) {
+            const first = target.firstElementChild?.tagName.toLowerCase();
+            const last = target.lastElementChild?.tagName.toLowerCase();
+            if (first === 'svg')
+                tokens.add('leading-icon');
+            if (last === 'svg')
+                tokens.add('trailing-icon');
+        }
+        if (tagName === 'a' && target.getAttribute('href'))
+            tokens.add('navigates');
+        return Array.from(tokens).slice(0, 8);
+    }
+    function isEmbeddedCodeEditorFrame(target) {
+        const src = (target.getAttribute('src') || '').toLowerCase();
+        const markerSelector = cfg.codeEditorMarkers.map((marker) => `[class*="${marker}"]`).join(', ');
+        const ancestorClasses = (target.closest(markerSelector)?.getAttribute('class') || '').toLowerCase();
+        return cfg.codeEditorMarkers.some((marker) => src.includes(marker) || ancestorClasses.includes(marker));
+    }
+    function findContextLabel(target) {
+        const labelledby = target.getAttribute('aria-labelledby');
+        const candidates = [];
+        if (labelledby) {
+            for (const id of labelledby.split(/\s+/).filter(Boolean)) {
+                const ref = document.getElementById(id);
+                const text = readText(ref);
+                if (text)
+                    candidates.push(text);
+            }
+        }
+        const semanticContainer = target.closest(cfg.selectors.semanticContextContainer);
+        if (semanticContainer) {
+            const ownHeading = semanticContainer.querySelector(cfg.selectors.headingLabel);
+            const ownHeadingText = readText(ownHeading);
+            if (ownHeadingText)
+                candidates.push(ownHeadingText);
+            let previous = semanticContainer.previousElementSibling;
+            let hops = 0;
+            while (previous && hops < 3) {
+                const previousText = getLabelLikeText(previous);
+                if (previousText) {
+                    candidates.push(previousText);
+                    break;
+                }
+                previous = previous.previousElementSibling;
+                hops++;
+            }
+        }
+        let parent = target.parentElement;
+        let depth = 0;
+        while (parent && depth < 4) {
+            let sibling = parent.previousElementSibling;
+            let hops = 0;
+            while (sibling && hops < 2) {
+                const siblingText = getLabelLikeText(sibling);
+                if (siblingText) {
+                    candidates.push(siblingText);
+                    sibling = null;
+                    break;
+                }
+                sibling = sibling.previousElementSibling;
+                hops++;
+            }
+            parent = parent.parentElement;
+            depth++;
+        }
+        const ownText = normalizeText(target.textContent || '');
+        for (const candidate of candidates) {
+            if (!candidate)
+                continue;
+            if (candidate === ownText)
+                continue;
+            if (candidate.toLowerCase().includes('title should not be empty'))
+                continue;
+            return candidate.slice(0, cfg.maxContextLength);
+        }
+        return '';
+    }
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0)
+        return null;
+    const style = window.getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden')
+        return null;
+    if (Number.parseFloat(style.opacity || '1') < cfg.minOpacity)
+        return null;
+    if (el.getAttribute('aria-hidden') === 'true' || el.hasAttribute('hidden'))
+        return null;
+    if (el.offsetParent === null && style.position !== 'fixed')
+        return null;
+    const allAttrs = {};
+    for (let i = 0; i < el.attributes.length; i++) {
+        const attr = el.attributes[i];
+        allAttrs[attr.name] = attr.value;
+    }
+    const areaHints = [];
+    let current = el;
+    let depth = 0;
+    while (current && depth < cfg.maxAreaDepth) {
+        const tag = current.tagName.toLowerCase();
+        areaHints.push(tag);
+        const role = current.getAttribute('role');
+        if (role)
+            areaHints.push(`role:${role.toLowerCase()}`);
+        const id = current.getAttribute('id');
+        if (id)
+            areaHints.push(`id:${id.toLowerCase()}`);
+        const className = current.getAttribute('class');
+        if (className) {
+            for (const cls of className.split(/\s+/).filter(Boolean)) {
+                areaHints.push(`class:${cls.toLowerCase()}`);
+            }
+        }
+        current = current.parentElement;
+        depth++;
+    }
+    allAttrs[cfg.attrs.area] = areaHints.join('|');
+    allAttrs[cfg.attrs.context] = findContextLabel(el);
+    allAttrs[cfg.attrs.variant] = collectVariantHints(el).join('|');
+    return {
+        tag: el.tagName.toLowerCase(),
+        text: normalizeText(el.textContent || '').slice(0, cfg.maxTextLength),
+        allAttrs,
+        outerHTML: el.outerHTML.slice(0, cfg.maxOuterHTMLLength),
+        x: Math.round(rect.x + rect.width / 2),
+        y: Math.round(rect.y + rect.height / 2),
+    };
+}
+export function getElementDataExtractorSource() {
+    return extractElementData.toString();
+}
+export function extractVisibleOverlayHtml(config) {
+    function isVisible(element) {
+        const html = element;
+        const style = window.getComputedStyle(html);
+        const rect = html.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0)
+            return false;
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return false;
+        if (Number.parseFloat(style.opacity || '1') < config.visibilityLimits.minOpacity)
+            return false;
+        return true;
+    }
+    function getUsefulContent(element) {
+        const text = (element.textContent || '').replace(/\s+/g, ' ').trim();
+        const interactiveCount = element.querySelectorAll(config.interactiveContentSelector).length;
+        return { interactiveCount, text };
+    }
+    function isLikelyFloatingOverlay(element) {
+        const html = element;
+        const style = window.getComputedStyle(html);
+        const rect = html.getBoundingClientRect();
+        const zIndex = Number.parseInt(style.zIndex || '0', 10);
+        const isFloating = style.position === 'fixed' || style.position === 'absolute' || style.position === 'sticky' || zIndex > 0;
+        if (!isFloating)
+            return false;
+        if (rect.width < config.visibilityLimits.minOverlayWidth || rect.height < config.visibilityLimits.minOverlayHeight)
+            return false;
+        if (rect.bottom < 0 || rect.right < 0 || rect.top > window.innerHeight || rect.left > window.innerWidth)
+            return false;
+        if (rect.width >= window.innerWidth * config.visibilityLimits.maxViewportOverlayRatio && rect.height >= window.innerHeight * config.visibilityLimits.maxViewportOverlayRatio)
+            return false;
+        const { interactiveCount, text } = getUsefulContent(element);
+        return interactiveCount > 0 || text.length > 0;
+    }
+    const overlays = [];
+    const seen = new Set();
+    for (const selector of config.overlaySelectors) {
+        for (const element of Array.from(document.querySelectorAll(selector))) {
+            if (seen.has(element))
+                continue;
+            seen.add(element);
+            if (!isVisible(element))
+                continue;
+            const { interactiveCount, text } = getUsefulContent(element);
+            if (interactiveCount === 0 && text.length === 0)
+                continue;
+            overlays.push(element.outerHTML.slice(0, config.limits.overlayHtmlLength));
+        }
+    }
+    if (overlays.length === 0) {
+        const floatingCandidates = Array.from(document.body.querySelectorAll('*'))
+            .filter((element) => !seen.has(element) && isVisible(element) && isLikelyFloatingOverlay(element))
+            .sort((left, right) => {
+            const leftStyle = window.getComputedStyle(left);
+            const rightStyle = window.getComputedStyle(right);
+            const leftZ = Number.parseInt(leftStyle.zIndex || '0', 10) || 0;
+            const rightZ = Number.parseInt(rightStyle.zIndex || '0', 10) || 0;
+            if (leftZ !== rightZ)
+                return rightZ - leftZ;
+            const leftRect = left.getBoundingClientRect();
+            const rightRect = right.getBoundingClientRect();
+            return leftRect.width * leftRect.height - rightRect.width * rightRect.height;
+        });
+        for (const element of floatingCandidates.slice(0, config.limits.maxOverlayCount)) {
+            overlays.push(element.outerHTML.slice(0, config.limits.overlayHtmlLength));
+        }
+    }
+    return overlays.slice(0, config.limits.maxOverlayCount).join('\n\n--- overlay ---\n\n');
+}
+export function extractComponentScopeHtml(eidx, config) {
+    const element = document.querySelector(`[${config.eidxAttr}="${eidx}"]`);
+    if (!element)
+        return '';
+    function countInteractive(node) {
+        return node.querySelectorAll(config.interactiveControlSelector).length;
+    }
+    let current = element.parentElement;
+    while (current) {
+        const count = countInteractive(current);
+        if (count > 0 && count <= config.limits.maxScopeInteractiveCount) {
+            return current.outerHTML.slice(0, config.limits.componentScopeHtmlLength);
+        }
+        current = current.parentElement;
+    }
+    if (element instanceof HTMLElement)
+        return element.outerHTML.slice(0, config.limits.componentScopeHtmlLength);
+    return '';
+}
+export function getVisibleOverlayHtmlExtractorSource() {
+    return extractVisibleOverlayHtml.toString();
+}
+export function getComponentScopeHtmlExtractorSource() {
+    return extractComponentScopeHtml.toString();
+}
 export const TRASH_HTML_CLASSES = /^(text-|color-|flex-|float-|v-|ember-|d-|border-)/;
 export const TAILWIND_CLASS_PATTERNS = [
     /^m[trblxy]?-/i,

package/dist/src/utils/strings.js

@@ -1,3 +1,4 @@
+import { createHash } from 'node:crypto';
 export function truncateJson(input) {
     if (!input)
         return '';
@@ -11,3 +12,17 @@ export function sanitizeFilename(name) {
         .replace(/^_+|_+$/g, '')
         .slice(0, 50);
 }
+export function safeFilename(name, ext = '', maxBytes = 240) {
+    const sanitized = name.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
+    const extBytes = Buffer.byteLength(ext, 'utf8');
+    const budget = maxBytes - extBytes;
+    if (Buffer.byteLength(sanitized, 'utf8') <= budget)
+        return sanitized + ext;
+    const hash = createHash('sha1').update(name).digest('hex').slice(0, 8);
+    const suffix = `_${hash}`;
+    let truncated = sanitized;
+    while (Buffer.byteLength(truncated + suffix, 'utf8') > budget && truncated.length > 0) {
+        truncated = truncated.slice(0, -1);
+    }
+    return truncated + suffix + ext;
+}

package/dist/src/utils/unique-names.js

@@ -1,12 +1,23 @@
-import { adjectives, colors, uniqueNamesGenerator } from 'unique-names-generator';
+import { adjectives, animals, colors, uniqueNamesGenerator } from 'unique-names-generator';
 const nameConfig = {
     dictionaries: [adjectives, adjectives, colors],
     separator: '',
     length: 3,
     style: 'capital',
 };
+const explorationConfig = {
+    dictionaries: [adjectives, animals],
+    separator: '',
+    length: 2,
+    style: 'capital',
+};
 export function uniqSessionName() {
     const name = uniqueNamesGenerator(nameConfig);
     const randomNum = Math.floor(Math.random() * 999);
     return `${name}${randomNum}`;
 }
+export function uniqExplorationName() {
+    const name = uniqueNamesGenerator(explorationConfig);
+    const randomNum = Math.floor(Math.random() * 999);
+    return `${name}${randomNum}`;
+}

package/dist/src/utils/url-matcher.js

@@ -52,6 +52,11 @@ export function generalizeUrl(url) {
 export function matchesUrl(pattern, path) {
     if (pattern === '*')
         return true;
+    if (!pattern.includes('?')) {
+        const queryIndex = path.indexOf('?');
+        if (queryIndex >= 0)
+            path = path.slice(0, queryIndex);
+    }
     const norm = (s) => s?.replace(/\/+$/, '').toLowerCase();
     if (norm(pattern) === norm(path))
         return true;
@@ -89,7 +94,7 @@ export function extractStatePath(url) {
         return url;
     try {
         const urlObj = new URL(url);
-        return urlObj.pathname + urlObj.hash;
+        return `${urlObj.pathname}${urlObj.search}${urlObj.hash}`;
     }
     catch {
         return url;

package/dist/src/utils/web-element.js

@@ -1,4 +1,6 @@
+import { ELEMENT_EXTRACTION_CONFIG, EXPLORBOT_ATTRS, extractElementData, getElementDataExtractorSource } from "./html.js";
 import { buildClickableXPath, evaluateXPath, isDynamicId, isGenericClass } from "./xpath.js";
+export { extractElementData } from "./html.js";
 const KEY_DISPLAY_ATTRS = ['role', 'id', 'class', 'aria-label'];
 const KEY_ATTRS = ['role', 'aria-label', 'id', 'name', 'type', 'href'];
 export class WebElement {
@@ -35,7 +37,7 @@ export class WebElement {
         return `(${this.x}, ${this.y})`;
     }
     get eidx() {
-        return this.attrs['data-explorbot-eidx'] || this.attrs.eidx || null;
+        return this.attrs[EXPLORBOT_ATTRS.eidx] || this.attrs.eidx || null;
     }
     get isNavigationLink() {
         if (this.tag !== 'a')
@@ -47,6 +49,23 @@ export class WebElement {
         const cls = this.attrs.class || '';
         return cls.split(/\s+/).filter((c) => c.length > 2 && !isDynamicId(c) && !isGenericClass(c));
     }
+    get areaHints() {
+        const raw = this.attrs[EXPLORBOT_ATTRS.area] || '';
+        return raw
+            .split('|')
+            .map((entry) => entry.trim().toLowerCase())
+            .filter(Boolean);
+    }
+    get contextLabel() {
+        return (this.attrs[EXPLORBOT_ATTRS.context] || '').trim();
+    }
+    get variantHints() {
+        const raw = this.attrs[EXPLORBOT_ATTRS.variant] || '';
+        return raw
+            .split('|')
+            .map((entry) => entry.trim().toLowerCase())
+            .filter(Boolean);
+    }
     static fromRawData(d, role) {
         return new WebElement({
             tag: d.tag,
@@ -55,6 +74,7 @@ export class WebElement {
             clickXPath: buildClickableXPath({ tag: d.tag, allAttrs: d.allAttrs, text: d.text }),
             attrs: d.allAttrs,
             text: d.text,
+            outerHTML: d.outerHTML,
             x: d.x,
             y: d.y,
         });
@@ -76,7 +96,7 @@ export class WebElement {
             const count = await locator.count();
             if (count === 0)
                 return null;
-            const data = await locator.first().evaluate(extractElementData);
+            const data = await locator.first().evaluate(extractElementData, ELEMENT_EXTRACTION_CONFIG);
             if (!data)
                 return null;
             return WebElement.fromRawData(data);
@@ -86,24 +106,24 @@ export class WebElement {
         }
     }
     static async fromEidx(page, eidx) {
-        return WebElement.fromPlaywrightLocator(page.locator(`[data-explorbot-eidx="${eidx}"]`));
+        return WebElement.fromPlaywrightLocator(page.locator(`[${EXPLORBOT_ATTRS.eidx}="${eidx}"]`));
     }
     static async fromEidxList(page, eidxList) {
         if (eidxList.length === 0)
             return [];
-        const rawList = await page.evaluate(([list, extractFnStr]) => {
+        const rawList = await page.evaluate(([list, extractFnStr, config]) => {
             const extract = new Function(`return ${extractFnStr}`)();
             const results = [];
             for (const eidx of list) {
-                const el = document.querySelector(`[data-explorbot-eidx="${eidx}"]`);
+                const el = document.querySelector(`[${config.attrs.eidx}="${eidx}"]`);
                 if (!el)
                     continue;
-                const data = extract(el);
+                const data = extract(el, config);
                 if (data)
                     results.push(data);
             }
             return results;
-        }, [eidxList, extractElementData.toString()]);
+        }, [eidxList, getElementDataExtractorSource(), ELEMENT_EXTRACTION_CONFIG]);
         return rawList.map((d) => WebElement.fromRawData(d));
     }
     static async findByXPath(html, xpath) {
@@ -113,20 +133,3 @@ export class WebElement {
         return { totalFound: result.totalFound, elements: result.matches.map((m) => WebElement.fromXPathMatch(m)) };
     }
 }
-export function extractElementData(el) {
-    const rect = el.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0)
-        return null;
-    const allAttrs = {};
-    for (let i = 0; i < el.attributes.length; i++) {
-        const attr = el.attributes[i];
-        allAttrs[attr.name] = attr.value;
-    }
-    return {
-        tag: el.tagName.toLowerCase(),
-        text: (el.textContent || '').trim().slice(0, 80),
-        allAttrs,
-        x: Math.round(rect.x + rect.width / 2),
-        y: Math.round(rect.y + rect.height / 2),
-    };
-}

package/dist/src/utils/xpath.js

@@ -33,7 +33,7 @@ function getAbsoluteXPath(el) {
     return `//${parts.join('/')}`;
 }
 export const isDynamicId = (id) => /^(ember|react|__next)\d|^\d+$/.test(id);
-export const isGenericClass = (cls) => /^ember-view$|^ember\d|^react-|^__next/.test(cls);
+export const isGenericClass = (cls) => /^ember-view$|^ember\d|^ember-|^react-|^__next/.test(cls);
 export function buildClickableXPath(el) {
     const a = el.allAttrs;
     if (a.id && !isDynamicId(a.id))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "explorbot",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "CLI app built with React Ink, CodeceptJS, and Playwright",
   "license": "Elastic-2.0",
   "type": "module",
@@ -78,7 +78,7 @@
     "@opentelemetry/sdk-trace-base": "^2.2.0",
     "@opentelemetry/semantic-conventions": "^1.38.0",
     "@scalar/openapi-parser": "^0.25.6",
-    "@testomatio/reporter": "^2.7.6",
+    "@testomatio/reporter": "^2.7.9-beta.2-markdown",
     "ai": "^6.0.6",
     "axe-core": "^4.11.1",
     "bash-tool": "^1.3.15",
@@ -104,11 +104,12 @@
     "micromatch": "^4.0.8",
     "ora-classic": "^5.4.2",
     "parse5": "^8.0.0",
-    "playwright": "^1.40.0",
+    "playwright": "^1.59.0",
     "react": "^19.1.1",
     "strip-ansi": "^7.1.2",
     "turndown": "^7.2.1",
     "unique-names-generator": "^4.7.1",
+    "yaml": "^2.8.3",
     "yargs": "^17.7.2",
     "zod": "^4.1.8"
   },

package/rules/researcher/container-rules.md

@@ -5,6 +5,8 @@ Container CSS must be a SINGLE semantic selector — one class, one id, or one a
 - VALID: semantic class names that describe what the section IS (`.product-list`, `.sidebar-menu`, `.user-profile`, `.search-results`), semantic roles (`[role="dialog"]`), semantic ids (`#main-content`)
 
 The container must uniquely identify a semantic wrapper, not a path through the DOM.
+
+Iframes are not sections — list each iframe as a single row of type `iframe` inside the section that contains it. Never use an iframe selector as a section's `> Container:`.
 </container_rules>
 
 <css_selector_rules>

package/src/action-result.ts

@@ -457,8 +457,9 @@ export class ActionResult implements ActionResultData {
     try {
       const urlObj = new URL(this.url);
       const path = urlObj.pathname.replace(/\/$/, '') || '/';
+      const search = urlObj.search || '';
       const hash = urlObj.hash || '';
-      return path + hash;
+      return path + search + hash;
     } catch {
       // If URL parsing fails, assume it's already a relative URL
       return this.url;