@prenta/admin 2.6.1 → 2.7.0

package/src/views/Jobs/JobsTable.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '../../components/ui/Button.js'
+import { Card } from '../../components/ui/Card.js'
+import { Skeleton } from '../../components/ui/Skeleton.js'
+import {
+  active,
+  hasReviewAction,
+  view,
+  type JobFilter,
+  type JobRow as JobRowModel,
+} from '../../lib/job-view.js'
+import { Bar, Pill, TypeTile } from './atoms.js'
+import { BusyButton } from './BusyButton.js'
+import { focusJobsFallback, focusLost, jobOpenButtonId } from './focus.js'
+import { JobIcons } from './icons.js'
+
+/** The drawer tab a control opens (jobs-drawer.jsx); null opens the default one. */
+export type JobDrawerTab = 'overview' | 'review' | null
+
+/**
+ * `.jb-row` columns: Job, Status, Progress, Started by, actions. Every row is
+ * its own grid with fixed or fractional tracks, so no cell's content moves
+ * another. ≤1100px drops Started by; ≤768px stacks status beside the job and
+ * progress under both. The kit's ≤1100px actions track is 80px, too narrow
+ * for Review beside a 30px button, so it stays 96px (CONFLICTS.md §4).
+ */
+const ROW_GRID =
+  'grid items-center gap-[14px] grid-cols-[minmax(240px,1.6fr)_minmax(150px,.9fr)_minmax(170px,1fr)_minmax(120px,.7fr)_96px] max-[1101px]:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1fr)_96px] mobile:grid-cols-[minmax(0,1fr)_auto] mobile:gap-y-2.5'
+
+const WHO_CELL = 'max-[1101px]:hidden'
+const PROGRESS_CELL = 'mobile:col-span-full'
+const ACTIONS_CELL = 'mobile:hidden'
+
+/** `.jb-row.hd`: column names for sighted users; each row reads on its own. */
+function HeaderRow() {
+  return (
+    <div
+      aria-hidden="true"
+      className={`${ROW_GRID} text-micro text-faint mobile:hidden px-4 py-[9px] font-bold tracking-[.4px] uppercase`}
+    >
+      <span>Job</span>
+      <span>Status</span>
+      <span className={PROGRESS_CELL}>Progress</span>
+      <span className={WHO_CELL}>Started by</span>
+      <span className={ACTIONS_CELL} />
+    </div>
+  )
+}
+
+interface RowProps {
+  j: JobRowModel
+  selected: boolean
+  retrying: boolean
+  onOpen: (id: string, tab: JobDrawerTab) => void
+  onCancel: (row: JobRowModel) => void
+  onRetry: (row: JobRowModel) => void
+}
+
+/**
+ * One job. The kit makes the whole row a `role="button"`; here the title is
+ * the button and its `::after` covers the row, so the Review, Cancel and Retry
+ * buttons aren't nested inside another control. They sit above that layer.
+ */
+function JobRowItem({ j, selected, retrying, onOpen, onCancel, onRetry }: RowProps) {
+  const v = view(j)
+  const statusId = `job-status-${j.id}`
+  const review = hasReviewAction(j)
+  return (
+    <li
+      className={`${ROW_GRID} border-bdr relative border-t px-4 py-3 ${
+        selected ? 'bg-acc-l' : 'hover:bg-[color-mix(in_srgb,var(--acc-l)_45%,transparent)]'
+      }`}
+    >
+      <div className="flex min-w-0 items-center gap-[11px]">
+        <TypeTile type={j.type} />
+        <div className="min-w-0">
+          <button
+            id={jobOpenButtonId(j.id)}
+            data-job-open=""
+            type="button"
+            aria-haspopup="dialog"
+            aria-describedby={statusId}
+            onClick={() => onOpen(j.id, null)}
+            className="text-card-title text-txt block w-full cursor-pointer truncate border-0 bg-transparent p-0 text-left leading-[normal] font-semibold after:absolute after:inset-0 focus-visible:outline-none! focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-[var(--acc)] focus-visible:after:outline-solid"
+          >
+            {j.title}
+          </button>
+          <div className="text-meta text-faint mt-px truncate">
+            {j.scope} · <code className="text-hint font-mono">{j.type}</code>
+          </div>
+        </div>
+      </div>
+      <div id={statusId} className="flex min-w-0 flex-col items-start gap-[3px]">
+        <Pill v={v} />
+        {v.sub ? <small className="text-hint text-sub whitespace-nowrap">{v.sub}</small> : null}
+      </div>
+      <div className={PROGRESS_CELL}>
+        <Bar j={j} />
+      </div>
+      <div className={`text-sm2 text-txt min-w-0 ${WHO_CELL}`}>
+        {j.by}
+        <small className="text-hint text-faint mt-px block">{j.created}</small>
+      </div>
+      <div className={`relative z-10 flex justify-end gap-1 ${ACTIONS_CELL}`}>
+        {review ? (
+          <Button
+            variant="secondary"
+            size="sm"
+            aria-label={`Review: ${j.title}`}
+            onClick={() => onOpen(j.id, 'review')}
+          >
+            Review
+          </Button>
+        ) : null}
+        {active(j) && !j.cancelling ? (
+          <Button
+            variant="icon"
+            size="icon"
+            aria-label={`Cancel ${j.title}`}
+            title="Cancel"
+            className="hover:bg-err-l! hover:text-err!"
+            onClick={() => onCancel(j)}
+          >
+            <JobIcons.stop size={13} />
+          </Button>
+        ) : null}
+        {j.state === 'dead' ? (
+          <BusyButton
+            variant="icon"
+            size="icon"
+            aria-label={`Retry ${j.title}`}
+            title="Retry"
+            busy={retrying}
+            leftIcon={<JobIcons.retry size={14} />}
+            onClick={() => onRetry(j)}
+          />
+        ) : null}
+        {/* Decorative. The kit squeezes it and the 30px buttons when Review shows; it gives way instead. */}
+        {review ? null : (
+          <span
+            aria-hidden="true"
+            className="text-sub inline-flex size-[30px] shrink-0 items-center justify-center"
+          >
+            <JobIcons.chev size={14} />
+          </span>
+        )}
+      </div>
+    </li>
+  )
+}
+
+const EMPTY_HINT: Partial<Record<JobFilter, string>> = {
+  dead: 'Nothing has failed.',
+  review: 'Every AI change has been reviewed.',
+}
+
+export interface JobsTableProps {
+  rows: JobRowModel[]
+  filter: JobFilter
+  selectedId: string | null
+  /** The job whose retry request is out. */
+  retryingId: string | null
+  status: 'loading' | 'ready' | 'error'
+  error: string | null
+  onOpen: (id: string, tab: JobDrawerTab) => void
+  onCancel: (row: JobRowModel) => void
+  onRetry: (row: JobRowModel) => void
+  onReload: () => Promise<void>
+}
+
+/** jobs-view.jsx table card: header, rows, and the footnote about other crons. */
+export function JobsTable({
+  rows,
+  filter,
+  selectedId,
+  retryingId,
+  status,
+  error,
+  onOpen,
+  onCancel,
+  onRetry,
+  onReload,
+}: JobsTableProps) {
+  const [reloading, setReloading] = useState(false)
+
+  // Try again unmounts with the error once the list loads, so focus moves to
+  // the list. Only after Try again: a refresh that recovers on its own leaves
+  // focus alone.
+  const triedAgain = useRef(false)
+  useEffect(() => {
+    if (status === 'error') return
+    if (triedAgain.current && focusLost()) focusJobsFallback()
+    triedAgain.current = false
+  }, [status])
+
+  let body
+  if (status === 'loading') {
+    body = <Skeleton variant="table-row" lines={4} className="border-bdr border-t" />
+  } else if (status === 'error') {
+    body = (
+      <div
+        role="alert"
+        className="text-body text-sub flex flex-col items-center gap-3 px-4 py-10 text-center"
+      >
+        <p className="m-0">Jobs couldn’t be loaded. {error}</p>
+        <BusyButton
+          variant="secondary"
+          size="sm"
+          busy={reloading}
+          onClick={async () => {
+            triedAgain.current = true
+            setReloading(true)
+            try {
+              await onReload()
+            } finally {
+              setReloading(false)
+            }
+          }}
+        >
+          Try again
+        </BusyButton>
+      </div>
+    )
+  } else if (rows.length === 0) {
+    body = (
+      <p className="text-body text-sub m-0 px-4 py-10 text-center">
+        {['No jobs here.', EMPTY_HINT[filter]].filter(Boolean).join(' ')}
+      </p>
+    )
+  } else {
+    body = (
+      <ul aria-label="Jobs" className="m-0 list-none p-0">
+        {rows.map((j) => (
+          <JobRowItem
+            key={j.id}
+            j={j}
+            selected={selectedId === j.id}
+            retrying={retryingId === j.id}
+            onOpen={onOpen}
+            onCancel={onCancel}
+            onRetry={onRetry}
+          />
+        ))}
+      </ul>
+    )
+  }
+
+  return (
+    <Card>
+      <HeaderRow />
+      {body}
+      <div className="border-bdr text-meta text-faint flex flex-wrap gap-2.5 border-t px-4 py-2.5">
+        Publishing, cleanup, search sync and SEO autopilot run on their own schedules and don’t
+        appear here.
+      </div>
+    </Card>
+  )
+}

