lobster-cli 0.1.0 → 0.2.0

package/dist/browser/page-adapter.js

@@ -455,6 +455,161 @@ var SNAPSHOT_SCRIPT = `
 })()
 `;
 
+// src/browser/dom/compact-snapshot.ts
+var COMPACT_SNAPSHOT_SCRIPT = `
+(() => {
+  const TOKEN_BUDGET = 800;
+  const CHARS_PER_TOKEN = 4;
+
+  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 LANDMARK_TAGS = new Map([
+    ['nav', 'Navigation'],
+    ['main', 'Main Content'],
+    ['header', 'Header'],
+    ['footer', 'Footer'],
+    ['aside', 'Sidebar'],
+    ['form', 'Form'],
+  ]);
+  const LANDMARK_ROLES = new Map([
+    ['navigation', 'Navigation'],
+    ['main', 'Main Content'],
+    ['banner', 'Header'],
+    ['contentinfo', 'Footer'],
+    ['complementary', 'Sidebar'],
+    ['search', 'Search'],
+    ['dialog', 'Dialog'],
+  ]);
+
+  function isVisible(el) {
+    if (el.offsetWidth === 0 && el.offsetHeight === 0 && el.tagName !== 'INPUT') return false;
+    const s = getComputedStyle(el);
+    return s.display !== 'none' && s.visibility !== 'hidden' && s.opacity !== '0';
+  }
+
+  function isInteractive(el) {
+    const tag = el.tagName.toLowerCase();
+    if (INTERACTIVE_TAGS.has(tag)) {
+      if (el.disabled) return false;
+      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;
+    return false;
+  }
+
+  function getRole(el) {
+    const role = el.getAttribute('role');
+    if (role) return role;
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'a') return 'link';
+    if (tag === 'button' || tag === 'summary') return 'button';
+    if (tag === 'input') return el.type || 'text';
+    if (tag === 'select') return 'select';
+    if (tag === 'textarea') return 'textarea';
+    if (tag === 'label') return 'label';
+    return tag;
+  }
+
+  function getName(el) {
+    return (
+      el.getAttribute('aria-label') ||
+      el.getAttribute('alt') ||
+      el.getAttribute('title') ||
+      el.getAttribute('placeholder') ||
+      (el.tagName === 'INPUT' && (el.type === 'submit' || el.type === 'button') ? el.value : '') ||
+      (el.id ? document.querySelector('label[for="' + el.id + '"]')?.textContent?.trim() : '') ||
+      (el.children.length <= 2 ? el.textContent?.trim() : '') ||
+      ''
+    ).slice(0, 60);
+  }
+
+  function getValue(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'input') {
+      const type = el.type || 'text';
+      if (type === 'checkbox' || type === 'radio') return el.checked ? 'checked' : 'unchecked';
+      if (type === 'password') return el.value ? '****' : '';
+      return el.value ? el.value.slice(0, 30) : '';
+    }
+    if (tag === 'textarea') return el.value ? el.value.slice(0, 30) : '';
+    if (tag === 'select' && el.selectedOptions?.length) return el.selectedOptions[0].text.slice(0, 30);
+    return '';
+  }
+
+  // Collect elements
+  let idx = 0;
+  let charsUsed = 0;
+  const lines = [];
+  let lastLandmark = '';
+
+  // Page header
+  const scrollY = window.scrollY;
+  const scrollMax = document.documentElement.scrollHeight - window.innerHeight;
+  const scrollPct = scrollMax > 0 ? Math.round((scrollY / scrollMax) * 100) : 0;
+  const header = 'url: ' + location.href + ' | scroll: ' + scrollPct + '%';
+  lines.push(header);
+  charsUsed += header.length;
+
+  // Walk DOM
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+  let node;
+  while ((node = walker.nextNode())) {
+    if (!isVisible(node)) continue;
+
+    const tag = node.tagName.toLowerCase();
+    if (['script','style','noscript','svg','path','meta','link','head','template'].includes(tag)) continue;
+
+    // Check for landmark
+    const role = node.getAttribute('role');
+    const landmark = LANDMARK_TAGS.get(tag) || (role ? LANDMARK_ROLES.get(role) : null);
+    if (landmark && landmark !== lastLandmark) {
+      const sectionLine = '--- ' + landmark + ' ---';
+      if (charsUsed + sectionLine.length > TOKEN_BUDGET * CHARS_PER_TOKEN) break;
+      lines.push(sectionLine);
+      charsUsed += sectionLine.length;
+      lastLandmark = landmark;
+    }
+
+    // Only emit interactive elements
+    if (!isInteractive(node)) continue;
+
+    const elRole = getRole(node);
+    const name = getName(node);
+    const value = getValue(node);
+
+    // Build compact line
+    let line = '[' + idx + '] ' + elRole;
+    if (name) line += ' "' + name.replace(/"/g, "'") + '"';
+    if (value) line += ' val="' + value.replace(/"/g, "'") + '"';
+
+    // Check token budget
+    if (charsUsed + line.length > TOKEN_BUDGET * CHARS_PER_TOKEN) {
+      lines.push('... (' + (document.querySelectorAll('a,button,input,select,textarea,[role]').length - idx) + ' more elements)');
+      break;
+    }
+
+    // Annotate element with ref for clicking
+    try { node.dataset.ref = String(idx); } catch {}
+
+    lines.push(line);
+    charsUsed += line.length;
+    idx++;
+  }
+
+  return lines.join('\\n');
+})()
+`;
+
 // src/browser/dom/semantic-tree.ts
 var SEMANTIC_TREE_SCRIPT = `
 (() => {
@@ -980,6 +1135,64 @@ var FORM_STATE_SCRIPT = `
 })()
 `;
 
+// 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/interceptor.ts
 function buildInterceptorScript(pattern) {
   return `
