@prenta/admin 2.6.1 → 2.7.0

package/src/views/Jobs/JobDrawer.tsx

@@ -0,0 +1,556 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { toast } from 'sonner'
+import type { Job, JobReviewItem, JobWorkerStatus } from '@prenta/core'
+import { Button } from '../../components/ui/Button.js'
+import { UnderlineTabPanel, UnderlineTabs } from '../../components/ui/UnderlineTabs.js'
+import {
+  approveAllMessage,
+  approveAllStoppedMessage,
+  detailsJson,
+  drawerTabs,
+  type DrawerTab,
+} from '../../lib/job-drawer.js'
+import { active, view, type JobRow } from '../../lib/job-view.js'
+import {
+  approveAllReviewItems,
+  decideReviewItem,
+  reviewConflict,
+  type OnApprove,
+  type ReviewAction,
+  type ReviewConflict,
+} from '../../lib/jobs-service.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+import { Pill, TypeTile } from './atoms.js'
+import { BusyButton } from './BusyButton.js'
+import { DrawerActivity } from './DrawerActivity.js'
+import { DrawerOverview } from './DrawerOverview.js'
+import { DrawerResults } from './DrawerResults.js'
+import { DrawerReview, type ReviewItemState } from './DrawerReview.js'
+import { focusJobRow, useReturnFocus } from './focus.js'
+import { JobIcons } from './icons.js'
+import type { JobDrawerTab } from './JobsTable.js'
+import { useJobDetail, useJobEvents } from './useJobDetail.js'
+import { useReviewItems } from './useReviewItems.js'
+
+const NO_COUNTS = { pending: 0, approved: 0, rejected: 0 }
+/** Approve-all answers within 20 seconds; this many calls is the most one press makes. */
+const APPROVE_ALL_ROUNDS = 10
+/** Decisions in a row refresh the list (for its review counts) once they pause. */
+const RELOAD_DELAY_MS = 400
+/**
+ * After Review opens, "Approve all" waits this long before it acts, so the
+ * second click of a double-click, or a second Enter, on the button that
+ * opened Review doesn't approve changes nobody has seen.
+ */
+const APPROVE_ALL_ARM_MS = 600
+
+/**
+ * Refusals of an edited approval that the server's approve-all leaves alone
+ * as well, so it can't put the AI's text in place of the edit: a published
+ * document's change without Publish (it skips those too), and a change that
+ * was decided elsewhere or is gone (no longer pending).
+ */
+const SKIPPED_BY_APPROVE_ALL: ReadonlySet<ReviewConflict | null> = new Set<ReviewConflict>([
+  'published',
+  'decided',
+  'gone',
+])
+
+type FocusTarget = 'undo' | 'approve' | 'edit' | 'text'
+
+interface FocusMove {
+  /** The change whose control takes focus. */
+  id: string
+  target: FocusTarget
+  /** What had focus when the action began. */
+  from: Element | null
+  /** When the target doesn't show (decided elsewhere, or gone): the change, else the panel. */
+  fallback?: boolean
+}
+
+export interface JobDrawerProps {
+  /** The list's copy of the job, read again every 5 seconds while Live is on. */
+  job: Job
+  /** The list's row for it: the state, countdown and labels the list shows. */
+  row: JobRow
+  /** The tab a control asked for: Review from the Review buttons, Overview from "See why". */
+  tab: JobDrawerTab
+  /** When the list was read, on the server's clock. Relative times count from it. */
+  now: number
+  worker: JobWorkerStatus | null
+  onClose: () => void
+  /** Read the list again: a decision changes the job's review counts. */
+  onReload: () => void
+  onNavigate: (path: string) => void
+}
+
+function without<T>(record: Record<string, T>, key: string): Record<string, T> {
+  const next = { ...record }
+  delete next[key]
+  return next
+}
+
+/** "Copy" on the last error. */
+async function copyText(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * The job detail drawer (jobs-drawer.jsx, JOBS.md "Drawer"): 620px from the
+ * right, a full-screen sheet on mobile. Radix gives it `role="dialog"`,
+ * `aria-modal`, the focus trap, Esc and the backdrop close; focus goes back to
+ * the control that opened it, or to the job's row.
+ *
+ * It reads `GET /jobs/:id` (results, the full error) and, per tab, the
+ * events and the review changes, each again only when the list's copy of the
+ * job changes. The Review badge and footer use the job's own counts, never
+ * the number of changes loaded. Cancel and retry in the footer are P-19.
+ */
+export function JobDrawer({
+  job,
+  row,
+  tab,
+  now,
+  worker,
+  onClose,
+  onReload,
+  onNavigate,
+}: JobDrawerProps) {
+  const batch = job.type === 'batch-ai'
+  const counts = job.review ?? NO_COUNTS
+  const total = counts.pending + counts.approved + counts.rejected
+  const payload = job.payload as { onApprove?: unknown; statusFilter?: unknown }
+  const onApprove: OnApprove = payload.onApprove === 'publish' ? 'publish' : 'draft'
+
+  const [current, setCurrent] = useState<DrawerTab>(() =>
+    tab && drawerTabs(job.type, true).some((entry) => entry.id === tab)
+      ? tab
+      : view(row).k === 'review'
+        ? 'review'
+        : 'overview',
+  )
+  const detail = useJobDetail(job.id, job.updatedAt)
+  const review = useReviewItems(job.id, {
+    enabled: batch,
+    watching: current === 'review',
+    version: `${job.updatedAt}|${total}`,
+  })
+  const canReview = batch && review.status !== 'denied'
+  const tabs = drawerTabs(job.type, canReview)
+  const shown = tabs.some((entry) => entry.id === current) ? current : 'overview'
+  const events = useJobEvents(job.id, job.updatedAt, shown === 'activity')
+
+  // The detail answers for one version of the job; a newer list copy wins until it's read again.
+  const fresh = detail.detail && detail.detail.updatedAt === job.updatedAt ? detail.detail : null
+  const shownJob = fresh ?? job
+  const staleLock = row.status === 'running' && row.state !== 'running'
+  const error = !row.error ? null : staleLock ? row.error : (fresh?.lastError ?? row.error)
+
+  const content = useRef<HTMLDivElement>(null)
+  const returnFocus = useReturnFocus(() => focusJobRow(job.id))
+  const [announcement, setAnnouncement] = useState({ text: '', n: 0 })
+  const announce = useCallback(
+    (text: string) => setAnnouncement((prev) => ({ text, n: prev.n + 1 })),
+    [],
+  )
+
+  const [itemState, setItemState] = useState<Record<string, ReviewItemState>>({})
+  const [drafts, setDrafts] = useState<Record<string, string>>({})
+  /** Documents known to be published or not, from decisions; keyed by document id. */
+  const [published, setPublished] = useState<Record<string, boolean>>({})
+  const [approvingAll, setApprovingAll] = useState(false)
+  const focusAfter = useRef<FocusMove | null>(null)
+  /** Bumped so the focus effect runs for a move asked for after an await. */
+  const [, setFocusTick] = useState(0)
+  const afterApproveAll = useRef(false)
+  /** "Approve all" ignores activations before this time (`APPROVE_ALL_ARM_MS`). */
+  const approveAllFrom = useRef(0)
+  /** A key held on the footer button is repeating, and each repeat clicks it. */
+  const keyRepeating = useRef(false)
+  const reloadTimer = useRef<number | null>(null)
+  const reloadList = useRef(onReload)
+  useEffect(() => {
+    reloadList.current = onReload
+  }, [onReload])
+
+  // Closing right after a decision still refreshes the list's counts.
+  useEffect(
+    () => () => {
+      if (reloadTimer.current === null) return
+      window.clearTimeout(reloadTimer.current)
+      reloadTimer.current = null
+      reloadList.current()
+    },
+    [],
+  )
+
+  const scheduleReload = useCallback(() => {
+    if (reloadTimer.current !== null) window.clearTimeout(reloadTimer.current)
+    reloadTimer.current = window.setTimeout(() => {
+      reloadTimer.current = null
+      reloadList.current()
+    }, RELOAD_DELAY_MS)
+  }, [])
+
+  const showTab = (next: DrawerTab) => {
+    // A focus move waiting for a change on the old tab no longer applies.
+    focusAfter.current = null
+    if (next === 'review') approveAllFrom.current = Date.now() + APPROVE_ALL_ARM_MS
+    setCurrent(next)
+  }
+
+  // However Review opens (its tab, a list's Review button), a click or Enter
+  // meant for what was there before can't approve everything in it.
+  useEffect(() => {
+    if (shown === 'review') approveAllFrom.current = Date.now() + APPROVE_ALL_ARM_MS
+  }, [shown])
+
+  const moveFocus = (move: FocusMove) => {
+    focusAfter.current = move
+    setFocusTick((tick) => tick + 1)
+  }
+
+  // After a decision, focus moves to the control that took the place of the
+  // one pressed: Undo after a decision, Approve after an undo. It moves only
+  // if focus is still where the action began, inside that change, or lost;
+  // someone who has moved on to another change keeps their place.
+  useEffect(() => {
+    const want = focusAfter.current
+    if (!want) return
+    const root = content.current
+    const id = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(want.id) : want.id
+    const card = root?.querySelector<HTMLElement>(`[data-review-item="${id}"]`) ?? null
+    let target = card?.querySelector<HTMLElement>(`[data-review-focus="${want.target}"]`) ?? null
+    if (!target && want.fallback) {
+      target = card ?? root?.querySelector<HTMLElement>('[role="tabpanel"]') ?? null
+    }
+    if (!target) return
+    focusAfter.current = null
+    const focused = document.activeElement
+    const free =
+      !focused ||
+      focused === document.body ||
+      focused === root ||
+      focused === want.from ||
+      (card?.contains(focused) ?? false)
+    if (!free) return
+    target.focus()
+    if (target instanceof HTMLTextAreaElement) {
+      target.setSelectionRange(target.value.length, target.value.length)
+    }
+  })
+
+  // When approve-all leaves nothing to review its button goes away; focus
+  // moves to the changes rather than staying on the dialog itself.
+  useEffect(() => {
+    if (!afterApproveAll.current || counts.pending > 0) return
+    afterApproveAll.current = false
+    const timer = window.setTimeout(() => {
+      const focused = document.activeElement
+      if (focused && focused !== document.body && focused !== content.current) return
+      content.current?.querySelector<HTMLElement>('[role="tabpanel"]')?.focus()
+    }, 0)
+    return () => window.clearTimeout(timer)
+  }, [counts.pending])
+
+  const patchItem = (id: string, next: ReviewItemState) =>
+    setItemState((prev) => ({ ...prev, [id]: next }))
+
+  /**
+   * Approve, reject or undo one change, and say whether it went through.
+   * `quiet` (approve-all) neither moves focus nor announces: the summary does.
+   */
+  async function decide(
+    item: JobReviewItem,
+    decision: ReviewAction,
+    options: { quiet?: boolean } = {},
+  ): Promise<{ ok: true } | { ok: false; conflict: ReviewConflict | null; error: string }> {
+    const from = document.activeElement
+    const title = item.documentTitle
+    patchItem(item.id, { busy: decision.action })
+    const res = await decideReviewItem(job.id, item.id, decision)
+    if (!res.ok) {
+      const conflict = reviewConflict(res.status, res.error)
+      // Approving without Publish leaves a published document's change in review.
+      if (conflict === 'published') setPublished((prev) => ({ ...prev, [item.documentId]: true }))
+      // A published document's change staying in review, and a change someone else
+      // decided (the re-read below shows how), aren't errors in what was pressed.
+      patchItem(item.id, {
+        note: {
+          tone: conflict === 'published' || conflict === 'decided' ? 'info' : 'err',
+          text: res.error,
+        },
+      })
+      // The card's note appears with its text, which screen readers don't
+      // read out; the drawer's live region does.
+      if (!options.quiet) announce(`${title}: ${res.error}`)
+      // Someone else decided it, or it's gone: show the changes and counts as they are now.
+      if (conflict === 'decided' || conflict === 'gone') {
+        scheduleReload()
+        await review.refresh()
+        // Its buttons were replaced (by Undo) or it went: focus follows, or
+        // lands on the change itself, or on the panel.
+        if (!options.quiet) moveFocus({ id: item.id, target: 'undo', from, fallback: true })
+      }
+      return { ok: false, conflict, error: res.error }
+    }
+    const { item: next, documentStatus, notice } = res.value
+    if (documentStatus) {
+      setPublished((prev) => ({ ...prev, [item.documentId]: documentStatus === 'PUBLISHED' }))
+    }
+    review.replace(next)
+    if (decision.action === 'approve') setDrafts((prev) => without(prev, item.id))
+    patchItem(item.id, notice ? { note: { tone: 'info', text: notice } } : {})
+    if (!options.quiet) {
+      moveFocus({ id: item.id, target: next.status === 'pending' ? 'approve' : 'undo', from })
+      const outcome =
+        decision.action === 'undo'
+          ? `${title} is back in review.`
+          : next.status === 'approved'
+            ? `Approved: ${title}.`
+            : `Rejected: ${title}.`
+      announce(notice ? `${outcome} ${notice}` : outcome)
+    }
+    scheduleReload()
+    return { ok: true }
+  }
+
+  async function approveAll() {
+    setApprovingAll(true)
+    let approved = 0
+    // An edit still open is approved as edited, not with the AI's text: those
+    // go first, one by one, and one that's refused keeps its edit and note.
+    // The server's approve-all would then apply the AI's text to any of them
+    // still pending, so it doesn't run after a refusal it wouldn't skip too.
+    const refused: string[] = []
+    let editAtRisk = false
+    for (const entry of review.items) {
+      const draft = drafts[entry.id]
+      if (draft === undefined || entry.status !== 'pending') continue
+      const outcome = await decide(entry, { action: 'approve', after: draft }, { quiet: true })
+      if (outcome.ok) {
+        approved++
+        continue
+      }
+      refused.push(`${entry.documentTitle}: ${outcome.error}`)
+      if (!SKIPPED_BY_APPROVE_ALL.has(outcome.conflict)) editAtRisk = true
+    }
+    if (editAtRisk) {
+      setApprovingAll(false)
+      reloadList.current()
+      const message = approveAllStoppedMessage(approved, refused.length)
+      toast.error(message.title, { description: message.description })
+      announce([`${message.title}.`, message.description, ...refused].join(' '))
+      return
+    }
+    let remaining = Math.max(0, counts.pending - approved)
+    let failure: string | null = null
+    for (let round = 0; round < APPROVE_ALL_ROUNDS; round++) {
+      const res = await approveAllReviewItems(job.id)
+      if (!res.ok) {
+        failure = res.error
+        break
+      }
+      approved += res.value.approved
+      remaining = res.value.remaining
+      // Only skipped changes are left: another call would skip them again.
+      if (res.value.remaining <= res.value.skipped) break
+    }
+    setApprovingAll(false)
+    // Its button goes away once the list reads 0 pending.
+    afterApproveAll.current = failure === null && remaining === 0
+    review.refresh()
+    reloadList.current()
+    if (failure !== null && approved === 0) {
+      toast.error(`Changes weren’t approved: ${failure}`)
+      announce(`Changes weren’t approved: ${failure}`)
+      return
+    }
+    const message = approveAllMessage({ approved, remaining }, onApprove)
+    toast(message.title, message.description ? { description: message.description } : undefined)
+    announce([`${message.title}.`, message.description, ...refused].filter(Boolean).join(' '))
+  }
+
+  const isPublished = useCallback(
+    (documentId: string) => published[documentId] ?? payload.statusFilter === 'published',
+    [published, payload.statusFilter],
+  )
+
+  const idBase = `job-drawer-${job.id}`
+  const v = view(row)
+
+  return (
+    <Dialog.Root open onOpenChange={(open) => (open ? undefined : onClose())}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="bg-scrim-drawer fixed inset-0 z-[var(--z-drawer-scrim)]" />
+        <Dialog.Content
+          {...returnFocus}
+          ref={content}
+          // Radix makes the rest of the page inert but doesn't say so on the dialog.
+          aria-modal="true"
+          data-job-drawer=""
+          className="bg-card border-bdr shadow-shd2 mobile:inset-0 mobile:w-full mobile:border-l-0 mobile:shadow-none fixed inset-y-0 right-0 z-[var(--z-drawer)] flex w-[min(var(--jobs-drawer-w),100vw)] flex-col border-l leading-[normal] outline-none"
+        >
+          <div className="border-bdr mobile:pt-[max(16px,env(safe-area-inset-top,0px))] flex flex-col gap-3 border-b px-[18px] pt-4">
+            <div className="flex items-start gap-3">
+              <TypeTile type={job.type} size={36} />
+              <div className="min-w-0 flex-1">
+                <Dialog.Title className="text-drawer text-txt m-0 leading-[normal] break-words">
+                  {job.title}
+                </Dialog.Title>
+                <Dialog.Description className="text-meta text-faint m-0 mt-0.5 break-words">
+                  {job.scope} · <code className="text-hint font-mono">{job.id}</code>
+                </Dialog.Description>
+              </div>
+              <Pill v={v} />
+              <Dialog.Close asChild>
+                <Button variant="icon" size="icon" aria-label="Close">
+                  <JobIcons.x size={15} />
+                </Button>
+              </Dialog.Close>
+            </div>
+            <UnderlineTabs
+              variant="drawer"
+              tabs={tabs.map((entry) => ({
+                id: entry.id,
+                label: entry.label,
+                badge:
+                  entry.id === 'review' && counts.pending > 0 ? (
+                    <b className="rounded-pill bg-acc text-acc-on text-count px-1.5 font-bold">
+                      {counts.pending}
+                      <span className="sr-only"> waiting</span>
+                    </b>
+                  ) : undefined,
+              }))}
+              value={shown}
+              onChange={(id) => showTab(id as DrawerTab)}
+              label="Job details"
+              idBase={idBase}
+            />
+          </div>
+
+          <UnderlineTabPanel
+            key={shown}
+            idBase={idBase}
+            tabId={shown}
+            className="flex min-h-0 flex-1 flex-col gap-3.5 overflow-auto px-[18px] pt-4 pb-6 *:shrink-0"
+          >
+            {shown === 'overview' ? (
+              <DrawerOverview
+                row={row}
+                job={shownJob}
+                error={error}
+                now={now}
+                worker={worker}
+                onCopyError={(text) => {
+                  void copyText(text).then((copied) => {
+                    if (copied) toast('Error copied')
+                    else toast.error('Couldn’t copy the error. Select it and copy it instead.')
+                    announce(copied ? 'Error copied' : 'Couldn’t copy the error.')
+                  })
+                }}
+              />
+            ) : null}
+            {shown === 'review' ? (
+              <DrawerReview
+                review={review}
+                counts={counts}
+                running={active(row)}
+                cancelled={row.state === 'cancelled'}
+                onApprove={onApprove}
+                itemState={itemState}
+                drafts={drafts}
+                isPublished={isPublished}
+                locked={approvingAll}
+                onDecide={(item, decision) => void decide(item, decision)}
+                onEdit={(item) => {
+                  setDrafts((prev) => ({ ...prev, [item.id]: item.editedAfter ?? item.after }))
+                  moveFocus({ id: item.id, target: 'text', from: document.activeElement })
+                }}
+                onDraft={(id, text) => setDrafts((prev) => ({ ...prev, [id]: text }))}
+                onCancelEdit={(id) => {
+                  setDrafts((prev) => without(prev, id))
+                  moveFocus({ id, target: 'edit', from: document.activeElement })
+                }}
+              />
+            ) : null}
+            {shown === 'results' ? (
+              <DrawerResults
+                type={job.type}
+                results={detail.detail?.results}
+                loaded={detail.detail !== null}
+                error={detail.error}
+                summary={shownJob.summary}
+                scanned={row.total}
+                now={now}
+                onNavigate={onNavigate}
+              />
+            ) : null}
+            {shown === 'activity' ? (
+              <DrawerActivity events={events} job={shownJob} row={row} now={now} />
+            ) : null}
+            {shown === 'details' ? (
+              <>
+                <p className="text-meta text-sub m-0 leading-[1.5]">
+                  The raw job row, for developers. Read only.
+                </p>
+                <pre
+                  tabIndex={0}
+                  aria-label="Job row as JSON"
+                  className="bg-code-bg text-code-txt rounded-10 text-hint m-0 overflow-auto px-3.5 py-3 font-mono leading-[1.6] whitespace-pre"
+                >
+                  {detailsJson(shownJob)}
+                </pre>
+              </>
+            ) : null}
+          </UnderlineTabPanel>
+
+          <div className="border-bdr mobile:pb-[calc(12px+env(safe-area-inset-bottom,0px))] flex flex-wrap items-center gap-2 border-t px-[18px] py-3">
+            <span className="flex-1" />
+            {/* One button for both, so it keeps focus when it turns into Approve all. */}
+            {canReview && counts.pending > 0 ? (
+              <BusyButton
+                leftIcon={shown === 'review' ? <JobIcons.check size={13} /> : undefined}
+                busy={approvingAll}
+                aria-disabled={shown === 'review' && review.status !== 'ready' ? true : undefined}
+                onKeyDown={(event) => {
+                  keyRepeating.current = event.repeat
+                }}
+                onKeyUp={() => {
+                  keyRepeating.current = false
+                }}
+                onBlur={() => {
+                  keyRepeating.current = false
+                }}
+                onClick={() => {
+                  if (shown !== 'review') return showTab('review')
+                  // Not on a held key's repeats, not right after this button
+                  // opened Review, and not before the changes are on screen.
+                  if (keyRepeating.current || Date.now() < approveAllFrom.current) return
+                  if (review.status !== 'ready') return
+                  void approveAll()
+                }}
+              >
+                {shown === 'review'
+                  ? `Approve all ${counts.pending}`
+                  : `Review ${counts.pending} change${counts.pending === 1 ? '' : 's'}`}
+              </BusyButton>
+            ) : null}
+          </div>
+
+          <div role="status" aria-live="polite" className="sr-only">
+            <span key={announcement.n}>{announcement.text}</span>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}