lobster-cli 0.1.0 → 0.2.0

package/dist/browser/chrome-attach.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/browser/chrome-attach.ts","../../src/utils/logger.ts"],"sourcesContent":["/**\n * Chrome Attach — discover and connect to a running Chrome instance.\n *\n * Probes common debug ports for Chrome's /json/version endpoint\n * and returns the WebSocket debugger URL for Puppeteer.connect().\n *\n * Inspired by PinchTab's attach mode, built from scratch.\n */\n\nimport http from 'node:http';\nimport { log } from '../utils/logger.js';\n\nexport interface ChromeDiscoveryResult {\n  wsEndpoint: string;\n  port: number;\n  version: string;\n  browser: string;\n}\n\nconst DEFAULT_PORTS = [9222, 9229, 9333, 9515];\nconst PROBE_TIMEOUT = 1500; // ms\n\n/**\n * Probe a single port for Chrome's DevTools endpoint.\n */\nfunction probePort(port: number): Promise<ChromeDiscoveryResult | null> {\n  return new Promise((resolve) => {\n    const req = http.get(`http://127.0.0.1:${port}/json/version`, {\n      timeout: PROBE_TIMEOUT,\n    }, (res) => {\n      let data = '';\n      res.on('data', (chunk: string) => { data += chunk; });\n      res.on('end', () => {\n        try {\n          const info = JSON.parse(data);\n          if (info.webSocketDebuggerUrl) {\n            resolve({\n              wsEndpoint: info.webSocketDebuggerUrl,\n              port,\n              version: info['Protocol-Version'] || '',\n              browser: info.Browser || '',\n            });\n          } else {\n            resolve(null);\n          }\n        } catch {\n          resolve(null);\n        }\n      });\n    });\n\n    req.on('error', () => resolve(null));\n    req.on('timeout', () => { req.destroy(); resolve(null); });\n  });\n}\n\n/**\n * Discover a running Chrome instance by probing common debug ports.\n * Returns the first responding instance, or null if none found.\n */\nexport async function discoverChrome(ports?: number[]): Promise<ChromeDiscoveryResult | null> {\n  const portsToCheck = ports || DEFAULT_PORTS;\n  log.debug(`Scanning ports for Chrome: ${portsToCheck.join(', ')}`);\n\n  // Probe all ports in parallel for speed\n  const results = await Promise.all(portsToCheck.map(probePort));\n  const found = results.find(Boolean) || null;\n\n  if (found) {\n    log.info(`Found Chrome on port ${found.port}: ${found.browser}`);\n  } else {\n    log.debug('No running Chrome instance found on debug ports.');\n  }\n\n  return found;\n}\n\n/**\n * Get WebSocket debugger URL from a specific port.\n */\nexport async function getWebSocketDebuggerUrl(port: number): Promise<string | null> {\n  const result = await probePort(port);\n  return result?.wsEndpoint || null;\n}\n\n/**\n * Parse an attach target — could be:\n * - \"true\" / true → auto-discover\n * - \"ws://...\" → explicit WebSocket URL\n * - \"9222\" → specific port number\n */\nexport async function resolveAttachTarget(target: boolean | string): Promise<string> {\n  if (target === true || target === 'true') {\n    const result = await discoverChrome();\n    if (!result) {\n      throw new Error(\n        'No running Chrome found. Start Chrome with:\\n' +\n        '  google-chrome --remote-debugging-port=9222\\n' +\n        '  # or on Mac:\\n' +\n        '  /Applications/Google\\\\ Chrome.app/Contents/MacOS/Google\\\\ Chrome --remote-debugging-port=9222'\n      );\n    }\n    return result.wsEndpoint;\n  }\n\n  if (typeof target === 'string') {\n    // Explicit WebSocket URL\n    if (target.startsWith('ws://') || target.startsWith('wss://')) {\n      return target;\n    }\n\n    // Port number\n    const port = parseInt(target, 10);\n    if (!isNaN(port) && port > 0 && port < 65536) {\n      const url = await getWebSocketDebuggerUrl(port);\n      if (!url) {\n        throw new Error(`No Chrome found on port ${port}. Make sure Chrome is running with --remote-debugging-port=${port}`);\n      }\n      return url;\n    }\n\n    throw new Error(`Invalid attach target: \"${target}\". Use \"true\" for auto-discover, a port number, or a ws:// URL.`);\n  }\n\n  throw new Error('Invalid attach target.');\n}\n","import chalk from 'chalk';\n\nexport const log = {\n  info: (msg: string) => console.log(chalk.blue('ℹ'), msg),\n  success: (msg: string) => console.log(chalk.green('✓'), msg),\n  warn: (msg: string) => console.log(chalk.yellow('⚠'), msg),\n  error: (msg: string) => console.error(chalk.red('✗'), msg),\n  debug: (msg: string) => {\n    if (process.env.LOBSTER_DEBUG) console.log(chalk.gray('⋯'), msg);\n  },\n  step: (n: number, msg: string) => console.log(chalk.cyan(`[${n}]`), msg),\n  dim: (msg: string) => console.log(chalk.dim(msg)),\n};\n"],"mappings":"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","names":[]}

