@prenta/admin 2.7.0 → 2.8.0

package/src/views/Jobs/NewBatchJob.tsx

@@ -0,0 +1,857 @@
+'use client'
+
+import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import type { BatchAiEstimate, BatchAiPreviewItem, BatchAiTextField, Job } from '@prenta/core'
+import { Button } from '../../components/ui/Button.js'
+import {
+  CUSTOM_FIELDS,
+  INSTRUCTION_MAX,
+  MEDIA_SOURCE,
+  batchOp,
+  batchRequest,
+  batchSources,
+  estimateKey,
+  estimateNote,
+  estimateTiles,
+  instructionError,
+  isAdminRole,
+  matchProblem,
+  operationFits,
+  previewKey,
+  runsOnMedia,
+  type BatchDraft,
+  type BatchOperation,
+  type BatchSelection,
+} from '../../lib/batch-wizard.js'
+import { JOB_OPS } from '../../lib/job-view.js'
+import { createBatchAiJob, estimateBatchAi, previewBatchAi } from '../../lib/jobs-service.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+import { BusyButton } from './BusyButton.js'
+import { LinkLine } from './DrawerReview.js'
+import { useReturnFocus } from './focus.js'
+import { JobIcons } from './icons.js'
+
+const STEPS = ['What to change', 'Which documents', 'Review & queue'] as const
+const AUTO_ADMIN_ONLY = 'Only an admin can apply changes automatically.'
+/** The server's reason, cms-core `parseBatchAiRequest`. */
+const AUTO_KEEPS_STATUS =
+  'Applying automatically keeps each document’s status. To publish, review the changes and approve them with Publish.'
+
+/* jobs-new.jsx `.nb-*`, as utilities. */
+const LABEL_TEXT = 'text-sm2 text-txt font-semibold leading-[normal]'
+const LABEL = `${LABEL_TEXT} mb-[5px] block p-0`
+const HELP = 'text-hint text-faint'
+/*
+ * `.nb-in`. Its focus ring (2px --acc-m, no offset, an --acc border) replaces
+ * the admin-wide one, which is unlayered, hence the `!`.
+ */
+const FIELD =
+  'rounded-8 border-bdr bg-card text-txt text-body focus:border-acc w-full border px-2.5 focus:outline-2! focus:outline-offset-0! focus:outline-[var(--acc-m)]! disabled:cursor-not-allowed disabled:opacity-60'
+const CARD =
+  'rounded-10 border-bdr text-body text-txt font-normal leading-[normal] has-checked:border-acc has-checked:bg-acc-l has-focus-visible:outline-acc flex cursor-pointer items-start gap-2.5 border px-3 py-2.5 has-disabled:cursor-not-allowed has-disabled:opacity-55 has-focus-visible:outline-2 has-focus-visible:outline-offset-2'
+const RADIO = 'accent-acc mt-[3px] shrink-0'
+const SMALL = 'text-meta text-sub mt-px block'
+
+interface EstimateState {
+  key: string
+  value: BatchAiEstimate | null
+  loading: boolean
+  error: string | null
+}
+
+interface PreviewState {
+  key: string
+  items: BatchAiPreviewItem[] | null
+  loading: boolean
+  error: string | null
+}
+
+export interface NewBatchJobProps {
+  /** The signed-in user's role. Only OWNER and ADMIN may apply changes automatically. */
+  role?: string | null
+  /** The CMS config; its page and post collections fill the Content select. */
+  config?: unknown
+  /**
+   * Documents picked in a list (P-21's "Run with AI…"). Step 2 then shows
+   * "{n} selected", Content is locked to their source, and they run without
+   * the operation's "Only where" preset.
+   */
+  selection?: BatchSelection | null
+  /** The operation to start on. Defaults to alt text for picked images, else meta descriptions. */
+  operation?: BatchOperation
+  onClose: () => void
+  /** The job the server queued. The wizard closes after this. */
+  onQueued: (job: Job) => void
+  /**
+   * Where focus goes on close when the control that opened the wizard is
+   * gone, or after a job was queued (the Jobs list focuses its new row).
+   */
+  onFocusFallback?: (job: Job | null) => void
+}
+
+/** The step bar: 3px segments, the current one in the accent, finished ones filled. */
+function StepBar({ step }: { step: number }) {
+  return (
+    <ol aria-label="Steps" className="m-0 flex list-none gap-1.5 px-5 pt-3">
+      {STEPS.map((label, i) => (
+        <li
+          key={label}
+          aria-current={i === step ? 'step' : undefined}
+          className={`text-hint flex min-w-0 flex-1 flex-col gap-[5px] font-semibold ${
+            i === step ? 'text-acc' : i < step ? 'text-sub' : 'text-faint'
+          }`}
+        >
+          <i
+            aria-hidden="true"
+            className={`h-[3px] rounded-[2px] ${i <= step ? 'bg-acc' : 'bg-bdr'}`}
+          />
+          <span className="truncate">{label}</span>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+function Spinner() {
+  return (
+    <i
+      aria-hidden="true"
+      className="inline-block size-3 shrink-0 rounded-full border-2 border-current border-r-transparent motion-safe:animate-spin"
+    />
+  )
+}
+
+/** The read-only "Only where" box: `.nb-in` as text. */
+function OnlyWhere({ children }: { children: ReactNode }) {
+  return (
+    <div>
+      <span className={LABEL}>Only where</span>
+      <div className="rounded-8 border-bdr bg-card text-body text-sub flex min-h-9 items-center gap-2 border px-2.5 py-1.5">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * The New batch AI job wizard (jobs-new.jsx, TRACKING P-20): what to change,
+ * which documents, then review and queue. A centred modal, 680px wide; a
+ * full-screen sheet on phones. The match count and sample come from
+ * `/jobs/batch-ai/estimate`, Try it from `/preview`, and Queue posts to
+ * `/jobs/batch-ai`. Radix traps focus and closes on Esc, except while the
+ * job is being queued.
+ */
+export function NewBatchJob({
+  role,
+  config,
+  selection = null,
+  operation: initialOperation,
+  onClose,
+  onQueued,
+  onFocusFallback,
+}: NewBatchJobProps) {
+  const ids = useId()
+  const sources = useMemo(() => batchSources(config), [config])
+  const admin = isAdminRole(role)
+
+  const [step, setStep] = useState(0)
+  const [operation, setOperation] = useState<BatchOperation>(
+    () => initialOperation ?? (selection?.source === MEDIA_SOURCE.id ? 'alt' : 'meta'),
+  )
+  const [instruction, setInstruction] = useState('')
+  const [field, setField] = useState<BatchAiTextField>('metaDescription')
+  const [collection, setCollection] = useState(() =>
+    selection && selection.source !== MEDIA_SOURCE.id ? selection.source : (sources[0]?.id ?? ''),
+  )
+  // Picked documents run as they are, drafts included.
+  const [statusFilter, setStatusFilter] = useState<'published' | 'all'>(
+    selection ? 'all' : 'published',
+  )
+  const [review, setReview] = useState<'review' | 'auto'>('review')
+  const [onApprove, setOnApprove] = useState<'draft' | 'publish'>('draft')
+  const [instructionTouched, setInstructionTouched] = useState(false)
+  const [estimate, setEstimate] = useState<EstimateState | null>(null)
+  const [estimateRun, setEstimateRun] = useState(0)
+  const [preview, setPreview] = useState<PreviewState | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [createError, setCreateError] = useState<string | null>(null)
+  const [announce, setAnnounce] = useState('')
+
+  const queued = useRef<Job | null>(null)
+  const previewAbort = useRef<AbortController | null>(null)
+  const body = useRef<HTMLDivElement>(null)
+  const instructionRef = useRef<HTMLTextAreaElement>(null)
+  const stepMoved = useRef(false)
+  const returnFocus = useReturnFocus(() => onFocusFallback?.(null))
+
+  const op = batchOp(operation)
+  const onMedia = runsOnMedia(operation)
+  const draft: BatchDraft = {
+    operation,
+    instruction,
+    field,
+    collection,
+    statusFilter,
+    review,
+    onApprove,
+    selection,
+  }
+  const request = batchRequest(draft)
+  const eKey = estimateKey(request)
+  const pKey = previewKey(request)
+  const sourceId = request.source
+  const sourceLabel =
+    sourceId === MEDIA_SOURCE.id
+      ? MEDIA_SOURCE.label
+      : (sources.find((s) => s.id === sourceId)?.label ?? sourceId)
+  const instructionProblem = instructionError(operation, instruction)
+  const showInstructionError = instructionTouched && instructionProblem !== null
+
+  const current = estimate?.key === eKey ? estimate : null
+  const counted = current?.value ?? null
+  const problem = counted ? matchProblem(counted) : null
+  const canQueue = counted !== null && problem === null
+  const shownPreview = preview?.key === pKey ? preview : null
+
+  // The estimate, read when step 2 opens and again whenever what it counts changes.
+  const counting = step > 0
+  useEffect(() => {
+    if (!counting) return
+    const controller = new AbortController()
+    const key = eKey
+    setEstimate((prev) => ({
+      key,
+      value: prev?.key === key ? prev.value : null,
+      loading: true,
+      error: null,
+    }))
+    void estimateBatchAi(request, controller.signal).then((res) => {
+      if (controller.signal.aborted) return
+      setEstimate((prev) => ({
+        key,
+        value: res.ok ? res.value : prev?.key === key ? prev.value : null,
+        loading: false,
+        error: res.ok ? null : res.error,
+      }))
+    })
+    return () => controller.abort()
+    // `eKey` stands for what changes the count: operation, source, status and
+    // picked ids. The instruction and field can only change on step 1.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [counting, eKey, estimateRun])
+
+  useEffect(() => () => previewAbort.current?.abort(), [])
+
+  // A new step: focus its first control and say which step it is.
+  useEffect(() => {
+    if (!stepMoved.current) return
+    stepMoved.current = false
+    body.current?.scrollTo?.({ top: 0 })
+    focusFirstControl(body.current)
+    setAnnounce(`Step ${step + 1} of ${STEPS.length}: ${STEPS[step]}`)
+  }, [step])
+
+  function goTo(next: number) {
+    stepMoved.current = true
+    setCreateError(null)
+    setStep(next)
+  }
+
+  function pickOperation(next: BatchOperation) {
+    setOperation(next)
+    if (next !== 'custom') setInstructionTouched(false)
+  }
+
+  function pickReview(next: 'review' | 'auto') {
+    setReview(next)
+    // "Apply automatically" keeps each document's status, so it never publishes.
+    if (next === 'auto') setOnApprove('draft')
+  }
+
+  function onContinue() {
+    if (step === 0) {
+      if (instructionProblem) {
+        setInstructionTouched(true)
+        instructionRef.current?.focus()
+        return
+      }
+      goTo(1)
+      return
+    }
+    if (canQueue) goTo(2)
+  }
+
+  async function tryIt() {
+    previewAbort.current?.abort()
+    const controller = new AbortController()
+    previewAbort.current = controller
+    const key = pKey
+    setPreview((prev) => ({
+      key,
+      items: prev?.key === key ? prev.items : null,
+      loading: true,
+      error: null,
+    }))
+    const res = await previewBatchAi(request, controller.signal)
+    if (controller.signal.aborted) return
+    setPreview({
+      key,
+      items: res.ok ? res.value : null,
+      loading: false,
+      error: res.ok ? null : res.error,
+    })
+  }
+
+  async function queue() {
+    setCreating(true)
+    setCreateError(null)
+    const res = await createBatchAiJob(request)
+    if (!res.ok) {
+      setCreating(false)
+      setCreateError(res.error)
+      return
+    }
+    queued.current = res.value
+    previewAbort.current?.abort()
+    onQueued(res.value)
+  }
+
+  function close() {
+    if (creating) return
+    onClose()
+  }
+
+  const opsName = `${ids}-op`
+  const errorId = `${ids}-ins-err`
+  const autoTipId = `${ids}-auto-tip`
+  const publishHelpId = `${ids}-pub-help`
+
+  return (
+    <Dialog.Root open onOpenChange={(open) => (open ? undefined : close())}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="bg-scrim fixed inset-0 z-[var(--z-modal)]" />
+        <Dialog.Content
+          onOpenAutoFocus={(event) => {
+            returnFocus.onOpenAutoFocus()
+            event.preventDefault()
+            focusFirstControl(body.current)
+          }}
+          onCloseAutoFocus={(event) => {
+            const job = queued.current
+            if (job && onFocusFallback) {
+              event.preventDefault()
+              onFocusFallback(job)
+              return
+            }
+            returnFocus.onCloseAutoFocus(event)
+          }}
+          // Radix makes the rest of the page inert but doesn't say so on the dialog.
+          aria-modal="true"
+          aria-describedby={undefined}
+          data-batch-wizard=""
+          className="bg-card border-bdr rounded-14 shadow-shd2 mobile:inset-0 mobile:h-full mobile:max-h-none mobile:w-full mobile:translate-x-0 mobile:translate-y-0 mobile:rounded-none mobile:border-0 mobile:shadow-none fixed top-1/2 left-1/2 z-[var(--z-modal)] flex max-h-[calc(100vh-32px)] w-[min(680px,calc(100%-32px))] -translate-x-1/2 -translate-y-1/2 flex-col border leading-[normal] outline-none"
+        >
+          <div className="border-bdr mobile:pt-[max(16px,env(safe-area-inset-top,0px))] flex items-center gap-3 border-b px-5 pt-4 pb-3">
+            <span className="text-acc flex">
+              <JobIcons.spark size={16} />
+            </span>
+            <Dialog.Title className="text-txt m-0 min-w-0 flex-1 text-[length:var(--fs-drawer)] leading-[normal] font-bold">
+              New batch AI job
+            </Dialog.Title>
+            <Dialog.Close asChild>
+              <Button
+                variant="icon"
+                size="icon"
+                aria-label="Close"
+                aria-disabled={creating || undefined}
+                className="aria-disabled:opacity-50"
+              >
+                <JobIcons.x size={15} />
+              </Button>
+            </Dialog.Close>
+          </div>
+
+          <StepBar step={step} />
+
+          <div
+            ref={body}
+            data-batch-step={step + 1}
+            className="flex min-h-0 flex-1 flex-col gap-3.5 overflow-auto px-5 py-4 *:shrink-0"
+          >
+            {step === 0 ? (
+              <>
+                <fieldset className="m-0 min-w-0 border-0 p-0">
+                  <legend className="sr-only">Operation</legend>
+                  <div className="grid grid-cols-2 gap-2 max-[560px]:grid-cols-1">
+                    {JOB_OPS.map((x) => {
+                      const fits = operationFits(x.id, selection)
+                      return (
+                        <label
+                          key={x.id}
+                          className="rounded-10 border-bdr bg-card has-checked:border-acc has-focus-visible:outline-acc flex cursor-pointer flex-col gap-[3px] border px-3 py-2.5 text-left leading-[normal] font-normal has-checked:shadow-[0_0_0_3px_var(--acc-l)] has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-55"
+                        >
+                          <input
+                            type="radio"
+                            name={opsName}
+                            value={x.id}
+                            checked={operation === x.id}
+                            disabled={!fits}
+                            onChange={() => pickOperation(x.id)}
+                            className="sr-only"
+                          />
+                          <b className="text-body text-txt font-semibold">{x.label}</b>
+                          <span className="text-meta text-sub leading-[1.45]">{x.d}</span>
+                        </label>
+                      )
+                    })}
+                  </div>
+                </fieldset>
+                {operation === 'custom' ? (
+                  <div>
+                    <label className={LABEL} htmlFor={`${ids}-field`}>
+                      Field
+                    </label>
+                    <select
+                      id={`${ids}-field`}
+                      className={`${FIELD} h-9`}
+                      value={field}
+                      onChange={(event) => setField(event.target.value as BatchAiTextField)}
+                    >
+                      {CUSTOM_FIELDS.map((f) => (
+                        <option key={f.id} value={f.id}>
+                          {f.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                ) : null}
+                <div>
+                  <label className={LABEL} htmlFor={`${ids}-ins`}>
+                    {operation === 'custom' ? 'Instruction' : 'Extra guidance'}
+                    {operation !== 'custom' ? (
+                      <span className="text-faint font-normal"> (optional)</span>
+                    ) : null}
+                  </label>
+                  <textarea
+                    id={`${ids}-ins`}
+                    ref={instructionRef}
+                    className={`${FIELD} block min-h-16 resize-y py-2 ${
+                      showInstructionError ? 'border-err focus:border-err' : ''
+                    }`}
+                    value={instruction}
+                    maxLength={INSTRUCTION_MAX}
+                    aria-invalid={showInstructionError || undefined}
+                    aria-describedby={showInstructionError ? errorId : undefined}
+                    onChange={(event) => setInstruction(event.target.value)}
+                    placeholder={
+                      operation === 'custom'
+                        ? 'e.g. Translate the excerpt to Spanish. Keep brand names in English.'
+                        : 'e.g. Plain and specific. Mention Hampton Roads only on local posts.'
+                    }
+                  />
+                  {showInstructionError ? (
+                    <p id={errorId} className="text-hint text-err m-0 mt-1">
+                      {instructionProblem}
+                    </p>
+                  ) : null}
+                  {/* 9px: the kit's textarea is inline, so its line adds 5px to the help's 4px margin. */}
+                  <div className={`${HELP} mt-[9px]`}>
+                    The AI also follows your brand voice from Settings → AI.
+                  </div>
+                </div>
+              </>
+            ) : null}
+
+            {step === 1 ? (
+              <>
+                <div className="grid grid-cols-2 gap-2.5 max-[560px]:grid-cols-1">
+                  <div className="min-w-0">
+                    <label className={LABEL} htmlFor={`${ids}-src`}>
+                      Content
+                    </label>
+                    <select
+                      id={`${ids}-src`}
+                      className={`${FIELD} h-9`}
+                      value={sourceId}
+                      disabled={onMedia || selection !== null}
+                      onChange={(event) => setCollection(event.target.value)}
+                    >
+                      {onMedia || selection ? (
+                        <option value={sourceId}>{sourceLabel}</option>
+                      ) : (
+                        sources.map((s) => (
+                          <option key={s.id} value={s.id}>
+                            {s.label}
+                          </option>
+                        ))
+                      )}
+                    </select>
+                  </div>
+                  <div className="min-w-0">
+                    <label className={LABEL} htmlFor={`${ids}-pub`}>
+                      Status
+                    </label>
+                    {/* Images have no publish state. */}
+                    <select
+                      id={`${ids}-pub`}
+                      className={`${FIELD} h-9`}
+                      value={statusFilter}
+                      disabled={onMedia}
+                      onChange={(event) =>
+                        setStatusFilter(event.target.value as 'published' | 'all')
+                      }
+                    >
+                      <option value="published">Published only</option>
+                      <option value="all">Published and drafts</option>
+                    </select>
+                  </div>
+                </div>
+                <OnlyWhere>
+                  {selection ? (
+                    <b className="text-txt">{selection.documentIds.length} selected</b>
+                  ) : (
+                    <>
+                      <span>
+                        {operation === 'custom'
+                          ? (CUSTOM_FIELDS.find((f) => f.id === field)?.label ?? op.field)
+                          : op.field}
+                        :
+                      </span>
+                      <b className="text-txt">{op.filter}</b>
+                    </>
+                  )}
+                </OnlyWhere>
+                <MatchBox
+                  estimate={current}
+                  sourceLabel={sourceLabel}
+                  problem={problem}
+                  onRetry={() => setEstimateRun((n) => n + 1)}
+                />
+              </>
+            ) : null}
+
+            {step === 2 && counted ? (
+              <>
+                <fieldset className="m-0 min-w-0 border-0 p-0">
+                  <legend className={LABEL}>Before anything changes</legend>
+                  <div className="flex flex-col gap-1.5">
+                    <label className={CARD}>
+                      <input
+                        type="radio"
+                        name={`${ids}-r`}
+                        className={RADIO}
+                        checked={review === 'review'}
+                        onChange={() => pickReview('review')}
+                      />
+                      <span>
+                        Review each change
+                        <em className="text-count text-acc ml-1.5 font-bold not-italic">
+                          RECOMMENDED
+                        </em>
+                        <small className={SMALL}>
+                          Suggestions wait in the job’s Review tab. Approve, edit or reject each
+                          one.
+                        </small>
+                      </span>
+                    </label>
+                    {/* The tooltip sits beside the label, so the disabled card's dimming doesn't reach it. */}
+                    <div className="group relative">
+                      <label className={CARD}>
+                        <input
+                          type="radio"
+                          name={`${ids}-r`}
+                          className={RADIO}
+                          checked={review === 'auto'}
+                          disabled={!admin}
+                          aria-describedby={admin ? undefined : autoTipId}
+                          onChange={() => pickReview('auto')}
+                        />
+                        <span>
+                          Apply automatically
+                          <small className={SMALL}>
+                            Admins only. Every change is saved to the document’s history, so it can
+                            be undone.
+                          </small>
+                        </span>
+                      </label>
+                      {admin ? null : (
+                        <span
+                          role="tooltip"
+                          id={autoTipId}
+                          className="rounded-8 bg-txt text-sb text-hint shadow-shd2 pointer-events-none invisible absolute bottom-[calc(100%+6px)] left-3 z-[1] px-2.5 py-2 leading-[1.55] opacity-0 transition-opacity group-hover:visible group-hover:opacity-100"
+                        >
+                          {AUTO_ADMIN_ONLY}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </fieldset>
+                <fieldset className="m-0 min-w-0 border-0 p-0">
+                  <legend className={LABEL}>
+                    {review === 'review' ? 'When a change is approved' : 'When a change is made'}
+                  </legend>
+                  <div className="flex flex-row flex-wrap gap-1.5">
+                    {(
+                      [
+                        ['draft', 'Save as draft', 'Someone publishes later'],
+                        ['publish', 'Publish right away', 'Goes live on the site'],
+                      ] as const
+                    ).map(([k, l, s]) => (
+                      <label key={k} className={`${CARD} flex-[1_1_200px]`}>
+                        <input
+                          type="radio"
+                          name={`${ids}-a`}
+                          className={RADIO}
+                          checked={onApprove === k}
+                          disabled={k === 'publish' && review === 'auto'}
+                          aria-describedby={
+                            k === 'publish' && review === 'auto' ? publishHelpId : undefined
+                          }
+                          onChange={() => setOnApprove(k)}
+                        />
+                        <span>
+                          {l}
+                          <small className={SMALL}>{s}</small>
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                  {review === 'auto' ? (
+                    <p id={publishHelpId} className={`${HELP} mt-1`}>
+                      {AUTO_KEEPS_STATUS}
+                    </p>
+                  ) : null}
+                </fieldset>
+                <EstimateTiles estimate={counted} />
+                <div>
+                  <div className="mb-1.5 flex items-center gap-2">
+                    <span className={`${LABEL_TEXT} flex-1`}>Preview on 3 documents</span>
+                    <BusyButton
+                      variant="secondary"
+                      size="sm"
+                      busy={shownPreview?.loading ?? false}
+                      onClick={() => void tryIt()}
+                    >
+                      {shownPreview?.loading
+                        ? 'Writing…'
+                        : shownPreview?.items || shownPreview?.error
+                          ? 'Try again'
+                          : 'Try it'}
+                    </BusyButton>
+                  </div>
+                  <PreviewList preview={shownPreview} operation={operation} />
+                </div>
+              </>
+            ) : null}
+          </div>
+
+          <div className="border-bdr mobile:pb-[calc(12px+env(safe-area-inset-bottom,0px))] flex flex-wrap items-center gap-2 border-t px-5 py-3">
+            {step > 0 ? (
+              <Button
+                variant="ghost"
+                aria-disabled={creating || undefined}
+                className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
+                onClick={() => (creating ? undefined : goTo(step - 1))}
+              >
+                Back
+              </Button>
+            ) : (
+              <Button variant="ghost" onClick={close}>
+                Cancel
+              </Button>
+            )}
+            {createError ? (
+              <p role="alert" className="text-meta text-err m-0 min-w-0 flex-1 text-right">
+                Couldn’t queue the job: {createError}
+              </p>
+            ) : (
+              <span className="flex-1" />
+            )}
+            {step < 2 ? (
+              <Button
+                aria-disabled={(step === 0 ? instructionProblem !== null : !canQueue) || undefined}
+                className="aria-disabled:opacity-50"
+                onClick={onContinue}
+              >
+                Continue
+              </Button>
+            ) : (
+              <BusyButton
+                busy={creating}
+                leftIcon={<JobIcons.spark size={13} />}
+                onClick={() => void queue()}
+              >
+                Queue {counted?.count ?? 0} documents
+              </BusyButton>
+            )}
+          </div>
+          <div role="status" aria-live="polite" className="sr-only">
+            {announce}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+/** Focus a step's first control: the checked radio of a group, else the first enabled field. */
+function focusFirstControl(root: HTMLElement | null) {
+  if (!root) return
+  const target = Array.from(
+    root.querySelectorAll<HTMLElement>('input, select, textarea, button'),
+  ).find((el) => {
+    if ((el as HTMLInputElement).disabled) return false
+    if (el instanceof HTMLInputElement && el.type === 'radio') return el.checked
+    return true
+  })
+  ;(target ?? root).focus()
+}
+
+/** `.nb-match`: the count, "one AI call per document", 3 sample rows and "and {n} more". */
+function MatchBox({
+  estimate,
+  sourceLabel,
+  problem,
+  onRetry,
+}: {
+  estimate: EstimateState | null
+  sourceLabel: string
+  problem: string | null
+  onRetry: () => void
+}) {
+  const value = estimate?.value ?? null
+  const row = 'border-bdr text-sm2 text-txt flex min-w-0 gap-2.5 border-t px-3 py-[7px]'
+  return (
+    <div className="rounded-10 border-bdr overflow-hidden border" aria-busy={estimate?.loading}>
+      <div className="bg-bg text-sm2 text-sub flex items-center gap-2 px-3 py-[9px]">
+        {value ? (
+          <>
+            <b className="text-figure text-txt">{value.count.toLocaleString('en-US')}</b>
+            <span>{sourceLabel.toLowerCase()} match</span>
+            {estimate?.loading ? <Spinner /> : null}
+            <span className="ml-auto text-right">one AI call per document</span>
+          </>
+        ) : estimate?.error ? (
+          <>
+            <span role="alert" className="text-err min-w-0 flex-1">
+              Couldn’t count the documents: {estimate.error}
+            </span>
+            <Button variant="secondary" size="sm" onClick={onRetry}>
+              Try again
+            </Button>
+          </>
+        ) : (
+          <span role="status" className="flex items-center gap-2">
+            {/* The count's 14px line, so the header keeps its height once it loads. */}
+            <b className="text-figure">
+              <Spinner />
+            </b>
+            Counting documents…
+          </span>
+        )}
+      </div>
+      {value && estimate?.error ? (
+        <div role="alert" className={`${row} text-err`}>
+          Couldn’t update the count: {estimate.error}
+          <Button variant="link" size="sm" className="ml-auto" onClick={onRetry}>
+            Try again
+          </Button>
+        </div>
+      ) : null}
+      {value && problem ? (
+        <div role="alert" className={`${row} text-err`}>
+          {problem}
+        </div>
+      ) : null}
+      {value && !problem
+        ? value.sample.map((s, i) => (
+            <div key={`${s.url}|${i}`} className={row}>
+              <span className="min-w-0 truncate">{s.title}</span>
+              {s.url ? (
+                <code className="text-faint text-micro ml-auto max-w-[55%] shrink-0 truncate font-mono">
+                  {s.url}
+                </code>
+              ) : null}
+            </div>
+          ))
+        : null}
+      {value && !problem && value.count > value.sample.length ? (
+        <div className={`${row} text-faint`}>
+          and {(value.count - value.sample.length).toLocaleString('en-US')} more
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+/** `.nb-est`: Documents, Estimated time and AI usage, then the pace and the limit's share. */
+function EstimateTiles({ estimate }: { estimate: BatchAiEstimate }) {
+  const tiles = estimateTiles(estimate)
+  const cell = 'rounded-10 border-bdr text-hint text-faint min-w-0 border px-3 py-[9px]'
+  const value = 'text-figure text-txt m-0 mt-px block'
+  return (
+    <div className="flex flex-col gap-2">
+      <dl className="m-0 grid grid-cols-3 gap-2 max-[560px]:grid-cols-1">
+        <div className={cell}>
+          <dt>Documents</dt>
+          <dd className={value}>{estimate.count.toLocaleString('en-US')}</dd>
+        </div>
+        <div className={cell}>
+          <dt>Estimated time</dt>
+          <dd className={value}>{tiles.minutes}</dd>
+        </div>
+        <div className={cell}>
+          <dt>AI usage</dt>
+          <dd className={value}>{tiles.tokens}</dd>
+        </div>
+      </dl>
+      <p className={`${HELP} m-0`}>{estimateNote(estimate)}</p>
+    </div>
+  )
+}
+
+/** `.nb-pv`: the sample outputs, or what to expect before the first try. */
+function PreviewList({
+  preview,
+  operation,
+}: {
+  preview: PreviewState | null
+  operation: BatchOperation
+}) {
+  if (preview?.error) {
+    return (
+      <p role="alert" className="text-meta text-err m-0">
+        Couldn’t write a preview: {preview.error}
+      </p>
+    )
+  }
+  if (preview?.items) {
+    if (preview.items.length === 0) {
+      return (
+        <p role="status" className={`${HELP} m-0`}>
+          The AI would leave the first 3 documents as they are.
+        </p>
+      )
+    }
+    return (
+      <ul role="list" className="m-0 flex list-none flex-col gap-1.5 p-0">
+        {preview.items.map((item, i) => (
+          <li
+            key={`${item.documentId}|${i}`}
+            className="rounded-9 border-bdr text-sm2 text-txt border px-3 py-[9px] leading-[1.5] break-words"
+          >
+            <small className="text-hint text-faint mb-0.5 block">{item.title}</small>
+            {operation === 'links' ? <LinkLine after={item.after} /> : item.after}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  if (preview?.loading) return null
+  return (
+    <p className={`${HELP} m-0`}>
+      See sample output before you queue the whole batch. Previews don’t change anything.
+    </p>
+  )
+}