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>

src/databases/officer_db/src/index.ts

@@ -79,6 +79,8 @@ export {
   getPipelineJobsForUser,
   getOldestPendingJob,
   countPendingJobs,
+  deletePipelineJob,
+  deleteTerminalJobsForUser,
   markInterruptedJobs,
 } from './queries/pipeline-jobs';
 

src/databases/officer_db/src/queries/pipeline-jobs.ts

@@ -1,4 +1,6 @@
-import { eq, and, asc, desc } from 'drizzle-orm';
+import { eq, and, inArray, asc, desc } from 'drizzle-orm';
+
+const TERMINAL_STATUSES = ['completed', 'failed', 'stopped', 'interrupted'] as const;
 import { db } from '../db';
 import { pipelineJobs } from '../schema/pipeline-jobs';
 import type { PipelineJobInsert } from '../types';
@@ -26,6 +28,20 @@ export async function getPipelineJobsForUser(userId: number, limit = 50) {
     .limit(limit);
 }
 
+// Delete a single job row.
+export async function deletePipelineJob(id: string) {
+  await db.delete(pipelineJobs).where(eq(pipelineJobs.id, id));
+}
+
+// Delete all of a user's finished jobs (history); returns the deleted ids so their logs can be removed.
+export async function deleteTerminalJobsForUser(userId: number) {
+  const rows = await db
+    .delete(pipelineJobs)
+    .where(and(eq(pipelineJobs.userId, userId), inArray(pipelineJobs.status, [...TERMINAL_STATUSES])))
+    .returning({ id: pipelineJobs.id });
+  return rows.map((r) => r.id);
+}
+
 // Count of the user's queued (pending) jobs — for the header badge.
 export async function countPendingJobs(userId: number) {
   const rows = await db

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

@@ -8,13 +8,16 @@ import {
   getPipelineJobsForUser,
   getOldestPendingJob,
   countPendingJobs,
+  deletePipelineJob,
+  deleteTerminalJobsForUser,
   markInterruptedJobs,
   getUserById,
 } from 'officerdb';
+import { unlink } from 'node:fs/promises';
 import { toShellUsername } from '../../data-path';
 import { executePipeline } from './pipeline-executor';
 import type { OutMessage } from './pipeline-executor';
-import { executeScript, type ScriptEvent } from './execute-script';
+import { executeScript, jobLogPath, type ScriptEvent } from './execute-script';
 
 // Everything a job can stream — pipeline structural events plus script stdout/stderr/exit.
 type JobEvent = OutMessage | ScriptEvent;
@@ -318,6 +321,23 @@ export async function getJobsForUser(userId: number) {
   }));
 }
 
+// Delete a job (row + log). Refuses a running job — it must be stopped first.
+export async function deleteJob(jobId: string): Promise<'deleted' | 'running' | 'noop'> {
+  if (liveJobs.has(jobId)) return 'running';
+  const job = await getPipelineJob(jobId);
+  if (!job) return 'noop';
+  await deletePipelineJob(jobId);
+  await unlink(jobLogPath(jobId)).catch(() => {});
+  return 'deleted';
+}
+
+// Clear all finished jobs (rows + logs). Running/queued jobs are untouched.
+export async function clearHistory(userId: number): Promise<number> {
+  const ids = await deleteTerminalJobsForUser(userId);
+  await Promise.all(ids.map((id) => unlink(jobLogPath(id)).catch(() => {})));
+  return ids.length;
+}
+
 // Lightweight header-badge summary: how many of the user's jobs are running / queued, and which one
 // is running (for the "running" badge's link).
 export async function getCounts(userId: number): Promise<{ running: number; runningJobId: string | null; queued: number }> {

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

@@ -24,6 +24,8 @@ pipelineJobsRouter.get('/', async (c) => {
         status: j.status,
         isLive: j.isLive,
         exitCode: j.exitCode,
+        // The file/folder the job is working on (for the list rows).
+        target: (j.inputs as Record<string, unknown> | null)?.file_path ?? j.cwd ?? null,
         totalCost: j.totalCost,
         createdAt: j.createdAt,
         startedAt: j.startedAt,
@@ -107,6 +109,23 @@ pipelineJobsRouter.post('/:id/stop', async (c) => {
   return c.json({ ok: true, result });
 });
 
+// DELETE /history — clear all finished jobs (rows + logs). Before /:id so it isn't captured as an id.
+pipelineJobsRouter.delete('/history', async (c) => {
+  const user = c.get('user');
+  const cleared = await jobManager.clearHistory(user.id);
+  return c.json({ ok: true, cleared });
+});
+
+// DELETE /:id — delete a job (queued or finished). Running jobs must be stopped first (409).
+pipelineJobsRouter.delete('/:id', 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 result = await jobManager.deleteJob(job.id);
+  if (result === 'running') return c.json({ error: 'Stop the job before deleting' }, 409);
+  return c.json({ ok: true, result });
+});
+
 // GET /:id — single job detail (full row).
 pipelineJobsRouter.get('/:id', async (c) => {
   const user = c.get('user');