Fix View Progress button not responding to clicks

Replace inline onclick handlers with proper addEventListener to fix
silent failures from async promise rejections. Add try-catch error
handling to show errors to user instead of failing silently.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/public/js/app.js

@@ -100,21 +100,34 @@ function showPendingJobsNotification(jobs) {
     banner.innerHTML = `
         <span>You have ${jobs.length} video${jobs.length > 1 ? 's' : ''} generating in the background</span>
         <div class="pending-jobs-actions">
-            <button class="btn btn-sm" onclick="resumeLatestJob(${jobs[0].id}, '${jobs[0].runpod_job_id}')">View Progress</button>
+            <button class="btn btn-sm view-progress-btn" data-content-id="${jobs[0].id}" data-job-id="${jobs[0].runpod_job_id}">View Progress</button>
-            <button class="btn btn-sm" onclick="this.closest('.pending-jobs-banner').remove()">Dismiss</button>
+            <button class="btn btn-sm dismiss-btn">Dismiss</button>
         </div>
     `;
+
+    // Attach event listeners properly instead of inline onclick
+    banner.querySelector('.view-progress-btn').addEventListener('click', function() {
+        const contentId = parseInt(this.dataset.contentId, 10);
+        const jobId = this.dataset.jobId;
+        resumeLatestJob(contentId, jobId);
+    });
+
+    banner.querySelector('.dismiss-btn').addEventListener('click', function() {
+        banner.remove();
+    });
+
     document.querySelector('.main-content').prepend(banner);
 }
 
 async function resumeLatestJob(contentId, jobId) {
-    // Switch to generate tab and show progress
-    showSection('generate');
-
     const statusEl = document.getElementById('generation-status');
     const videoEl = document.getElementById('output-video');
     const btn = document.getElementById('generate-btn');
 
+    try {
+        // Switch to generate tab and show progress
+        showSection('generate');
+
         btn.disabled = true;
         btn.textContent = 'Generating...';
         statusEl.className = 'status-message info';
@@ -128,9 +141,15 @@ async function resumeLatestJob(contentId, jobId) {
 
         // Poll for completion
         await pollJob(jobId, contentId, statusEl, videoEl);
-
+    } catch (error) {
+        console.error('Error resuming job:', error);
+        statusEl.className = 'status-message error';
+        statusEl.textContent = error.message || 'Failed to resume job';
+        statusEl.classList.remove('hidden');
+    } finally {
         btn.disabled = false;
         btn.textContent = 'Generate Video';
+    }
 }
 
 // Login