@prenta/admin 2.6.1 → 2.8.0

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

@@ -0,0 +1,1553 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import type { Job, JobEvent, JobReviewItem } from '@prenta/core'
+
+/*
+ * The job drawer (P-18): a modal dialog with Overview, Review or Results,
+ * Activity and Details, on the real endpoints. The list's refresh is
+ * answered by the `fetch` stub; the drawer's reads and decisions by the
+ * `cmsApi` mock. Both read `server` below.
+ */
+
+const MIN = 60_000
+
+interface Reply {
+  data?: unknown
+  body?: unknown
+  error?: string
+  status: number
+}
+
+interface Call {
+  endpoint: string
+  method: string
+  body: unknown
+}
+
+interface Server {
+  jobs: Job[]
+  details: Record<string, Partial<Job>>
+  events: Record<string, JobEvent[]>
+  items: Record<string, JobReviewItem[]>
+  /** `GET /jobs/:id/review` fails with this status. */
+  reviewError: { status: number; message: string } | null
+  decide: (jobId: string, itemId: string, body: Record<string, unknown>) => Reply | Promise<Reply>
+  approveAll: (jobId: string) => Reply | Promise<Reply>
+  /** `POST /jobs/run`, `/jobs/:id/cancel` and `/jobs/:id/retry`. */
+  action: (endpoint: string, body: unknown) => Reply | Promise<Reply>
+  calls: Call[]
+}
+
+const server: Server = {
+  jobs: [],
+  details: {},
+  events: {},
+  items: {},
+  reviewError: null,
+  decide: () => ({ error: 'not stubbed', status: 500 }),
+  approveAll: () => ({ error: 'not stubbed', status: 500 }),
+  action: () => ({ error: 'not stubbed', status: 500 }),
+  calls: [],
+}
+
+function ok(data: unknown, extra: Record<string, unknown> = {}): Reply {
+  return { data, body: { data, ...extra }, status: 200 }
+}
+
+function cmsApiStub(endpoint: string, init: RequestInit = {}): Reply | Promise<Reply> {
+  const method = (init.method ?? 'GET').toUpperCase()
+  const body = typeof init.body === 'string' ? JSON.parse(init.body) : undefined
+  server.calls.push({ endpoint, method, body })
+  const url = new URL(endpoint, 'http://x')
+  const [, , jobId, part, itemId] = url.pathname.split('/')
+  const job = server.jobs.find((entry) => entry.id === jobId)
+  if (method === 'GET' && part === undefined) {
+    return job ? ok({ ...job, ...server.details[job.id] }) : { error: 'Job not found', status: 404 }
+  }
+  if (method === 'GET' && part === 'events') return ok({ events: server.events[jobId!] ?? [] })
+  if (method === 'GET' && part === 'review') {
+    if (server.reviewError)
+      return { error: server.reviewError.message, status: server.reviewError.status }
+    const limit = Number(url.searchParams.get('limit'))
+    const cursor = url.searchParams.get('cursor')
+    const all = [...(server.items[jobId!] ?? [])].sort((a, b) => a.id.localeCompare(b.id))
+    const after = cursor ? all.filter((item) => item.id > cursor) : all
+    const items = after.slice(0, limit)
+    const last = items.at(-1)
+    return ok({ items, nextCursor: items.length === limit && last ? last.id : null })
+  }
+  if (method === 'POST' && part === 'review' && itemId === 'approve-all')
+    return server.approveAll(jobId!)
+  if (method === 'POST' && part === 'review') return server.decide(jobId!, itemId!, body)
+  if (method === 'POST' && (jobId === 'run' || part === 'cancel' || part === 'retry'))
+    return server.action(endpoint, body)
+  return { error: `unexpected ${method} ${endpoint}`, status: 404 }
+}
+
+vi.mock('../../lib/api.js', () => ({
+  getApiBase: () => '/api/cms',
+  cmsApi: vi.fn(async (endpoint: string, init?: RequestInit) => cmsApiStub(endpoint, init)),
+}))
+
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn() }))
+vi.mock('sonner', () => ({ toast }))
+
+/** The list's refresh reads through fetch (it needs response headers). */
+function fetchStub(url: string) {
+  const endpoint = url.replace(/^\/api\/cms/, '')
+  const data = endpoint.endsWith('/jobs/worker')
+    ? { lastTickAt: null, lastTickMs: null, nextTickAt: null, budgetMs: 20000, schedules: [] }
+    : { jobs: server.jobs }
+  return Promise.resolve({
+    ok: true,
+    status: 200,
+    headers: { get: () => null },
+    json: async () => ({ data }),
+  })
+}
+
+const { Jobs } = await import('../../views/Jobs.js')
+
+type Viewer = { role: string | null; userId: string | null }
+/** Someone who may run, cancel and retry any job. */
+const ADMIN: Viewer = { role: 'ADMIN', userId: 'u1' }
+
+function iso(offsetMs: number): string {
+  return new Date(Date.now() + offsetMs).toISOString()
+}
+
+function batch(overrides: Partial<Job> & { done?: number; total?: number }): Job {
+  const { done = 19, total = 42, ...rest } = overrides
+  return {
+    id: 'job_417',
+    type: 'batch-ai',
+    status: 'running',
+    title: 'Rewrite meta descriptions',
+    scope: '42 posts with a missing or over-length description',
+    runAt: iso(0),
+    attempts: 0,
+    maxAttempts: 3,
+    progress: { done, total, unit: 'documents', cursor: String(done), completed: done },
+    lastError: null,
+    explain: null,
+    summary: null,
+    lockedAt: iso(-5_000),
+    cancelRequestedAt: null,
+    cancelledBy: null,
+    createdBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+    createdAt: iso(-19 * MIN),
+    updatedAt: iso(0),
+    finishedAt: null,
+    usage: { tokensIn: 11_500, tokensOut: 5_800 },
+    payload: {
+      operation: 'meta',
+      instruction: 'Plain, specific, under 155 characters.',
+      source: 'blog',
+      statusFilter: 'all',
+      documentIds: ['d1', 'd2', 'd3'],
+      review: 'review',
+      onApprove: 'draft',
+    },
+    review: { pending: 0, approved: 0, rejected: 0 },
+    ...rest,
+  }
+}
+
+function item(id: string, overrides: Partial<JobReviewItem> = {}): JobReviewItem {
+  return {
+    id,
+    jobId: 'job_417',
+    documentId: `doc-${id}`,
+    documentTitle: `Post ${id}`,
+    url: `/blog/${id}`,
+    field: 'metaDescription',
+    before: '',
+    after: `Suggested description for ${id}.`,
+    editedAfter: null,
+    status: 'pending',
+    decidedBy: null,
+    decidedAt: null,
+    appliedRevisionId: null,
+    ...overrides,
+  }
+}
+
+/** Items r01…rNN on a job, all pending. */
+function pending(jobId: string, count: number): JobReviewItem[] {
+  return Array.from({ length: count }, (_, index) =>
+    item(`r${String(index + 1).padStart(2, '0')}`, { jobId }),
+  )
+}
+
+function decided(entry: JobReviewItem, status: 'approved' | 'rejected'): JobReviewItem {
+  return {
+    ...entry,
+    status,
+    decidedAt: iso(0),
+    decidedBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+  }
+}
+
+beforeEach(() => {
+  vi.stubGlobal('fetch', vi.fn(fetchStub))
+  Object.assign(server, {
+    jobs: [],
+    details: {},
+    events: {},
+    items: {},
+    reviewError: null,
+    calls: [],
+    approveAll: () => ({ error: 'not stubbed', status: 500 }),
+    action: () => ({ error: 'not stubbed', status: 500 }),
+  })
+  // By default a decision goes through: the change takes the new status.
+  server.decide = (jobId, itemId, body) => {
+    const list = server.items[jobId] ?? []
+    const index = list.findIndex((entry) => entry.id === itemId)
+    const current = list[index]!
+    const next =
+      body.action === 'undo'
+        ? { ...current, status: 'pending' as const, decidedAt: null, decidedBy: null }
+        : decided(
+            body.after ? { ...current, editedAfter: String(body.after) } : current,
+            body.action === 'approve' ? 'approved' : 'rejected',
+          )
+    list[index] = next
+    return ok(next, { documentStatus: body.onApprove === 'publish' ? 'PUBLISHED' : 'DRAFT' })
+  }
+  toast.mockClear()
+  toast.error.mockClear()
+})
+afterEach(() => {
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+function rowButton(id: string): HTMLElement {
+  const button = document.getElementById(`job-open-${id}`)
+  if (!button) throw new Error(`no row ${id}`)
+  return button
+}
+
+async function renderJobs(onNavigate: (path: string) => void = () => {}, viewer: Viewer = ADMIN) {
+  render(<Jobs onNavigate={onNavigate} {...viewer} />)
+  await screen.findByRole('list', { name: 'Jobs' })
+}
+
+async function openJob(id: string, tab?: string): Promise<HTMLElement> {
+  const row = rowButton(id)
+  row.focus()
+  fireEvent.click(row)
+  const dialog = await screen.findByRole('dialog')
+  if (tab) fireEvent.click(within(dialog).getByRole('tab', { name: new RegExp(`^${tab}`) }))
+  return dialog
+}
+
+function card(id: string): HTMLElement {
+  const element = document.querySelector<HTMLElement>(`[data-review-item="${id}"]`)
+  if (!element) throw new Error(`no change ${id}`)
+  return element
+}
+
+/** Radix hides its positioned menu in happy-dom, so the items are queried with `hidden`. */
+async function approveWith(entry: HTMLElement, option: string) {
+  const trigger = within(entry).getByRole('button', { name: /^Approve/ })
+  fireEvent.keyDown(trigger, { key: 'Enter' })
+  await waitFor(() => expect(trigger.getAttribute('aria-expanded')).toBe('true'))
+  fireEvent.click(screen.getByRole('menuitem', { name: option, hidden: true }))
+}
+
+async function menuOptions(entry: HTMLElement): Promise<string[]> {
+  const trigger = within(entry).getByRole('button', { name: /^Approve/ })
+  fireEvent.keyDown(trigger, { key: 'Enter' })
+  await waitFor(() => expect(trigger.getAttribute('aria-expanded')).toBe('true'))
+  const options = screen
+    .getAllByRole('menuitem', { hidden: true })
+    .map((option) => option.textContent ?? '')
+  fireEvent.keyDown(document.activeElement ?? document.body, { key: 'Escape' })
+  await waitFor(() => expect(trigger.getAttribute('aria-expanded')).toBe('false'))
+  return options
+}
+
+const posts = (method: string, part: string) =>
+  server.calls.filter((call) => call.method === method && call.endpoint.includes(part))
+
+/** A change's note (not a live region). */
+function noteOf(entry: HTMLElement): string {
+  return entry.querySelector('[data-review-note]')?.textContent ?? ''
+}
+
+/** What the drawer's live region last announced. */
+function announced(): string {
+  return document.querySelector('[data-job-drawer] [aria-live="polite"]')?.textContent ?? ''
+}
+
+/** Let "Approve all" act: it ignores activations for 600ms after Review opens. */
+async function waitOutArming() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(700)
+  })
+}
+
+describe('Jobs drawer', () => {
+  it('opens from the row and returns focus to it when Escape closes it', async () => {
+    server.jobs = [batch({})]
+    await renderJobs()
+    const row = rowButton('job_417')
+    expect(row.getAttribute('aria-haspopup')).toBe('dialog')
+    const dialog = await openJob('job_417')
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    expect(screen.getByRole('dialog', { name: 'Rewrite meta descriptions' })).toBe(dialog)
+    expect(row.closest('li')?.className).toContain('bg-acc-l')
+    fireEvent.keyDown(document.activeElement ?? document, { key: 'Escape' })
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(row))
+    expect(row.closest('li')?.className).not.toContain('bg-acc-l')
+  })
+
+  it('focuses the row when the opener never took focus (Safari clicks)', async () => {
+    server.jobs = [batch({})]
+    await renderJobs()
+    const row = rowButton('job_417')
+    ;(document.activeElement as HTMLElement | null)?.blur()
+    fireEvent.click(row)
+    await screen.findByRole('dialog')
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(document.activeElement).toBe(row))
+  })
+
+  it('shows the overview: status sentence, progress, facts and instruction', async () => {
+    server.jobs = [batch({ review: { pending: 6, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 6)
+    await renderJobs()
+    const dialog = await openJob('job_417')
+    expect(
+      within(dialog).getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected'),
+    ).toBe('true')
+    expect(dialog.textContent).toContain(
+      'Running slice 20 of 42 now. Each slice applies the operation to one document.',
+    )
+    expect(dialog.textContent).toContain('19 / 42 documents')
+    const facts = within(dialog).getByText('Attempts').closest('div')!
+    expect(facts.textContent).toBe('Attempts1 of 3')
+    expect(within(dialog).getByText('17,300 tokens')).toBeTruthy()
+    expect(within(dialog).getByText('Rewrite meta descriptions', { selector: 'dd' })).toBeTruthy()
+    expect(dialog.textContent).toContain('“Plain, specific, under 155 characters.”')
+    expect(within(dialog).getByRole('button', { name: 'Review 6 changes' })).toBeTruthy()
+  })
+
+  it('shows the full error with Copy and the AI explanation on a failed job', async () => {
+    const stack = 'ProviderError: 429 Too Many Requests\n  at callModel (lib/ai/provider.ts:88)'
+    server.jobs = [
+      batch({
+        id: 'job_415',
+        status: 'dead',
+        attempts: 3,
+        done: 7,
+        total: 30,
+        lockedAt: null,
+        lastError: 'ProviderError: 429 Too Many Requests',
+        explain: 'Your AI provider was rate-limiting requests.',
+      }),
+    ]
+    server.details.job_415 = { lastError: stack }
+    const writeText = vi.fn(async () => {})
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true })
+    await renderJobs()
+    const dialog = await openJob('job_415')
+    expect(dialog.textContent).toContain('Stopped after 3 attempts at document 8.')
+    await waitFor(() => expect(dialog.querySelector('pre')?.textContent).toBe(stack))
+    expect(within(dialog).getByText('What happened')).toBeTruthy()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Copy' }))
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Error copied'))
+    expect(writeText).toHaveBeenCalledWith(stack)
+  })
+
+  it('counts from the API: badge and footer use review.pending, and changes load 20 at a time', async () => {
+    server.jobs = [batch({ review: { pending: 30, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 30)
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => expect(dialog.querySelectorAll('[data-review-item]')).toHaveLength(20))
+    expect(within(dialog).getByRole('tab', { name: /^Review/ }).textContent).toBe(
+      'Review30 waiting',
+    )
+    expect(within(dialog).getByRole('button', { name: 'Approve all 30' })).toBeTruthy()
+    expect(dialog.textContent).toContain('30 waiting · 0 approved · 0 rejected')
+    const reads = posts('GET', '/review')
+    expect(reads.at(-1)?.endpoint).toBe('/jobs/job_417/review?limit=20')
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Show 10 more' }))
+    // Loading and drawing 10 more changes takes about 0.2s here, but CI runs
+    // the suite 9-13 times slower with coverage on, past waitFor's 1s default.
+    await waitFor(() => expect(dialog.querySelectorAll('[data-review-item]')).toHaveLength(30), {
+      timeout: 5_000,
+    })
+    expect(posts('GET', '/review').at(-1)?.endpoint).toBe(
+      '/jobs/job_417/review?limit=20&cursor=r20',
+    )
+    expect(within(dialog).queryByRole('button', { name: /^Show/ })).toBeNull()
+    await waitFor(() => expect(document.activeElement).toBe(card('r21')), { timeout: 5_000 })
+  })
+
+  it('keeps focus on the footer button as Review n changes becomes Approve all', async () => {
+    server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 2)
+    await renderJobs()
+    const dialog = await openJob('job_417')
+    const footer = within(dialog).getByRole('button', { name: 'Review 2 changes' })
+    footer.focus()
+    fireEvent.click(footer)
+    await waitFor(() => expect(footer.textContent).toBe('Approve all 2'))
+    expect(document.activeElement).toBe(footer)
+    expect(
+      within(dialog)
+        .getByRole('tab', { name: /^Review/ })
+        .getAttribute('aria-selected'),
+    ).toBe('true')
+  })
+
+  it('offers Save as draft and Publish, and publishes when asked', async () => {
+    server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 2)
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    expect(await menuOptions(card('r01'))).toEqual(['Save as draft', 'Publish'])
+    await approveWith(card('r01'), 'Publish')
+    const undo = await within(card('r01')).findByRole('button', { name: 'Undo' })
+    expect(posts('POST', '/review/r01').at(-1)?.body).toEqual({
+      action: 'approve',
+      onApprove: 'publish',
+    })
+    expect(within(card('r01')).getByText('Approved')).toBeTruthy()
+    await waitFor(() => expect(document.activeElement).toBe(undo))
+  })
+
+  it('reads Keep current status on a published document and leaves its change in review', async () => {
+    server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 2)
+    server.decide = (_jobId, _itemId, body) =>
+      body.onApprove === 'publish'
+        ? ok(decided(server.items.job_417![0]!, 'approved'), { documentStatus: 'PUBLISHED' })
+        : {
+            error:
+              'This document is published, so the change stays in review. Approve it with Publish to apply it live.',
+            status: 409,
+          }
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    await approveWith(card('r01'), 'Save as draft')
+    await waitFor(() => expect(noteOf(card('r01'))).toContain('so the change stays in review'))
+    // The note isn't a live region (it appears with its text); the drawer announces it.
+    expect(card('r01').querySelector('[role="status"], [role="alert"]')).toBeNull()
+    expect(announced()).toBe(
+      'Post r01: This document is published, so the change stays in review. Approve it with Publish to apply it live.',
+    )
+    expect(within(card('r01')).queryByText('Approved')).toBeNull()
+    expect(await menuOptions(card('r01'))).toEqual(['Keep current status', 'Publish'])
+    // Another document isn't known to be published.
+    expect(await menuOptions(card('r02'))).toEqual(['Save as draft', 'Publish'])
+  })
+
+  it('assumes published documents when the job only took published ones', async () => {
+    server.jobs = [
+      batch({
+        review: { pending: 1, approved: 0, rejected: 0 },
+        payload: { ...(batch({}).payload as object), statusFilter: 'published' } as Job['payload'],
+      }),
+    ]
+    server.items.job_417 = pending('job_417', 1)
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    expect(await menuOptions(card('r01'))).toEqual(['Keep current status', 'Publish'])
+  })
+
+  it.each([
+    [
+      'changed while saving',
+      'The document changed while this was being saved, so nothing was written. Try again.',
+    ],
+    [
+      'the publish state moved',
+      'This document is published, so the change stays in review. Approve it with Publish to apply it live.',
+    ],
+  ])('explains a 409 when %s, and keeps the change pending', async (_, message) => {
+    server.jobs = [batch({ review: { pending: 1, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 1)
+    server.decide = () => ({ error: message, status: 409 })
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    await approveWith(card('r01'), 'Save as draft')
+    await waitFor(() => expect(card('r01').textContent).toContain(message))
+    expect(within(card('r01')).getByRole('button', { name: /^Approve/ })).toBeTruthy()
+  })
+
+  it('shows link changes as text, and explains a link whose page is gone', async () => {
+    const markup = 'Compare <b>plans</b> & pricing <img src=x onerror=alert(1)> on the page.'
+    server.jobs = [
+      batch({
+        id: 'job_413',
+        status: 'succeeded',
+        lockedAt: null,
+        title: 'Add internal links',
+        review: { pending: 1, approved: 0, rejected: 1 },
+      }),
+    ]
+    server.items.job_413 = [
+      item('l1', {
+        jobId: 'job_413',
+        field: 'body',
+        before: 'Learn more about us before you get in touch.',
+        after: 'Learn more <a href="/about">about us</a> before you get in touch.',
+      }),
+      item('l2', {
+        jobId: 'job_413',
+        field: 'body',
+        status: 'rejected',
+        before: markup,
+        after: markup.replace('the page', '<a href="/platform">the page</a>'),
+      }),
+    ]
+    server.decide = () => ({
+      error: "The page this links to, /about, isn't published at that address any more.",
+      status: 409,
+    })
+    await renderJobs()
+    await openJob('job_413', 'Review')
+    await waitFor(() => card('l2'))
+    expect(card('l2').querySelector('img, b, a[href="/platform"]')).toBeNull()
+    expect(card('l2').textContent).toContain('<b>plans</b>')
+    expect(card('l1').querySelector('mark')?.textContent).toBe('about us')
+    expect(card('l1').textContent).toContain('→ /about')
+    expect(within(card('l1')).queryByRole('button', { name: 'Edit' })).toBeNull()
+    await approveWith(card('l1'), 'Publish')
+    await waitFor(() =>
+      expect(noteOf(card('l1'))).toContain("isn't published at that address any more"),
+    )
+    expect(announced()).toContain("isn't published at that address any more")
+  })
+
+  it('shows the notice when undo leaves a document published', async () => {
+    const approvedItem = decided(item('r01'), 'approved')
+    server.jobs = [batch({ review: { pending: 0, approved: 1, rejected: 0 } })]
+    server.items.job_417 = [approvedItem]
+    const notice =
+      'The document stays published. Undo put back the previous text, and the page shows it now.'
+    server.decide = () =>
+      ok({ ...approvedItem, status: 'pending' }, { documentStatus: 'PUBLISHED', notice })
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    fireEvent.click(within(card('r01')).getByRole('button', { name: 'Undo' }))
+    await waitFor(() => expect(noteOf(card('r01'))).toContain(notice))
+    expect(announced()).toBe(`Post r01 is back in review. ${notice}`)
+    await waitFor(() =>
+      expect(document.activeElement).toBe(
+        within(card('r01')).getByRole('button', { name: /^Approve/ }),
+      ),
+    )
+    // The document is now known to be published.
+    expect(await menuOptions(card('r01'))).toEqual(['Keep current status', 'Publish'])
+  })
+
+  it('keeps an edit in progress across a poll and a tab switch, then approves the edit', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 2)
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    fireEvent.click(within(card('r01')).getByRole('button', { name: 'Edit' }))
+    const box = within(card('r01')).getByRole('textbox', { name: 'Edit suggestion for Post r01' })
+    await waitFor(() => expect(document.activeElement).toBe(box))
+    fireEvent.change(box, { target: { value: 'Edited by hand.' } })
+
+    // A slice adds a suggestion: the list refresh sees the job change and the changes are read again.
+    server.items.job_417!.push(item('r03'))
+    server.jobs = [
+      batch({ updatedAt: iso(5_000), review: { pending: 3, approved: 0, rejected: 0 } }),
+    ]
+    const before = posts('GET', '/review').length
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(6_000)
+    })
+    await waitFor(() => expect(posts('GET', '/review').length).toBeGreaterThan(before))
+    await waitFor(() => card('r03'))
+    expect((within(card('r01')).getByRole('textbox') as HTMLTextAreaElement).value).toBe(
+      'Edited by hand.',
+    )
+
+    fireEvent.click(within(dialog).getByRole('tab', { name: 'Overview' }))
+    fireEvent.click(within(dialog).getByRole('tab', { name: /^Review/ }))
+    await waitFor(() => card('r01'))
+    expect((within(card('r01')).getByRole('textbox') as HTMLTextAreaElement).value).toBe(
+      'Edited by hand.',
+    )
+
+    await approveWith(card('r01'), 'Save as draft')
+    await within(card('r01')).findByRole('button', { name: 'Undo' })
+    expect(posts('POST', '/review/r01').at(-1)?.body).toEqual({
+      action: 'approve',
+      onApprove: 'draft',
+      after: 'Edited by hand.',
+    })
+    expect(card('r01').textContent).toContain('Edited by hand.')
+  })
+
+  it('re-reads the changes when one was decided elsewhere', async () => {
+    server.jobs = [batch({ review: { pending: 1, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 1)
+    let answer: (reply: Reply) => void = () => {}
+    server.decide = () =>
+      new Promise<Reply>((resolve) => {
+        answer = resolve
+      })
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    await approveWith(card('r01'), 'Save as draft')
+    const trigger = within(card('r01')).getByRole('button', { name: /^Approve/ })
+    await waitFor(() => expect(document.activeElement).toBe(trigger))
+    server.items.job_417![0] = decided(server.items.job_417![0]!, 'rejected')
+    answer({ error: 'This change was already decided.', status: 409 })
+    await waitFor(() => expect(within(card('r01')).getByText('Rejected')).toBeTruthy())
+    expect(card('r01').textContent).toContain('This change was already decided.')
+    expect(announced()).toBe('Post r01: This change was already decided.')
+    // Approve went with the re-read; focus goes to the Undo that replaced it.
+    await waitFor(() =>
+      expect(document.activeElement).toBe(
+        within(card('r01')).getByRole('button', { name: 'Undo' }),
+      ),
+    )
+  })
+
+  it('puts focus on the panel when the change pressed is gone', async () => {
+    server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 2)
+    server.decide = () => {
+      server.items.job_417 = server.items.job_417!.filter((entry) => entry.id !== 'r01')
+      return { error: 'This change no longer exists.', status: 409 }
+    }
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    const reject = within(card('r01')).getByRole('button', { name: 'Reject' })
+    reject.focus()
+    fireEvent.click(reject)
+    await waitFor(() => expect(dialog.querySelector('[data-review-item="r01"]')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(within(dialog).getByRole('tabpanel')))
+  })
+
+  it('leaves focus where the reviewer moved it while a decision was out', async () => {
+    server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 2)
+    let answer: (reply: Reply) => void = () => {}
+    server.decide = () =>
+      new Promise<Reply>((resolve) => {
+        answer = resolve
+      })
+    await renderJobs()
+    await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    await approveWith(card('r01'), 'Publish')
+    // The closed menu hands focus back to Approve (on a timer), while the request is out.
+    const trigger = within(card('r01')).getByRole('button', { name: /^Approve/ })
+    await waitFor(() => expect(document.activeElement).toBe(trigger))
+    // Meanwhile they start editing the next change.
+    fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }))
+    const box = within(card('r02')).getByRole('textbox')
+    await waitFor(() => expect(document.activeElement).toBe(box))
+    answer(ok(decided(server.items.job_417![0]!, 'approved'), { documentStatus: 'PUBLISHED' }))
+    await within(card('r01')).findByRole('button', { name: 'Undo' })
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(document.activeElement).toBe(box)
+  })
+
+  it('doesn’t approve all on a second click, a second Enter or a held key', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 3)
+    server.approveAll = () => ok({ approved: 3, skipped: 0, remaining: 0 })
+    await renderJobs()
+    const dialog = await openJob('job_417')
+    const footer = within(dialog).getByRole('button', { name: 'Review 3 changes' })
+    footer.focus()
+    // A double-click: the first opens Review, the second lands on Approve all.
+    fireEvent.click(footer)
+    fireEvent.click(footer)
+    await waitFor(() => card('r01'))
+    expect(footer.textContent).toBe('Approve all 3')
+    // Enter again, quickly.
+    fireEvent.keyDown(footer, { key: 'Enter' })
+    fireEvent.click(footer)
+    expect(posts('POST', '/approve-all')).toHaveLength(0)
+
+    await waitOutArming()
+    // A held Enter: its repeats click too.
+    fireEvent.keyDown(footer, { key: 'Enter', repeat: true })
+    fireEvent.click(footer)
+    expect(posts('POST', '/approve-all')).toHaveLength(0)
+    fireEvent.keyUp(footer, { key: 'Enter' })
+
+    fireEvent.keyDown(footer, { key: 'Enter' })
+    fireEvent.click(footer)
+    await waitFor(() => expect(posts('POST', '/approve-all')).toHaveLength(1))
+  })
+
+  it('approves an edit still open as edited when approving all', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 3)
+    server.approveAll = () => ok({ approved: 2, skipped: 0, remaining: 0 })
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r02'))
+    fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }))
+    fireEvent.change(within(card('r02')).getByRole('textbox'), {
+      target: { value: 'Rewritten by hand.' },
+    })
+    await waitOutArming()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }))
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith('3 changes approved · saved as drafts', undefined),
+    )
+    const order = server.calls.filter((call) => call.method === 'POST').map((call) => call.endpoint)
+    expect(order).toEqual(['/jobs/job_417/review/r02', '/jobs/job_417/review/approve-all'])
+    expect(posts('POST', '/review/r02')[0]?.body).toEqual({
+      action: 'approve',
+      after: 'Rewritten by hand.',
+    })
+  })
+
+  it.each([
+    ['an emptied edit (400)', 400, 'The approved text is empty.'],
+    [
+      'changed while saving (409)',
+      409,
+      'The document changed while this was being saved, so nothing was written. Try again.',
+    ],
+    ['a server error', 500, 'Internal server error'],
+  ])('stops approving all when an open edit is refused: %s', async (_, status, message) => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 3)
+    server.decide = () => ({ error: message, status })
+    server.approveAll = () => ok({ approved: 3, skipped: 0, remaining: 0 })
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r02'))
+    fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }))
+    fireEvent.change(within(card('r02')).getByRole('textbox'), { target: { value: '' } })
+    await waitOutArming()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }))
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith('Approve all stopped', {
+        description:
+          '1 edited change couldn’t be approved, so nothing else was, and the AI’s text doesn’t replace an edit. Each change says why.',
+      }),
+    )
+    // The server's approve-all never ran, so it couldn't apply the AI's text to r02.
+    expect(posts('POST', '/approve-all')).toHaveLength(0)
+    expect(announced()).toContain(`Post r02: ${message}`)
+    expect(noteOf(card('r02'))).toContain(message)
+    expect(within(card('r02')).getByRole('textbox')).toBeTruthy()
+    expect(within(card('r02')).queryByText('Approved')).toBeNull()
+  })
+
+  it('locks every change while approving all', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 3)
+    const approveEdit = server.decide
+    let editAnswered: () => void = () => {}
+    server.decide = (jobId, itemId, body) =>
+      new Promise<Reply>((resolve) => {
+        editAnswered = () => resolve(approveEdit(jobId, itemId, body) as Reply)
+      })
+    let bulkAnswered: (reply: Reply) => void = () => {}
+    server.approveAll = () =>
+      new Promise<Reply>((resolve) => {
+        bulkAnswered = resolve
+      })
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r02'))
+    fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }))
+    const box = within(card('r02')).getByRole('textbox') as HTMLTextAreaElement
+    fireEvent.change(box, { target: { value: 'Mine.' } })
+    await waitOutArming()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }))
+
+    const locked = () => {
+      // The open edit is read-only, so what's sent is what's shown.
+      expect(box.readOnly).toBe(true)
+      fireEvent.change(box, { target: { value: 'Mine, changed.' } })
+      expect(box.value).toBe('Mine.')
+      // Another change can't be edited or decided.
+      const edit = within(card('r01')).getByRole('button', { name: 'Edit' })
+      expect(edit.getAttribute('aria-disabled')).toBe('true')
+      fireEvent.click(edit)
+      expect(within(card('r01')).queryByRole('textbox')).toBeNull()
+      fireEvent.click(within(card('r01')).getByRole('button', { name: 'Reject' }))
+      expect(posts('POST', '/review/r01')).toHaveLength(0)
+    }
+    // While the edit is being approved…
+    await waitFor(() => expect(posts('POST', '/review/r02')).toHaveLength(1))
+    locked()
+    // …and while the server's approve-all runs.
+    act(() => editAnswered())
+    await waitFor(() => expect(posts('POST', '/approve-all')).toHaveLength(1))
+    expect(posts('POST', '/review/r02')[0]?.body).toEqual({ action: 'approve', after: 'Mine.' })
+    const edit = within(card('r01')).getByRole('button', { name: 'Edit' })
+    expect(edit.getAttribute('aria-disabled')).toBe('true')
+    fireEvent.click(edit)
+    expect(within(card('r01')).queryByRole('textbox')).toBeNull()
+
+    bulkAnswered(ok({ approved: 2, skipped: 0, remaining: 0 }))
+    await waitFor(() => expect(edit.getAttribute('aria-disabled')).toBeNull())
+    fireEvent.click(edit)
+    expect(within(card('r01')).getByRole('textbox')).toBeTruthy()
+  })
+
+  it('still approves all when an open edit stays in review on a published document', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })]
+    server.items.job_417 = pending('job_417', 3)
+    const published =
+      'This document is published, so the change stays in review. Approve it with Publish to apply it live.'
+    server.decide = () => ({ error: published, status: 409 })
+    // The server skips that change too: it's published and the job saves drafts.
+    server.approveAll = () => ok({ approved: 2, skipped: 1, remaining: 1 })
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r02'))
+    fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }))
+    await waitOutArming()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }))
+    await waitFor(() => expect(posts('POST', '/approve-all')).toHaveLength(1))
+    await waitFor(() => expect(announced()).toContain(`Post r02: ${published}`))
+  })
+
+  it('approves all, asking again while changes are left that it didn’t get to', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [
+      batch({
+        status: 'succeeded',
+        lockedAt: null,
+        review: { pending: 45, approved: 0, rejected: 0 },
+      }),
+    ]
+    server.items.job_417 = pending('job_417', 45)
+    const rounds = [
+      { approved: 20, skipped: 2, remaining: 25 },
+      { approved: 20, skipped: 3, remaining: 5 },
+      { approved: 2, skipped: 3, remaining: 3 },
+    ]
+    server.approveAll = () => ok(rounds.shift() ?? { approved: 0, skipped: 0, remaining: 0 })
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Review')
+    await waitFor(() => card('r01'))
+    await waitOutArming()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 45' }))
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith('42 changes approved · saved as drafts', {
+        description:
+          '3 changes stayed in review. Changes to published documents need Publish, so approve those one at a time.',
+      }),
+    )
+    expect(posts('POST', '/approve-all')).toHaveLength(3)
+  })
+
+  it('hides Review from someone who can’t read the suggested changes', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [
+      batch({
+        status: 'succeeded',
+        lockedAt: null,
+        review: { pending: 6, approved: 0, rejected: 0 },
+      }),
+    ]
+    server.items.job_417 = pending('job_417', 6)
+    server.reviewError = {
+      status: 403,
+      message: 'Only people who can edit content can read suggested changes',
+    }
+    await renderJobs()
+    // The list's Review button asks for the Review tab.
+    fireEvent.click(
+      within(rowButton('job_417').closest('li')!).getByRole('button', { name: /Review/ }),
+    )
+    const dialog = await screen.findByRole('dialog')
+    await waitFor(() =>
+      expect(
+        within(dialog)
+          .getAllByRole('tab')
+          .map((tab) => tab.textContent),
+      ).toEqual(['Overview', 'Activity', 'Details']),
+    )
+    expect(
+      within(dialog).getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected'),
+    ).toBe('true')
+    expect(within(dialog).queryByRole('button', { name: /Review \d/ })).toBeNull()
+
+    // The job changing doesn't ask again: the 403 stands while the drawer is open.
+    const asked = posts('GET', '/review').length
+    server.jobs = [
+      batch({
+        status: 'succeeded',
+        lockedAt: null,
+        updatedAt: iso(5_000),
+        review: { pending: 7, approved: 0, rejected: 0 },
+      }),
+    ]
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(6_000)
+    })
+    await waitFor(() => expect(dialog.textContent).toContain('Activity'))
+    expect(posts('GET', '/review')).toHaveLength(asked)
+  })
+
+  it('shows an SEO scan’s results, linking each issue to its screen', async () => {
+    const onNavigate = vi.fn()
+    const seo = batch({
+      id: 'job_414',
+      type: 'seo-scan',
+      status: 'succeeded',
+      title: 'SEO scan',
+      scope: 'All indexable pages',
+      lockedAt: null,
+      createdBy: { kind: 'cron', schedule: 'weekly-seo' },
+      payload: { trigger: 'cron' },
+      summary: 'Score is up 4 points from last week.',
+      done: 340,
+      total: 340,
+      finishedAt: iso(-60 * MIN),
+    })
+    delete seo.review
+    server.jobs = [seo]
+    server.details.job_414 = {
+      results: {
+        score: 78,
+        prevScore: 74,
+        found: 23,
+        resolved: 11,
+        categories: [
+          {
+            key: 'missing-meta',
+            label: 'Missing meta description',
+            count: 5,
+            href: '/seo/content',
+          },
+          { key: 'bad', label: 'Somewhere else', count: 1, href: 'javascript:alert(1)' },
+        ],
+        digest: { sentAt: iso(-60 * MIN), recipients: 3 },
+      },
+    }
+    await renderJobs(onNavigate)
+    const dialog = await openJob('job_414', 'Results')
+    await within(dialog).findByText('Site score')
+    expect(within(dialog).getByText('+4')).toBeTruthy()
+    expect(dialog.textContent).toContain('Fixed since last scan11')
+    expect(within(dialog).getByText('Score is up 4 points from last week.')).toBeTruthy()
+    const link = within(dialog).getByRole('link', { name: /Missing meta description/ })
+    expect(link.getAttribute('href')).toBe('/seo/content')
+    fireEvent.click(link)
+    expect(onNavigate).toHaveBeenCalledWith('/seo/content')
+    expect(within(dialog).queryByRole('link', { name: /Somewhere else/ })).toBeNull()
+    expect(dialog.textContent).toContain('SEO digest: Sent to 3 people')
+  })
+
+  it('lists activity newest first, folding older finished slices', async () => {
+    server.jobs = [batch({})]
+    const slice = (minutes: number, n: number): JobEvent[] => [
+      {
+        at: iso(-minutes * MIN),
+        kind: 'yielded',
+        message: 'Slice finished',
+        detail: `Processed ${n} of 42`,
+        durationMs: 11_800,
+        tokens: 920,
+      },
+      { at: iso(-minutes * MIN - 12_000), kind: 'claimed', message: 'Slice started' },
+    ]
+    server.events.job_417 = [
+      { at: iso(0), kind: 'claimed', message: 'Slice started' },
+      ...slice(1, 18),
+      ...slice(2, 17),
+      ...slice(3, 16),
+      ...slice(4, 15),
+      { at: iso(-19 * MIN), kind: 'queued', message: 'Queued' },
+    ]
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Activity')
+    const list = await within(dialog).findByRole('list')
+    const titles = within(list)
+      .getAllByRole('listitem')
+      .map((entry) => entry.querySelector('b, button')?.textContent)
+    expect(titles).toEqual([
+      'Slice started',
+      'Slice finished',
+      'Slice finished',
+      '2 earlier slices',
+      'Slice started',
+      'Queued',
+    ])
+    expect(list.textContent).toContain('Processed 18 of 42 · 11.8s · 920 tokens · yielded')
+    expect(list.textContent).toContain('Brandon West started it')
+    const fold = within(list).getByRole('button', { name: '2 earlier slices' })
+    fireEvent.click(fold)
+    expect(fold.getAttribute('aria-expanded')).toBe('true')
+    expect(list.textContent).toContain('Processed 15 of 42')
+  })
+
+  it('keeps an open fold open, with focus on it, as the job’s events grow', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    server.jobs = [batch({})]
+    const finished = (minutes: number, n: number): JobEvent => ({
+      at: iso(-minutes * MIN),
+      kind: 'yielded',
+      message: 'Slice finished',
+      detail: `Processed ${n} of 42`,
+    })
+    server.events.job_417 = [
+      { at: iso(0), kind: 'claimed', message: 'Slice started' },
+      finished(1, 18),
+      finished(2, 17),
+      finished(3, 16),
+      finished(4, 15),
+      { at: iso(-19 * MIN), kind: 'queued', message: 'Queued' },
+    ]
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Activity')
+    const fold = await within(dialog).findByRole('button', { name: '2 earlier slices' })
+    fireEvent.click(fold)
+    fold.focus()
+
+    // A slice finishes: the newest event moves the fold's newer edge.
+    server.events.job_417 = [
+      { at: iso(5_000), kind: 'claimed', message: 'Slice started' },
+      finished(-0.05, 19),
+      ...server.events.job_417.slice(1),
+    ]
+    server.jobs = [batch({ updatedAt: iso(5_000), done: 20 })]
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(6_000)
+    })
+    await waitFor(() => expect(dialog.textContent).toContain('Processed 19 of 42'))
+    const after = within(dialog).getByRole('button', { name: '3 earlier slices' })
+    expect(after).toBe(fold)
+    expect(after.getAttribute('aria-expanded')).toBe('true')
+    expect(document.activeElement).toBe(fold)
+  })
+
+  it('shows the raw row, with the document ids counted', async () => {
+    server.jobs = [batch({})]
+    await renderJobs()
+    const dialog = await openJob('job_417', 'Details')
+    expect(dialog.textContent).toContain('The raw job row, for developers. Read only.')
+    const raw = within(dialog).getByLabelText('Job row as JSON').textContent ?? ''
+    expect(raw).toContain('"documentIds": "[3 ids]"')
+    expect(raw).toContain('"id": "job_417"')
+  })
+})
+
+/*
+ * P-19: the footer's Cancel job, "Retry from document {n+1}" and "Retry now",
+ * the cancel dialog over the drawer, Run now reusing a job, and who sees them.
+ */
+
+function scan(
+  type: 'seo-scan' | 'content-health',
+  overrides: Partial<Job> & { done?: number; total?: number } = {},
+): Job {
+  const job = batch({
+    id: type === 'seo-scan' ? 'job_scan' : 'job_health',
+    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
+}
+
+/** A batch that ran out of attempts at document 8. */
+function failed(overrides: Partial<Job> = {}): Job {
+  return batch({
+    id: 'job_415',
+    title: 'Translate excerpts to Spanish',
+    status: 'dead',
+    attempts: 3,
+    done: 7,
+    total: 30,
+    lockedAt: null,
+    lastError: 'ProviderError: 429 Too Many Requests',
+    ...overrides,
+  })
+}
+
+/** A batch waiting out a failed slice's backoff. */
+function waiting(overrides: Partial<Job> = {}): Job {
+  return batch({
+    id: 'job_418',
+    title: 'Generate alt text',
+    status: 'queued',
+    attempts: 1,
+    done: 9,
+    total: 64,
+    lockedAt: null,
+    lastError: 'ImageFetchError: img_2291.webp returned 404',
+    runAt: iso(30_000),
+    ...overrides,
+  })
+}
+
+/** The job as the server has it after an action; the list's next read returns it. */
+function patchJob(id: string, patch: Partial<Job>): Job {
+  server.jobs = server.jobs.map((job) =>
+    job.id === id ? { ...job, ...patch, updatedAt: iso(1_000) } : job,
+  )
+  return server.jobs.find((job) => job.id === id)!
+}
+
+function panelOf(drawer: HTMLElement): HTMLElement {
+  return drawer.querySelector<HTMLElement>('[role="tabpanel"]')!
+}
+
+/** The cancel dialog, over the drawer or the list. */
+function cancelDialog(): Promise<HTMLElement> {
+  return screen.findByRole('dialog', { name: /^Cancel “/ })
+}
+
+async function cancelDialogGone() {
+  await waitFor(() => expect(screen.queryByRole('dialog', { name: /^Cancel “/ })).toBeNull())
+}
+
+/** Click as a browser does: the button takes focus first. */
+function press(button: HTMLElement) {
+  button.focus()
+  fireEvent.click(button)
+}
+
+describe('Jobs drawer actions (P-19)', () => {
+  it('opens the cancel dialog over the drawer; Keep running and Escape go back to Cancel job', async () => {
+    server.jobs = [batch({})]
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    const cancel = within(drawer).getByRole('button', { name: 'Cancel job' })
+    expect(cancel.getAttribute('aria-haspopup')).toBe('dialog')
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+
+    cancel.focus()
+    fireEvent.click(cancel)
+    const dialog = await cancelDialog()
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    expect(dialog.textContent).toContain(
+      'It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds. The 19 changes already made stay in review. Nothing is applied unless you approve it.',
+    )
+    // The drawer's controls are hidden behind it. (aria-hidden keeps the
+    // drawer's live region, and so the drawer element, exposed.)
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    expect(within(drawer).queryByRole('tab')).toBeNull()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Keep running' }))
+    await cancelDialogGone()
+    await waitFor(() => expect(document.activeElement).toBe(cancel))
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBe(cancel)
+
+    // Escape closes the dialog on top, not the drawer under it.
+    fireEvent.click(cancel)
+    await cancelDialog()
+    fireEvent.keyDown(document.activeElement ?? document, { key: 'Escape' })
+    await cancelDialogGone()
+    expect(screen.getByRole('dialog', { name: 'Rewrite meta descriptions' })).toBe(drawer)
+    await waitFor(() => expect(document.activeElement).toBe(cancel))
+    expect(posts('POST', '/cancel')).toHaveLength(0)
+  })
+
+  it('uses the kit’s copy for each state', async () => {
+    const auto = batch({}).payload as Extract<Job['payload'], { review: string }>
+    server.jobs = [
+      batch({ status: 'queued', lockedAt: null, payload: { ...auto, review: 'auto' } }),
+      scan('content-health', { status: 'running', done: 50, total: 412 }),
+      scan('seo-scan', { status: 'queued', lockedAt: null, done: 0, total: 340 }),
+    ]
+    await renderJobs()
+    const copy = async (id: string) => {
+      const drawer = await openJob(id)
+      fireEvent.click(within(drawer).getByRole('button', { name: 'Cancel job' }))
+      const text = (await cancelDialog()).textContent ?? ''
+      fireEvent.keyDown(document.activeElement ?? document, { key: 'Escape' })
+      await cancelDialogGone()
+      fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+      await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+      return text
+    }
+    expect(await copy('job_417')).toContain(
+      'It hasn’t started its next slice, so it stops right away. The 19 documents already changed keep their changes. You can undo them from each document’s history.',
+    )
+    expect(await copy('job_health')).toContain(
+      'It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds. Progress so far is kept. The next nightly cron run starts fresh.',
+    )
+    expect(await copy('job_scan')).toContain(
+      'It hasn’t started its next slice, so it stops right away. Progress so far is kept. The next weekly cron run starts fresh.',
+    )
+  })
+
+  it('cancels a running job: Cancelling · Stops after this slice, announced, focus in the drawer', async () => {
+    server.jobs = [batch({})]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/job_417/cancel'
+        ? ok(patchJob('job_417', { cancelRequestedAt: iso(0) }))
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    press(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    press(within(await cancelDialog()).getByRole('button', { name: 'Cancel job' }))
+
+    await cancelDialogGone()
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Stopping after this slice'))
+    await waitFor(() => expect(announced()).toBe('Stopping after this slice'))
+    expect(within(drawer).getAllByText('Cancelling').length).toBeGreaterThan(0)
+    expect(drawer.textContent).toContain(
+      'Stopping when the current slice finishes, usually within 20 seconds.',
+    )
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    // Cancel job went with the cancel, so focus lands on the panel showing the new state.
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+    expect(posts('POST', '/cancel')).toHaveLength(1)
+
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    const row = rowButton('job_417').closest('li')!
+    expect(within(row).getByText('Cancelling')).toBeTruthy()
+    expect(within(row).getByText('Stops after this slice')).toBeTruthy()
+    expect(within(row).queryByRole('button', { name: /^Cancel/ })).toBeNull()
+  })
+
+  it('shows a cancel’s outcome only once its dialog has closed', async () => {
+    server.jobs = [batch({ status: 'queued', lockedAt: null })]
+    let answer: (reply: Reply) => void = () => {}
+    server.action = () => new Promise<Reply>((resolve) => (answer = resolve))
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    press(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    const dialog = await cancelDialog()
+    press(within(dialog).getByRole('button', { name: 'Cancel job' }))
+    await waitFor(() => expect(posts('POST', '/cancel')).toHaveLength(1))
+    // While the dialog is open Radix hides the rest of the page from screen
+    // readers: the toaster, and the drawer with its live region.
+    const dialogsAtToast: number[] = []
+    toast.mockImplementationOnce(() => {
+      dialogsAtToast.push(document.querySelectorAll('[role="dialog"]').length)
+    })
+    await act(async () => {
+      answer(ok(patchJob('job_417', { status: 'cancelled', cancelRequestedAt: iso(0) })))
+    })
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Job cancelled'))
+    expect(dialogsAtToast).toEqual([1])
+    await waitFor(() => expect(announced()).toBe('Job cancelled'))
+    // Focus was back in the drawer before the outcome was announced.
+    expect(document.activeElement).toBe(panelOf(drawer))
+  })
+
+  it('posts one cancel for a double click, and opens one dialog for a double click on Cancel job', async () => {
+    server.jobs = [batch({})]
+    let answer: (reply: Reply) => void = () => {}
+    server.action = () => new Promise<Reply>((resolve) => (answer = resolve))
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    const open = within(drawer).getByRole('button', { name: 'Cancel job' })
+    fireEvent.click(open)
+    fireEvent.click(open)
+    const dialog = await cancelDialog()
+    expect(screen.getAllByRole('dialog', { name: /^Cancel “/ })).toHaveLength(1)
+
+    const confirm = within(dialog).getByRole('button', { name: 'Cancel job' })
+    confirm.focus()
+    fireEvent.click(confirm)
+    fireEvent.click(confirm)
+    await waitFor(() => expect(confirm.getAttribute('aria-busy')).toBe('true'))
+    fireEvent.click(confirm)
+    expect(document.activeElement).toBe(confirm)
+    // Keep running waits for the answer too.
+    expect(
+      within(dialog).getByRole('button', { name: 'Keep running' }).getAttribute('aria-disabled'),
+    ).toBe('true')
+    await act(async () => {
+      answer(ok(patchJob('job_417', { cancelRequestedAt: iso(0) })))
+    })
+    await cancelDialogGone()
+    expect(posts('POST', '/cancel')).toHaveLength(1)
+  })
+
+  it('reads the list again on a 409 from a cancel that already finished, then says so', async () => {
+    server.jobs = [batch({ review: { pending: 4, approved: 0, rejected: 0 } })]
+    server.action = () => {
+      // The last slice finished just before the cancel arrived.
+      patchJob('job_417', {
+        status: 'succeeded',
+        lockedAt: null,
+        finishedAt: iso(0),
+        progress: { done: 42, total: 42, unit: 'documents', cursor: '42', completed: 42 },
+      })
+      return { error: 'This job already finished.', status: 409 }
+    }
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    press(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    const dialog = await cancelDialog()
+    const listReads = vi.mocked(fetch).mock.calls.length
+    press(within(dialog).getByRole('button', { name: 'Cancel job' }))
+
+    await cancelDialogGone()
+    const message = '“Rewrite meta descriptions” wasn’t cancelled: This job already finished.'
+    await waitFor(() => expect(toast).toHaveBeenCalledWith(message))
+    expect(toast.error).not.toHaveBeenCalled()
+    expect(vi.mocked(fetch).mock.calls.length).toBeGreaterThan(listReads)
+    // The dialog closed onto the job as it is now: finished, with nothing to cancel.
+    expect(within(drawer).getAllByText('Needs review').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    await waitFor(() => expect(announced()).toBe(message))
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+  })
+
+  it('says a job had already finished when the cancel comes back unchanged', async () => {
+    server.jobs = [scan('content-health', { status: 'running', done: 50, total: 412 })]
+    server.action = () =>
+      ok(patchJob('job_health', { status: 'succeeded', lockedAt: null, finishedAt: iso(0) }))
+    await renderJobs()
+    const drawer = await openJob('job_health')
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    fireEvent.click(within(await cancelDialog()).getByRole('button', { name: 'Cancel job' }))
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith('“Content health” had already finished.'),
+    )
+    expect(within(drawer).getAllByText('Succeeded').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+  })
+
+  it('retries a failed job from the drawer: Retry from document 8, then focus on the panel', async () => {
+    server.jobs = [failed()]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/job_415/retry'
+        ? ok(patchJob('job_415', { status: 'queued', attempts: 0, lastError: null }))
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    // The kit's primary button.
+    expect(retry.className).toContain('bg-acc')
+    retry.focus()
+    fireEvent.click(retry)
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying from document 8'))
+    await waitFor(() => expect(announced()).toBe('Retrying from document 8'))
+    expect(within(drawer).getAllByText('In progress').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+    // Queued again, it can be cancelled.
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBeTruthy()
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+    expect(posts('POST', '/retry')).toHaveLength(1)
+  })
+
+  it('counts pages for an SEO scan: Retry from page 101', async () => {
+    server.jobs = [
+      scan('seo-scan', {
+        status: 'dead',
+        attempts: 3,
+        done: 100,
+        total: 340,
+        lockedAt: null,
+        lastError: 'TimeoutError: fetch timed out',
+      }),
+    ]
+    await renderJobs()
+    const drawer = await openJob('job_scan')
+    expect(within(drawer).getByRole('button', { name: 'Retry from page 101' })).toBeTruthy()
+  })
+
+  it('posts one retry for a double click, keeping focus on the busy button', async () => {
+    server.jobs = [failed()]
+    let answer: (reply: Reply) => void = () => {}
+    server.action = () => new Promise<Reply>((resolve) => (answer = resolve))
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    retry.focus()
+    fireEvent.click(retry)
+    fireEvent.click(retry)
+    await waitFor(() => expect(retry.getAttribute('aria-busy')).toBe('true'))
+    expect(retry.hasAttribute('disabled')).toBe(false)
+    expect(document.activeElement).toBe(retry)
+    fireEvent.click(retry)
+    expect(posts('POST', '/retry')).toHaveLength(1)
+    await act(async () => {
+      answer(ok(patchJob('job_415', { status: 'queued', attempts: 0, lastError: null })))
+    })
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying from document 8'))
+    expect(posts('POST', '/retry')).toHaveLength(1)
+  })
+
+  it('reads the list again on a 409 from a retry, and shows the job as it is now', async () => {
+    server.jobs = [failed()]
+    server.action = () => {
+      // Someone else retried it first, and the worker has picked it up.
+      patchJob('job_415', { status: 'running', attempts: 0, lastError: null, lockedAt: iso(0) })
+      return { error: 'Only a failed job, or one waiting to retry, can be retried', status: 409 }
+    }
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    retry.focus()
+    fireEvent.click(retry)
+    const message =
+      '“Translate excerpts to Spanish” wasn’t retried: Only a failed job, or one waiting to retry, can be retried'
+    await waitFor(() => expect(toast).toHaveBeenCalledWith(message))
+    expect(toast.error).not.toHaveBeenCalled()
+    // The answer shows with the job as it is now, read again: running.
+    expect(within(drawer).getAllByText('Running').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+    await waitFor(() => expect(announced()).toBe(message))
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+  })
+
+  it('keeps Retry and focus on a refusal that isn’t a 409', async () => {
+    server.jobs = [failed()]
+    server.action = () => ({ error: 'Insufficient permissions', status: 403 })
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    retry.focus()
+    fireEvent.click(retry)
+    const message = '“Translate excerpts to Spanish” wasn’t retried: Insufficient permissions'
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith(message))
+    await waitFor(() => expect(announced()).toBe(message))
+    await waitFor(() => expect(retry.getAttribute('aria-busy')).toBeNull())
+    expect(document.activeElement).toBe(retry)
+  })
+
+  it('offers Retry now on a job waiting to retry, but not while cancelling or on a stale lock', async () => {
+    server.jobs = [
+      waiting(),
+      waiting({ id: 'job_c', title: 'Cancelling batch', cancelRequestedAt: iso(0) }),
+      batch({
+        id: 'job_stale',
+        title: 'Stuck batch',
+        status: 'running',
+        done: 4,
+        attempts: 1,
+        lockedAt: iso(-11 * MIN),
+      }),
+    ]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/job_418/retry'
+        ? ok(patchJob('job_418', { attempts: 0, lastError: null, runAt: iso(0) }))
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+
+    let drawer = await openJob('job_c')
+    expect(within(drawer).getAllByText('Cancelling').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+
+    // The server still holds a stale lock as running; the next worker run picks it up.
+    drawer = await openJob('job_stale')
+    expect(within(drawer).getAllByText('Retrying').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBeTruthy()
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+
+    drawer = await openJob('job_418')
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBeTruthy()
+    const now = within(drawer).getByRole('button', { name: 'Retry now' })
+    // The kit's plain `.jb-btn`, not the primary retry.
+    expect(now.className).toContain('bg-card')
+    now.focus()
+    fireEvent.click(now)
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying on the next worker run'))
+    await waitFor(() => expect(announced()).toBe('Retrying on the next worker run'))
+    expect(posts('POST', '/jobs/job_418/retry')).toHaveLength(1)
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+  })
+
+  it('opens the running scan on Run now and announces the reuse in the drawer', async () => {
+    const running = scan('seo-scan', { status: 'running', done: 40, total: 340 })
+    server.jobs = [running]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/run'
+        ? ok({ job: running, reused: true })
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+    fireEvent.click(screen.getByRole('button', { name: 'Run now: SEO scan' }))
+    const drawer = await screen.findByRole('dialog', { name: 'SEO scan' })
+    expect(toast).toHaveBeenCalledWith('SEO scan is already running. Reusing that job.')
+    await waitFor(() => expect(announced()).toBe('SEO scan is already running. Reusing that job.'))
+    expect(drawer.hasAttribute('data-job-drawer')).toBe(true)
+    expect(posts('POST', '/jobs/run')).toHaveLength(1)
+  })
+
+  it('hides Run now, Cancel and Retry from a viewer', async () => {
+    server.jobs = [batch({}), failed(), waiting()]
+    await renderJobs(() => {}, { role: 'VIEWER', userId: 'u9' })
+    expect(screen.queryByRole('button', { name: /^Run now/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Cancel / })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Retry/ })).toBeNull()
+    // The failure alert keeps See why.
+    expect(within(screen.getByRole('alert')).getByRole('button', { name: 'See why' })).toBeTruthy()
+
+    for (const id of ['job_417', 'job_415', 'job_418']) {
+      const drawer = await openJob(id)
+      expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+      expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+      fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+      await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    }
+  })
+
+  it('shows nothing to act with when there’s no role', async () => {
+    server.jobs = [batch({}), failed()]
+    await renderJobs(() => {}, { role: null, userId: null })
+    expect(screen.queryByRole('button', { name: /^Run now/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Cancel / })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Retry/ })).toBeNull()
+  })
+
+  it('lets an editor retry a scan, and only a batch they queued', async () => {
+    server.jobs = [
+      failed({ createdBy: { id: 'u2', name: 'Dana Cole', initials: 'DC' } }),
+      failed({
+        id: 'job_mine',
+        title: 'My batch',
+        createdBy: { id: 'u7', name: 'Ed', initials: 'E' },
+      }),
+      scan('content-health', {
+        status: 'dead',
+        attempts: 3,
+        done: 50,
+        total: 412,
+        lockedAt: null,
+        lastError: 'Error: boom',
+      }),
+    ]
+    await renderJobs(() => {}, { role: 'EDITOR', userId: 'u7' })
+    expect(screen.getByRole('button', { name: 'Run now: SEO scan' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Retry Translate excerpts to Spanish' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Retry My batch' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Retry Content health' })).toBeTruthy()
+
+    const drawer = await openJob('job_415')
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+  })
+})