@dynamicu/chromedebug-mcp 2.7.0 → 2.7.1

package/chrome-extension/popup.js

@@ -1,9 +1,9 @@
 // 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}`);
 
-// Chrome Web Store URLs for upgrade flow
-const CHROME_STORE_PRO_URL = 'https://chrome.google.com/webstore/detail/chromedebug-mcp-pro/[PRO_EXTENSION_ID]';
+// 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
@@ -57,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);
@@ -76,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) {
@@ -94,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) {
@@ -337,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');
 
@@ -364,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) {
@@ -420,7 +409,7 @@ 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) {
@@ -607,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) {
@@ -662,7 +651,7 @@ function takeManualSnapshot() {
  */
 /*
 async function takeSnapshot() {
-  console.log('Taking standalone snapshot...');
+  // console.log('Taking standalone snapshot...');
 
   try {
     const serverStatus = await checkServerStatus();
@@ -719,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>`;
@@ -962,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.');
       }
     });
@@ -979,7 +968,7 @@ function initializeTierStatus() {
     const licenseSection = document.getElementById('license-section');
     if (licenseSection) {
       licenseSection.style.display = 'none';
-      console.log('[Tier] PRO version detected - hiding license section');
+      // console.log('[Tier] PRO version detected - hiding license section');
     }
   } else {
     // Show FREE tier status (no license validation)
@@ -994,7 +983,7 @@ function initializeTierStatus() {
     // Fetch and display current usage count
     updateUsageDisplay();
 
-    console.log('[Tier] FREE version - showing usage counter');
+    // console.log('[Tier] FREE version - showing usage counter');
   }
 }
 
@@ -1016,21 +1005,21 @@ async function updateUsageDisplay() {
         usageLimitEl.textContent = response.limit || 5;
       }
 
-      console.log(`[Usage] Display updated: ${response.count}/${response.limit}`);
+      // console.log(`[Usage] Display updated: ${response.count}/${response.limit}`);
     }
   } catch (error) {
     console.error('[Usage] Failed to fetch usage:', error);
   }
 }
 
-// Upgrade button handler - redirect to Chrome Web Store PRO version
+// Upgrade button handler - redirect to LemonSqueezy purchase page
 function handleUpgradeClick() {
-  console.log('[Upgrade] Opening Chrome Web Store PRO version');
-  chrome.tabs.create({url: CHROME_STORE_PRO_URL});
+  // console.log('[Upgrade] Opening LemonSqueezy PRO purchase page');
+  chrome.tabs.create({url: PRO_PURCHASE_URL});
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  console.log('DOM loaded, initializing popup');
+  // console.log('DOM loaded, initializing popup');
 
   // Initialize tier status display
   initializeTierStatus();
@@ -1041,6 +1030,21 @@ document.addEventListener('DOMContentLoaded', () => {
     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();
@@ -1139,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();
   }
 
@@ -1194,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
@@ -1223,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);
     });
   }
 
@@ -1350,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']);
       
@@ -1382,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 {
@@ -1394,16 +1398,16 @@ 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);
+            // 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>`;
@@ -1413,7 +1417,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
           // 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');
@@ -1457,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();
               
@@ -1480,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;
@@ -1499,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';
@@ -1522,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');
               });
@@ -1592,7 +1592,7 @@ document.addEventListener('DOMContentLoaded', () => {
           // 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);
+            // 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>' +
@@ -1624,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
@@ -1686,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) {
@@ -1812,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 {
@@ -1946,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);
         }
@@ -1968,7 +1947,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
         
         if (response.ok) {
-          console.log('Restore point deleted');
+          // console.log('Restore point deleted');
           break;
         }
       } catch (error) {
@@ -2162,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;
@@ -2257,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);
@@ -2315,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
@@ -2395,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) {
@@ -2475,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;
@@ -2619,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">
@@ -2926,7 +2905,7 @@ chrome.storage.onChanged.addListener((changes, namespace) => {
         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`);
+        // console.log(`[Usage] Storage updated: ${usage.count}/5`);
       }
     }
   }
@@ -2934,9 +2913,9 @@ chrome.storage.onChanged.addListener((changes, namespace) => {
 
 // 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>`;
@@ -2948,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>` +
@@ -2961,7 +2940,7 @@ 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>` +
@@ -2974,11 +2953,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       if (recordingStatus) recordingStatus.textContent = '';
     }, 5000);
   } else if (request.action === 'workflowRecordingSaved') {
-    console.log('Workflow recording saved:', request.workflowId);
+    // 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);
+    // console.log('Recording stopped:', request.sessionId);
     // Reload screen recordings list immediately
     loadScreenRecordings(true);
   } else if (request.action === 'uploadError') {

package/chrome-extension/pro/frame-editor.html

@@ -353,6 +353,27 @@
     .frame-thumbnail:hover {
       transform: scale(1.05);
     }
+
+    /* Toast notification styles */
+    .toast {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: white;
+      padding: 12px 24px;
+      border-radius: 4px;
+      z-index: 1001;
+      animation: fadeInOut 2s ease-in-out forwards;
+      font-size: 14px;
+    }
+
+    @keyframes fadeInOut {
+      0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
+      15%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); }
+      100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+    }
   </style>
 </head>
 <body>
@@ -370,6 +391,8 @@
       <button class="btn btn-secondary" id="invertSelectionBtn">Invert Selection</button>
       <button class="btn btn-danger" id="deleteSelectedBtn" disabled>Delete Selected</button>
       <button class="btn btn-primary" id="saveEditedBtn" disabled>Save as New Recording</button>
+      <button class="btn btn-secondary" id="copyIdBtn">Copy ID</button>
+      <button class="btn btn-secondary" id="copyPromptBtn">Copy Prompt</button>
     </div>
   </div>