From 6f64b55824d6331cf059ccd498def230c48efaa7 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 29 May 2026 00:02:55 +0000
Subject: [PATCH] feat(ui): add 'Cancel all failed' button to Jobs screen

Pair with the existing 'Retry all failed'. Drops every failed job from
the queue at once. Single confirm prompt. Optimistic local update so the
list clears instantly instead of waiting for the 5s poll tick.

.jobs-cancel-all CSS tinted danger-red without being a loud .btn danger,
matching the per-row Cancel pattern.
---
 services/web-ui/public/screens-jobs.jsx   | 28 ++++++++++++++++++++---
 services/web-ui/public/styles-screens.css |  4 ++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/services/web-ui/public/screens-jobs.jsx b/services/web-ui/public/screens-jobs.jsx
index 718fa2a..e023d10 100644
--- a/services/web-ui/public/screens-jobs.jsx
+++ b/services/web-ui/public/screens-jobs.jsx
@@ -108,6 +108,23 @@ function Jobs({ navigate }) {
     ).then(refresh);
   }, [jobs, refresh]);
 
+  // Drop every failed job from the queue. The opposite of Retry all — used
+  // when a batch of jobs is unrecoverable (e.g. assets that were deleted
+  // mid-encode) and the operator just wants the queue cleared.
+  const handleCancelAll = React.useCallback(() => {
+    const failedJobs = jobs.filter(j => j.status === 'failed');
+    if (failedJobs.length === 0) return;
+    if (!window.confirm(`Remove all ${failedJobs.length} failed jobs from the queue?\nThis cannot be undone.`)) return;
+    Promise.allSettled(
+      failedJobs.map(j => window.ZAMPP_API.fetch('/jobs/' + j.id, { method: 'DELETE' }))
+    ).then(() => {
+      // Optimistic local drop so the UI updates the instant the modal closes,
+      // not 5s later on the next poll tick.
+      setJobs(prev => prev.filter(j => j.status !== 'failed'));
+      refresh();
+    });
+  }, [jobs, refresh]);
+
   const counts = {
     all:     jobs.length,
     running: jobs.filter(j => j.status === 'running').length,
@@ -124,9 +141,14 @@ function Jobs({ navigate }) {
         <span className="subtitle">Proxy generation, transcoding, and processing queue</span>
         <div className="spacer" />
         {counts.failed > 0 && (
-          <button className="btn ghost sm" onClick={handleRetryAll} title={`Retry all ${counts.failed} failed jobs`}>
-            <Icon name="refresh" />Retry all failed
-          </button>
+          <>
+            <button className="btn ghost sm" onClick={handleRetryAll} title={`Retry all ${counts.failed} failed jobs`}>
+              <Icon name="refresh" />Retry all failed
+            </button>
+            <button className="btn ghost sm jobs-cancel-all" onClick={handleCancelAll} title={`Remove all ${counts.failed} failed jobs from the queue`}>
+              <Icon name="x" />Cancel all failed
+            </button>
+          </>
         )}
         <button className="btn ghost sm" onClick={refresh}>
           <Icon name="refresh" />Refresh
diff --git a/services/web-ui/public/styles-screens.css b/services/web-ui/public/styles-screens.css
index 5214bb6..2ae2480 100644
--- a/services/web-ui/public/styles-screens.css
+++ b/services/web-ui/public/styles-screens.css
@@ -1372,3 +1372,7 @@
   display: flex; gap: 8px; margin-top: 4px;
 }
 .premiere-release-actions a { text-decoration: none; }
+
+/* Tint Cancel-all-failed button to signal destructive action without
+   making it loud — same pattern as the per-row Cancel. */
+.jobs-cancel-all { color: var(--danger); }