@dynamicu/chromedebug-mcp 2.5.15 → 2.6.2

package/chrome-extension/disable-react-devtools.js

@@ -0,0 +1,19 @@
+/**
+ * Disable React DevTools to prevent semver validation error
+ *
+ * This prevents the React DevTools browser extension from trying to inject
+ * into ChromeDebug's extension pages, which causes a console error:
+ * "Invalid argument not valid semver ('' received)"
+ *
+ * IMPORTANT: This only affects ChromeDebug extension pages (popup, options).
+ * It does NOT affect developers' React applications in other tabs.
+ * Each browser tab/window has its own isolated JavaScript context.
+ */
+
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+  isDisabled: true,
+  supportsFiber: true,
+  inject: function() {},
+  onCommitFiberRoot: function() {},
+  onCommitFiberUnmount: function() {}
+};

package/chrome-extension/manifest.free.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
-  "name": "ChromeDebug MCP Assistant FREE v2.5.0",
-  "version": "2.5.0",
-  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-10-21-v2.5.0]",
+  "name": "ChromeDebug MCP Assistant FREE v2.6.0",
+  "version": "2.6.0",
+  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-10-24-v2.6.0]",
   "permissions": [
     "activeTab",
     "scripting",

package/chrome-extension/options.html

@@ -196,7 +196,8 @@
       <button id="reset" class="secondary">Reset to Default</button>
     </div>
   </div>
-  
+
+  <script src="disable-react-devtools.js"></script>
   <script src="extension-config.js"></script>
   <script src="options.js"></script>
 </body>

package/chrome-extension/popup.html

@@ -164,6 +164,19 @@
     </div>
 
     <div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
+
+    <!-- Inline Activation Manager (shown when activation limit reached) -->
+    <div id="inline-activation-manager" style="display: none; margin-top: 15px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;">
+      <div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 10px;">
+        ⚠️ Activation Limit Reached
+      </div>
+      <div style="font-size: 12px; color: #856404; margin-bottom: 12px;">
+        Please deactivate an existing activation to continue
+      </div>
+      <div id="activations-list-inline" style="max-height: 250px; overflow-y: auto; background: white; border-radius: 4px; border: 1px solid #ddd;">
+        <!-- Activations will be loaded here dynamically -->
+      </div>
+    </div>
   </div>
 
   <div class="status">
@@ -526,7 +539,8 @@
       color: #c62828;
     }
   </style>
-  
+
+  <script src="disable-react-devtools.js"></script>
   <script src="extension-config.js"></script>
   <script type="module" src="popup.js"></script>
 </body>

package/chrome-extension/popup.js

@@ -995,6 +995,193 @@ async function initializeLicenseUI() {
   }
 }
 
