lobster-cli 0.1.0

package/dist/browser/dom/index.js

@@ -0,0 +1,1096 @@
+// src/browser/dom/flat-tree.ts
+var FLAT_TREE_SCRIPT = `
+(() => {
+  const INTERACTIVE_TAGS = new Set([
+    'a', 'button', 'input', 'select', 'textarea', 'details', 'summary',
+    'label', 'option', 'fieldset', 'legend',
+  ]);
+
+  const INTERACTIVE_ROLES = new Set([
+    'button', 'link', 'textbox', 'checkbox', 'radio', 'combobox',
+    'listbox', 'menu', 'menuitem', 'tab', 'switch', 'slider',
+    'searchbox', 'spinbutton', 'option', 'menuitemcheckbox', 'menuitemradio',
+  ]);
+
+  const ATTR_WHITELIST = [
+    'type', 'role', 'aria-label', 'aria-expanded', 'aria-selected',
+    'aria-checked', 'aria-disabled', 'placeholder', 'title', 'href',
+    'value', 'name', 'alt', 'src',
+  ];
+
+  let highlightIndex = 0;
+  const nodes = {};
+  const selectorMap = {};
+
+  function isVisible(el) {
+    if (el.offsetWidth === 0 && el.offsetHeight === 0) return false;
+    const style = getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
+    return true;
+  }
+
+  function isInteractive(el) {
+    const tag = el.tagName.toLowerCase();
+    if (INTERACTIVE_TAGS.has(tag)) return true;
+    const role = el.getAttribute('role');
+    if (role && INTERACTIVE_ROLES.has(role)) return true;
+    if (el.getAttribute('contenteditable') === 'true') return true;
+    if (el.getAttribute('tabindex') !== null && parseInt(el.getAttribute('tabindex')) >= 0) return true;
+    if (el.onclick || el.getAttribute('onclick')) return true;
+    return false;
+  }
+
+  function getAttributes(el) {
+    const attrs = {};
+    for (const attr of ATTR_WHITELIST) {
+      const val = el.getAttribute(attr);
+      if (val !== null && val !== '') attrs[attr] = val;
+    }
+    return attrs;
+  }
+
+  function getScrollable(el) {
+    const style = getComputedStyle(el);
+    const overflowY = style.overflowY;
+    const overflowX = style.overflowX;
+    const isScrollableY = (overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
+    const isScrollableX = (overflowX === 'auto' || overflowX === 'scroll') && el.scrollWidth > el.clientWidth;
+    if (!isScrollableY && !isScrollableX) return null;
+    return {
+      left: el.scrollLeft,
+      top: el.scrollTop,
+      right: el.scrollWidth - el.clientWidth - el.scrollLeft,
+      bottom: el.scrollHeight - el.clientHeight - el.scrollTop,
+    };
+  }
+
+  function walk(el, parentId) {
+    if (!el || el.nodeType === 8) return; // skip comments
+
+    if (el.nodeType === 3) { // text node
+      const text = el.textContent.trim();
+      if (!text) return;
+      const id = 'text_' + Math.random().toString(36).slice(2, 8);
+      nodes[id] = { id, tagName: '#text', text, parentId };
+      if (parentId && nodes[parentId]) {
+        nodes[parentId].children = nodes[parentId].children || [];
+        nodes[parentId].children.push(id);
+      }
+      return;
+    }
+
+    if (el.nodeType !== 1) return; // only elements
+
+    const tag = el.tagName.toLowerCase();
+    if (['script', 'style', 'noscript', 'svg', 'path'].includes(tag)) return;
+    if (!isVisible(el)) return;
+
+    const id = tag + '_' + Math.random().toString(36).slice(2, 8);
+    const interactive = isInteractive(el);
+    const node = {
+      id,
+      tagName: tag,
+      attributes: getAttributes(el),
+      parentId,
+      children: [],
+      isInteractive: interactive,
+    };
+
+    if (interactive) {
+      node.highlightIndex = highlightIndex;
+      selectorMap[highlightIndex] = id;
+      highlightIndex++;
+    }
+
+    const scrollable = getScrollable(el);
+    if (scrollable) node.scrollable = scrollable;
+
+    const text = [];
+    for (const child of el.childNodes) {
+      if (child.nodeType === 3 && child.textContent.trim()) {
+        text.push(child.textContent.trim());
+      }
+    }
+    if (text.length > 0) node.text = text.join(' ').slice(0, 200);
+
+    nodes[id] = node;
+
+    if (parentId && nodes[parentId]) {
+      nodes[parentId].children.push(id);
+    }
+
+    for (const child of el.children) {
+      walk(child, id);
+    }
+  }
+
+  const rootId = 'root';
+  nodes[rootId] = { id: rootId, tagName: 'body', children: [], attributes: {} };
+  for (const child of document.body.children) {
+    walk(child, rootId);
+  }
+
+  return { rootId, map: nodes, selectorMap };
+})()
+`;
+function flatTreeToString(tree) {
+  const lines = [];
+  function walk(nodeId, depth) {
+    const node = tree.map[nodeId];
+    if (!node) return;
+    const indent = "	".repeat(depth);
+    if (node.tagName === "#text") {
+      if (node.text) lines.push(`${indent}${node.text}`);
+      return;
+    }
+    const attrs = node.attributes || {};
+    const attrStr = Object.entries(attrs).map(([k, v]) => v === "" ? k : `${k}="${v}"`).join(" ");
+    const prefix = node.highlightIndex !== void 0 ? `[${node.highlightIndex}]` : "";
+    const scrollInfo = node.scrollable ? ` |scroll: ${Math.round(node.scrollable.top)}px up, ${Math.round(node.scrollable.bottom)}px down|` : "";
+    const text = node.text || "";
+    const tag = node.tagName;
+    if (prefix || text || node.children?.length > 0) {
+      const opening = `${indent}${prefix}<${tag}${attrStr ? " " + attrStr : ""}${scrollInfo}>`;
+      if (!node.children?.length || node.children.length === 0 && text) {
+        lines.push(`${opening}${text}</>`);
+      } else {
+        lines.push(`${opening}${text}`);
+        for (const childId of node.children || []) {
+          walk(childId, depth + 1);
+        }
+      }
+    } else {
+      for (const childId of node.children || []) {
+        walk(childId, depth);
+      }
+    }
+  }
+  walk(tree.rootId, 0);
+  return lines.join("\n");
+}
+
+// src/browser/dom/snapshot.ts
+function buildSnapshotScript(previousHashes) {
+  return SNAPSHOT_SCRIPT_FN(previousHashes || []);
+}
+function SNAPSHOT_SCRIPT_FN(prevHashes) {
+  return `
+(() => {
+  let idx = 0;
+  const __prevHashes = new Set(${JSON.stringify(prevHashes)});
+  const __currentHashes = [];
+`;
+}
+var SNAPSHOT_SCRIPT = `
+(() => {
+  let idx = 0;
+  const __prevHashes = (window.__lobster_prev_hashes) ? new Set(window.__lobster_prev_hashes) : null;
+  const __currentHashes = [];
+
+  const SKIP_TAGS = new Set([
+    'script','style','noscript','svg','path','meta','link','head',
+    'template','slot','colgroup','col',
+  ]);
+
+  const INTERACTIVE_TAGS = new Set([
+    'a','button','input','select','textarea','details','summary','label',
+  ]);
+
+  const INTERACTIVE_ROLES = new Set([
+    'button','link','textbox','checkbox','radio','combobox','listbox',
+    'menu','menuitem','tab','switch','slider','searchbox','spinbutton',
+    'option','menuitemcheckbox','menuitemradio','treeitem',
+  ]);
+
+  const ATTR_WHITELIST = [
+    'type','role','aria-label','aria-expanded','aria-selected','aria-checked',
+    'aria-disabled','aria-haspopup','aria-pressed','placeholder','title',
+    'href','value','name','alt','src','action','method','for',
+    'data-testid','data-id','contenteditable','tabindex',
+  ];
+
+  const AD_PATTERNS = /ad[-_]?banner|ad[-_]?container|google[-_]?ad|doubleclick|adsbygoogle|sponsored|^ad$/i;
+
+  // \u2500\u2500 Stage 1: Visibility check \u2500\u2500
+  function isVisible(el) {
+    if (el.offsetWidth === 0 && el.offsetHeight === 0 && el.tagName !== 'INPUT') return false;
+    const s = getComputedStyle(el);
+    if (s.display === 'none') return false;
+    if (s.visibility === 'hidden' || s.visibility === 'collapse') return false;
+    if (s.opacity === '0') return false;
+    if (s.clipPath === 'inset(100%)') return false;
+    // Check for offscreen positioning
+    const rect = el.getBoundingClientRect();
+    if (rect.right < 0 || rect.bottom < 0) return false;
+    return true;
+  }
+
+  // \u2500\u2500 Stage 2: Interactive detection \u2500\u2500
+  function isInteractive(el) {
+    const tag = el.tagName.toLowerCase();
+    if (INTERACTIVE_TAGS.has(tag)) {
+      // Skip disabled elements
+      if (el.disabled) return false;
+      // Skip hidden inputs
+      if (tag === 'input' && el.type === 'hidden') return false;
+      return true;
+    }
+    const role = el.getAttribute('role');
+    if (role && INTERACTIVE_ROLES.has(role)) return true;
+    if (el.contentEditable === 'true') return true;
+    if (el.tabIndex >= 0 && el.getAttribute('tabindex') !== null) return true;
+    if (el.onclick) return true;
+    return false;
+  }
+
+  // \u2500\u2500 Stage 8: Attribute filtering \u2500\u2500
+  function getAttrs(el) {
+    const parts = [];
+    for (const name of ATTR_WHITELIST) {
+      let v = el.getAttribute(name);
+      if (v === null || v === '') continue;
+      // Truncate long values
+      if (v.length > 80) v = v.slice(0, 77) + '...';
+      // Skip href="javascript:..."
+      if (name === 'href' && v.startsWith('javascript:')) continue;
+      parts.push(name + '=' + v);
+    }
+    return parts.length ? ' ' + parts.join(' ') : '';
+  }
+
+  // \u2500\u2500 Stage 9: Ad filtering \u2500\u2500
+  function isAd(el) {
+    const id = el.id || '';
+    const cls = el.className || '';
+    if (typeof cls === 'string' && AD_PATTERNS.test(cls)) return true;
+    if (AD_PATTERNS.test(id)) return true;
+    if (el.tagName === 'IFRAME' && AD_PATTERNS.test(el.src || '')) return true;
+    return false;
+  }
+
+  // \u2500\u2500 Stage 10: Scroll info \u2500\u2500
+  function getScrollInfo(el) {
+    const s = getComputedStyle(el);
+    const overflowY = s.overflowY;
+    const overflowX = s.overflowX;
+    const scrollableY = (overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
+    const scrollableX = (overflowX === 'auto' || overflowX === 'scroll') && el.scrollWidth > el.clientWidth;
+    if (!scrollableY && !scrollableX) return '';
+
+    const parts = [];
+    if (scrollableY) {
+      const up = Math.round(el.scrollTop);
+      const down = Math.round(el.scrollHeight - el.clientHeight - el.scrollTop);
+      if (up > 0) parts.push(up + 'px up');
+      if (down > 0) parts.push(down + 'px down');
+    }
+    if (scrollableX) {
+      const left = Math.round(el.scrollLeft);
+      const right = Math.round(el.scrollWidth - el.clientWidth - el.scrollLeft);
+      if (left > 0) parts.push(left + 'px left');
+      if (right > 0) parts.push(right + 'px right');
+    }
+    return parts.length ? ' |scroll: ' + parts.join(', ') + '|' : '';
+  }
+
+  // \u2500\u2500 Stage 6: Bounding-box dedup \u2500\u2500
+  // If a parent and child are both interactive and have ~same bounding box,
+  // skip the parent (e.g., <a><button>Click</button></a>)
+  function isWrappingInteractive(el) {
+    if (!isInteractive(el)) return false;
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    for (const child of el.children) {
+      if (!isInteractive(child)) continue;
+      const cr = child.getBoundingClientRect();
+      const overlapX = Math.min(rect.right, cr.right) - Math.max(rect.left, cr.left);
+      const overlapY = Math.min(rect.bottom, cr.bottom) - Math.max(rect.top, cr.top);
+      const overlapArea = Math.max(0, overlapX) * Math.max(0, overlapY);
+      const parentArea = rect.width * rect.height;
+      if (parentArea > 0 && overlapArea / parentArea > 0.85) return true;
+    }
+    return false;
+  }
+
+  // \u2500\u2500 Stage 7: Occlusion detection \u2500\u2500
+  function isOccluded(el) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const topEl = document.elementFromPoint(cx, cy);
+    if (!topEl) return false;
+    if (topEl === el || el.contains(topEl) || topEl.contains(el)) return false;
+    // Check z-index \u2014 if top element is a modal/overlay, mark as occluded
+    const topZ = parseInt(getComputedStyle(topEl).zIndex) || 0;
+    const elZ = parseInt(getComputedStyle(el).zIndex) || 0;
+    return topZ > elZ + 10;
+  }
+
+  // \u2500\u2500 Stage 5: Iframe content extraction \u2500\u2500
+  function getIframeContent(iframe, depth, maxDepth) {
+    try {
+      const doc = iframe.contentDocument;
+      if (!doc || !doc.body) return '';
+      return '\\n' + walkNode(doc.body, depth, maxDepth);
+    } catch { return ''; }
+  }
+
+  // \u2500\u2500 Stage 4: Shadow DOM traversal \u2500\u2500
+  function getShadowContent(el, depth, maxDepth) {
+    if (!el.shadowRoot) return '';
+    let out = '';
+    for (const child of el.shadowRoot.childNodes) {
+      out += walkNode(child, depth, maxDepth);
+    }
+    return out;
+  }
+
+  // \u2500\u2500 Input value hint \u2500\u2500
+  function getInputHint(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'input') {
+      const type = el.type || 'text';
+      const val = el.value || '';
+      const checked = el.checked;
+      if (type === 'checkbox' || type === 'radio') {
+        return checked ? ' [checked]' : ' [unchecked]';
+      }
+      if (val) return ' value="' + val.slice(0, 50) + '"';
+    }
+    if (tag === 'textarea' && el.value) {
+      return ' value="' + el.value.slice(0, 50) + '"';
+    }
+    if (tag === 'select' && el.selectedOptions?.length) {
+      return ' selected="' + el.selectedOptions[0].text.slice(0, 40) + '"';
+    }
+    return '';
+  }
+
+  const MAX_DEPTH = 25;
+  const MAX_TEXT = 150;
+
+  function walkNode(node, depth, maxDepth) {
+    if (depth > maxDepth) return '';
+    if (!node) return '';
+
+    // Text node
+    if (node.nodeType === 3) {
+      const t = node.textContent.trim();
+      if (!t) return '';
+      const text = t.length > MAX_TEXT ? t.slice(0, MAX_TEXT) + '...' : t;
+      return '  '.repeat(depth) + text + '\\n';
+    }
+
+    // Comment node \u2014 skip
+    if (node.nodeType === 8) return '';
+
+    // Only element nodes from here
+    if (node.nodeType !== 1) return '';
+
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+
+    // \u2500\u2500 Stage 3: Skip tags \u2500\u2500
+    if (SKIP_TAGS.has(tag)) return '';
+
+    // \u2500\u2500 Stage 2: Visibility \u2500\u2500
+    if (!isVisible(el)) return '';
+
+    // \u2500\u2500 Stage 9: Ad filtering \u2500\u2500
+    if (isAd(el)) return '';
+
+    // \u2500\u2500 Stage 6: Bbox dedup \u2014 skip wrapping interactive parent \u2500\u2500
+    const skipSelf = isWrappingInteractive(el);
+
+    const indent = '  '.repeat(depth);
+    const inter = !skipSelf && isInteractive(el);
+    let prefix = '';
+    if (inter) {
+      const thisIdx = idx++;
+      // Hash: tag + text + key attributes for diff tracking
+      const hashText = tag + ':' + (el.textContent || '').trim().slice(0, 40) + ':' + (el.getAttribute('href') || '') + ':' + (el.getAttribute('aria-label') || '');
+      __currentHashes.push(hashText);
+      const isNew = __prevHashes && __prevHashes.size > 0 && !__prevHashes.has(hashText);
+      prefix = isNew ? '*[' + thisIdx + ']' : '[' + thisIdx + ']';
+    }
+
+    // \u2500\u2500 Stage 11: Annotate with data-ref \u2500\u2500
+    if (inter) {
+      try { el.dataset.ref = String(idx - 1); } catch {}
+    }
+
+    // \u2500\u2500 Stage 7: Occlusion check for interactive elements \u2500\u2500
+    if (inter && isOccluded(el)) {
+      // Still include but mark as occluded
+      // (agent needs to know element exists but may need to scroll/close modal)
+    }
+
+    const a = getAttrs(el);
+    const scrollInfo = getScrollInfo(el);
+    const inputHint = inter ? getInputHint(el) : '';
+
+    // Leaf text extraction
+    let leafText = '';
+    if (el.childNodes.length === 1 && el.childNodes[0].nodeType === 3) {
+      const t = el.childNodes[0].textContent.trim();
+      if (t) leafText = t.length > MAX_TEXT ? t.slice(0, MAX_TEXT) + '...' : t;
+    }
+
+    // \u2500\u2500 Stage 5: Iframe \u2500\u2500
+    if (tag === 'iframe') {
+      const iframeContent = getIframeContent(el, depth + 1, maxDepth);
+      if (iframeContent) {
+        return indent + prefix + '<iframe' + a + '>\\n' + iframeContent;
+      }
+      return '';
+    }
+
+    // Build output
+    let out = '';
+
+    if (skipSelf) {
+      // Skip self but render children
+      for (const c of el.childNodes) out += walkNode(c, depth, maxDepth);
+      out += getShadowContent(el, depth, maxDepth);
+      return out;
+    }
+
+    if (inter || leafText || el.children.length === 0) {
+      if (leafText) {
+        out = indent + prefix + '<' + tag + a + scrollInfo + inputHint + '>' + leafText + '</' + tag + '>\\n';
+      } else {
+        out = indent + prefix + '<' + tag + a + scrollInfo + inputHint + '>\\n';
+        for (const c of el.childNodes) out += walkNode(c, depth + 1, maxDepth);
+        out += getShadowContent(el, depth + 1, maxDepth);
+      }
+    } else {
+      // Non-interactive container \u2014 flatten depth if no useful info
+      if (scrollInfo) {
+        out = indent + '<' + tag + scrollInfo + '>\\n';
+        for (const c of el.childNodes) out += walkNode(c, depth + 1, maxDepth);
+        out += getShadowContent(el, depth + 1, maxDepth);
+      } else {
+        for (const c of el.childNodes) out += walkNode(c, depth, maxDepth);
+        out += getShadowContent(el, depth, maxDepth);
+      }
+    }
+
+    return out;
+  }
+
+  // \u2500\u2500 Page-level scroll info header \u2500\u2500
+  const scrollY = window.scrollY;
+  const scrollMax = document.documentElement.scrollHeight - window.innerHeight;
+  const scrollPct = scrollMax > 0 ? Math.round((scrollY / scrollMax) * 100) : 0;
+  const vpW = window.innerWidth;
+  const vpH = window.innerHeight;
+  const pageH = document.documentElement.scrollHeight;
+
+  let header = '';
+  header += 'viewport: ' + vpW + 'x' + vpH + ' | page_height: ' + pageH + 'px';
+  header += ' | scroll: ' + scrollPct + '%';
+  if (scrollY > 50) header += ' (' + Math.round(scrollY) + 'px from top)';
+  if (scrollMax - scrollY > 50) header += ' (' + Math.round(scrollMax - scrollY) + 'px more below)';
+  header += '\\n---\\n';
+
+  // Store current hashes for next diff comparison
+  window.__lobster_prev_hashes = __currentHashes;
+
+  return header + walkNode(document.body, 0, MAX_DEPTH);
+})()
+`;
+
+// src/browser/dom/semantic-tree.ts
+var SEMANTIC_TREE_SCRIPT = `
+(() => {
+  const SKIP = new Set(['script','style','noscript','svg','head','meta','link','template']);
+
+  const ROLE_MAP = {
+    a: 'link', button: 'button', input: 'textbox', select: 'combobox',
+    textarea: 'textbox', h1: 'heading', h2: 'heading', h3: 'heading',
+    h4: 'heading', h5: 'heading', h6: 'heading', nav: 'navigation',
+    main: 'main', header: 'banner', footer: 'contentinfo', aside: 'complementary',
+    form: 'form', table: 'table', img: 'img', ul: 'list', ol: 'list', li: 'listitem',
+    section: 'region', article: 'article', dialog: 'dialog', details: 'group',
+    summary: 'button', progress: 'progressbar', meter: 'meter', output: 'status',
+    label: 'label', legend: 'legend', fieldset: 'group', option: 'option',
+    tr: 'row', td: 'cell', th: 'columnheader', caption: 'caption',
+  };
+
+  const INTERACTIVE_ROLES = new Set([
+    'button','link','textbox','checkbox','radio','combobox','listbox',
+    'menu','menuitem','tab','switch','slider','searchbox','spinbutton',
+    'option','menuitemcheckbox','menuitemradio','treeitem',
+  ]);
+
+  // \u2500\u2500 W3C Accessible Name Algorithm (simplified) \u2500\u2500
+  function getAccessibleName(el) {
+    // 1. aria-labelledby (highest priority)
+    const labelledBy = el.getAttribute('aria-labelledby');
+    if (labelledBy) {
+      const ids = labelledBy.split(/\\s+/);
+      const parts = ids.map(id => {
+        const ref = document.getElementById(id);
+        return ref ? ref.textContent.trim() : '';
+      }).filter(Boolean);
+      if (parts.length > 0) return parts.join(' ').slice(0, 120);
+    }
+
+    // 2. aria-label
+    const ariaLabel = el.getAttribute('aria-label');
+    if (ariaLabel) return ariaLabel.slice(0, 120);
+
+    // 3. alt (for images)
+    const alt = el.getAttribute('alt');
+    if (alt) return alt.slice(0, 120);
+
+    // 4. title
+    const title = el.getAttribute('title');
+    if (title) return title.slice(0, 120);
+
+    // 5. placeholder (for inputs)
+    const placeholder = el.getAttribute('placeholder');
+    if (placeholder) return placeholder.slice(0, 120);
+
+    // 6. value (for buttons)
+    if (el.tagName === 'INPUT' && (el.type === 'submit' || el.type === 'button')) {
+      const val = el.getAttribute('value');
+      if (val) return val.slice(0, 120);
+    }
+
+    // 7. Associated label
+    if (el.id) {
+      const label = document.querySelector('label[for="' + el.id + '"]');
+      if (label) return label.textContent.trim().slice(0, 120);
+    }
+
+    // 8. Direct text content (only for leaf-ish elements)
+    if (el.children.length <= 2) {
+      const text = el.textContent.trim();
+      if (text && text.length < 120) return text;
+    }
+
+    return '';
+  }
+
+  // \u2500\u2500 XPath generation \u2500\u2500
+  function getXPath(el) {
+    const parts = [];
+    let current = el;
+    while (current && current.nodeType === 1) {
+      let index = 1;
+      let sibling = current.previousElementSibling;
+      while (sibling) {
+        if (sibling.tagName === current.tagName) index++;
+        sibling = sibling.previousElementSibling;
+      }
+      const tag = current.tagName.toLowerCase();
+      parts.unshift(tag + '[' + index + ']');
+      current = current.parentElement;
+    }
+    return '/' + parts.join('/');
+  }
+
+  // \u2500\u2500 Interactivity classification \u2500\u2500
+  function classifyInteractivity(el) {
+    const types = [];
+    const tag = el.tagName.toLowerCase();
+
+    // Native
+    if (['a','button','input','select','textarea','details','summary'].includes(tag)) {
+      if (tag === 'a' && !el.href) {} // anchor without href is not interactive
+      else if (tag === 'input' && el.type === 'hidden') {} // hidden inputs
+      else types.push('native');
+    }
+
+    // ARIA role
+    const role = el.getAttribute('role');
+    if (role && INTERACTIVE_ROLES.has(role)) types.push('aria');
+
+    // Contenteditable
+    if (el.contentEditable === 'true') types.push('contenteditable');
+
+    // Focusable
+    if (el.tabIndex >= 0 && el.getAttribute('tabindex') !== null) types.push('focusable');
+
+    // Event listeners (check onclick and common inline handlers)
+    if (el.onclick || el.onmousedown || el.onkeydown || el.onkeypress ||
+        el.getAttribute('onclick') || el.getAttribute('onmousedown')) {
+      types.push('listener');
+    }
+
+    return types;
+  }
+
+  // \u2500\u2500 Disabled state with fieldset inheritance \u2500\u2500
+  function isDisabled(el) {
+    if (el.disabled) return true;
+    // Check fieldset disabled inheritance
+    let parent = el.parentElement;
+    while (parent) {
+      if (parent.tagName === 'FIELDSET' && parent.disabled) {
+        // Exception: elements inside the first legend child are NOT disabled
+        const firstLegend = parent.querySelector(':scope > legend');
+        if (firstLegend && firstLegend.contains(el)) return false;
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+    return false;
+  }
+
+  // \u2500\u2500 Walk the DOM \u2500\u2500
+  function walk(el, depth, maxDepth) {
+    if (!el || depth > maxDepth) return '';
+
+    if (el.nodeType === 3) {
+      const t = el.textContent.trim();
+      return t ? '  '.repeat(depth) + 'text "' + t.slice(0, 100) + '"\\n' : '';
+    }
+
+    if (el.nodeType !== 1) return '';
+    const tag = el.tagName.toLowerCase();
+    if (SKIP.has(tag)) return '';
+
+    const style = getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden') return '';
+
+    const indent = '  '.repeat(depth);
+    const role = el.getAttribute('role') || ROLE_MAP[tag] || '';
+    const name = getAccessibleName(el);
+    const interTypes = classifyInteractivity(el);
+    const interactive = interTypes.length > 0;
+    const disabled = interactive && isDisabled(el);
+
+    let line = indent;
+    line += role || tag;
+
+    if (name) line += ' "' + name.slice(0, 80) + '"';
+
+    if (interactive) {
+      line += ' [' + interTypes.join(',') + ']';
+      if (disabled) line += ' {disabled}';
+      line += ' xpath=' + getXPath(el);
+    }
+
+    // Input state
+    if (tag === 'input') {
+      const type = el.type || 'text';
+      line += ' type=' + type;
+      if (type === 'checkbox' || type === 'radio') {
+        line += el.checked ? ' [checked]' : ' [unchecked]';
+      } else if (el.value) {
+        line += ' value="' + el.value.slice(0, 50) + '"';
+      }
+    }
+    if (tag === 'textarea' && el.value) {
+      line += ' value="' + el.value.slice(0, 50) + '"';
+    }
+    if (tag === 'select') {
+      const opts = Array.from(el.options || []).map(o => ({
+        text: o.text.slice(0, 30),
+        value: o.value,
+        selected: o.selected,
+      }));
+      const selected = opts.find(o => o.selected);
+      if (selected) line += ' selected="' + selected.text + '"';
+      if (opts.length <= 10) {
+        line += ' options=[' + opts.map(o => o.text).join('|') + ']';
+      }
+    }
+
+    line += '\\n';
+
+    let out = line;
+    for (const c of el.childNodes) {
+      out += walk(c, depth + 1, maxDepth);
+    }
+
+    // Shadow DOM
+    if (el.shadowRoot) {
+      for (const c of el.shadowRoot.childNodes) {
+        out += walk(c, depth + 1, maxDepth);
+      }
+    }
+
+    return out;
+  }
+
+  return walk(document.body, 0, 20);
+})()
+`;
+
+// src/browser/dom/markdown.ts
+var MARKDOWN_SCRIPT = `
+(() => {
+  const SKIP = new Set(['script','style','noscript','svg','head','template']);
+  const baseUrl = location.href;
+
+  // Resolve relative URLs to absolute
+  function resolveUrl(href) {
+    if (!href || href.startsWith('javascript:') || href.startsWith('#')) return href;
+    try { return new URL(href, baseUrl).href; } catch { return href; }
+  }
+
+  // Escape Markdown special chars in text
+  function escapeText(text) {
+    return text
+      .replace(/\\\\/g, '\\\\\\\\')
+      .replace(/([*_~\`\\[\\]|])/g, '\\\\$1');
+  }
+
+  // State tracking
+  let listDepth = 0;
+  let orderedCounters = [];
+  let inPre = false;
+  let inTable = false;
+
+  function listIndent() { return '  '.repeat(listDepth); }
+
+  function walk(el) {
+    if (!el) return '';
+
+    // Text node
+    if (el.nodeType === 3) {
+      const text = el.textContent || '';
+      if (inPre) return text;
+      // Collapse whitespace
+      const collapsed = text.replace(/\\s+/g, ' ');
+      return collapsed === ' ' && !el.previousSibling && !el.nextSibling ? '' : collapsed;
+    }
+
+    if (el.nodeType !== 1) return '';
+    const tag = el.tagName.toLowerCase();
+    if (SKIP.has(tag)) return '';
+
+    // Visibility check
+    try {
+      const s = getComputedStyle(el);
+      if (s.display === 'none' || s.visibility === 'hidden') return '';
+    } catch {}
+
+    // Get children content
+    function childContent() {
+      let out = '';
+      for (const c of el.childNodes) out += walk(c);
+      return out;
+    }
+
+    switch (tag) {
+      // \u2500\u2500 Headings \u2500\u2500
+      case 'h1': return '\\n\\n# ' + childContent().trim() + '\\n\\n';
+      case 'h2': return '\\n\\n## ' + childContent().trim() + '\\n\\n';
+      case 'h3': return '\\n\\n### ' + childContent().trim() + '\\n\\n';
+      case 'h4': return '\\n\\n#### ' + childContent().trim() + '\\n\\n';
+      case 'h5': return '\\n\\n##### ' + childContent().trim() + '\\n\\n';
+      case 'h6': return '\\n\\n###### ' + childContent().trim() + '\\n\\n';
+
+      // \u2500\u2500 Block elements \u2500\u2500
+      case 'p': return '\\n\\n' + childContent().trim() + '\\n\\n';
+      case 'br': return '\\n';
+      case 'hr': return '\\n\\n---\\n\\n';
+
+      // \u2500\u2500 Inline formatting \u2500\u2500
+      case 'strong': case 'b': {
+        const inner = childContent().trim();
+        return inner ? '**' + inner + '**' : '';
+      }
+      case 'em': case 'i': {
+        const inner = childContent().trim();
+        return inner ? '*' + inner + '*' : '';
+      }
+      case 's': case 'del': case 'strike': {
+        const inner = childContent().trim();
+        return inner ? '~~' + inner + '~~' : '';
+      }
+      case 'code': {
+        if (inPre) return childContent();
+        const inner = childContent();
+        return inner ? '\\x60' + inner + '\\x60' : '';
+      }
+
+      // \u2500\u2500 Code blocks \u2500\u2500
+      case 'pre': {
+        inPre = true;
+        const inner = childContent();
+        inPre = false;
+        const lang = el.querySelector('code')?.className?.match(/language-(\\w+)/)?.[1] || '';
+        return '\\n\\n\\x60\\x60\\x60' + lang + '\\n' + inner.trim() + '\\n\\x60\\x60\\x60\\n\\n';
+      }
+
+      // \u2500\u2500 Links \u2500\u2500
+      case 'a': {
+        const href = resolveUrl(el.getAttribute('href') || '');
+        const inner = childContent().trim();
+        const name = inner || el.getAttribute('aria-label') || el.getAttribute('title') || '';
+        if (!name) return '';
+        if (!href || href === '#' || href.startsWith('javascript:')) return name;
+        return '[' + name + '](' + href + ')';
+      }
+
+      // \u2500\u2500 Images \u2500\u2500
+      case 'img': {
+        const alt = el.getAttribute('alt') || '';
+        const src = resolveUrl(el.getAttribute('src') || '');
+        return src ? '![' + alt + '](' + src + ')' : '';
+      }
+
+      // \u2500\u2500 Lists \u2500\u2500
+      case 'ul': {
+        listDepth++;
+        orderedCounters.push(0);
+        const inner = childContent();
+        listDepth--;
+        orderedCounters.pop();
+        return '\\n' + inner;
+      }
+      case 'ol': {
+        listDepth++;
+        orderedCounters.push(0);
+        const inner = childContent();
+        listDepth--;
+        orderedCounters.pop();
+        return '\\n' + inner;
+      }
+      case 'li': {
+        const parent = el.parentElement?.tagName?.toLowerCase();
+        const isOrdered = parent === 'ol';
+        const inner = childContent().trim();
+        if (!inner) return '';
+        if (isOrdered) {
+          const counter = orderedCounters.length > 0
+            ? ++orderedCounters[orderedCounters.length - 1] : 1;
+          return listIndent() + counter + '. ' + inner + '\\n';
+        }
+        return listIndent() + '- ' + inner + '\\n';
+      }
+
+      // \u2500\u2500 Blockquote \u2500\u2500
+      case 'blockquote': {
+        const inner = childContent().trim();
+        if (!inner) return '';
+        return '\\n\\n' + inner.split('\\n').map(line => '> ' + line).join('\\n') + '\\n\\n';
+      }
+
+      // \u2500\u2500 Tables \u2500\u2500
+      case 'table': {
+        inTable = true;
+        let out = '\\n\\n';
+        const rows = el.querySelectorAll('tr');
+        let headerDone = false;
+
+        for (let i = 0; i < rows.length; i++) {
+          const cells = rows[i].querySelectorAll('th, td');
+          const isHeader = rows[i].querySelector('th') !== null;
+          const cellTexts = [];
+          for (const cell of cells) {
+            let cellText = '';
+            for (const c of cell.childNodes) cellText += walk(c);
+            cellTexts.push(cellText.trim().replace(/\\|/g, '\\\\|').replace(/\\n/g, ' '));
+          }
+
+          out += '| ' + cellTexts.join(' | ') + ' |\\n';
+
+          if (isHeader && !headerDone) {
+            out += '| ' + cellTexts.map(() => '---').join(' | ') + ' |\\n';
+            headerDone = true;
+          }
+
+          // First data row without headers \u2014 synthesize separator
+          if (i === 0 && !isHeader && !headerDone) {
+            out += '| ' + cellTexts.map(() => '---').join(' | ') + ' |\\n';
+            headerDone = true;
+          }
+        }
+
+        inTable = false;
+        return out + '\\n';
+      }
+      case 'thead': case 'tbody': case 'tfoot':
+        return childContent();
+      case 'tr': case 'td': case 'th':
+        // Handled by table walker above; fallback for orphaned elements
+        return childContent();
+
+      // \u2500\u2500 Definition lists \u2500\u2500
+      case 'dl': return '\\n\\n' + childContent() + '\\n\\n';
+      case 'dt': return '\\n**' + childContent().trim() + '**\\n';
+      case 'dd': return ': ' + childContent().trim() + '\\n';
+
+      // \u2500\u2500 Figure \u2500\u2500
+      case 'figure': return '\\n\\n' + childContent().trim() + '\\n\\n';
+      case 'figcaption': return '\\n*' + childContent().trim() + '*\\n';
+
+      // \u2500\u2500 Details/Summary \u2500\u2500
+      case 'details': return '\\n\\n' + childContent() + '\\n\\n';
+      case 'summary': return '**' + childContent().trim() + '**\\n\\n';
+
+      // \u2500\u2500 Generic blocks \u2500\u2500
+      case 'div': case 'section': case 'article': case 'main': case 'aside':
+      case 'header': case 'footer': case 'nav':
+        return '\\n' + childContent() + '\\n';
+
+      case 'span': case 'small': case 'sub': case 'sup': case 'abbr':
+      case 'time': case 'mark': case 'cite': case 'q':
+        return childContent();
+
+      default:
+        return childContent();
+    }
+  }
+
+  const raw = walk(document.body);
+  // Clean up: collapse 3+ newlines to 2, trim
+  return raw.replace(/\\n{3,}/g, '\\n\\n').replace(/^\\n+|\\n+$/g, '').trim();
+})()
+`;
+
+// src/browser/dom/interactive.ts
+var INTERACTIVE_ELEMENTS_SCRIPT = `
+(() => {
+  const results = [];
+
+  function classify(el) {
+    const tag = el.tagName.toLowerCase();
+    const role = el.getAttribute('role');
+    const types = [];
+
+    // Native interactive
+    if (['a', 'button', 'input', 'select', 'textarea', 'details', 'summary'].includes(tag)) {
+      types.push('native');
+    }
+
+    // ARIA role interactive
+    if (role && ['button', 'link', 'textbox', 'checkbox', 'radio', 'combobox', 'tab', 'switch', 'menuitem', 'slider'].includes(role)) {
+      types.push('aria');
+    }
+
+    // Contenteditable
+    if (el.contentEditable === 'true') types.push('contenteditable');
+
+    // Focusable
+    if (el.tabIndex >= 0 && el.getAttribute('tabindex') !== null) types.push('focusable');
+
+    // Has click listener (approximate)
+    if (el.onclick) types.push('listener');
+
+    return types;
+  }
+
+  let idx = 0;
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+  let node;
+  while (node = walker.nextNode()) {
+    const types = classify(node);
+    if (types.length === 0) continue;
+
+    const style = getComputedStyle(node);
+    if (style.display === 'none' || style.visibility === 'hidden') continue;
+
+    const rect = node.getBoundingClientRect();
+    results.push({
+      index: idx++,
+      tag: node.tagName.toLowerCase(),
+      role: node.getAttribute('role') || '',
+      text: (node.textContent || '').trim().slice(0, 100),
+      types,
+      ariaLabel: node.getAttribute('aria-label') || '',
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    });
+  }
+
+  return results;
+})()
+`;
+
+// src/browser/dom/form-state.ts
+var FORM_STATE_SCRIPT = `
+(() => {
+  function extractField(el) {
+    const tag = el.tagName.toLowerCase();
+    const type = (el.getAttribute('type') || tag).toLowerCase();
+
+    // Skip non-user-facing inputs
+    if (['hidden', 'submit', 'button', 'reset', 'image'].includes(type)) return null;
+
+    const name = el.name || el.id || '';
+
+    // Find label via multiple strategies
+    const label =
+      el.getAttribute('aria-label') ||
+      (el.id ? document.querySelector('label[for="' + el.id + '"]')?.textContent?.trim() : null) ||
+      el.closest('label')?.textContent?.trim() ||
+      el.placeholder ||
+      '';
+
+    // Extract value based on type
+    let value;
+    if (tag === 'select') {
+      const selected = el.options[el.selectedIndex];
+      value = selected ? selected.textContent.trim() : '';
+    } else if (type === 'checkbox' || type === 'radio') {
+      value = el.checked;
+    } else if (type === 'password') {
+      value = el.value ? '\u2022\u2022\u2022\u2022' : '';
+    } else if (el.isContentEditable) {
+      value = el.textContent?.trim()?.slice(0, 200) || '';
+    } else {
+      value = el.value || '';
+    }
+
+    return {
+      tag,
+      type,
+      name,
+      label: label.slice(0, 80),
+      value: typeof value === 'string' ? value.slice(0, 200) : value,
+      required: !!el.required,
+      disabled: !!el.disabled,
+      ref: el.dataset?.ref || null,
+    };
+  }
+
+  const result = { forms: [], orphanFields: [] };
+
+  // Collect forms
+  for (const form of document.forms) {
+    const fields = [];
+    for (const el of form.elements) {
+      const field = extractField(el);
+      if (field) fields.push(field);
+    }
+    result.forms.push({
+      id: form.id || '',
+      name: form.name || '',
+      action: form.action || '',
+      method: (form.method || 'get').toUpperCase(),
+      fields,
+    });
+  }
+
+  // Collect orphan fields (not in a <form>)
+  const allInputs = document.querySelectorAll(
+    'input, textarea, select, [contenteditable="true"]'
+  );
+  for (const el of allInputs) {
+    if (!el.form) {
+      const field = extractField(el);
+      if (field) result.orphanFields.push(field);
+    }
+  }
+
+  return result;
+})()
+`;
+export {
+  FLAT_TREE_SCRIPT,
+  FORM_STATE_SCRIPT,
+  INTERACTIVE_ELEMENTS_SCRIPT,
+  MARKDOWN_SCRIPT,
+  SEMANTIC_TREE_SCRIPT,
+  SNAPSHOT_SCRIPT,
+  buildSnapshotScript,
+  flatTreeToString
+};
+//# sourceMappingURL=index.js.map