jobs: show target path in list rows; delete queued/finished jobs + clear-all history

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, useCallback, type ReactNode, type MouseEvent } from 'react';
 import { useParams, useNavigate } from 'react-router';
-import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox, X } from 'lucide-react';
+import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox, Square, Trash2 } from 'lucide-react';
 import { WorkspaceLayout } from 'officerdev';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { useClient } from 'hooks/useClient';
@@ -15,11 +15,14 @@ type JobSummary = {
   taskName: string;
   status: 'pending' | 'running' | 'completed' | 'failed' | 'stopped' | 'interrupted';
   exitCode: number | null;
+  target: string | null;
   totalCost: { inputTokens: number; outputTokens: number; totalUSD: number } | null;
   createdAt: string;
   error: string | null;
 };
 
+const basename = (p: string | null) => (p ? p.replace(/\/+$/, '').split('/').pop() || p : null);
+
 const formatDate = (iso: string) =>
   new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
 
@@ -48,39 +51,45 @@ const useJobsData = () => {
     const timer = setInterval(load, 2500);
     return () => clearInterval(timer);
   }, [load]);
-  const cancel = useCallback(
-    (ev: MouseEvent, id: string) => { ev.stopPropagation(); client.post(`/jobs/${id}/stop`, {}).then(() => load()).catch(() => {}); },
+  // Running → stop; queued/finished → delete the row. Then refresh.
+  const act = useCallback(
+    (ev: MouseEvent, job: JobSummary) => {
+      ev.stopPropagation();
+      const req = job.status === 'running' ? client.post(`/jobs/${job.id}/stop`, {}) : client.delete(`/jobs/${job.id}`);
+      req.then(() => load()).catch(() => {});
+    },
     [client, load],
   );
-  return { jobs, isLoading, cancel };
+  const clearHistory = useCallback(() => { client.delete('/jobs/history').then(() => load()).catch(() => {}); }, [client, load]);
+  return { jobs, isLoading, act, clearHistory };
 };
 
-type JobRowProps = { job: JobSummary; onCancel: (ev: MouseEvent, id: string) => void };
-const JobRow = ({ job, onCancel }: JobRowProps) => {
+type JobRowProps = { job: JobSummary; onAction: (ev: MouseEvent, job: JobSummary) => void };
+const JobRow = ({ job, onAction }: JobRowProps) => {
   const navigate = useNavigate();
   const { id: activeId } = useParams<{ id: string }>();
-  const cancellable = job.status === 'running' || job.status === 'pending';
+  const isRunning = job.status === 'running';
+  const target = basename(job.target);
   return (
     <div 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>
+          {target && <span className="text-xs text-duck-dark/60 truncate block" title={job.target ?? undefined}>{target}</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>}
+            <span className="text-xs text-duck-dark/40">{formatDate(job.createdAt)}</span>
+            {job.error && <span className="text-xs text-red-500 truncate max-w-[160px]">{job.error}</span>}
           </div>
         </div>
       </button>
-      {cancellable && (
-        <button
-          onClick={(ev) => onCancel(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>
-      )}
+      <button
+        onClick={(ev) => onAction(ev, job)}
+        title={isRunning ? 'Stop' : 'Delete'}
+        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"
+      >
+        {isRunning ? <Square className="h-4 w-4" /> : <Trash2 className="h-4 w-4" />}
+      </button>
     </div>
   );
 };
@@ -91,7 +100,7 @@ const PanelHeader = ({ children }: { children: ReactNode }) => (
 
 // Top-left panel: running first, then the FIFO queue (oldest pending on top — next to run).
 const ActiveJobsPanel = () => {
-  const { jobs, isLoading, cancel } = useJobsData();
+  const { jobs, isLoading, act } = useJobsData();
   const active = [
     ...jobs.filter((j) => j.status === 'running'),
     ...jobs.filter((j) => j.status === 'pending').sort((a, b) => +new Date(a.createdAt) - +new Date(b.createdAt)),
@@ -109,7 +118,7 @@ const ActiveJobsPanel = () => {
           ) : active.length === 0 ? (
             <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Nothing running</div>
           ) : (
-            active.map((job) => <JobRow key={job.id} job={job} onCancel={cancel} />)
+            active.map((job) => <JobRow key={job.id} job={job} onAction={act} />)
           )}
         </div>
       </Card>
@@ -119,7 +128,7 @@ const ActiveJobsPanel = () => {
 
 // Bottom-left panel: finished / failed / stopped, newest first, searchable.
 const HistoryJobsPanel = () => {
-  const { jobs, isLoading, cancel } = useJobsData();
+  const { jobs, isLoading, act, clearHistory } = useJobsData();
   const [search, setSearch] = useState('');
   const history = jobs
     .filter((j) => j.status !== 'running' && j.status !== 'pending')
@@ -143,6 +152,11 @@ const HistoryJobsPanel = () => {
               className="w-full pl-8 pr-3 py-1 text-sm rounded-md border border-duck-dark/15 bg-background/60 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/40"
             />
           </div>
+          {history.length > 0 && (
+            <button onClick={clearHistory} title="Delete all finished jobs" className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer">
+              Clear all
+            </button>
+          )}
         </PanelHeader>
         <div className="flex-1 overflow-y-auto">
           {isLoading ? (
@@ -150,7 +164,7 @@ const HistoryJobsPanel = () => {
           ) : history.length === 0 ? (
             <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{search ? 'No matches' : 'No finished jobs'}</div>
           ) : (
-            history.map((job) => <JobRow key={job.id} job={job} onCancel={cancel} />)
+            history.map((job) => <JobRow key={job.id} job={job} onAction={act} />)
           )}
         </div>
       </Card>