+// Inline Activation Manager Functions
+/**
+ * Show the inline activation manager with slide-down animation
+ */
+async function showInlineActivationManager(licenseKey) {
+  const inlineManager = document.getElementById('inline-activation-manager');
+  const activationsList = document.getElementById('activations-list-inline');
+
+  // Show the container
+  inlineManager.style.display = 'block';
+
+  // Trigger animation
+  setTimeout(() => {
+    inlineManager.style.maxHeight = '400px';
+  }, 10);
+
+  // Load activations
+  try {
+    activationsList.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">Loading activations...</div>';
+
+    // Get current instance ID
+    const stored = await chrome.storage.local.get(['chromedebug_instance_id']);
+    const currentInstanceId = stored.chromedebug_instance_id;
+
+    // Fetch activations from Firebase
+    const data = await licenseClient.listActivations(licenseKey);
+    const activations = data.activations || [];
+
+    // Render activations
+    renderInlineActivations(activations, currentInstanceId, licenseKey);
+
+  } catch (error) {
+    console.error('[License] Error loading activations:', error);
+    activationsList.innerHTML = `<div style="padding: 15px; text-align: center; color: #f44336;">Failed to load activations: ${error.message}</div>`;
+  }
+}
+
+/**
+ * Hide the inline activation manager with slide-up animation
+ */
+function hideInlineActivationManager() {
+  const inlineManager = document.getElementById('inline-activation-manager');
+  inlineManager.style.maxHeight = '0';
+
+  setTimeout(() => {
+    inlineManager.style.display = 'none';
+  }, 300);
+}
+
+/**
+ * Render activations in the inline manager
+ */
+function renderInlineActivations(activations, currentInstanceId, licenseKey) {
+  const container = document.getElementById('activations-list-inline');
+  container.innerHTML = '';
+
+  if (activations.length === 0) {
+    container.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">No activations found.</div>';
+    return;
+  }
+
+  activations.forEach((activation, index) => {
+    const item = document.createElement('div');
+    item.style.cssText = 'padding: 12px; border-bottom: 1px solid #e0e0e0; transition: background 0.2s;';
+    item.onmouseenter = () => item.style.background = '#f9f9f9';
+    item.onmouseleave = () => item.style.background = isCurrentDevice ? '#e8f5e9' : 'white';
+
+    // Check if this is the current device
+    const isCurrentDevice = activation.name === currentInstanceId || activation.identifier === currentInstanceId;
+
+    if (isCurrentDevice) {
+      item.style.background = '#e8f5e9';
+      item.style.borderLeft = '3px solid #4caf50';
+    }
+
+    // Format date
+    const date = new Date(activation.createdAt);
+    const formattedDate = date.toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    // Build device info
+    let deviceDisplay = 'Unknown Device';
+    if (activation.deviceInfo) {
+      deviceDisplay = activation.deviceInfo.deviceName ||
+                     `${activation.deviceInfo.platform || 'Unknown'} • ${activation.deviceInfo.browser || 'Unknown'}`;
+    } else if (activation.name && activation.name !== currentInstanceId) {
+      deviceDisplay = activation.name;
+    }
+
+    item.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+        <span style="font-weight: 500; font-size: 13px; color: #333;">Activation ${index + 1}</span>
+        ${isCurrentDevice ? '<span style="background: #4caf50; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: bold;">CURRENT</span>' : ''}
+      </div>
+      <div style="font-size: 12px; color: #666; margin-bottom: 4px;">
+        <strong style="color: #333;">${deviceDisplay}</strong>
+      </div>
+      <div style="font-size: 11px; color: #999; margin-bottom: 8px;">
+        ${formattedDate}
+      </div>
+      <button
+        class="deactivate-btn-inline"
+        data-instance-id="${activation.identifier}"
+        data-activation-number="${index + 1}"
+        data-license-key="${licenseKey}"
+        style="padding: 5px 10px; background: ${isCurrentDevice ? '#ccc' : '#f44336'}; color: white; border: none; border-radius: 3px; cursor: ${isCurrentDevice ? 'not-allowed' : 'pointer'}; font-size: 11px; width: 100%;"
+        ${isCurrentDevice ? 'disabled' : ''}
+      >
+        ${isCurrentDevice ? '✓ Current Device' : 'Deactivate'}
+      </button>
+    `;
+
+    // Add click handler for deactivate button
+    if (!isCurrentDevice) {
+      const deactivateBtn = item.querySelector('.deactivate-btn-inline');
+      deactivateBtn.addEventListener('click', () => {
+        handleInlineDeactivate(activation.identifier, index + 1, licenseKey);
+      });
+    }
+
+    container.appendChild(item);
+  });
+}
+
+/**
+ * Handle deactivation of an instance (inline)
+ */
+async function handleInlineDeactivate(instanceId, activationNumber, licenseKey) {
+  const confirmed = confirm(
+    `Are you sure you want to deactivate Activation ${activationNumber}?\n\n` +
+    `This will free up an activation slot and automatically activate on this device.`
+  );
+
+  if (!confirmed) {
+    return;
+  }
+
+  const messageDiv = document.getElementById('license-message');
+
+  try {
+    // Disable all deactivate buttons
+    const buttons = document.querySelectorAll('.deactivate-btn-inline');
+    buttons.forEach(btn => btn.disabled = true);
+
+    messageDiv.textContent = 'Deactivating...';
+    messageDiv.style.color = '#2196F3';
+
+    // Deactivate the instance
+    const result = await licenseClient.deactivateInstance(licenseKey, instanceId);
+    console.log('[License] Deactivation result:', result);
+
+    if (result.deactivated) {
+      messageDiv.textContent = 'Deactivated! Activating on this device...';
+      messageDiv.style.color = '#4caf50';
+
+      // Hide inline activation manager
+      hideInlineActivationManager();
+
+      // Wait a moment, then retry activation
+      setTimeout(async () => {
+        // Set the license key in the input
+        document.getElementById('license-key-input').value = licenseKey;
+
+        // Retry activation automatically
+        await handleLicenseActivation();
+      }, 1000);
+
+    } else {
+      throw new Error(result.error || 'Deactivation failed');
+    }
+
+  } catch (error) {
+    console.error('[License] Deactivation error:', error);
+    messageDiv.textContent = `Deactivation failed: ${error.message}`;
+    messageDiv.style.color = '#f44336';
+
+    // Re-enable buttons
+    const buttons = document.querySelectorAll('.deactivate-btn-inline:not([disabled])');
+    buttons.forEach(btn => btn.disabled = false);
+  }
+}
+
 // License activation handler
 async function handleLicenseActivation() {
   const licenseKey = document.getElementById('license-key-input').value.trim();
@@ -1033,43 +1220,12 @@ async function handleLicenseActivation() {
 
     if (result.error === 'ACTIVATION_LIMIT_REACHED' ||
         (result.error && result.error.toLowerCase().includes('activation limit'))) {
-      console.log('[License] Activation limit reached, opening activation manager');
-      messageDiv.textContent = 'Opening activation manager...';
+      console.log('[License] Activation limit reached, showing inline activation manager');
+      messageDiv.textContent = 'Please deactivate an existing activation to continue';
       messageDiv.style.color = '#ff9800';
 
-      // Store the license key temporarily so activation manager can access it
-      await chrome.storage.local.set({
-        'ls_license_key': licenseKey.trim(),
-        'activation_manager_open': true
-      });
-
-      // Open activation manager in a new window
-      const width = 500;
-      const height = 600;
-      const left = Math.round((screen.width - width) / 2);
-      const top = Math.round((screen.height - height) / 2);
-
-      const activationManagerUrl = chrome.runtime.getURL('activation-manager.html');
-      console.log('[License] Opening activation manager at URL:', activationManagerUrl);
-
-      chrome.windows.create({
-        url: activationManagerUrl,
-        type: 'popup',
-        width: width,
-        height: height,
-        left: left,
-        top: top
-      }, (window) => {
-        if (chrome.runtime.lastError) {
-          console.error('[License] Failed to open activation manager:', chrome.runtime.lastError);
-          messageDiv.textContent = 'Error: Could not open activation manager. See console.';
-          messageDiv.style.color = '#f44336';
-        } else {
-          console.log('[License] Activation manager window created:', window);
-          messageDiv.textContent = 'Please deactivate an existing activation to continue';
-          messageDiv.style.color = '#ff9800';
-        }
-      });
+      // Show inline activation manager
+      await showInlineActivationManager(licenseKey.trim());
     } else {
       messageDiv.textContent = result.error || 'Invalid license key';
       messageDiv.style.color = '#f44336';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.5.15",
+  "version": "2.6.2",
   "description": "ChromeDebug MCP - MCP server that provides full control over a Chrome browser instance for debugging and automation with AI assistants like Claude Code",
   "main": "src/index.js",
   "type": "module",
@@ -118,6 +118,8 @@
     "joi": "^18.0.0",
     "jsonwebtoken": "^9.0.2",
     "multer": "^2.0.2",
+    "pino": "^10.1.0",
+    "pino-pretty": "^13.1.2",
     "puppeteer": "^24.25.0",
     "uuid": "^11.1.0",
     "web-vitals": "^5.1.0",

package/scripts/package-webstore-extension.js

@@ -49,6 +49,7 @@ const filesToInclude = [
   'chrome-session-manager.js',
   'logger.js',
   'extension-config.js',
+  'disable-react-devtools.js',
   'upload-manager.js',
   'firebase-client.js',
   { source: 'firebase-config.public.js', target: 'firebase-config.public.js' },

package/scripts/webpack.config.free.cjs

@@ -50,6 +50,7 @@ module.exports = {
         { from: 'chrome-extension/web-vitals.iife.js', to: 'web-vitals.iife.js' },
 
         // Copy supporting modules (these are imported by bundled scripts)
+        { from: 'chrome-extension/disable-react-devtools.js', to: 'disable-react-devtools.js' },
         { from: 'chrome-extension/pii-redactor.js', to: 'pii-redactor.js' },
         { from: 'chrome-extension/data-buffer.js', to: 'data-buffer.js' },
         { from: 'chrome-extension/performance-monitor.js', to: 'performance-monitor.js' },

package/scripts/webpack.config.pro.cjs

@@ -52,6 +52,7 @@ module.exports = {
         { from: 'chrome-extension/web-vitals.iife.js', to: 'web-vitals.iife.js' },
 
         // Copy supporting modules (these are imported by bundled scripts)
+        { from: 'chrome-extension/disable-react-devtools.js', to: 'disable-react-devtools.js' },
         { from: 'chrome-extension/pii-redactor.js', to: 'pii-redactor.js' },
         { from: 'chrome-extension/data-buffer.js', to: 'data-buffer.js' },
         { from: 'chrome-extension/performance-monitor.js', to: 'performance-monitor.js' },
@@ -62,8 +63,8 @@ module.exports = {
         { from: 'chrome-extension/logger.js', to: 'logger.js' },
         { from: 'chrome-extension/license-helper.js', to: 'license-helper.js' },
         { from: 'chrome-extension/firebase-client.js', to: 'firebase-client.js' },
-        { from: 'chrome-extension/firebase-config.js', to: 'firebase-config.js' },
-        { from: 'chrome-extension/firebase-config.module.js', to: 'firebase-config.module.js' },
+        { from: 'chrome-extension/firebase-config.public.js', to: 'firebase-config.public.js' },
+        { from: 'chrome-extension/firebase-config.public-sw.js', to: 'firebase-config.js' },
         { from: 'chrome-extension/activation-manager.js', to: 'activation-manager.js' },
         { from: 'chrome-extension/frame-capture.js', to: 'frame-capture.js' },
         { from: 'chrome-extension/chrome-session-manager.js', to: 'chrome-session-manager.js' },

package/src/cli.js

@@ -18,8 +18,12 @@ import {
   findActiveSessions
 } from './services/unified-session-manager.js';
 import logger from './utils/logger.js';
+import { interceptStdout } from './logger.js';
 import { installPro } from './commands/install-pro.js';
 
+// CRITICAL: Intercept stdout FIRST to prevent MCP JSON-RPC pollution
+interceptStdout();
+
 /**
  * Main CLI entry point
  */

package/src/http-server.js

@@ -8,6 +8,10 @@ import { findAvailablePort } from './utils.js';
 import { writePortFile, removePortFile } from './port-discovery.js';
 import { configLoader } from './config-loader.js';
 import { setupProcessTracking } from './services/process-tracker.js';
+import { createLogger, logHttpRequest } from './logger.js';
+
+// Create component-specific logger
+const logger = createLogger('HTTP-Server');
 
 // Security imports
 import { authenticate, authorize, PERMISSIONS } from './middleware/auth.js';
@@ -83,10 +87,10 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     const contentType = req.get('content-type') || 'none';
     const contentLength = req.get('content-length') || '0';
 
-    console.error(`[RAW-REQUEST] ${timestamp} - ${req.method} ${req.originalUrl}`);
-    console.error(`[RAW-REQUEST] IP: ${ip} | UA: ${userAgent}`);
-    console.error(`[RAW-REQUEST] Content-Type: ${contentType} | Length: ${contentLength}bytes`);
-    console.error(`[RAW-REQUEST] Headers:`, Object.keys(req.headers).map(h => `${h}=${req.headers[h]}`).join(', '));
+    logger.debug(` ${timestamp} - ${req.method} ${req.originalUrl}`);
+    logger.debug(` IP: ${ip} | UA: ${userAgent}`);
+    logger.debug(` Content-Type: ${contentType} | Length: ${contentLength}bytes`);
+    logger.debug(` Headers:`, Object.keys(req.headers).map(h => `${h}=${req.headers[h]}`).join(', '));
 
     // Capture body parsing errors
     const originalJson = express.json();
@@ -96,8 +100,8 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     const originalStatus = res.status;
     res.status = function(code) {
       if (code === 400) {
-        console.error(`[RAW-REQUEST] HTTP 400 ERROR for ${req.method} ${req.originalUrl}`);
-        console.error(`[RAW-REQUEST] This request will be rejected with 400`);
+        logger.debug(` HTTP 400 ERROR for ${req.method} ${req.originalUrl}`);
+        logger.debug(` This request will be rejected with 400`);
       }
       return originalStatus.call(this, code);
     };
@@ -108,10 +112,10 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // ENHANCED BODY PARSING - For debugging body parsing issues (only for screen-interactions)
   app.use('/chromedebug/screen-interactions/*', (req, res, next) => {
     if (req.method === 'POST') {
-      console.error(`[BODY-DEBUG] Processing screen-interactions request for ${req.originalUrl}`);
-      console.error(`[BODY-DEBUG] Content-Type: ${req.get('content-type')}`);
-      console.error(`[BODY-DEBUG] Content-Length: ${req.get('content-length')}`);
-      console.error(`[BODY-DEBUG] User-Agent: ${req.get('user-agent')}`);
+      logger.debug(` Processing screen-interactions request for ${req.originalUrl}`);
+      logger.debug(` Content-Type: ${req.get('content-type')}`);
+      logger.debug(` Content-Length: ${req.get('content-length')}`);
+      logger.debug(` User-Agent: ${req.get('user-agent')}`);
 
       // Store original data handler to capture raw body
       const originalData = req.on;
@@ -130,16 +134,16 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           const wrappedHandler = () => {
             if (chunks.length > 0) {
               const rawBody = Buffer.concat(chunks).toString();
-              console.error(`[BODY-DEBUG] Raw body captured (${rawBody.length} chars):`, rawBody);
+              logger.debug(` Raw body captured (${rawBody.length} chars):`, rawBody);
               req.rawBody = rawBody;
 
               // Try to parse manually
               try {
                 const parsedBody = JSON.parse(rawBody);
-                console.error(`[BODY-DEBUG] Manual JSON parse successful`);
-                console.error(`[BODY-DEBUG] Parsed data:`, JSON.stringify(parsedBody, null, 2));
+                logger.debug(` Manual JSON parse successful`);
+                logger.debug(` Parsed data:`, JSON.stringify(parsedBody, null, 2));
               } catch (parseError) {
-                console.error(`[BODY-DEBUG] Manual JSON parse FAILED:`, parseError.message);
+                logger.debug(` Manual JSON parse FAILED:`, parseError.message);
               }
             }
             return originalHandler();
@@ -155,9 +159,9 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // JSON PARSING ERROR HANDLER - Catch malformed JSON before it reaches our handlers
   app.use('/chromedebug/screen-interactions/*', (err, req, res, next) => {
     if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
-      console.error(`[JSON-PARSE-ERROR] Malformed JSON in screen-interactions request:`, err.message);
-      console.error(`[JSON-PARSE-ERROR] Raw body:`, req.rawBody || 'not captured');
-      console.error(`[JSON-PARSE-ERROR] Request body:`, req.body);
+      logger.error(` Malformed JSON in screen-interactions request:`, err.message);
+      logger.error(` Raw body:`, req.rawBody || 'not captured');
+      logger.error(` Request body:`, req.body);
       return res.status(400).json({
         error: 'Invalid JSON format',
         details: err.message
@@ -169,13 +173,13 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // ENHANCED VALIDATION ERROR HANDLER - Catch and log detailed validation errors
   app.use('/chromedebug/screen-interactions/*', (err, req, res, next) => {
     if (err && err.status === 400 && err.details) {
-      console.error(`[VALIDATION-ERROR] Screen interactions validation failed:`);
-      console.error(`[VALIDATION-ERROR] Request path:`, req.originalUrl);
-      console.error(`[VALIDATION-ERROR] User agent:`, req.get('user-agent'));
-      console.error(`[VALIDATION-ERROR] Content type:`, req.get('content-type'));
-      console.error(`[VALIDATION-ERROR] Raw body:`, req.rawBody || 'not captured');
-      console.error(`[VALIDATION-ERROR] Parsed body:`, JSON.stringify(req.body, null, 2));
-      console.error(`[VALIDATION-ERROR] Validation errors:`, JSON.stringify(err.details, null, 2));
+      logger.warn(` Screen interactions validation failed:`);
+      logger.warn(` Request path:`, req.originalUrl);
+      logger.warn(` User agent:`, req.get('user-agent'));
+      logger.warn(` Content type:`, req.get('content-type'));
+      logger.warn(` Raw body:`, req.rawBody || 'not captured');
+      logger.warn(` Parsed body:`, JSON.stringify(req.body, null, 2));
+      logger.warn(` Validation errors:`, JSON.stringify(err.details, null, 2));
     }
     next(err);
   });
@@ -208,7 +212,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // JSON error handling middleware
   app.use((err, req, res, next) => {
     if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
-      console.error('[JSON Parse Error]', {
+      logger.error('[JSON Parse Error]', {
         url: req.url,
         method: req.method,
         contentType: req.get('content-type'),
@@ -288,8 +292,8 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     createValidator(workflowRecordingSchema),
     async (req, res) => {
     const { sessionId, url, title, includeLogs, actions, logs, functionTraces, name, screenshotSettings } = req.body;
-    console.error('[HTTP Server] Received workflow recording with name:', name);
-    console.error('[HTTP Server] Function traces count:', functionTraces ? functionTraces.length : 0);
+    logger.info('[HTTP Server] Received workflow recording with name:', name);
+    logger.info('[HTTP Server] Function traces count:', functionTraces ? functionTraces.length : 0);
     if (!sessionId || !actions) {
       return res.status(400).json({ error: 'sessionId and actions are required' });
     }
@@ -298,7 +302,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.storeWorkflowRecording(sessionId, url, title, includeLogs, actions, logs, name, screenshotSettings, functionTraces);
       res.json(result);
     } catch (error) {
-      console.error('Error storing workflow recording:', error);
+      logger.error('Error storing workflow recording:', error);
       res.status(500).json({ error: 'Failed to store workflow recording', details: error.message });
     }
   });
@@ -316,7 +320,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       }
       res.json(result);
     } catch (error) {
-      console.error('Error retrieving workflow recording:', error);
+      logger.error('Error retrieving workflow recording:', error);
       res.status(500).json({ error: 'Failed to retrieve workflow recording', details: error.message });
     }
   });
@@ -329,7 +333,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.listWorkflowRecordings();
       res.json(result);
     } catch (error) {
-      console.error('Error listing workflow recordings:', error);
+      logger.error('Error listing workflow recordings:', error);
       res.status(500).json({ error: 'Failed to list workflow recordings', details: error.message });
     }
   });
@@ -360,18 +364,18 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           return res.status(400).json({ error: 'No data provided' });
         }
         
-        console.error(`[Upload] Received batch ${batchId} for recording ${recordingId} with ${events.length} events`);
+        logger.debug(` Received batch ${batchId} for recording ${recordingId} with ${events.length} events`);
         
         // Ensure recording exists (auto-create if needed)
         try {
           const existingRecording = activeController.database.getRecording(recordingId);
           if (!existingRecording) {
-            console.error(`[Upload] Auto-creating recording ${recordingId} for full data upload`);
+            logger.debug(` Auto-creating recording ${recordingId} for full data upload`);
             activeController.database.storeRecording(recordingId, 'full_data_recording');
           }
         } catch (error) {
           // Recording doesn't exist, create it
-          console.error(`[Upload] Auto-creating recording ${recordingId} for full data upload (error case)`);
+          logger.debug(` Auto-creating recording ${recordingId} for full data upload (error case)`);
           activeController.database.storeRecording(recordingId, 'full_data_recording');
         }
         
@@ -394,7 +398,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
               await activeController.database.storePerformanceMetric(recordingId, event);
               break;
             default:
-              console.error(`[Upload] Unknown event type: ${event.type}`);
+              logger.debug(` Unknown event type: ${event.type}`);
           }
         }
         
@@ -404,7 +408,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           eventsProcessed: events.length 
         });
       } catch (error) {
-        console.error('[Upload] Error processing batch:', error);
+        logger.debug(' Error processing batch:', error);
         res.status(500).json({ 
           error: 'Failed to process batch', 
           details: error.message 
@@ -434,7 +438,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           data = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
         }
         
-        console.error(`[Upload] Received ${dataType} data for recording ${recordingId}`);
+        logger.debug(` Received ${dataType} data for recording ${recordingId}`);
         
         // Store data based on type
         const storeMethod = `store${dataType.charAt(0).toUpperCase() + dataType.slice(1).replace(/-/g, '')}`;
@@ -445,7 +449,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           res.status(400).json({ error: `Unknown data type: ${dataType}` });
         }
       } catch (error) {
-        console.error(`[Upload] Error processing ${req.params.dataType}:`, error);
+        logger.debug(` Error processing ${req.params.dataType}:`, error);
         res.status(500).json({ 
           error: 'Failed to process data', 
           details: error.message 
@@ -461,23 +465,23 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     authorize(PERMISSIONS.FRAME_WRITE),
     upload.none(),
     async (req, res) => {
-    console.error('[FORMDATA-DEBUG] ==========================================');
-    console.error('[FORMDATA-DEBUG] Frame batch request received');
-    console.error('[FORMDATA-DEBUG] Content-Type:', req.headers['content-type']);
-    console.error('[FORMDATA-DEBUG] Request method:', req.method);
-    console.error('[FORMDATA-DEBUG] User:', req.user?.name || 'unknown');
-    console.error('[FORMDATA-DEBUG] Raw body keys:', Object.keys(req.body || {}));
-    console.error('[FORMDATA-DEBUG] Raw body:', req.body);
+    logger.debug(' ==========================================');
+    logger.debug(' Frame batch request received');
+    logger.debug(' Content-Type:', req.headers['content-type']);
+    logger.debug(' Request method:', req.method);
+    logger.debug(' User:', req.user?.name || 'unknown');
+    logger.debug(' Raw body keys:', Object.keys(req.body || {}));
+    logger.debug(' Raw body:', req.body);
     
     // Handle both JSON and FormData
     let sessionId, frames, sessionName;
 
     if (req.headers['content-type']?.includes('application/json')) {
-      console.error('[FORMDATA-DEBUG] Processing as JSON request');
+      logger.debug(' Processing as JSON request');
       // JSON request - validate with schema
       const { error, value } = frameBatchSchema.validate(req.body);
       if (error) {
-        console.error('[FORMDATA-DEBUG] JSON validation failed:', error.details);
+        logger.debug(' JSON validation failed:', error.details);
         return res.status(400).json({
           error: 'Validation failed',
           details: error.details.map(detail => ({
@@ -490,37 +494,37 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       frames = value.frames;
       sessionName = value.sessionName || null;
 
-      console.error('[FORMDATA-DEBUG] JSON parsed successfully:', { sessionId, frameCount: frames?.length, sessionName });
+      logger.debug(' JSON parsed successfully:', { sessionId, frameCount: frames?.length, sessionName });
     } else {
-      console.error('[FORMDATA-DEBUG] Processing as FormData request');
+      logger.debug(' Processing as FormData request');
       
       // FormData request - manual validation
       sessionId = req.body.sessionId;
       sessionName = req.body.sessionName || null;
 
-      console.error('[FORMDATA-DEBUG] SessionId from FormData:', sessionId);
-      console.error('[FORMDATA-DEBUG] SessionName from FormData:', sessionName);
-      console.error('[FORMDATA-DEBUG] Frames field type:', typeof req.body.frames);
-      console.error('[FORMDATA-DEBUG] Frames field length:', req.body.frames?.length);
-      console.error('[FORMDATA-DEBUG] Frames field preview:', req.body.frames?.substring(0, 200));
+      logger.debug(' SessionId from FormData:', sessionId);
+      logger.debug(' SessionName from FormData:', sessionName);
+      logger.debug(' Frames field type:', typeof req.body.frames);
+      logger.debug(' Frames field length:', req.body.frames?.length);
+      logger.debug(' Frames field preview:', req.body.frames?.substring(0, 200));
       
       try {
         if (!req.body.frames) {
-          console.error('[FORMDATA-DEBUG] ❌ No frames field in FormData');
+          logger.debug(' ❌ No frames field in FormData');
           frames = null;
         } else {
-          console.error('[FORMDATA-DEBUG] 🔄 Attempting to parse frames JSON...');
+          logger.debug(' 🔄 Attempting to parse frames JSON...');
           frames = JSON.parse(req.body.frames);
-          console.error('[FORMDATA-DEBUG] ✅ Frames JSON parsed successfully');
-          console.error('[FORMDATA-DEBUG] Parsed frames count:', frames?.length);
-          console.error('[FORMDATA-DEBUG] First frame structure:', frames?.[0] ? Object.keys(frames[0]) : 'no frames');
+          logger.debug(' ✅ Frames JSON parsed successfully');
+          logger.debug(' Parsed frames count:', frames?.length);
+          logger.debug(' First frame structure:', frames?.[0] ? Object.keys(frames[0]) : 'no frames');
         }
         
-        console.error('[FORMDATA-DEBUG] 🔄 Validating parsed FormData...');
+        logger.debug(' 🔄 Validating parsed FormData...');
         // Validate the parsed data
         const { error, value } = frameBatchSchema.validate({ sessionId, frames, sessionName });
         if (error) {
-          console.error('[FORMDATA-DEBUG] ❌ FormData validation failed:', error.details);
+          logger.debug(' ❌ FormData validation failed:', error.details);
           return res.status(400).json({
             error: 'Validation failed',
             details: error.details.map(detail => ({
@@ -533,47 +537,47 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         frames = value.frames;
         sessionName = value.sessionName;
 
-        console.error('[FORMDATA-DEBUG] ✅ FormData validation successful');
+        logger.debug(' ✅ FormData validation successful');
       } catch (parseError) {
-        console.error('[FORMDATA-DEBUG] ❌ Failed to parse frames JSON:', parseError);
-        console.error('[FORMDATA-DEBUG] Raw frames data:', req.body.frames);
+        logger.debug(' ❌ Failed to parse frames JSON:', parseError);
+        logger.debug(' Raw frames data:', req.body.frames);
         return res.status(400).json({ error: 'Invalid frames JSON format' });
       }
     }
     
     if (!sessionId || !frames) {
-      console.error('[FORMDATA-DEBUG] ❌ Missing required data');
-      console.error('[FORMDATA-DEBUG] SessionId:', sessionId);
-      console.error('[FORMDATA-DEBUG] Frames:', frames ? 'present' : 'null');
+      logger.debug(' ❌ Missing required data');
+      logger.debug(' SessionId:', sessionId);
+      logger.debug(' Frames:', frames ? 'present' : 'null');
       return res.status(400).json({ error: 'sessionId and frames are required' });
     }
     
-    console.error('[FORMDATA-DEBUG] ✅ All data validated, proceeding to storage');
-    console.error('[FORMDATA-DEBUG] Session ID:', sessionId);
-    console.error('[FORMDATA-DEBUG] Frame count:', frames?.length);
+    logger.debug(' ✅ All data validated, proceeding to storage');
+    logger.debug(' Session ID:', sessionId);
+    logger.debug(' Frame count:', frames?.length);
     
     try {
-      console.error('[FORMDATA-DEBUG] 🔄 Calling activeController.storeFrameBatch...');
+      logger.debug(' 🔄 Calling activeController.storeFrameBatch...');
       if (frames && frames.length > 0) {
-        console.error('[FORMDATA-DEBUG] First frame structure:', Object.keys(frames[0]));
-        console.error('[FORMDATA-DEBUG] First frame has imageData:', !!frames[0].imageData);
-        console.error('[FORMDATA-DEBUG] ImageData length:', frames[0].imageData ? frames[0].imageData.length : 'N/A');
+        logger.debug(' First frame structure:', Object.keys(frames[0]));
+        logger.debug(' First frame has imageData:', !!frames[0].imageData);
+        logger.debug(' ImageData length:', frames[0].imageData ? frames[0].imageData.length : 'N/A');
       }
 
-      console.error('[FORMDATA-DEBUG] Session name:', sessionName || 'none');
+      logger.debug(' Session name:', sessionName || 'none');
 
       const result = await activeController.storeFrameBatch(sessionId, frames, sessionName);
-      console.error('[FORMDATA-DEBUG] ✅ Frame batch storage result:', result);
+      logger.debug(' ✅ Frame batch storage result:', result);
 
-      console.error('[FORMDATA-DEBUG] Result recording ID:', result?.id);
-      console.error('[FORMDATA-DEBUG] Result frame count:', result?.total_frames);
-      console.error('[FORMDATA-DEBUG] ==========================================');
+      logger.debug(' Result recording ID:', result?.id);
+      logger.debug(' Result frame count:', result?.total_frames);
+      logger.debug(' ==========================================');
 
       res.json(result);
     } catch (error) {
-      console.error('[FORMDATA-DEBUG] ❌ Storage error:', error);
-      console.error('[FORMDATA-DEBUG] Error stack:', error.stack);
-      console.error('[FORMDATA-DEBUG] ==========================================');
+      logger.debug(' ❌ Storage error:', error);
+      logger.debug(' Error stack:', error.stack);
+      logger.debug(' ==========================================');
       res.status(500).json({ error: 'Failed to store frame batch', details: error.message });
     }
   });
@@ -592,12 +596,12 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       // Debug: Verify logs are properly included and formatted
       if (result.frames?.length > 0 && result.frames[0]?.logs?.length > 0) {
-        console.error(`[INFO] Frame session ${sessionId}: Loaded ${result.frames.length} frames with console logs`);
+        logger.info(` Frame session ${sessionId}: Loaded ${result.frames.length} frames with console logs`);
       }
 
       res.json(result);
     } catch (error) {
-      console.error('Error retrieving frame session:', error);
+      logger.error('Error retrieving frame session:', error);
       res.status(500).json({ error: 'Failed to retrieve frame session', details: error.message });
     }
   });
@@ -633,7 +637,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         limit: limit
       });
     } catch (error) {
-      console.error('Error retrieving snapshots:', error);
+      logger.error('Error retrieving snapshots:', error);
       res.status(500).json({ error: 'Failed to retrieve snapshots', details: error.message });
     }
   });
@@ -655,7 +659,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       if (req.body.logs) {
         const compliance = analyzeLogFieldCompliance(req.body.logs);
         if (!compliance.isCompliant) {
-          console.error('[LogTransform] Applied field filtering:', {
+          logger.debug(' Applied field filtering:', {
             originalLogs: req.body.logs.length,
             nonSchemaFields: compliance.nonSchemaFields,
             missingFields: compliance.missingRequiredFields
@@ -690,7 +694,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         if (logs) {
           const compliance = analyzeLogFieldCompliance(logs);
           if (!compliance.isCompliant) {
-            console.error('[LogTransform] Applied field filtering (FormData):', {
+            logger.debug(' Applied field filtering (FormData):', {
               originalLogs: logs.length,
               nonSchemaFields: compliance.nonSchemaFields,
               missingFields: compliance.missingRequiredFields
@@ -724,7 +728,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.associateLogsWithFrames(sessionId, logs);
       res.json(result);
     } catch (error) {
-      console.error('Error associating logs with frames:', error);
+      logger.error('Error associating logs with frames:', error);
       res.status(500).json({ error: 'Failed to associate logs', details: error.message });
     }
   });
@@ -784,7 +788,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.streamLogsToFrames(sessionId, logs);
       res.json(result);
     } catch (error) {
-      console.error('Error streaming logs to frames:', error);
+      logger.error('Error streaming logs to frames:', error);
       res.status(500).json({ error: 'Failed to stream logs', details: error.message });
     }
   });
@@ -834,7 +838,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         chromeConnected: status.connected
       });
     } catch (error) {
-      console.error('Error handling DOM intent:', error);
+      logger.error('Error handling DOM intent:', error);
       res.status(500).json({ 
         error: 'Failed to process DOM intent',
         details: error.message 
@@ -1060,7 +1064,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         res.status(404).json(result);
       }
     } catch (error) {
-      console.error('Error deleting recording:', error);
+      logger.error('Error deleting recording:', error);
       res.status(500).json({ error: 'Failed to delete recording', details: error.message });
     }
   });
@@ -1080,7 +1084,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         res.status(404).json(result);
       }
     } catch (error) {
-      console.error('Error deleting workflow recording:', error);
+      logger.error('Error deleting workflow recording:', error);
       res.status(500).json({ error: 'Failed to delete workflow recording', details: error.message });
     }
   });
@@ -1096,33 +1100,33 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     const { interactions } = req.body;
 
     // Debug logging to identify validation issues
-    console.error('[SCREEN-INTERACTIONS-DEBUG] ==========================================');
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Request received for session:', sessionId);
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Content-Type:', req.get('content-type'));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] User agent:', req.get('user-agent'));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Auth user:', req.user?.name || 'unknown');
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Request body keys:', Object.keys(req.body || {}));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Interactions field present:', !!interactions);
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Interactions type:', typeof interactions);
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Interactions length:', Array.isArray(interactions) ? interactions.length : 'N/A');
+    logger.debug(' ==========================================');
+    logger.debug(' Request received for session:', sessionId);
+    logger.debug(' Content-Type:', req.get('content-type'));
+    logger.debug(' User agent:', req.get('user-agent'));
+    logger.debug(' Auth user:', req.user?.name || 'unknown');
+    logger.debug(' Request body keys:', Object.keys(req.body || {}));
+    logger.debug(' Interactions field present:', !!interactions);
+    logger.debug(' Interactions type:', typeof interactions);
+    logger.debug(' Interactions length:', Array.isArray(interactions) ? interactions.length : 'N/A');
     if (Array.isArray(interactions) && interactions.length > 0) {
-      console.error('[SCREEN-INTERACTIONS-DEBUG] First interaction:', JSON.stringify(interactions[0], null, 2));
+      logger.debug(' First interaction:', JSON.stringify(interactions[0], null, 2));
     }
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Raw body:', JSON.stringify(req.body, null, 2));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] ==========================================');
+    logger.debug(' Raw body:', JSON.stringify(req.body, null, 2));
+    logger.debug(' ==========================================');
 
     try {
       const { database } = await import('./database.js');
       const result = database.storeScreenInteractions(sessionId, interactions);
       
       if (result.success) {
-        console.error(`[HTTP] Stored ${result.count} screen interactions for recording ${sessionId}`);
+        logger.info(` Stored ${result.count} screen interactions for recording ${sessionId}`);
         res.json({ success: true, count: result.count });
       } else {
         res.status(500).json({ success: false, error: result.error });
       }
     } catch (error) {
-      console.error('Error storing screen interactions:', error);
+      logger.error('Error storing screen interactions:', error);
       res.status(500).json({ error: error.message });
     }
   });
@@ -1131,14 +1135,14 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   app.post('/chromedebug/debug-interactions/:sessionId',
     authenticate,
     (req, res) => {
-      console.error('[DEBUG-ENDPOINT] ==========================================');
-      console.error('[DEBUG-ENDPOINT] Auth bypass test successful!');
-      console.error('[DEBUG-ENDPOINT] User:', JSON.stringify(req.user, null, 2));
-      console.error('[DEBUG-ENDPOINT] Session ID:', req.params.sessionId);
-      console.error('[DEBUG-ENDPOINT] Content-Type:', req.get('content-type'));
-      console.error('[DEBUG-ENDPOINT] Request headers:', Object.keys(req.headers));
-      console.error('[DEBUG-ENDPOINT] Request body:', JSON.stringify(req.body, null, 2));
-      console.error('[DEBUG-ENDPOINT] ==========================================');
+      logger.debug(' ==========================================');
+      logger.debug(' Auth bypass test successful!');
+      logger.debug(' User:', JSON.stringify(req.user, null, 2));
+      logger.debug(' Session ID:', req.params.sessionId);
+      logger.debug(' Content-Type:', req.get('content-type'));
+      logger.debug(' Request headers:', Object.keys(req.headers));
+      logger.debug(' Request body:', JSON.stringify(req.body, null, 2));
+      logger.debug(' ==========================================');
 
       res.json({
         debug: true,
@@ -1163,7 +1167,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const interactions = database.getScreenInteractions(sessionId);
       res.json({ interactions });
     } catch (error) {
-      console.error('Error retrieving screen interactions:', error);
+      logger.error('Error retrieving screen interactions:', error);
       res.status(500).json({ error: error.message });
     }
   });
@@ -1185,7 +1189,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('License validation error:', error);
+      logger.error('License validation error:', error);
       res.status(500).json({ error: 'License validation failed' });
     }
   });
@@ -1202,7 +1206,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('Usage check error:', error);
+      logger.error('Usage check error:', error);
       res.status(500).json({ error: 'Usage check failed' });
     }
   });
@@ -1220,7 +1224,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('Usage increment error:', error);
+      logger.error('Usage increment error:', error);
       res.status(500).json({ error: 'Usage increment failed' });
     }
   });
@@ -1237,7 +1241,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('License info error:', error);
+      logger.error('License info error:', error);
       res.status(500).json({ error: 'Failed to get license info' });
     }
   });
@@ -1258,7 +1262,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json({ instances });
     } catch (error) {
-      console.error('List instances error:', error);
+      logger.error('List instances error:', error);
       res.status(500).json({ error: 'Failed to list instances' });
     }
   });
@@ -1279,7 +1283,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('Deactivate instance error:', error);
+      logger.info('Deactivate instance error:', error);
       res.status(500).json({ error: 'Failed to deactivate instance' });
     }
   });
@@ -1294,7 +1298,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(status);
     } catch (error) {
-      console.error('Cache status error:', error);
+      logger.info('Cache status error:', error);
       res.status(500).json({ error: 'Failed to get cache status' });
     }
   });
@@ -1309,14 +1313,14 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json({ success: true, message: 'License cache cleared' });
     } catch (error) {
-      console.error('Clear cache error:', error);
+      logger.info('Clear cache error:', error);
       res.status(500).json({ error: 'Failed to clear cache' });
     }
   });
 
   // Add a catch-all route for debugging
   app.use('*', (req, res, next) => {
-    console.error(`[HTTP] ${req.method} ${req.originalUrl}`);
+    logger.info(` ${req.method} ${req.originalUrl}`);
     next();
   });
 
@@ -1325,7 +1329,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   
   // 404 handler - must be last
   app.use((req, res) => {
-    console.error(`[HTTP] 404 - Route not found: ${req.method} ${req.originalUrl}`);
+    logger.info(` 404 - Route not found: ${req.method} ${req.originalUrl}`);
     res.status(404).json({ 
       success: false, 
       error: 'Endpoint not found',
@@ -1353,7 +1357,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   if (targetPort) {
     // Use the target port provided by session manager
     portsToTry = [targetPort];
-    console.error(`Attempting to start HTTP server on session manager allocated port: ${targetPort}`);
+    logger.info(`Attempting to start HTTP server on session manager allocated port: ${targetPort}`);
   } else {
     // Fall back to configured ports
     const configuredPorts = configLoader.getHttpServerPorts();
@@ -1364,7 +1368,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       ? [startPort, ...configuredPorts.filter(p => p !== startPort)]
       : configuredPorts;
 
-    console.error('Attempting to start HTTP server on configured ports:', portsToTry);
+    logger.info('Attempting to start HTTP server on configured ports:', portsToTry);
   }
   
   // Try configured ports in order
@@ -1373,14 +1377,14 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       await new Promise((resolve, reject) => {
         server = app.listen(port, () => {
           actualPort = port;
-          console.error(`HTTP server listening on port ${actualPort}`);
+          logger.info(`HTTP server listening on port ${actualPort}`);
           resolve();
         }).on('error', reject);
       });
       break;
     } catch (error) {
       if (error.code === 'EADDRINUSE') {
-        console.error(`Port ${port} is in use, trying next...`);
+        logger.info(`Port ${port} is in use, trying next...`);
         continue;
       }
       throw error;
@@ -1388,12 +1392,12 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   }
   
   if (!server || !actualPort) {
-    console.error('ERROR: All configured ports are in use:', portsToTry);
-    console.error('Please free up one of these ports or configure different ports');
+    logger.info('ERROR: All configured ports are in use:', portsToTry);
+    logger.info('Please free up one of these ports or configure different ports');
     throw new Error(`Could not find available port for HTTP server. All ports in use: ${portsToTry.join(', ')}`);
   }
   
-  console.error(`HTTP server started on port ${actualPort}`);
+  logger.info(`HTTP server started on port ${actualPort}`);
   
   // Write port file for discovery
   writePortFile(actualPort);
@@ -1419,7 +1423,7 @@ async function startWebSocketServer() {
   const wss = new WebSocketServer({ port: wsPort });
   
   wss.on('connection', async (ws) => {
-    console.error(`WebSocket client connected`);
+    logger.info(`WebSocket client connected`);
     wsClients.add(ws);
     
     // Send initial status
@@ -1459,10 +1463,10 @@ async function startWebSocketServer() {
             break;
             
           default:
-            console.error(`Unknown WebSocket message type: ${msg.type}`);
+            logger.info(`Unknown WebSocket message type: ${msg.type}`);
         }
       } catch (error) {
-        console.error('WebSocket message error:', error);
+        logger.info('WebSocket message error:', error);
         ws.send(JSON.stringify({
           type: 'error',
           data: { message: error.message }
@@ -1471,17 +1475,17 @@ async function startWebSocketServer() {
     });
     
     ws.on('close', () => {
-      console.error('WebSocket client disconnected');
+      logger.info('WebSocket client disconnected');
       wsClients.delete(ws);
     });
     
     ws.on('error', (error) => {
-      console.error('WebSocket error:', error);
+      logger.info('WebSocket error:', error);
       wsClients.delete(ws);
     });
   });
   
-  console.error(`WebSocket server listening on port ${wsPort}`);
+  logger.info(`WebSocket server listening on port ${wsPort}`);
 }
 
 // Export for use by MCP server
@@ -1499,12 +1503,12 @@ if (import.meta.url === `file://${process.argv[1]}`) {
     // Start WebSocket server for Chrome extension
     await startWebSocketServer();
 
-    console.error('ChromeDebug MCP HTTP server running with WebSocket support');
+    logger.info('ChromeDebug MCP HTTP server running with WebSocket support');
   }
 
   // Clean shutdown
   const cleanup = async (signal) => {
-    console.error(`Received ${signal}, shutting down HTTP server...`);
+    logger.info(`Received ${signal}, shutting down HTTP server...`);
     await activeController.close();
     process.exit(0);
   };
@@ -1512,5 +1516,5 @@ if (import.meta.url === `file://${process.argv[1]}`) {
   process.on('SIGINT', () => cleanup('SIGINT'));
   process.on('SIGTERM', () => cleanup('SIGTERM'));
 
-  main().catch(console.error);
+  main().catch((err) => logger.error(err, "Fatal error in HTTP server"));
 }

package/src/index.js

@@ -17,6 +17,11 @@ import {
   findActiveSessions
 } from './services/unified-session-manager.js';
 import logger from './utils/logger.js';
+import { interceptStdout } from './logger.js';
+
+// CRITICAL: Intercept stdout FIRST to prevent MCP JSON-RPC pollution
+// This must happen before any other code runs
+interceptStdout();
 
 /**
  * Main application class that orchestrates all components
@@ -255,5 +260,26 @@ For more information, see the documentation in CLAUDE.md
 }
 
 // Export for library usage and testing
-// This file is now safe to import without side effects
-export { ChromePilotApp };
+export { ChromePilotApp };
+
+// Auto-start when run directly (not imported as a module)
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const app = new ChromePilotApp();
+
+  // Handle graceful shutdown
+  process.on('SIGINT', async () => {
+    await app.shutdown();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', async () => {
+    await app.shutdown();
+    process.exit(0);
+  });
+
+  // Start the application
+  app.start().catch(error => {
+    logger.error('Failed to start ChromeDebug:', error);
+    process.exit(1);
+  });
+}

package/src/logger.js

@@ -1,11 +1,109 @@
-// Simple conditional logger for Chrome Debug
-// All logs go to stderr to avoid interfering with MCP stdio communication
-const isDev = process.env.NODE_ENV === 'development';
-
-module.exports = {
-  log: (...args) => { if (isDev) console.error(...args); },
-  error: (...args) => console.error(...args),
-  warn: (...args) => { if (isDev) console.error(...args); },
-  info: (...args) => { if (isDev) console.error(...args); },
-  debug: (...args) => { if (isDev) console.error(...args); }
-};
+/**
+ * Structured logging for ChromeDebug MCP
+ * Uses pino for performance and structured output
+ * All logs go to stderr to preserve MCP stdout for JSON-RPC
+ */
+
+import pino from 'pino';
+
+// Determine log level based on environment
+const getLogLevel = () => {
+  if (process.env.LOG_LEVEL) {
+    return process.env.LOG_LEVEL;
+  }
+  if (process.env.DEBUG === 'true' || process.env.DEBUG === '1') {
+    return 'debug';
+  }
+  if (process.env.NODE_ENV === 'production') {
+    return 'warn';
+  }
+  return 'info'; // Default for development
+};
+
+// Create base pino instance
+const baseLogger = pino({
+  level: getLogLevel(),
+  transport: {
+    target: 'pino-pretty',
+    options: {
+      destination: 2, // stderr
+      colorize: true,
+      ignore: 'pid,hostname',
+      translateTime: 'HH:MM:ss',
+      singleLine: false
+    }
+  }
+});
+
+/**
+ * Create a child logger with component context
+ * @param {string} component - Component name for log context
+ * @returns {pino.Logger} Configured pino logger
+ */
+export function createLogger(component) {
+  return baseLogger.child({ component });
+}
+
+/**
+ * HTTP request logger helper
+ * Only logs if DEBUG_HTTP is enabled or in debug level
+ * @param {pino.Logger} logger - Pino logger instance
+ * @param {object} req - Express request object
+ * @param {object} options - Logging options
+ */
+export function logHttpRequest(logger, req, options = {}) {
+  const shouldLog = process.env.DEBUG_HTTP === 'true' ||
+                    process.env.DEBUG === 'true' ||
+                    logger.level === 'debug';
+
+  if (!shouldLog) return;
+
+  const requestData = {
+    method: req.method,
+    url: req.originalUrl || req.url,
+    ip: req.ip,
+    userAgent: req.get('user-agent')
+  };
+
+  if (options.verbose) {
+    requestData.headers = req.headers;
+    requestData.contentType = req.get('content-type');
+    requestData.contentLength = req.get('content-length');
+  }
+
+  logger.debug(requestData, 'HTTP Request');
+}
+
+/**
+ * Intercept stdout to prevent MCP JSON-RPC pollution
+ * Call this at application startup for MCP servers
+ * Allows MCP JSON-RPC messages through while redirecting other output
+ */
+export function interceptStdout() {
+  const originalWrite = process.stdout.write;
+
+  process.stdout.write = function(chunk, encoding, callback) {
+    const message = chunk.toString();
+
+    // Allow MCP JSON-RPC messages through (they start with { and contain "jsonrpc")
+    if (message.trim().startsWith('{') && message.includes('"jsonrpc"')) {
+      // This is an MCP message - let it through to stdout unchanged
+      return originalWrite.call(process.stdout, chunk, encoding, callback);
+    }
+
+    // Redirect all other stdout to stderr with a warning prefix
+    const redirectedMessage = `[STDOUT-REDIRECT] ${message}`;
+    return process.stderr.write(redirectedMessage, encoding, callback);
+  };
+
+  baseLogger.info('Stdout interception enabled - all output redirected to stderr for MCP safety');
+}
+
+// Default export for backward compatibility
+export default {
+  error: (...args) => baseLogger.error(...args),
+  warn: (...args) => baseLogger.warn(...args),
+  info: (...args) => baseLogger.info(...args),
+  debug: (...args) => baseLogger.debug(...args),
+  log: (...args) => baseLogger.info(...args)
+};

package/src/standalone-server.js

@@ -5,6 +5,10 @@
 
 import { startHttpServer, startWebSocketServer } from './http-server.js';
 import { removePortFile } from './port-discovery.js';
+import { interceptStdout } from './logger.js';
+
+// CRITICAL: Intercept stdout FIRST to prevent MCP JSON-RPC pollution
+interceptStdout();
 
 console.error('╔════════════════════════════════════════════════════════════════╗');
 console.error('║              Chrome Debug HTTP Server                          ║');