@prenta/admin 2.6.1 → 2.8.0

package/src/views/Jobs/WorkerStrip.tsx

@@ -0,0 +1,149 @@
+'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
+  /** The viewer may start a scan. Viewers get no Run now (the server refuses it). */
+  canRun: 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,
+  canRun,
+  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>
+            {canRun ? (
+              <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>
+            ) : null}
+          </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,67 @@
+'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 the open drawer's tab panel, where the job's new state shows, when a
+ * footer action's button went away (a cancel, a retry). The row is behind the
+ * drawer, which keeps focus inside itself.
+ */
+export function focusJobDrawer(): void {
+  const drawer = document.querySelector<HTMLElement>('[data-job-drawer]')
+  const target = drawer?.querySelector<HTMLElement>('[role="tabpanel"]') ?? drawer
+  target?.focus()
+}
+
+/**
+ * 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>
+  ),
+}

package/src/views/Jobs/useJobDetail.ts

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { Job, JobEvent } from '@prenta/core'
+import { getJob, listJobEvents } from '../../lib/jobs-service.js'
+
+/*
+ * The drawer's reads. They follow the list instead of polling on their own:
+ * `version` is the list's copy of the job (its `updatedAt`), which the list
+ * refreshes every 5 seconds while Live is on, so each is read again only when
+ * the job has changed. Every admin request shares one budget per IP.
+ */
+
+export interface JobDetailState {
+  /** `GET /jobs/:id`, once it has answered. */
+  detail: Job | null
+  /** Why the last read failed. */
+  error: string | null
+}
+
+/**
+ * The job as `GET /jobs/:id` sends it: the scan `results`, and for someone who
+ * could retry or cancel it, the full error with its stack.
+ */
+export function useJobDetail(id: string, version: string): JobDetailState {
+  const [state, setState] = useState<JobDetailState>({ detail: null, error: null })
+  useEffect(() => {
+    const controller = new AbortController()
+    void getJob(id, controller.signal).then((res) => {
+      if (controller.signal.aborted) return
+      setState((prev) =>
+        res.ok ? { detail: res.value, error: null } : { detail: prev.detail, error: res.error },
+      )
+    })
+    return () => controller.abort()
+  }, [id, version])
+  return state
+}
+
+export interface JobEventsState {
+  events: JobEvent[]
+  status: 'loading' | 'ready' | 'error'
+  /** Why the last read failed. With `ready`, the last events are still shown. */
+  error: string | null
+}
+
+/** `GET /jobs/:id/events` while the Activity tab is open. */
+export function useJobEvents(id: string, version: string, enabled: boolean): JobEventsState {
+  const [state, setState] = useState<JobEventsState>({ events: [], status: 'loading', error: null })
+  useEffect(() => {
+    if (!enabled) return
+    const controller = new AbortController()
+    void listJobEvents(id, controller.signal).then((res) => {
+      if (controller.signal.aborted) return
+      setState((prev) =>
+        res.ok
+          ? { events: res.value, status: 'ready', error: null }
+          : { ...prev, status: prev.status === 'ready' ? 'ready' : 'error', error: res.error },
+      )
+    })
+    return () => controller.abort()
+  }, [id, version, enabled])
+  return state
+}