@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

package/chrome-extension/popup.js

@@ -2,29 +2,9 @@
 const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
 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
-  }
-})();
+// Chrome Web Store URLs for upgrade flow
+const CHROME_STORE_PRO_URL = 'https://chrome.google.com/webstore/detail/chromedebug-mcp-pro/[PRO_EXTENSION_ID]';
+const IS_PRO_VERSION = chrome.runtime.getManifest().name.includes('PRO');
 
 // Global variables for recording functionality
 let isRecording = false;
@@ -46,6 +26,69 @@ let workflowStartTime = null;
 // Debounce timer for screenshot quality slider
 let screenshotQualityDebounceTimer = null;
 
+// Toast notification function
+function showToast(message, duration = 2000, type = 'info') {
+  // Create toast element
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+  toast.style.cssText = `
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 12px 20px;
+    background: ${type === 'error' ? '#f44336' : type === 'success' ? '#4CAF50' : '#2196F3'};
+    color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+    z-index: 10000;
+    font-size: 14px;
+    animation: slideInRight 0.3s ease-out;
+  `;
+
+  document.body.appendChild(toast);
+
+  // Auto remove after duration
+  setTimeout(() => {
+    toast.style.animation = 'slideOutRight 0.3s ease-in';
+    setTimeout(() => toast.remove(), 300);
+  }, duration);
+}
+
+// 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);
+
+  const overlay = document.createElement('div');
+  overlay.className = 'recording-section-overlay';
+  overlay.innerHTML = `
+    <div class="spinner"></div>
+    <div class="loading-text">${message}</div>
+  `;
+  overlay.setAttribute('data-loading-overlay', 'true');
+  section.appendChild(overlay);
+  console.log(`Overlay appended to section. Overlay:`, overlay);
+}
+
+function hideSectionLoading(sectionId) {
+  const section = document.getElementById(sectionId);
+  if (!section) return;
+
+  const overlay = section.querySelector('[data-loading-overlay="true"]');
+  if (overlay) {
+    overlay.remove();
+  }
+}
+
 // Workflow recording functions
 function updateWorkflowRecordingUI() {
   const workflowBtn = document.getElementById('workflowRecordBtn');
@@ -319,10 +362,13 @@ async function checkServerStatus() {
       });
 
       clearTimeout(timeoutId);
-      console.log(`[popup.js] Port ${port} responded: ${response.ok}`);
+      // Only log successful connections to reduce console noise
+      if (response.ok) {
+        console.log(`[popup.js] ✓ Connected to server on port ${port}`);
+      }
       return response.ok;
     } catch (error) {
-      console.log(`[popup.js] Port ${port} failed:`, error.message);
+      // Silent failure - port discovery is expected to fail for most ports
       return false;
     }
   };
@@ -333,7 +379,6 @@ async function checkServerStatus() {
     if (await tryPort(cachedPort.lastSuccessfulPort, 500)) {
       connected = true;
       connectedPort = cachedPort.lastSuccessfulPort;
-      console.log(`[popup.js] Connected to cached port ${connectedPort}`);
     }
   }
 
@@ -344,7 +389,6 @@ async function checkServerStatus() {
       if (await tryPort(port, 500)) {
         connected = true;
         connectedPort = port;
-        console.log(`[popup.js] Connected to common port ${connectedPort}`);
         break;
       }
     }
@@ -356,7 +400,6 @@ async function checkServerStatus() {
       if (await tryPort(port, 1000)) {
         connected = true;
         connectedPort = port;
-        console.log(`[popup.js] Connected to extended port ${connectedPort}`);
         break;
       }
     }
@@ -368,7 +411,6 @@ async function checkServerStatus() {
       if (await tryPort(port, 1000)) {
         connected = true;
         connectedPort = port;
-        console.log(`[popup.js] Connected to alternative port ${connectedPort}`);
         break;
       }
     }
@@ -377,18 +419,13 @@ async function checkServerStatus() {
   // Cache the successful port for faster connection next time
   if (connected && connectedPort) {
     await chrome.storage.local.set({ lastSuccessfulPort: connectedPort });
+  } else {
+    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';
 
@@ -408,9 +445,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>
     `;
 
@@ -865,7 +899,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(() => {
@@ -902,7 +936,16 @@ function updateRecordingsDisplay(recordings) {
       const recordingId = e.target.getAttribute('data-id');
       const type = e.target.getAttribute('data-type');
 
-      // Check if pro version (frame editor) is available
+      // First check if server is available (for server recordings)
+      const serverStatus = await checkServerStatus();
+
+      if (!serverStatus.connected) {
+        // No server - this is a server recording that requires server to view
+        alert('This recording requires Chrome Debug server to view.\n\nStart the server with: chromedebug-mcp-server\n\nOr delete this old recording and create new browser-only recordings with Export functionality.');
+        return;
+      }
+
+      // Server available - check if pro version (frame editor) is available
       try {
         const frameEditorUrl = type === 'snapshot'
           ? chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recordingId}&type=snapshot`)
@@ -929,350 +972,71 @@ 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';
-
-  // 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;
+    // 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');
 
-    // Fetch activations from Firebase
-    const data = await licenseClient.listActivations(licenseKey);
-    const activations = data.activations || [];
+    if (freeTierStatus) freeTierStatus.style.display = 'block';
+    if (proTierStatus) proTierStatus.style.display = 'none';
+    if (licenseActivation) licenseActivation.style.display = 'none';
 
-    // Render activations
-    renderInlineActivations(activations, currentInstanceId, licenseKey);
+    // Fetch and display current usage count
+    updateUsageDisplay();
 
-  } 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
- */
-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
+ * Fetch usage from background and update the display
  */
