UI: job badges, skeletons, cancel support + API route to cancel jobs\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/routes/api/jobs/$jobId/cancel.ts

@@ -0,0 +1,14 @@
+import { cancelJob } from "../../../lib/queue";
+
+export async function action({ params }: { params: { jobId: string } }) {
+  const jobId = params.jobId;
+  if (!jobId) return Response.json({ error: "jobId required" }, { status: 400 });
+
+  try {
+    const ok = await cancelJob(jobId);
+    return Response.json({ cancelled: ok });
+  } catch (err) {
+    console.error("/api/jobs cancel error:", err);
+    return Response.json({ error: "internal" }, { status: 500 });
+  }
+}

app/routes/jobs/$jobId.tsx

@@ -58,11 +58,37 @@ export default function JobDetail() {
           {job?.failedReason && (
             <div className="mb-3 text-red-600">Failed: {job.failedReason}</div>
           )}
+
+          <div className="flex items-center gap-3 mb-3">
+            {job?.state === 'waiting' || job?.state === 'queued' ? (
+              <button
+                onClick={async () => {
+                  try {
+                    const res = await fetch(`/api/jobs/${job?.id}/cancel`, { method: 'POST' });
+                    if (res.ok) {
+                      const d = await res.json();
+                      if (d.cancelled) {
+                        setJob((prev: any) => ({ ...(prev || {}), state: 'failed', failedReason: 'cancelled' }));
+                      }
+                    }
+                  } catch (e) {
+                    // ignore
+                  }
+                }}
+                className="text-sm text-red-600 hover:underline"
+              >
+                Cancel Job
+              </button>
+            ) : null}
+
+            <a href={`/api/jobs/${job?.id}`} target="_blank" rel="noreferrer" className="text-sm text-blue-600 hover:underline">Open API</a>
+          </div>
+
           <div className="text-sm text-gray-700 mb-3">Data:</div>
           <pre className="bg-gray-50 p-3 rounded text-xs overflow-x-auto">{JSON.stringify(job?.data || job?.returnValue || job, null, 2)}</pre>
 
           <div className="mt-4">
-            <a href={`/api/jobs/${job?.id}`} target="_blank" rel="noreferrer" className="text-sm text-blue-600 hover:underline">Open API</a>
+            
           </div>
         </div>
       </div>