@dynamicu/chromedebug-mcp 2.6.7 → 2.7.1

package/chrome-extension/popup.js

@@ -1,30 +1,10 @@
 // Chrome Debug Extension Popup Script v2.0
 const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
-console.log(`[popup.js] Loaded version: ${EXTENSION_VERSION}`);
+// console.log(`[popup.js] Loaded version: ${EXTENSION_VERSION}`);
 
-// Import Firebase license client with graceful fallback
-let FirebaseLicenseClient = null;
-let LEMONSQUEEZY_CHECKOUT_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
-let licenseClient = null;
-let currentUserId = null;
-
-// Load Firebase asynchronously to avoid blocking module execution
-(async () => {
-  try {
-    const firebaseClientModule = await import('./firebase-client.js');
-    FirebaseLicenseClient = firebaseClientModule.FirebaseLicenseClient;
-
-    const firebaseConfigModule = await import('./firebase-config.public.js');
-    LEMONSQUEEZY_CHECKOUT_URL = firebaseConfigModule.LEMONSQUEEZY_CHECKOUT_URL;
-
-    // Initialize license client if Firebase loaded successfully
-    licenseClient = new FirebaseLicenseClient();
-    console.log('[popup.js] Firebase license client initialized');
-  } catch (error) {
-    console.warn('[popup.js] Firebase not available - license features disabled:', error);
-    // Extension will work without Firebase, just no license validation
-  }
-})();
+// LemonSqueezy purchase URL for PRO upgrade
+const PRO_PURCHASE_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
+const IS_PRO_VERSION = chrome.runtime.getManifest().name.includes('PRO');
 
 // Global variables for recording functionality
 let isRecording = false;
