jobs: Stop now cancels queued jobs; add remove/stop button on list rows

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, type ReactNode } from 'react';
+import { useState, useEffect, useCallback, type ReactNode, type MouseEvent } from 'react';
 import { useParams, useNavigate } from 'react-router';
-import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox } from 'lucide-react';
+import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox, X } from 'lucide-react';
 import { WorkspaceLayout } from 'officerdev';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { useClient } from 'hooks/useClient';
@@ -49,14 +49,22 @@ const JobsListPanel = () => {
   const [search, setSearch] = useState('');
   const [isLoading, setIsLoading] = useState(true);
 
+  const load = useCallback(
+    () => client.get<JobSummary[]>('/jobs').then((data) => { setJobs(data); setIsLoading(false); }).catch(() => setIsLoading(false)),
+    [client],
+  );
+
   useEffect(() => {
-    let alive = true;
-    const load = () =>
-      client.get<JobSummary[]>('/jobs').then((data) => { if (alive) { setJobs(data); setIsLoading(false); } }).catch(() => alive && setIsLoading(false));
     load();
     const timer = setInterval(load, 2500);
-    return () => { alive = false; clearInterval(timer); };
-  }, []);
+    return () => clearInterval(timer);
+  }, [load]);
+
+  // Stop a running job / remove a queued one, then refresh immediately.
+  const cancel = (ev: MouseEvent, id: string) => {
+    ev.stopPropagation();
+    client.post(`/jobs/${id}/stop`, {}).then(() => load()).catch(() => {});
+  };
 
   const filtered = search
     ? jobs.filter((j) => {
@@ -73,24 +81,37 @@ const JobsListPanel = () => {
   ];
   const history = filtered.filter((j) => j.status !== 'running' && j.status !== 'pending');
 
-  const renderRow = (job: JobSummary) => (
-    <button
-      key={job.id}
-      onClick={() => navigate(`/jobs/${job.id}`)}
-      className={`w-full text-left px-4 py-2.5 border-b border-duck-dark/5 transition-colors cursor-pointer flex items-center gap-3 ${
-        job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
-      }`}
-    >
-      <StatusIcon status={job.status} />
-      <div className="flex-1 min-w-0">
-        <span className="text-sm font-medium text-duck-dark truncate block">{job.taskName}</span>
-        <div className="flex items-center gap-2 mt-0.5">
-          <span className="text-xs text-duck-dark/50">{formatDate(job.createdAt)}</span>
-          {job.error && <span className="text-xs text-red-500 truncate max-w-[180px]">{job.error}</span>}
-        </div>
+  const renderRow = (job: JobSummary) => {
+    const cancellable = job.status === 'running' || job.status === 'pending';
+    return (
+      <div
+        key={job.id}
+        className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${
+          job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
+        }`}
+      >
+        <button onClick={() => navigate(`/jobs/${job.id}`)} className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer">
+          <StatusIcon status={job.status} />
+          <div className="flex-1 min-w-0">
+            <span className="text-sm font-medium text-duck-dark truncate block">{job.taskName}</span>
+            <div className="flex items-center gap-2 mt-0.5">
+              <span className="text-xs text-duck-dark/50">{formatDate(job.createdAt)}</span>
+              {job.error && <span className="text-xs text-red-500 truncate max-w-[180px]">{job.error}</span>}
+            </div>
+          </div>
+        </button>
+        {cancellable && (
+          <button
+            onClick={(ev) => cancel(ev, job.id)}
+            title={job.status === 'pending' ? 'Remove from queue' : 'Stop'}
+            className="shrink-0 mr-2 p-1.5 rounded-md text-duck-dark/40 hover:text-red-500 hover:bg-red-500/10 md:opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
       </div>
-    </button>
-  );
+    );
+  };
 
   return (
     <div className="h-full p-2">

src/servers/api/tasks/pipeline-job-manager.ts

@@ -288,6 +288,17 @@ export function stopJob(jobId: string): boolean {
   return true;
 }
 
+// Stop a running job (cooperative abort) OR cancel a queued one (mark stopped so it won't promote).
+export async function requestStop(jobId: string): Promise<'stopped' | 'cancelled' | 'noop'> {
+  if (stopJob(jobId)) return 'stopped';
+  const job = await getPipelineJob(jobId);
+  if (job && job.status === 'pending') {
+    await updatePipelineJob(jobId, { status: 'stopped', completedAt: new Date() });
+    return 'cancelled';
+  }
+  return 'noop';
+}
+
 export function isJobLive(jobId: string): boolean {
   return liveJobs.has(jobId);
 }

src/servers/api/tasks/pipeline-jobs-routes.ts

@@ -98,13 +98,13 @@ pipelineJobsRouter.get('/:id/log', async (c) => {
   }
 });
 
-// POST /:id/stop — request cancellation (cooperative abort).
+// POST /:id/stop — stop a running job or cancel a queued one.
 pipelineJobsRouter.post('/:id/stop', async (c) => {
   const user = c.get('user');
   const job = await getPipelineJob(c.req.param('id'));
   if (!job || job.userId !== user.id) return c.json({ error: 'Not found' }, 404);
-  const stopped = jobManager.stopJob(job.id);
-  return c.json({ ok: true, wasLive: stopped });
+  const result = await jobManager.requestStop(job.id);
+  return c.json({ ok: true, result });
 });
 
 // GET /:id — single job detail (full row).