a stop button on running background jobs

Killing a job meant asking the agent in words — a whole turn to say "please stop
that", and only possible while the agent is responsive. Now it is a button on the
chip.

── Finding the process ──

The platform does not own these processes. Claude Code starts them and nothing
records a pid. What it has is the file the job streams into, and the job is still
holding that file open — so `fuser` gives the pid, and the file is resolved
through the SAME scoped lookup the read path already uses: the id is validated
against TASK_ID_RE, then matched only under this caller's own directories. An id
that resolves to nothing kills nothing.

Verified end to end rather than reasoned about: a stand-in job holding its output
file open, `fuser` finding it, `{"stopped":true}`, process gone.

SIGTERM, not SIGKILL — a dev server with children should get the chance to take
them down with it. SIGKILL orphans them and leaves the port bound, which is worse
than a stop that takes a second.

── Two things it deliberately does not do ──

It does not dismiss the chip or write a `stopped` status locally. The real end
arrives the way every other end does — the harness sees the exit and the
transcript gets the row — so faking it would be a guess that usually agrees with
reality and sometimes does not. A stop that fails leaves the chip running, which
is the truth.

It does not offer to stop a SUBAGENT. Those write a `.jsonl` transcript rather
than holding a log open, so there is no fd to trace; it says so instead of
pretending.

`Square`, not `X`. X on the same chip means "close this", and confusing "hide the
chip" with "kill the process" is the one mistake worth designing out — which is
why stop appears only on running tasks and dismiss only on finished ones.

tsgo clean, frontend builds, 851 pass / 7 fail unchanged.

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

src/workspaces/officerdev/src/apps/Chat/components/BackgroundTaskTray.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { Check, ChevronDown, CircleSlash, Loader2, Pin, X } from 'lucide-react';
+import { toast } from 'sonner';
+import { useClient } from 'hooks/useClient';
+import { Check, ChevronDown, CircleSlash, Loader2, Pin, Square, X } from 'lucide-react';
 import type { Tone } from '@/components/Data';
 import { toneText } from '@/components/Data';
 import type { ChatMessage } from '../types';
@@ -32,6 +34,23 @@ export const BackgroundTaskTray = ({ messages }: BackgroundTaskTrayProps) => {
   const { tasks, pinned, unpinned, running, clearable, togglePin, dismiss, dismissFinished } =
     useBackgroundTasks(messages);
   const [openId, setOpenId] = useState<string | null>(null);
+  const client = useClient();
+
+  /**
+   * Kill a running job.
+   *
+   * The chip is NOT dismissed here and its status is not faked. The job's real end arrives the way every
+   * other end does — the harness notices the exit and the transcript gets a `stopped` row — so writing
+   * that state locally would just be a guess that usually agrees with reality and occasionally does not.
+   * A stop that fails leaves the chip running, which is the truth.
+   */
+  const stopTask = async (taskId: string) => {
+    try {
+      await client.delete(`/chat/tasks/${taskId}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Could not stop that job');
+    }
+  };
 
   // Derived, not stored: dismissing the chip that is open closes the panel without a second piece of state
   // having to be kept in step with the first.
@@ -47,6 +66,7 @@ export const BackgroundTaskTray = ({ messages }: BackgroundTaskTrayProps) => {
     // Finished only. A running chip is the only handle on work still going on, so closing one would hide
     // something you cannot get back to — the bulk clear draws the same line.
     onDismiss: task.status ? () => dismiss(task.taskId) : undefined,
+    onStop: task.status ? undefined : () => void stopTask(task.taskId),
   });
 
   return (
@@ -116,13 +136,15 @@ type TaskChipProps = {
   onTogglePin: () => void;
   /** Absent for a running task — see the call site. */
   onDismiss?: () => void;
+  /** Only for a RUNNING task: kill it. The inverse of `onDismiss`, which only finished tasks get. */
+  onStop?: () => void;
 };
 
 /**
  * The pill is a div wrapping several buttons rather than one button with controls inside it: a button
  * nested in a button is invalid, and the browser resolves it by swallowing one of the two clicks.
  */
-const TaskChip = ({ task, active, pinned, onClick, onTogglePin, onDismiss }: TaskChipProps) => {
+const TaskChip = ({ task, active, pinned, onClick, onTogglePin, onDismiss, onStop }: TaskChipProps) => {
   const { status } = task;
   const tone = toneText[statusTone(status)];
   const label = task.description || 'Background task';
@@ -162,12 +184,26 @@ const TaskChip = ({ task, active, pinned, onClick, onTogglePin, onDismiss }: Tas
         aria-pressed={pinned}
         title={pinned ? 'Unpin' : 'Pin to the top row'}
         aria-label={`${pinned ? 'Unpin' : 'Pin'} ${label}`}
-        className={`cursor-pointer py-1 pl-0.5 transition-colors ${onDismiss ? 'pr-0.5' : 'pr-2'} ${
+        className={`cursor-pointer py-1 pl-0.5 transition-colors ${onDismiss || onStop ? 'pr-0.5' : 'pr-2'} ${
           pinned ? 'text-duck-teal' : 'text-muted-foreground/50 hover:text-foreground'
         }`}
       >
         <Pin className={`h-3 w-3 ${pinned ? 'fill-current' : ''}`} />
       </button>
+      {/* Stopping is for RUNNING tasks and dismissing is for finished ones, so the two never share the
+          slot. Square rather than X: X next to it means "close this chip", and confusing "hide the chip"
+          with "kill the process" is the one mistake worth designing out. */}
+      {onStop && (
+        <button
+          type="button"
+          onClick={onStop}
+          title="Stop this job"
+          aria-label={`Stop ${label}`}
+          className="cursor-pointer py-1 pl-0.5 pr-2 text-muted-foreground/50 transition-colors hover:text-destructive"
+        >
+          <Square className="h-3 w-3" />
+        </button>
+      )}
       {onDismiss && (
         <button
           type="button"