Add PDF list view with upload status tracking

- Show all pending PDFs in a scrollable list instead of single PDF - Track upload status (pending/uploading/uploaded/failed) per PDF - Store queue in chrome.storage.local for persistence - Prevent duplicate uploads by checking URL against uploaded PDFs - Add Dismiss button to remove PDFs from queue - Show badge with count of pending PDFs - Auto-cleanup old entries (uploaded >7 days, failed >24h) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-15 14:55:32 +01:00
parent 5bde27dcdd
commit 3e86bb126b
5 changed files with 626 additions and 195 deletions
--- a/src/background/service-worker.ts
+++ b/src/background/service-worker.ts
@@ -1,13 +1,19 @@
 /**
 * Service Worker (Background Script)
- * Handles PDF detection and credential expiry checks
+ * Handles PDF detection, queue management, and credential expiry checks
 */

 import { startPDFDetection, DetectedPDF } from '../utils/pdf-detector';
 import { loadCredentials } from '../utils/storage';
-
-// Store last detected PDF in memory (ephemeral)
-let lastDetectedPDF: DetectedPDF | null = null;
+import {
+  addPDF,
+  getPendingCount,
+  getPendingPDFs,
+  updatePDFStatus,
+  removePDF,
+  cleanupOldEntries,
+  PDFStatus
+} from '../utils/pdf-queue';

 /**
 * Initialize extension on install
@@ -16,9 +22,10 @@ chrome.runtime.onInstalled.addListener((details) => {
  console.log('[Service Worker] onInstalled event:', details.reason);
  if (details.reason === 'install') {
    console.log('[Service Worker] BinectChrome installed');
-    setupCredentialExpiryAlarm();
+    setupAlarms();
  } else if (details.reason === 'update') {
    console.log('[Service Worker] BinectChrome updated');
+    setupAlarms();
  }
 });

@@ -27,16 +34,24 @@ chrome.runtime.onInstalled.addListener((details) => {
 */
 chrome.runtime.onStartup.addListener(() => {
  console.log('[Service Worker] onStartup event - BinectChrome started');
-  setupCredentialExpiryAlarm();
+  setupAlarms();
+  updateBadge();
 });

 /**
- * Set up alarm to check credential expiry daily
+ * Set up alarms for periodic tasks
 */
-function setupCredentialExpiryAlarm() {
+function setupAlarms() {
+  // Credential expiry check
  chrome.alarms.create('checkCredentialExpiry', {
-    delayInMinutes: 1, // First check in 1 minute
-    periodInMinutes: 24 * 60 // Then every 24 hours
+    delayInMinutes: 1,
+    periodInMinutes: 24 * 60 // Every 24 hours
+  });
+
+  // PDF queue cleanup
+  chrome.alarms.create('cleanupPDFQueue', {
+    delayInMinutes: 60, // First cleanup in 1 hour
+    periodInMinutes: 6 * 60 // Every 6 hours
  });
 }

@@ -47,6 +62,9 @@ chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'checkCredentialExpiry') {
    checkAndDeleteExpiredCredentials();
  }
+  if (alarm.name === 'cleanupPDFQueue') {
+    cleanupOldEntries();
+  }
 });

 /**
@@ -54,39 +72,43 @@ chrome.alarms.onAlarm.addListener((alarm) => {
 */
 async function checkAndDeleteExpiredCredentials() {
  const credentials = await loadCredentials();
-  // loadCredentials already handles expiry check and deletion
-  // If credentials are expired, it returns null and deletes them
  if (credentials === null) {
-    console.log('Credentials expired and deleted');
+    console.log('[Service Worker] Credentials expired and deleted');
  }
 }

 /**
- * Initialize badge with default icon
+ * Update badge with pending PDF count
 */