-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');
-
+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);
-
-    if (result.deactivated) {
-      messageDiv.textContent = 'Deactivated! Activating on this device...';
-      messageDiv.style.color = '#4caf50';
+    const response = await chrome.runtime.sendMessage({ action: 'getUsage' });
 
-      // 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);
+    console.error('[Usage] Failed to fetch usage:', error);
   }
 }
 
-// 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';
-    }
-  }
-}
-
-// Upgrade button handler
+// Upgrade button handler - redirect to Chrome Web Store PRO version
 function handleUpgradeClick() {
-  console.log('[License] Opening upgrade page:', LEMONSQUEEZY_CHECKOUT_URL);
-  chrome.tabs.create({url: LEMONSQUEEZY_CHECKOUT_URL});
+  console.log('[Upgrade] Opening Chrome Web Store PRO version');
+  chrome.tabs.create({url: CHROME_STORE_PRO_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');
 
-  // 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);
   }
@@ -1282,18 +1046,37 @@ document.addEventListener('DOMContentLoaded', () => {
     const serverStatus = await checkServerStatus();
     const recordBtn = document.getElementById('recordBtn');
     const workflowRecordBtn = document.getElementById('workflowRecordBtn');
-    
+    const browserOnlyBanner = document.getElementById('browserOnlyBanner');
+    const quotaMeter = document.getElementById('quotaMeter');
+
     if (!serverStatus.connected) {
-      // Disable recording buttons when server is not running
-      if (recordBtn && !isRecording) {
-        recordBtn.style.opacity = '0.6';
-        recordBtn.title = 'Server not running - please start Chrome Debug server';
+      // Show browser-only mode UI
+      if (browserOnlyBanner) {
+        browserOnlyBanner.style.display = 'block';
+      }
+      if (quotaMeter) {
+        quotaMeter.style.display = 'block';
+        updateQuotaUI(); // Update quota display
       }
-      if (workflowRecordBtn && !isWorkflowRecording) {
-        workflowRecordBtn.style.opacity = '0.6';
-        workflowRecordBtn.title = 'Server not running - please start Chrome Debug server';
+
+      // Enable recording buttons in browser-only mode
+      if (recordBtn) {
+        recordBtn.style.opacity = '1';
+        recordBtn.title = 'Recording will be stored in browser storage';
+      }
+      if (workflowRecordBtn) {
+        workflowRecordBtn.style.opacity = '1';
+        workflowRecordBtn.title = 'Recording will be stored in browser storage';
       }
     } else {
+      // Hide browser-only mode UI when server is connected
+      if (browserOnlyBanner) {
+        browserOnlyBanner.style.display = 'none';
+      }
+      if (quotaMeter) {
+        quotaMeter.style.display = 'none';
+      }
+
       // Enable recording buttons when server is running
       if (recordBtn) {
         recordBtn.style.opacity = '1';
@@ -1305,11 +1088,127 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
   }
+
+  // Update quota UI for browser-only mode
+  async function updateQuotaUI() {
+    try {
+      // Request quota info from background script
+      const response = await chrome.runtime.sendMessage({
+        action: 'getQuotaInfo'
+      });
+
+      if (response && response.quotaInfo) {
+        const { percentage, usageMB, quotaMB, availableMB } = response.quotaInfo;
+
+        const quotaBar = document.getElementById('quotaBar');
+        const quotaText = document.getElementById('quotaText');
+        const quotaAvailable = document.getElementById('quotaAvailable');
+        const quotaUsage = document.getElementById('quotaUsage');
+
+        if (quotaBar && quotaText && quotaAvailable) {
+          const percentageValue = Math.round(percentage * 100);
+          quotaBar.style.width = `${percentageValue}%`;
+
+          // Change color based on usage
+          if (percentage > 0.8) {
+            quotaBar.style.background = '#f44336'; // Red
+          } else if (percentage > 0.6) {
+            quotaBar.style.background = '#ff9800'; // Orange
+          } else {
+            quotaBar.style.background = '#4CAF50'; // Green
+          }
+
+          quotaText.textContent = `${percentageValue}% used`;
+          quotaAvailable.textContent = `${availableMB || 0} MB available`;
+        }
+
+        if (quotaUsage) {
+          quotaUsage.textContent = `${usageMB || 0} MB / ${quotaMB || 0} MB`;
+        }
+      }
+    } catch (error) {
+      console.error('Failed to update quota UI:', error);
+    }
+  }
   
-  // Initialize server status check
-  updateButtonStatesForServerStatus();
-  setInterval(updateButtonStatesForServerStatus, 3000);
-  
+  // Server polling control
+  let serverPollingInterval = null;
+
+  function startPolling() {
+    if (serverPollingInterval) {
+      clearInterval(serverPollingInterval);
+    }
+    serverPollingInterval = setInterval(updateButtonStatesForServerStatus, 3000);
+    console.log('Server polling started (every 3 seconds)');
+  }
+
+  function stopPolling() {
+    if (serverPollingInterval) {
+      clearInterval(serverPollingInterval);
+      serverPollingInterval = null;
+      console.log('Server polling stopped');
+    }
+  }
+
+  async function checkServerOnce() {
+    console.log('Running single server check...');
+    await updateButtonStatesForServerStatus();
+  }
+
+  // Initialize polling controls
+  const pollContinuouslyCheckbox = document.getElementById('pollContinuouslyCheckbox');
+  const retryConnectionBtn = document.getElementById('retryConnectionBtn');
+
+  if (pollContinuouslyCheckbox && retryConnectionBtn) {
+    // Load saved polling preference (default: true)
+    chrome.storage.local.get(['pollContinuously'], (result) => {
+      const shouldPoll = result.pollContinuously !== false; // Default to true
+      pollContinuouslyCheckbox.checked = shouldPoll;
+
+      // Show/hide retry button based on preference
+      retryConnectionBtn.style.display = shouldPoll ? 'none' : 'inline-block';
+
+      // Initial server check
+      updateButtonStatesForServerStatus();
+
+      // Start polling if enabled
+      if (shouldPoll) {
+        startPolling();
+      }
+    });
+
+    // Checkbox change handler
+    pollContinuouslyCheckbox.addEventListener('change', () => {
+      const isChecked = pollContinuouslyCheckbox.checked;
+
+      // Save preference
+      chrome.storage.local.set({ pollContinuously: isChecked });
+
+      // Show/hide retry button
+      retryConnectionBtn.style.display = isChecked ? 'none' : 'inline-block';
+
+      // Start or stop polling
+      if (isChecked) {
+        startPolling();
+      } else {
+        stopPolling();
+      }
+
+      console.log('Continuous polling:', isChecked ? 'enabled' : 'disabled');
+    });
+
+    // Retry button click handler
+    retryConnectionBtn.addEventListener('click', () => {
+      showToast('Retrying connection...', 2000, 'info');
+      checkServerOnce();
+    });
+  } else {
+    // Fallback if polling controls not found - use default behavior
+    console.warn('Polling controls not found, using default polling behavior');
+    updateButtonStatesForServerStatus();
+    setInterval(updateButtonStatesForServerStatus, 3000);
+  }
+
   // Initialize site management functionality
   initializeSiteManagement();
   
@@ -1414,9 +1313,13 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
   });
-  
-  // Load saved recordings
+
+  // Load saved recordings (legacy)
   loadRecordings();
+
+  // Load screen and workflow recordings with saved preferences
+  loadScreenRecordings();
+  loadWorkflowRecordings();
   
   // Setup recording settings event listeners
   const frameRateSelect = document.getElementById('frameRate');
@@ -1488,19 +1391,26 @@ document.addEventListener('DOMContentLoaded', () => {
         try {
           // Check if server is running before starting recording
           const serverStatus = await checkServerStatus();
-          if (!serverStatus.connected) {
-            console.error('Server not running');
+          const isBrowserOnlyMode = !serverStatus.connected;
+
+          if (isBrowserOnlyMode) {
+            console.log('Starting recording in browser-only mode');
+            // Browser-only mode - proceed with local storage
+          } else {
+            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;">Error: Server not running</strong><br>' +
-                                        '<small>Please start the Chrome Debug server first</small>';
+              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>`;
             }
-            // Clear error message after 5 seconds
-            setTimeout(() => {
-              if (recordingStatus) recordingStatus.textContent = '';
-            }, 5000);
             return;
           }
-          
+
           // Get the current active tab
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
           console.log('Current tab:', tab);
@@ -1531,10 +1441,11 @@ document.addEventListener('DOMContentLoaded', () => {
           };
           
           // Send message to background to start recording
-          chrome.runtime.sendMessage({ 
-            action: 'startRecording', 
+          chrome.runtime.sendMessage({
+            action: 'startRecording',
             tabId: tab.id,
-            settings: settings
+            settings: settings,
+            mode: isBrowserOnlyMode ? 'browser-only' : 'server'
           }, (response) => {
             recordBtn.disabled = false;
             
@@ -1574,23 +1485,47 @@ document.addEventListener('DOMContentLoaded', () => {
         recordBtn.textContent = 'Stopping...';
         recordBtn.disabled = true;
         
-        chrome.runtime.sendMessage({ 
+        chrome.runtime.sendMessage({
           action: 'stopRecording'
-        }, (response) => {
+        }, async (response) => {
           isStoppingRecording = false;
           recordBtn.disabled = false;
-          
+
           if (chrome.runtime.lastError) {
             console.error('Error stopping recording:', chrome.runtime.lastError);
             recordingStatus.textContent = 'Error: ' + chrome.runtime.lastError.message;
             recordBtn.textContent = 'Stop Recording';
             return;
           }
-          
+
           if (response && response.success) {
-            console.log('Recording stopped successfully');
+            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';
+                showToast(`Screen recording saved! ${frameCount} frames (${duration})`, 3000, 'success');
+              })
+              .catch(error => {
+                console.error('Error loading screen recordings:', error);
+                showToast('Error loading recordings. Please refresh.', 3000, 'error');
+              })
+              .finally(() => {
+                console.log('Hiding loading overlay');
+                // Always hide loading overlay
+                hideSectionLoading('screen-recording-section');
+              });
           } else {
             recordingStatus.textContent = 'Error: ' + (response?.error || 'Failed to stop recording');
             recordBtn.textContent = 'Stop Recording';
@@ -1654,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 });
@@ -1822,86 +1747,29 @@ document.addEventListener('DOMContentLoaded', () => {
             if (response && response.success && response.workflow) {
               isWorkflowRecording = false;
               // Clear state from storage
-              chrome.storage.local.set({ 
+              chrome.storage.local.set({
                 workflowRecording: false,
                 workflowStartTime: null
               });
               updateWorkflowRecordingUI();
-              
-              // Display the workflow results
-              if (workflowRecordingsContainer) {
-                let workflowItem;
-                
-                // Get current server port for prompt generation
-                const serverConnection = await checkServerStatus();
-                const currentServerPort = serverConnection.connectedPort;
-                
-                // The response.workflow contains the full response from stopWorkflowRecording
+
+              // Show loading overlay over workflow recording section
+              showSectionLoading('workflow-recording-section', 'Saving workflow recording...');
+
+              try {
+                // Single source of truth - load from server
+                await loadWorkflowRecordings(true);
+
+                // Show success toast - response.workflow.actions is the array
                 const workflowData = response.workflow;
-                
-                if (workflowData.savedToServer) {
-                  // Create a saved recording entry like screen recordings
-                  workflowItem = document.createElement('div');
-                  workflowItem.className = 'recording-item';
-                  workflowItem.innerHTML = `
-                    <div class="recording-info">
-                      <div style="font-weight: bold; margin-bottom: 4px;">
-                        ${workflowData.workflow.sessionId} (workflow)
-                      </div>
-                      <div style="color: #666; font-size: 11px;">
-                        ${workflowData.workflow.actions.length} actions • ${workflowData.workflow.logs.length} logs
-                      </div>
-                    </div>
-                    <div style="display: flex; gap: 4px; margin-top: 8px;">
-                      <button class="copy-id-btn" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
-                        Copy ID
-                      </button>
-                      <button class="copy-prompt-btn" data-id="${workflowData.workflow.sessionId}" data-port="${currentServerPort || ''}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
-                        Copy Prompt
-                      </button>
-                    </div>
-                  `;
-                  
-                  // Add event listeners for the buttons
-                  const copyIdBtn = workflowItem.querySelector('.copy-id-btn');
-                  const copyPromptBtn = workflowItem.querySelector('.copy-prompt-btn');
-                  
-                  copyIdBtn.addEventListener('click', () => {
-                    navigator.clipboard.writeText(workflowData.workflow.sessionId).then(() => {
-                      copyIdBtn.textContent = 'Copied!';
-                      copyIdBtn.style.background = '#4CAF50';
-                      setTimeout(() => {
-                        copyIdBtn.textContent = 'Copy ID';
-                        copyIdBtn.style.background = '#2196F3';
-                      }, 2000);
-                    });
-                  });
-                  
-                  // copyPromptBtn is now handled by the shared event listener system with data-id and data-port attributes
-                } else {
-                  // Fallback when server not available
-                  workflowItem = document.createElement('div');
-                  workflowItem.className = 'recording-item';
-                  workflowItem.innerHTML = `
-                    <div class="recording-info">
-                      <div style="font-weight: bold; margin-bottom: 4px; color: #ff6b6b;">
-                        Server not available - JSON downloaded
-                      </div>
-                      <div style="color: #666; font-size: 11px;">
-                        ${workflowData.workflow.length} actions recorded
-                      </div>
-                    </div>
-                  `;
-                }
-                
-                // Add the item to the container
-                workflowRecordingsContainer.appendChild(workflowItem);
-                workflowRecordingsList.style.display = 'block';
-                
-                // Reload the list to show all recordings
-                setTimeout(() => {
-                  loadWorkflowRecordings();
-                }, 500);
+                const actionCount = workflowData?.actions?.length || 0;
+                showToast(`Workflow recording saved! ${actionCount} actions recorded`, 3000, 'success');
+              } catch (error) {
+                console.error('Error loading workflow recordings:', error);
+                showToast('Error loading recordings. Please refresh.', 3000, 'error');
+              } finally {
+                // Always hide loading overlay
+                hideSectionLoading('workflow-recording-section');
               }
             }
           });
@@ -2193,34 +2061,46 @@ document.addEventListener('DOMContentLoaded', () => {
   const viewScreenRecordingsLink = document.getElementById('viewScreenRecordings');
   
   if (viewWorkflowRecordingsLink) {
-    viewWorkflowRecordingsLink.addEventListener('click', (e) => {
+    viewWorkflowRecordingsLink.addEventListener('click', async (e) => {
       e.preventDefault();
       const workflowRecordingsList = document.getElementById('workflowRecordingsList');
       if (workflowRecordingsList) {
         if (workflowRecordingsList.style.display === 'none' || workflowRecordingsList.style.display === '') {
+          // Show recordings
           workflowRecordingsList.style.display = 'block';
-          loadWorkflowRecordings();
+          await loadWorkflowRecordings();
           viewWorkflowRecordingsLink.textContent = 'Hide Recordings';
+          // Save preference
+          await chrome.storage.local.set({ workflowRecordingsVisible: true });
         } else {
+          // Hide recordings
           workflowRecordingsList.style.display = 'none';
           viewWorkflowRecordingsLink.textContent = 'View Past Recordings';
+          // Save preference
+          await chrome.storage.local.set({ workflowRecordingsVisible: false });
         }
       }
     });
   }
   
   if (viewScreenRecordingsLink) {
-    viewScreenRecordingsLink.addEventListener('click', (e) => {
+    viewScreenRecordingsLink.addEventListener('click', async (e) => {
       e.preventDefault();
       const recordingsList = document.getElementById('recordingsList');
       if (recordingsList) {
         if (recordingsList.style.display === 'none') {
-          loadScreenRecordings();
+          // Show recordings
+          await loadScreenRecordings();
           recordingsList.style.display = 'block';
           viewScreenRecordingsLink.textContent = 'Hide Recordings';
+          // Save preference
+          await chrome.storage.local.set({ screenRecordingsVisible: true });
         } else {
+          // Hide recordings
           recordingsList.style.display = 'none';
           viewScreenRecordingsLink.textContent = 'View Past Recordings';
+          // Save preference
+          await chrome.storage.local.set({ screenRecordingsVisible: false });
         }
       }
     });
@@ -2261,16 +2141,19 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 // Function to load and display workflow recordings
-async function loadWorkflowRecordings() {
+async function loadWorkflowRecordings(autoShow = false) {
   const workflowRecordingsList = document.getElementById('workflowRecordingsList');
   const workflowRecordingsContainer = document.getElementById('workflowRecordingsContainer');
-  
+  const viewWorkflowRecordingsLink = document.getElementById('viewWorkflowRecordings');
+
   if (!workflowRecordingsList || !workflowRecordingsContainer) {
     return;
   }
-  
+
   // Clear existing items
   workflowRecordingsContainer.innerHTML = '';
+
+  let hasRecordings = false;
   
   // Check server for workflow recordings
   const ports = CONFIG_PORTS;
@@ -2283,8 +2166,9 @@ async function loadWorkflowRecordings() {
         
         // Handle both data.recordings and direct array response
         const recordings = data.recordings || data;
-        
+
         if (Array.isArray(recordings) && recordings.length > 0) {
+          hasRecordings = true;
           // Display each workflow recording
           recordings.forEach(recording => {
             const workflowItem = document.createElement('div');
@@ -2303,12 +2187,18 @@ async function loadWorkflowRecordings() {
                 ${recording.screenshot_settings ? '<div style="color: #2196F3; font-size: 10px;">&#128248; Screenshots included</div>' : ''}
               </div>
               <div class="recording-buttons">
+                <button class="copy-id-btn" data-session-id="${recording.session_id}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Copy ID
+                </button>
+                <button class="copy-prompt-btn" data-session-id="${recording.session_id}" data-name="${recording.name || ''}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  Copy Prompt
+                </button>
+                <button class="view-btn" data-session-id="${recording.session_id}" style="padding: 4px 8px; background: #9C27B0; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
+                  View
+                </button>
                 <button class="play-btn" data-session-id="${recording.session_id}" style="padding: 4px 8px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
                   &#9654; Play
                 </button>
-                <button class="get-prompt-btn" data-session-id="${recording.session_id}" data-name="${recording.name || ''}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
-                  Get Prompt
-                </button>
                 <button class="delete-btn" data-recording-id="${recording.id || recording.session_id}" style="padding: 4px 8px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
                   Delete
                 </button>
@@ -2316,17 +2206,29 @@ async function loadWorkflowRecordings() {
             `;
             
             // Add event listeners
+            const copyIdBtn = workflowItem.querySelector('.copy-id-btn');
+            const copyPromptBtn = workflowItem.querySelector('.copy-prompt-btn');
+            const viewBtn = workflowItem.querySelector('.view-btn');
             const playBtn = workflowItem.querySelector('.play-btn');
-            const getPromptBtn = workflowItem.querySelector('.get-prompt-btn');
             const deleteBtn = workflowItem.querySelector('.delete-btn');
-            
-            playBtn.addEventListener('click', () => playWorkflow(recording.session_id));
-            getPromptBtn.addEventListener('click', () => {
+
+            copyIdBtn.addEventListener('click', () => {
+              navigator.clipboard.writeText(recording.session_id).then(() => {
+                copyIdBtn.textContent = 'Copied!';
+                copyIdBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyIdBtn.textContent = 'Copy ID';
+                  copyIdBtn.style.background = '#2196F3';
+                }, 2000);
+              });
+            });
+
+            copyPromptBtn.addEventListener('click', () => {
               const sessionId = recording.session_id;
               const name = recording.name;
               const port = window.CHROMEDEBUG_CONFIG?.ports?.[0] || '3001';
               let prompt;
-              
+
               if (name) {
                 // Use name-based prompt similar to screen recording format
                 prompt = `Please use the get_workflow_recording function in Chrome Debug to load the workflow recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
@@ -2334,16 +2236,26 @@ async function loadWorkflowRecordings() {
                 // Use session ID based prompt
                 prompt = `Please use the get_workflow_recording function in Chrome Debug to load the workflow recording "${sessionId}" that was recorded on port ${port}.`;
               }
-              
+
               navigator.clipboard.writeText(prompt).then(() => {
-                getPromptBtn.textContent = 'Copied!';
-                getPromptBtn.style.background = '#4CAF50';
+                copyPromptBtn.textContent = 'Copied!';
+                const originalBg = copyPromptBtn.style.background;
+                copyPromptBtn.style.background = '#4CAF50';
                 setTimeout(() => {
-                  getPromptBtn.textContent = 'Get Prompt';
-                  getPromptBtn.style.background = '#2196F3';
+                  copyPromptBtn.textContent = 'Copy Prompt';
+                  copyPromptBtn.style.background = originalBg;
                 }, 2000);
               });
             });
+
+            viewBtn.addEventListener('click', async () => {
+              // Open frame editor in workflow mode
+              const frameEditorUrl = chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recording.session_id}&type=workflow`);
+              chrome.tabs.create({ url: frameEditorUrl });
+            });
+
+            playBtn.addEventListener('click', () => playWorkflow(recording.session_id));
+
             deleteBtn.addEventListener('click', () => {
               console.log('Delete clicked for recording:', recording);
               const recordingId = recording.id || recording.session_id;
@@ -2378,6 +2290,27 @@ async function loadWorkflowRecordings() {
     errorMsg.textContent = 'Could not connect to Chrome Debug server';
     workflowRecordingsContainer.appendChild(errorMsg);
   }
+
+  // Handle visibility based on recordings and user preference
+  if (!hasRecordings) {
+    workflowRecordingsList.style.display = 'none';
+  } else {
+    // Get user's saved preference
+    const prefs = await chrome.storage.local.get(['workflowRecordingsVisible']);
+    const shouldShow = autoShow || (prefs.workflowRecordingsVisible !== false); // Default to true
+
+    if (shouldShow) {
+      workflowRecordingsList.style.display = 'block';
+      if (viewWorkflowRecordingsLink) {
+        viewWorkflowRecordingsLink.textContent = 'Hide Recordings';
+      }
+    } else {
+      workflowRecordingsList.style.display = 'none';
+      if (viewWorkflowRecordingsLink) {
+        viewWorkflowRecordingsLink.textContent = 'View Past Recordings';
+      }
+    }
+  }
 }
 
 // Function to play a workflow
@@ -2526,18 +2459,147 @@ async function deleteWorkflowRecording(recordingId) {
 }
 
 // Function to load and display screen recordings
-async function loadScreenRecordings() {
+async function loadScreenRecordings(autoShow = false) {
   const recordingsList = document.getElementById('recordingsList');
   const recordingsContainer = document.getElementById('recordingsContainer');
-  
+  const viewScreenRecordingsLink = document.getElementById('viewScreenRecordings');
+
   if (!recordingsList || !recordingsContainer) {
     return;
   }
-  
+
   // Clear existing items
   recordingsContainer.innerHTML = '';
-  
-  // Check server for screen recordings
+
+  let hasRecordings = false;
+
+  // First, load browser-only recordings from IndexedDB
+  try {
+    console.log('[Popup] Requesting browser-only recordings...');
+    const browserRecordings = await chrome.runtime.sendMessage({
+      action: 'getBrowserRecordings'
+    });
+    console.log('[Popup] Browser recordings received:', browserRecordings);
+
+    if (browserRecordings && browserRecordings.length > 0) {
+      hasRecordings = true;
+      recordingsList.style.display = 'block';
+
+      // Display each browser-only recording
+      browserRecordings.forEach(recording => {
+        const recordingItem = document.createElement('div');
+        recordingItem.className = 'recording-item';
+
+        const date = new Date(recording.startTime);
+        const formattedDate = date.toLocaleString();
+        const displayName = recording.title || `Recording ${recording.sessionId}`;
+
+        recordingItem.innerHTML = `
+          <div class="recording-info">
+            <div class="recording-id" title="${recording.sessionId}">
+              <span class="recording-id-text">🌐 ${displayName}</span>
+              <span style="font-size: 10px; background: #ff9800; color: white; padding: 2px 6px; border-radius: 3px; margin-left: 4px;">BROWSER-ONLY</span>
+              <span style="color: #666; font-size: 11px; margin-left: 8px;">${recording.frameCount || 0} frames • ${formattedDate}</span>
+            </div>
+          </div>
+          <div class="recording-buttons">
+            <button class="copy-id-btn" data-session-id="${recording.sessionId}" title="Copy ID">Copy ID</button>
+            <button class="copy-prompt-btn" data-session-id="${recording.sessionId}" data-name="${recording.title || ''}" title="Copy Claude Prompt">Copy Prompt</button>
+            <button class="view-browser-btn" data-session-id="${recording.sessionId}" title="View Screenshots">View</button>
+            <button class="export-btn" data-session-id="${recording.sessionId}" title="Export Recording">Export</button>
+            <button class="delete-browser-btn" data-session-id="${recording.sessionId}" title="Delete">Delete</button>
+          </div>
+        `;
+
+        // Add event listeners
+        const copyIdBtn = recordingItem.querySelector('.copy-id-btn');
+        const copyPromptBtn = recordingItem.querySelector('.copy-prompt-btn');
+        const viewBtn = recordingItem.querySelector('.view-browser-btn');
+        const exportBtn = recordingItem.querySelector('.export-btn');
+        const deleteBtn = recordingItem.querySelector('.delete-browser-btn');
+
+        copyIdBtn.addEventListener('click', () => {
+          navigator.clipboard.writeText(recording.sessionId).then(() => {
+            copyIdBtn.textContent = 'Copied!';
+            copyIdBtn.style.background = '#4CAF50';
+            setTimeout(() => {
+              copyIdBtn.textContent = 'Copy ID';
+              copyIdBtn.style.background = '#2196F3';
+            }, 2000);
+          });
+        });
+
+        copyPromptBtn.addEventListener('click', () => {
+          const sessionId = recording.sessionId;
+          const title = recording.title;
+          let prompt;
+
+          if (title) {
+            prompt = `Please analyze the browser-only screen recording "${title}" (session: ${sessionId}). This recording is stored locally in the browser.`;
+          } else {
+            prompt = `Please analyze the browser-only screen recording "${sessionId}". This recording is stored locally in the browser.`;
+          }
+
+          navigator.clipboard.writeText(prompt).then(() => {
+            copyPromptBtn.textContent = 'Copied!';
+            const originalBg = copyPromptBtn.style.background;
+            copyPromptBtn.style.background = '#4CAF50';
+            setTimeout(() => {
+              copyPromptBtn.textContent = 'Copy Prompt';
+              copyPromptBtn.style.background = originalBg;
+            }, 2000);
+          });
+        });
+
+        viewBtn.addEventListener('click', () => {
+          // Open frame editor in browser-only mode
+          const frameEditorUrl = chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recording.sessionId}&browserOnly=true`);
+          chrome.tabs.create({ url: frameEditorUrl });
+        });
+
+        exportBtn.addEventListener('click', async () => {
+          try {
+            const result = await chrome.runtime.sendMessage({
+              action: 'exportBrowserRecording',
+              sessionId: recording.sessionId
+            });
+
+            if (result && result.success) {
+              exportBtn.textContent = 'Exported!';
+              exportBtn.style.background = '#4CAF50';
+              setTimeout(() => {
+                exportBtn.textContent = 'Export';
+                exportBtn.style.background = '#FF9800';
+              }, 2000);
+            }
+          } catch (error) {
+            console.error('Failed to export recording:', error);
+            alert('Failed to export recording');
+          }
+        });
+
+        deleteBtn.addEventListener('click', async () => {
+          if (confirm('Are you sure you want to delete this browser recording?')) {
+            try {
+              await chrome.runtime.sendMessage({
+                action: 'deleteBrowserRecording',
+                sessionId: recording.sessionId
+              });
+              loadScreenRecordings(); // Reload list
+            } catch (error) {
+              console.error('Failed to delete recording:', error);
+            }
+          }
+        });
+
+        recordingsContainer.appendChild(recordingItem);
+      });
+    }
+  } catch (error) {
+    console.error('Failed to load browser-only recordings:', error);
+  }
+
+  // Then, check server for screen recordings
   const ports = CONFIG_PORTS;
   for (const port of ports) {
     try {
@@ -2545,6 +2607,7 @@ async function loadScreenRecordings() {
       if (response.ok) {
         const data = await response.json();
         if (data && data.length > 0) {
+          hasRecordings = true;
           recordingsList.style.display = 'block';
           
           // Display each screen recording
@@ -2563,25 +2626,25 @@ async function loadScreenRecordings() {
 
             recordingItem.innerHTML = `
               <div class="recording-info">
-                <div style="font-weight: bold; margin-bottom: 4px;">${displayName}</div>
-                <div style="color: #666; font-size: 11px;">
-                  ${recording.totalFrames} frames • ${formattedDate}
+                <div class="recording-id" title="${recording.sessionId}">
+                  <span class="recording-id-text">🎥 ${displayName}</span>
+                  <span style="color: #666; font-size: 11px; margin-left: 8px;">${recording.totalFrames} frames • ${formattedDate}</span>
                 </div>
               </div>
               <div class="recording-buttons">
-                <button class="copy-id-btn" data-session-id="${recording.sessionId}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
-                  Copy ID
-                </button>
-                <button class="delete-btn" data-session-id="${recording.sessionId}" style="padding: 4px 8px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;">
-                  Delete
-                </button>
+                <button class="copy-id-btn" data-session-id="${recording.sessionId}" title="Copy ID">Copy ID</button>
+                <button class="copy-prompt-btn" data-session-id="${recording.sessionId}" data-name="${recording.name || ''}" data-port="${port}" title="Copy Claude Prompt">Copy Prompt</button>
+                <button class="view-btn" data-session-id="${recording.sessionId}" title="View Screenshots">View</button>
+                <button class="delete-btn" data-session-id="${recording.sessionId}" title="Delete">Delete</button>
               </div>
             `;
             
             // Add event listeners
             const copyIdBtn = recordingItem.querySelector('.copy-id-btn');
+            const copyPromptBtn = recordingItem.querySelector('.copy-prompt-btn');
+            const viewBtn = recordingItem.querySelector('.view-btn');
             const deleteBtn = recordingItem.querySelector('.delete-btn');
-            
+
             copyIdBtn.addEventListener('click', () => {
               navigator.clipboard.writeText(recording.sessionId).then(() => {
                 copyIdBtn.textContent = 'Copied!';
@@ -2592,14 +2655,60 @@ async function loadScreenRecordings() {
                 }, 2000);
               });
             });
-            
+
+            copyPromptBtn.addEventListener('click', () => {
+              const sessionId = recording.sessionId;
+              const name = recording.name;
+              let prompt;
+
+              if (name) {
+                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_debug_show_frames function in Chrome Debug to display the screen recording "${sessionId}" that was recorded on port ${port}.`;
+              }
+
+              navigator.clipboard.writeText(prompt).then(() => {
+                copyPromptBtn.textContent = 'Copied!';
+                const originalBg = copyPromptBtn.style.background;
+                copyPromptBtn.style.background = '#4CAF50';
+                setTimeout(() => {
+                  copyPromptBtn.textContent = 'Copy Prompt';
+                  copyPromptBtn.style.background = originalBg;
+                }, 2000);
+              });
+            });
+
+            viewBtn.addEventListener('click', async () => {
+              try {
+                // Check if frame editor is available (Pro version)
+                const frameEditorUrl = chrome.runtime.getURL(`pro/frame-editor.html?sessionId=${recording.sessionId}`);
+                const response = await fetch(frameEditorUrl, { method: 'HEAD' });
+
+                if (response.ok) {
+                  // Pro version - open frame editor
+                  chrome.tabs.create({ url: frameEditorUrl });
+                } else {
+                  // Free version - show summary
+                  const framesCount = recording.totalFrames || 0;
+                  const noteText = recording.name ? `\nName: ${recording.name}` : '';
+                  alert(`Screen Recording${noteText}\nSession ID: ${recording.sessionId}\n\nFrames: ${framesCount}\n\nUse "Copy ID" to share with Claude Code for detailed analysis.\n\nUpgrade to Pro for the Frame Editor with advanced viewing and editing features.`);
+                }
+              } catch (error) {
+                console.error('Failed to view recording:', error);
+                // Fallback to alert
+                const framesCount = recording.totalFrames || 0;
+                const noteText = recording.name ? `\nName: ${recording.name}` : '';
+                alert(`Screen Recording${noteText}\nSession ID: ${recording.sessionId}\n\nFrames: ${framesCount}\n\nUse "Copy ID" to share with Claude Code for detailed analysis.`);
+              }
+            });
+
             deleteBtn.addEventListener('click', async () => {
               if (confirm('Are you sure you want to delete this screen recording?')) {
                 try {
                   const deleteResponse = await fetch(`http://localhost:${port}/chromedebug/recording/${recording.sessionId}`, {
                     method: 'DELETE'
                   });
-                  
+
                   if (deleteResponse.ok) {
                     // Reload the list
                     loadScreenRecordings();
@@ -2612,8 +2721,6 @@ async function loadScreenRecordings() {
             
             recordingsContainer.appendChild(recordingItem);
           });
-        } else {
-          recordingsList.style.display = 'none';
         }
         break; // Found working server
       }
@@ -2621,6 +2728,27 @@ async function loadScreenRecordings() {
       console.error(`Failed to load screen recordings from port ${port}:`, error);
     }
   }
+
+  // Handle visibility based on recordings and user preference
+  if (!hasRecordings) {
+    recordingsList.style.display = 'none';
+  } else {
+    // Get user's saved preference
+    const prefs = await chrome.storage.local.get(['screenRecordingsVisible']);
+    const shouldShow = autoShow || (prefs.screenRecordingsVisible !== false); // Default to true
+
+    if (shouldShow) {
+      recordingsList.style.display = 'block';
+      if (viewScreenRecordingsLink) {
+        viewScreenRecordingsLink.textContent = 'Hide Recordings';
+      }
+    } else {
+      recordingsList.style.display = 'none';
+      if (viewScreenRecordingsLink) {
+        viewScreenRecordingsLink.textContent = 'View Past Recordings';
+      }
+    }
+  }
 }
 
 /*
@@ -2790,6 +2918,17 @@ 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`);
+      }
+    }
   }
 });
 
@@ -2828,12 +2967,20 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       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) {