package/src/views/Jobs/WorkerStrip.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+import type { JobWorkerStatus } from '@prenta/core'
+import { Card } from '../../components/ui/Card.js'
+import {
+  JOB_TYPES,
+  active,
+  formatNextRun,
+  formatSince,
+  scheduleLabel,
+  type JobRow,
+} from '../../lib/job-view.js'
+import type { RunnableJobType } from '../../lib/jobs-service.js'
+import { TypeTile } from './atoms.js'
+import { BusyButton } from './BusyButton.js'
+import { JobIcons } from './icons.js'
+import { useNow } from './useJobsFeed.js'
+
+const SCANS: RunnableJobType[] = ['seo-scan', 'content-health']
+
+/** How long past its minute a tick may run (budget plus a refresh) before it reads as late. */
+const LATE_AFTER_MS = 60_000
+
+/** `.jb-top > div`: one cell of the strip. */
+function Cell({ children }: { children: ReactNode }) {
+  return (
+    <div className="border-bdr flex min-w-0 items-center gap-[11px] px-4 py-[13px] not-first:border-l [@media(width<1181px)]:not-first:border-t [@media(width<1181px)]:not-first:border-l-0">
+      {children}
+    </div>
+  )
+}
+
+/** `.k` / `.v`: label over value; `<small>` phrases never wrap inside themselves. */
+function Text({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <div className="text-hint text-faint font-semibold">{label}</div>
+      <div className="text-body text-txt [&_small]:text-meta [&_small]:text-sub mt-px font-semibold [&_small]:font-[450] [&_small]:whitespace-nowrap">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function workerText(
+  worker: JobWorkerStatus | null,
+  error: string | null,
+  loading: boolean,
+  now: number,
+): ReactNode {
+  // A failed status request shows here only; the list's note is about the list.
+  if (error) return <span title={error}>Status unavailable</span>
+  if (!worker) return loading ? 'Checking…' : 'Status unavailable'
+  const perRun = <small>· {Math.round(worker.budgetMs / 1000)}s per run</small>
+  if (!worker.lastTickAt) return <>Hasn’t run yet {perRun}</>
+  const ran = `Ran ${formatSince(now - Date.parse(worker.lastTickAt))} ago`
+  const next = worker.nextTickAt ? Date.parse(worker.nextTickAt) - now : null
+  let nextText: string | null = null
+  if (next !== null && next > 0) nextText = `· next in ${Math.ceil(next / 1000)}s`
+  else if (next !== null) nextText = -next > LATE_AFTER_MS ? '· next run is late' : '· due now'
+  return (
+    <>
+      {ran} {nextText ? <small>{nextText}</small> : null} {perRun}
+    </>
+  )
+}
+
+export interface WorkerStripProps {
+  worker: JobWorkerStatus | null
+  /** Why the last worker status request failed. */
+  workerError: string | null
+  /** The server's clock minus the browser's, so the times agree with the server's. */
+  skewMs: number
+  /** The first load hasn't finished. */
+  loading: boolean
+  rows: JobRow[]
+  /** Live is on and the tab is visible: the clock ticks every second. */
+  ticking: boolean
+  onRunNow: (type: RunnableJobType) => Promise<void>
+}
+
+/**
+ * jobs-view.jsx `.jb-top`: when the worker last ran, and both scan schedules
+ * with Run now. Three columns, stacked at ≤1180px.
+ */
+export function WorkerStrip({
+  worker,
+  workerError,
+  skewMs,
+  loading,
+  rows,
+  ticking,
+  onRunNow,
+}: WorkerStripProps) {
+  const now = useNow(ticking) + skewMs
+  const [busy, setBusy] = useState<RunnableJobType | null>(null)
+
+  async function run(type: RunnableJobType) {
+    setBusy(type)
+    try {
+      await onRunNow(type)
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  return (
+    <Card className="grid grid-cols-3 [@media(width<1181px)]:grid-cols-1">
+      <Cell>
+        <span className="rounded-8 bg-bg text-sub inline-flex size-[30px] shrink-0 items-center justify-center">
+          <JobIcons.clock size={15} />
+        </span>
+        <Text label="Worker">{workerText(worker, workerError, loading, now)}</Text>
+      </Cell>
+      {SCANS.map((type) => {
+        const schedule = worker?.schedules.find((item) => item.type === type)
+        const running =
+          !!schedule?.activeJobId || rows.some((row) => row.type === type && active(row))
+        const when = schedule ? scheduleLabel(schedule.cron) : JOB_TYPES[type].when
+        const next = running ? 'running now' : schedule ? formatNextRun(schedule.nextAt, now) : null
+        return (
+          <Cell key={type}>
+            <TypeTile type={type} />
+            <Text label={JOB_TYPES[type].label}>
+              {when} {next ? <small>· {next}</small> : null}
+            </Text>
+            <BusyButton
+              variant="secondary"
+              size="sm"
+              className="ml-auto"
+              leftIcon={<JobIcons.play size={11} />}
+              busy={busy === type}
+              aria-label={`Run now: ${JOB_TYPES[type].label}`}
+              onClick={() => void run(type)}
+            >
+              Run now
+            </BusyButton>
+          </Cell>
+        )
+      })}
+    </Card>
+  )
+}

package/src/views/Jobs/atoms.tsx

@@ -0,0 +1,93 @@
+import type { ComponentType } from 'react'
+import { jobType, view, type JobRow, type JobStateView, type JobTone } from '../../lib/job-view.js'
+import { JobIcons } from './icons.js'
+
+/** Tile colours per type (jobs-data.jsx `TYPES` tone / bg). Unknown types get a quiet tile. */
+const TILE_CLASS: Record<string, string> = {
+  'seo-scan': 'bg-info-l text-info',
+  'content-health': 'bg-suc-l text-suc',
+  'batch-ai': 'bg-acc-l text-acc',
+}
+
+const TILE_ICON: Record<string, ComponentType<{ size?: number }>> = {
+  'seo-scan': JobIcons.search,
+  'content-health': JobIcons.pulse,
+  'batch-ai': JobIcons.spark,
+}
+
+/** jobs-data.jsx `TypeTile`: a 30px rounded square with the type's icon. */
+export function TypeTile({ type, size = 30 }: { type: string; size?: number }) {
+  const TileIcon = TILE_ICON[type] ?? JobIcons.list
+  return (
+    <span
+      className={`rounded-8 inline-flex shrink-0 items-center justify-center ${TILE_CLASS[type] ?? 'bg-bg text-sub'}`}
+      style={{ width: size, height: size }}
+    >
+      <TileIcon size={Math.round(size * 0.5)} />
+    </span>
+  )
+}
+
+/** `.jb-pill` tones. */
+const PILL_CLASS: Record<JobTone, string> = {
+  acc: 'bg-acc-l text-acc',
+  suc: 'bg-suc-l text-suc',
+  err: 'bg-err-l text-err',
+  warn: 'bg-warn-l text-warn',
+  mute: 'bg-bg text-sub border border-bdr',
+  rev: 'bg-acc text-acc-on',
+}
+
+/** jobs-data.jsx `Pill`: the state label, with a pulsing dot while a slice runs. */
+export function Pill({ v }: { v: JobStateView }) {
+  return (
+    <span
+      className={`rounded-pill text-hint inline-flex items-center gap-1.5 px-[9px] py-0.5 font-bold whitespace-nowrap ${PILL_CLASS[v.t]}`}
+    >
+      {v.k === 'running' ? (
+        <i
+          aria-hidden="true"
+          className="motion-safe:animate-live size-1.5 rounded-full bg-current"
+        />
+      ) : null}
+      {v.l}
+    </span>
+  )
+}
+
+/** Progress fill per tone (`.jb-bar-t i`). Needs review keeps the accent fill. */
+const FILL_CLASS: Record<JobTone, string> = {
+  acc: 'bg-acc',
+  suc: 'bg-suc',
+  err: 'bg-err',
+  warn: 'bg-warn',
+  mute: 'bg-faint',
+  rev: 'bg-acc',
+}
+
+/**
+ * jobs-data.jsx `Bar`. The track fills its grid cell and the count is
+ * tabular and never wraps, so a running job's progress moves without the row
+ * changing size.
+ */
+export function Bar({ j }: { j: JobRow }) {
+  const pct = j.total ? Math.min(100, Math.max(0, Math.round((j.done / j.total) * 100))) : 0
+  const v = view(j)
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <div
+        aria-hidden="true"
+        className="rounded-pill bg-bg border-bdr h-1.5 overflow-hidden border"
+        data-testid="job-progress-track"
+      >
+        <i
+          className={`rounded-pill block h-full motion-safe:transition-[width] motion-safe:duration-[400ms] ${FILL_CLASS[v.t]}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      <span className="text-hint text-sub whitespace-nowrap tabular-nums">
+        {j.done.toLocaleString()} / {j.total.toLocaleString()} {jobType(j.type).unit}
+      </span>
+    </div>
+  )
+}

package/src/views/Jobs/focus.ts

@@ -0,0 +1,56 @@
+'use client'
+
+import { useRef } from 'react'
+
+/** The id of a row's open button, for returning focus to the row. */
+export function jobOpenButtonId(id: string): string {
+  return `job-open-${id}`
+}
+
+/** Focus was dropped: on the body, or on an element that's left the page. */
+export function focusLost(): boolean {
+  const current = document.activeElement
+  return !current || current === document.body || !current.isConnected
+}
+
+/**
+ * Focus somewhere stable on the Jobs screen: the first row's open button, or
+ * the selected filter tab when the current filter has no rows.
+ */
+export function focusJobsFallback(): void {
+  const target =
+    document.querySelector<HTMLElement>('[data-job-open]') ??
+    document.querySelector<HTMLElement>('[data-jobs-filters] [role="tab"][aria-selected="true"]')
+  target?.focus()
+}
+
+/** Focus a row's open button; when that row has left the list, the fallback above. */
+export function focusJobRow(id: string): void {
+  const button = document.getElementById(jobOpenButtonId(id))
+  if (button) button.focus()
+  else focusJobsFallback()
+}
+
+/**
+ * Focus return for the Jobs dialogs. Radix's modal Dialog only returns focus
+ * to a `Dialog.Trigger`, and these open from several controls, so the control
+ * that had focus is remembered on open and focused again on close. When it's
+ * gone (a cancel removes the Cancel button) or was never focused (Safari
+ * doesn't focus a clicked button), `fallback` places focus instead.
+ */
+export function useReturnFocus(fallback: () => void) {
+  const opener = useRef<HTMLElement | null>(null)
+  return {
+    onOpenAutoFocus: () => {
+      const current = document.activeElement
+      opener.current = current instanceof HTMLElement && current !== document.body ? current : null
+    },
+    onCloseAutoFocus: (event: Event) => {
+      event.preventDefault()
+      const back = opener.current
+      opener.current = null
+      if (back?.isConnected) back.focus()
+      else fallback()
+    },
+  }
+}

package/src/views/Jobs/icons.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react'
+
+/** The kit's Jobs icon set (jobs-data.jsx `Ic`): 24px grid, 1.8 stroke, decorative. */
+function Icon({ size = 14, children }: { size?: number; children: ReactNode }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="shrink-0"
+    >
+      {children}
+    </svg>
+  )
+}
+
+interface IconProps {
+  size?: number
+}
+
+export const JobIcons = {
+  search: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <circle cx="11" cy="11" r="7" />
+      <line x1="21" y1="21" x2="16.5" y2="16.5" />
+    </Icon>
+  ),
+  pulse: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+    </Icon>
+  ),
+  spark: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z" />
+      <path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z" />
+    </Icon>
+  ),
+  retry: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <polyline points="1 4 1 10 7 10" />
+      <path d="M3.5 15a9 9 0 1 0 2.1-9.4L1 10" />
+    </Icon>
+  ),
+  play: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <polygon points="6 4 20 12 6 20 6 4" />
+    </Icon>
+  ),
+  stop: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <rect x="5" y="5" width="14" height="14" rx="2" />
+    </Icon>
+  ),
+  alert: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <circle cx="12" cy="12" r="9" />
+      <line x1="12" y1="8" x2="12" y2="12.5" />
+      <line x1="12" y1="16" x2="12" y2="16" />
+    </Icon>
+  ),
+  clock: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <circle cx="12" cy="12" r="9" />
+      <polyline points="12 7 12 12 15 14" />
+    </Icon>
+  ),
+  chev: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <polyline points="9 18 15 12 9 6" />
+    </Icon>
+  ),
+  /** The approve menu's opener: `chev` turned down. */
+  chevDown: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <polyline points="6 9 12 15 18 9" />
+    </Icon>
+  ),
+  x: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </Icon>
+  ),
+  check: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <polyline points="20 6 9 17 4 12" />
+    </Icon>
+  ),
+  edit: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+    </Icon>
+  ),
+  list: ({ size }: IconProps) => (
+    <Icon size={size}>
+      <path d="m3 17 2 2 4-4" />
+      <path d="m3 7 2 2 4-4" />
+      <path d="M13 6h8" />
+      <path d="M13 12h8" />
+      <path d="M13 18h8" />
+    </Icon>
+  ),
+}