@prenta/admin 2.6.1 → 2.8.0

package/src/views/Jobs.tsx

@@ -1,137 +1,428 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
-import { ListTodo } from 'lucide-react'
-import { cmsApi } from '../lib/api.js'
-import { EmptyState } from '../components/ui/EmptyState.js'
-import { Skeleton } from '../components/ui/Skeleton.js'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from '../components/ui/Button.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { Segmented } from '../components/ui/Segmented.js'
+import {
+  JOB_FILTERS,
+  JOB_TYPES,
+  canActOnJobs,
+  canRetryJob,
+  countJobs,
+  jobActions,
+  jobTotal,
+  matchJob,
+  retryPoint,
+  toJobRows,
+  type JobFilter,
+  type JobRow,
+  type JobViewer,
+} from '../lib/job-view.js'
+import {
+  JOBS_LIST_LIMIT,
+  cancelJob,
+  retryJob,
+  runJobNow,
+  type RunnableJobType,
+} from '../lib/jobs-service.js'
+import { BusyButton } from './Jobs/BusyButton.js'
+import { CancelJobDialog, staleRunning } from './Jobs/CancelJobDialog.js'
+import { focusJobDrawer, focusJobRow } from './Jobs/focus.js'
+import { JobsTable, type JobDrawerTab } from './Jobs/JobsTable.js'
+import { JobIcons } from './Jobs/icons.js'
+import { JobDrawer, type DrawerNotice } from './Jobs/JobDrawer.js'
+import { NewBatchJob } from './Jobs/NewBatchJob.js'
+import { usePageVisible, useJobsFeed } from './Jobs/useJobsFeed.js'
+import { WorkerStrip } from './Jobs/WorkerStrip.js'
 
 export interface JobsProps {
   onNavigate: (path: string) => void
+  /**
+   * The signed-in user's role. It decides which job actions show: viewers
+   * get none (the server refuses them anyway). Without one, none show.
+   */
+  role?: string | null
+  /** The signed-in user's id: a batch's Retry shows to the person who queued it. */
+  userId?: string | null
+  /** The CMS config: the batch wizard lists its page and post collections. */
+  config?: unknown
 }
 
-interface JobProgress {
-  completed: number
-  total: number
-  message?: string
-}
+const FILTER_OPTIONS = JOB_FILTERS.map(({ id, label }) => ({ id, label }))
 
