@xbrowser/cli 1.9.7 → 1.9.9

package/dist/{chunk-CH5ZQV64.js → chunk-4452SPFI.js}

@@ -34,6 +34,22 @@ function getSelectorGeneratorScript() {
     /^semi-[a-z]{4,}/
   ];
   var STABLE_ATTRS = ['data-testid', 'data-test-id', 'data-cy', 'data-qa', 'data-el'];
+  // Dynamic attrs known to change per page load (skip even if unique)
+  var UNSTABLE_ATTRS = [
+    'data-spm-anchor-id', 'data-reactid', 'data-reactroot',
+    'data-n-head', 'data-server-rendered',
+  ];
+  // Patterns catching other dynamic attrs by name shape
+  var UNSTABLE_ATTR_PATTERNS = [
+    /^data-spm/, /^data-track/, /^data-log/, /^data-pf/, /^data-key$/, /^data-rbd/,
+  ];
+  function isUnstableAttr(name) {
+    if (UNSTABLE_ATTRS.indexOf(name) !== -1) return true;
+    for (var i = 0; i < UNSTABLE_ATTR_PATTERNS.length; i++) {
+      if (UNSTABLE_ATTR_PATTERNS[i].test(name)) return true;
+    }
+    return false;
+  }
   var MAX_DEPTH = 5;
 
   function isStableClass(cls) {
@@ -81,6 +97,8 @@ function getSelectorGeneratorScript() {
 	      var a = el.attributes[ai];
 	      if (!a.name.startsWith('data-')) continue;
 	      if (STABLE_ATTRS.indexOf(a.name) !== -1) continue;
+	      // Skip dynamic attrs (e.g. data-spm-anchor-id changes per page load)
+	      if (isUnstableAttr(a.name)) continue;
 	      if (!a.value || a.value.length > 60 || a.value.indexOf('http') === 0) continue;
 	      var s = '[' + a.name + '="' + esc(a.value) + '"]';
 	      if (isUnique(root, s)) return { selector: s, strategy: 'data-attr', confidence: 'high' };
@@ -385,8 +403,11 @@ var ACTION_SIGNAL_SCRIPT = `
       selector = uniqueSelector(el);
     }
 
-    // For low-confidence selectors (nth-of-type), generate a text-based fallback
-    // when the element has short, unique text (e.g. menu items "\u5220\u9664", "\u786E\u8BA4")
+    // For low-confidence selectors (nth-of-type) OR selectors from dynamic
+    // attributes (which may not survive page reload), generate a text-based
+    // fallback when the element has short, unique text (e.g. menu items
+    // "\u5220\u9664", "\u786E\u8BA4", "\u6700\u65B0"). This lets replay fall back to text matching
+    // when the primary selector can't be found.
     var textFallback;
     var popupContext;
 
@@ -396,7 +417,18 @@ var ACTION_SIGNAL_SCRIPT = `
       popupEl = el.closest('[role="menu"], [role="listbox"], [role="dialog"], [role="tooltip"], [role="list"], [class*="popover"], [class*="popup"], [class*="dropdown"], [class*="menu"], [class*="modal"], [id*="menu"], [id*="dropdown"], [id*="popup"], [id*="modal"]');
     } catch(e) {}
 
-    if (confidence === 'low') {
+    // Determine if primary selector is "fragile" \u2014 won't survive page reload
+    // because it comes from a dynamic attribute (e.g. data-spm-anchor-id).
+    var selectorIsFragile = false;
+    if (selector && confidence === 'high' && strategy === 'data-attr') {
+      // Fragile if the selector references a known dynamic attribute
+      selectorIsFragile = selector.indexOf('[data-spm-anchor-id') !== -1
+        || selector.indexOf('[data-reactid') !== -1
+        || selector.indexOf('[data-track') !== -1
+        || selector.indexOf('[data-log') !== -1;
+    }
+
+    if (confidence === 'low' || selectorIsFragile) {
       var rawText = (el.textContent || '').trim();
       if (rawText && rawText.length >= 1 && rawText.length <= 30 && el.children.length === 0) {
         try {
@@ -638,6 +670,10 @@ var ACTION_SIGNAL_SCRIPT = `
     '.popover','.popup','.dropdown','.menu','.modal','.tooltip','.panel',
     '[class*="popover"]','[class*="popup"]','[class*="dropdown"]','[class*="menu"]','[class*="tooltip"]',
     '[class*="modal"]','[class*="panel"]','[class*="overlay"]','[class*="sheet"]',
+    // Modern SPA conventions: many libraries expose the open menu via class
+    // fragments like "items-container", "options", "list", "select-popup".
+    '[class*="items-container"]','[class*="options"]','[class*="select-popup"]',
+    '[class*="select-items"]','[class*="menu-items"]','[class*="list-box"]',
     '[data-popup]','[data-dropdown]','[data-menu]','[data-popover]',
     '.semi-dropdown','.semi-popover','.semi-modal','.semi-select-option',
     '.ant-dropdown','.ant-popover','.ant-modal','.ant-select-dropdown',
@@ -679,6 +715,11 @@ var ACTION_SIGNAL_SCRIPT = `
               if (child.getAttribute('aria-disabled') === 'true') childInfo.disabled = true;
               if (child.tagName) childInfo.tag = child.tagName.toLowerCase();
               if (child.href) childInfo.href = child.href.substring(0, 80);
+              // Attach a selector so replay / AI can target this item precisely.
+              try {
+                var childSel = uniqueSelector(child);
+                if (childSel) childInfo.selector = childSel;
+              } catch(e) {}
               items.push(childInfo);
             }
             result.appeared.push({
@@ -740,6 +781,9 @@ var ACTION_SIGNAL_SCRIPT = `
 
     pushAction('click', { element: describe(resolveMeaningful(e)), x: cx, y: cy });
 
+    // Mark this element as user-interacted in discovered_filters (proactive sensing)
+    try { __xb_markTriggerInteracted(e.target); } catch(_) {}
+
     // After 200ms, capture what changed
     setTimeout(function() {
       try {
@@ -878,12 +922,102 @@ var ACTION_SIGNAL_SCRIPT = `
   }, true);
 
   // \u2500\u2500 Hover (throttled to 800ms) \u2500\u2500
+  // After a hover we asynchronously sample for popups/dropdowns that appear
+  // (200/500/1000ms) and run a short-lived MutationObserver. Any popup that
+  // surfaces is recorded on the hover action as hoverContext, mirroring the
+  // clickContext flow used after clicks.
   var __xb_last_hover = 0;
+  var __xb_hover_observer = null;         // current hover's MutationObserver
+  var __xb_hover_observer_timer = null;   // auto-disconnect timer
+  var __xb_hover_action_ref = null;       // ref to the hover action being enriched
+  var __xb_hover_seen_popups = {};        // dedup popup selectors for current hover
+  var __xb_hover_cx = 0, __xb_hover_cy = 0;
+
+  function __xb_merge_hover_context(ctx) {
+    if (!__xb_hover_action_ref || !ctx) return;
+    if (ctx.appeared.length === 0 && ctx.stateChanges.length === 0) return;
+    if (!__xb_hover_action_ref.hoverContext) {
+      __xb_hover_action_ref.hoverContext = { appeared: [], disappeared: [], stateChanges: [] };
+    }
+    var hc = __xb_hover_action_ref.hoverContext;
+    ctx.appeared.forEach(function(p) {
+      var key = p.selector || p.text;
+      if (!key || __xb_hover_seen_popups[key]) return;
+      __xb_hover_seen_popups[key] = true;
+      hc.appeared.push(p);
+    });
+    ctx.stateChanges.forEach(function(s) {
+      hc.stateChanges.push(s);
+    });
+  }
+
+  function __xb_capture_hover_popups() {
+    if (!__xb_hover_action_ref) return;
+    try {
+      var ctx = captureVisibleContext(__xb_hover_cx, __xb_hover_cy);
+      __xb_merge_hover_context(ctx);
+    } catch(e) {}
+  }
+  // Expose for flush-time sweep (server-side flushPendingActions calls this
+  // before draining the pending queue so any in-flight hover enrichment lands).
+  window.__xb_capture_hover_popups = __xb_capture_hover_popups;
+
+  function __xb_start_hover_observer() {
+    if (!('MutationObserver' in window)) return;
+    if (__xb_hover_observer) {
+      __xb_hover_observer.disconnect();
+      __xb_hover_observer = null;
+    }
+    if (__xb_hover_observer_timer) {
+      clearTimeout(__xb_hover_observer_timer);
+      __xb_hover_observer_timer = null;
+    }
+    __xb_hover_observer = new MutationObserver(function(mutations) {
+      if (!__xb_hover_action_ref) return;
+      for (var i = 0; i < mutations.length; i++) {
+        var added = mutations[i].addedNodes;
+        for (var j = 0; j < added.length; j++) {
+          var node = added[j];
+          if (node.nodeType !== 1) continue;
+          var matches = false;
+          // Is the added node itself a popover?
+          for (var k = 0; k < POPOVER_SELECTORS.length; k++) {
+            try { if (node.matches && node.matches(POPOVER_SELECTORS[k])) { matches = true; break; } } catch(e) {}
+          }
+          // Or does it contain a popover?
+          if (!matches && node.querySelector) {
+            for (var k2 = 0; k2 < POPOVER_SELECTORS.length; k2++) {
+              try { if (node.querySelector(POPOVER_SELECTORS[k2])) { matches = true; break; } } catch(e) {}
+            }
+          }
+          if (matches) {
+            __xb_capture_hover_popups();
+            break;
+          }
+        }
+      }
+    });
+    try {
+      __xb_hover_observer.observe(document.body, { childList: true, subtree: true });
+    } catch(e) {}
+    // Auto-disconnect after 1.2s \u2014 hover popups rarely appear later than this.
+    __xb_hover_observer_timer = setTimeout(function() {
+      if (__xb_hover_observer) {
+        __xb_hover_observer.disconnect();
+        __xb_hover_observer = null;
+      }
+      __xb_hover_observer_timer = null;
+    }, 1200);
+  }
+
   document.addEventListener('mouseover', function(e) {
     if (Date.now() - __xb_last_hover < 800) return;
-    __xb_last_hover = Date.now();
     var target = resolveMeaningful(e);
-    // Only record hover on interactive elements
+    // Only record hover on interactive elements. Modern SPAs often implement
+    // clickable items as <span>/<div> with onClick handlers and no semantic
+    // role, so we also accept elements whose computed style suggests they are
+    // meant to be interacted with (pointer cursor, or a class name that looks
+    // like a UI control).
     var tag = target.tagName && target.tagName.toLowerCase();
     var isInteractive = tag === 'a' || tag === 'button' || tag === 'input'
       || tag === 'select' || tag === 'textarea' || tag === 'summary'
@@ -893,12 +1027,69 @@ var ACTION_SIGNAL_SCRIPT = `
       || target.getAttribute('role') === 'tab'
       || target.getAttribute('role') === 'option'
       || !!target.closest('[role="menu"], [role="menubar"], [role="tablist"], [role="listbox"], [role="tree"], nav, menu');
+    // Heuristic fallback for span/div/li that look interactive (onClick,
+    // pointer cursor, or class names hinting at a UI control like
+    // "select", "trigger", "tab", "sort", "menu", "item").
+    if (!isInteractive && (tag === 'span' || tag === 'div' || tag === 'li')) {
+      try {
+        if (target.onclick) isInteractive = true;
+      } catch(e2) {}
+      if (!isInteractive) {
+        try {
+          var cs = window.getComputedStyle(target);
+          if (cs.cursor === 'pointer') isInteractive = true;
+        } catch(e3) {}
+      }
+      if (!isInteractive) {
+        try {
+          var cls = (target.className && typeof target.className === 'string')
+            ? target.className.toLowerCase() : '';
+          if (/(?:^|[-_])(select|trigger|tab|sort|menu|item|dropdown|popover|title|toggle|action|btn)(?:[-_]|$)/.test(cls)) {
+            // But only if an ancestor looks like a toolbar/menu/sort bar \u2014
+            // otherwise this would match almost every list item on the web.
+            if (target.closest('[class*="select"], [class*="sort"], [class*="tab"], [class*="menu"], [class*="toolbar"], [class*="filter"], [class*="dropdown"]')) {
+              isInteractive = true;
+            }
+          }
+        } catch(e4) {}
+      }
+    }
     if (isInteractive) {
+      // Reset state for the new hover target
+      if (__xb_hover_observer) {
+        __xb_hover_observer.disconnect();
+        __xb_hover_observer = null;
+      }
+      if (__xb_hover_observer_timer) {
+        clearTimeout(__xb_hover_observer_timer);
+        __xb_hover_observer_timer = null;
+      }
+      __xb_hover_seen_popups = {};
+
+      var cx = e.clientX, cy = e.clientY;
+      __xb_hover_cx = cx;
+      __xb_hover_cy = cy;
+
       pushAction('hover', {
         element: describe(target),
-        x: e.clientX,
-        y: e.clientY,
+        x: cx,
+        y: cy,
       });
+      // Mark this element as user-interacted in discovered_filters
+      try { __xb_markTriggerInteracted(target); } catch(_) {}
+      __xb_last_hover = Date.now();
+
+      // Grab a reference to the just-pushed action so we can enrich it async.
+      var pending = window.__xb_pending_actions;
+      __xb_hover_action_ref = pending.length > 0 ? pending[pending.length - 1] : null;
+
+      // 1. Async sampling: 200/500/1000ms covers CSS transitions + JS render delays.
+      setTimeout(__xb_capture_hover_popups, 200);
+      setTimeout(__xb_capture_hover_popups, 500);
+      setTimeout(__xb_capture_hover_popups, 1000);
+
+      // 2. Short-lived MutationObserver for popups that appear on their own schedule.
+      __xb_start_hover_observer();
     }
   }, true);
 
@@ -1007,6 +1198,511 @@ var ACTION_SIGNAL_SCRIPT = `
       visibility: { state: document.hidden ? 'hidden' : 'visible' },
     });
   }, true);
+
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // PROACTIVE SENSING \u2014 discover interactive regions without user action.
+  //
+  // Three layers:
+  //   1. __xb_scanFilters() \u2014 baseline scan, called on start/navigation
+  //   2. Long-lived MutationObserver \u2014 watches popover visible transitions
+  //   3. mousemove throttled diff \u2014 senses triggers near the cursor
+  //
+  // Results:
+  //   - 'discovered_filters' action \u2192 merged into RecordingData.discoveredFilters
+  //   - 'popup_appear' action \u2192 added to actions stream (with cause tag)
+  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+  var FILTER_CONTAINER_SELECTORS = [
+    '[role="tablist"]', '[role="menu"]', '[role="menubar"]', '[role="toolbar"]',
+    '[role="navigation"]', '[role="listbox"]',
+    '[class*="filter"]', '[class*="sort"]', '[class*="toolbar"]',
+    '[class*="select-bar"]', '[class*="tabs"]', '[class*="nav-bar"]',
+    '[class*="sidebar"]', '[class*="menu-bar"]', '[class*="select-container"]',
+    'fieldset',
+  ];
+
+  var TRIGGER_SELECTORS = [
+    '[role="tab"]', '[role="menuitem"]', '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]', '[role="option"]', '[role="button"]',
+    '[role="link"]', '[role="switch"]', '[role="checkbox"]',
+    'button', 'a', 'select',
+    // Modern SPA span/div triggers (cursor:pointer is a strong signal)
+    'span[class*="title"]', 'div[class*="title"]',
+    'div[class*="trigger"]', 'span[class*="trigger"]',
+    'div[class*="item"]', 'li',
+  ];
+
+  /** Categorize a container/trigger by class name + role heuristics. */
+  function categorizeElement(el) {
+    try {
+      var cls = ((el.className && typeof el.className === 'string') ? el.className : '').toLowerCase();
+      var role = (el.getAttribute && el.getAttribute('role')) || '';
+      if (role === 'tab' || /(^|[-_])tab(s|list)?([-_]|$)/.test(cls)) return 'tab';
+      if (role === 'menuitem' || role === 'menu' || /menu/.test(cls)) return 'menu';
+      if (/sort/.test(cls)) return 'sort';
+      if (/filter/.test(cls)) return 'filter';
+      if (role === 'navigation' || /nav([-_]|$)/.test(cls)) return 'navigation';
+      // Common compound patterns
+      if (/search-filter|search-select|filter-up|filter-select|filter-checkbox/.test(cls)) return 'filter';
+      if (/sort-bar|sort-container|sort-trigger/.test(cls)) return 'sort';
+      if (/checkbox-group|radio-group/.test(cls)) return 'filter';
+      if (/sidebar/.test(cls)) return 'navigation';
+    } catch(e) {}
+    return 'unknown';
+  }
+
+  /** Build a DiscoveredTrigger from an element. */
+  function buildTrigger(el) {
+    var text = (el.textContent || '').trim();
+    var trigger = {
+      selector: uniqueSelector(el),
+      text: text.substring(0, 40),
+      role: el.getAttribute ? (el.getAttribute('role') || undefined) : undefined,
+      category: categorizeElement(el),
+      hasPopup: false,
+      userInteracted: false,
+      explored: false,
+    };
+    return trigger;
+  }
+
+  /** All DiscoveredFilters found so far. Keyed by containerSelector for dedup. */
+  var __xb_discovered_filters = {};
+  /** True if a 'discovered_filters' push is pending (debounced). */
+  var __xb_scan_scheduled = false;
+  /** Track which DOM nodes we've already scanned (by identity, not selector). */
+  var __xb_scanned_nodes = (typeof WeakSet !== 'undefined') ? new WeakSet() : null;
+
+  /** Scan the page for filter/sort/tab/menu containers + their triggers.
+   * Dedup by DOM node identity (WeakSet) so the same element reached via
+   * different selectors is recorded once. Nested containers are skipped \u2014
+   * the outermost container wins. */
+  function __xb_scanFilters() {
+    try {
+      // First pass: collect all candidate container nodes (dedup by identity)
+      var candidates = [];
+      var seenNodes = new Set();  // fallback if WeakSet unavailable
+      for (var ci = 0; ci < FILTER_CONTAINER_SELECTORS.length; ci++) {
+        var containers;
+        try { containers = document.querySelectorAll(FILTER_CONTAINER_SELECTORS[ci]); } catch(e) { continue; }
+        for (var cj = 0; cj < containers.length; cj++) {
+          var c = containers[cj];
+          // Dedup by identity
+          if (__xb_scanned_nodes) {
+            if (__xb_scanned_nodes.has(c)) continue;
+          } else {
+            if (seenNodes.has(c)) continue;
+            seenNodes.add(c);
+          }
+          // Skip non-visible containers
+          if (!c.offsetParent && c.tagName.toLowerCase() !== 'body') continue;
+          // Skip if an ancestor is already a candidate (avoid nested dup)
+          var isNested = false;
+          for (var ck = 0; ck < candidates.length; ck++) {
+            if (candidates[ck].contains(c)) { isNested = true; break; }
+          }
+          if (isNested) continue;
+          // If this candidate contains existing ones, remove them
+          candidates = candidates.filter(function(p) { return !c.contains(p); });
+          candidates.push(c);
+        }
+      }
+
+      // Second pass: for each candidate, mark as scanned + extract triggers
+      for (var ck2 = 0; ck2 < candidates.length; ck2++) {
+        var c2 = candidates[ck2];
+        if (__xb_scanned_nodes) __xb_scanned_nodes.add(c2);
+
+        var containerSel = uniqueSelector(c2);
+        // If we already have this in discovered map (by selector), skip
+        if (__xb_discovered_filters[containerSel]) continue;
+
+        // Extract triggers: prefer leaf-ish elements with short text
+        var triggers = [];
+        var seenTrigSels = {};
+        // Use a single querySelectorAll with comma-joined selectors for speed
+        var allCandidates = c2.querySelectorAll(TRIGGER_SELECTORS.join(', '));
+        for (var ti = 0; ti < allCandidates.length; ti++) {
+          var el = allCandidates[ti];
+          if (!el.offsetParent) continue;
+          // Skip elements whose nearest ancestor in the container is also a
+          // candidate (would create nested triggers).
+          var skip = false;
+          var p = el.parentElement;
+          while (p && p !== c2) {
+            if (seenTrigSels[uniqueSelector(p)]) { skip = true; break; }
+            p = p.parentElement;
+          }
+          if (skip) continue;
+          var txt = (el.textContent || '').trim();
+          if (!txt || txt.length === 0 || txt.length > 40) continue;
+          // Skip if this looks like a full item card (long combined text)
+          if (el.children.length > 3) continue;
+          var sel = uniqueSelector(el);
+          if (seenTrigSels[sel]) continue;
+          seenTrigSels[sel] = true;
+          triggers.push(buildTrigger(el));
+          if (triggers.length >= 30) break;
+        }
+        if (triggers.length === 0) continue;
+
+        __xb_discovered_filters[containerSel] = {
+          containerSelector: containerSel,
+          category: categorizeElement(c2),
+          containerText: (c2.textContent || '').trim().substring(0, 60),
+          triggers: triggers,
+        };
+      }
+      // Third pass: dedup containers whose trigger set is a subset of another.
+      // This handles the case where two overlapping containers (e.g. outer
+      // ".filter-up-container" and inner ".filter-select-container") share
+      // triggers \u2014 keep the larger one, drop the redundant subset.
+      var newFilters = [];
+      var addedKeys = [];
+      for (var key in __xb_discovered_filters) {
+        var f = __xb_discovered_filters[key];
+        var isSubset = false;
+        for (var otherKey in __xb_discovered_filters) {
+          if (otherKey === key) continue;
+          var other = __xb_discovered_filters[otherKey];
+          if (f.triggers.length > other.triggers.length) continue;
+          // Check if every trigger in f is also in other (by selector)
+          var allInOther = true;
+          for (var ti2 = 0; ti2 < f.triggers.length; ti2++) {
+            var found = false;
+            for (var to2 = 0; to2 < other.triggers.length; to2++) {
+              if (other.triggers[to2].selector === f.triggers[ti2].selector) { found = true; break; }
+            }
+            if (!found) { allInOther = false; break; }
+          }
+          if (allInOther && f.triggers.length < other.triggers.length) {
+            isSubset = true;
+            break;
+          }
+          // Same size + same triggers \u2014 keep the one with a more "container-y" selector
+          if (allInOther && f.triggers.length === other.triggers.length && key > otherKey) {
+            isSubset = true;
+            break;
+          }
+        }
+        if (!isSubset) {
+          newFilters.push(f);
+          addedKeys.push(key);
+        }
+      }
+      // Rebuild the discovered map with deduped entries
+      __xb_discovered_filters = {};
+      for (var ni = 0; ni < newFilters.length; ni++) {
+        __xb_discovered_filters[addedKeys[ni]] = newFilters[ni];
+      }
+
+      // Push a discovered_filters action so the server picks it up.
+      __xb_pushDiscovered();
+    } catch(e) { /* scan failed, don't crash recorder */ }
+  }
+
+  /** Push current discovered_filters snapshot to pending actions (debounced). */
+  function __xb_pushDiscovered() {
+    if (__xb_scan_scheduled) return;
+    __xb_scan_scheduled = true;
+    setTimeout(function() {
+      __xb_scan_scheduled = false;
+      var list = Object.keys(__xb_discovered_filters).map(function(k) {
+        return __xb_discovered_filters[k];
+      });
+      window.__xb_pending_actions.push({
+        type: 'discovered_filters',
+        ts: Date.now(),
+        url: location.href,
+        title: document.title,
+        discoveredFilters: list,
+      });
+    }, 200);
+  }
+
+  /** Mark a trigger as user-interacted (called from click/hover handlers). */
+  function __xb_markTriggerInteracted(target) {
+    try {
+      var sel = uniqueSelector(target);
+      for (var k in __xb_discovered_filters) {
+        var f = __xb_discovered_filters[k];
+        for (var i = 0; i < f.triggers.length; i++) {
+          if (f.triggers[i].selector === sel) {
+            f.triggers[i].userInteracted = true;
+            // Schedule a push so server gets the updated state
+            __xb_pushDiscovered();
+            return;
+          }
+          // Also accept ancestor match (target may be a child of the trigger)
+          var triggerEl = document.querySelector(f.triggers[i].selector);
+          if (triggerEl && triggerEl.contains(target)) {
+            f.triggers[i].userInteracted = true;
+            __xb_pushDiscovered();
+            return;
+          }
+        }
+      }
+    } catch(e) {}
+  }
+
+  /** Expose scan + capture for server-side triggers (post-navigation, flush-time). */
+  window.__xb_scanFilters = __xb_scanFilters;
+  window.__xb_capture_discovered_filters = function() {
+    return Object.keys(__xb_discovered_filters).map(function(k) {
+      return __xb_discovered_filters[k];
+    });
+  };
+
+  /** Find the nearest trigger element for a popup (looking up the DOM). */
+  function findTriggerForPopup(popupEl) {
+    try {
+      // Walk up looking for known container types, then pick the trigger
+      // nearest to the popup's top.
+      var popupRect = popupEl.getBoundingClientRect();
+      var ancestor = popupEl;
+      for (var depth = 0; depth < 8 && ancestor; depth++) {
+        ancestor = ancestor.parentElement;
+        if (!ancestor) break;
+        var triggersInAncestor = ancestor.querySelectorAll(
+          '[role="tab"], [role="menuitem"], [role="option"], [role="button"], button, a, [class*="title"]'
+        );
+        // Pick the trigger whose x-center is closest to the popup's x-center
+        // and is above the popup.
+        var best = null, bestDist = Infinity;
+        for (var i = 0; i < triggersInAncestor.length; i++) {
+          var t = triggersInAncestor[i];
+          if (!t.offsetParent) continue;
+          var r = t.getBoundingClientRect();
+          if (r.y + r.height > popupRect.y + 5) continue;  // must be above popup
+          var dist = Math.abs((r.x + r.width / 2) - (popupRect.x + popupRect.width / 2));
+          if (dist < bestDist) {
+            bestDist = dist;
+            best = t;
+          }
+        }
+        if (best) {
+          // Mark the trigger as hasPopup in our discovered map
+          var bestSel = uniqueSelector(best);
+          for (var k in __xb_discovered_filters) {
+            var f = __xb_discovered_filters[k];
+            for (var j = 0; j < f.triggers.length; j++) {
+              if (f.triggers[j].selector === bestSel) {
+                f.triggers[j].hasPopup = true;
+              }
+            }
+          }
+          return {
+            selector: bestSel,
+            text: (best.textContent || '').trim().substring(0, 40),
+          };
+        }
+      }
+    } catch(e) {}
+    return undefined;
+  }
+
+  /** Extract popup items (reuses the same item-extraction logic as captureVisibleContext). */
+  function extractPopupItems(popupEl) {
+    var items = [];
+    try {
+      var children = popupEl.querySelectorAll(
+        'a,button,[role="menuitem"],[role="option"],[role="treeitem"],li,div[class*="item"],span[class*="item"]'
+      );
+      for (var k = 0; k < Math.min(children.length, 20); k++) {
+        var child = children[k];
+        var childText = (child.textContent || '').trim();
+        if (!childText || childText.length > 60) continue;
+        var info = { text: childText.substring(0, 60) };
+        if (child.disabled) info.disabled = true;
+        try { info.selector = uniqueSelector(child); } catch(e) {}
+        items.push(info);
+      }
+    } catch(e) {}
+    return items;
+  }
+
+  /** Check whether an element is currently visible (has layout box). */
+  function isVisibleEl(el) {
+    try {
+      var r = el.getBoundingClientRect();
+      if (r.width === 0 || r.height === 0) return false;
+      var cs = window.getComputedStyle(el);
+      if (cs.display === 'none' || cs.visibility === 'hidden' || cs.opacity === '0') return false;
+      return true;
+    } catch(e) { return false; }
+  }
+
+  /** Push a 'popup_appear' sensing action. */
+  function __xb_pushPopupAppear(popupEl, cause) {
+    try {
+      if (!popupEl || !isVisibleEl(popupEl)) return;
+      var r = popupEl.getBoundingClientRect();
+      // Heuristic: a real popup/menu should be relatively small (not a full
+      // page banner) and have menu-like children. Page banners / hero sections
+      // often match [class*="popup"] / [class*="modal"] but aren't real menus.
+      var MAX_POPUP_AREA = 600 * 600;  // 360,000 px\xB2
+      if (r.width * r.height > MAX_POPUP_AREA) return;
+      // Must have at least 1 child that looks like an item (link/button/li/div with class*="item")
+      var itemChildren = popupEl.querySelectorAll(
+        'a, button, [role="menuitem"], [role="option"], li, [class*="item"]'
+      );
+      if (itemChildren.length === 0) return;
+      // Dedup against recent popup_appear actions (same selector within 3s)
+      var popupSel = uniqueSelector(popupEl);
+      var now = Date.now();
+      var recent = window.__xb_pending_actions.filter(function(a) {
+        return a.type === 'popup_appear' && (now - a.ts) < 3000;
+      });
+      for (var i = 0; i < recent.length; i++) {
+        if (recent[i].popupAppear && recent[i].popupAppear.popup.selector === popupSel) return;
+      }
+
+      var triggerInfo = findTriggerForPopup(popupEl);
+      window.__xb_pending_actions.push({
+        type: 'popup_appear',
+        ts: now,
+        url: location.href,
+        title: document.title,
+        popupAppear: {
+          trigger: triggerInfo,
+          popup: {
+            selector: popupSel,
+            text: (popupEl.textContent || '').trim().substring(0, 100),
+            rect: {
+              x: Math.round(r.x), y: Math.round(r.y),
+              w: Math.round(r.width), h: Math.round(r.height),
+            },
+            items: extractPopupItems(popupEl),
+          },
+          cause: cause || 'auto',
+          userTriggered: cause === 'user-hover' || cause === 'user-click',
+        },
+      });
+      // Also schedule a discovered_filters push (hasPopup flags may have updated)
+      __xb_pushDiscovered();
+    } catch(e) {}
+  }
+
+  // Expose for the hover handler to call when it observes a popup (avoid double-record)
+  window.__xb_pushPopupAppear = __xb_pushPopupAppear;
+
+  // \u2500\u2500 Layer 2: long-lived MutationObserver for popover visible transitions \u2500\u2500
+  var __xb_long_observer = null;
+  var __xb_observer_debounce = null;
+  // Set of selectors we've already recorded as popups (avoid re-pushing)
+  var __xb_seen_popups = {};
+
+  function __xb_startLongObserver() {
+    if (!('MutationObserver' in window)) return;
+    if (__xb_long_observer) __xb_long_observer.disconnect();
+
+    __xb_long_observer = new MutationObserver(function(mutations) {
+      // Debounce \u2014 collect then process once
+      if (__xb_observer_debounce) clearTimeout(__xb_observer_debounce);
+      __xb_observer_debounce = setTimeout(function() {
+        __xb_observer_debounce = null;
+        // Scan all known popover containers; any newly visible one \u2192 push
+        for (var i = 0; i < POPOVER_SELECTORS.length; i++) {
+          var els;
+          try { els = document.querySelectorAll(POPOVER_SELECTORS[i]); } catch(e) { continue; }
+          for (var j = 0; j < els.length; j++) {
+            var el = els[j];
+            var sel = uniqueSelector(el);
+            if (__xb_seen_popups[sel]) continue;
+            if (!isVisibleEl(el)) continue;
+            __xb_seen_popups[sel] = Date.now();
+            __xb_pushPopupAppear(el, 'auto');
+          }
+        }
+      }, 100);
+    });
+    try {
+      __xb_long_observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['class', 'style', 'hidden'],
+      });
+    } catch(e) {}
+  }
+
+  // Auto-cleanup seen_popups every 10s so transient popups can re-trigger
+  setInterval(function() {
+    var now = Date.now();
+    for (var k in __xb_seen_popups) {
+      if (now - __xb_seen_popups[k] > 10000) delete __xb_seen_popups[k];
+    }
+  }, 10000);
+
+  // \u2500\u2500 Layer 3: mousemove throttled diff (senses triggers near cursor) \u2500\u2500
+  var __xb_last_scan_move = 0;
+  var __xb_move_stop_timer = null;
+  var __xb_last_pos = { x: 0, y: 0 };
+
+  document.addEventListener('mousemove', function(e) {
+    __xb_last_pos = { x: e.clientX, y: e.clientY };
+    var now = Date.now();
+    if (now - __xb_last_scan_move < 300) return;
+    __xb_last_scan_move = now;
+
+    // Reset the "stop" timer \u2014 when mouse stops moving for 800ms, we scan
+    if (__xb_move_stop_timer) clearTimeout(__xb_move_stop_timer);
+    __xb_move_stop_timer = setTimeout(function() {
+      __xb_move_stop_timer = null;
+      __xb_scanNearCursor(__xb_last_pos.x, __xb_last_pos.y, 'user-hover');
+    }, 800);
+  }, true);
+
+  /** Scan popups near the cursor; mark nearby triggers as explored. */
+  function __xb_scanNearCursor(cx, cy, cause) {
+    try {
+      // 1. Check for any visible popover near cursor
+      for (var i = 0; i < POPOVER_SELECTORS.length; i++) {
+        var els;
+        try { els = document.querySelectorAll(POPOVER_SELECTORS[i]); } catch(e) { continue; }
+        for (var j = 0; j < els.length; j++) {
+          var el = els[j];
+          if (!isVisibleEl(el)) continue;
+          var r = el.getBoundingClientRect();
+          // Near = within 400px of cursor
+          if (Math.abs((r.x + r.width / 2) - cx) > 400) continue;
+          if (Math.abs((r.y + r.height / 2) - cy) > 400) continue;
+          var sel = uniqueSelector(el);
+          var now = Date.now();
+          if (__xb_seen_popups[sel] && now - __xb_seen_popups[sel] < 2000) continue;
+          __xb_seen_popups[sel] = now;
+          __xb_pushPopupAppear(el, cause);
+        }
+      }
+
+      // 2. Mark nearby triggers as explored (mouse lingered without click)
+      var near = document.elementsFromPoint(cx, cy);
+      for (var k = 0; k < near.length && k < 5; k++) {
+        var t = near[k];
+        var tSel = uniqueSelector(t);
+        for (var fk in __xb_discovered_filters) {
+          var f = __xb_discovered_filters[fk];
+          for (var ti = 0; ti < f.triggers.length; ti++) {
+            if (f.triggers[ti].selector === tSel) {
+              f.triggers[ti].explored = true;
+            }
+          }
+        }
+      }
+      __xb_pushDiscovered();
+    } catch(e) {}
+  }
+
+  // \u2500\u2500 Trigger initial baseline scan (after DOM is ready) \u2500\u2500
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setTimeout(__xb_scanFilters, 500);
+    setTimeout(__xb_startLongObserver, 800);
+  } else {
+    window.addEventListener('DOMContentLoaded', function() {
+      setTimeout(__xb_scanFilters, 500);
+      setTimeout(__xb_startLongObserver, 800);
+    });
+  }
 })();
 `;
 var CHECKPOINT_OVERLAY_SCRIPT = `
