@prenta/admin 1.13.0 → 1.15.0

package/src/views/seo/AutopilotAppliedSection.tsx

@@ -0,0 +1,597 @@
+'use client'
+
+/**
+ * SEO → Proposals "Applied by autopilot": the ledger of every unattended change
+ * (spec §4), newest first, with its gate results and Search Console outcome.
+ * Revert is admin-only (`canRevert` from the list payload) and confirmed; a 409
+ * conflict re-prompts with the fields a human edited since and offers a forced
+ * retry. One mutation is allowed in flight at a time (same guard pattern as
+ * `ProposalsTab`).
+ */
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { ArrowRight, Bot, Undo2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchAutopilotApplied,
+  revertAutopilotChange,
+  type SeoAutoApplyList,
+  type SeoAutoApplyOutcome,
+  type SeoAutoApplyRow,
+  type SeoAutoApplyStatus,
+} from '../../lib/seo-service.js'
+import { sourceEditPath } from '../../lib/collection-routes.js'
+import { brandAlignmentLabel, brandAlignmentTone } from '../../lib/brand-voice-client.js'
+import {
+  SectionCard,
+  SeoEmptyState,
+  SeoErrorState,
+  SeoLoading,
+  SeoStatusBadge,
+  btnSecondary,
+} from '../../components/seo/primitives.js'
+import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { relativeAge } from './relative-age.js'
+
+const PAGE_SIZE = 20
+const SEO_SETTINGS_PATH = '/settings?tab=seo'
+const SELECT_CLASS =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring rounded-md border px-2 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60'
+/** Compact secondary button for table rows (parity with the Settings autopilot card). */
+const ROW_BUTTON_CLASS =
+  'border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const PAGER_BUTTON_CLASS =
+  'text-foreground hover:bg-accent focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+
+/** The one mutation this section performs; every Revert locks while it runs. */
+type Mutation = 'revert'
+
+const STATUS_OPTIONS: ReadonlyArray<{ value: SeoAutoApplyStatus | ''; label: string }> = [
+  { value: '', label: 'All statuses' },
+  { value: 'applied', label: 'Applied' },
+  { value: 'reverted', label: 'Reverted' },
+  { value: 'outcome_reverted', label: 'Reverted after regression' },
+  { value: 'verify_failed', label: 'Verify failed' },
+]
+
+const OUTCOME_OPTIONS: ReadonlyArray<{ value: SeoAutoApplyOutcome | ''; label: string }> = [
+  { value: '', label: 'All outcomes' },
+  { value: 'pending', label: 'Watching' },
+  { value: 'held', label: 'Held' },
+  { value: 'regressed', label: 'Regressed' },
+  { value: 'insufficient_data', label: 'Not enough data' },
+  { value: 'skipped', label: 'Not watched' },
+]
+
+function isStatus(v: string): v is SeoAutoApplyStatus {
+  return STATUS_OPTIONS.some((o) => o.value !== '' && o.value === v)
+}
+function isOutcome(v: string): v is SeoAutoApplyOutcome {
+  return OUTCOME_OPTIONS.some((o) => o.value !== '' && o.value === v)
+}
+
+function StatusBadge({ status }: { status: SeoAutoApplyStatus }) {
+  switch (status) {
+    case 'applied':
+      return <SeoStatusBadge label="Applied" tone="good" />
+    case 'verify_failed':
+      return <SeoStatusBadge label="Verify failed" tone="poor" />
+    case 'reverted':
+      return <SeoStatusBadge label="Reverted" tone="neutral" />
+    case 'outcome_reverted':
+      return <SeoStatusBadge label="Reverted · regression" tone="fair" />
+    default: {
+      const _exhaustive: never = status
+      return _exhaustive
+    }
+  }
+}
+
+/** Only outcomes that carry information get a badge; `pending` / `skipped` stay quiet. */
+function OutcomeBadge({ outcome }: { outcome: SeoAutoApplyOutcome }) {
+  switch (outcome) {
+    case 'pending':
+    case 'skipped':
+      return null
+    case 'held':
+      return <SeoStatusBadge label="Held" tone="good" />
+    case 'regressed':
+      return <SeoStatusBadge label="Regressed" tone="poor" />
+    case 'insufficient_data':
+      return <SeoStatusBadge label="Not enough data" tone="neutral" />
+    default: {
+      const _exhaustive: never = outcome
+      return _exhaustive
+    }
+  }
+}
+
+function KindBadge({ kind }: { kind: SeoAutoApplyRow['kind'] }) {
+  switch (kind) {
+    case 'issue-fix':
+      return <SeoStatusBadge label="Issue fix" tone="neutral" />
+    case 'redirect':
+      return <SeoStatusBadge label="Redirect" tone="neutral" />
+    default: {
+      const _exhaustive: never = kind
+      return _exhaustive
+    }
+  }
+}
+
+/** `missing-meta-title` → `Missing meta title`; the redirect pseudo-type names its producer. */
+function issueTypeLabel(issueType: string): string {
+  if (issueType === 'redirect') return '404 recovery'
+  const words = issueType.replace(/[-_]+/g, ' ').trim()
+  return words ? words.charAt(0).toUpperCase() + words.slice(1) : issueType
+}
+
+/** `metaTitle` → `Meta title`. */
+function fieldLabel(field: string): string {
+  const spaced = field.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[-_]+/g, ' ')
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase()
+}
+
+function formatValue(v: unknown): string {
+  if (v === null || v === undefined || v === '') return '—'
+  if (typeof v === 'string') return v
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v)
+  return JSON.stringify(v)
+}
+
+function displayTitle(row: SeoAutoApplyRow): string {
+  if (row.kind === 'redirect') return formatValue(row.after.source ?? row.entityUrl)
+  return row.entityTitle ?? row.entityUrl ?? row.path ?? issueTypeLabel(row.issueType)
+}
+
+function AppliedTime({ iso }: { iso: string }) {
+  const absolute = new Date(iso).toLocaleString()
+  const relative = relativeAge(iso)
+  return (
+    <time dateTime={iso} title={absolute}>
+      {relative || absolute}
+      {relative ? <span className="sr-only"> ({absolute})</span> : null}
+    </time>
+  )
+}
+
+function Diff({ row }: { row: SeoAutoApplyRow }) {
+  if (row.kind === 'redirect') {
+    return (
+      <p className="text-foreground flex flex-wrap items-center gap-1 font-mono text-sm break-all">
+        <span>{formatValue(row.after.source)}</span>
+        <ArrowRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" aria-hidden />
+        <span className="sr-only">to</span>
+        <span className="text-muted-foreground">{formatValue(row.after.destination)}</span>
+      </p>
+    )
+  }
+  const fields = Object.keys(row.after)
+  if (fields.length === 0) return <span className="text-muted-foreground text-sm">—</span>
+  return (
+    <ul className="space-y-1 text-sm">
+      {fields.map((field) => (
+        <li key={field} className="flex flex-wrap items-baseline gap-x-1.5">
+          <span className="text-muted-foreground">{fieldLabel(field)}:</span>
+          <span className="text-muted-foreground line-through">
+            {formatValue(row.before?.[field])}
+          </span>
+          <ArrowRight className="text-muted-foreground h-3 w-3 shrink-0 self-center" aria-hidden />
+          <span className="sr-only">to</span>
+          <span className="text-foreground">{formatValue(row.after[field])}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function Quality({ gate }: { gate: SeoAutoApplyRow['gate'] }) {
+  if (gate.brandAlignment !== null) {
+    return (
+      <span
+        className="border-border bg-muted/40 inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs"
+        aria-label={`Brand voice score ${gate.brandAlignment} out of 100`}
+      >
+        <span className={`font-medium ${brandAlignmentTone(gate.brandAlignment)}`}>
+          {gate.brandAlignment}/100
+        </span>
+        <span className="text-muted-foreground">{brandAlignmentLabel(gate.brandAlignment)}</span>
+      </span>
+    )
+  }
+  if (gate.confidence !== null) {
+    const pct = Math.round(gate.confidence * 100)
+    return (
+      <SeoStatusBadge label={`${pct}%`} tone={pct >= 70 ? 'good' : pct >= 40 ? 'fair' : 'poor'} />
+    )
+  }
+  return <SeoStatusBadge label="Rule-based" tone="neutral" />
+}
+
+export function AutopilotAppliedSection({
+  onNavigate,
+  onChanged,
+  refreshKey = 0,
+}: {
+  onNavigate?: (path: string) => void
+  /**
+   * Fired after a successful revert. The server reopens the originating issue
+   * or redirect suggestion, so the parent inbox / overview must refetch.
+   */
+  onChanged?: () => void
+  refreshKey?: number
+}) {
+  const baseId = useId()
+  const [data, setData] = useState<SeoAutoApplyList | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [page, setPage] = useState(1)
+  const [status, setStatus] = useState<SeoAutoApplyStatus | ''>('')
+  const [outcome, setOutcome] = useState<SeoAutoApplyOutcome | ''>('')
+  const [target, setTarget] = useState<SeoAutoApplyRow | null>(null)
+  const [conflict, setConflict] = useState<{ row: SeoAutoApplyRow; fields: string[] } | null>(null)
+  const [mutation, setMutation] = useState<Mutation | null>(null)
+  /** The one line that changes after a revert — announced via `role="status"`. */
+  const [lastReverted, setLastReverted] = useState<string | null>(null)
+  /** Mirrors `mutation` synchronously so a second click in the same tick cannot slip past. */
+  const mutationRef = useRef<Mutation | null>(null)
+  const mountedRef = useRef(true)
+  /** Ignore responses from a superseded request (filter/page changed mid-flight). */
+  const requestRef = useRef(0)
+  const busy = mutation !== null
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  /**
+   * `silent` re-reads keep the table on screen (post-revert / parent refresh);
+   * the initial load and filter or page changes show the loading state.
+   */
+  const load = useCallback(
+    async (silent: boolean) => {
+      const requestId = ++requestRef.current
+      if (!silent) {
+        setLoading(true)
+        setLastReverted(null)
+      }
+      setError(null)
+      try {
+        const next = await fetchAutopilotApplied({
+          page,
+          pageSize: PAGE_SIZE,
+          status: status || undefined,
+          outcome: outcome || undefined,
+        })
+        if (!mountedRef.current || requestId !== requestRef.current) return
+        setData(next)
+      } catch (err) {
+        if (!mountedRef.current || requestId !== requestRef.current) return
+        setError(
+          err instanceof Error && err.message ? err.message : 'Failed to load autopilot history.',
+        )
+      } finally {
+        if (mountedRef.current && requestId === requestRef.current) setLoading(false)
+      }
+    },
+    [page, status, outcome],
+  )
+
+  useEffect(() => {
+    void load(false)
+  }, [load])
+
+  const seenRefreshKeyRef = useRef(refreshKey)
+  useEffect(() => {
+    if (seenRefreshKeyRef.current === refreshKey) return
+    seenRefreshKeyRef.current = refreshKey
+    void load(true)
+  }, [load, refreshKey])
+
+  // A filtered refetch can land on a page that no longer exists (e.g. the
+  // only `applied` row on page 3 was just reverted). Snap back to the last page.
+  useEffect(() => {
+    if (!data || data.docs.length > 0 || page <= 1) return
+    setPage(Math.max(1, Math.ceil(data.total / data.pageSize)))
+  }, [data, page])
+
+  const beginMutation = useCallback((kind: Mutation): boolean => {
+    if (mutationRef.current !== null) return false
+    mutationRef.current = kind
+    setMutation(kind)
+    return true
+  }, [])
+  const endMutation = useCallback(() => {
+    mutationRef.current = null
+    if (mountedRef.current) setMutation(null)
+  }, [])
+
+  const doRevert = useCallback(
+    async (row: SeoAutoApplyRow, force: boolean) => {
+      if (!beginMutation('revert')) return
+      try {
+        const res = await revertAutopilotChange(row.id, force)
+        if (!mountedRef.current) return
+        if (res.ok) {
+          toast.success('Change reverted.')
+          setLastReverted(displayTitle(row))
+          onChanged?.()
+          await load(true)
+          return
+        }
+        if (res.conflictFields !== undefined) {
+          setConflict({ row, fields: res.conflictFields })
+          return
+        }
+        toast.error(res.error)
+      } catch (err) {
+        if (mountedRef.current) {
+          toast.error(err instanceof Error && err.message ? err.message : 'Request failed.')
+        }
+      } finally {
+        endMutation()
+      }
+    },
+    [beginMutation, endMutation, load, onChanged],
+  )
+
+  const rows = data?.docs ?? []
+  const total = data?.total ?? 0
+  const pageSize = data?.pageSize ?? PAGE_SIZE
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  const rangeStart = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const rangeEnd = Math.min(total, page * pageSize)
+  const filtering = status !== '' || outcome !== ''
+  const statusId = `${baseId}-status`
+  const outcomeId = `${baseId}-outcome`
+
+  return (
+    <SectionCard
+      title="Applied by autopilot"
+      description="Every unattended change with its gate results and Search Console outcome. Revert restores the previous values and reopens the issue."
+      action={
+        <div className="flex flex-wrap items-center gap-2">
+          <label htmlFor={statusId} className="sr-only">
+            Filter by status
+          </label>
+          <select
+            id={statusId}
+            className={SELECT_CLASS}
+            value={status}
+            disabled={busy}
+            onChange={(e) => {
+              const v = e.target.value
+              setStatus(isStatus(v) ? v : '')
+              setPage(1)
+            }}
+          >
+            {STATUS_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+          <label htmlFor={outcomeId} className="sr-only">
+            Filter by outcome
+          </label>
+          <select
+            id={outcomeId}
+            className={SELECT_CLASS}
+            value={outcome}
+            disabled={busy}
+            onChange={(e) => {
+              const v = e.target.value
+              setOutcome(isOutcome(v) ? v : '')
+              setPage(1)
+            }}
+          >
+            {OUTCOME_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      }
+    >
+      {/* Always mounted so AT reliably announces the text change; empty (and unpadded) until a revert lands. */}
+      <p
+        className={`text-muted-foreground text-sm ${lastReverted && !loading ? 'mb-3' : ''}`}
+        role="status"
+        aria-live="polite"
+      >
+        {lastReverted && !loading ? `Reverted the change to “${lastReverted}”.` : ''}
+      </p>
+      {loading ? (
+        <SeoLoading label="Loading autopilot history…" />
+      ) : error ? (
+        <SeoErrorState message={error} onRetry={() => void load(false)} />
+      ) : rows.length === 0 ? (
+        <SeoEmptyState
+          icon={<Bot size={24} />}
+          title={
+            filtering ? 'No changes match these filters' : 'Autopilot has not applied anything yet'
+          }
+          description={
+            filtering
+              ? 'Clear the status or outcome filter to see the full ledger.'
+              : 'Enable fix types in Settings → SEO → SEO Autopilot; changes show up here after the daily run.'
+          }
+          action={
+            filtering ? (
+              <button
+                type="button"
+                className={btnSecondary}
+                onClick={() => {
+                  setStatus('')
+                  setOutcome('')
+                  setPage(1)
+                }}
+              >
+                Clear filters
+              </button>
+            ) : onNavigate ? (
+              <button
+                type="button"
+                className={btnSecondary}
+                onClick={() => onNavigate(SEO_SETTINGS_PATH)}
+              >
+                Open autopilot settings
+              </button>
+            ) : undefined
+          }
+        />
+      ) : (
+        <div className="space-y-3">
+          <div className="border-border overflow-x-auto rounded-md border">
+            <table className="w-full text-sm" aria-label="Changes applied by autopilot">
+              <thead>
+                <tr className="border-border bg-muted/40 text-muted-foreground border-b text-left text-xs">
+                  <th scope="col" className="px-3 py-2.5 font-medium">
+                    Change
+                  </th>
+                  <th scope="col" className="px-3 py-2.5 font-medium">
+                    Before → after
+                  </th>
+                  <th scope="col" className="px-3 py-2.5 font-medium">
+                    Quality
+                  </th>
+                  <th scope="col" className="px-3 py-2.5 font-medium">
+                    Applied on
+                  </th>
+                  <th scope="col" className="px-3 py-2.5 font-medium">
+                    Outcome
+                  </th>
+                  <th scope="col" className="px-3 py-2.5">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {rows.map((row) => {
+                  const title = displayTitle(row)
+                  const editPath =
+                    row.entityId !== null
+                      ? sourceEditPath(row.collection ?? undefined, row.entityId)
+                      : null
+                  return (
+                    <tr key={row.id} className="hover:bg-accent/20 align-top transition-colors">
+                      <td className="px-3 py-3">
+                        <div className="flex flex-wrap items-center gap-2">
+                          {editPath && onNavigate ? (
+                            <button
+                              type="button"
+                              className="text-foreground focus-visible:ring-ring rounded-sm text-left font-medium hover:underline focus-visible:ring-2 focus-visible:outline-none"
+                              onClick={() => onNavigate(editPath)}
+                              aria-label={`Open ${title} in editor`}
+                            >
+                              {title}
+                            </button>
+                          ) : (
+                            <span className="text-foreground font-medium">{title}</span>
+                          )}
+                          <KindBadge kind={row.kind} />
+                          <StatusBadge status={row.status} />
+                        </div>
+                        <p className="text-muted-foreground mt-0.5 text-xs">
+                          <span>{issueTypeLabel(row.issueType)}</span>
+                          {row.entityUrl && row.entityTitle ? (
+                            <>
+                              <span aria-hidden> · </span>
+                              <span>{row.entityUrl}</span>
+                            </>
+                          ) : null}
+                        </p>
+                      </td>
+                      <td className="max-w-md px-3 py-3">
+                        <Diff row={row} />
+                      </td>
+                      <td className="px-3 py-3">
+                        <Quality gate={row.gate} />
+                      </td>
+                      <td className="text-muted-foreground px-3 py-3 text-xs whitespace-nowrap">
+                        <AppliedTime iso={row.appliedAt} />
+                      </td>
+                      <td className="px-3 py-3">
+                        <OutcomeBadge outcome={row.outcome} />
+                      </td>
+                      <td className="px-3 py-3 text-right">
+                        {data?.canRevert && row.status === 'applied' ? (
+                          <button
+                            type="button"
+                            className={ROW_BUTTON_CLASS}
+                            onClick={() => setTarget(row)}
+                            disabled={busy}
+                            aria-label={`Revert change to ${title}`}
+                          >
+                            <Undo2 className="h-4 w-4" aria-hidden />
+                            Revert
+                          </button>
+                        ) : null}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+          {total > pageSize ? (
+            <nav
+              className="flex items-center justify-between gap-3 text-sm"
+              aria-label="Autopilot history pagination"
+            >
+              <p className="text-muted-foreground">
+                {rangeStart}–{rangeEnd} of {total}
+              </p>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  className={PAGER_BUTTON_CLASS}
+                  disabled={page <= 1 || busy}
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                >
+                  Previous
+                </button>
+                <button
+                  type="button"
+                  className={PAGER_BUTTON_CLASS}
+                  disabled={page >= totalPages || busy}
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                >
+                  Next
+                </button>
+              </div>
+            </nav>
+          ) : null}
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={target !== null}
+        onClose={() => setTarget(null)}
+        onConfirm={() => {
+          if (target) void doRevert(target, false)
+        }}
+        title="Revert this autopilot change?"
+        description="The previous values are restored (a new version is created) and the issue is reopened. Autopilot will not touch this issue again for 30 days."
+        confirmLabel="Revert change"
+        destructive
+      />
+      <ConfirmDialog
+        open={conflict !== null}
+        onClose={() => setConflict(null)}
+        onConfirm={() => {
+          if (conflict) void doRevert(conflict.row, true)
+        }}
+        title="Someone edited this since"
+        description={`These fields were changed after autopilot applied them: ${
+          conflict?.fields.join(', ') ?? ''
+        }. Reverting anyway overwrites those edits.`}
+        confirmLabel="Revert anyway"
+        destructive
+      />
+    </SectionCard>
+  )
+}