feat: per-account cancel + folder message-count progress in log

- orchestrator: per-account cancellable context registry + CancelAccount;
  on cancel, close IMAP connections to unblock in-flight FETCH; account ends
  in 'cancelled' status with a cancelled event
- imapx: CopyDeps.OnFolder callback fires after EXAMINE with the folder's
  message count (before the long fetch) for visibility
- httpapi: POST /tasks/{id}/accounts/{accountId}/cancel
- web: per-row cancel button while running, folder event shows N messages,
  cancelled/done_with_errors status badges

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMHQTtnQtQqL8muAXHr9kd

web/src/api.ts

@@ -81,6 +81,9 @@ export const deleteTask = (id: number) => api(`/api/tasks/${id}`, { method: 'DEL
 export const deleteAccount = (taskId: number, accountId: number) =>
   api(`/api/tasks/${taskId}/accounts/${accountId}`, { method: 'DELETE' })
 
+export const cancelAccount = (taskId: number, accountId: number) =>
+  api(`/api/tasks/${taskId}/accounts/${accountId}/cancel`, { method: 'POST' })
+
 export const listTasks = () => api<Task[]>('/api/tasks')
 
 export const getTask = (id: number) => api<TaskDetail>(`/api/tasks/${id}`)

web/src/components/StatusBadge.tsx

@@ -2,7 +2,7 @@ export function StatusBadge({ status }: { status: string }) {
   const s = (status || 'pending').toLowerCase()
   let cls = 'badge-pending'
   if (s === 'ok' || s === 'done' || s === 'success') cls = 'badge-ok'
-  else if (s === 'fail' || s === 'failed' || s === 'error') cls = 'badge-fail'
+  else if (s === 'fail' || s === 'failed' || s.includes('error')) cls = 'badge-fail'
   else if (s === 'running' || s === 'testing' || s === 'in_progress') cls = 'badge-info'
   return (
     <span className={`badge ${cls}`}>

web/src/pages/TaskDetail.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react'
-import { createAccount, deleteAccount, getTask, importCSV, runTask, testAccounts, type TaskDetail as TaskDetailData } from '../api'
+import { cancelAccount, createAccount, deleteAccount, getTask, importCSV, runTask, testAccounts, type TaskDetail as TaskDetailData } from '../api'
 import { connectTaskWS, type TaskEvent } from '../ws'
 import { StatusBadge } from '../components/StatusBadge'
 import { useConfirm } from '../components/ConfirmProvider'
@@ -22,6 +22,12 @@ function describeEvent(ev: TaskEvent): string {
       return `DONE #${d.account_id} (${d.src_login} → ${d.dst_login}): copied ${d.copied}, skipped ${d.skipped}, errors ${d.errors}`
     case 'progress':
       return `progress #${d.account_id}: copied ${d.copied}, skipped ${d.skipped}`
+    case 'folder': {
+      const route = d.dst_folder && d.dst_folder !== d.folder ? ` → "${d.dst_folder}"` : ''
+      return `folder "${d.folder}"${route}: ${d.messages ?? 0} messages — fetching (#${d.account_id})`
+    }
+    case 'cancelled':
+      return `CANCELLED #${d.account_id} (${d.src_login}): copied ${d.copied ?? 0}, skipped ${d.skipped ?? 0}`
     case 'error': {
       const where = d.folder ? ` folder "${d.folder}"` : d.side ? ` (${d.side} ${at})` : ''
       return `ERROR #${d.account_id}${where}: ${d.error}`
@@ -60,7 +66,7 @@ export function TaskDetail({ id }: { id: number }) {
     () =>
       connectTaskWS(id, (ev: TaskEvent) => {
         setLog((l) => [{ type: ev.type, text: describeEvent(ev) }, ...l].slice(0, 300))
-        if (['account_started', 'account_test', 'account_done', 'progress', 'run_started', 'run_done', 'error'].includes(ev.type)) {
+        if (['account_started', 'account_test', 'account_done', 'progress', 'run_started', 'run_done', 'error', 'folder', 'cancelled'].includes(ev.type)) {
           reload()
         }
       }),
@@ -132,6 +138,15 @@ export function TaskDetail({ id }: { id: number }) {
     }
   }
 
+  async function onCancelAccount(accId: number) {
+    setError(null)
+    try {
+      await cancelAccount(id, accId)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to cancel account')
+    }
+  }
+
   async function onTest() {
     setBusy('test')
     setError(null)
@@ -351,14 +366,20 @@ export function TaskDetail({ id }: { id: number }) {
                     <td className="num-cell">{a.skipped}</td>
                     <td className="num-cell">{a.errors}</td>
                     <td className="num-cell">
-                      <button
-                        type="button"
-                        className="link-btn danger"
-                        onClick={() => onDeleteAccount(a.id, a.src_login)}
-                        disabled={busy !== null || data?.task.status === 'running'}
-                      >
-                        remove
-                      </button>
+                      {a.status === 'running' ? (
+                        <button type="button" className="link-btn danger" onClick={() => onCancelAccount(a.id)}>
+                          cancel
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          className="link-btn danger"
+                          onClick={() => onDeleteAccount(a.id, a.src_login)}
+                          disabled={busy !== null || data?.task.status === 'running'}
+                        >
+                          remove
+                        </button>
+                      )}
                     </td>
                   </tr>
                 ))