@prenta/admin 1.14.0 → 1.15.0

package/src/views/seo/ProposalsTab.tsx

@@ -9,7 +9,9 @@
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
+  AlertTriangle,
   ArrowRightLeft,
+  Bot,
   Check,
   ChevronDown,
   Inbox,
@@ -27,6 +29,7 @@ import {
   generateSeoProposals,
   type SeoProposal,
   type SeoProposalBulkApplyItem,
+  type SeoProposalsPayload,
 } from '../../lib/seo-service.js'
 import { hasPlanFeature, type PlanInfo } from '../../lib/plan.js'
 import { brandAlignmentLabel, brandAlignmentTone } from '../../lib/brand-voice-client.js'
@@ -42,10 +45,13 @@ import {
   btnSecondary,
 } from '../../components/seo/primitives.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { AutopilotAppliedSection } from './AutopilotAppliedSection.js'
+import { relativeAge } from './relative-age.js'
 import { useSeoResource } from './useSeoResource.js'
 
 const GENERATE_BATCH_SIZE = 10
 const AI_SETTINGS_PATH = '/settings?tab=ai'
+const SEO_SETTINGS_PATH = '/settings?tab=seo'
 /** Stable empty list so memoised derivations don't recompute while loading. */
 const NO_PROPOSALS: SeoProposal[] = []
 
@@ -56,17 +62,6 @@ function errorMessage(err: unknown): string {
   return err instanceof Error && err.message ? err.message : 'Request failed.'
 }
 
-function relativeAge(iso: string | null): string {
-  if (!iso) return ''
-  const ms = Date.now() - new Date(iso).getTime()
-  if (!Number.isFinite(ms) || ms < 0) return ''
-  const minutes = Math.round(ms / 60_000)
-  if (minutes < 60) return `${Math.max(1, minutes)}m ago`
-  const hours = Math.round(minutes / 60)
-  if (hours < 48) return `${hours}h ago`
-  return `${Math.round(hours / 24)}d ago`
-}
-
 function confidenceTone(c: number): 'good' | 'fair' | 'poor' {
   return c >= 0.7 ? 'good' : c >= 0.4 ? 'fair' : 'poor'
 }
@@ -122,6 +117,60 @@ function SourceBadge({ source }: { source: SeoProposal['source'] }) {
   }
 }
 
