@prenta/admin 2.6.1 → 2.8.0

package/src/__tests__/views/jobs-list.render.test.tsx

@@ -0,0 +1,853 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { StrictMode } from 'react'
+import type { Job, JobWorkerStatus } from '@prenta/core'
+
+/*
+ * The Jobs list (P-17): kit copy and states, client-side filters and counts,
+ * the Live refresh (cadence, backoff, timeout, clock offset), a stable
+ * progress cell, the empty and error states, and focus around the list's
+ * actions. The refresh's GETs are answered by the `fetch` stub, the actions'
+ * POSTs by the `cmsApi` mock, both from `server` below.
+ */
+
+const MIN = 60_000
+
+interface Reply {
+  data?: unknown
+  error?: string
+  status: number
+}
+
+interface Server {
+  jobs: Job[]
+  worker: JobWorkerStatus
+  /** `GET /jobs` fails with this status and message. */
+  listError: { status: number; message: string; retryAfter?: string } | null
+  /** `GET /jobs` never answers until its request is aborted. */
+  listHangs: boolean
+  /** `GET /jobs/worker` fails with this message. */
+  workerError: string | null
+  /** The server's clock minus the browser's, for the `Date` header. */
+  clockOffsetMs: number
+  calls: Array<{ endpoint: string; method: string }>
+  post: (endpoint: string) => Reply | Promise<Reply>
+}
+
+const server: Server = {
+  jobs: [],
+  // Both are set by resetServer() before each test.
+  worker: {} as JobWorkerStatus,
+  listError: null,
+  listHangs: false,
+  workerError: null,
+  clockOffsetMs: 0,
+  calls: [],
+  post: () => ({ error: 'not stubbed', status: 500 }),
+}
+
+vi.mock('../../lib/api.js', () => ({
+  getApiBase: () => '/api/cms',
+  cmsApi: vi.fn(async (endpoint: string, init: RequestInit = {}) => {
+    server.calls.push({ endpoint, method: (init.method ?? 'GET').toUpperCase() })
+    return server.post(endpoint)
+  }),
+}))
+
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn() }))
+vi.mock('sonner', () => ({ toast }))
+
+/** The parts of a `Response` the Jobs service reads. */
+function reply(status: number, body: unknown, headers: Record<string, string> = {}) {
+  const all: Record<string, string> = {
+    date: new Date(Date.now() + server.clockOffsetMs).toUTCString(),
+    ...headers,
+  }
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    headers: { get: (name: string) => all[name.toLowerCase()] ?? null },
+    json: async () => body,
+  }
+}
+
+function fetchStub(url: string, init: RequestInit = {}) {
+  const endpoint = url.replace(/^\/api\/cms/, '')
+  server.calls.push({ endpoint, method: 'GET' })
+  if (endpoint === '/jobs?limit=50') {
+    if (server.listHangs) {
+      return new Promise((_, reject) => {
+        init.signal?.addEventListener('abort', () =>
+          reject(new DOMException('This operation was aborted', 'AbortError')),
+        )
+      })
+    }
+    const failure = server.listError
+    if (failure) {
+      const headers: Record<string, string> = failure.retryAfter
+        ? { 'retry-after': failure.retryAfter }
+        : {}
+      return Promise.resolve(reply(failure.status, { error: failure.message }, headers))
+    }
+    return Promise.resolve(reply(200, { data: { jobs: server.jobs } }))
+  }
+  if (endpoint === '/jobs/worker') {
+    return Promise.resolve(
+      server.workerError
+        ? reply(500, { error: server.workerError })
+        : reply(200, { data: server.worker }),
+    )
+  }
+  return Promise.resolve(reply(404, { error: `unexpected ${endpoint}` }))
+}
+
+const { Jobs } = await import('../../views/Jobs.js')
+
+/** Someone who may run, cancel and retry any job. */
+const ADMIN = { role: 'ADMIN', userId: 'u1' }
+
+/** A time on the server's clock, `offsetMs` from now. */
+function iso(offsetMs: number): string {
+  return new Date(Date.now() + server.clockOffsetMs + offsetMs).toISOString()
+}
+
+function workerStatus(): JobWorkerStatus {
+  return {
+    lastTickAt: iso(-24_000),
+    lastTickMs: 1800,
+    nextTickAt: iso(36_000),
+    budgetMs: 20_000,
+    schedules: [
+      { type: 'seo-scan', cron: '0 4 * * 1', nextAt: iso(7 * 24 * 60 * MIN), activeJobId: null },
+      { type: 'content-health', cron: '30 2 * * *', nextAt: iso(12 * 60 * MIN), activeJobId: null },
+    ],
+  }
+}
+
+function batch(overrides: Partial<Job> & { done?: number; total?: number }): Job {
+  const { done = 0, total = 42, ...rest } = overrides
+  return {
+    id: 'job',
+    type: 'batch-ai',
+    status: 'queued',
+    title: 'Batch',
+    scope: '42 posts',
+    runAt: iso(0),
+    attempts: 0,
+    maxAttempts: 3,
+    progress: { done, total, unit: 'documents', cursor: null, completed: done },
+    lastError: null,
+    explain: null,
+    summary: null,
+    lockedAt: null,
+    cancelRequestedAt: null,
+    cancelledBy: null,
+    createdBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+    createdAt: iso(-19 * MIN),
+    updatedAt: iso(0),
+    finishedAt: null,
+    usage: { tokensIn: 0, tokensOut: 0 },
+    payload: {
+      operation: 'meta',
+      instruction: null,
+      source: 'posts',
+      statusFilter: 'all',
+      documentIds: [],
+      review: 'review',
+      onApprove: 'draft',
+    },
+    review: { pending: 0, approved: 0, rejected: 0 },
+    ...rest,
+  }
+}
+
+function scan(type: 'seo-scan' | 'content-health', overrides: Partial<Job>): Job {
+  const job = batch({
+    type,
+    title: type === 'seo-scan' ? 'SEO scan' : 'Content health',
+    scope: type === 'seo-scan' ? 'All indexable pages' : 'All published documents',
+    createdBy: { kind: 'cron', schedule: type === 'seo-scan' ? 'weekly-seo' : 'nightly-health' },
+    payload: { trigger: 'cron' },
+    ...overrides,
+  })
+  delete job.review
+  return job
+}
+
+/** The kit's nine jobs (jobs-data.jsx `JOBS`), as the API sends them. */
+function kitJobs(): Job[] {
+  return [
+    batch({
+      id: 'job_418',
+      title: 'Generate alt text',
+      scope: '64 images with no alt text',
+      done: 9,
+      total: 64,
+      attempts: 1,
+      lastError: 'ImageFetchError: img_2291.webp returned 404',
+      runAt: iso(30_000),
+      createdBy: { id: 'u2', name: 'Dana Cole', initials: 'DC' },
+      createdAt: iso(-34 * MIN),
+      review: { pending: 9, approved: 0, rejected: 0 },
+    }),
+    batch({
+      id: 'job_417',
+      title: 'Rewrite meta descriptions',
+      status: 'running',
+      done: 18,
+      total: 42,
+      attempts: 1,
+      lockedAt: iso(-5_000),
+      review: { pending: 6, approved: 12, rejected: 0 },
+    }),
+    scan('content-health', {
+      id: 'job_416',
+      status: 'succeeded',
+      progress: { done: 412, total: 412, unit: 'documents', cursor: null, completed: 412 },
+      createdAt: iso(-60 * MIN),
+      finishedAt: iso(-43 * MIN),
+    }),
+    batch({
+      id: 'job_415',
+      title: 'Translate excerpts to Spanish',
+      scope: '30 case studies',
+      status: 'dead',
+      done: 7,
+      total: 30,
+      attempts: 3,
+      lastError: 'ProviderError: 429 Too Many Requests',
+      createdBy: { id: 'u3', name: 'Maya Shah', initials: 'MS' },
+      review: { pending: 7, approved: 0, rejected: 0 },
+    }),
+    scan('seo-scan', {
+      id: 'job_414',
+      status: 'succeeded',
+      progress: { done: 340, total: 340, unit: 'pages', cursor: null, completed: 340 },
+      createdAt: iso(-180 * MIN),
+      finishedAt: iso(-68 * MIN),
+    }),
+    batch({
+      id: 'job_413',
+      title: 'Add internal links',
+      status: 'succeeded',
+      done: 7,
+      total: 7,
+      finishedAt: iso(-60 * MIN),
+      createdAt: iso(-68 * MIN),
+      review: { pending: 0, approved: 6, rejected: 1 },
+    }),
+    batch({
+      id: 'job_412',
+      title: 'Shorten long titles',
+      status: 'cancelled',
+      done: 12,
+      total: 30,
+      cancelledBy: { id: 'u2', name: 'Dana Cole', initials: 'DC' },
+    }),
+    scan('content-health', { id: 'job_411', status: 'succeeded', attempts: 2 }),
+    scan('content-health', { id: 'job_410', status: 'succeeded' }),
+  ]
+}
+
+let visibility: DocumentVisibilityState = 'visible'
+
+function resetServer() {
+  server.clockOffsetMs = 0
+  server.jobs = kitJobs()
+  server.worker = workerStatus()
+  server.listError = null
+  server.listHangs = false
+  server.workerError = null
+  server.calls = []
+  server.post = () => ({ error: 'not stubbed', status: 500 })
+}
+
+beforeEach(() => {
+  resetServer()
+  vi.stubGlobal('fetch', vi.fn(fetchStub))
+  toast.mockClear()
+  toast.error.mockClear()
+  visibility = 'visible'
+  Object.defineProperty(document, 'visibilityState', {
+    configurable: true,
+    get: () => visibility,
+  })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+const count = (endpoint: string) =>
+  server.calls.filter((call) => call.endpoint === endpoint && call.method === 'GET').length
+const listCalls = () => count('/jobs?limit=50')
+const workerCalls = () => count('/jobs/worker')
+
+/** Fake every timer and the clock, from a whole second, and rebuild the fixtures on it. */
+function useClock() {
+  vi.useFakeTimers({ now: new Date('2026-10-19T14:00:00.000Z') })
+  const offset = server.clockOffsetMs
+  resetServer()
+  server.clockOffsetMs = offset
+  server.jobs = kitJobs()
+  server.worker = workerStatus()
+}
+
+/** Run timers (and the promises they start) up to `ms` from now. */
+async function advance(ms: number) {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(ms)
+  })
+}
+
+async function renderLoaded() {
+  render(<Jobs onNavigate={() => {}} {...ADMIN} />)
+  await screen.findByRole('list', { name: 'Jobs' })
+}
+
+/** With fake timers: render and let the first load land. */
+async function renderOnClock() {
+  render(<Jobs onNavigate={() => {}} {...ADMIN} />)
+  await advance(0)
+  expect(screen.getByRole('list', { name: 'Jobs' })).toBeTruthy()
+}
+
+function rowFor(title: string): HTMLElement {
+  const item = screen.getByRole('button', { name: title }).closest('li')
+  if (!item) throw new Error(`no row for ${title}`)
+  return item
+}
+
+function note(): string {
+  return screen.getByRole('status').textContent ?? ''
+}
+
+function setVisibility(next: DocumentVisibilityState) {
+  visibility = next
+  act(() => {
+    document.dispatchEvent(new Event('visibilitychange'))
+  })
+}
+
+describe('Jobs list', () => {
+  it('shows the kit’s header, worker strip, alerts and filter counts', async () => {
+    await renderLoaded()
+    expect(screen.getByRole('heading', { level: 1, name: 'Jobs' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Live', pressed: true })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'New batch AI job' })).toBeTruthy()
+    expect(screen.getByText(/^Ran 2\ds ago/)).toBeTruthy()
+    expect(screen.getByText('Mon 04:00 UTC', { exact: false })).toBeTruthy()
+    expect(screen.getByText('Daily 02:30 UTC', { exact: false })).toBeTruthy()
+    expect(screen.queryAllByText('· running now')).toHaveLength(0)
+
+    const failed = screen.getByRole('alert')
+    expect(failed.textContent).toBe(
+      '1 job failed after 3 attempts. Translate excerpts to Spanish: ProviderError: 429 Too Many Requests. Finished work is kept.See whyRetry',
+    )
+    expect(
+      screen.getByText(
+        (_, el) =>
+          el?.tagName === 'SPAN' &&
+          /^15 AI changes are waiting for review across 2 jobs\./.test(el.textContent ?? ''),
+      ),
+    ).toBeTruthy()
+
+    const tabs = within(screen.getByRole('tablist', { name: 'Filter jobs' }))
+      .getAllByRole('tab')
+      .map((tab) => tab.textContent)
+    expect(tabs).toEqual([
+      'All9',
+      'Active2',
+      'Needs review3',
+      'Succeeded5',
+      'Failed1',
+      'Cancelled1',
+    ])
+    expect(note()).toBe('Latest 50 jobs · updates every 5 seconds')
+
+    const running = rowFor('Rewrite meta descriptions')
+    expect(within(running).getByText('Running')).toBeTruthy()
+    expect(within(running).getByText('Slice 19 · working')).toBeTruthy()
+    expect(within(running).getByText('18 / 42 documents')).toBeTruthy()
+    expect(
+      within(running).getByRole('button', { name: 'Review: Rewrite meta descriptions' }),
+    ).toBeTruthy()
+    expect(
+      within(running).getByRole('button', { name: 'Cancel Rewrite meta descriptions' }),
+    ).toBeTruthy()
+
+    const retrying = rowFor('Generate alt text')
+    expect(within(retrying).getByText('Retrying')).toBeTruthy()
+    expect(within(retrying).getByText(/^Attempt 2 of 3 · in \d+s$/)).toBeTruthy()
+    expect(within(retrying).getByText('Dana Cole')).toBeTruthy()
+    expect(within(retrying).getByText('34 min ago')).toBeTruthy()
+
+    expect(within(rowFor('Shorten long titles')).getByText('by Dana Cole')).toBeTruthy()
+    const dead = rowFor('Translate excerpts to Spanish')
+    expect(
+      within(dead).getByRole('button', { name: 'Retry Translate excerpts to Spanish' }),
+    ).toBeTruthy()
+    expect(within(dead).getByText('After 3 attempts')).toBeTruthy()
+    const scanRow = screen.getAllByRole('button', { name: 'SEO scan' })[0]?.closest('li')
+    expect(scanRow && within(scanRow).getByText('Weekly cron')).toBeTruthy()
+    expect(scanRow && within(scanRow).getByText('340 / 340 pages')).toBeTruthy()
+  })
+
+  it('filters and counts on the client, within the picked type', async () => {
+    await renderLoaded()
+    const before = listCalls()
+    fireEvent.click(screen.getByRole('tab', { name: /^Failed/ }))
+    expect(screen.getByRole('tab', { name: /^Failed/ }).getAttribute('aria-selected')).toBe('true')
+    let rows = within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem')
+    expect(rows.map((row) => within(row).getAllByRole('button')[0]?.textContent)).toEqual([
+      'Translate excerpts to Spanish',
+    ])
+
+    fireEvent.click(screen.getByRole('tab', { name: /^Needs review/ }))
+    rows = within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem')
+    expect(rows).toHaveLength(3)
+
+    fireEvent.change(screen.getByRole('combobox', { name: 'Job type' }), {
+      target: { value: 'content-health' },
+    })
+    expect(
+      within(screen.getByRole('tablist', { name: 'Filter jobs' }))
+        .getAllByRole('tab')
+        .map((tab) => tab.textContent),
+    ).toEqual(['All3', 'Active0', 'Needs review0', 'Succeeded3', 'Failed0', 'Cancelled0'])
+    expect(screen.queryByRole('list', { name: 'Jobs' })).toBeNull()
+    expect(screen.getByText('No jobs here. Every AI change has been reviewed.')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('tab', { name: /^All/ }))
+    expect(
+      within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem'),
+    ).toHaveLength(3)
+    // Filtering never asks the server.
+    expect(listCalls()).toBe(before)
+  })
+
+  it('shows the empty state', async () => {
+    server.jobs = []
+    render(<Jobs onNavigate={() => {}} {...ADMIN} />)
+    expect(await screen.findByText('No jobs here.')).toBeTruthy()
+    expect(screen.queryByRole('alert')).toBeNull()
+    expect(
+      within(screen.getByRole('tablist', { name: 'Filter jobs' }))
+        .getAllByRole('tab')
+        .map((tab) => tab.textContent),
+    ).toEqual(['All0', 'Active0', 'Needs review0', 'Succeeded0', 'Failed0', 'Cancelled0'])
+    fireEvent.click(screen.getByRole('tab', { name: /^Failed/ }))
+    expect(screen.getByText('No jobs here. Nothing has failed.')).toBeTruthy()
+  })
+})
+
+describe('Jobs list refresh', () => {
+  it('refreshes the list every 5 seconds while Live is on and the tab is visible', async () => {
+    useClock()
+    await renderOnClock()
+    expect(listCalls()).toBe(1)
+
+    await advance(5000)
+    expect(listCalls()).toBe(2)
+    await advance(4999)
+    expect(listCalls()).toBe(2)
+    await advance(1)
+    expect(listCalls()).toBe(3)
+
+    // Hidden: no requests, however long.
+    setVisibility('hidden')
+    await advance(30_000)
+    expect(listCalls()).toBe(3)
+    // Visible again: refreshes at once, then every 5 seconds.
+    setVisibility('visible')
+    await advance(0)
+    expect(listCalls()).toBe(4)
+    await advance(5000)
+    expect(listCalls()).toBe(5)
+
+    // Paused: no requests.
+    fireEvent.click(screen.getByRole('button', { name: 'Live' }))
+    expect(screen.getByRole('button', { name: 'Paused', pressed: false })).toBeTruthy()
+    await advance(30_000)
+    expect(listCalls()).toBe(5)
+    // Live again: refreshes at once.
+    fireEvent.click(screen.getByRole('button', { name: 'Paused' }))
+    await advance(0)
+    expect(listCalls()).toBe(6)
+    await advance(5000)
+    expect(listCalls()).toBe(7)
+  })
+
+  it('asks for the worker status after the tick it expects, not with every refresh', async () => {
+    useClock()
+    await renderOnClock()
+    expect([listCalls(), workerCalls()]).toEqual([1, 1])
+
+    // The next tick is due at 36s; the strip asks a few seconds after it.
+    await advance(40_000)
+    expect([listCalls(), workerCalls()]).toEqual([9, 1])
+    // That tick ran: its stamp is what the server now has.
+    server.worker = { ...server.worker, lastTickAt: iso(-4_000), nextTickAt: iso(56_000) }
+    await advance(5000)
+    expect([listCalls(), workerCalls()]).toEqual([10, 2])
+    expect(screen.getByText(/^Ran [4-9]s ago/)).toBeTruthy()
+
+    // Nothing until a few seconds after the next tick (96s).
+    await advance(55_000)
+    expect([listCalls(), workerCalls()]).toEqual([21, 2])
+    await advance(5000)
+    expect(workerCalls()).toBe(3)
+
+    // A late tick: asked again 30 seconds later, not every 5.
+    await advance(29_999)
+    expect(workerCalls()).toBe(3)
+    await advance(1)
+    expect(workerCalls()).toBe(4)
+    // 135 seconds: 28 list refreshes and 4 status requests, about 14 a minute instead of 24.
+    expect([listCalls(), workerCalls()]).toEqual([28, 4])
+  })
+
+  it('backs off while refreshes fail and returns to 5 seconds after one works', async () => {
+    useClock()
+    await renderOnClock()
+    server.listError = { status: 500, message: 'Database unavailable' }
+
+    const at: Array<[number, number]> = []
+    for (const step of [5000, 9999, 1, 19_999, 1, 39_999, 1, 59_999, 1]) {
+      await advance(step)
+      at.push([step, listCalls()])
+    }
+    // Failures at 5s, 15s, 35s, 75s and 135s: waits of 10, 20, 40, then 60.
+    expect(at.map(([, calls]) => calls)).toEqual([2, 2, 3, 3, 4, 4, 5, 5, 6])
+    expect(note()).toBe('Couldn’t refresh: Database unavailable. Showing the last update.')
+    expect(
+      within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem'),
+    ).toHaveLength(9)
+
+    server.listError = null
+    await advance(60_000)
+    expect(listCalls()).toBe(7)
+    expect(note()).toBe('Latest 50 jobs · updates every 5 seconds')
+    await advance(5000)
+    expect(listCalls()).toBe(8)
+  })
+
+  it('waits as long as a 429 asks', async () => {
+    useClock()
+    await renderOnClock()
+    server.listError = { status: 429, message: 'Too many requests', retryAfter: '30' }
+    await advance(5000)
+    expect(listCalls()).toBe(2)
+    await advance(29_999)
+    expect(listCalls()).toBe(2)
+    server.listError = null
+    await advance(1)
+    expect(listCalls()).toBe(3)
+    await advance(5000)
+    expect(listCalls()).toBe(4)
+  })
+
+  it('times out a refresh that never answers and keeps refreshing', async () => {
+    useClock()
+    await renderOnClock()
+    server.listHangs = true
+    await advance(5000)
+    expect(listCalls()).toBe(2)
+    await advance(9999)
+    expect(note()).toBe('Latest 50 jobs · updates every 5 seconds')
+    await advance(1)
+    expect(note()).toBe(
+      'Couldn’t refresh: The server didn’t answer within 10 seconds. Showing the last update.',
+    )
+    server.listHangs = false
+    // The timeout counts as a failure: the next refresh is 10 seconds later.
+    await advance(9999)
+    expect(listCalls()).toBe(2)
+    await advance(1)
+    expect(listCalls()).toBe(3)
+    expect(note()).toBe('Latest 50 jobs · updates every 5 seconds')
+    await advance(5000)
+    expect(listCalls()).toBe(4)
+  })
+
+  it('loads the worker status through a development remount', async () => {
+    // StrictMode mounts, unmounts and remounts, aborting the first requests.
+    render(
+      <StrictMode>
+        <Jobs onNavigate={() => {}} {...ADMIN} />
+      </StrictMode>,
+    )
+    expect(await screen.findByText(/^Ran 2\ds ago/)).toBeTruthy()
+    expect(screen.queryByText('Status unavailable')).toBeNull()
+  })
+
+  it('shows a worker status failure in the strip only', async () => {
+    server.workerError = 'Worker status unavailable'
+    await renderLoaded()
+    expect(note()).toBe('Latest 50 jobs · updates every 5 seconds')
+    expect(screen.getByText('Status unavailable')).toBeTruthy()
+    expect(screen.queryByText(/^Ran /)).toBeNull()
+  })
+
+  it('reads times on the server’s clock when the browser’s is wrong', async () => {
+    // The browser is 11 minutes fast.
+    server.clockOffsetMs = -11 * MIN
+    useClock()
+    server.jobs = [
+      batch({
+        id: 'job_417',
+        title: 'Rewrite meta descriptions',
+        status: 'running',
+        done: 18,
+        lockedAt: iso(-30_000),
+      }),
+      batch({ id: 'job_420', title: 'Queued just now', createdAt: iso(-20_000) }),
+    ]
+    await renderOnClock()
+    const row = rowFor('Rewrite meta descriptions')
+    expect(within(row).getByText('Running')).toBeTruthy()
+    expect(within(row).queryByText('Retrying')).toBeNull()
+    expect(within(rowFor('Queued just now')).getByText('now')).toBeTruthy()
+    expect(screen.getByText(/^Ran 2[45]s ago/)).toBeTruthy()
+  })
+
+  it('advances a running job’s progress in place', async () => {
+    useClock()
+    await renderOnClock()
+    const row = rowFor('Rewrite meta descriptions')
+    const cells = Array.from(row.children)
+    const cellClasses = cells.map((cell) => cell.className)
+    const track = within(row).getByTestId('job-progress-track')
+    const fill = track.firstElementChild as HTMLElement
+    const progress = within(row).getByText('18 / 42 documents')
+    expect(fill.style.width).toBe('43%')
+    // Fixed tracks for every column, so no cell's content can resize another.
+    expect(row.className).toContain(
+      'grid-cols-[minmax(240px,1.6fr)_minmax(150px,.9fr)_minmax(170px,1fr)_minmax(120px,.7fr)_96px]',
+    )
+    // Digits keep one width, and the count never wraps onto a second line.
+    expect(progress.className).toContain('tabular-nums')
+    expect(progress.className).toContain('whitespace-nowrap')
+
+    server.jobs = server.jobs.map((job) =>
+      job.id === 'job_417'
+        ? { ...job, progress: { ...job.progress, done: 19, completed: 19 } }
+        : job,
+    )
+    await advance(5000)
+    expect(progress.textContent).toBe('19 / 42 documents')
+
+    // The same nodes update: nothing is remounted or restyled but the fill.
+    expect(rowFor('Rewrite meta descriptions')).toBe(row)
+    cells.forEach((cell, index) => expect(row.children[index]).toBe(cell))
+    expect(cells.map((cell) => cell.className)).toEqual(cellClasses)
+    expect(track.firstElementChild).toBe(fill)
+    expect(fill.style.width).toBe('45%')
+    expect(within(row).getByText('Slice 20 · working')).toBeTruthy()
+  })
+
+  it('shows a load error with Try again, then focuses the list it loads', async () => {
+    useClock()
+    server.listError = { status: 500, message: 'Database unavailable' }
+    render(<Jobs onNavigate={() => {}} {...ADMIN} />)
+    await advance(0)
+    const alert = screen.getByRole('alert')
+    expect(alert.textContent).toContain('Jobs couldn’t be loaded. Database unavailable')
+    expect(screen.queryByRole('list', { name: 'Jobs' })).toBeNull()
+
+    server.listError = null
+    const tryAgain = within(alert).getByRole('button', { name: 'Try again' })
+    tryAgain.focus()
+    fireEvent.click(tryAgain)
+    await advance(0)
+    expect(screen.getByRole('list', { name: 'Jobs' })).toBeTruthy()
+    // The button went with the error; focus moves to the first row, not the body.
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Generate alt text' }))
+  })
+})
+
+describe('Jobs list actions', () => {
+  it('runs a scan now, and opens the existing job when one is active', async () => {
+    await renderLoaded()
+    let response = { job: scan('seo-scan', { id: 'job_new', createdAt: iso(0) }), reused: false }
+    server.post = () => {
+      server.jobs = [response.job, ...server.jobs.filter((job) => job.id !== response.job.id)]
+      return { data: response, status: response.reused ? 200 : 201 }
+    }
+
+    fireEvent.click(screen.getByRole('button', { name: 'Run now: SEO scan' }))
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith('SEO scan queued. It starts on the next worker run.'),
+    )
+    expect(server.calls).toContainEqual({ endpoint: '/jobs/run', method: 'POST' })
+    expect(
+      within(screen.getByRole('list', { name: 'Jobs' })).getAllByRole('listitem'),
+    ).toHaveLength(10)
+
+    response = { job: scan('seo-scan', { id: 'job_new', status: 'running' }), reused: true }
+    fireEvent.click(screen.getByRole('button', { name: 'Run now: SEO scan' }))
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith('SEO scan is already running. Reusing that job.'),
+    )
+    expect(await screen.findByRole('dialog', { name: 'SEO scan' })).toBeTruthy()
+  })
+
+  it('keeps focus on a busy button, with one icon, and ignores clicks until it answers', async () => {
+    await renderLoaded()
+    let answer: (reply: Reply) => void = () => {}
+    server.post = () => new Promise<Reply>((resolve) => (answer = resolve))
+    const run = screen.getByRole('button', { name: 'Run now: Content health' })
+    run.focus()
+    fireEvent.click(run)
+    await waitFor(() => expect(run.getAttribute('aria-busy')).toBe('true'))
+    // Not `disabled`: Chromium drops focus from a focused button that becomes disabled.
+    expect(run.hasAttribute('disabled')).toBe(false)
+    expect(run.getAttribute('aria-disabled')).toBe('true')
+    expect(document.activeElement).toBe(run)
+    expect(run.querySelectorAll('svg')).toHaveLength(1)
+    expect(within(run).getByTestId('busy-spinner')).toBeTruthy()
+    fireEvent.click(run)
+    expect(server.calls.filter((call) => call.method === 'POST')).toHaveLength(1)
+
+    answer({ error: 'Insufficient permissions', status: 403 })
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(
+        'Content health didn’t start: Insufficient permissions',
+      ),
+    )
+    expect(run.getAttribute('aria-disabled')).toBeNull()
+    expect(document.activeElement).toBe(run)
+
+    // An icon-only button swaps its icon for the spinner rather than adding one.
+    const retry = screen.getByRole('button', { name: 'Retry Translate excerpts to Spanish' })
+    fireEvent.click(retry)
+    await waitFor(() => expect(retry.getAttribute('aria-busy')).toBe('true'))
+    expect(retry.querySelectorAll('svg')).toHaveLength(1)
+    expect(within(retry).getByTestId('busy-spinner')).toBeTruthy()
+    answer({ error: 'nope', status: 409 })
+    await waitFor(() => expect(retry.getAttribute('aria-busy')).toBeNull())
+    expect(retry.querySelectorAll('svg')).toHaveLength(1)
+  })
+
+  it('retries a failed job and says where it picks up', async () => {
+    await renderLoaded()
+    server.post = (endpoint) => {
+      if (endpoint !== '/jobs/job_415/retry') return { error: 'nope', status: 500 }
+      server.jobs = server.jobs.map((job) =>
+        job.id === 'job_415' ? { ...job, status: 'queued', attempts: 0, lastError: null } : job,
+      )
+      return { data: server.jobs[3], status: 200 }
+    }
+    const retry = screen.getByRole('button', { name: 'Retry Translate excerpts to Spanish' })
+    retry.focus()
+    fireEvent.click(retry)
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying from document 8'))
+    expect(within(rowFor('Translate excerpts to Spanish')).getByText('In progress')).toBeTruthy()
+    // The Retry button went with the failure; focus lands on the row.
+    await waitFor(() =>
+      expect(document.activeElement).toBe(
+        screen.getByRole('button', { name: 'Translate excerpts to Spanish' }),
+      ),
+    )
+  })
+
+  it('confirms a cancel with the kit’s copy and shows Cancelling', async () => {
+    await renderLoaded()
+    server.post = (endpoint) => {
+      if (endpoint !== '/jobs/job_417/cancel') return { error: 'nope', status: 500 }
+      server.jobs = server.jobs.map((job) =>
+        job.id === 'job_417' ? { ...job, cancelRequestedAt: iso(0) } : job,
+      )
+      return { data: server.jobs[1], status: 200 }
+    }
+    const cancel = screen.getByRole('button', { name: 'Cancel Rewrite meta descriptions' })
+    // Keep running leaves the job alone and returns focus to the Cancel button.
+    cancel.focus()
+    fireEvent.click(cancel)
+    fireEvent.click(
+      within(await screen.findByRole('dialog')).getByRole('button', { name: 'Keep running' }),
+    )
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(cancel))
+    expect(server.calls.some((call) => call.method === 'POST')).toBe(false)
+
+    fireEvent.click(cancel)
+    const dialog = await screen.findByRole('dialog', {
+      name: 'Cancel “Rewrite meta descriptions”?',
+    })
+    expect(dialog.textContent).toContain(
+      'It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds. The 18 changes already made stay in review. Nothing is applied unless you approve it.',
+    )
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel job' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Stopping after this slice'))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    const row = rowFor('Rewrite meta descriptions')
+    expect(within(row).getByText('Cancelling')).toBeTruthy()
+    expect(within(row).getByText('Stops after this slice')).toBeTruthy()
+    expect(within(row).queryByRole('button', { name: /^Cancel/ })).toBeNull()
+    // The Cancel button went with the cancel, so focus lands on the row.
+    await waitFor(() =>
+      expect(document.activeElement).toBe(
+        screen.getByRole('button', { name: 'Rewrite meta descriptions' }),
+      ),
+    )
+  })
+
+  it('says a job whose worker stopped mid-slice stops on the next worker run', async () => {
+    server.jobs = [
+      batch({
+        id: 'job_stale',
+        title: 'Stuck batch',
+        status: 'running',
+        done: 4,
+        attempts: 1,
+        lockedAt: iso(-11 * MIN),
+      }),
+    ]
+    await renderLoaded()
+    const row = rowFor('Stuck batch')
+    expect(within(row).getByText('Retrying')).toBeTruthy()
+    server.post = () => {
+      server.jobs = server.jobs.map((job) => ({ ...job, cancelRequestedAt: iso(0) }))
+      return { data: server.jobs[0], status: 200 }
+    }
+    fireEvent.click(within(row).getByRole('button', { name: 'Cancel Stuck batch' }))
+    const dialog = await screen.findByRole('dialog')
+    expect(dialog.textContent).toContain(
+      'Its last slice stopped without finishing. It stops on the next worker run, within a minute.',
+    )
+    expect(dialog.textContent).not.toContain('stops right away')
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel job' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Stopping on the next worker run'))
+  })
+
+  it('focuses the selected filter when a cancel empties it', async () => {
+    server.jobs = [
+      batch({ id: 'job_q', title: 'Waiting batch' }),
+      scan('seo-scan', { id: 'job_done', status: 'succeeded' }),
+    ]
+    await renderLoaded()
+    fireEvent.click(screen.getByRole('tab', { name: /^Active/ }))
+    server.post = () => {
+      server.jobs = server.jobs.map((job) =>
+        job.id === 'job_q' ? { ...job, status: 'cancelled' } : job,
+      )
+      return { data: server.jobs[0], status: 200 }
+    }
+    const cancel = screen.getByRole('button', { name: 'Cancel Waiting batch' })
+    cancel.focus()
+    fireEvent.click(cancel)
+    fireEvent.click(
+      within(await screen.findByRole('dialog')).getByRole('button', { name: 'Cancel job' }),
+    )
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Job cancelled'))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    expect(screen.getByText('No jobs here.')).toBeTruthy()
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByRole('tab', { name: /^Active/ })),
+    )
+  })
+})