plusvibe progress ui

background.js

@@ -2,6 +2,7 @@
 // Import email parser functions
 importScripts('email_parser.js');
 
+
 // Enhanced logging function
 function logWithStyle(message, type = 'info') {
   const styles = {
@@ -481,8 +482,7 @@ async function handleGenerateDraft(threadMessages, contextPrompt = null) {
 
     // Always include the base prompt, and append the context prompt if present
     let promptToUse = basePrompt;
-    if (c
+    if (contextPrompt && contextPrompt.trim()) {
-30 June 2025 at 05:00 ontextPrompt && contextPrompt.trim()) {
       console.log('Adding context-specific prompt:', contextPrompt.trim());
       promptToUse += '\n\nAdditional instructions: ' + contextPrompt.trim();
     }

content_wrapper.js

@@ -1,6 +1,123 @@
 // Content Script Wrapper
 // This wrapper loads platform-specific handlers without modifying existing code
 
+// Progress UI management
+const COLORS = {
+  green: '#1a4d2e',
+  gold: '#e6b800',
+  white: '#ffffff',
+};
+let progressUI = null;
+
+function createProgressUI() {
+  if (progressUI) return;
+  
+  progressUI = document.createElement('div');
+  progressUI.className = 'gpt-autodraft-progress';
+  progressUI.style.position = 'fixed';
+  progressUI.style.bottom = '24px';
+  progressUI.style.left = '24px';
+  progressUI.style.right = '';
+  progressUI.style.background = COLORS.white;
+  progressUI.style.border = `2px solid ${COLORS.green}`;
+  progressUI.style.padding = '12px';
+  progressUI.style.borderRadius = '8px';
+  progressUI.style.boxShadow = '0 2px 12px rgba(0,0,0,0.15)';
+  progressUI.style.zIndex = '99999';
+  progressUI.style.display = 'none';
+  progressUI.style.minWidth = '200px';
+  progressUI.style.maxWidth = '400px';
+  
+  const status = document.createElement('div');
+  status.className = 'progress-status';
+  status.style.marginBottom = '8px';
+  status.style.color = COLORS.green;
+  status.style.fontWeight = 'bold';
+  
+  const message = document.createElement('div');
+  message.className = 'progress-message';
+  message.style.color = '#666';
+  message.style.fontSize = '14px';
+  
+  const closeBtn = document.createElement('button');
+  closeBtn.textContent = '×';
+  closeBtn.style.position = 'absolute';
+  closeBtn.style.top = '4px';
+  closeBtn.style.right = '4px';
+  closeBtn.style.background = 'none';
+  closeBtn.style.border = 'none';
+  closeBtn.style.fontSize = '20px';
+  closeBtn.style.cursor = 'pointer';
+  closeBtn.style.color = '#666';
+  closeBtn.onclick = () => {
+    progressUI.style.display = 'none';
+  };
+  
+  progressUI.appendChild(closeBtn);
+  progressUI.appendChild(status);
+  progressUI.appendChild(message);
+  document.body.appendChild(progressUI);
+}
+
+function updateProgressUI(status, message, isError = false) {
+  if (!progressUI) createProgressUI();
+  
+  const statusEl = progressUI.querySelector('.progress-status');
+  const messageEl = progressUI.querySelector('.progress-message');
+  
+  statusEl.textContent = status;
+  messageEl.textContent = message;
+  
+  if (isError) {
+    statusEl.style.color = '#cc0000';
+    progressUI.style.borderColor = '#cc0000';
+  } else {
+    statusEl.style.color = COLORS.green;
+    progressUI.style.borderColor = COLORS.green;
+  }
+  
+  progressUI.style.display = 'block';
+  
+  // Auto-hide success messages after 3 seconds
+  if (!isError && status.includes('success')) {
+    setTimeout(() => {
+      progressUI.style.display = 'none';
+    }, 3000);
+  }
+}
+
+// Update the message listener to handle progress updates
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action === 'updateProgress') {
+    updateProgressUI(
+      message.status,
+      message.message || '',
+      message.error || false
+    );
+  }
+  if (message.action === 'toggleAutoDraft') {
+    // Find and click the reply button
+    const replyButton = document.querySelector('div[role="button"][gh="cm"]');
+    if (replyButton) {
+      replyButton.click();
+      
+      // Wait for reply box to appear and inject UI
+      setTimeout(() => {
+        const replyBox = safeFindReplyBox();
+        if (replyBox) {
+          // Get thread messages for context
+          const threadMessages = Array.from(document.querySelectorAll('div[role="listitem"]'))
+            .map(item => item.textContent)
+            .join('\n');
+          
+          injectUI(replyBox, '', threadMessages);
+        }
+      }, 500);
+    }
+  } else if (message.action === 'toggleUI') {
+    toggleUIVisibility();
+  }
+});
 (function() {
   'use strict';
   
@@ -8,6 +125,7 @@
 
   // Request draft from background (shared helper)
   function requestDraftFromBackground(threadMessages, contextPrompt) {
+    updateProgressUI('Starting', 'Preparing to generate drafts...');
     return new Promise((resolve, reject) => {
       chrome.runtime.sendMessage({
         action: 'generateDraft',