@@ -1254,6 +1950,9 @@ var SessionRecorder = class _SessionRecorder {
   network = [];
   contextChanges = [];
   checkpoints = [];
+  /** Proactive baseline scan of filter/sort/tab/menu regions. Keyed by
+   * containerSelector so re-scans after navigation replace rather than dup. */
+  discoveredFilters = /* @__PURE__ */ new Map();
   actionCounter = 0;
   networkCounter = 0;
   contextCounter = 0;
@@ -1274,6 +1973,9 @@ var SessionRecorder = class _SessionRecorder {
   _lastRequestTs = 0;
   _isRecording = false;
   streamMode = "clean";
+  /** Snapshot throttle: prevents too many screenshots during rapid inputs.
+   *  Keyed by 'type|elementSelector', value = last snapshot timestamp. */
+  snapshotThrottle = /* @__PURE__ */ new Map();
   /** Ambient action types: filtered out in clean mode */
   static AMBIENT_TYPES = /* @__PURE__ */ new Set([
     "hover",
@@ -1323,6 +2025,8 @@ var SessionRecorder = class _SessionRecorder {
       type: action.type,
       element: actionToPush.element
     });
+    await this.captureAutoSnapshot(this.page, actionToPush, "after").catch(() => {
+    });
     this.lastActionTs = ts;
     this.dedupMap.set(dedupFromAction, Date.now() + 2e3);
     this.dedupActionCount++;
@@ -1369,6 +2073,10 @@ var SessionRecorder = class _SessionRecorder {
   get recordingsDir() {
     return _SessionRecorder.getRecordingsDir(this.sessionName);
   }
+  /** Directory for auto-captured snapshots (PNG screenshots, stored in .tmp for easy cleanup). */
+  get snapshotsDir() {
+    return join(this.recordingsDir, ".tmp", "snapshots");
+  }
   static getRecordingsDir(sessionName) {
     return join(homedir(), ".xbrowser", "sessions", sessionName, "recordings");
   }
@@ -1560,9 +2268,18 @@ var SessionRecorder = class _SessionRecorder {
     }
   }
   // ==================== Private ====================
+  /** Whether the initial action-signal script injection succeeded. Check this
+   * after start() returns — if false, user actions will NOT be recorded and
+   * the caller should surface a clear error to the user instead of silently
+   * pretending recording is working. */
+  _injectionFailed = false;
+  get injectionFailed() {
+    return this._injectionFailed;
+  }
   async injectActionScript(page) {
     let success = false;
     const maxAttempts = 3;
+    let lastError = "";
     for (let attempt = 1; attempt <= maxAttempts; attempt++) {
       try {
         await page.evaluate(getSelectorGeneratorScript());
@@ -1575,17 +2292,20 @@ var SessionRecorder = class _SessionRecorder {
           success = true;
           break;
         }
+        lastError = "verification failed (script did not set __xb_action_signal flag)";
         console.error(`[recorder] Action signal injection verification failed (attempt ${attempt}/${maxAttempts})`);
       } catch (e) {
-        const msg = e instanceof Error ? e.message : String(e);
-        console.error(`[recorder] Action signal injection error (attempt ${attempt}/${maxAttempts}): ${msg}`);
+        const err = e instanceof Error ? e : new Error(typeof e === "string" ? e : "unknown error");
+        lastError = err.message;
+        console.error(`[recorder] Action signal injection error (attempt ${attempt}/${maxAttempts}): ${err.message}`);
       }
       if (attempt < maxAttempts) {
         await new Promise((r) => setTimeout(r, 1e3));
       }
     }
     if (!success) {
-      console.error(`[recorder] WARNING: Action signal injection FAILED after ${maxAttempts} attempts. User actions will NOT be recorded. Check that the page supports Runtime.evaluate.`);
+      this._injectionFailed = true;
+      console.error(`[recorder] WARNING: Action signal injection FAILED after ${maxAttempts} attempts. User actions will NOT be recorded. Last error: ${lastError}`);
     }
     try {
       await page.evaluate(CHECKPOINT_OVERLAY_SCRIPT);
@@ -1593,6 +2313,16 @@ var SessionRecorder = class _SessionRecorder {
       const msg = e instanceof Error ? e.message : String(e);
       console.error(`[recorder] Checkpoint overlay injection failed (non-fatal): ${msg}`);
     }
+    if (success) {
+      try {
+        await page.evaluate(`(function() {
+          if (typeof window.__xb_scanFilters === 'function') {
+            setTimeout(window.__xb_scanFilters, 100);
+          }
+        })()`);
+      } catch {
+      }
+    }
     try {
       await page.evaluate(`
         (function() {
@@ -1744,9 +2474,9 @@ var SessionRecorder = class _SessionRecorder {
             return;
           }
         } catch (e) {
-          const msg = e instanceof Error ? e.message : String(e);
+          const err = e instanceof Error ? e : new Error(typeof e === "string" ? e : "unknown error");
           if (attempt < 4) {
-            console.error(`[recorder] injectActionScript retry ${attempt + 1}/5 failed: ${msg}`);
+            console.error(`[recorder] injectActionScript retry ${attempt + 1}/5 failed: ${err.message}`);
           }
         }
         await new Promise((r) => setTimeout(r, 1e3));
@@ -1768,8 +2498,8 @@ var SessionRecorder = class _SessionRecorder {
         try {
           await this.injectActionScript(page);
         } catch (e) {
-          const msg = e instanceof Error ? e.message : String(e);
-          console.error(`[recorder] injectActionScript after navigation failed: ${msg}`);
+          const err = e instanceof Error ? e : new Error(typeof e === "string" ? e : "unknown error");
+          console.error(`[recorder] injectActionScript after navigation failed: ${err.message}`);
         }
       }
     });
@@ -1890,6 +2620,14 @@ var SessionRecorder = class _SessionRecorder {
     try {
       pending = await page.evaluate(`(function() {
         var w = window;
+        // Flush-time sweep: if there is a hover action still being enriched
+        // by async samplers, force one last capture so its hoverContext lands
+        // before the action is drained from the pending queue.
+        try {
+          if (typeof w.__xb_capture_hover_popups === 'function') {
+            w.__xb_capture_hover_popups();
+          }
+        } catch(e) {}
         var actions = w.__xb_pending_actions || [];
         w.__xb_pending_actions = [];
 
@@ -1954,11 +2692,58 @@ var SessionRecorder = class _SessionRecorder {
           });
         }
         this.lastKnownUrl = currentUrl;
+        try {
+          page.evaluate(`(function() {
+            if (typeof window.__xb_scanFilters === 'function') {
+              setTimeout(window.__xb_scanFilters, 500);
+            }
+          })()`).catch(() => {
+          });
+        } catch {
+        }
       }
     } catch {
     }
     for (const raw of pending) {
       if (raw.ts <= this.lastActionTs) continue;
+      if (raw.type === "discovered_filters") {
+        if (Array.isArray(raw.discoveredFilters)) {
+          for (const f of raw.discoveredFilters) {
+            if (f && f.containerSelector) {
+              const existing = this.discoveredFilters.get(f.containerSelector);
+              if (existing) {
+                for (const newT of f.triggers) {
+                  const oldT = existing.triggers.find((t) => t.selector === newT.selector);
+                  if (oldT) {
+                    newT.userInteracted = newT.userInteracted || oldT.userInteracted;
+                    newT.explored = newT.explored || oldT.explored;
+                    newT.hasPopup = newT.hasPopup || oldT.hasPopup;
+                  }
+                }
+              }
+              this.discoveredFilters.set(f.containerSelector, f);
+            }
+          }
+        }
+        continue;
+      }
+      if (raw.type === "popup_appear") {
+        if (!raw.popupAppear?.userTriggered) continue;
+        this.actionCounter++;
+        const pushed2 = {
+          id: this.actionCounter,
+          type: "popup_appear",
+          timestamp: raw.ts,
+          url: raw.url || page.url(),
+          pageTitle: raw.title || "",
+          popupAppear: raw.popupAppear
+        };
+        this.actions.push(pushed2);
+        await this.captureAutoSnapshot(page, pushed2, "after").catch(() => {
+        });
+        this.lastActionTs = raw.ts;
+        continue;
+      }
       const dedupFromSignal = this.dedupKey(raw.type, raw.element?.selector, raw.element?.tag, raw.value);
       if (dedupFromSignal) {
         const expires = this.dedupMap.get(dedupFromSignal);
@@ -1967,7 +2752,19 @@ var SessionRecorder = class _SessionRecorder {
         }
       }
       if (this.streamMode === "clean" && _SessionRecorder.AMBIENT_TYPES.has(raw.type)) {
-        continue;
+        if (raw.type === "hover") {
+          const hc = raw.hoverContext;
+          if (!hc || hc.appeared.length === 0) continue;
+          const hasSubstantialPopup = hc.appeared.some((p) => p.items && p.items.length > 0);
+          if (!hasSubstantialPopup) continue;
+        } else if (raw.type === "scroll") {
+          const dx = raw.scrollX || 0;
+          const dy = raw.scrollY || 0;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 50) continue;
+        } else {
+          continue;
+        }
       }
       this.actionCounter++;
       let clickContext;
@@ -1988,10 +2785,17 @@ var SessionRecorder = class _SessionRecorder {
         scrollX: raw.scrollX,
         scrollY: raw.scrollY,
         clickContext,
+        // Browser-side hover enrichment writes hoverContext onto the pending
+        // action asynchronously (200/500/1000ms after mouseover). Flush may
+        // run before the last sample lands — passthrough keeps whatever has
+        // been collected so far.
+        hoverContext: raw.hoverContext,
         files: raw.files
       });
       const pushed = this.actions[this.actions.length - 1];
       pushed.elementScreenshot = await this.captureElementScreenshot(page, raw);
+      await this.captureAutoSnapshot(page, pushed, "after").catch(() => {
+      });
       this.lastActionTs = raw.ts;
       const dedupKey = this.dedupKey(raw.type, raw.element?.selector, raw.element?.tag, raw.value);
       if (dedupKey) {
@@ -2020,21 +2824,120 @@ var SessionRecorder = class _SessionRecorder {
    * selector or the screenshot fails (non-critical — never blocks recording).
    *
    * Only captures for: click, input, change, dblclick, and their CDP counterparts.
+   *
+   * Retry strategy (3 attempts, 3s each):
+   *   1. element screenshot via locator
+   *   2. retry element screenshot (element may have been animating/detached)
+   *   3. fallback to viewport screenshot (so we always get *something*)
    */
   async captureElementScreenshot(page, action) {
     const keyTypes = ["click", "input", "change", "dblclick", "cdp-click", "cdp-fill", "filechooser"];
     if (!keyTypes.includes(action.type)) return;
     if (!action.element?.selector) return;
+    const selector = action.element.selector;
+    try {
+      const buffer = await page.locator(selector).first().screenshot({
+        type: "png",
+        timeout: 3e3
+      });
+      return buffer.toString("base64");
+    } catch {
+    }
     try {
-      const buffer = await page.locator(action.element.selector).first().screenshot({
+      await page.waitForSelector(selector, { state: "visible", timeout: 2e3 });
+      const buffer = await page.locator(selector).first().screenshot({
         type: "png",
-        timeout: 2e3
+        timeout: 3e3
       });
       return buffer.toString("base64");
+    } catch {
+    }
+    try {
+      const buffer = await page.screenshot({ type: "png", timeout: 3e3 });
+      return buffer.toString("base64");
     } catch {
       return;
     }
   }
+  /**
+   * Action types that trigger auto-snapshot capture.
+   * Hover is excluded — it's too noisy and rarely changes the page visually.
+   * Popup_appear captures the popup state (after only).
+   */
+  static SNAPSHOT_TYPES = /* @__PURE__ */ new Set([
+    "click",
+    "dblclick",
+    "navigation",
+    "goto",
+    "submit",
+    "cdp-click",
+    "cdp-fill",
+    "input",
+    "change",
+    "filechooser",
+    "popup_appear"
+  ]);
+  /**
+   * Throttle key for snapshot capture to avoid too many during rapid inputs.
+   * Returns true if this action should be throttled (skip snapshot).
+   */
+  isSnapshotThrottled(type, selector) {
+    if (type === "input" || type === "change" || type === "cdp-fill") {
+      const key = `${type}|${selector || ""}`;
+      const last = this.snapshotThrottle.get(key);
+      const now = Date.now();
+      if (last && now - last < 2e3) return true;
+      this.snapshotThrottle.set(key, now);
+    }
+    return false;
+  }
+  /**
+   * Capture a viewport screenshot + compact accessibility tree for a key action.
+   * - PNG stored in .tmp/snapshots/ (temporary, easy to clean up)
+   * - aria tree stored inline as compact text on the action (searchable via grep)
+   *
+   * Non-blocking (errors silently caught). Throttled for rapid inputs.
+   */
+  async captureAutoSnapshot(page, action, suffix = "after") {
+    if (!_SessionRecorder.SNAPSHOT_TYPES.has(action.type)) return;
+    if (this.isSnapshotThrottled(action.type, action.element?.selector)) return;
+    const snapDir = this.snapshotsDir;
+    mkdirSync(snapDir, { recursive: true });
+    const stepId = String(action.id).padStart(3, "0");
+    const snapshot = {};
+    try {
+      const pngPath = join(snapDir, `step-${stepId}-${suffix}.png`);
+      const buffer = await page.screenshot({ type: "png", timeout: 5e3 });
+      writeFileSync(pngPath, buffer);
+      snapshot.png = `.tmp/snapshots/step-${stepId}-${suffix}.png`;
+    } catch {
+    }
+    try {
+      snapshot.aria = await page.evaluate(`
+        (function() {
+          try {
+            var parts = [];
+            var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false);
+            var node;
+            while (node = walker.nextNode()) {
+              var tag = node.tagName.toLowerCase();
+              var role = node.getAttribute('role') || '';
+              var text = (node.textContent || '').trim().substring(0, 60);
+              var ariaLabel = node.getAttribute('aria-label') || '';
+              if (role || tag === 'button' || tag === 'a' || tag === 'input' || tag === 'select' || tag === 'textarea') {
+                parts.push((role || tag) + ': ' + (ariaLabel || text).substring(0, 40));
+              }
+            }
+            return parts.slice(0, 100).join(' | ');
+          } catch(e) { return ''; }
+        })()
+      `);
+    } catch {
+    }
+    if (snapshot.png || snapshot.aria) {
+      action.snapshots = snapshot;
+    }
+  }
   /**
    * After a click, wait 300ms then scan for popover/dropdown/menu elements
    * near the click position. This runs server-side to avoid race conditions
@@ -2234,12 +3137,18 @@ var SessionRecorder = class _SessionRecorder {
         JSON.stringify(data, null, 2),
         "utf-8"
       );
+      const jsonlPath = join(this.recordingsDir, "recording.jsonl");
+      const lines = data.actions.map((a) => JSON.stringify(a)).join("\n") + "\n";
+      writeFileSync(jsonlPath, lines, "utf-8");
     } catch {
     }
   }
   writeFinalOutput(data, summary) {
     mkdirSync(this.recordingsDir, { recursive: true });
     writeFileSync(join(this.recordingsDir, "recording.json"), JSON.stringify(data, null, 2), "utf-8");
+    const jsonlPath = join(this.recordingsDir, "recording.jsonl");
+    const lines = data.actions.map((a) => JSON.stringify(a)).join("\n") + "\n";
+    writeFileSync(jsonlPath, lines, "utf-8");
     writeFileSync(join(this.recordingsDir, "summary.json"), JSON.stringify(summary, null, 2), "utf-8");
     writeFileSync(join(this.recordingsDir, "summary.md"), this.buildMarkdownSummary(data, summary), "utf-8");
   }
@@ -2251,7 +3160,8 @@ var SessionRecorder = class _SessionRecorder {
       actions: [...this.actions],
       network: [...this.network],
       contextChanges: [...this.contextChanges],
-      checkpoints: [...this.checkpoints]
+      checkpoints: [...this.checkpoints],
+      discoveredFilters: [...this.discoveredFilters.values()]
     };
   }
   // ─── Summary builder with ref compression + input→network matching ──