From 44571e5ac90de826a33e7c8fd15bbcacb107d21e Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Sat, 13 Dec 2025 15:44:13 -0500
Subject: [PATCH] Add job cancellation to work history page

---
 frontend/app/history/page.tsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/app/history/page.tsx b/frontend/app/history/page.tsx
index b4adf36..14a9fc1 100644
--- a/frontend/app/history/page.tsx
+++ b/frontend/app/history/page.tsx
@@ -214,10 +214,10 @@ export default function HistoryPage() {
                   <td className="px-6 py-4 text-gray-400 text-sm">
                     {job.completed_at
                       ? `${Math.round(
-                          (new Date(job.completed_at).getTime() -
-                            new Date(job.created_at).getTime()) /
-                            1000
-                        )}s`
+                        (new Date(job.completed_at).getTime() -
+                          new Date(job.created_at).getTime()) /
+                        1000
+                      )}s`
                       : '-'}
                   </td>
                   <td className="px-6 py-4">
@@ -229,6 +229,24 @@ export default function HistoryPage() {
                       >
                         <Eye className="w-4 h-4" />
                       </button>
+                      {(job.status === 'queued' || job.status === 'processing') && (
+                        <button
+                          onClick={async () => {
+                            try {
+                              await jobsApi.delete(job.id);
+                              toast.success('Job cancelled');
+                              fetchJobs(); // Refresh the list
+                            } catch (err) {
+                              console.error('Failed to cancel job:', err);
+                              toast.error('Failed to cancel job');
+                            }
+                          }}
+                          className="p-2 text-gray-400 hover:text-red-400 transition-colors"
+                          title="Cancel job"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      )}
                       {job.output_asset_ids?.[0] && (
                         <button
                           onClick={() =>