@@ -77,13 +57,10 @@ function showToast(message, duration = 2000, type = 'info') {
 
 // Loading overlay helper functions
 function showSectionLoading(sectionId, message = 'Loading...') {
-  console.log(`showSectionLoading called for: ${sectionId} with message: ${message}`);
   const section = document.getElementById(sectionId);
   if (!section) {
-    console.error(`Section not found: ${sectionId}`);
     return;
   }
-  console.log(`Section found:`, section);
 
   // Remove any existing overlay first
   hideSectionLoading(sectionId);
@@ -96,7 +73,6 @@ function showSectionLoading(sectionId, message = 'Loading...') {
   `;
   overlay.setAttribute('data-loading-overlay', 'true');
   section.appendChild(overlay);
-  console.log(`Overlay appended to section. Overlay:`, overlay);
 }
 
 function hideSectionLoading(sectionId) {
@@ -114,19 +90,12 @@ function updateWorkflowRecordingUI() {
   const workflowBtn = document.getElementById('workflowRecordBtn');
   const workflowStatus = document.getElementById('workflowRecordingStatus');
   const saveRestorePointBtn = document.getElementById('saveRestorePointBtn');
-  
-  console.log('[Popup v2.0.6] updateWorkflowRecordingUI called, isWorkflowRecording:', isWorkflowRecording);
-  console.log('[Popup v2.0.6] workflowBtn element exists?', !!workflowBtn);
-  
+
   if (workflowBtn) {
     if (isWorkflowRecording) {
-      console.log('[Popup v2.0.6] Updating button to STOP state');
-      console.log('[Popup v2.0.6] Current button text:', workflowBtn.textContent);
       workflowBtn.textContent = 'Stop Workflow Recording';
       workflowBtn.style.background = '#e91e63';
       workflowBtn.classList.add('recording');
-      console.log('[Popup v2.0.6] Button updated - new text:', workflowBtn.textContent);
-      console.log('[Popup v2.0.6] Button classes:', workflowBtn.className);
       startWorkflowTimer();
       // Show restore point button during recording
       if (saveRestorePointBtn) {
@@ -357,7 +326,7 @@ function testSiteAccess(hostname, mode, allowedSites, restrictedSites) {
 
 // Function definitions (outside DOMContentLoaded for proper scope)
 async function checkServerStatus() {
-  console.log('[popup.js] checkServerStatus() called');
+  // console.log('[popup.js] checkServerStatus() called');
   const statusEl = document.getElementById('serverStatus');
   const statusTextEl = document.getElementById('statusText');
 
@@ -384,7 +353,7 @@ async function checkServerStatus() {
       clearTimeout(timeoutId);
       // Only log successful connections to reduce console noise
       if (response.ok) {
-        console.log(`[popup.js] ✓ Connected to server on port ${port}`);
+        // console.log(`[popup.js] ✓ Connected to server on port ${port}`);
       }
       return response.ok;
     } catch (error) {
@@ -440,19 +409,12 @@ async function checkServerStatus() {
   if (connected && connectedPort) {
     await chrome.storage.local.set({ lastSuccessfulPort: connectedPort });
   } else {
-    console.log('[popup.js] No server found - browser-only mode active');
+    // console.log('[popup.js] No server found - browser-only mode active');
   }
 
   if (connected) {
     statusEl.className = 'server-status connected';
-    statusTextEl.innerHTML = `
-      Server connected (port ${connectedPort})
-      <div style="margin-top: 4px;">
-        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 10px; color: #666; text-decoration: none;">
-          📚 Documentation
-        </a>
-      </div>
-    `;
+    statusTextEl.textContent = `Server connected (port ${connectedPort})`;
   } else {
     statusEl.className = 'server-status disconnected';
 
@@ -472,9 +434,6 @@ async function checkServerStatus() {
         <button id="copyInstallCmd" style="padding: 4px 8px; font-size: 11px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">
           📋 Copy Commands
         </button>
-        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 11px; color: #2196F3; text-decoration: none;">
-          📚 Full Documentation
-        </a>
       </div>
     `;
 
@@ -637,7 +596,7 @@ function takeManualSnapshot() {
     }
 
     if (response && response.success) {
-      console.log('Manual snapshot taken successfully');
+      // console.log('Manual snapshot taken successfully');
       // Show brief feedback
       const manualSnapshotBtn = document.getElementById('manualSnapshotBtn');
       if (manualSnapshotBtn) {
@@ -692,7 +651,7 @@ function takeManualSnapshot() {
  */
 /*
 async function takeSnapshot() {
-  console.log('Taking standalone snapshot...');
+  // console.log('Taking standalone snapshot...');
 
   try {
     const serverStatus = await checkServerStatus();
@@ -749,7 +708,7 @@ async function takeSnapshot() {
       }
 
       if (response && response.success) {
-        console.log('Snapshot taken successfully:', response.sessionId);
+        // console.log('Snapshot taken successfully:', response.sessionId);
         const recordingStatus = document.getElementById('recordingStatus');
         if (recordingStatus) {
           recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Snapshot saved!</strong>`;
@@ -929,7 +888,7 @@ function updateRecordingsDisplay(recordings) {
       if (type === 'snapshot') {
         prompt = `Please use the get_frame_screenshot function in Chrome Debug to view the snapshot "${recordingId}"${portText}. This is a single-frame screenshot with console logs captured for debugging.`;
       } else {
-        prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to load the recording "${recordingId}"${portText}.`;
+        prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to load the recording "${recordingId}"${portText}.`;
       }
 
       navigator.clipboard.writeText(prompt).then(() => {
@@ -992,7 +951,7 @@ function updateRecordingsDisplay(recordings) {
         }
       } catch (error) {
         // Free version - show upgrade prompt
-        console.log('[ChromePilot Free] Frame editor not available - showing upgrade prompt');
+        // console.log('[ChromePilot Free] Frame editor not available - showing upgrade prompt');
         alert('Frame Editor is a Pro feature. Upgrade to ChromePilot Pro to view detailed frame recordings with console logs and advanced debugging tools.');
       }
     });
@@ -1002,356 +961,90 @@ function updateRecordingsDisplay(recordings) {
 
 
 
-// Initialize when DOM is ready
-// License UI initialization function
-async function initializeLicenseUI() {
-  console.log('[License] Initializing license UI');
-
-  // Get or create userId
-  const stored = await chrome.storage.local.get('chromedebug_user_id');
-  currentUserId = stored.chromedebug_user_id || crypto.randomUUID();
-  if (!stored.chromedebug_user_id) {
-    await chrome.storage.local.set({chromedebug_user_id: currentUserId});
-    console.log('[License] Created new user ID:', currentUserId);
-  }
-
-  // Check for license activation file and pre-fill license key
-  try {
-    const activationFileUrl = chrome.runtime.getURL('license-activation.json');
-    const response = await fetch(activationFileUrl);
-    if (response.ok) {
-      const activationData = await response.json();
-      if (activationData.license_key) {
-        const licenseKeyInput = document.getElementById('license-key-input');
-        if (licenseKeyInput) {
-          licenseKeyInput.value = activationData.license_key;
-          console.log('[License UI] Pre-filled license key from activation file');
-        }
-      }
+// Initialize tier status display for FREE version
+function initializeTierStatus() {
+  if (IS_PRO_VERSION) {
+    // Hide license section for PRO version
+    const licenseSection = document.getElementById('license-section');
+    if (licenseSection) {
+      licenseSection.style.display = 'none';
+      // console.log('[Tier] PRO version detected - hiding license section');
     }
-  } catch (error) {
-    // Activation file doesn't exist or is inaccessible - this is normal for FREE version
-    console.log('[License UI] No activation file found - normal for FREE version');
-  }
-
-  // Check license status
-  const licenseStatus = await licenseClient.getCachedLicenseStatus();
-  console.log('[License] License status:', licenseStatus);
-
-  // Update workflow recording PRO badge visibility
-  const workflowProBadge = document.getElementById('workflowProBadge');
-
-  if (licenseStatus.valid && licenseStatus.tier === 'pro') {
-    // Show pro status
-    document.getElementById('pro-tier-status').style.display = 'block';
-    document.getElementById('free-tier-status').style.display = 'none';
-    // Hide license activation input/button when Pro license is active
-    document.getElementById('license-activation').style.display = 'none';
-    // Hide PRO badge for Pro users
-    if (workflowProBadge) workflowProBadge.style.display = 'none';
-    console.log('[License] Displaying Pro tier status');
   } else {
-    // Show free tier + usage
-    const usage = await licenseClient.checkUsageLimit(currentUserId);
-    console.log('[License] Usage check result:', usage);
-
-    // Handle both API response format (currentUsage, dailyLimit) and offline format (count, limit)
-    document.getElementById('usage-count').textContent = usage.currentUsage ?? usage.count ?? 0;
-    document.getElementById('usage-limit').textContent = usage.dailyLimit ?? usage.limit ?? 50;
-    document.getElementById('free-tier-status').style.display = 'block';
-    document.getElementById('pro-tier-status').style.display = 'none';
-    // Show license activation input/button for free tier
-    document.getElementById('license-activation').style.display = 'block';
-    // Show PRO badge for free users
-    if (workflowProBadge) workflowProBadge.style.display = 'block';
-    console.log('[License] Displaying Free tier status');
-  }
-}
-
-// 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';
+    // Show FREE tier status (no license validation)
+    const freeTierStatus = document.getElementById('free-tier-status');
+    const proTierStatus = document.getElementById('pro-tier-status');
+    const licenseActivation = document.getElementById('license-activation');
 
-  // 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
-    // Note: ls_instance_id is the LemonSqueezy instance ID set during activation
-    const stored = await chrome.storage.local.get(['ls_instance_id']);
-    const currentInstanceId = stored.ls_instance_id;
+    if (freeTierStatus) freeTierStatus.style.display = 'block';
+    if (proTierStatus) proTierStatus.style.display = 'none';
+    if (licenseActivation) licenseActivation.style.display = 'none';
 
-    // Fetch activations from Firebase
-    const data = await licenseClient.listActivations(licenseKey);
-    const activations = data.activations || [];
+    // Fetch and display current usage count
+    updateUsageDisplay();
 
-    // 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>`;
+    // console.log('[Tier] FREE version - showing usage counter');
   }
 }
 
 /**
- * Hide the inline activation manager with slide-up animation
+ * Fetch usage from background and update the display
  */
-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
-    // Compare against identifier (unique per activation), not name (same for all activations from this device)
-    const isCurrentDevice = 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');
-
+async function updateUsageDisplay() {
   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);
+    const response = await chrome.runtime.sendMessage({ action: 'getUsage' });
 
-    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;
+    if (response && response.success) {
+      const usageCountEl = document.getElementById('usage-count');
+      const usageLimitEl = document.getElementById('usage-limit');
 
-        // Retry activation automatically
-        await handleLicenseActivation();
-      }, 1000);
+      if (usageCountEl) {
+        usageCountEl.textContent = response.count || 0;
+      }
+      if (usageLimitEl) {
+        usageLimitEl.textContent = response.limit || 5;
+      }
 
-    } else {
-      throw new Error(result.error || 'Deactivation failed');
+      // console.log(`[Usage] Display updated: ${response.count}/${response.limit}`);
     }
-
   } 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();
-  const messageDiv = document.getElementById('license-message');
-
-  if (!licenseKey) {
-    messageDiv.textContent = 'Please enter a license key';
-    messageDiv.style.color = '#f44336';
-    return;
-  }
-
-  messageDiv.textContent = 'Validating...';
-  messageDiv.style.color = '#2196F3';
-  console.log('[License] Validating license key...');
-
-  // Clear any existing instance ID to force fresh activation
-  // This ensures we don't try to validate with stale/deleted instance IDs
-  await chrome.storage.local.remove(['ls_instance_id']);
-  console.log('[License] Cleared existing instance ID for fresh activation');
-
-  const result = await licenseClient.validateLicense(licenseKey);
-  console.log('[License] Validation result:', result);
-  console.log('[License] Error value:', result.error);
-  console.log('[License] Error type:', typeof result.error);
-
-  if (result.valid) {
-    messageDiv.textContent = 'License activated successfully!';
-    messageDiv.style.color = '#4caf50';
-    document.getElementById('license-key-input').value = '';
-    await initializeLicenseUI(); // Refresh UI
-  } else {
-    // Check if activation limit reached
-    console.log('[License] Checking if activation limit reached...');
-    console.log('[License] result.error === "ACTIVATION_LIMIT_REACHED":', result.error === 'ACTIVATION_LIMIT_REACHED');
-    console.log('[License] result.error includes "activation limit":', result.error && result.error.toLowerCase().includes('activation limit'));
-
-    if (result.error === 'ACTIVATION_LIMIT_REACHED' ||
-        (result.error && result.error.toLowerCase().includes('activation limit'))) {
-      console.log('[License] Activation limit reached, showing inline activation manager');
-      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';
-    }
+    console.error('[Usage] Failed to fetch usage:', error);
   }
 }
 
-// Upgrade button handler
+// Upgrade button handler - redirect to LemonSqueezy purchase page
 function handleUpgradeClick() {
-  console.log('[License] Opening upgrade page:', LEMONSQUEEZY_CHECKOUT_URL);
-  chrome.tabs.create({url: LEMONSQUEEZY_CHECKOUT_URL});
+  // console.log('[Upgrade] Opening LemonSqueezy PRO purchase page');
+  chrome.tabs.create({url: PRO_PURCHASE_URL});
 }
 
-// Listen for messages from activation manager
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  if (message.type === 'RETRY_ACTIVATION' && message.licenseKey) {
-    console.log('[License] Retrying activation after deactivation');
-
-    // Set the license key in the input
-    const licenseKeyInput = document.getElementById('license-key-input');
-    if (licenseKeyInput) {
-      licenseKeyInput.value = message.licenseKey;
-    }
-
-    // Retry activation
-    handleLicenseActivation().then(() => {
-      console.log('[License] Retry activation complete');
-    });
-  }
-});
-
 document.addEventListener('DOMContentLoaded', () => {
-  console.log('DOM loaded, initializing popup');
+  // console.log('DOM loaded, initializing popup');
 
-  // Initialize license UI first
-  initializeLicenseUI().catch(error => {
-    console.error('[License] Failed to initialize license UI:', error);
-  });
+  // Initialize tier status display
+  initializeTierStatus();
 
-  // License event handlers
-  const activateLicenseBtn = document.getElementById('activate-license-btn');
+  // Upgrade button handler
   const upgradeBtn = document.getElementById('upgrade-btn');
-
-  if (activateLicenseBtn) {
-    activateLicenseBtn.addEventListener('click', handleLicenseActivation);
-  }
-
   if (upgradeBtn) {
     upgradeBtn.addEventListener('click', handleUpgradeClick);
   }
 
+  // Settings button handler - open options page
+  const settingsBtn = document.getElementById('settings-btn');
+  if (settingsBtn) {
+    settingsBtn.addEventListener('click', () => {
+      chrome.runtime.openOptionsPage();
+    });
+    // Add hover effect
+    settingsBtn.addEventListener('mouseenter', () => {
+      settingsBtn.style.opacity = '1';
+    });
+    settingsBtn.addEventListener('mouseleave', () => {
+      settingsBtn.style.opacity = '0.6';
+    });
+  }
+
   // Function to update button states based on server status
   async function updateButtonStatesForServerStatus() {
     const serverStatus = await checkServerStatus();
@@ -1450,19 +1143,19 @@ document.addEventListener('DOMContentLoaded', () => {
       clearInterval(serverPollingInterval);
     }
     serverPollingInterval = setInterval(updateButtonStatesForServerStatus, 3000);
-    console.log('Server polling started (every 3 seconds)');
+    // console.log('Server polling started (every 3 seconds)');
   }
 
   function stopPolling() {
     if (serverPollingInterval) {
       clearInterval(serverPollingInterval);
       serverPollingInterval = null;
-      console.log('Server polling stopped');
+      // console.log('Server polling stopped');
     }
   }
 
   async function checkServerOnce() {
-    console.log('Running single server check...');
+    // console.log('Running single server check...');
     await updateButtonStatesForServerStatus();
   }
 
@@ -1505,7 +1198,7 @@ document.addEventListener('DOMContentLoaded', () => {
         stopPolling();
       }
 
-      console.log('Continuous polling:', isChecked ? 'enabled' : 'disabled');
+      // console.log('Continuous polling:', isChecked ? 'enabled' : 'disabled');
     });
 
     // Retry button click handler
@@ -1534,7 +1227,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Save changes when checkbox is clicked
     enhancedCaptureCheckbox.addEventListener('change', () => {
       chrome.storage.local.set({ enhancedClickCapture: enhancedCaptureCheckbox.checked });
-      console.log('Enhanced click capture setting changed to:', enhancedCaptureCheckbox.checked);
+      // console.log('Enhanced click capture setting changed to:', enhancedCaptureCheckbox.checked);
     });
   }
 
@@ -1661,10 +1354,10 @@ document.addEventListener('DOMContentLoaded', () => {
       isRecording = true;
       recordingStartTime = result.recordingStartTime || Date.now();
       updateRecordingUI();
-      console.log('Restored recording state from storage');
+      // console.log('Restored recording state from storage');
     } else if (result.pendingRecording && result.pendingTabId) {
       // Auto-start recording for the pending tab
-      console.log('Found pending recording for tab:', result.pendingTabId);
+      // console.log('Found pending recording for tab:', result.pendingTabId);
       const targetTabId = result.pendingTabId;
       chrome.storage.local.remove(['pendingRecording', 'pendingTabId']);
       
@@ -1693,10 +1386,10 @@ document.addEventListener('DOMContentLoaded', () => {
   const recordingStatus = document.getElementById('recordingStatus');
   
   if (recordBtn) {
-    console.log('Setting up record button handler');
+    // console.log('Setting up record button handler');
     recordBtn.addEventListener('click', async (e) => {
       e.preventDefault();
-      console.log('Record button clicked, isRecording:', isRecording);
+      // console.log('Record button clicked, isRecording:', isRecording);
       
       if (!isRecording && !isStoppingRecording) {
         try {
@@ -1705,15 +1398,26 @@ document.addEventListener('DOMContentLoaded', () => {
           const isBrowserOnlyMode = !serverStatus.connected;
 
           if (isBrowserOnlyMode) {
-            console.log('Starting recording in browser-only mode');
+            // console.log('Starting recording in browser-only mode');
             // Browser-only mode - proceed with local storage
           } else {
-            console.log('Starting recording with server');
+            // console.log('Starting recording with server');
+          }
+
+          // Check FREE tier usage limit before starting
+          const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
+          if (usageCheck && !usageCheck.allowed) {
+            // console.log('[Usage] Daily limit reached:', usageCheck);
+            if (recordingStatus) {
+              recordingStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
+                                         `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited.</small>`;
+            }
+            return;
           }
 
           // Get the current active tab
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-          console.log('Current tab:', tab);
+          // console.log('Current tab:', tab);
           
           if (!tab || !tab.id) {
             console.error('No active tab found');
@@ -1757,7 +1461,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             
             if (response && response.success) {
-              console.log('Recording started successfully');
+              // console.log('Recording started successfully');
               isRecording = true;
               recordingStartTime = Date.now();
               
@@ -1780,7 +1484,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       } else if (isRecording && !isStoppingRecording) {
         // Stop recording
-        console.log('Stopping recording...');
+        // console.log('Stopping recording...');
         isStoppingRecording = true;
         recordBtn.textContent = 'Stopping...';
         recordBtn.disabled = true;
@@ -1799,19 +1503,16 @@ document.addEventListener('DOMContentLoaded', () => {
           }
 
           if (response && response.success) {
-            console.log('Recording stopped successfully', response);
+            // console.log('Recording stopped successfully', response);
             isRecording = false;
             updateRecordingUI();
 
-            console.log('About to show loading overlay for screen-recording-section');
             // Show loading overlay over screen recording section
             showSectionLoading('screen-recording-section', 'Saving screen recording...');
-            console.log('Loading overlay should be visible now');
 
             // Use then/catch instead of async/await since we're in a callback
             loadScreenRecordings(true)
               .then(() => {
-                console.log('Screen recordings loaded successfully');
                 // Show success toast
                 const frameCount = response.frameCount || 0;
                 const duration = response.duration || '0s';
@@ -1822,7 +1523,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 showToast('Error loading recordings. Please refresh.', 3000, 'error');
               })
               .finally(() => {
-                console.log('Hiding loading overlay');
                 // Always hide loading overlay
                 hideSectionLoading('screen-recording-section');
               });
@@ -1889,26 +1589,16 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
           }
 
-          // Check license before allowing workflow recording (same pattern as strategic plan)
-          console.log('[License] Checking license for workflow recording...');
-          const licenseCheck = await chrome.runtime.sendMessage({
-            action: 'checkLicenseForWorkflow'
-          });
-          console.log('[License] License check result:', licenseCheck);
-
-          // If not Pro or limit reached, show upgrade modal
-          if (!licenseCheck || !licenseCheck.allowed || (licenseCheck.tier && licenseCheck.tier !== 'pro')) {
-            const message = licenseCheck?.message || 'Workflow Recording is a Pro feature. Upgrade to Pro for unlimited workflow recordings with function tracing.';
-
-            // Show modal
-            if (confirm(`${message}\n\nWould you like to upgrade now?`)) {
-              // Open upgrade page
-              chrome.tabs.create({
-                url: LEMONSQUEEZY_CHECKOUT_URL
-              });
+          // Check FREE tier usage limit before starting
+          const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
+          if (usageCheck && !usageCheck.allowed) {
+            // console.log('[Usage] Daily limit reached:', usageCheck);
+            const workflowStatus = document.getElementById('workflowRecordingStatus');
+            if (workflowStatus) {
+              workflowStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
+                                       `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited recordings.</small>`;
             }
-
-            return; // Stop execution
+            return;
           }
 
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
@@ -1934,23 +1624,16 @@ document.addEventListener('DOMContentLoaded', () => {
           }
           
           // Send message to background script to start recording
-          console.log('[Popup v2.0.6] Sending startWorkflowRecording message to background');
-          chrome.runtime.sendMessage({ 
+          chrome.runtime.sendMessage({
             action: 'startWorkflowRecording',
             tabId: tab.id,
             includeLogsInExport: includeLogsInExport,
             sessionName: sessionName,
             screenshotSettings: screenshotSettings
           }, (response) => {
-            console.log('[Popup v2.0.6] Received response from background:', response);
-            console.log('[Popup v2.0.6] chrome.runtime.lastError:', chrome.runtime.lastError);
-            console.log('[Popup v2.0.6] Checking which branch will execute...');
-            
             if (chrome.runtime.lastError) {
-              console.error('[Popup v2.0.6] RUNTIME ERROR BRANCH:', chrome.runtime.lastError);
               // Check if this tab allows content script injection
               if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('moz-extension://')) {
-                console.log('Cannot inject content script into restricted URL:', tab.url);
                 return;
               }
               // Inject content script if needed
@@ -1996,31 +1679,17 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
               });
             } else if (response && response.success) {
-              console.log('[Popup v2.0.6] *** SUCCESS BRANCH REACHED! ***');
-              console.log('[Popup v2.0.6] Workflow recording started successfully, updating UI now');
-              console.log('[Popup v2.0.6] Setting isWorkflowRecording = true');
               isWorkflowRecording = true;
               // Save state and start time to storage
               const startTime = Date.now();
-              chrome.storage.local.set({ 
+              chrome.storage.local.set({
                 workflowRecording: true,
                 workflowStartTime: startTime
               });
               workflowStartTime = startTime;
-              console.log('[Popup v2.0.6] About to call updateWorkflowRecordingUI()');
               updateWorkflowRecordingUI();
-              console.log('[Popup v2.0.6] updateWorkflowRecordingUI() call completed');
               // Hide any previous results
               if (workflowRecordingsList) workflowRecordingsList.style.display = 'none';
-            } else {
-              console.error('[Popup v2.0.6] *** ELSE BRANCH - Unexpected response ***');
-              console.error('[Popup v2.0.6] Response details:', {
-                exists: !!response,
-                success: response?.success,
-                type: typeof response,
-                keys: response ? Object.keys(response) : 'no response',
-                fullResponse: response
-              });
             }
           });
         } catch (error) {
@@ -2070,9 +1739,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 // Single source of truth - load from server
                 await loadWorkflowRecordings(true);
 
-                // Show success toast
+                // Show success toast - response.workflow.actions is the array
                 const workflowData = response.workflow;
-                const actionCount = workflowData?.workflow?.actions?.length || workflowData?.workflow?.length || 0;
+                const actionCount = workflowData?.actions?.length || 0;
                 showToast(`Workflow recording saved! ${actionCount} actions recorded`, 3000, 'success');
               } catch (error) {
                 console.error('Error loading workflow recordings:', error);
@@ -2122,7 +1791,7 @@ document.addEventListener('DOMContentLoaded', () => {
           }
           
           if (response && response.success) {
-            console.log('Restore point created:', response.restorePointId);
+            // console.log('Restore point created:', response.restorePointId);
             // Refresh restore points list
             loadRestorePoints();
           } else {
@@ -2256,7 +1925,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         
         if (response && response.success) {
-          console.log('Successfully restored from point');
+          // console.log('Successfully restored from point');
         } else {
           console.error('Failed to restore from point:', response);
         }
@@ -2278,7 +1947,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
         
         if (response.ok) {
-          console.log('Restore point deleted');
+          // console.log('Restore point deleted');
           break;
         }
       } catch (error) {
@@ -2472,7 +2141,7 @@ async function loadWorkflowRecordings(autoShow = false) {
       const response = await fetch(`http://localhost:${port}/chromedebug/workflow-recordings`);
       if (response.ok) {
         const data = await response.json();
-        console.log('Loaded workflow recordings from port', port, ':', data);
+        // console.log('Loaded workflow recordings from port', port, ':', data);
         
         // Handle both data.recordings and direct array response
         const recordings = data.recordings || data;
@@ -2567,7 +2236,7 @@ async function loadWorkflowRecordings(autoShow = false) {
             playBtn.addEventListener('click', () => playWorkflow(recording.session_id));
 
             deleteBtn.addEventListener('click', () => {
-              console.log('Delete clicked for recording:', recording);
+              // console.log('Delete clicked for recording:', recording);
               const recordingId = recording.id || recording.session_id;
               if (!recordingId) {
                 console.error('No ID found for recording:', recording);
@@ -2625,7 +2294,7 @@ async function loadWorkflowRecordings(autoShow = false) {
 
 // Function to play a workflow
 async function playWorkflow(sessionId) {
-  console.log('Playing workflow:', sessionId);
+  // console.log('Playing workflow:', sessionId);
   
   try {
     // Get the current active tab
@@ -2705,7 +2374,7 @@ async function playWorkflow(sessionId) {
           }, 100);
         });
       } else if (response && response.success) {
-        console.log('Workflow playback started');
+        // console.log('Workflow playback started');
       }
     });
   } catch (error) {
@@ -2785,11 +2454,11 @@ async function loadScreenRecordings(autoShow = false) {
 
   // First, load browser-only recordings from IndexedDB
   try {
-    console.log('[Popup] Requesting browser-only recordings...');
+    // console.log('[Popup] Requesting browser-only recordings...');
     const browserRecordings = await chrome.runtime.sendMessage({
       action: 'getBrowserRecordings'
     });
-    console.log('[Popup] Browser recordings received:', browserRecordings);
+    // console.log('[Popup] Browser recordings received:', browserRecordings);
 
     if (browserRecordings && browserRecordings.length > 0) {
       hasRecordings = true;
@@ -2929,10 +2598,10 @@ async function loadScreenRecordings(autoShow = false) {
             const formattedDate = date.toLocaleString();
 
             // Use session name if available, otherwise use session ID
-            console.log('Recording data:', recording);
-            console.log('Recording name:', recording.name);
+            // console.log('Recording data:', recording);
+            // console.log('Recording name:', recording.name);
             const displayName = recording.name || `Recording ${recording.sessionId}`;
-            console.log('Display name:', displayName);
+            // console.log('Display name:', displayName);
 
             recordingItem.innerHTML = `
               <div class="recording-info">
@@ -2972,9 +2641,9 @@ async function loadScreenRecordings(autoShow = false) {
               let prompt;
 
               if (name) {
-                prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to display the screen recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
+                prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to display the screen recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
               } else {
-                prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to display the screen recording "${sessionId}" that was recorded on port ${port}.`;
+                prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to display the screen recording "${sessionId}" that was recorded on port ${port}.`;
               }
 
               navigator.clipboard.writeText(prompt).then(() => {
@@ -3228,14 +2897,25 @@ chrome.storage.onChanged.addListener((changes, namespace) => {
       isWorkflowRecording = changes.workflowRecording.newValue === true;
       updateWorkflowRecordingUI();
     }
+    // Update usage display when usage count changes
+    if (changes.chromedebug_daily_usage) {
+      const usage = changes.chromedebug_daily_usage.newValue;
+      if (usage) {
+        const usageCountEl = document.getElementById('usage-count');
+        const usageLimitEl = document.getElementById('usage-limit');
+        if (usageCountEl) usageCountEl.textContent = usage.count || 0;
+        if (usageLimitEl) usageLimitEl.textContent = '5'; // FREE tier limit
+        // console.log(`[Usage] Storage updated: ${usage.count}/5`);
+      }
+    }
   }
 });
 
 // Listen for messages from background script
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  console.log('Popup received message:', request);
+  // console.log('Popup received message:', request);
   if (request.action === 'uploadComplete') {
-    console.log('Upload complete with ID:', request.recordingId);
+    // console.log('Upload complete with ID:', request.recordingId);
     const recordingStatus = document.getElementById('recordingStatus');
     if (recordingStatus) {
       recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong>`;
@@ -3247,7 +2927,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       if (recordingStatus) recordingStatus.textContent = '';
     }, 3000);
   } else if (request.action === 'sessionComplete') {
-    console.log('Session complete:', request.sessionId, 'with', request.totalChunks, 'chunks');
+    // console.log('Session complete:', request.sessionId, 'with', request.totalChunks, 'chunks');
     const recordingStatus = document.getElementById('recordingStatus');
     if (recordingStatus) {
       recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording session saved!</strong><br>` +
@@ -3260,18 +2940,26 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       if (recordingStatus) recordingStatus.textContent = '';
     }, 5000);
   } else if (request.action === 'frameSessionComplete') {
-    console.log('Frame session complete:', request.sessionId, 'with', request.totalFrames, 'frames');
+    // console.log('Frame session complete:', request.sessionId, 'with', request.totalFrames, 'frames');
     const recordingStatus = document.getElementById('recordingStatus');
     if (recordingStatus) {
       recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong><br>` +
                                    `<small>${request.totalFrames} frames (${Math.round(request.duration / 1000)}s)</small>`;
     }
-    // Add frame session to recordings list
-    addRecording(request.sessionId, false, true, request.serverPort, null, request.sessionName);
+    // Reload screen recordings list to show the new recording
+    loadScreenRecordings(true);
     // Clear status after 5 seconds
     setTimeout(() => {
       if (recordingStatus) recordingStatus.textContent = '';
     }, 5000);
+  } else if (request.action === 'workflowRecordingSaved') {
+    // console.log('Workflow recording saved:', request.workflowId);
+    // Reload workflow recordings list to show the new recording
+    loadWorkflowRecordings(true);
+  } else if (request.action === 'recordingStopped') {
+    // console.log('Recording stopped:', request.sessionId);
+    // Reload screen recordings list immediately
+    loadScreenRecordings(true);
   } else if (request.action === 'uploadError') {
     const recordingStatus = document.getElementById('recordingStatus');
     if (recordingStatus) {