+/**
+ * Short chip wording for the engine-level pause reasons the server emits
+ * (`AutopilotPauseReason`). An unknown value falls through verbatim so a new
+ * reason is still visible rather than hidden behind a generic label.
+ */
+const CHIP_PAUSE_LABEL: Record<string, string> = {
+  outcome_regression: 'traffic regression',
+  owner_unavailable: 'owner unavailable',
+  manual: 'paused by admin',
+}
+
+function chipPauseLabel(reason: string): string {
+  return CHIP_PAUSE_LABEL[reason] ?? reason
+}
+
+/**
+ * Header chip summarising the autopilot's state. Hidden while autopilot is off
+ * (nothing to report — including an engine disabled while it was still paused,
+ * since `PUT { enabled: false }` does not clear the pause); a paused engine
+ * gets the warning tone and names the reason. Clicking opens the Autopilot
+ * card in Settings → SEO.
+ */
+function AutopilotChip({
+  autopilot,
+  onNavigate,
+}: {
+  autopilot: SeoProposalsPayload['autopilot']
+  onNavigate?: (path: string) => void
+}) {
+  if (!autopilot.enabled) return null
+  const paused = autopilot.pausedReason !== null
+  const label =
+    autopilot.pausedReason !== null
+      ? `Autopilot paused — ${chipPauseLabel(autopilot.pausedReason)}`
+      : `Autopilot on · ${autopilot.appliedLast7d} applied this week`
+  const tone = paused
+    ? 'border-warning/40 bg-warning/10 text-foreground hover:bg-warning/20'
+    : 'border-border bg-muted/40 text-foreground hover:bg-accent'
+  return (
+    <button
+      type="button"
+      className={`focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${tone}`}
+      onClick={() => onNavigate?.(SEO_SETTINGS_PATH)}
+    >
+      {paused ? (
+        <AlertTriangle className="text-warning h-3.5 w-3.5" aria-hidden />
+      ) : (
+        <Bot className="h-3.5 w-3.5" aria-hidden />
+      )}
+      {label}
+    </button>
+  )
+}
+
 export function ProposalsTab({
   planInfo,
   onChanged,
@@ -139,6 +188,8 @@ export function ProposalsTab({
   const [mutation, setMutation] = useState<Mutation | null>(null)
   const [pendingItems, setPendingItems] = useState<SeoProposalBulkApplyItem[]>([])
   const [generating, setGenerating] = useState<{ done: number; total: number } | null>(null)
+  /** Bumped after every mutation so the autopilot ledger below refetches with the inbox. */
+  const [refreshKey, setRefreshKey] = useState(0)
   const stopRef = useRef(false)
   /** Mirrors `mutation` synchronously so a second call in the same tick cannot slip past. */
   const mutationRef = useRef<Mutation | null>(null)
@@ -202,6 +253,17 @@ export function ProposalsTab({
 
   const afterMutation = useCallback(() => {
     setSelected(new Set())
+    refetch()
+    setRefreshKey((k) => k + 1)
+    onChanged?.()
+  }, [refetch, onChanged])
+
+  /**
+   * A revert in the ledger reopens its issue / suggestion server-side, so the
+   * inbox and the SEO page refetch. Not `afterMutation`: that bumps
+   * `refreshKey`, and the ledger already reloads itself after a revert.
+   */
+  const handleLedgerChanged = useCallback(() => {
     refetch()
     onChanged?.()
   }, [refetch, onChanged])
@@ -367,6 +429,18 @@ export function ProposalsTab({
     )
   ) : null
 
+  // `data?.autopilot` (not just `data`): a core deployed before autopilot omits the field.
+  const autopilotChip = data?.autopilot ? (
+    <AutopilotChip autopilot={data.autopilot} onNavigate={onNavigate} />
+  ) : null
+  const headerAction =
+    autopilotChip || generateAction ? (
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        {autopilotChip}
+        {generateAction}
+      </div>
+    ) : undefined
+
   return (
     <div className="space-y-6">
       {!inlineApplyEnabled ? (
@@ -376,7 +450,7 @@ export function ProposalsTab({
       <SectionCard
         title="Proposals"
         description="Review, approve, or dismiss what the AI proposes across issue fixes and 404 redirects."
-        action={generateAction}
+        action={headerAction}
       >
         {loading ? (
           <SeoLoading />
@@ -526,6 +600,12 @@ export function ProposalsTab({
         )}
       </SectionCard>
 
+      <AutopilotAppliedSection
+        onNavigate={onNavigate}
+        refreshKey={refreshKey}
+        onChanged={handleLedgerChanged}
+      />
+
       <ConfirmDialog
         open={confirmApply}
         onClose={() => setConfirmApply(false)}

package/src/views/seo/RedirectsTab.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import {
   Plus,
   Trash2,
@@ -46,6 +46,8 @@ import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../../components/
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { useSeoResource } from './useSeoResource.js'
 
+const SEO_SETTINGS_PATH = '/settings?tab=seo'
+
 function OverviewCards({ onRefetchKey }: { onRefetchKey: number }) {
   const { data, loading, error, refetch } = useSeoResource(fetchRedirectOverview, [onRefetchKey])
   if (loading) return <SeoLoading label="Loading redirect overview…" />
@@ -70,10 +72,16 @@ function OverviewCards({ onRefetchKey }: { onRefetchKey: number }) {
   )
 }
 
-function RecoverySettingsCard() {
+/**
+ * 404 recovery settings. Only AI re-ranking lives here; the auto-apply policy
+ * (threshold, budget, gate) moved to SEO Autopilot, so the card points there
+ * instead of exposing a second copy of the controls.
+ */
+function RecoverySettingsCard({ onNavigate }: { onNavigate?: (path: string) => void }) {
   const { data, loading, error, refetch } = useSeoResource(fetchRedirectRecoverySettings, [])
   const [saving, setSaving] = useState(false)
   const [local, setLocal] = useState<RedirectRecoverySettings | null>(null)
+  const aiRerankId = useId()
 
   useEffect(() => {
     if (data) setLocal(data)
@@ -82,7 +90,7 @@ function RecoverySettingsCard() {
   async function handleSave() {
     if (!local) return
     setSaving(true)
-    const res = await saveRedirectRecoverySettings(local)
+    const res = await saveRedirectRecoverySettings({ aiRerank: local.aiRerank })
     setSaving(false)
     if (res.error) return toast.error(res.error)
     toast.success('Recovery settings saved.')
@@ -96,58 +104,39 @@ function RecoverySettingsCard() {
   return (
     <SectionCard
       title="404 recovery settings"
-      description="Control AI re-ranking and optional auto-redirect for high-confidence matches"
+      description="Control how suggested redirects are ranked before you review them"
     >
       <div className="space-y-4">
-        <label className="flex items-start gap-3">
+        <div className="flex items-start gap-3">
           <input
+            id={aiRerankId}
             type="checkbox"
-            className="border-border mt-1 h-4 w-4 rounded"
+            className="border-border focus-visible:ring-ring mt-1 h-4 w-4 rounded focus-visible:ring-2 focus-visible:outline-none"
             checked={local.aiRerank}
             onChange={(e) => setLocal({ ...local, aiRerank: e.target.checked })}
+            aria-describedby={`${aiRerankId}-help`}
           />
-          <span>
-            <span className="text-foreground text-sm font-medium">AI re-ranking</span>
-            <span className="text-muted-foreground block text-sm">
+          <div>
+            <label htmlFor={aiRerankId} className="text-foreground text-sm font-medium">
+              AI re-ranking
+            </label>
+            <p id={`${aiRerankId}-help`} className="text-muted-foreground text-sm">
               Use semantic search to resolve ambiguous matches (40–84% heuristic confidence).
-            </span>
-          </span>
-        </label>
-        <label className="flex items-start gap-3">
-          <input
-            type="checkbox"
-            className="border-border mt-1 h-4 w-4 rounded"
-            checked={local.autoApply}
-            onChange={(e) => setLocal({ ...local, autoApply: e.target.checked })}
-          />
-          <span>
-            <span className="text-foreground text-sm font-medium">
-              Auto-apply high-confidence redirects
-            </span>
-            <span className="text-muted-foreground block text-sm">
-              Create 301 redirects automatically when confidence meets the threshold (off by
-              default).
-            </span>
-          </span>
-        </label>
-        <label className="block max-w-xs">
-          <span className="text-foreground text-sm font-medium">Auto-apply minimum confidence</span>
-          <input
-            type="number"
-            min={50}
-            max={100}
-            value={local.autoApplyMinConfidence}
-            disabled={!local.autoApply}
-            onChange={(e) =>
-              setLocal({
-                ...local,
-                autoApplyMinConfidence: Math.max(50, Math.min(100, Number(e.target.value) || 85)),
-              })
-            }
-            className="border-border bg-input-background text-foreground focus-visible:ring-ring mt-1 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
-          />
-        </label>
-        <button className={btnSecondary} onClick={handleSave} disabled={saving}>
+            </p>
+          </div>
+        </div>
+        <p className="text-muted-foreground text-sm">
+          Auto-apply for high-confidence redirects is managed by{' '}
+          <button
+            type="button"
+            className="text-primary focus-visible:ring-ring rounded-sm font-medium underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:outline-none"
+            onClick={() => onNavigate?.(SEO_SETTINGS_PATH)}
+          >
+            SEO Autopilot
+          </button>
+          .
+        </p>
+        <button type="button" className={btnSecondary} onClick={handleSave} disabled={saving}>
           {saving ? 'Saving…' : 'Save settings'}
         </button>
       </div>
@@ -167,17 +156,7 @@ function Ai404RecoveryCard({ onApplied }: { onApplied: () => void }) {
       toast.error(res.error)
       return
     }
-    const autoMsg =
-      res.autoApplied && res.autoApplied > 0
-        ? ` ${res.autoApplied} high-confidence redirect${res.autoApplied === 1 ? '' : 's'} applied automatically.`
-        : ''
-    toast.success(`Generated 404 recovery suggestions.${autoMsg}`)
-    if (res.governanceBlocked) {
-      // AI governance vetoed the auto-apply (eligible plans were stored as
-      // pending suggestions). Tell the operator why, since the SEO module's
-      // "Auto-apply" toggle alone no longer decides.
-      toast.info(`Auto-apply skipped: ${res.governanceBlocked}`)
-    }
+    toast.success('Generated 404 recovery suggestions.')
     refetch()
   }
 
@@ -313,7 +292,7 @@ function ChainMapCard({ onFlattened }: { onFlattened: () => void }) {
   )
 }
 
-export function RedirectsTab() {
+export function RedirectsTab({ onNavigate }: { onNavigate?: (path: string) => void }) {
   const [refetchKey, setRefetchKey] = useState(0)
   const { data, loading, error, refetch } = useSeoResource(fetchRedirectRules, [refetchKey])
   const [editor, setEditor] = useState<{ rule: RedirectRule | null } | null>(null)
@@ -371,7 +350,7 @@ export function RedirectsTab() {
       <OverviewCards onRefetchKey={refetchKey} />
 
       <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
-        <RecoverySettingsCard />
+        <RecoverySettingsCard onNavigate={onNavigate} />
         <Ai404RecoveryCard onApplied={refetchAll} />
         <ChainMapCard onFlattened={refetchAll} />
       </div>

package/src/views/seo/relative-age.ts

@@ -0,0 +1,15 @@
+/**
+ * Compact "how long ago" label shared by the SEO review surfaces (proposal age,
+ * autopilot ledger). Returns `''` for missing, unparsable, or future timestamps
+ * so callers can fall back to an absolute date.
+ */
+export function relativeAge(iso: string | null, now: number = Date.now()): string {
+  if (!iso) return ''
+  const ms = now - new Date(iso).getTime()
+  if (!Number.isFinite(ms) || ms < 0) return ''
+  const minutes = Math.round(ms / 60_000)
+  if (minutes < 60) return `${Math.max(1, minutes)}m ago`
+  const hours = Math.round(minutes / 60)
+  if (hours < 48) return `${hours}h ago`
+  return `${Math.round(hours / 24)}d ago`
+}