package/dist/browser/dom/compact-snapshot.js

@@ -0,0 +1,162 @@
+// 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');
+})()
+`;
+function buildCompactSnapshotScript(tokenBudget = 800) {
+  return COMPACT_SNAPSHOT_SCRIPT.replace("const TOKEN_BUDGET = 800;", `const TOKEN_BUDGET = ${tokenBudget};`);
+}
+export {
+  COMPACT_SNAPSHOT_SCRIPT,
+  buildCompactSnapshotScript
+};
+//# sourceMappingURL=compact-snapshot.js.map

package/dist/browser/dom/compact-snapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/dom/compact-snapshot.ts"],"sourcesContent":["/**\n * Compact Snapshot — token-efficient DOM snapshot (~800 tokens).\n *\n * Only emits interactive elements + landmark section headers.\n * Format: [0] button \"Sign In\" (one line per element)\n *\n * Inspired by PinchTab's token-counting approach, built from scratch.\n */\n\nexport const COMPACT_SNAPSHOT_SCRIPT = `\n(() => {\n  const TOKEN_BUDGET = 800;\n  const CHARS_PER_TOKEN = 4;\n\n  const INTERACTIVE_TAGS = new Set([\n    'a','button','input','select','textarea','details','summary','label',\n  ]);\n  const INTERACTIVE_ROLES = new Set([\n    'button','link','textbox','checkbox','radio','combobox','listbox',\n    'menu','menuitem','tab','switch','slider','searchbox','spinbutton',\n    'option','menuitemcheckbox','menuitemradio','treeitem',\n  ]);\n  const LANDMARK_TAGS = new Map([\n    ['nav', 'Navigation'],\n    ['main', 'Main Content'],\n    ['header', 'Header'],\n    ['footer', 'Footer'],\n    ['aside', 'Sidebar'],\n    ['form', 'Form'],\n  ]);\n  const LANDMARK_ROLES = new Map([\n    ['navigation', 'Navigation'],\n    ['main', 'Main Content'],\n    ['banner', 'Header'],\n    ['contentinfo', 'Footer'],\n    ['complementary', 'Sidebar'],\n    ['search', 'Search'],\n    ['dialog', 'Dialog'],\n  ]);\n\n  function isVisible(el) {\n    if (el.offsetWidth === 0 && el.offsetHeight === 0 && el.tagName !== 'INPUT') return false;\n    const s = getComputedStyle(el);\n    return s.display !== 'none' && s.visibility !== 'hidden' && s.opacity !== '0';\n  }\n\n  function isInteractive(el) {\n    const tag = el.tagName.toLowerCase();\n    if (INTERACTIVE_TAGS.has(tag)) {\n      if (el.disabled) return false;\n      if (tag === 'input' && el.type === 'hidden') return false;\n      return true;\n    }\n    const role = el.getAttribute('role');\n    if (role && INTERACTIVE_ROLES.has(role)) return true;\n    if (el.contentEditable === 'true') return true;\n    if (el.tabIndex >= 0 && el.getAttribute('tabindex') !== null) return true;\n    return false;\n  }\n\n  function getRole(el) {\n    const role = el.getAttribute('role');\n    if (role) return role;\n    const tag = el.tagName.toLowerCase();\n    if (tag === 'a') return 'link';\n    if (tag === 'button' || tag === 'summary') return 'button';\n    if (tag === 'input') return el.type || 'text';\n    if (tag === 'select') return 'select';\n    if (tag === 'textarea') return 'textarea';\n    if (tag === 'label') return 'label';\n    return tag;\n  }\n\n  function getName(el) {\n    return (\n      el.getAttribute('aria-label') ||\n      el.getAttribute('alt') ||\n      el.getAttribute('title') ||\n      el.getAttribute('placeholder') ||\n      (el.tagName === 'INPUT' && (el.type === 'submit' || el.type === 'button') ? el.value : '') ||\n      (el.id ? document.querySelector('label[for=\"' + el.id + '\"]')?.textContent?.trim() : '') ||\n      (el.children.length <= 2 ? el.textContent?.trim() : '') ||\n      ''\n    ).slice(0, 60);\n  }\n\n  function getValue(el) {\n    const tag = el.tagName.toLowerCase();\n    if (tag === 'input') {\n      const type = el.type || 'text';\n      if (type === 'checkbox' || type === 'radio') return el.checked ? 'checked' : 'unchecked';\n      if (type === 'password') return el.value ? '****' : '';\n      return el.value ? el.value.slice(0, 30) : '';\n    }\n    if (tag === 'textarea') return el.value ? el.value.slice(0, 30) : '';\n    if (tag === 'select' && el.selectedOptions?.length) return el.selectedOptions[0].text.slice(0, 30);\n    return '';\n  }\n\n  // Collect elements\n  let idx = 0;\n  let charsUsed = 0;\n  const lines = [];\n  let lastLandmark = '';\n\n  // Page header\n  const scrollY = window.scrollY;\n  const scrollMax = document.documentElement.scrollHeight - window.innerHeight;\n  const scrollPct = scrollMax > 0 ? Math.round((scrollY / scrollMax) * 100) : 0;\n  const header = 'url: ' + location.href + ' | scroll: ' + scrollPct + '%';\n  lines.push(header);\n  charsUsed += header.length;\n\n  // Walk DOM\n  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);\n  let node;\n  while ((node = walker.nextNode())) {\n    if (!isVisible(node)) continue;\n\n    const tag = node.tagName.toLowerCase();\n    if (['script','style','noscript','svg','path','meta','link','head','template'].includes(tag)) continue;\n\n    // Check for landmark\n    const role = node.getAttribute('role');\n    const landmark = LANDMARK_TAGS.get(tag) || (role ? LANDMARK_ROLES.get(role) : null);\n    if (landmark && landmark !== lastLandmark) {\n      const sectionLine = '--- ' + landmark + ' ---';\n      if (charsUsed + sectionLine.length > TOKEN_BUDGET * CHARS_PER_TOKEN) break;\n      lines.push(sectionLine);\n      charsUsed += sectionLine.length;\n      lastLandmark = landmark;\n    }\n\n    // Only emit interactive elements\n    if (!isInteractive(node)) continue;\n\n    const elRole = getRole(node);\n    const name = getName(node);\n    const value = getValue(node);\n\n    // Build compact line\n    let line = '[' + idx + '] ' + elRole;\n    if (name) line += ' \"' + name.replace(/\"/g, \"'\") + '\"';\n    if (value) line += ' val=\"' + value.replace(/\"/g, \"'\") + '\"';\n\n    // Check token budget\n    if (charsUsed + line.length > TOKEN_BUDGET * CHARS_PER_TOKEN) {\n      lines.push('... (' + (document.querySelectorAll('a,button,input,select,textarea,[role]').length - idx) + ' more elements)');\n      break;\n    }\n\n    // Annotate element with ref for clicking\n    try { node.dataset.ref = String(idx); } catch {}\n\n    lines.push(line);\n    charsUsed += line.length;\n    idx++;\n  }\n\n  return lines.join('\\\\n');\n})()\n`;\n\n/**\n * Build compact snapshot script with custom token budget.\n */\nexport function buildCompactSnapshotScript(tokenBudget: number = 800): string {\n  return COMPACT_SNAPSHOT_SCRIPT.replace('const TOKEN_BUDGET = 800;', `const TOKEN_BUDGET = ${tokenBudget};`);\n}\n"],"mappings":";AASO,IAAM,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6JhC,SAAS,2BAA2B,cAAsB,KAAa;AAC5E,SAAO,wBAAwB,QAAQ,6BAA6B,wBAAwB,WAAW,GAAG;AAC5G;","names":[]}

package/dist/browser/dom/index.js

@@ -1083,13 +1083,173 @@ var FORM_STATE_SCRIPT = `
   return result;
 })()
 `;
+
+// 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');
+})()
+`;
+function buildCompactSnapshotScript(tokenBudget = 800) {
+  return COMPACT_SNAPSHOT_SCRIPT.replace("const TOKEN_BUDGET = 800;", `const TOKEN_BUDGET = ${tokenBudget};`);
+}
 export {
+  COMPACT_SNAPSHOT_SCRIPT,
   FLAT_TREE_SCRIPT,
   FORM_STATE_SCRIPT,
   INTERACTIVE_ELEMENTS_SCRIPT,
   MARKDOWN_SCRIPT,
   SEMANTIC_TREE_SCRIPT,
   SNAPSHOT_SCRIPT,
+  buildCompactSnapshotScript,
   buildSnapshotScript,
   flatTreeToString
 };