From a7cb20fb376a2918a79dc07e9f63ba9579ac22ca Mon Sep 17 00:00:00 2001
From: Debian <nick@dev.voyager.sh>
Date: Wed, 7 Jan 2026 21:27:25 +0000
Subject: [PATCH] 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 | 55 ++++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/frontend/public/js/app.js b/frontend/public/js/app.js
index 84370bd..927b41d 100644
--- a/frontend/public/js/app.js
+++ b/frontend/public/js/app.js
@@ -100,37 +100,56 @@ 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" onclick="this.closest('.pending-jobs-banner').remove()">Dismiss</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 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');
 
-    btn.disabled = true;
-    btn.textContent = 'Generating...';
-    statusEl.className = 'status-message info';
-    statusEl.textContent = 'Resuming job...';
-    statusEl.classList.remove('hidden');
-    videoEl.classList.add('hidden');
+    try {
+        // Switch to generate tab and show progress
+        showSection('generate');
 
-    // Remove the banner
-    const banner = document.querySelector('.pending-jobs-banner');
-    if (banner) banner.remove();
+        btn.disabled = true;
+        btn.textContent = 'Generating...';
+        statusEl.className = 'status-message info';
+        statusEl.textContent = 'Resuming job...';
+        statusEl.classList.remove('hidden');
+        videoEl.classList.add('hidden');
 
-    // Poll for completion
-    await pollJob(jobId, contentId, statusEl, videoEl);
+        // Remove the banner
+        const banner = document.querySelector('.pending-jobs-banner');
+        if (banner) banner.remove();
 
-    btn.disabled = false;
-    btn.textContent = 'Generate Video';
+        // 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