@ddwang/magnitude-core 0.3.1-ddwang.1

package/dist/web/stability.js

@@ -0,0 +1,316 @@
+import sharp from 'sharp';
+import logger from '@/logger';
+// Maximum wait time for page stability in ms
+const DEFAULT_PAGE_STABILITY_TIMEOUT = 5000;
+// Default minimum wait time for page load
+const DEFAULT_MINIMUM_WAIT_PAGE_LOAD_TIME = 500;
+// Default time to wait for network requests to finish
+const DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME = 500;
+// Default maximum time to wait for page load
+const DEFAULT_MAXIMUM_WAIT_PAGE_LOAD_TIME = 5000;
+/**
+ * Utility class to check for visual stability of a page
+ */
+export class PageStabilityAnalyzer {
+    page;
+    options;
+    lastStart;
+    logger;
+    constructor(options = {}) {
+        //this.page = page;
+        this.options = {
+            differenceThreshold: options.differenceThreshold ?? 0.01,
+            requiredStableChecks: options.requiredStableChecks ?? 3,
+            checkInterval: options.checkInterval ?? 100, // 200ms
+            minimumWaitPageLoadTime: options.minimumWaitPageLoadTime ?? DEFAULT_MINIMUM_WAIT_PAGE_LOAD_TIME,
+            waitForNetworkIdleTime: options.waitForNetworkIdleTime ?? DEFAULT_WAIT_FOR_NETWORK_IDLE_TIME,
+            maximumWaitPageLoadTime: options.maximumWaitPageLoadTime ?? DEFAULT_MAXIMUM_WAIT_PAGE_LOAD_TIME,
+            disableVisualStability: options.disableVisualStability ?? false
+        };
+        this.lastStart = Date.now();
+        this.logger = logger.child({ name: 'magnus.stability' });
+    }
+    setActivePage(page) {
+        this.page = page;
+    }
+    log(message) {
+        this.logger.trace(`[${Date.now() - this.lastStart}ms] ${message}`);
+    }
+    /**
+     * Compare two screenshots and return their difference score
+     * @returns Difference as float between 0-1, where 0 means identical
+     */
+    async compareScreenshots(screenshot1, screenshot2) {
+        try {
+            // Convert screenshots to raw pixel data using Sharp
+            const img1 = await sharp(screenshot1).raw().toBuffer({ resolveWithObject: true });
+            const img2 = await sharp(screenshot2).raw().toBuffer({ resolveWithObject: true });
+            // Check for size mismatch
+            if (img1.info.width !== img2.info.width || img1.info.height !== img2.info.height) {
+                return {
+                    difference: 1.0,
+                    error: "Image sizes don't match"
+                };
+            }
+            // Calculate pixel differences
+            let diffSum = 0;
+            for (let i = 0; i < img1.data.length; i++) {
+                diffSum += Math.abs(img1.data[i] - img2.data[i]);
+            }
+            // Calculate mean difference and normalize
+            const mse = diffSum / img1.data.length;
+            // Normalize to 0-1 range (assuming 8-bit color depth)
+            const maxDiff = 255.0 * (img1.info.channels || 3); // Multiply by number of channels
+            const normalizedDiff = mse / maxDiff;
+            return { difference: normalizedDiff };
+        }
+        catch (e) {
+            return {
+                difference: 1.0,
+                error: `Comparison failed: ${e instanceof Error ? e.message : String(e)}`
+            };
+        }
+    }
+    /**
+     * Wait for the network to become stable
+     * This monitors network requests and waits until there's a period of inactivity
+     * @param timeout Maximum time to wait for network stability
+     */
+    async waitForNetworkStability(timeout) {
+        const maxWaitTime = timeout ?? this.options.maximumWaitPageLoadTime;
+        const start = Date.now();
+        this.log("Checking network stability");
+        const pendingRequests = new Set();
+        let lastActivity = Date.now();
+        // Define relevant resource types and content types
+        const RELEVANT_RESOURCE_TYPES = new Set([
+            'document',
+            'stylesheet',
+            'image',
+            'font',
+            'script',
+            'fetch',
+            'xhr',
+            'iframe'
+        ]);
+        const RELEVANT_CONTENT_TYPES = [
+            'text/html',
+            'text/css',
+            'application/javascript',
+            'image/',
+            'font/',
+            'application/json'
+        ];
+        // Additional patterns to filter out
+        const IGNORED_URL_PATTERNS = [
+            // Analytics and tracking
+            'analytics',
+            'tracking',
+            'telemetry',
+            'beacon',
+            'metrics',
+            // Ad-related
+            'doubleclick',
+            'adsystem',
+            'adserver',
+            'advertising',
+            // Social media widgets
+            'facebook.com/plugins',
+            'platform.twitter',
+            'linkedin.com/embed',
+            // Live chat and support
+            'livechat',
+            'zendesk',
+            'intercom',
+            'crisp.chat',
+            'hotjar',
+            // Push notifications
+            'push-notifications',
+            'onesignal',
+            'pushwoosh',
+            // Background sync/heartbeat
+            'heartbeat',
+            'ping',
+            'alive',
+            // WebRTC and streaming
+            'webrtc',
+            'rtmp://',
+            'wss://',
+            // Common CDNs for dynamic content
+            'cloudfront.net',
+            'fastly.net'
+        ];
+        // Setup request handler
+        const onRequest = (request) => {
+            // Filter by resource type
+            if (!RELEVANT_RESOURCE_TYPES.has(request.resourceType())) {
+                return;
+            }
+            // Filter out streaming, websocket, and other real-time requests
+            if (['websocket', 'media', 'eventsource', 'manifest', 'other'].includes(request.resourceType())) {
+                return;
+            }
+            // Filter out by URL patterns
+            const url = request.url().toLowerCase();
+            if (IGNORED_URL_PATTERNS.some(pattern => url.includes(pattern))) {
+                return;
+            }
+            // Filter out data URLs and blob URLs
+            if (url.startsWith('data:') || url.startsWith('blob:')) {
+                return;
+            }
+            pendingRequests.add(request);
+            lastActivity = Date.now();
+            this.log(`Request started: ${request.url()}`);
+        };
+        // Setup response handler
+        const onResponse = (response) => {
+            const request = response.request();
+            if (!pendingRequests.has(request)) {
+                return;
+            }
+            // Filter by content type if available
+            const contentType = response.headers()['content-type'] || '';
+            // Skip if content type indicates streaming or real-time data
+            if (['streaming', 'video', 'audio', 'webm', 'mp4', 'event-stream', 'websocket', 'protobuf']
+                .some(t => contentType.includes(t))) {
+                pendingRequests.delete(request);
+                return;
+            }
+            // Only process relevant content types
+            if (!RELEVANT_CONTENT_TYPES.some(ct => contentType.includes(ct))) {
+                pendingRequests.delete(request);
+                return;
+            }
+            // Skip if response is too large (likely not essential for page load)
+            const contentLength = parseInt(response.headers()['content-length'] || '0', 10);
+            if (contentLength > 5 * 1024 * 1024) { // 5MB
+                pendingRequests.delete(request);
+                return;
+            }
+            pendingRequests.delete(request);
+            lastActivity = Date.now();
+            this.log(`Request resolved: ${request.url()}`);
+        };
+        // Add event listeners
+        this.page.on('request', onRequest);
+        this.page.on('response', onResponse);
+        try {
+            // Wait for idle time
+            const startTime = Date.now();
+            while (true) {
+                await new Promise(resolve => setTimeout(resolve, 100)); // Sleep 100ms
+                const now = Date.now();
+                if (pendingRequests.size === 0 &&
+                    (now - lastActivity) >= this.options.waitForNetworkIdleTime) {
+                    break;
+                }
+                if (now - startTime > maxWaitTime) {
+                    this.log(`Network timeout after ${maxWaitTime}ms with ${pendingRequests.size} pending requests`);
+                    break;
+                }
+            }
+        }
+        finally {
+            // Clean up event listeners
+            this.page.removeListener('request', onRequest);
+            this.page.removeListener('response', onResponse);
+        }
+        const totalTime = (Date.now() - start) / 1000;
+        this.log(`Network stabilized in ${totalTime.toFixed(2)}s`);
+    }
+    /**
+     * Wait for the page to become visually stable
+     * @param timeout Maximum time to wait for stability in ms
+     */
+    async waitForVisualStability(timeout = DEFAULT_PAGE_STABILITY_TIMEOUT) {
+        const start = Date.now();
+        this.log("Checking visual stability");
+        try {
+            let lastScreenshot = await this.page.screenshot();
+            let stabilityCount = 0;
+            const deadline = start + timeout;
+            while (Date.now() < deadline) {
+                this.log(`Waiting for ${this.options.checkInterval}`);
+                await this.page.waitForTimeout(this.options.checkInterval);
+                this.log(`Done waiting`);
+                try {
+                    this.log("Taking screenshot...");
+                    const currentScreenshot = await this.page.screenshot();
+                    this.log("Comparing screenshots...");
+                    const diffResult = await this.compareScreenshots(lastScreenshot, currentScreenshot);
+                    if (diffResult.error) {
+                        this.log(`Comparison error: ${diffResult.error}`);
+                        stabilityCount = 0;
+                    }
+                    else {
+                        this.log(`Screenshot difference: ${diffResult.difference.toFixed(4)}`);
+                        if (diffResult.difference < this.options.differenceThreshold) {
+                            stabilityCount++;
+                            if (stabilityCount >= this.options.requiredStableChecks) {
+                                this.log(`Visual stability achieved (difference: ${diffResult.difference.toFixed(4)})`);
+                                return;
+                            }
+                        }
+                        else {
+                            stabilityCount = 0;
+                        }
+                    }
+                    lastScreenshot = currentScreenshot;
+                }
+                catch (e) {
+                    this.log(`Screenshot/comparison error: ${e instanceof Error ? e.message : String(e)}`);
+                    stabilityCount = 0;
+                }
+            }
+            // If we exit the loop without returning, we timed out
+            this.log("Visual stability check timed out");
+        }
+        catch (e) {
+            this.log(`Visual stability check error: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        finally {
+            const totalTime = (Date.now() - start) / 1000;
+            this.log(`Visual stability check took ${totalTime.toFixed(2)}s`);
+        }
+    }
+    /**
+     * Wait for both network and visual stability
+     * @param timeout Maximum time to wait for page load
+     */
+    async waitForStability(timeout) {
+        const maxWaitTime = timeout ?? this.options.maximumWaitPageLoadTime;
+        const startTime = Date.now();
+        this.lastStart = startTime;
+        // Track our deadlines
+        const minWaitDeadline = startTime + this.options.minimumWaitPageLoadTime;
+        const maxWaitDeadline = startTime + maxWaitTime;
+        this.log(`Starting stability wait (min: ${this.options.minimumWaitPageLoadTime}ms, max: ${maxWaitTime}ms)`);
+        try {
+            // Wait for network stability, but don't exceed max wait time
+            const remainingForNetwork = Math.max(0, maxWaitDeadline - Date.now());
+            if (remainingForNetwork > 0) {
+                await this.waitForNetworkStability(remainingForNetwork);
+            }
+            // Wait for visual stability with whatever time remains, but don't exceed max wait time
+            if (!this.options.disableVisualStability) {
+                const remainingForVisual = Math.max(0, maxWaitDeadline - Date.now());
+                if (remainingForVisual > 0) {
+                    await this.waitForVisualStability(remainingForVisual);
+                }
+            }
+            // Ensure we've waited at least the minimum time
+            const now = Date.now();
+            if (now < minWaitDeadline) {
+                const remainingMinWait = minWaitDeadline - now;
+                this.log(`Waiting additional ${remainingMinWait}ms to meet minimum wait time`);
+                await new Promise(resolve => setTimeout(resolve, remainingMinWait));
+            }
+            const totalTime = Date.now() - startTime;
+            this.log(`Page stability wait completed in ${totalTime}ms`);
+        }
+        catch (e) {
+            this.log(`Error during stability wait: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+}

package/dist/web/tabs.d.ts

@@ -0,0 +1,58 @@
+import EventEmitter from "eventemitter3";
+import { BrowserContext, Page } from "playwright";
+export interface TabEvents {
+    'tabChanged': (page: Page) => void;
+}
+export interface TabState {
+    activeTab: number;
+    tabs: {
+        title: string;
+        url: string;
+    }[];
+}
+export interface TabManagerOptions {
+    switchOnActivity?: boolean;
+}
+export declare class TabManager {
+    private context;
+    private activePage;
+    private options;
+    private pollInterval?;
+    readonly events: EventEmitter<TabEvents>;
+    constructor(context: BrowserContext, options?: TabManagerOptions);
+    initialize(): Promise<void>;
+    private initializeExistingPages;
+    private onPageCreated;
+    private setupPageTracking;
+    private startActivityPolling;
+    setActivePage(page: Page): void;
+    switchTab(index: number): Promise<void>;
+    getActivePage(): Page;
+    getPages(): Page[];
+    retrieveState(): Promise<TabState>;
+    debugVisibilityStates(): Promise<({
+        hasFocus: boolean;
+        hidden: boolean;
+        visibilityState: DocumentVisibilityState;
+        index: number;
+        url: string;
+        error?: undefined;
+    } | {
+        index: number;
+        url: string;
+        error: boolean;
+    })[]>;
+    debugFocusStates(): Promise<({
+        hasFocus: boolean;
+        isVisible: boolean;
+        isHidden: boolean;
+        url: string;
+        index: number;
+        error?: undefined;
+    } | {
+        index: number;
+        url: string;
+        error: boolean;
+    })[]>;
+    destroy(): void;
+}

package/dist/web/tabs.js

@@ -0,0 +1,293 @@
+// Keeps track of current tab, enables describing open tabs, and switching between open tabs
+import logger from "@/logger";
+import EventEmitter from "eventemitter3";
+import { retryOnErrorIsSuccess } from "@/common";
+export class TabManager {
+    context;
+    activePage;
+    options;
+    pollInterval;
+    events;
+    constructor(context, options = {}) {
+        this.context = context;
+        this.options = {
+            switchOnActivity: true,
+            ...options
+        };
+        this.events = new EventEmitter();
+        // Track new pages
+        this.context.on('page', this.onPageCreated.bind(this));
+    }
+    async initialize() {
+        // Initialize existing pages and tracking
+        await this.initializeExistingPages();
+    }
+    async initializeExistingPages() {
+        const pages = this.context.pages();
+        logger.debug(`initializeExistingPages: found ${pages.length} existing pages`);
+        // Set up existing pages
+        for (const page of pages) {
+            logger.debug(`Setting up page: ${page.url()}`);
+            await this.onPageCreated(page);
+        }
+        // Start polling for activity if enabled
+        if (this.options.switchOnActivity) {
+            logger.debug('Starting activity polling');
+            this.startActivityPolling();
+        }
+    }
+    async onPageCreated(page) {
+        logger.debug(`onPageCreated called for: ${page.url()}`);
+        // If this is the only page or no active page set, make it active
+        if (!this.activePage || this.context.pages().length === 1) {
+            this.setActivePage(page);
+        }
+        // Only set up tracking if switchOnActivity is enabled
+        if (this.options.switchOnActivity) {
+            // Set up activity tracking immediately
+            await this.setupPageTracking(page);
+            // Re-inject tracking after navigation
+            page.on('load', async () => {
+                await this.setupPageTracking(page);
+                // If this is the active page and it navigated from about:blank, re-emit tabChanged
+                if (this.activePage === page && page.url() !== 'about:blank') {
+                    logger.debug(`Re-emitting tabChanged after navigation to: ${page.url()}`);
+                    this.events.emit('tabChanged', page);
+                }
+            });
+            // Also inject on DOMContentLoaded for faster setup
+            page.on('domcontentloaded', async () => {
+                await this.setupPageTracking(page);
+            });
+        }
+        // Don't automatically switch to new tabs - let the user decide
+        // This prevents unwanted switches when links open in new tabs
+        // Clean up when page closes
+        page.on('close', () => {
+            if (this.activePage === page) {
+                const pages = this.context.pages();
+                if (pages.length > 0) {
+                    this.setActivePage(pages[0]);
+                }
+            }
+        });
+        // Start polling if this is the first page and switchOnActivity is enabled
+        if (this.context.pages().length === 1 && this.options.switchOnActivity && !this.pollInterval) {
+            logger.debug('Starting activity polling from onPageCreated (first page)');
+            this.startActivityPolling();
+        }
+    }
+    async setupPageTracking(page) {
+        // Inject the tracking script with retries
+        await retryOnErrorIsSuccess(async () => {
+            const currentUrl = page.url();
+            logger.debug(`Setting up tracking for: ${currentUrl}`);
+            // Inject activity tracking
+            await page.evaluate(() => {
+                // Initialize activity tracking storage
+                if (!window.__tabActivityTime) {
+                    window.__tabActivityTime = 0;
+                }
+                // Set initial activity time to NOW since we're setting up tracking
+                // This ensures the initial page is considered active
+                window.__tabActivityTime = Date.now();
+                // Track any user interaction
+                const recordActivity = () => {
+                    window.__tabActivityTime = Date.now();
+                };
+                // Remove any existing listeners to avoid duplicates
+                const listeners = window.__tabListeners;
+                if (listeners) {
+                    listeners.forEach((l) => {
+                        document.removeEventListener(l.event, l.handler, true);
+                        window.removeEventListener(l.event, l.handler, true);
+                    });
+                }
+                // Store references to our listeners
+                const newListeners = [];
+                // Helper to add tracked event listener
+                const addTrackedListener = (target, event, handler) => {
+                    target.addEventListener(event, handler, true);
+                    newListeners.push({ event, handler });
+                };
+                // Throttled mouse move handler
+                let lastMouseMoveTime = 0;
+                const throttledMouseMove = () => {
+                    const now = Date.now();
+                    if (now - lastMouseMoveTime > 500) {
+                        lastMouseMoveTime = now;
+                        recordActivity();
+                    }
+                };
+                // Mouse events
+                addTrackedListener(document, 'mousedown', recordActivity);
+                addTrackedListener(document, 'click', recordActivity);
+                addTrackedListener(document, 'mousemove', throttledMouseMove);
+                addTrackedListener(document, 'mouseenter', recordActivity);
+                // Keyboard events
+                addTrackedListener(document, 'keydown', recordActivity);
+                // Focus events
+                addTrackedListener(window, 'focus', recordActivity);
+                // Scroll events
+                let lastScrollTime = 0;
+                const throttledScroll = () => {
+                    const now = Date.now();
+                    if (now - lastScrollTime > 500) {
+                        lastScrollTime = now;
+                        recordActivity();
+                    }
+                };
+                addTrackedListener(document, 'scroll', throttledScroll);
+                // Visibility change
+                addTrackedListener(document, 'visibilitychange', () => {
+                    if (!document.hidden) {
+                        recordActivity();
+                    }
+                });
+                // Store listeners for cleanup
+                window.__tabListeners = newListeners;
+            });
+        }, { mode: 'retry_all', delayMs: 200, retryLimit: 5 });
+    }
+    startActivityPolling() {
+        // Poll for activity every 200ms
+        this.pollInterval = setInterval(async () => {
+            const pages = this.context.pages();
+            let mostRecentPage = null;
+            let mostRecentTime = 0;
+            // Find the page with the most recent activity
+            for (const page of pages) {
+                if (page.isClosed())
+                    continue;
+                try {
+                    const lastActivity = await page.evaluate(() => {
+                        // Initialize if it doesn't exist (defensive programming)
+                        if (typeof window.__tabActivityTime === 'undefined') {
+                            window.__tabActivityTime = 0;
+                            // If tracking wasn't set up, return -1 as a signal
+                            if (!window.__tabListeners) {
+                                return -1;
+                            }
+                        }
+                        return window.__tabActivityTime;
+                    });
+                    // If tracking isn't set up (-1), inject it now
+                    if (lastActivity === -1) {
+                        logger.debug(`Tracking not set up for ${page.url()}, injecting now...`);
+                        await this.setupPageTracking(page);
+                        continue; // Skip this page for this polling cycle
+                    }
+                    if (lastActivity > mostRecentTime) {
+                        mostRecentTime = lastActivity;
+                        mostRecentPage = page;
+                    }
+                }
+                catch (e) {
+                    // Page might be navigating
+                }
+            }
+            // Switch to the most recently active page if it's different and activity is recent
+            if (mostRecentPage &&
+                mostRecentPage !== this.activePage &&
+                mostRecentTime > Date.now() - 1000) { // Activity within last second
+                logger.trace(`Activity detected on ${mostRecentPage.url()}, switching...`);
+                this.setActivePage(mostRecentPage);
+            }
+        }, 200);
+    }
+    setActivePage(page) {
+        const isInitialPage = !this.activePage;
+        if (this.activePage === page && !isInitialPage) {
+            return;
+        }
+        logger.debug(`Active tab changed to: ${page.url()}`);
+        this.activePage = page;
+        this.events.emit('tabChanged', page);
+        page.removeAllListeners('framenavigated');
+        page.on('framenavigated', async (frame) => {
+            if (frame === page.mainFrame()) {
+                // const url = frame.url();
+                // await logNavigation(url);
+            }
+        });
+    }
+    async switchTab(index) {
+        const pages = this.context.pages();
+        if (index < 0 || index >= pages.length) {
+            throw new Error(`Invalid tab index: ${index}`);
+        }
+        const page = pages[index];
+        logger.debug(`Switching to tab ${index} (${page.url()})`);
+        await page.bringToFront();
+        this.setActivePage(page);
+    }
+    getActivePage() {
+        return this.activePage;
+    }
+    getPages() {
+        return this.context.pages();
+    }
+    async retrieveState() {
+        let activeIndex = -1;
+        let tabs = [];
+        for (const [i, page] of this.context.pages().entries()) {
+            if (page === this.activePage) {
+                activeIndex = i;
+            }
+            let title;
+            try {
+                title = await page.title();
+            }
+            catch {
+                logger.warn('Could not load page title while retrieving tab state');
+                title = '(could not load title)';
+            }
+            const url = page.url();
+            tabs.push({ title, url });
+        }
+        return {
+            activeTab: activeIndex,
+            tabs: tabs
+        };
+    }
+    async debugVisibilityStates() {
+        const states = await Promise.all(this.context.pages().map(async (page, i) => {
+            try {
+                const hasFocus = await page.evaluate(() => ({
+                    hasFocus: document.hasFocus(),
+                    hidden: document.hidden,
+                    visibilityState: document.visibilityState
+                }));
+                return { index: i, url: page.url(), ...hasFocus };
+            }
+            catch {
+                return { index: i, url: page.url(), error: true };
+            }
+        }));
+        return states;
+    }
+    async debugFocusStates() {
+        const states = await Promise.all(this.context.pages().map(async (page, i) => {
+            try {
+                const state = await page.evaluate(() => ({
+                    hasFocus: document.hasFocus(),
+                    isVisible: document.visibilityState === 'visible',
+                    isHidden: document.hidden,
+                    url: window.location.href
+                }));
+                return { index: i, ...state };
+            }
+            catch {
+                return { index: i, url: page.url(), error: true };
+            }
+        }));
+        console.log('Focus states:', states);
+        return states;
+    }
+    // Clean up
+    destroy() {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+        }
+    }
+}

package/dist/web/transformer.d.ts

@@ -0,0 +1,7 @@
+import type { Page } from 'playwright';
+export declare class DOMTransformer {
+    private initializedPages;
+    constructor();
+    setActivePage(newPage: Page): void;
+    setupScriptForPage(targetPage: Page): Promise<void>;
+}