-interface JobRow {
-  id: string
-  type: string
-  status: string
-  attempts: number
-  maxAttempts: number
-  lastError: string | null
-  progress: JobProgress
-  updatedAt: string
+/** What a run, retry or cancel came to, for a toast and the drawer's live region. */
+interface Outcome {
+  text: string
+  tone: 'info' | 'error'
 }
 
-function progressLabel(progress: JobProgress | undefined): string {
-  if (!progress) return '—'
-  if (progress.message) return progress.message
-  if (progress.total > 0) return `${progress.completed} of ${progress.total}`
-  return '—'
+/** `.jb-livebtn`: pauses and resumes the 5-second refresh. */
+function LiveButton({ live, onToggle }: { live: boolean; onToggle: () => void }) {
+  return (
+    <button
+      type="button"
+      aria-pressed={live}
+      title="Updates every 5 seconds"
+      onClick={onToggle}
+      className="rounded-8 border-bdr bg-card text-sub text-sm2 inline-flex h-[34px] cursor-pointer items-center gap-[7px] border px-[11px] font-semibold"
+    >
+      <i
+        aria-hidden="true"
+        className={`size-[7px] shrink-0 rounded-full ${
+          live ? 'bg-suc shadow-[0_0_0_3px_var(--suc-l)]' : 'bg-faint'
+        }`}
+      />
+      {live ? 'Live' : 'Paused'}
+    </button>
+  )
 }
 
-export function Jobs(_props: JobsProps) {
-  const [jobs, setJobs] = useState<JobRow[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+/**
+ * Settings → Jobs (jobs-view.jsx): the worker strip, failure and review
+ * alerts, filters with counts, and the newest 50 jobs, refreshed every 5
+ * seconds while Live is on and the tab is visible. Filters and counts work
+ * on the loaded rows.
+ *
+ * Opening a job sets `open` and shows its drawer (P-18). New batch AI job
+ * opens the wizard (P-20); a queued job is added at the top of the list.
+ */
+export function Jobs({ onNavigate, role = null, userId = null, config }: JobsProps) {
+  const [live, setLive] = useState(true)
+  const visible = usePageVisible()
+  const feed = useJobsFeed(live && visible)
+  const { upsert, reload } = feed
+  const [filter, setFilter] = useState<JobFilter>('all')
+  const [type, setType] = useState('all')
+  const [open, setOpen] = useState<{ id: string; tab: JobDrawerTab } | null>(null)
+  const [cancelTarget, setCancelTarget] = useState<JobRow | null>(null)
+  const cancelledId = useRef<string | null>(null)
+  const [wizard, setWizard] = useState(false)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+  /** Jobs with a retry request out, so a second click can't post another. */
+  const retrying = useRef(new Set<string>())
+  /** A row whose action button just went away; its open button takes focus if focus was lost. */
+  const refocus = useRef<string | null>(null)
+  /**
+   * The latest outcome, which the open drawer announces too: screen readers
+   * are kept inside the drawer (aria-modal), away from the toaster. Cleared
+   * whenever a drawer opens or closes, so a drawer never announces an older one.
+   */
+  const [notice, setNotice] = useState<DrawerNotice | null>(null)
+  /** A cancel's outcome, held until its dialog has gone (`onClosed`). */
+  const cancelOutcome = useRef<Outcome | null>(null)
+  const viewer = useMemo<JobViewer>(() => ({ role, userId }), [role, userId])
+
+  useEffect(() => {
+    const id = refocus.current
+    if (!id) return
+    refocus.current = null
+    // The drawer places focus after its own footer's actions.
+    if (open) return
+    const current = document.activeElement
+    if (current && current !== document.body && current.isConnected) return
+    focusJobRow(id)
+  })
+
+  const rows = useMemo(
+    () => toJobRows(feed.jobs, feed.fetchedAt, feed.worker),
+    [feed.jobs, feed.fetchedAt, feed.worker],
+  )
+  const scoped = type === 'all' ? rows : rows.filter((row) => row.type === type)
+  const list = scoped.filter((row) => matchJob(row, filter))
+  const counts = countJobs(scoped)
+  const dead = rows.filter((row) => row.state === 'dead')
+  const revJobs = rows.filter(
+    (row) =>
+      row.type === 'batch-ai' &&
+      row.pending > 0 &&
+      row.state !== 'cancelled' &&
+      row.state !== 'dead',
+  )
+  const revN = revJobs.reduce((sum, row) => sum + row.pending, 0)
+  const openJob = open ? feed.jobs.find((job) => job.id === open.id) : undefined
+  const openRow = open ? rows.find((row) => row.id === open.id) : undefined
+  const ready = feed.status === 'ready'
+
+  const openAt = (id: string, tab: JobDrawerTab = null) => {
+    setOpen({ id, tab })
+    setNotice(null)
+  }
 
-  const load = useCallback(async () => {
-    const res = await cmsApi<{ jobs?: JobRow[] }>('/jobs')
-    if (res.error) {
-      setError(res.error)
-      setLoading(false)
+  /** Toast an outcome, and have an open drawer announce it. */
+  function report(text: string, tone: Outcome['tone'] = 'info') {
+    if (tone === 'error') toast.error(text)
+    else toast(text)
+    setNotice((prev) => ({ text, n: (prev?.n ?? 0) + 1 }))
+  }
+
+  async function runNow(t: RunnableJobType) {
+    const res = await runJobNow(t)
+    if (!res.ok) {
+      report(`${JOB_TYPES[t].label} didn’t start: ${res.error}`, 'error')
       return
     }
-    setError(null)
-    setJobs(res.data?.jobs ?? [])
-    setLoading(false)
-  }, [])
+    const { job, reused } = res.value
+    upsert(job)
+    if (reused) {
+      openAt(job.id)
+      report(`${JOB_TYPES[t].label} is already ${job.status}. Reusing that job.`)
+    } else {
+      report(`${JOB_TYPES[t].label} queued. It starts on the next worker run.`)
+    }
+    void reload()
+  }
 
-  useEffect(() => {
-    void load()
-    const timer = window.setInterval(() => {
-      void load()
-    }, 5000)
-    return () => window.clearInterval(timer)
-  }, [load])
+  /**
+   * Retry a failed job from where it stopped, or ("Retry now") one waiting
+   * out a failed slice's backoff. A 409 means it was retried elsewhere or
+   * isn't waiting any more, so the list is read again before the answer shows.
+   */
+  async function retry(j: JobRow, now = false) {
+    if (retrying.current.has(j.id)) return
+    retrying.current.add(j.id)
+    setRetryingId(j.id)
+    try {
+      const res = await retryJob(j.id)
+      if (res.ok) {
+        refocus.current = j.id
+        upsert(res.value)
+        report(now ? 'Retrying on the next worker run' : `Retrying from ${retryPoint(j)}`)
+        void reload()
+        return
+      }
+      const message = `“${j.title}” wasn’t retried: ${res.error}`
+      if (res.status === 409) await reload()
+      report(message, res.status === 409 ? 'info' : 'error')
+    } finally {
+      retrying.current.delete(j.id)
+      setRetryingId(null)
+    }
+  }
+
+  function askCancel(row: JobRow) {
+    cancelledId.current = row.id
+    setCancelTarget(row)
+  }
+
+  /**
+   * The dialog's Cancel job. A cancel that lands after the job ended comes
+   * back as the job, unchanged. A 409 (it ended, or was cancelled, first) is
+   * shown once the list has been read again, so the dialog closes onto it.
+   */
+  async function confirmCancel(j: JobRow) {
+    const res = await cancelJob(j.id)
+    if (!res.ok) {
+      const text = `“${j.title}” wasn’t cancelled: ${res.error}`
+      if (res.status === 409) await reload()
+      cancelOutcome.current = { text, tone: res.status === 409 ? 'info' : 'error' }
+      return
+    }
+    const job = res.value
+    upsert(job)
+    let text: string
+    if (job.status === 'cancelled') text = 'Job cancelled'
+    else if (staleRunning(j)) text = 'Stopping on the next worker run'
+    else if (job.status === 'queued' || job.status === 'running') text = 'Stopping after this slice'
+    else text = `“${j.title}” had already finished.`
+    cancelOutcome.current = { text, tone: 'info' }
+    void reload()
+  }
+
+  const deadFirst = dead[0]
+  const firstReview = revJobs[0]
+  // The dialog follows the job as the list refreshes, so its copy fits the state it's in.
+  const cancelRow = cancelTarget
+    ? (rows.find((row) => row.id === cancelTarget.id) ?? cancelTarget)
+    : null
+  const deadCause = deadFirst?.error?.replace(/\.\s*$/, '')
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div className="flex items-center justify-between gap-4">
-        <div>
-          <h1 className="text-foreground text-2xl font-medium">Jobs</h1>
-          <p className="text-muted-foreground text-sm">
-            SEO audits, content health, and batch AI. Failed jobs retry, then land in the dead
-            letter.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => void load()}
-          className="bg-primary text-primary-foreground focus-visible:ring-ring inline-flex min-h-11 items-center rounded-md px-4 py-2 text-base font-medium hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none"
-        >
-          Refresh
-        </button>
-      </div>
+    <div className="mobile:px-3.5 mobile:pt-4 mobile:pb-[100px] flex min-w-0 flex-col gap-4 px-7 pt-[22px] pb-24 leading-[normal]">
+      <PageHeader
+        flush
+        title="Jobs"
+        subtitle="Background work that’s too big to finish in one request: SEO scans, content health checks and batch AI changes. Long jobs run one slice a minute and pick up where they left off."
+        actions={
+          <>
+            <LiveButton live={live} onToggle={() => setLive((value) => !value)} />
+            {/* Like Run now: the server refuses a batch to anyone else. */}
+            {canActOnJobs(viewer) ? (
+              <Button
+                data-jobs-new=""
+                leftIcon={<JobIcons.spark size={14} />}
+                onClick={() => setWizard(true)}
+              >
+                New batch AI job
+              </Button>
+            ) : null}
+          </>
+        }
+      />
 
-      {loading ? <Skeleton lines={6} /> : null}
+      <WorkerStrip
+        worker={feed.worker}
+        workerError={feed.workerError}
+        skewMs={feed.skewMs}
+        loading={feed.status === 'loading'}
+        rows={rows}
+        ticking={live && visible}
+        canRun={canActOnJobs(viewer)}
+        onRunNow={runNow}
+      />
 
-      {!loading && error ? (
+      {deadFirst ? (
         <div
-          className="border-border bg-card flex flex-col gap-3 rounded-lg border p-6"
           role="alert"
+          className="rounded-10 bg-err-l text-body text-err flex flex-wrap items-center gap-3 px-3.5 py-[11px]"
         >
-          <p className="text-foreground text-base">{error}</p>
-          <button
-            type="button"
-            onClick={() => void load()}
-            className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 w-fit items-center rounded-md border px-4 py-2 text-base font-medium focus-visible:ring-2 focus-visible:outline-none"
-          >
-            Try again
-          </button>
+          <JobIcons.alert size={16} />
+          <span className="text-txt min-w-0 flex-[1_1_260px]">
+            <b className="font-bold">
+              {dead.length} job{dead.length > 1 ? 's' : ''} failed after {deadFirst.maxAttempts}{' '}
+              attempts.
+            </b>{' '}
+            {deadCause ? `${deadFirst.title}: ${deadCause}.` : `${deadFirst.title} stopped.`}{' '}
+            Finished work is kept.
+          </span>
+          <Button variant="secondary" size="sm" onClick={() => openAt(deadFirst.id, 'overview')}>
+            See why
+          </Button>
+          {canRetryJob(deadFirst, viewer) ? (
+            <BusyButton
+              size="sm"
+              leftIcon={<JobIcons.retry size={12} />}
+              busy={retryingId === deadFirst.id}
+              onClick={() => void retry(deadFirst)}
+            >
+              Retry
+            </BusyButton>
+          ) : null}
         </div>
       ) : null}
 
-      {!loading && !error && jobs.length === 0 ? (
-        <EmptyState
-          icon={<ListTodo size={24} aria-hidden />}
-          title="No jobs yet"
-          description="Scheduled SEO and content-health scans show up here with their progress."
-        />
+      {revN > 0 && firstReview ? (
+        <div className="rounded-10 bg-acc-l text-body text-acc flex flex-wrap items-center gap-3 px-3.5 py-[11px]">
+          <JobIcons.spark size={16} />
+          <span className="text-txt min-w-0 flex-[1_1_260px]">
+            <b className="font-bold">
+              {revN} AI {revN === 1 ? 'change is' : 'changes are'} waiting for review
+            </b>{' '}
+            across {revJobs.length} job{revJobs.length > 1 ? 's' : ''}. Nothing is applied until
+            someone approves it.
+          </span>
+          <Button size="sm" onClick={() => openAt(firstReview.id, 'review')}>
+            Review changes
+          </Button>
+        </div>
       ) : null}
 
-      {!loading && !error && jobs.length > 0 ? (
-        <div className="border-border overflow-x-auto rounded-lg border">
-          <table className="w-full text-left text-base" aria-label="Background jobs">
-            <thead className="bg-muted text-foreground">
-              <tr>
-                <th className="px-4 py-3 font-medium">Type</th>
-                <th className="px-4 py-3 font-medium">Status</th>
-                <th className="px-4 py-3 font-medium">Attempts</th>
-                <th className="px-4 py-3 font-medium">Progress</th>
-                <th className="px-4 py-3 font-medium">Last error</th>
-              </tr>
-            </thead>
-            <tbody>
-              {jobs.map((job) => (
-                <tr key={job.id} className="border-border border-t">
-                  <td className="text-foreground px-4 py-3">{job.type}</td>
-                  <td className="text-foreground px-4 py-3">{job.status}</td>
-                  <td className="text-muted-foreground px-4 py-3">
-                    {job.attempts}/{job.maxAttempts}
-                  </td>
-                  <td className="text-foreground px-4 py-3">{progressLabel(job.progress)}</td>
-                  <td className="text-muted-foreground px-4 py-3">{job.lastError ?? '—'}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+      <div data-jobs-filters="" className="flex flex-wrap items-center gap-2">
+        <Segmented
+          options={FILTER_OPTIONS}
+          value={filter}
+          onChange={(id) => setFilter(id as JobFilter)}
+          label="Filter jobs"
+          counts={ready ? counts : undefined}
+        />
+        <select
+          aria-label="Job type"
+          value={type}
+          onChange={(event) => setType(event.target.value)}
+          className="rounded-8 border-bdr bg-card text-txt text-sm2 h-8 border px-[9px]"
+        >
+          <option value="all">All types</option>
+          {Object.entries(JOB_TYPES).map(([key, info]) => (
+            <option key={key} value={key}>
+              {info.label}
+            </option>
+          ))}
+        </select>
+        <span
+          role="status"
+          className={`text-meta mobile:ml-0 mobile:basis-full ml-auto ${
+            ready && feed.error ? 'text-err' : 'text-faint'
+          }`}
+        >
+          {ready && feed.error
+            ? `Couldn’t refresh: ${feed.error}. Showing the last update.`
+            : `Latest ${JOBS_LIST_LIMIT} jobs · updates every 5 seconds`}
+        </span>
+      </div>
+
+      <JobsTable
+        rows={list}
+        filter={filter}
+        selectedId={open?.id ?? null}
+        status={feed.status}
+        error={feed.error}
+        retryingId={retryingId}
+        viewer={viewer}
+        onOpen={openAt}
+        onCancel={askCancel}
+        onRetry={(row) => void retry(row)}
+        onReload={reload}
+      />
+
+      {open && openJob && openRow ? (
+        <JobDrawer
+          key={open.id}
+          job={openJob}
+          row={openRow}
+          tab={open.tab}
+          now={feed.fetchedAt}
+          worker={feed.worker}
+          actions={jobActions(openRow, viewer)}
+          retrying={retryingId === openRow.id}
+          notice={notice}
+          onCancel={() => askCancel(openRow)}
+          onRetry={(now) => retry(openRow, now)}
+          onClose={() => {
+            setOpen(null)
+            setNotice(null)
+          }}
+          onReload={() => void reload()}
+          onNavigate={onNavigate}
+        />
+      ) : null}
+      {wizard ? (
+        <NewBatchJob
+          role={role}
+          config={config}
+          onClose={() => setWizard(false)}
+          onQueued={(job) => {
+            upsert(job)
+            setWizard(false)
+            setFilter('all')
+            setType('all')
+            toast(`“${job.title}” queued · ${jobTotal(job)} documents`)
+            void reload()
+          }}
+          onFocusFallback={(job) =>
+            job
+              ? focusJobRow(job.id)
+              : document.querySelector<HTMLElement>('[data-jobs-new]')?.focus()
+          }
+        />
       ) : null}
+      <CancelJobDialog
+        job={cancelRow}
+        onClose={() => setCancelTarget(null)}
+        onConfirm={confirmCancel}
+        onFocusFallback={() => {
+          // Opened from the drawer, whose Cancel job went with the cancel.
+          if (open) focusJobDrawer()
+          else if (cancelledId.current) focusJobRow(cancelledId.current)
+        }}
+        onClosed={() => {
+          // Screen readers are kept inside the dialog while it's open, so a
+          // toast or the drawer's announcement then could go unread.
+          const outcome = cancelOutcome.current
+          cancelOutcome.current = null
+          if (outcome) report(outcome.text, outcome.tone)
+        }}
+      />
     </div>
   )
 }