-function initializeBadge() {
-  // Set a default badge to make extension visible
-  chrome.action.setBadgeText({ text: '•' });
+async function updateBadge() {
+  const count = await getPendingCount();
+  const text = count > 0 ? count.toString() : '•';
+  chrome.action.setBadgeText({ text });
  chrome.action.setBadgeBackgroundColor({ color: '#4A90E2' }); // Binect Blue
-  console.log('[Service Worker] Default badge set');
+  console.log('[Service Worker] Badge updated:', text);
 }

 // Initialize badge on load
-initializeBadge();
+updateBadge();

 /**
 * Start PDF detection
 */
 console.log('[Service Worker] Initializing PDF detection...');
-startPDFDetection((pdf: DetectedPDF) => {
-  console.log('[Service Worker] PDF DETECTED CALLBACK:', pdf.filename);
-  lastDetectedPDF = pdf;
+startPDFDetection(async (pdf: DetectedPDF) => {
+  console.log('[Service Worker] PDF DETECTED:', pdf.filename);

-  // Update badge to indicate PDF detected
-  chrome.action.setBadgeText({ text: '1' });
-  chrome.action.setBadgeBackgroundColor({ color: '#4A90E2' }); // Binect Blue
+  // Add to persistent queue
+  const entry = await addPDF(pdf);

-  console.log('[Service Worker] Badge updated, PDF stored in memory');
+  if (entry) {
+    console.log('[Service Worker] PDF added to queue:', entry.filename);
+  } else {
+    console.log('[Service Worker] PDF skipped (already uploaded):', pdf.filename);
+  }
+
+  // Update badge
+  await updateBadge();
 });

 /**
@@ -95,25 +117,47 @@ startPDFDetection((pdf: DetectedPDF) => {
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('[Service Worker] Message received:', request.action);

+  if (request.action === 'getPDFQueue') {
+    getPendingPDFs().then(entries => {
+      console.log('[Service Worker] Returning PDF queue:', entries.length, 'entries');
+      sendResponse({ entries });
+    });
+    return true;
+  }
+
+  if (request.action === 'updatePDFStatus') {
+    const { id, status, meta } = request as { id: string; status: PDFStatus; meta?: object };
+    updatePDFStatus(id, status, meta).then(() => {
+      return updateBadge();
+    }).then(() => {
+      sendResponse({ success: true });
+    });
+    return true;
+  }
+
+  if (request.action === 'removePDF') {
+    removePDF(request.id).then(() => {
+      return updateBadge();
+    }).then(() => {
+      sendResponse({ success: true });
+    });
+    return true;
+  }
+
+  // Legacy handlers for backward compatibility
  if (request.action === 'getLastPDF') {
-    console.log('[Service Worker] Returning last PDF:', lastDetectedPDF ? lastDetectedPDF.filename : 'none');
-    sendResponse({ pdf: lastDetectedPDF });
+    // Return the first pending PDF for backward compatibility
+    getPendingPDFs().then(entries => {
+      const pdf = entries.length > 0 ? entries[0] : null;
+      sendResponse({ pdf });
+    });
    return true;
  }

-  if (request.action === 'clearLastPDF') {
-    console.log('[Service Worker] Clearing last PDF');
-    lastDetectedPDF = null;
-    chrome.action.setBadgeText({ text: '•' }); // Reset to default badge
-    sendResponse({ success: true });
-    return true;
-  }
-
-  if (request.action === 'pdfSent') {
-    console.log('[Service Worker] PDF sent, resetting badge');
-    // Reset badge after successful send
-    chrome.action.setBadgeText({ text: '•' }); // Reset to default badge
-    sendResponse({ success: true });
+  if (request.action === 'clearLastPDF' || request.action === 'pdfSent') {
+    updateBadge().then(() => {
+      sendResponse({ success: true });
+    });
    return true;
  }

--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -272,6 +272,139 @@ body {
  margin-top: var(--spacing-xs);
 }

+/* PDF List */
+.pdf-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.pdf-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.pdf-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.pdf-list-item {
+  display: flex;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--light-bg);
+  border-radius: var(--border-radius);
+  margin-bottom: var(--spacing-sm);
+  transition: background 0.2s;
+}
+
+.pdf-list-item:last-child {
+  margin-bottom: 0;
+}
+
+.pdf-list-item:hover {
+  background: var(--border-color);
+}
+
+.pdf-list-item.uploading {
+  opacity: 0.7;
+}
+
+.pdf-list-item.uploaded {
+  background: rgba(76, 175, 80, 0.1);
+}
+
+.pdf-list-item.failed {
+  background: rgba(229, 57, 53, 0.1);
+}
+
+.pdf-item-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.pdf-item-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.pdf-item-filename {
+  font-weight: 500;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pdf-item-meta {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+.pdf-item-status {
+  font-size: 10px;
+  color: var(--text-light);
+  margin-top: 2px;
+}
+
+.pdf-item-status.success {
+  color: var(--signal-green);
+}
+
+.pdf-item-status.error {
+  color: var(--red);
+}
+
+.pdf-item-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.btn-send-item {
+  padding: 6px 12px;
+  font-size: 11px;
+  min-height: auto;
+  background: var(--binect-blue);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-send-item:hover {
+  background: var(--binect-blue-deep);
+}
+
+.btn-send-item:disabled {
+  background: var(--border-color);
+  cursor: not-allowed;
+}
+
+.btn-dismiss {
+  padding: 4px 8px;
+  font-size: 10px;
+  background: transparent;
+  color: var(--text-light);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-dismiss:hover {
+  background: var(--light-bg);
+  color: var(--text-secondary);
+}
+
 /* Status Messages */
 .status-message {
  padding: var(--spacing-md);
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -53,24 +53,17 @@
        <p class="info-text">No PDF detected. Open or download a PDF to get started.</p>
      </div>

-      <!-- PDF Detected -->
-      <div id="pdfView" class="content-section" style="display: none;">
-        <div class="pdf-info">
-          <div class="pdf-icon">📄</div>
-          <div class="pdf-details">
-            <div class="pdf-filename" id="pdfFilename"></div>
-            <div class="pdf-meta">
-              <span id="pdfSize"></span> • <span id="pdfDomain"></span>
-            </div>
-            <div class="pdf-timestamp" id="pdfTimestamp"></div>
-          </div>
+      <!-- PDF List -->
+      <div id="pdfListView" class="content-section" style="display: none;">
+        <div class="pdf-list-header">
+          <span class="pdf-count" id="pdfCount">0 PDFs ready</span>
        </div>

-        <button id="sendBtn" class="btn btn-primary btn-large">
-          Send PDF to Binect
-        </button>
+        <div id="pdfList" class="pdf-list">
+          <!-- PDF items will be inserted here dynamically -->
+        </div>

-        <!-- Progress/Status -->
+        <!-- Global status message -->
        <div id="statusMessage" class="status-message" style="display: none;"></div>
      </div>

--- a/src/popup/popup.ts
+++ b/src/popup/popup.ts
@@ -7,12 +7,16 @@ import { loadCredentials, saveCredentials, deleteCredentials, updateLastUse } fr
 import { uploadPDF, testConnection, BinectAPIError } from '../utils/binect-api';
 import { fetchPDFBytes, DetectedPDF } from '../utils/pdf-detector';
 import { addTrackingEntry } from '../tracking/tracker';
+import { PDFQueueEntry, PDFStatus } from '../utils/pdf-queue';

 // DOM Elements
 const authView = document.getElementById('authView')!;
 const mainView = document.getElementById('mainView')!;
 const noPdfView = document.getElementById('noPdfView')!;
-const pdfView = document.getElementById('pdfView')!;
+const pdfListView = document.getElementById('pdfListView')!;
+const pdfList = document.getElementById('pdfList')!;
+const pdfCount = document.getElementById('pdfCount')!;
+const statusMessage = document.getElementById('statusMessage')!;

 const loginForm = document.getElementById('loginForm') as HTMLFormElement;
 const usernameInput = document.getElementById('username') as HTMLInputElement;
@@ -20,14 +24,6 @@ const passwordInput = document.getElementById('password') as HTMLInputElement;
 const loginBtn = document.getElementById('loginBtn') as HTMLButtonElement;
 const authError = document.getElementById('authError')!;

-const pdfFilename = document.getElementById('pdfFilename')!;
-const pdfSize = document.getElementById('pdfSize')!;
-const pdfDomain = document.getElementById('pdfDomain')!;
-const pdfTimestamp = document.getElementById('pdfTimestamp')!;
-
-const sendBtn = document.getElementById('sendBtn') as HTMLButtonElement;
-const statusMessage = document.getElementById('statusMessage')!;
-
 const logoutBtn = document.getElementById('logoutBtn')!;
 const helpBtn = document.getElementById('helpBtn')!;
 const togglePasswordBtn = document.getElementById('togglePassword') as HTMLButtonElement;
@@ -35,7 +31,7 @@ const eyeIcon = document.getElementById('eyeIcon')!;
 const eyeOffIcon = document.getElementById('eyeOffIcon')!;

 // State
-let currentPDF: DetectedPDF | null = null;
+let pdfQueue: PDFQueueEntry[] = [];
 let currentCredentials: { username: string; password: string } | null = null;

 /**
@@ -55,7 +51,7 @@ async function init() {
        await updateLastUse();

        showMainView();
-        await loadLastPDF();
+        await loadPDFQueue();
      } else {
        // Authentication failed, credentials may be invalid
        showAuthView();
@@ -78,7 +74,6 @@ async function init() {
 */
 function setupEventListeners() {
  loginForm.addEventListener('submit', handleLogin);
-  sendBtn.addEventListener('click', handleSendPDF);
  logoutBtn.addEventListener('click', handleLogout);
  helpBtn.addEventListener('click', handleHelp);
  togglePasswordBtn.addEventListener('click', handleTogglePassword);
@@ -138,7 +133,7 @@ async function handleLogin(e: Event) {
    await saveCredentials({ username, password });

    showMainView();
-    await loadLastPDF();
+    await loadPDFQueue();
  } catch (error) {
    if (error instanceof BinectAPIError) {
      showError(error.message);
@@ -152,24 +147,132 @@ async function handleLogin(e: Event) {
 }

 /**
- * Handle send PDF
+ * Load PDF queue from background and current tab
 */
-async function handleSendPDF() {
-  if (!currentPDF || !currentCredentials) {
+async function loadPDFQueue() {
+  console.log('[Popup] Loading PDF queue...');
+
+  // Get queue from background script
+  const response = await chrome.runtime.sendMessage({ action: 'getPDFQueue' });
+  pdfQueue = response?.entries || [];
+  console.log('[Popup] Got', pdfQueue.length, 'entries from background');
+
+  // Also check current tab for PDF
+  const currentTabPDF = await checkCurrentTabForPDF();
+  if (currentTabPDF) {
+    // Check if already in queue
+    const exists = pdfQueue.some(p => p.url === currentTabPDF.url);
+    if (!exists) {
+      console.log('[Popup] Adding current tab PDF to queue:', currentTabPDF.filename);
+      // Add to queue (will be added to persistent queue when user interacts)
+      const entry: PDFQueueEntry = {
+        ...currentTabPDF,
+        status: 'pending'
+      };
+      pdfQueue.unshift(entry);
+    }
+  }
+
+  // Render the list
+  renderPDFList();
+}
+
+/**
+ * Render the PDF list
+ */
+function renderPDFList() {
+  // Filter to only pending and failed PDFs
+  const pending = pdfQueue.filter(p => p.status === 'pending' || p.status === 'failed');
+
+  if (pending.length === 0) {
+    showNoPDF();
    return;
  }

-  sendBtn.disabled = true;
-  showStatus('Uploading...', 'uploading');
+  noPdfView.style.display = 'none';
+  pdfListView.style.display = 'block';
+
+  // Update count
+  pdfCount.textContent = `${pending.length} PDF${pending.length > 1 ? 's' : ''} ready`;
+
+  // Render list items
+  pdfList.innerHTML = pending.map(pdf => `
+    <div class="pdf-list-item ${pdf.status}" data-id="${escapeHtml(pdf.id)}">
+      <div class="pdf-item-icon">📄</div>
+      <div class="pdf-item-details">
+        <div class="pdf-item-filename" title="${escapeHtml(pdf.filename)}">${escapeHtml(pdf.filename)}</div>
+        <div class="pdf-item-meta">${formatFileSize(pdf.size)} · ${escapeHtml(pdf.sourceDomain)}</div>
+        <div class="pdf-item-status ${pdf.status === 'failed' ? 'error' : ''}">${getStatusText(pdf)}</div>
+      </div>
+      <div class="pdf-item-actions">
+        <button class="btn-send-item" data-id="${escapeHtml(pdf.id)}" ${pdf.status === 'uploading' ? 'disabled' : ''}>
+          ${pdf.status === 'uploading' ? 'Sending...' : (pdf.status === 'failed' ? 'Retry' : 'Send')}
+        </button>
+        <button class="btn-dismiss" data-id="${escapeHtml(pdf.id)}">Dismiss</button>
+      </div>
+    </div>
+  `).join('');
+
+  // Add event listeners to buttons
+  pdfList.querySelectorAll('.btn-send-item').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const id = (e.target as HTMLElement).dataset.id;
+      if (id) handleSendPDF(id);
+    });
+  });
+
+  pdfList.querySelectorAll('.btn-dismiss').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const id = (e.target as HTMLElement).dataset.id;
+      if (id) handleDismissPDF(id);
+    });
+  });
+
+  hideStatus();
+}
+
+/**
+ * Get status text for a PDF
+ */
+function getStatusText(pdf: PDFQueueEntry): string {
+  switch (pdf.status) {
+    case 'uploading':
+      return 'Uploading...';
+    case 'failed':
+      return pdf.errorMessage || 'Upload failed';
+    default:
+      return formatTimestamp(pdf.timestamp);
+  }
+}
+
+/**
+ * Handle send PDF
+ */
+async function handleSendPDF(id: string) {
+  const pdf = pdfQueue.find(p => p.id === id);
+  if (!pdf || !currentCredentials) {
+    return;
+  }
+
+  // Update local state
+  pdf.status = 'uploading';
+  renderPDFList();
+
+  // Notify background
+  await chrome.runtime.sendMessage({
+    action: 'updatePDFStatus',
+    id,
+    status: 'uploading'
+  });

  try {
    // Fetch PDF bytes
-    const pdfBytes = await fetchPDFBytes(currentPDF.url);
+    const pdfBytes = await fetchPDFBytes(pdf.url);

    // Upload to Binect with credentials
    const document = await uploadPDF(
      pdfBytes,
-      currentPDF.filename,
+      pdf.filename,
      currentCredentials.username,
      currentCredentials.password
    );
@@ -177,26 +280,34 @@ async function handleSendPDF() {
    // Track successful transfer
    await addTrackingEntry({
      timestamp: Date.now(),
-      sourceDomain: currentPDF.sourceDomain,
+      sourceDomain: pdf.sourceDomain,
      destinationUrl: 'https://api.binect.de/binectapi/v1/documents',
-      pdfSize: pdfBytes.byteLength, // Use actual size from fetched data
+      pdfSize: pdfBytes.byteLength,
      result: 'success'
    });

    // Update last use timestamp
    await updateLastUse();

-    // Notify background script
-    chrome.runtime.sendMessage({ action: 'pdfSent' });
+    // Update status to uploaded
+    await chrome.runtime.sendMessage({
+      action: 'updatePDFStatus',
+      id,
+      status: 'uploaded',
+      meta: { binectDocumentId: document.id }
+    });

-    showStatus(`Success! Document ID: ${document.id} (Status: ${document.status.text})`, 'success');
+    // Remove from local queue
+    pdfQueue = pdfQueue.filter(p => p.id !== id);
+    renderPDFList();

-    // Clear PDF after 3 seconds
+    showStatus(`Sent! Document ID: ${document.id}`, 'success');
+
+    // Hide status after 3 seconds
    setTimeout(() => {
-      currentPDF = null;
-      showNoPDF();
      hideStatus();
    }, 3000);
+
  } catch (error) {
    let errorMessage = 'Upload failed';

@@ -217,26 +328,46 @@ async function handleSendPDF() {
    // Track failed transfer
    await addTrackingEntry({
      timestamp: Date.now(),
-      sourceDomain: currentPDF.sourceDomain,
+      sourceDomain: pdf.sourceDomain,
      destinationUrl: 'https://api.binect.de/binectapi/v1/documents',
-      pdfSize: currentPDF.size || 0,
+      pdfSize: pdf.size || 0,
      result: 'failure',
      errorMessage
    });

+    // Update status to failed
+    await chrome.runtime.sendMessage({
+      action: 'updatePDFStatus',
+      id,
+      status: 'failed',
+      meta: { errorMessage }
+    });
+
+    // Update local state
+    pdf.status = 'failed';
+    pdf.errorMessage = errorMessage;
+    renderPDFList();
+
    showStatus(errorMessage, 'error');
-  } finally {
-    sendBtn.disabled = false;
  }
 }

+/**
+ * Handle dismiss PDF
+ */
+async function handleDismissPDF(id: string) {
+  await chrome.runtime.sendMessage({ action: 'removePDF', id });
+  pdfQueue = pdfQueue.filter(p => p.id !== id);
+  renderPDFList();
+}
+
 /**
 * Handle logout
 */
 async function handleLogout() {
  await deleteCredentials();
  currentCredentials = null;
-  currentPDF = null;
+  pdfQueue = [];

  // Clear form
  loginForm.reset();
@@ -252,96 +383,6 @@ function handleHelp() {
  chrome.tabs.create({ url: chrome.runtime.getURL('tracking.html') });
 }

-/**
- * Load last detected PDF
- */
-async function loadLastPDF() {
-  console.log('[Popup] Loading last PDF...');
-
-  // First, check if current tab is viewing a PDF
-  const currentTabPDF = await checkCurrentTabForPDF();
-
-  if (currentTabPDF) {
-    console.log('[Popup] Found PDF in current tab:', currentTabPDF.filename);
-    currentPDF = currentTabPDF;
-    showPDF(currentPDF);
-    return;
-  }
-
-  console.log('[Popup] No PDF in current tab, checking background script...');
-
-  // If no PDF in current tab, ask background script for last detected download
-  chrome.runtime.sendMessage({ action: 'getLastPDF' }, async (response) => {
-    if (response && response.pdf && response.pdf !== null) {
-      console.log('[Popup] Background returned PDF:', response.pdf.filename);
-      currentPDF = response.pdf;
-      showPDF(response.pdf);
-    } else {
-      console.log('[Popup] Background has no PDF, checking recent downloads as fallback...');
-
-      // Fallback: Check recent downloads directly
-      const recentPDF = await checkRecentDownloads();
-      if (recentPDF !== null) {
-        console.log('[Popup] Found recent PDF download:', recentPDF.filename);
-        currentPDF = recentPDF;
-        showPDF(recentPDF);
-      } else {
-        console.log('[Popup] No PDF found anywhere');
-        showNoPDF();
-      }
-    }
-  });
-}
-
-/**
- * Check recent downloads for PDFs (fallback mechanism)
- */
-async function checkRecentDownloads(): Promise<DetectedPDF | null> {
-  return new Promise((resolve) => {
-    chrome.downloads.search(
-      {
-        limit: 20, // Check last 20 downloads
-        orderBy: ['-startTime']
-      },
-      (items) => {
-        console.log('[Popup] Checked recent downloads:', items.length, 'items');
-
-        // Find most recent completed PDF
-        const pdfItem = items.find(
-          (item) =>
-            item.state === 'complete' &&
-            (item.filename.toLowerCase().endsWith('.pdf') || item.mime === 'application/pdf')
-        );
-
-        if (pdfItem) {
-          console.log('[Popup] Found recent PDF:', pdfItem.filename);
-
-          // Extract domain
-          let domain = 'unknown';
-          try {
-            const urlObj = new URL(pdfItem.url);
-            domain = urlObj.hostname;
-          } catch (e) {
-            // Keep default
-          }
-
-          resolve({
-            id: `download-${pdfItem.id}`,
-            filename: pdfItem.filename.split('/').pop() || pdfItem.filename,
-            url: pdfItem.url,
-            size: pdfItem.fileSize,
-            timestamp: Date.now(), // Use current time as approximation
-            sourceDomain: domain
-          });
-        } else {
-          console.log('[Popup] No recent PDF downloads found');
-          resolve(null);
-        }
-      }
-    );
-  });
-}
-
 /**
 * Check if the current active tab is viewing a PDF
 */
@@ -427,22 +468,7 @@ function showMainView() {
 */
 function showNoPDF() {
  noPdfView.style.display = 'block';
-  pdfView.style.display = 'none';
-}
-
-/**
- * Show PDF view
- */
-function showPDF(pdf: DetectedPDF) {
-  noPdfView.style.display = 'none';
-  pdfView.style.display = 'block';
-
-  pdfFilename.textContent = pdf.filename;
-  pdfSize.textContent = formatFileSize(pdf.size);
-  pdfDomain.textContent = pdf.sourceDomain;
-  pdfTimestamp.textContent = formatTimestamp(pdf.timestamp);
-
-  sendBtn.disabled = false;
+  pdfListView.style.display = 'none';
  hideStatus();
 }

@@ -477,6 +503,15 @@ function hideStatus() {
  statusMessage.style.display = 'none';
 }

+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 /**
 * Format file size
 */
--- a/src/utils/pdf-queue.ts
+++ b/src/utils/pdf-queue.ts
@@ -0,0 +1,226 @@
+/**
+ * PDF Queue storage utilities
+ *
+ * Manages a persistent list of detected PDFs with upload status tracking.
+ * Uses chrome.storage.local for persistence across service worker restarts.
+ */
+
+import { DetectedPDF } from './pdf-detector';
+
+const STORAGE_KEY = 'pdfQueue';
+const MAX_ENTRIES = 50;
+const UPLOADED_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+const FAILED_MAX_AGE_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+export type PDFStatus = 'pending' | 'uploading' | 'uploaded' | 'failed';
+
+export interface PDFQueueEntry extends DetectedPDF {
+  status: PDFStatus;
+  uploadedAt?: number;
+  binectDocumentId?: number;
+  errorMessage?: string;
+}
+
+interface PDFQueueState {
+  entries: PDFQueueEntry[];
+  lastUpdated: number;
+}
+
+/**
+ * Load queue from storage
+ */
+export async function loadQueue(): Promise<PDFQueueState> {
+  const result = await chrome.storage.local.get(STORAGE_KEY);
+  if (result[STORAGE_KEY]) {
+    return result[STORAGE_KEY] as PDFQueueState;
+  }
+  return { entries: [], lastUpdated: Date.now() };
+}
+
+/**
+ * Save queue to storage
+ */
+export async function saveQueue(state: PDFQueueState): Promise<void> {
+  state.lastUpdated = Date.now();
+  await chrome.storage.local.set({ [STORAGE_KEY]: state });
+}
+
+/**
+ * Add a PDF to the queue
+ *
+ * Returns the created entry, or null if the PDF was already uploaded.
+ * If the PDF already exists as pending/failed, returns the existing entry.
+ */
+export async function addPDF(pdf: DetectedPDF): Promise<PDFQueueEntry | null> {
+  const state = await loadQueue();
+
+  // Check for duplicate by URL
+  const existing = state.entries.find(e => e.url === pdf.url);
+  if (existing) {
+    if (existing.status === 'uploaded') {
+      console.log('[PDF Queue] PDF already uploaded, skipping:', pdf.filename);
+      return null;
+    }
+    console.log('[PDF Queue] PDF already in queue:', pdf.filename);
+    return existing;
+  }
+
+  // Create new entry
+  const entry: PDFQueueEntry = {
+    ...pdf,
+    status: 'pending'
+  };
+
+  // Add to beginning (most recent first)
+  state.entries.unshift(entry);
+
+  // Enforce max entries
+  await enforceMaxEntries(state);
+
+  await saveQueue(state);
+  console.log('[PDF Queue] Added PDF:', pdf.filename);
+  return entry;
+}
+
+/**
+ * Update the status of a PDF in the queue
+ */
+export async function updatePDFStatus(
+  id: string,
+  status: PDFStatus,
+  meta?: { binectDocumentId?: number; errorMessage?: string }
+): Promise<void> {
+  const state = await loadQueue();
+  const entry = state.entries.find(e => e.id === id);
+
+  if (!entry) {
+    console.warn('[PDF Queue] PDF not found for status update:', id);
+    return;
+  }
+
+  entry.status = status;
+
+  if (status === 'uploaded') {
+    entry.uploadedAt = Date.now();
+    if (meta?.binectDocumentId) {
+      entry.binectDocumentId = meta.binectDocumentId;
+    }
+  }
+
+  if (status === 'failed' && meta?.errorMessage) {
+    entry.errorMessage = meta.errorMessage;
+  }
+
+  await saveQueue(state);
+  console.log('[PDF Queue] Updated status:', id, status);
+}
+
+/**
+ * Remove a PDF from the queue
+ */
+export async function removePDF(id: string): Promise<void> {
+  const state = await loadQueue();
+  const index = state.entries.findIndex(e => e.id === id);
+
+  if (index === -1) {
+    console.warn('[PDF Queue] PDF not found for removal:', id);
+    return;
+  }
+
+  state.entries.splice(index, 1);
+  await saveQueue(state);
+  console.log('[PDF Queue] Removed PDF:', id);
+}
+
+/**
+ * Get all pending and failed PDFs (for display in popup)
+ */
+export async function getPendingPDFs(): Promise<PDFQueueEntry[]> {
+  const state = await loadQueue();
+  return state.entries.filter(e => e.status === 'pending' || e.status === 'failed');
+}
+
+/**
+ * Get count of pending PDFs (for badge)
+ */
+export async function getPendingCount(): Promise<number> {
+  const pending = await getPendingPDFs();
+  return pending.length;
+}
+
+/**
+ * Clean up old entries to prevent unbounded growth
+ */
+export async function cleanupOldEntries(): Promise<void> {
+  const state = await loadQueue();
+  const now = Date.now();
+  const initialCount = state.entries.length;
+
+  state.entries = state.entries.filter(entry => {
+    // Always keep pending entries
+    if (entry.status === 'pending' || entry.status === 'uploading') {
+      return true;
+    }
+
+    // Remove uploaded entries older than 7 days
+    if (entry.status === 'uploaded' && entry.uploadedAt) {
+      const age = now - entry.uploadedAt;
+      if (age > UPLOADED_MAX_AGE_MS) {
+        return false;
+      }
+    }
+
+    // Remove failed entries older than 24 hours
+    if (entry.status === 'failed') {
+      const age = now - entry.timestamp;
+      if (age > FAILED_MAX_AGE_MS) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  if (state.entries.length < initialCount) {
+    await saveQueue(state);
+    console.log('[PDF Queue] Cleaned up', initialCount - state.entries.length, 'old entries');
+  }
+}
+
+/**
+ * Enforce maximum entries by removing oldest uploaded/failed entries
+ */
+async function enforceMaxEntries(state: PDFQueueState): Promise<void> {
+  while (state.entries.length > MAX_ENTRIES) {
+    // Find oldest uploaded entry
+    let removeIndex = -1;
+    let oldestTime = Infinity;
+
+    for (let i = state.entries.length - 1; i >= 0; i--) {
+      const entry = state.entries[i];
+      if (entry.status === 'uploaded' && entry.uploadedAt && entry.uploadedAt < oldestTime) {
+        oldestTime = entry.uploadedAt;
+        removeIndex = i;
+      }
+    }
+
+    // If no uploaded entries, find oldest failed
+    if (removeIndex === -1) {
+      for (let i = state.entries.length - 1; i >= 0; i--) {
+        const entry = state.entries[i];
+        if (entry.status === 'failed' && entry.timestamp < oldestTime) {
+          oldestTime = entry.timestamp;
+          removeIndex = i;
+        }
+      }
+    }
+
+    // If still nothing, we can't remove any more (all pending)
+    if (removeIndex === -1) {
+      console.warn('[PDF Queue] Max entries reached, but all are pending');
+      break;
+    }
+
+    state.entries.splice(removeIndex, 1);
+  }
+}