dev3000 0.0.186 → 0.0.188

package/dist/cdp-monitor.js

@@ -1,9 +1,10 @@
 import { spawn } from "child_process";
-import { existsSync, mkdtempSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, readFileSync, writeFileSync } from "fs";
 import { tmpdir } from "os";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 import { WebSocket } from "ws";
+import { isolatedChromeInvocation } from "./runtime/chrome-isolation.js";
 /** Sandbox exceptions must be explicit; headless mode alone never disables it. */
 export function getChromeSandboxFlags(env = process.env) {
     return env.D3K_CHROME_NO_SANDBOX === "1" ? ["--no-sandbox", "--disable-setuid-sandbox"] : [];
@@ -233,49 +234,39 @@ export function selectCDPTarget(targets, options = {}) {
 }
 export class CDPMonitor {
     eventObserver;
-    automaticScreenshots = true;
     setEventObserver(observer) {
         this.eventObserver = observer;
     }
-    setAutomaticScreenshots(enabled) {
-        this.automaticScreenshots = enabled;
-    }
     browser = null;
     connection = null;
     debugPort = 9222;
     eventHandlers = new Map();
     profileDir;
-    screenshotDir;
     logger;
     debug = false;
     browserPath;
     isShuttingDown = false;
-    pendingRequests = 0;
-    networkIdleTimer = null;
-    pluginReactScan = false;
+    reconnecting = false;
     cdpUrl = null;
-    lastScreenshotTime = 0;
-    minScreenshotInterval = 1000; // Minimum 1 second between screenshots
-    navigationInProgress = false; // Track if a navigation event recently occurred
     chromePids = new Set(); // Track all Chrome PIDs for this instance
     onWindowClosedCallback = null; // Callback for when window is manually closed
     appServerPort; // Port of the user's app server to monitor
     initialAppUrl; // App URL that the loading page should hand off to
     externalCdpBase; // Existing CDP HTTP endpoint to connect to instead of launching Chrome
+    filesystemIsolation = false;
+    isolatedCertificatePin;
     headless = false; // Run Chrome in headless mode
     framework; // Framework hint from project detection
     reactTrackingEnabled = false;
     lastReactSnapshotLogTime = 0;
     pendingCommands = new Map();
     navigationTimeoutMs = DEFAULT_NAVIGATION_TIMEOUT_MS;
-    constructor(profileDir, screenshotDir, logger, debug = false, browserPath, pluginReactScan = false, appServerPort, initialAppUrl, navigationTimeoutMs = DEFAULT_NAVIGATION_TIMEOUT_MS, debugPort, headless = false, framework, externalCdpBase) {
+    constructor(profileDir, logger, debug = false, browserPath, appServerPort, initialAppUrl, navigationTimeoutMs = DEFAULT_NAVIGATION_TIMEOUT_MS, debugPort, headless = false, framework, externalCdpBase) {
         this.profileDir = profileDir;
-        this.screenshotDir = screenshotDir;
         this.appServerPort = appServerPort;
         this.logger = logger;
         this.debug = debug;
         this.browserPath = browserPath;
-        this.pluginReactScan = pluginReactScan;
         this.initialAppUrl = initialAppUrl;
         this.navigationTimeoutMs = navigationTimeoutMs;
         this.headless = headless;
@@ -452,6 +443,10 @@ export class CDPMonitor {
     getChromePids() {
         return Array.from(this.chromePids);
     }
+    requireFilesystemIsolation(certificatePin) {
+        this.isolatedCertificatePin = certificatePin;
+        this.filesystemIsolation = true;
+    }
     setOnWindowClosedCallback(callback) {
         this.onWindowClosedCallback = callback;
     }
@@ -479,7 +474,9 @@ export class CDPMonitor {
     }
     createLoadingPage(targetUrl) {
         // Use a unique temp directory per launch to avoid stale file:// cache artifacts.
-        const loadingDir = mkdtempSync(join(tmpdir(), "dev3000-loading-"));
+        if (this.filesystemIsolation)
+            mkdirSync(this.profileDir, { recursive: true, mode: 0o700 });
+        const loadingDir = mkdtempSync(join(this.filesystemIsolation ? this.profileDir : tmpdir(), "dev3000-loading-"));
         const loadingPath = join(loadingDir, "loading.html");
         // Read the loading HTML from a runtime-valid location.
         const currentFile = fileURLToPath(import.meta.url);
@@ -538,11 +535,9 @@ export class CDPMonitor {
                     this.debugLog(`Chrome crashed: code=${code}, signal=${signal}`);
                     // Log context for crash correlation
                     this.logger("browser", "[CRASH] Chrome crashed - check recent server/browser logs for correlation");
-                    // Take screenshot if still connected (for crash context)
-                    if (this.connection && this.connection.ws.readyState === 1) {
-                        this.takeScreenshot("crash");
-                    }
                 }
+                this.prepareShutdown();
+                this.onWindowClosedCallback?.();
             }
         });
         this.browser.on("error", (error) => {
@@ -629,7 +624,13 @@ export class CDPMonitor {
                 this.debugLog(`Custom browser path: ${this.browserPath}`);
             }
             let attemptIndex = 0;
+            let launchComplete = false;
             const tryNextChrome = () => {
+                if (launchComplete || this.isShuttingDown) {
+                    if (!launchComplete)
+                        reject(new Error("Browser session is ending"));
+                    return;
+                }
                 if (attemptIndex >= chromeCommands.length) {
                     const errorMsg = `Failed to launch Chrome: all ${chromeCommands.length} browser paths exhausted`;
                     this.logger("browser", `[CDP] ${errorMsg}`);
@@ -684,7 +685,11 @@ export class CDPMonitor {
                 }
                 // Add initial page
                 chromeArgs.push(this.createLoadingPage(this.initialAppUrl));
-                this.browser = spawn(chromePath, chromeArgs, {
+                const invocation = this.filesystemIsolation
+                    ? isolatedChromeInvocation(chromePath, chromeArgs, this.profileDir, this.isolatedCertificatePin)
+                    : { binary: chromePath, args: chromeArgs, env: process.env };
+                this.browser = spawn(invocation.binary, invocation.args, {
+                    env: invocation.env,
                     stdio: "pipe",
                     detached: true // Separate process group so Chrome doesn't receive SIGINT on Ctrl+C
                 });
@@ -721,6 +726,11 @@ export class CDPMonitor {
                 // Poll for Chrome readiness instead of fixed timeout
                 const checkChromeReady = async (attempts = 0) => {
                     const maxAttempts = 30; // 30 attempts = 15 seconds max
+                    if (launchComplete || this.isShuttingDown) {
+                        if (!launchComplete)
+                            reject(new Error("Browser session is ending"));
+                        return;
+                    }
                     if (processExited) {
                         return;
                     }
@@ -747,6 +757,11 @@ export class CDPMonitor {
                             this.debugLog(`Chrome successfully started with path: ${chromePath} (after ${attempts * 500}ms)`);
                             // Discover all Chrome PIDs for this instance
                             await this.discoverChromePids();
+                            if (this.isShuttingDown) {
+                                reject(new Error("Browser session is ending"));
+                                return;
+                            }
+                            launchComplete = true;
                             // Set up runtime crash monitoring after successful launch
                             this.setupRuntimeCrashMonitoring();
                             resolve();
@@ -771,24 +786,20 @@ export class CDPMonitor {
         let retryCount = 0;
         const maxRetries = 5;
         while (retryCount < maxRetries) {
+            if (this.isShuttingDown)
+                throw new Error("Browser session is ending");
             try {
                 // Get the WebSocket URL from Chrome's debug endpoint
                 const targetsResponse = await fetch(`${cdpBase}/json`);
-                let targets = (await targetsResponse.json());
+                const targets = (await targetsResponse.json());
                 this.debugLog(`Found ${targets.length} targets: ${JSON.stringify(targets.map((target) => ({ type: target.type ?? "unknown", url: target.url ?? "" })))}`);
-                if (targets.length === 0) {
-                    this.debugLog("No debuggable targets found; creating a blank page target");
-                    const newTargetResponse = await fetch(`${cdpBase}/json/new?about:blank`, {
-                        method: "PUT"
-                    });
-                    if (newTargetResponse.ok) {
-                        const createdTarget = (await newTargetResponse.json());
-                        targets = [createdTarget];
-                        this.debugLog(`Created page target: ${createdTarget.id || "unknown"} - ${createdTarget.url || ""}`);
-                    }
-                    else {
-                        this.debugLog(`Failed to create page target: HTTP ${newTargetResponse.status}`);
-                    }
+                if (this.isShuttingDown)
+                    throw new Error("Browser session is ending");
+                if (!targets.some((target) => target.type === "page")) {
+                    // A closed final window is a session end, never a request to create a replacement tab.
+                    this.prepareShutdown();
+                    this.onWindowClosedCallback?.();
+                    throw new Error("Browser has no open targets; session ended");
                 }
                 const pageTarget = selectCDPTarget(targets, {
                     appServerPort: this.appServerPort,
@@ -808,6 +819,11 @@ export class CDPMonitor {
                     ws.setMaxListeners(20);
                     ws.on("open", () => {
                         this.debugLog("WebSocket connection opened successfully");
+                        if (this.isShuttingDown) {
+                            ws.close();
+                            reject(new Error("Browser session is ending"));
+                            return;
+                        }
                         this.connection = {
                             ws,
                             sessionId: null,
@@ -884,6 +900,8 @@ export class CDPMonitor {
                 });
             }
             catch (error) {
+                if (this.isShuttingDown)
+                    throw error;
                 retryCount++;
                 this.debugLog(`CDP connection attempt ${retryCount} failed: ${error}`);
                 if (retryCount >= maxRetries) {
@@ -896,30 +914,43 @@ export class CDPMonitor {
             }
         }
     }
+    /** A returning companion can retry after the previous finite recovery attempt was exhausted. */
+    async recoverExternalConnection() {
+        if (this.externalCdpBase && !this.getCdpUrl())
+            await this.attemptReconnect();
+    }
     async attemptReconnect() {
-        this.debugLog("Starting CDP reconnection attempt");
-        this.logger("browser", "[CDP] Starting reconnection process...");
-        // Close existing connection if any
-        if (this.connection) {
+        if (this.isShuttingDown || this.reconnecting || this.getCdpUrl())
+            return;
+        this.reconnecting = true;
+        try {
+            this.debugLog("Starting CDP reconnection attempt");
+            this.logger("browser", "[CDP] Starting reconnection process...");
+            // Close existing connection if any
+            if (this.connection) {
+                try {
+                    this.connection.ws.close();
+                }
+                catch (err) {
+                    this.debugLog(`Error closing old connection: ${err}`);
+                }
+                this.connection = null;
+            }
+            // Attempt to reconnect
             try {
-                this.connection.ws.close();
+                await this.connectToCDP();
+                await this.enableCDPDomains();
+                await this.setupInteractionTracking();
+                this.logger("browser", "[CDP] Reconnection successful! Monitoring restored.");
+                this.debugLog("CDP reconnection completed successfully and monitoring was restored");
             }
             catch (err) {
-                this.debugLog(`Error closing old connection: ${err}`);
+                this.logger("browser", `[CDP] Reconnection failed: ${err}`);
+                throw err;
             }
-            this.connection = null;
         }
-        // Attempt to reconnect
-        try {
-            await this.connectToCDP();
-            await this.enableCDPDomains();
-            await this.setupInteractionTracking();
-            this.logger("browser", "[CDP] Reconnection successful! Monitoring restored.");
-            this.debugLog("CDP reconnection completed successfully and monitoring was restored");
-        }
-        catch (err) {
-            this.logger("browser", `[CDP] Reconnection failed: ${err}`);
-            throw err;
+        finally {
+            this.reconnecting = false;
         }
     }
     async sendCDPCommand(method, params = {}, timeoutMs = DEFAULT_CDP_COMMAND_TIMEOUT_MS) {
@@ -1179,8 +1210,6 @@ export class CDPMonitor {
             }
             this.logger("browser", errorMsg);
             void this.logReactSnapshot("exception context", true);
-            // Take screenshot immediately on errors (no delay needed)
-            this.takeScreenshot("error");
         });
         // Browser console logs via Log domain (additional capture method)
         this.onCDPEvent("Log.entryAdded", (event) => {
@@ -1259,40 +1288,20 @@ export class CDPMonitor {
                 return;
             }
             this.logger("browser", `[NAVIGATION] ${url}`);
-            // Mark that we're in a navigation - we'll take a screenshot when it settles
-            this.navigationInProgress = true;
         });
-        // Page load events for better screenshot timing
+        // Reinject interaction tracking when documents load
         this.onCDPEvent("Page.loadEventFired", async (_event) => {
             this.logger("browser", "[DOM] Load event fired");
-            this.takeScreenshot("page-loaded");
             // Reinject interaction tracking on page load
             await this.setupInteractionTracking();
             void this.logReactSnapshot("post-load context");
         });
         this.onCDPEvent("Page.domContentEventFired", async (_event) => {
             this.logger("browser", "[DOM] DOM content loaded");
-            // Skip screenshot on DOM content loaded - we'll get one on page-loaded
             // Reinject interaction tracking on DOM content loaded
             await this.setupInteractionTracking();
             void this.logReactSnapshot("domcontentloaded context");
         });
-        // Network activity tracking for better screenshot timing
-        this.onCDPEvent("Network.requestWillBeSent", (_event) => {
-            this.pendingRequests++;
-            if (this.networkIdleTimer) {
-                clearTimeout(this.networkIdleTimer);
-                this.networkIdleTimer = null;
-            }
-        });
-        this.onCDPEvent("Network.loadingFinished", (_event) => {
-            this.pendingRequests--;
-            this.scheduleNetworkIdleScreenshot();
-        });
-        this.onCDPEvent("Network.loadingFailed", (_event) => {
-            this.pendingRequests--;
-            this.scheduleNetworkIdleScreenshot();
-        });
         // DOM mutations for interaction context
         this.onCDPEvent("DOM.documentUpdated", () => {
             // Document structure changed - useful for SPA routing
@@ -1325,6 +1334,7 @@ export class CDPMonitor {
             if (params.targetId === monitoredTarget && this.onWindowClosedCallback && !this.isShuttingDown) {
                 this.debugLog("Chrome window was manually closed, triggering d3k shutdown");
                 this.logger("browser", "[TARGET] Chrome window manually closed, shutting down d3k");
+                this.prepareShutdown();
                 this.onWindowClosedCallback();
             }
         });
@@ -1409,10 +1419,6 @@ export class CDPMonitor {
             this.logger("browser", `[CDP] Navigation failed: ${error}`);
             throw error;
         }
-        // Take a delayed screenshot to catch dynamic content
-        setTimeout(() => {
-            this.takeScreenshot("navigation-delayed");
-        }, 2000);
         // Set up interaction tracking - but be more efficient about it
         const trackingStartTime = Date.now();
         this.debugLog("Setting up interaction tracking");
@@ -1427,7 +1433,6 @@ export class CDPMonitor {
         this.debugLog(`Interaction tracking setup completed (${trackingTime}ms)`);
         // Start polling for interactions from the injected script
         this.startInteractionPolling();
-        // Multiple screenshot triggers will ensure we catch the initial page load
     }
     async navigateToApp(port, useHttps = false) {
         const protocol = useHttps ? "https" : "http";
@@ -1452,33 +1457,6 @@ export class CDPMonitor {
           if (!window.__dev3000_cdp_tracking) {
             window.__dev3000_cdp_tracking = true;
             
-            ${this.pluginReactScan
-                ? `
-            // Inject react-scan for React performance monitoring
-            if (!window.__REACT_SCAN_INJECTED__) {
-              const script = document.createElement('script');
-              script.src = 'https://unpkg.com/react-scan@latest/dist/auto.global.js';
-              script.onload = () => {
-                console.debug('[DEV3000] react-scan loaded successfully');
-                window.__REACT_SCAN_INJECTED__ = true;
-                
-                // Optional: Configure react-scan
-                if (window.ReactScan && window.ReactScan.configure) {
-                  window.ReactScan.configure({
-                    // Add any configuration options here
-                    playSound: false,
-                    showToolbar: true
-                  });
-                }
-              };
-              script.onerror = (err) => {
-                console.debug('[DEV3000] Failed to load react-scan:', err);
-              };
-              document.head.appendChild(script);
-            }
-            `
-                : ""}
-            
             // Helper function to generate CSS selector for element
             function getElementSelector(el) {
               if (!el || el === document) return 'document';
@@ -1762,10 +1740,6 @@ export class CDPMonitor {
                 const reactState = value.reactState || null;
                 for (const interaction of interactions) {
                     this.logger("browser", `[INTERACTION] ${interaction.message}`);
-                    // Take screenshot when scroll settles
-                    if (interaction.message.startsWith("SCROLL_SETTLED")) {
-                        this.takeScreenshot("scroll-settled");
-                    }
                 }
                 for (const reactEvent of reactEvents) {
                     if (reactEvent.type === "renderer") {
@@ -1793,64 +1767,6 @@ export class CDPMonitor {
             pollInteractions();
         }, 1000);
     }
-    scheduleNetworkIdleScreenshot() {
-        // Only take network-idle screenshots after a navigation event
-        // This prevents screenshot spam from background AJAX/fetch polls
-        if (!this.navigationInProgress) {
-            return;
-        }
-        // Only schedule if we have 0 pending requests
-        if (this.pendingRequests === 0) {
-            if (this.networkIdleTimer) {
-                clearTimeout(this.networkIdleTimer);
-            }
-            // Wait 500ms of network idle before taking screenshot
-            this.networkIdleTimer = setTimeout(() => {
-                this.takeScreenshot("navigation-settled");
-                // Reset navigation flag since we've captured the settled state
-                this.navigationInProgress = false;
-                this.networkIdleTimer = null;
-            }, 500);
-        }
-    }
-    async takeScreenshot(event) {
-        if (!this.automaticScreenshots)
-            return null;
-        try {
-            // Throttle screenshots to avoid spam
-            const now = Date.now();
-            const timeSinceLastScreenshot = now - this.lastScreenshotTime;
-            // Special cases that should always take screenshots
-            const priorityEvents = ["error", "crash"];
-            // If not a priority event and we took a screenshot recently, skip it
-            if (!priorityEvents.includes(event) && timeSinceLastScreenshot < this.minScreenshotInterval) {
-                this.debugLog(`Skipping screenshot for ${event} - only ${timeSinceLastScreenshot}ms since last screenshot`);
-                return null;
-            }
-            // Update last screenshot time
-            this.lastScreenshotTime = now;
-            const result = await this.sendCDPCommand("Page.captureScreenshot", {
-                format: "png",
-                quality: 80,
-                clip: undefined, // Full viewport
-                fromSurface: true
-            });
-            const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-            const filename = `${timestamp}-${event}.png`;
-            const screenshotPath = join(this.screenshotDir, filename);
-            // Save the base64 image
-            const resultWithData = result;
-            const buffer = Buffer.from(resultWithData.data, "base64");
-            writeFileSync(screenshotPath, buffer);
-            // Log screenshot with file path
-            this.logger("browser", `[SCREENSHOT] ${screenshotPath}`);
-            return filename;
-        }
-        catch (error) {
-            this.logger("browser", `[CDP] Screenshot failed: ${error}`);
-            return null;
-        }
-    }
     // Enhanced replay functionality using CDP
     async executeInteraction(interaction) {
         if (!this.connection) {