@@ -1036,6 +1249,155 @@ var GET_INTERCEPTED_SCRIPT = `
 })()
 `;
 
+// src/browser/semantic-find.ts
+var SYNONYMS = {
+  btn: ["button"],
+  button: ["btn", "submit", "click"],
+  submit: ["go", "send", "ok", "confirm", "done", "button"],
+  search: ["find", "lookup", "query", "filter"],
+  login: ["signin", "sign-in", "log-in", "authenticate"],
+  signup: ["register", "create-account", "sign-up", "join"],
+  logout: ["signout", "sign-out", "log-out"],
+  close: ["dismiss", "x", "cancel", "exit"],
+  menu: ["nav", "navigation", "hamburger", "sidebar"],
+  nav: ["navigation", "menu", "navbar"],
+  input: ["field", "textbox", "text", "entry"],
+  email: ["mail", "e-mail"],
+  password: ["pass", "pwd", "secret"],
+  next: ["continue", "forward", "proceed"],
+  back: ["previous", "return", "go-back"],
+  save: ["store", "keep", "persist"],
+  delete: ["remove", "trash", "discard", "destroy"],
+  edit: ["modify", "change", "update"],
+  add: ["create", "new", "plus", "insert"],
+  settings: ["preferences", "config", "options", "gear"],
+  profile: ["account", "user", "avatar"],
+  home: ["main", "dashboard", "start"],
+  link: ["anchor", "href", "url"],
+  select: ["dropdown", "combo", "picker", "choose"],
+  checkbox: ["check", "toggle", "tick"],
+  upload: ["attach", "file", "browse"],
+  download: ["save", "export"]
+};
+var ROLE_KEYWORDS = /* @__PURE__ */ new Set([
+  "button",
+  "link",
+  "input",
+  "textbox",
+  "checkbox",
+  "radio",
+  "select",
+  "dropdown",
+  "tab",
+  "menu",
+  "menuitem",
+  "switch",
+  "slider",
+  "combobox",
+  "searchbox",
+  "option"
+]);
+function tokenize(text) {
+  return text.toLowerCase().replace(/[^a-z0-9\s-]/g, " ").split(/[\s-]+/).filter((t) => t.length > 0);
+}
+function expandSynonyms(tokens) {
+  const expanded = new Set(tokens);
+  for (const token of tokens) {
+    const syns = SYNONYMS[token];
+    if (syns) {
+      for (const syn of syns) expanded.add(syn);
+    }
+  }
+  return expanded;
+}
+function freqMap(tokens) {
+  const map = /* @__PURE__ */ new Map();
+  for (const t of tokens) {
+    map.set(t, (map.get(t) || 0) + 1);
+  }
+  return map;
+}
+function jaccardScore(queryTokens, descTokens) {
+  const qFreq = freqMap(queryTokens);
+  const dFreq = freqMap(descTokens);
+  let intersection = 0;
+  let union = 0;
+  const allTokens = /* @__PURE__ */ new Set([...qFreq.keys(), ...dFreq.keys()]);
+  for (const token of allTokens) {
+    const qCount = qFreq.get(token) || 0;
+    const dCount = dFreq.get(token) || 0;
+    intersection += Math.min(qCount, dCount);
+    union += Math.max(qCount, dCount);
+  }
+  return union === 0 ? 0 : intersection / union;
+}
+function prefixScore(queryTokens, descTokens) {
+  if (queryTokens.length === 0 || descTokens.length === 0) return 0;
+  let matches = 0;
+  for (const qt of queryTokens) {
+    if (qt.length < 3) continue;
+    for (const dt of descTokens) {
+      if (dt.startsWith(qt) || qt.startsWith(dt)) {
+        matches += 0.5;
+        break;
+      }
+    }
+  }
+  return Math.min(matches / queryTokens.length, 0.3);
+}
+function roleBoost(queryTokens, elementRole) {
+  const roleLower = elementRole.toLowerCase();
+  for (const qt of queryTokens) {
+    if (ROLE_KEYWORDS.has(qt) && roleLower.includes(qt)) {
+      return 0.2;
+    }
+  }
+  return 0;
+}
+function scoreElement(queryTokens, queryExpanded, element) {
+  const descParts = [
+    element.text,
+    element.role,
+    element.tag,
+    element.ariaLabel
+  ].filter(Boolean);
+  const descText = descParts.join(" ");
+  const descTokens = tokenize(descText);
+  if (descTokens.length === 0) return 0;
+  const descExpanded = expandSynonyms(descTokens);
+  const expandedQueryTokens = [...queryExpanded];
+  const expandedDescTokens = [...descExpanded];
+  const jaccard = jaccardScore(expandedQueryTokens, expandedDescTokens);
+  const prefix = prefixScore(queryTokens, descTokens);
+  const role = roleBoost(queryTokens, element.role || element.tag);
+  const queryStr = queryTokens.join(" ");
+  const descStr = descTokens.join(" ");
+  const exactBonus = descStr.includes(queryStr) ? 0.3 : 0;
+  return Math.min(jaccard + prefix + role + exactBonus, 1);
+}
+function semanticFind(elements, query, options) {
+  const maxResults = options?.maxResults ?? 5;
+  const minScore = options?.minScore ?? 0.3;
+  const queryTokens = tokenize(query);
+  if (queryTokens.length === 0) return [];
+  const queryExpanded = expandSynonyms(queryTokens);
+  const scored = [];
+  for (const el of elements) {
+    const score = scoreElement(queryTokens, queryExpanded, el);
+    if (score >= minScore) {
+      scored.push({
+        ref: el.index,
+        score: Math.round(score * 100) / 100,
+        text: (el.text || el.ariaLabel || "").slice(0, 60),
+        role: el.role || el.tag,
+        tag: el.tag
+      });
+    }
+  }
+  scored.sort((a, b) => b.score - a.score);
+  return scored.slice(0, maxResults);
+}
+
 // src/browser/page-adapter.ts
 var PuppeteerPage = class {
   page;
@@ -1063,7 +1425,10 @@ var PuppeteerPage = class {
   async evaluate(js) {
     return this.page.evaluate(js);
   }
-  async snapshot(_opts) {
+  async snapshot(opts) {
+    if (opts?.compact) {
+      return this.page.evaluate(COMPACT_SNAPSHOT_SCRIPT);
+    }
     return this.page.evaluate(SNAPSHOT_SCRIPT);
   }
   async semanticTree(_opts) {
@@ -1335,6 +1700,10 @@ var PuppeteerPage = class {
       active: p === this.page
     }));
   }
+  async find(query, options) {
+    const elements = await this.page.evaluate(INTERACTIVE_ELEMENTS_SCRIPT);
+    return semanticFind(elements, query, options);
+  }
   async close() {
     await this.page.close();
   }