@prenta/admin 2.6.0 → 2.7.0

package/src/views/Jobs/DrawerOverview.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { Job, JobWorkerStatus } from '@prenta/core'
+import { operationLabel, overviewSentence, shownAttempts } from '../../lib/job-drawer.js'
+import { formatCreated, jobType, scheduleLabel, type JobRow } from '../../lib/job-view.js'
+import { Bar } from './atoms.js'
+import { JobIcons } from './icons.js'
+
+/** `.jd-sec`: an 11px uppercase section label. */
+export function DrawerSection({ children }: { children: ReactNode }) {
+  return (
+    <h3 className="text-micro text-faint m-0 leading-[normal] font-bold tracking-[.4px] uppercase">
+      {children}
+    </h3>
+  )
+}
+
+/** `.jd-ai`: an AI note ("What happened", "AI summary") on the accent tint. */
+export function AiNote({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="rounded-10 bg-acc-l text-body text-txt flex gap-2.5 px-3.5 py-3 leading-[1.55]">
+      <span className="text-acc mt-0.5 flex shrink-0">
+        <JobIcons.spark size={15} />
+      </span>
+      <div className="min-w-0">
+        <b className="text-acc text-hint mb-0.5 block font-bold">{label}</b>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Fact({ label, children, wrap }: { label: string; children: ReactNode; wrap?: boolean }) {
+  return (
+    <div className="bg-card text-meta text-faint min-w-0 px-3 py-[9px]">
+      <dt>{label}</dt>
+      <dd
+        className={`text-body text-txt m-0 mt-px font-semibold ${wrap ? '' : 'truncate'}`}
+        title={wrap ? undefined : typeof children === 'string' ? children : undefined}
+      >
+        {children}
+      </dd>
+    </div>
+  )
+}
+
+export interface DrawerOverviewProps {
+  row: JobRow
+  job: Job
+  /** The error to show: the full text with its stack when the detail has it. */
+  error: string | null
+  now: number
+  worker: JobWorkerStatus | null
+  onCopyError: (text: string) => void
+}
+
+/**
+ * jobs-drawer.jsx Overview: the status sentence, progress, the last error
+ * (with Copy), the AI "What happened" or summary, the facts grid and the
+ * instruction.
+ */
+export function DrawerOverview({ row, job, error, now, worker, onCopyError }: DrawerOverviewProps) {
+  const type = jobType(job.type)
+  const batch = job.type === 'batch-ai'
+  const payload = job.payload as {
+    operation?: unknown
+    review?: unknown
+    onApprove?: unknown
+    instruction?: unknown
+  }
+  const instruction = typeof payload.instruction === 'string' ? payload.instruction.trim() : ''
+  const schedule = worker?.schedules.find((entry) => entry.type === job.type)
+  const tokens = job.usage.tokensIn + job.usage.tokensOut
+
+  return (
+    <>
+      <p className="text-body text-txt m-0 leading-[1.55] text-pretty">
+        {overviewSentence(row, job, now)}
+      </p>
+      <Bar j={row} />
+      {error ? (
+        <>
+          <DrawerSection>Last error</DrawerSection>
+          <div className="relative">
+            <pre className="bg-code-bg text-code-err rounded-10 text-hint m-0 py-3 pr-16 pl-3.5 font-mono leading-[1.6] break-words whitespace-pre-wrap">
+              {error}
+            </pre>
+            <button
+              type="button"
+              onClick={() => onCopyError(error)}
+              className="border-code-btn-bdr bg-code-btn-bg text-code-btn-txt rounded-6 text-micro absolute top-2 right-2 cursor-pointer border px-2 py-[3px] font-mono leading-[1.6] font-semibold whitespace-nowrap"
+            >
+              Copy
+            </button>
+          </div>
+        </>
+      ) : null}
+      {job.explain ? <AiNote label="What happened">{job.explain}</AiNote> : null}
+      {job.summary ? <AiNote label="AI summary">{job.summary}</AiNote> : null}
+      <dl className="bg-bdr border-bdr rounded-10 m-0 grid grid-cols-2 gap-px overflow-hidden border max-[560px]:grid-cols-1">
+        <Fact label="Type">
+          <span className="text-hint font-mono">{job.type}</span>
+        </Fact>
+        <Fact label="Started by">{row.by}</Fact>
+        <Fact label="Created">{row.created}</Fact>
+        <Fact label="Last update">{formatCreated(job.updatedAt, now)}</Fact>
+        <Fact label="Attempts">
+          {shownAttempts(row)} of {row.maxAttempts}
+        </Fact>
+        {batch ? (
+          <Fact label="Operation">{operationLabel(payload.operation) ?? '—'}</Fact>
+        ) : (
+          <Fact label="Schedule">{schedule ? scheduleLabel(schedule.cron) : type.when || '—'}</Fact>
+        )}
+        {batch ? (
+          <>
+            <Fact label="Approval">
+              {payload.review === 'review' ? 'Review each change' : 'Applied automatically'}
+            </Fact>
+            <Fact label="When approved">
+              {payload.onApprove === 'publish' ? 'Publish' : 'Save as draft'}
+            </Fact>
+          </>
+        ) : null}
+        <Fact label="AI usage">{tokens ? `${tokens.toLocaleString()} tokens` : 'None'}</Fact>
+        <Fact label="Slice" wrap>
+          {type.slice || '—'}
+        </Fact>
+      </dl>
+      {instruction ? (
+        <>
+          <DrawerSection>Instruction</DrawerSection>
+          <p className="text-body text-sub m-0 leading-[1.55] text-pretty">“{instruction}”</p>
+        </>
+      ) : null}
+    </>
+  )
+}

package/src/views/Jobs/DrawerResults.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import type { MouseEvent, ReactNode } from 'react'
+import type { ScanResults } from '@prenta/core'
+import { useAdminLinks } from '../../components/ui/admin-links.js'
+import { formatCreated } from '../../lib/job-view.js'
+import { AiNote, DrawerSection } from './DrawerOverview.js'
+import { JobIcons } from './icons.js'
+
+/** `.jb-empty`. */
+export function DrawerEmpty({ children }: { children: ReactNode }) {
+  return <p className="text-body text-sub m-0 px-4 py-10 text-center">{children}</p>
+}
+
+function Kpi({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="border-bdr rounded-10 border px-3 py-2.5">
+      <div className="text-hint text-faint">{label}</div>
+      <b className="text-stat text-txt tabular-nums">{children}</b>
+    </div>
+  )
+}
+
+/** An admin path the server sent, such as `/seo/content`. Anything else isn't linked. */
+function adminPath(href: string): boolean {
+  return /^\/(?!\/)[^\s\\]*$/.test(href)
+}
+
+function plainClick(event: MouseEvent) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey
+}
+
+export interface DrawerResultsProps {
+  type: string
+  results: ScanResults | undefined
+  /** `GET /jobs/:id` has answered; until then results may still be on their way. */
+  loaded: boolean
+  error: string | null
+  summary: string | null
+  /** Documents the content health check scanned. */
+  scanned: number
+  now: number
+  onNavigate: (path: string) => void
+}
+
+/**
+ * jobs-drawer.jsx Results, for SEO scans and content health checks: three
+ * key numbers, the AI summary, the open issues by kind (each linking to the
+ * screen that fixes it) and whether the SEO digest went out.
+ */
+export function DrawerResults({
+  type,
+  results,
+  loaded,
+  error,
+  summary,
+  scanned,
+  now,
+  onNavigate,
+}: DrawerResultsProps) {
+  const links = useAdminLinks()
+  if (!results) {
+    if (!loaded) {
+      return (
+        <p role="status" className="text-body text-sub m-0 px-4 py-10 text-center">
+          {error ? `Couldn’t load the results: ${error}.` : 'Loading results…'}
+        </p>
+      )
+    }
+    return <DrawerEmpty>Results appear when the run finishes.</DrawerEmpty>
+  }
+  const seo = type === 'seo-scan'
+  const delta =
+    typeof results.score === 'number' && typeof results.prevScore === 'number'
+      ? results.score - results.prevScore
+      : 0
+  const digest = results.digest
+  return (
+    <>
+      <div className="grid grid-cols-3 gap-2 max-[560px]:grid-cols-2">
+        {seo ? (
+          <>
+            <Kpi label="Site score">
+              {results.score ?? '—'}
+              {delta ? (
+                <small
+                  className={`text-meta ml-[5px] font-semibold tracking-normal ${delta > 0 ? 'text-suc' : 'text-err'}`}
+                >
+                  {delta > 0 ? `+${delta}` : `−${-delta}`}
+                </small>
+              ) : null}
+            </Kpi>
+            <Kpi label="Issues found">{results.found}</Kpi>
+            <Kpi label="Fixed since last scan">{results.resolved}</Kpi>
+          </>
+        ) : (
+          <>
+            <Kpi label="Documents scanned">{scanned.toLocaleString()}</Kpi>
+            <Kpi label="New issues">{results.found}</Kpi>
+            <Kpi label="Resolved">{results.resolved}</Kpi>
+          </>
+        )}
+      </div>
+      {summary ? <AiNote label="AI summary">{summary}</AiNote> : null}
+      {results.categories.length > 0 ? (
+        <>
+          <DrawerSection>{seo ? 'Top issues' : 'Open issues'}</DrawerSection>
+          <ul className="border-bdr rounded-10 m-0 flex list-none flex-col overflow-hidden border p-0">
+            {results.categories.map((category) => {
+              const body = (
+                <>
+                  <span className="min-w-0 flex-1">{category.label}</span>
+                  <b className="tabular-nums">{category.count}</b>
+                </>
+              )
+              const rowClass =
+                'text-sm2 text-txt flex items-center gap-2.5 px-3 py-[9px] no-underline'
+              return (
+                <li key={category.key} className="border-bdr border-t first:border-t-0">
+                  {adminPath(category.href) ? (
+                    <a
+                      href={links.href(category.href)}
+                      className={`${rowClass} hover:bg-bg`}
+                      onClick={(event) => {
+                        if (!plainClick(event)) return
+                        event.preventDefault()
+                        onNavigate(category.href)
+                      }}
+                    >
+                      {body}
+                      <JobIcons.chev size={13} />
+                    </a>
+                  ) : (
+                    <div className={rowClass}>{body}</div>
+                  )}
+                </li>
+              )
+            })}
+          </ul>
+        </>
+      ) : null}
+      {seo && digest ? (
+        <p className="text-meta text-sub m-0 flex items-start gap-[7px] leading-[1.5]">
+          <span className="text-suc mt-0.5 flex shrink-0">
+            <JobIcons.check size={13} />
+          </span>
+          <span>
+            SEO digest: Sent to {digest.recipients} {digest.recipients === 1 ? 'person' : 'people'}{' '}
+            · {formatCreated(digest.sentAt, now)}
+          </span>
+        </p>
+      ) : null}
+    </>
+  )
+}