From 934a5085081d0bd9295869bf9155dc6ffcd26036 Mon Sep 17 00:00:00 2001
From: David Kifer <dkifer19@gmail.com>
Date: Sun, 28 Jun 2026 18:53:59 -0400
Subject: [PATCH] Show Failure Cause block and add Retry button for failed jobs
 in queue UI

---
 static/app.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/static/app.js b/static/app.js
index 0ea12e2..fefb3e5 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1369,8 +1369,13 @@ async function loadQueue() {
                 <span><i class="fa-solid fa-file-video"></i> Source: ${job.video_path.split('/').pop()}</span>
             `;
             
+            let errorHtml = "";
             if (job.status === "failed" && job.error) {
-                metaHtml += `<span style="color: var(--danger);"><i class="fa-solid fa-triangle-exclamation"></i> Error: ${job.error}</span>`;
+                errorHtml = `
+                    <div class="queue-item-error" style="margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(255, 0, 85, 0.08); border-left: 3px solid var(--danger); border-radius: 4px; font-size: 0.78rem; color: var(--danger); width: 100%; word-break: break-word;">
+                        <i class="fa-solid fa-triangle-exclamation" style="margin-right: 0.25rem;"></i> <strong>Failure Cause:</strong> ${job.error}
+                    </div>
+                `;
             } else if (job.status !== "queued" && job.status !== "failed" && job.status !== "cancelled" && job.status !== "completed" && job.status !== "interrupted") {
                 metaHtml += `<span><i class="fa-solid fa-clock"></i> ETA: ${job.eta || 'Calculating...'}</span>`;
             }
@@ -1393,10 +1398,15 @@ async function loadQueue() {
                 `;
             }
             
-            if (job.status === "interrupted") {
+            if (job.status === "interrupted" || job.status === "failed") {
+                const btnLabel = job.status === "failed" ? "Retry" : "Resume";
+                const btnIcon = job.status === "failed" ? "fa-rotate-right" : "fa-play";
                 actionsHtml = `
                     <button class="btn btn-primary btn-small btn-resume-job" data-id="${job.job_id}">
-                        <i class="fa-solid fa-play"></i> Resume
+                        <i class="fa-solid ${btnIcon}"></i> ${btnLabel}
+                    </button>
+                    <button class="btn btn-secondary btn-small btn-view-job" data-id="${job.job_id}">
+                        <i class="fa-solid fa-eye"></i> View
                     </button>
                     <button class="btn btn-secondary btn-small btn-delete-job" data-id="${job.job_id}">
                         <i class="fa-solid fa-trash"></i> Clear
@@ -1427,7 +1437,7 @@ async function loadQueue() {
             const progressStyle = showProgress ? "display: block;" : "display: none;";
             
             item.innerHTML = `
-                <div class="queue-item-details">
+                <div class="queue-item-details" style="width: 100%;">
                     <div class="queue-item-title">
                         ${titleLabel}
                         <span class="status-badge ${job.status}" style="font-size: 0.7rem; padding: 0.15rem 0.5rem; margin-left: 0.5rem;">${job.status}</span>
@@ -1435,6 +1445,7 @@ async function loadQueue() {
                     <div class="queue-item-meta">
                         ${metaHtml}
                     </div>
+                    ${errorHtml}
                 </div>
                 <div class="queue-item-status-bar">
                     <div class="queue-item-progress-container" style="${progressStyle}">