@veraxhq/verax 0.1.0 → 0.2.0

package/src/verax/observe/loading-sensor.js

@@ -0,0 +1,139 @@
+/**
+ * Loading State Sensor
+ * Detects and tracks loading indicators like spinners, aria-busy, and disabled buttons
+ * Deterministically detects unresolved loading states
+ */
+
+export class LoadingSensor {
+  constructor(options = {}) {
+    this.loadingTimeout = options.loadingTimeout || 5000; // 5s deterministic timeout
+  }
+
+  /**
+   * Start monitoring loading state and return a window ID
+   */
+  startWindow(page) {
+    const windowId = `loading_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+
+    const state = {
+      id: windowId,
+      loadingStartTime: null,
+      isCurrentlyLoading: false,
+      loadingIndicators: [],
+      resolveTime: null,
+      unresolved: false,
+      maxLoadingDuration: 0
+    };
+
+    // Monitor for loading indicators
+    const checkLoading = async () => {
+      try {
+        const indicators = await page.evaluate(() => {
+          const found = [];
+
+          // Check aria-busy
+          const ariaBusy = document.querySelectorAll('[aria-busy="true"]');
+          if (ariaBusy.length > 0) {
+            found.push({ type: 'aria-busy', count: ariaBusy.length });
+          }
+
+          // Check progress bars
+          const progressBars = document.querySelectorAll('[role="progressbar"]');
+          if (progressBars.length > 0) {
+            found.push({ type: 'progressbar', count: progressBars.length });
+          }
+
+          // Check spinners/loaders by class
+          const spinners = document.querySelectorAll(
+            '[class*="spin"], [class*="load"], [class*="progress"], [class*="skeleton"]'
+          );
+          if (spinners.length > 0) {
+            found.push({ type: 'spinner-class', count: spinners.length });
+          }
+
+          // Check disabled submit buttons (often indicates pending submission)
+          const disabledSubmits = document.querySelectorAll('button[type="submit"]:disabled');
+          if (disabledSubmits.length > 0) {
+            found.push({ type: 'disabled-submit', count: disabledSubmits.length });
+          }
+
+          return found;
+        });
+
+        const hasLoading = indicators.length > 0;
+
+        if (hasLoading && !state.isCurrentlyLoading) {
+          // Loading started
+          state.isCurrentlyLoading = true;
+          state.loadingStartTime = Date.now();
+          state.loadingIndicators = indicators;
+        } else if (!hasLoading && state.isCurrentlyLoading) {
+          // Loading resolved
+          state.isCurrentlyLoading = false;
+          state.resolveTime = Date.now();
+          state.maxLoadingDuration = state.resolveTime - state.loadingStartTime;
+        } else if (hasLoading && state.isCurrentlyLoading) {
+          // Still loading, update indicators
+          state.loadingIndicators = indicators;
+        }
+      } catch (e) {
+        // Silently ignore evaluation errors
+      }
+    };
+
+    // Set up interval to check loading state (every 100ms for deterministic detection)
+    const intervalId = setInterval(checkLoading, 100);
+
+    // Immediately check once
+    checkLoading();
+
+    // Store interval for cleanup
+    state._intervalId = intervalId;
+    state._checkLoading = checkLoading;
+
+    return { windowId, state };
+  }
+
+  /**
+   * Stop monitoring and get the loading state summary
+   */
+  async stopWindow(windowId, state) {
+    if (!state || !state._intervalId) {
+      return {
+        id: windowId,
+        loadingIndicators: [],
+        isLoading: false,
+        unresolved: false,
+        duration: 0,
+        timeout: false,
+        hasLoadingIndicators: false
+      };
+    }
+
+    clearInterval(state._intervalId);
+
+    // Final check
+    if (state._checkLoading) {
+      await state._checkLoading();
+    }
+
+    // Determine if loading is unresolved (exceeded timeout)
+    const isStillLoading = state.isCurrentlyLoading === true;
+    const now = Date.now();
+    const loadingDuration = state.loadingStartTime ? (now - state.loadingStartTime) : 0;
+    const exceededTimeout = state.loadingStartTime && (now - state.loadingStartTime) > this.loadingTimeout;
+    const unresolved = isStillLoading && exceededTimeout;
+    const timeout = exceededTimeout;
+
+    return {
+      id: state.id,
+      loadingIndicators: state.loadingIndicators || [],
+      isLoading: state.isCurrentlyLoading,
+      unresolved: unresolved,
+      duration: state.resolveTime ? state.maxLoadingDuration : loadingDuration,
+      timeout: timeout,
+      resolveTime: state.resolveTime,
+      hasLoadingIndicators: (state.loadingIndicators && state.loadingIndicators.length > 0) || isStillLoading
+    };
+  }
+}

package/src/verax/observe/navigation-sensor.js

@@ -0,0 +1,255 @@
+/**
+ * NAVIGATION INTELLIGENCE v2 — Navigation Sensor
+ * 
+ * Captures navigation state changes per interaction:
+ * - URL changes (beforeUrl → afterUrl)
+ * - History API state (length, pushState, replaceState)
+ * - SPA Router events (Next.js, React Router)
+ * - Blocked navigation signals (preventDefault, guards)
+ * 
+ * Provides runtime evidence for navigation failure detection.
+ */
+
+export class NavigationSensor {
+  constructor() {
+    this.windows = new Map();
+    this.nextWindowId = 0;
+  }
+
+  /**
+   * Start a navigation observation window.
+   * 
+   * @param {Object} page - Playwright page
+   * @returns {number} - Window ID
+   */
+  startWindow(page) {
+    const windowId = this.nextWindowId++;
+    
+    const state = {
+      windowId,
+      beforeUrl: null,
+      afterUrl: null,
+      beforeHistoryLength: null,
+      afterHistoryLength: null,
+      historyChanges: [],
+      routerEvents: [],
+      blockedNavigations: [],
+      started: Date.now()
+    };
+    
+    this.windows.set(windowId, state);
+    
+    // Capture initial state immediately
+    this._captureBeforeState(page, state);
+    
+    // Set up listeners for navigation events
+    this._attachListeners(page, state);
+    
+    return windowId;
+  }
+
+  /**
+   * Capture before-state synchronously.
+   * 
+   * @param {Object} page - Playwright page
+   * @param {Object} state - Window state
+   */
+  async _captureBeforeState(page, state) {
+    try {
+      state.beforeUrl = page.url();
+      state.beforeHistoryLength = await page.evaluate(() => window.history.length).catch(() => null);
+    } catch (e) {
+      // Ignore errors during capture
+    }
+  }
+
+  /**
+   * Attach navigation listeners.
+   * 
+   * @param {Object} page - Playwright page
+   * @param {Object} state - Window state
+   */
+  _attachListeners(page, state) {
+    // Listen for history API calls
+    page.on('console', (msg) => {
+      const text = msg.text();
+      
+      // Custom markers from injected tracking script
+      if (text.startsWith('[NAV]')) {
+        try {
+          const data = JSON.parse(text.substring(5));
+          if (data.type === 'history') {
+            state.historyChanges.push({
+              method: data.method,
+              url: data.url,
+              timestamp: Date.now()
+            });
+          } else if (data.type === 'router') {
+            state.routerEvents.push({
+              event: data.event,
+              url: data.url,
+              timestamp: Date.now()
+            });
+          } else if (data.type === 'blocked') {
+            state.blockedNavigations.push({
+              reason: data.reason,
+              url: data.url,
+              timestamp: Date.now()
+            });
+          }
+        } catch (e) {
+          // Invalid JSON, ignore
+        }
+      }
+    });
+  }
+
+  /**
+   * Stop a navigation observation window.
+   * 
+   * @param {number} windowId - Window ID
+   * @param {Object} page - Playwright page
+   * @returns {Object} - Navigation summary
+   */
+  async stopWindow(windowId, page) {
+    const state = this.windows.get(windowId);
+    
+    if (!state) {
+      return this._emptyNavigationSummary(windowId);
+    }
+    
+    // Capture after state
+    try {
+      state.afterUrl = page.url();
+      state.afterHistoryLength = await page.evaluate(() => window.history.length).catch(() => null);
+    } catch (e) {
+      state.afterUrl = state.beforeUrl;
+      state.afterHistoryLength = state.beforeHistoryLength;
+    }
+    
+    const duration = Date.now() - state.started;
+    
+    // Compute deltas
+    const urlChanged = state.beforeUrl !== state.afterUrl;
+    const historyLengthDelta = (state.afterHistoryLength !== null && state.beforeHistoryLength !== null)
+      ? state.afterHistoryLength - state.beforeHistoryLength
+      : null;
+    
+    const summary = {
+      windowId,
+      beforeUrl: state.beforeUrl,
+      afterUrl: state.afterUrl,
+      urlChanged,
+      beforeHistoryLength: state.beforeHistoryLength,
+      afterHistoryLength: state.afterHistoryLength,
+      historyLengthDelta,
+      historyChanges: state.historyChanges,
+      routerEvents: state.routerEvents,
+      blockedNavigations: state.blockedNavigations,
+      hasNavigationActivity: urlChanged || historyLengthDelta !== 0 || state.historyChanges.length > 0,
+      duration
+    };
+    
+    this.windows.delete(windowId);
+    return summary;
+  }
+
+  /**
+   * Return empty summary for invalid window ID.
+   * 
+   * @param {number} windowId - Window ID
+   * @returns {Object} - Empty summary
+   */
+  _emptyNavigationSummary(windowId) {
+    return {
+      windowId,
+      beforeUrl: null,
+      afterUrl: null,
+      urlChanged: false,
+      beforeHistoryLength: null,
+      afterHistoryLength: null,
+      historyLengthDelta: null,
+      historyChanges: [],
+      routerEvents: [],
+      blockedNavigations: [],
+      hasNavigationActivity: false,
+      duration: 0
+    };
+  }
+
+  /**
+   * Inject navigation tracking script into page.
+   * Call this before interaction to capture history/router events.
+   * 
+   * @param {Object} page - Playwright page
+   */
+  async injectTrackingScript(page) {
+    try {
+      await page.evaluate(() => {
+        // Skip if already injected
+        if (window.__veraxNavTracking) return;
+        window.__veraxNavTracking = true;
+        
+        // Intercept history API
+        const originalPushState = window.history.pushState;
+        const originalReplaceState = window.history.replaceState;
+        
+        window.history.pushState = function(...args) {
+          console.log('[NAV]' + JSON.stringify({
+            type: 'history',
+            method: 'pushState',
+            url: args[2] || window.location.href
+          }));
+          return originalPushState.apply(this, args);
+        };
+        
+        window.history.replaceState = function(...args) {
+          console.log('[NAV]' + JSON.stringify({
+            type: 'history',
+            method: 'replaceState',
+            url: args[2] || window.location.href
+          }));
+          return originalReplaceState.apply(this, args);
+        };
+        
+        // Listen for popstate (back/forward)
+        window.addEventListener('popstate', () => {
+          console.log('[NAV]' + JSON.stringify({
+            type: 'history',
+            method: 'popstate',
+            url: window.location.href
+          }));
+        });
+        
+        // Next.js Router events
+        if (window.next?.router) {
+          window.next.router.events.on('routeChangeStart', (url) => {
+            console.log('[NAV]' + JSON.stringify({
+              type: 'router',
+              event: 'routeChangeStart',
+              url
+            }));
+          });
+          
+          window.next.router.events.on('routeChangeComplete', (url) => {
+            console.log('[NAV]' + JSON.stringify({
+              type: 'router',
+              event: 'routeChangeComplete',
+              url
+            }));
+          });
+          
+          window.next.router.events.on('routeChangeError', (err, url) => {
+            console.log('[NAV]' + JSON.stringify({
+              type: 'blocked',
+              reason: 'routeChangeError',
+              url
+            }));
+          });
+        }
+      });
+    } catch (e) {
+      // Ignore injection errors (page might not be ready)
+    }
+  }
+}

package/src/verax/observe/network-sensor.js

@@ -24,7 +24,8 @@ export class NetworkSensor {
       failedRequests: [],
       failedByStatus: {}, // status code -> count
       unfinishedRequests: new Set(), // urls still pending
-      lastErrors: []
+      lastErrors: [],
+      requestOrder: []
     };
 
     // Track all requests
@@ -40,8 +41,10 @@ export class NetworkSensor {
           status: null,
           failed: false,
           duration: 0,
-          count: 0
+          count: 0,
+          completed: false
         });
+        state.requestOrder.push(url);
       }
 
       const reqData = state.requests.get(url);
@@ -58,11 +61,15 @@ export class NetworkSensor {
         reqData.endTime = Date.now();
         reqData.status = status;
         reqData.duration = reqData.endTime - reqData.startTime;
+        reqData.completed = true;
 
         if (status >= 400) {
           reqData.failed = true;
           state.failedRequests.push({ url, status, duration: reqData.duration });
           state.failedByStatus[status] = (state.failedByStatus[status] || 0) + 1;
+        } else if (status >= 200 && status < 300) {
+          // Track successful 2xx responses explicitly
+          reqData.successful = true;
         }
       }
 
@@ -77,9 +84,20 @@ export class NetworkSensor {
         reqData.endTime = Date.now();
         reqData.duration = reqData.endTime - reqData.startTime;
         reqData.failed = true;
+      } else {
+        state.requests.set(url, {
+          url: url,
+          startTime: Date.now(),
+          endTime: Date.now(),
+          status: null,
+          failed: true,
+          duration: 0,
+          count: 1
+        });
       }
 
       state.failedRequests.push({ url, status: 'FAILED', duration: 0 });
+      state.failedByStatus['FAILED'] = (state.failedByStatus['FAILED'] || 0) + 1;
       state.unfinishedRequests.delete(url);
     };
 
@@ -111,10 +129,31 @@ export class NetworkSensor {
     const endTime = Date.now();
     const duration = endTime - state.startTime;
 
-    // Find slow requests
+    // Count failed requests: requests that had 4xx/5xx status or failed completely
+    // Note: incomplete requests are NOT counted as failed - they might just be slow
+    const failedCount = Array.from(state.requests.values()).filter(
+      (r) => r.failed === true
+    ).length;
+
+    // Find slow requests (completed requests that took longer than threshold)
+    // Also include incomplete requests that have been pending longer than threshold
+    const now = Date.now();
     const slowRequests = Array.from(state.requests.values())
-      .filter((r) => r.duration > this.slowThresholdMs)
-      .sort((a, b) => b.duration - a.duration)
+      .filter((r) => {
+        if (r.completed && r.duration && r.duration > this.slowThresholdMs) {
+          return true;
+        }
+        // Incomplete request that's been pending longer than threshold
+        if (!r.completed && r.startTime && (now - r.startTime) > this.slowThresholdMs) {
+          // Estimate duration as time since start
+          if (!r.duration) {
+            r.duration = now - r.startTime;
+          }
+          return true;
+        }
+        return false;
+      })
+      .sort((a, b) => (b.duration || 0) - (a.duration || 0))
       .slice(0, 5);
 
     // Get top failed URLs (limit to 5)
@@ -122,10 +161,16 @@ export class NetworkSensor {
       .slice(0, 5)
       .map((f) => ({ url: f.url, status: f.status, duration: f.duration }));
 
+    // Count successful 2xx requests
+    const successfulRequests = Array.from(state.requests.values()).filter(
+      (r) => r.successful === true && r.status >= 200 && r.status < 300
+    );
+
     const summary = {
       windowId,
       totalRequests: state.requests.size,
-      failedRequests: state.failedRequests.length,
+      failedRequests: failedCount,
+      successfulRequests: successfulRequests.length,
       failedByStatus: state.failedByStatus,
       hasNetworkActivity: state.requests.size > 0,
       slowRequestsCount: slowRequests.length,
@@ -135,7 +180,9 @@ export class NetworkSensor {
       })),
       topFailedUrls: topFailedUrls,
       duration: duration,
-      unfinishedCount: state.unfinishedRequests.size
+      unfinishedCount: state.unfinishedRequests.size,
+      firstRequestUrl: state.requestOrder[0] || null,
+      observedRequestUrls: state.requestOrder.slice(0, 5)
     };
 
     this.windows.delete(windowId);
@@ -161,6 +208,7 @@ export class NetworkSensor {
       windowId: -1,
       totalRequests: 0,
       failedRequests: 0,
+      successfulRequests: 0,
       failedByStatus: {},
       hasNetworkActivity: false,
       slowRequestsCount: 0,