@prenta/admin 2.6.1 → 2.8.0

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

@@ -0,0 +1,707 @@
+// @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, JobWorkerStatus } from '@prenta/core'
+import type { NewBatchJobProps } from '../../views/Jobs/NewBatchJob.js'
+
+/*
+ * The New batch AI job wizard (P-20): the three steps with the kit's copy,
+ * the estimate from `/jobs/batch-ai/estimate`, Try it from `/preview`, Queue
+ * to `/jobs/batch-ai`, "Apply automatically" for admins only, validation,
+ * loading and error states, a picked selection, and focus. The wizard's
+ * calls are answered by the `cmsApi` mock; the Jobs list's refresh by the
+ * `fetch` stub. Both read `server` below.
+ */
+
+interface Reply {
+  data?: unknown
+  error?: string
+  status: number
+}
+
+interface Call {
+  endpoint: string
+  method: string
+  body: Record<string, unknown> | undefined
+}
+
+interface Server {
+  estimate: (query: URLSearchParams) => Reply | Promise<Reply>
+  preview: (body: Record<string, unknown>) => Reply | Promise<Reply>
+  create: (body: Record<string, unknown>) => Reply | Promise<Reply>
+  jobs: Job[]
+  calls: Call[]
+}
+
+const server: Server = {
+  estimate: () => ({ error: 'not stubbed', status: 500 }),
+  preview: () => ({ error: 'not stubbed', status: 500 }),
+  create: () => ({ error: 'not stubbed', status: 500 }),
+  jobs: [],
+  calls: [],
+}
+
+vi.mock('../../lib/api.js', () => ({
+  getApiBase: () => '/api/cms',
+  cmsApi: vi.fn(async (endpoint: string, init: RequestInit = {}) => {
+    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')
+    if (url.pathname === '/jobs/batch-ai/estimate') return server.estimate(url.searchParams)
+    if (url.pathname === '/jobs/batch-ai/preview') return server.preview(body)
+    if (url.pathname === '/jobs/batch-ai' && method === 'POST') return server.create(body)
+    return { error: `unexpected ${method} ${endpoint}`, status: 404 }
+  }),
+}))
+
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn() }))
+vi.mock('sonner', () => ({ toast }))
+
+const { NewBatchJob } = await import('../../views/Jobs/NewBatchJob.js')
+const { Jobs } = await import('../../views/Jobs.js')
+
+const CONFIG = {
+  collections: {
+    posts: { slug: 'posts', type: 'post', labels: { plural: 'Posts' } },
+    pages: { slug: 'pages', type: 'page', labels: { plural: 'Pages' } },
+    menus: { slug: 'menus', labels: { plural: 'Menus' } },
+    tags: { slug: 'tags', type: 'post', labels: { plural: 'Tags' }, admin: { hidden: true } },
+  },
+}
+
+const SAMPLE = [
+  { title: 'How to choose a CMS in 2026', url: '/blog/choose-cms-2026' },
+  { title: 'Local SEO for multi-location brands', url: '/blog/local-seo-multi-location' },
+  { title: 'Core Web Vitals checklist', url: '/blog/core-web-vitals-checklist' },
+]
+
+/** The kit's numbers: 42 posts, 900 tokens and a minute each, 4% of the month. */
+function estimate(count = 42, pct: number | null = 4): Reply {
+  return {
+    data: {
+      count,
+      sample: SAMPLE.slice(0, Math.min(3, count)),
+      tokens: count * 900,
+      minutes: count,
+      pctOfMonthlyLimit: pct,
+    },
+    status: 200,
+  }
+}
+
+const OUTPUT = [
+  'Compare headless and traditional CMS options, real costs and migration risks.',
+  'How multi-location brands win local search: one profile per location.',
+  'A practical Core Web Vitals checklist: fix LCP, INP and CLS in order.',
+]
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((r) => (resolve = r))
+  return { promise, resolve }
+}
+
+function iso(offsetMs = 0): string {
+  return new Date(Date.now() + offsetMs).toISOString()
+}
+
+function job(overrides: Partial<Job> = {}): Job {
+  return {
+    id: 'job_420',
+    type: 'batch-ai',
+    status: 'queued',
+    title: 'Rewrite meta descriptions',
+    scope: '42 posts · missing or over 160 characters',
+    runAt: iso(),
+    attempts: 0,
+    maxAttempts: 3,
+    progress: { done: 0, total: 42, unit: 'documents', cursor: null, completed: 0 },
+    lastError: null,
+    explain: null,
+    summary: null,
+    lockedAt: null,
+    cancelRequestedAt: null,
+    cancelledBy: null,
+    createdBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+    createdAt: iso(),
+    updatedAt: iso(),
+    finishedAt: null,
+    usage: { tokensIn: 0, tokensOut: 0 },
+    payload: {
+      operation: 'meta',
+      instruction: null,
+      source: 'posts',
+      statusFilter: 'published',
+      documentIds: [],
+      review: 'review',
+      onApprove: 'draft',
+    },
+    review: { pending: 0, approved: 0, rejected: 0 },
+    ...overrides,
+  }
+}
+
+function workerStatus(): JobWorkerStatus {
+  return {
+    lastTickAt: iso(-24_000),
+    lastTickMs: 1800,
+    nextTickAt: iso(36_000),
+    budgetMs: 20_000,
+    schedules: [],
+  }
+}
+
+/** The Jobs list's refresh: `GET /jobs` and `GET /jobs/worker`. */
+function fetchStub(url: string) {
+  const endpoint = url.replace(/^\/api\/cms/, '')
+  const body =
+    endpoint === '/jobs?limit=50'
+      ? { data: { jobs: server.jobs } }
+      : endpoint === '/jobs/worker'
+        ? { data: workerStatus() }
+        : null
+  return Promise.resolve({
+    ok: body !== null,
+    status: body ? 200 : 404,
+    headers: { get: (name: string) => (name === 'date' ? new Date().toUTCString() : null) },
+    json: async () => body ?? { error: 'not found' },
+  })
+}
+
+beforeEach(() => {
+  vi.stubGlobal('fetch', vi.fn(fetchStub))
+  server.calls = []
+  server.jobs = []
+  server.estimate = () => estimate()
+  server.preview = () => ({
+    data: {
+      items: SAMPLE.map((s, i) => ({ documentId: `d${i}`, title: s.title, after: OUTPUT[i] })),
+    },
+    status: 200,
+  })
+  // As the server sends it: queued, with no total until the worker's first slice.
+  server.create = () => {
+    const created = job({
+      progress: { done: 0, total: 0, unit: 'documents', cursor: null, completed: 0 },
+      payload: {
+        operation: 'meta',
+        instruction: null,
+        source: 'posts',
+        statusFilter: 'published',
+        documentIds: Array.from({ length: 42 }, (_, i) => `doc-${i}`),
+        review: 'review',
+        onApprove: 'draft',
+      },
+    })
+    server.jobs = [created, ...server.jobs]
+    return { data: created, status: 201 }
+  }
+  toast.mockClear()
+})
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+function renderWizard(props: Partial<NewBatchJobProps> = {}) {
+  const onClose = vi.fn()
+  const onQueued = vi.fn()
+  render(
+    <NewBatchJob role="ADMIN" config={CONFIG} onClose={onClose} onQueued={onQueued} {...props} />,
+  )
+  return { dialog: screen.getByRole('dialog'), onClose, onQueued }
+}
+
+function estimateCalls(): URLSearchParams[] {
+  return server.calls
+    .filter((c) => c.endpoint.startsWith('/jobs/batch-ai/estimate'))
+    .map((c) => new URL(c.endpoint, 'http://x').searchParams)
+}
+
+function current(dialog: HTMLElement): string {
+  return within(dialog).getByRole('list', { name: 'Steps' }).querySelector('[aria-current="step"]')!
+    .textContent!
+}
+
+async function toStep2(dialog: HTMLElement) {
+  fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+  await within(dialog).findByText('posts match')
+}
+
+async function toStep3(dialog: HTMLElement) {
+  await toStep2(dialog)
+  fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+  await within(dialog).findByText('Before anything changes')
+}
+
+describe('step 1: what to change', () => {
+  it('shows the six operations with the kit copy, meta descriptions picked and focused', () => {
+    const { dialog } = renderWizard()
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    expect(within(dialog).getByRole('heading', { name: 'New batch AI job' })).toBeTruthy()
+    expect(current(dialog)).toBe('What to change')
+    const ops = within(dialog).getAllByRole('radio')
+    expect(ops.map((op) => op.closest('label')!.querySelector('b')!.textContent)).toEqual([
+      'Rewrite meta descriptions',
+      'Generate image alt text',
+      'Shorten long titles',
+      'Write excerpts',
+      'Add internal links',
+      'Custom instruction',
+    ])
+    expect(
+      within(dialog).getByText('Suggests up to 3 links to related pages in the body.'),
+    ).toBeTruthy()
+    const meta = within(dialog).getByRole('radio', { name: /Rewrite meta descriptions/ })
+    expect((meta as HTMLInputElement).checked).toBe(true)
+    expect(document.activeElement).toBe(meta)
+    expect(within(dialog).getByLabelText('Extra guidance (optional)')).toBeTruthy()
+    expect(
+      within(dialog).getByText('The AI also follows your brand voice from Settings → AI.'),
+    ).toBeTruthy()
+    expect(within(dialog).getByRole('button', { name: 'Cancel' })).toBeTruthy()
+    // Nothing is counted until step 2.
+    expect(estimateCalls()).toHaveLength(0)
+  })
+
+  it('needs a custom instruction of more than 8 characters, and its field', async () => {
+    const { dialog } = renderWizard()
+    fireEvent.click(within(dialog).getByRole('radio', { name: /Custom instruction/ }))
+    const instruction = within(dialog).getByLabelText('Instruction') as HTMLTextAreaElement
+    expect(instruction.placeholder).toBe(
+      'e.g. Translate the excerpt to Spanish. Keep brand names in English.',
+    )
+    const cont = within(dialog).getByRole('button', { name: 'Continue' })
+    expect(cont.getAttribute('aria-disabled')).toBe('true')
+
+    fireEvent.change(instruction, { target: { value: 'Shorter' } })
+    fireEvent.click(cont)
+    const error = within(dialog).getByText('A custom instruction needs more than 8 characters.')
+    expect(instruction.getAttribute('aria-invalid')).toBe('true')
+    expect(instruction.getAttribute('aria-describedby')).toBe(error.id)
+    expect(document.activeElement).toBe(instruction)
+    expect(current(dialog)).toBe('What to change')
+    expect(estimateCalls()).toHaveLength(0)
+
+    fireEvent.change(within(dialog).getByLabelText('Field'), { target: { value: 'excerpt' } })
+    fireEvent.change(instruction, { target: { value: '  Translate the excerpt to Spanish.  ' } })
+    expect(within(dialog).queryByText(/needs more than 8 characters/)).toBeNull()
+    expect(cont.getAttribute('aria-disabled')).toBeNull()
+    await toStep2(dialog)
+    const query = estimateCalls()[0]!
+    expect(query.get('operation')).toBe('custom')
+    expect(query.get('field')).toBe('excerpt')
+    expect(query.get('instruction')).toBe('Translate the excerpt to Spanish.')
+    expect(within(dialog).getByText('Excerpt:')).toBeTruthy()
+    expect(within(dialog).getByText('Any')).toBeTruthy()
+  })
+
+  it('closes on Esc and from Cancel', () => {
+    const { dialog, onClose } = renderWizard()
+    fireEvent.keyDown(dialog, { key: 'Escape' })
+    expect(onClose).toHaveBeenCalledTimes(1)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel' }))
+    expect(onClose).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('step 2: which documents', () => {
+  it('counts the matches with /estimate and shows the sample', async () => {
+    const gate = deferred<Reply>()
+    server.estimate = () => gate.promise
+    const { dialog } = renderWizard()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    expect(current(dialog)).toBe('Which documents')
+    expect(within(dialog).getByText('Counting documents…').closest('[role="status"]')).toBeTruthy()
+    expect(screen.getByText('Step 2 of 3: Which documents')).toBeTruthy()
+    const content = within(dialog).getByLabelText('Content') as HTMLSelectElement
+    expect(document.activeElement).toBe(content)
+    // Continue waits for the count.
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    expect(current(dialog)).toBe('Which documents')
+
+    await act(async () => gate.resolve(estimate()))
+    const query = estimateCalls()[0]!
+    expect(Object.fromEntries(query)).toEqual({
+      operation: 'meta',
+      source: 'posts',
+      statusFilter: 'published',
+    })
+    expect([...content.options].map((o) => o.textContent)).toEqual(['Posts', 'Pages'])
+    expect(within(dialog).getByText('Meta description:')).toBeTruthy()
+    expect(within(dialog).getByText('Missing or over 160 characters')).toBeTruthy()
+    expect(within(dialog).getByText('42')).toBeTruthy()
+    expect(within(dialog).getByText('one AI call per document')).toBeTruthy()
+    expect(within(dialog).getByText('/blog/local-seo-multi-location')).toBeTruthy()
+    expect(within(dialog).getByText('and 39 more')).toBeTruthy()
+  })
+
+  it('counts again when the content or status changes', async () => {
+    const { dialog } = renderWizard()
+    await toStep2(dialog)
+    server.estimate = (query) =>
+      estimate(query.get('source') === 'pages' ? 11 : query.get('statusFilter') === 'all' ? 48 : 42)
+    fireEvent.change(within(dialog).getByLabelText('Status'), { target: { value: 'all' } })
+    await within(dialog).findByText('and 45 more')
+    fireEvent.change(within(dialog).getByLabelText('Content'), { target: { value: 'pages' } })
+    await within(dialog).findByText('pages match')
+    expect(within(dialog).getByText('11')).toBeTruthy()
+    expect(estimateCalls().map((q) => `${q.get('source')} ${q.get('statusFilter')}`)).toEqual([
+      'posts published',
+      'posts all',
+      'pages all',
+    ])
+  })
+
+  it('shows a failed count with Try again, and holds Continue', async () => {
+    server.estimate = () => ({ error: 'Request failed (500)', status: 500 })
+    const { dialog } = renderWizard()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    const alert = await within(dialog).findByRole('alert')
+    expect(alert.textContent).toBe('Couldn’t count the documents: Request failed (500)')
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    expect(current(dialog)).toBe('Which documents')
+
+    server.estimate = () => estimate()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Try again' }))
+    await within(dialog).findByText('posts match')
+    expect(estimateCalls()).toHaveLength(2)
+  })
+
+  it('holds Continue when nothing matches, or more than a batch holds', async () => {
+    server.estimate = () => estimate(0)
+    const { dialog } = renderWizard()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    expect((await within(dialog).findByRole('alert')).textContent).toBe(
+      'No documents match this filter.',
+    )
+    const cont = within(dialog).getByRole('button', { name: 'Continue' })
+    expect(cont.getAttribute('aria-disabled')).toBe('true')
+    fireEvent.click(cont)
+    expect(current(dialog)).toBe('Which documents')
+
+    server.estimate = () => estimate(1200)
+    fireEvent.change(within(dialog).getByLabelText('Status'), { target: { value: 'all' } })
+    expect((await within(dialog).findByText(/Narrow it/)).textContent).toBe(
+      'This matches 1,200 documents. Narrow it to 1,000 or fewer.',
+    )
+    expect(within(dialog).queryByText('/blog/choose-cms-2026')).toBeNull()
+  })
+
+  it('locks Content to the media library for alt text', async () => {
+    const { dialog } = renderWizard()
+    fireEvent.click(within(dialog).getByRole('radio', { name: /Generate image alt text/ }))
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    await within(dialog).findByText('media library match')
+    const content = within(dialog).getByLabelText('Content') as HTMLSelectElement
+    expect(content.disabled).toBe(true)
+    expect(content.selectedOptions[0]!.textContent).toBe('Media library')
+    expect((within(dialog).getByLabelText('Status') as HTMLSelectElement).disabled).toBe(true)
+    expect(within(dialog).getByText('Alt text:')).toBeTruthy()
+    expect(within(dialog).getByText('No alt text')).toBeTruthy()
+    expect(estimateCalls()[0]!.get('source')).toBe('media')
+  })
+})
+
+describe('step 3: review and queue', () => {
+  it('shows the approval choices and the estimate tiles', async () => {
+    const { dialog } = renderWizard()
+    await toStep3(dialog)
+    expect(current(dialog)).toBe('Review & queue')
+    const review = within(dialog).getByRole('radio', { name: /Review each change/ })
+    expect((review as HTMLInputElement).checked).toBe(true)
+    expect(document.activeElement).toBe(review)
+    expect(within(dialog).getByText('RECOMMENDED')).toBeTruthy()
+    expect(within(dialog).getByText('When a change is approved')).toBeTruthy()
+    expect(
+      (within(dialog).getByRole('radio', { name: /Save as draft/ }) as HTMLInputElement).checked,
+    ).toBe(true)
+    const tiles = dialog.querySelector('dl')!
+    expect(
+      [...tiles.querySelectorAll('div')].map((d) => [
+        d.querySelector('dt')!.textContent,
+        d.querySelector('dd')!.textContent,
+      ]),
+    ).toEqual([
+      ['Documents', '42'],
+      ['Estimated time', '~42 min'],
+      ['AI usage', '~38k tokens'],
+    ])
+    expect(
+      within(dialog).getByText(
+        'One document per slice, about one a minute. That’s 4% of this month’s AI limit.',
+      ),
+    ).toBeTruthy()
+    expect(within(dialog).getByRole('button', { name: 'Queue 42 documents' })).toBeTruthy()
+    // The tiles reuse step 2's count.
+    expect(estimateCalls()).toHaveLength(1)
+  })
+
+  it('leaves out the limit sentence when no monthly limit is set', async () => {
+    server.estimate = () => estimate(42, null)
+    const { dialog } = renderWizard()
+    await toStep3(dialog)
+    expect(within(dialog).getByText('One document per slice, about one a minute.')).toBeTruthy()
+  })
+
+  it('previews 3 documents with /preview, writing nothing', async () => {
+    const gate = deferred<Reply>()
+    server.preview = () => gate.promise
+    const { dialog } = renderWizard()
+    await toStep3(dialog)
+    expect(
+      within(dialog).getByText(
+        'See sample output before you queue the whole batch. Previews don’t change anything.',
+      ),
+    ).toBeTruthy()
+    const button = within(dialog).getByRole('button', { name: 'Try it' })
+    fireEvent.click(button)
+    expect(button.textContent).toBe('Writing…')
+    expect(button.getAttribute('aria-busy')).toBe('true')
+    fireEvent.click(button)
+    expect(server.calls.filter((c) => c.endpoint === '/jobs/batch-ai/preview')).toHaveLength(1)
+
+    await act(async () =>
+      gate.resolve({
+        data: {
+          items: SAMPLE.map((s, i) => ({ documentId: `d${i}`, title: s.title, after: OUTPUT[i] })),
+        },
+        status: 200,
+      }),
+    )
+    expect(within(dialog).getByText(OUTPUT[1]!)).toBeTruthy()
+    expect(within(dialog).getByText('Core Web Vitals checklist')).toBeTruthy()
+    expect(button.textContent).toBe('Try again')
+    expect(server.calls.find((c) => c.endpoint === '/jobs/batch-ai/preview')!.body).toEqual({
+      operation: 'meta',
+      source: 'posts',
+      statusFilter: 'published',
+      review: 'review',
+      onApprove: 'draft',
+      instruction: null,
+    })
+  })
+
+  it('shows a refused preview, and the text of a link as text', async () => {
+    server.preview = () => ({
+      error: 'This month’s AI limit is used up.',
+      status: 429,
+    })
+    const { dialog } = renderWizard()
+    fireEvent.click(within(dialog).getByRole('radio', { name: /Add internal links/ }))
+    await toStep3(dialog)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Try it' }))
+    expect((await within(dialog).findByRole('alert')).textContent).toBe(
+      'Couldn’t write a preview: This month’s AI limit is used up.',
+    )
+
+    server.preview = () => ({
+      data: {
+        items: [
+          {
+            documentId: 'd0',
+            title: 'Local SEO',
+            after: 'Read about <a href="/services/seo">our SEO services</a> first.',
+          },
+        ],
+      },
+      status: 200,
+    })
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Try again' }))
+    const mark = await within(dialog).findByText('our SEO services')
+    expect(mark.tagName).toBe('MARK')
+    expect(within(dialog).getByText('→ /services/seo')).toBeTruthy()
+    expect(dialog.querySelector('a')).toBeNull()
+  })
+
+  it('says when the AI would change none of the 3', async () => {
+    server.preview = () => ({ data: { items: [] }, status: 200 })
+    const { dialog } = renderWizard()
+    await toStep3(dialog)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Try it' }))
+    expect(
+      await within(dialog).findByText('The AI would leave the first 3 documents as they are.'),
+    ).toBeTruthy()
+  })
+
+  it('lets an admin apply automatically, which never publishes', async () => {
+    const { dialog, onQueued } = renderWizard()
+    await toStep3(dialog)
+    fireEvent.click(within(dialog).getByRole('radio', { name: /Publish right away/ }))
+    fireEvent.click(within(dialog).getByRole('radio', { name: /Apply automatically/ }))
+    expect(within(dialog).getByText('When a change is made')).toBeTruthy()
+    const publish = within(dialog).getByRole('radio', { name: /Publish right away/ })
+    expect((publish as HTMLInputElement).disabled).toBe(true)
+    expect(
+      (within(dialog).getByRole('radio', { name: /Save as draft/ }) as HTMLInputElement).checked,
+    ).toBe(true)
+    const help = within(dialog).getByText(/Applying automatically keeps each document’s status/)
+    expect(publish.getAttribute('aria-describedby')).toBe(help.id)
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Queue 42 documents' }))
+    await waitFor(() => expect(onQueued).toHaveBeenCalledTimes(1))
+    expect(server.calls.find((c) => c.endpoint === '/jobs/batch-ai')!.body).toMatchObject({
+      review: 'auto',
+      onApprove: 'draft',
+    })
+  })
+
+  it('keeps "Apply automatically" from a non-admin, with a tooltip', async () => {
+    const { dialog } = renderWizard({ role: 'EDITOR' })
+    await toStep3(dialog)
+    const auto = within(dialog).getByRole('radio', { name: /Apply automatically/ })
+    expect((auto as HTMLInputElement).disabled).toBe(true)
+    const tip = within(dialog).getByRole('tooltip', { hidden: true })
+    expect(tip.textContent).toBe('Only an admin can apply changes automatically.')
+    expect(auto.getAttribute('aria-describedby')).toBe(tip.id)
+    fireEvent.click(auto)
+    expect((auto as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('offers "Apply automatically" to an owner', async () => {
+    const { dialog } = renderWizard({ role: 'OWNER' })
+    await toStep3(dialog)
+    const auto = within(dialog).getByRole('radio', { name: /Apply automatically/ })
+    expect((auto as HTMLInputElement).disabled).toBe(false)
+    expect(within(dialog).queryByRole('tooltip', { hidden: true })).toBeNull()
+  })
+
+  it('keeps the wizard open on a failed create, with the server’s reason', async () => {
+    const gate = deferred<Reply>()
+    server.create = () => gate.promise
+    const { dialog, onQueued, onClose } = renderWizard()
+    await toStep3(dialog)
+    const queue = within(dialog).getByRole('button', { name: 'Queue 42 documents' })
+    queue.focus()
+    fireEvent.click(queue)
+    expect(queue.getAttribute('aria-busy')).toBe('true')
+    // Neither Esc nor Back leaves while it's queuing.
+    fireEvent.keyDown(dialog, { key: 'Escape' })
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Back' }))
+    expect(onClose).not.toHaveBeenCalled()
+    expect(current(dialog)).toBe('Review & queue')
+
+    await act(async () => gate.resolve({ error: 'No documents match this filter.', status: 400 }))
+    expect(within(dialog).getByRole('alert').textContent).toBe(
+      'Couldn’t queue the job: No documents match this filter.',
+    )
+    expect(queue.getAttribute('aria-busy')).toBeNull()
+    expect(document.activeElement).toBe(queue)
+    expect(onQueued).not.toHaveBeenCalled()
+    expect(server.calls.find((c) => c.endpoint === '/jobs/batch-ai')!.body).toEqual({
+      operation: 'meta',
+      source: 'posts',
+      statusFilter: 'published',
+      review: 'review',
+      onApprove: 'draft',
+      instruction: null,
+    })
+
+    // Back clears it.
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Back' }))
+    expect(within(dialog).queryByRole('alert')).toBeNull()
+  })
+
+  it('drops a preview once what it previewed changes', async () => {
+    const { dialog } = renderWizard()
+    await toStep3(dialog)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Try it' }))
+    await within(dialog).findByText(OUTPUT[0]!)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Back' }))
+    fireEvent.change(within(dialog).getByLabelText('Status'), { target: { value: 'all' } })
+    await waitFor(() => expect(estimateCalls()).toHaveLength(2))
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    await within(dialog).findByText('Before anything changes')
+    expect(within(dialog).queryByText(OUTPUT[0]!)).toBeNull()
+    expect(within(dialog).getByRole('button', { name: 'Try it' })).toBeTruthy()
+  })
+})
+
+describe('a picked selection (P-21)', () => {
+  it('runs the picked documents as they are: "{n} selected", drafts included', async () => {
+    server.estimate = (query) => estimate(query.get('documentIds')!.split(',').length)
+    const { dialog } = renderWizard({
+      selection: { source: 'pages', documentIds: ['p1', 'p2', 'p3'] },
+    })
+    // Alt text runs on images, so it can't run on picked pages.
+    expect(
+      (within(dialog).getByRole('radio', { name: /Generate image alt text/ }) as HTMLInputElement)
+        .disabled,
+    ).toBe(true)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    await within(dialog).findByText('pages match')
+    expect(within(dialog).getByText('3 selected')).toBeTruthy()
+    expect(within(dialog).queryByText('Missing or over 160 characters')).toBeNull()
+    const content = within(dialog).getByLabelText('Content') as HTMLSelectElement
+    expect(content.disabled).toBe(true)
+    expect(content.selectedOptions[0]!.textContent).toBe('Pages')
+    expect((within(dialog).getByLabelText('Status') as HTMLSelectElement).value).toBe('all')
+    expect(Object.fromEntries(estimateCalls()[0]!)).toEqual({
+      operation: 'meta',
+      source: 'pages',
+      statusFilter: 'all',
+      documentIds: 'p1,p2,p3',
+    })
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Continue' }))
+    fireEvent.click(await within(dialog).findByRole('button', { name: 'Queue 3 documents' }))
+    await waitFor(() =>
+      expect(server.calls.find((c) => c.endpoint === '/jobs/batch-ai')!.body).toMatchObject({
+        source: 'pages',
+        filter: { documentIds: ['p1', 'p2', 'p3'] },
+      }),
+    )
+  })
+
+  it('starts picked images on alt text, the only operation for them', () => {
+    const { dialog } = renderWizard({ selection: { source: 'media', documentIds: ['m1'] } })
+    const radios = within(dialog).getAllByRole('radio') as HTMLInputElement[]
+    expect(radios.filter((r) => !r.disabled).map((r) => r.value)).toEqual(['alt'])
+    expect(radios.find((r) => r.value === 'alt')!.checked).toBe(true)
+  })
+})
+
+describe('from the Jobs screen', () => {
+  it('queues the batch and shows it as the top row, focused', async () => {
+    server.jobs = [
+      job({ id: 'job_419', title: 'Write excerpts', status: 'succeeded', finishedAt: iso() }),
+    ]
+    render(<Jobs onNavigate={() => {}} role="ADMIN" config={CONFIG} />)
+    await screen.findByRole('list', { name: 'Jobs' })
+    const opener = screen.getByRole('button', { name: 'New batch AI job' })
+    opener.focus()
+    fireEvent.click(opener)
+    const dialog = screen.getByRole('dialog')
+    await toStep3(dialog)
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Queue 42 documents' }))
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    expect(toast).toHaveBeenCalledWith('“Rewrite meta descriptions” queued · 42 documents')
+    const rows = [...document.querySelectorAll<HTMLElement>('[data-job-open]')]
+    expect(rows.map((row) => row.id)).toEqual(['job-open-job_420', 'job-open-job_419'])
+    expect(rows[0]!.closest('li')!.textContent).toContain('0 / 42')
+    await waitFor(() => expect(document.activeElement).toBe(rows[0]))
+  })
+
+  it('returns focus to New batch AI job when closed', async () => {
+    server.jobs = [job({ id: 'job_419', status: 'succeeded', finishedAt: iso() })]
+    render(<Jobs onNavigate={() => {}} role="EDITOR" config={CONFIG} />)
+    await screen.findByRole('list', { name: 'Jobs' })
+    const opener = screen.getByRole('button', { name: 'New batch AI job' })
+    opener.focus()
+    fireEvent.click(opener)
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(opener))
+  })
+
+  it('offers New batch AI job only to roles that may queue one, as Run now', async () => {
+    server.jobs = [job({ id: 'job_419', status: 'succeeded', finishedAt: iso() })]
+    const { unmount } = render(<Jobs onNavigate={() => {}} role="VIEWER" config={CONFIG} />)
+    await screen.findByRole('list', { name: 'Jobs' })
+    expect(screen.queryByRole('button', { name: 'New batch AI job' })).toBeNull()
+    unmount()
+    render(<Jobs onNavigate={() => {}} role="AUTHOR" config={CONFIG} />)
+    await screen.findByRole('list', { name: 'Jobs' })
+    expect(screen.getByRole('button', { name: 'New batch AI job' })).toBeTruthy()
+  })
+})