@prenta/admin 1.14.0 → 1.15.0

package/src/views/settings/SeoAutopilotCard.tsx

@@ -0,0 +1,826 @@
+'use client'
+
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { AlertTriangle, Bot, Info, Loader2, Play, RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  SEO_AUTOPILOT_LIMITS,
+  fetchAutopilotSettings,
+  runAutopilotNow,
+  updateAutopilotSettings,
+  type SeoAutopilotHaltReason,
+  type SeoAutopilotIssueType,
+  type SeoAutopilotPauseReason,
+  type SeoAutopilotRunSummary,
+  type SeoAutopilotSettings,
+  type SeoAutopilotSettingsPatch,
+} from '../../lib/seo-service.js'
+import { brandAlignmentLabel } from '../../lib/brand-voice-client.js'
+import { Skeleton } from '../../components/ui/Skeleton.js'
+import { relativeAge } from '../seo/relative-age.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const CHECKBOX_CLASS =
+  'border-border accent-primary mt-1 h-4 w-4 shrink-0 rounded focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const SECONDARY_BUTTON_CLASS =
+  'border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const LINK_BUTTON_CLASS =
+  'text-primary rounded-sm underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'
+
+/**
+ * The one mutation allowed in flight at a time. Inputs stay enabled while it
+ * runs (so focus and a blur-then-click sequence survive); only the action
+ * buttons lock and the card is marked `aria-busy`.
+ */
+type Mutation = 'save' | 'run'
+
+interface TypeOption {
+  id: SeoAutopilotIssueType
+  label: string
+  help: string
+  producer: 'Rule-based' | 'AI'
+}
+
+/**
+ * The fix types offered, grouped for display. Must cover `SEO_AUTOPILOT_ISSUE_TYPES`
+ * exactly once each — the id type keeps stray ids out, and the render test
+ * pins the set against the mirrored constant so a type added server-side
+ * cannot silently go un-offered. Exported for that test only.
+ */
+export const AUTOPILOT_TYPE_GROUPS: ReadonlyArray<{
+  label: string
+  options: readonly TypeOption[]
+}> = [
+  {
+    label: 'Titles',
+    options: [
+      {
+        id: 'missing-meta-title',
+        label: 'Missing meta title',
+        help: 'Writes a page title when none is set.',
+        producer: 'AI',
+      },
+      {
+        id: 'meta-title-length',
+        label: 'Meta title length',
+        help: 'Trims or rewrites titles outside 30–60 characters.',
+        producer: 'Rule-based',
+      },
+      {
+        id: 'duplicate-meta-title',
+        label: 'Duplicate meta title',
+        help: 'Rewrites a title shared with another page.',
+        producer: 'AI',
+      },
+    ],
+  },
+  {
+    label: 'Descriptions',
+    options: [
+      {
+        id: 'missing-meta-description',
+        label: 'Missing meta description',
+        help: 'Writes a description when none is set.',
+        producer: 'AI',
+      },
+      {
+        id: 'meta-description-length',
+        label: 'Meta description length',
+        help: 'Trims or rewrites descriptions outside 120–160 characters.',
+        producer: 'Rule-based',
+      },
+      {
+        id: 'duplicate-meta-description',
+        label: 'Duplicate meta description',
+        help: 'Rewrites a description shared with another page.',
+        producer: 'AI',
+      },
+    ],
+  },
+  {
+    label: 'Technical',
+    options: [
+      {
+        id: 'missing-canonical',
+        label: 'Missing canonical',
+        help: 'Sets the canonical URL to the page’s own URL.',
+        producer: 'Rule-based',
+      },
+      {
+        id: 'accidental-noindex',
+        label: 'Accidental noindex',
+        help: 'Clears noindex on a published page.',
+        producer: 'Rule-based',
+      },
+      {
+        id: 'missing-structured-data',
+        label: 'Missing structured data',
+        help: 'Adds the collection’s default Schema.org type.',
+        producer: 'Rule-based',
+      },
+    ],
+  },
+  {
+    label: 'Redirects',
+    options: [
+      {
+        id: 'redirect',
+        label: '404-recovery redirects',
+        help: 'Creates a 301 when a dead URL matches a live page above the confidence threshold.',
+        producer: 'AI',
+      },
+    ],
+  },
+]
+
+const TYPE_LABEL: Record<SeoAutopilotIssueType, string> = Object.fromEntries(
+  AUTOPILOT_TYPE_GROUPS.flatMap((g) => g.options.map((o) => [o.id, o.label])),
+) as Record<SeoAutopilotIssueType, string>
+
+const PAUSE_LABEL: Record<SeoAutopilotPauseReason, string> = {
+  outcome_regression: 'a page lost traffic after an autopilot change',
+  owner_unavailable: 'the admin who enabled it is no longer active',
+  manual: 'it was paused manually',
+}
+
+/**
+ * `budget_exhausted` is the run's wall-clock budget, not the daily change cap:
+ * the cap is a gate reason (`cap_per_day`) and never halts a run. Remaining
+ * proposals are simply picked up by the next tick.
+ */
+const HALT_LABEL: Record<SeoAutopilotHaltReason, string> = {
+  disabled: 'The run stopped because autopilot was disabled',
+  paused: 'The run stopped because autopilot was paused',
+  owner_unavailable: 'The run stopped because the admin who enabled autopilot is no longer active',
+  already_running: 'A run was already in progress',
+  verify_failures: 'The run stopped after too many verification failures',
+  budget_exhausted:
+    'The run stopped because it ran out of time; remaining proposals wait for the next tick',
+  ledger_write_failed: 'The run stopped because a change could not be recorded (it was undone)',
+  apply_failed:
+    'The run stopped because applying a change failed unexpectedly; details are in the server log',
+  run_failed: 'The run stopped with an unexpected error; details are in the server log',
+}
+
+function isKnownHaltReason(reason: string): reason is SeoAutopilotHaltReason {
+  return Object.prototype.hasOwnProperty.call(HALT_LABEL, reason)
+}
+
+function haltLabel(reason: string): string {
+  return isKnownHaltReason(reason) ? HALT_LABEL[reason] : `The run stopped with an error: ${reason}`
+}
+
+/** `relativeAge` returns `''` for future or unparsable timestamps; fall back to an absolute date. */
+function lastRunLabel(iso: string | null): string {
+  if (!iso) return 'Never run'
+  const age = relativeAge(iso)
+  if (age) return `Last run ${age}`
+  const t = new Date(iso).getTime()
+  return Number.isFinite(t) ? `Last run ${new Date(t).toLocaleDateString()}` : 'Last run: unknown'
+}
+
+function runToast(s: SeoAutopilotRunSummary): void {
+  const counts = `${s.applied} applied, ${s.verifyFailed} verify-failed${
+    s.reverted > 0 ? `, ${s.reverted} reverted` : ''
+  }.`
+  if (!s.halted || !s.haltedReason) {
+    toast.success(`Autopilot finished: ${counts}`)
+    return
+  }
+  if (s.haltedReason === 'already_running') {
+    toast.success('A run was already in progress — nothing new was applied.')
+    return
+  }
+  toast.warning(`${haltLabel(s.haltedReason)}. ${counts}`)
+}
+
+/**
+ * Settings → SEO "SEO Autopilot" card (spec §6). Owns its own fetch/save like
+ * `SeoDigestCard`; every control PUTs a sparse patch immediately and the card
+ * adopts the server's resolved policy from the response. One mutation (a save
+ * or a manual run) is allowed in flight at a time; saves queue behind each
+ * other so a blur-commit followed by a click both land, in order.
+ */
+export function SeoAutopilotCard({
+  canEdit,
+  onNavigate,
+}: {
+  canEdit: boolean
+  onNavigate?: (path: string) => void
+}) {
+  const baseId = useId()
+  const [settings, setSettings] = useState<SeoAutopilotSettings | null>(null)
+  /** Mirrors `settings` synchronously so a queued save reads the latest resolved policy. */
+  const settingsRef = useRef<SeoAutopilotSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [mutation, setMutation] = useState<Mutation | null>(null)
+  /** Mirrors `mutation` synchronously so a second call in the same tick cannot slip past. */
+  const mutationRef = useRef<Mutation | null>(null)
+  /** Saves are serialised through this chain instead of being dropped when one is in flight. */
+  const saveChainRef = useRef<Promise<unknown>>(Promise.resolve())
+  const mountedRef = useRef(true)
+  const busy = mutation !== null
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  const commitSettings = useCallback((next: SeoAutopilotSettings) => {
+    settingsRef.current = next
+    setSettings(next)
+  }, [])
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setLoadError(null)
+    const res = await fetchAutopilotSettings()
+    if (!mountedRef.current) return
+    if (res.settings) commitSettings(res.settings)
+    else setLoadError(res.error)
+    setLoading(false)
+  }, [commitSettings])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  /** Re-read without the skeleton (after a run); a failure is a toast, not a card-level error. */
+  const refresh = useCallback(async () => {
+    const res = await fetchAutopilotSettings()
+    if (!mountedRef.current) return
+    if (res.settings) commitSettings(res.settings)
+    else toast.error(res.error)
+  }, [commitSettings])
+
+  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)
+  }, [])
+  /** An overlapping mutation is never dropped silently. */
+  const reportOverlap = useCallback(() => {
+    toast.info(
+      mutationRef.current === 'run'
+        ? 'Autopilot is still running — try again when it finishes.'
+        : 'Still saving the previous change…',
+    )
+  }, [])
+
+  /** Resolves `true` when the server accepted the patch. */
+  async function performSave(
+    patch: SeoAutopilotSettingsPatch,
+    successMessage: string,
+  ): Promise<boolean> {
+    const current = settingsRef.current
+    if (!current || !mountedRef.current) return false
+    if (!beginMutation('save')) {
+      reportOverlap()
+      return false
+    }
+    try {
+      // A pause for `owner_unavailable` is repaired by any save (the saver
+      // becomes the owner), so clear the stale reason in the same write —
+      // except when the save turns autopilot off: "disabled — resumed" would
+      // be contradictory and there is nothing to resume.
+      const resumes =
+        current.pausedAt !== null &&
+        current.pausedReason === 'owner_unavailable' &&
+        patch.enabled !== false
+      const body: SeoAutopilotSettingsPatch = resumes ? { ...patch, resume: true } : patch
+      const res = await updateAutopilotSettings(body)
+      if (!mountedRef.current) return false
+      if (!res.ok) {
+        toast.error(res.error ?? 'Failed to update autopilot settings')
+        return false
+      }
+      toast.success(
+        resumes && !patch.resume ? `${successMessage} — autopilot resumed` : successMessage,
+      )
+      if (res.settings) commitSettings(res.settings)
+      else await refresh()
+      return true
+    } finally {
+      endMutation()
+    }
+  }
+
+  /**
+   * Queue a sparse patch behind any save already in flight. Callers await the
+   * result to know whether to keep or reset a local draft.
+   */
+  function save(patch: SeoAutopilotSettingsPatch, successMessage: string): Promise<boolean> {
+    const next = saveChainRef.current.then(() => performSave(patch, successMessage))
+    saveChainRef.current = next.catch(() => undefined)
+    return next
+  }
+
+  async function handleRun() {
+    if (!beginMutation('run')) {
+      reportOverlap()
+      return
+    }
+    try {
+      const res = await runAutopilotNow()
+      if (!mountedRef.current) return
+      if (!res.ok || !res.summary) {
+        toast.error(res.error ?? 'Autopilot run failed')
+        return
+      }
+      runToast(res.summary)
+      await refresh()
+    } finally {
+      endMutation()
+    }
+  }
+
+  if (loading) {
+    return (
+      <SettingsCard title="SEO Autopilot">
+        <div aria-busy="true" aria-live="polite">
+          <span className="sr-only">Loading autopilot settings…</span>
+          <Skeleton lines={4} />
+        </div>
+      </SettingsCard>
+    )
+  }
+  if (!settings) {
+    return (
+      <SettingsCard title="SEO Autopilot">
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-4 text-sm"
+        >
+          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">
+            Failed to load autopilot settings{loadError ? `: ${loadError}` : ''}.
+          </span>
+          <button
+            type="button"
+            onClick={() => void load()}
+            className="border-destructive/40 focus-visible:ring-ring inline-flex items-center gap-2 rounded-md border px-3 py-1 transition-colors hover:opacity-80 focus-visible:ring-2 focus-visible:outline-none"
+          >
+            <RefreshCw size={14} aria-hidden="true" />
+            Retry
+          </button>
+        </div>
+      </SettingsCard>
+    )
+  }
+
+  const paused = settings.pausedAt !== null
+  const pausedTypes = Object.entries(settings.pausedTypes) as Array<[SeoAutopilotIssueType, string]>
+  // Inputs lock only for read-only users; a save in flight must not steal
+  // focus or swallow the next click (saves queue). Action buttons also lock while busy.
+  const disabled = !canEdit
+  const actionDisabled = !canEdit || busy
+  const running = mutation === 'run'
+  const lastRun = settings.lastRun
+  const haltNeutral = lastRun?.haltedReason === 'already_running'
+
+  // Governance veto (spec §2): an enabled type whose AI feature has "Requires
+  // approval" on can never pass the gate. Warn only when it actually bites.
+  const anyMetaEnabled = AUTOPILOT_TYPE_GROUPS.some((g) =>
+    g.options.some((o) => o.id !== 'redirect' && settings.types[o.id] === true),
+  )
+  const vetoed: string[] = []
+  if (anyMetaEnabled && settings.governance.issueFixApprovalRequired) vetoed.push('Issue fixes')
+  if (settings.types.redirect === true && settings.governance.redirectApprovalRequired) {
+    vetoed.push('404-recovery redirects')
+  }
+
+  // Why "Run now" is unavailable — surfaced as `title` for pointer users and
+  // as an sr-only description for keyboard/AT users. `null` when runnable.
+  const runHint = !settings.enabled
+    ? 'Enable autopilot to run it now'
+    : paused
+      ? 'Resume autopilot to run it now'
+      : null
+  const runHintId = `${baseId}-run-hint`
+
+  const settingsAiLink = (
+    <button
+      type="button"
+      className={LINK_BUTTON_CLASS}
+      onClick={() => onNavigate?.('/settings?tab=ai')}
+    >
+      Settings → AI
+    </button>
+  )
+
+  return (
+    <SettingsCard
+      title="SEO Autopilot"
+      description="Apply SEO fixes without a click. Each fix type is opt-in; every unattended change is gated, recorded, and revertible from SEO → Proposals."
+      busy={busy}
+      actions={
+        <>
+          <button
+            type="button"
+            className="bg-primary text-primary-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={() => void handleRun()}
+            disabled={actionDisabled || runHint !== null}
+            aria-busy={running || undefined}
+            title={runHint ?? undefined}
+            aria-describedby={runHint ? runHintId : undefined}
+          >
+            {running ? (
+              <Loader2 size={16} className="motion-safe:animate-spin" aria-hidden="true" />
+            ) : (
+              <Play size={16} aria-hidden="true" />
+            )}
+            Run now
+          </button>
+          {runHint ? (
+            <span id={runHintId} className="sr-only">
+              {runHint}
+            </span>
+          ) : null}
+        </>
+      }
+    >
+      <div className="flex flex-col gap-5">
+        <SettingsToggleRow
+          label="Enable autopilot"
+          description="Runs daily after the search-data sync. The admin who enables it is the author of record for every change."
+          checked={settings.enabled}
+          onChange={(v) =>
+            void save({ enabled: v }, v ? 'Autopilot enabled' : 'Autopilot disabled')
+          }
+          disabled={disabled}
+        />
+
+        <div className="flex flex-col gap-1">
+          <p
+            className="text-muted-foreground flex flex-wrap items-center gap-x-2 text-sm"
+            role="status"
+            aria-label="Last run"
+          >
+            <Bot size={16} className="shrink-0" aria-hidden="true" />
+            <span>
+              {settings.lastRunAt ? (
+                <time
+                  dateTime={settings.lastRunAt}
+                  title={new Date(settings.lastRunAt).toLocaleString()}
+                >
+                  {lastRunLabel(settings.lastRunAt)}
+                </time>
+              ) : (
+                lastRunLabel(null)
+              )}
+            </span>
+            {lastRun ? (
+              <>
+                <span aria-hidden="true">·</span>
+                <span>{lastRun.applied} applied</span>
+                <span aria-hidden="true">·</span>
+                <span>{lastRun.verifyFailed} verify-failed</span>
+                <span aria-hidden="true">·</span>
+                <span>{lastRun.reverted} reverted</span>
+              </>
+            ) : null}
+          </p>
+          {lastRun?.halted && lastRun.haltedReason ? (
+            <p
+              className={`flex items-start gap-2 text-sm ${
+                haltNeutral ? 'text-muted-foreground' : 'text-warning'
+              }`}
+              role="status"
+              aria-label="Run stopped"
+            >
+              {haltNeutral ? (
+                <Info size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+              ) : (
+                <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+              )}
+              <span>{haltLabel(lastRun.haltedReason)}.</span>
+            </p>
+          ) : null}
+        </div>
+
+        {paused ? (
+          <section
+            className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-3"
+            aria-label="Autopilot is paused"
+          >
+            <p className="text-foreground flex items-start gap-2 text-sm">
+              <AlertTriangle
+                size={16}
+                className="text-warning mt-0.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span>
+                Autopilot is <span className="font-medium">paused</span>
+                {settings.pausedReason ? ` because ${PAUSE_LABEL[settings.pausedReason]}` : ''}.
+                {settings.pausedReason === 'owner_unavailable'
+                  ? ' Saving any setting resumes autopilot with you as the author of record.'
+                  : ''}
+              </span>
+            </p>
+            <button
+              type="button"
+              className={SECONDARY_BUTTON_CLASS}
+              onClick={() => void save({ resume: true }, 'Autopilot resumed')}
+              disabled={actionDisabled}
+            >
+              Resume
+            </button>
+          </section>
+        ) : null}
+
+        {pausedTypes.length > 0 ? (
+          <ul className="flex flex-col gap-2" aria-label="Paused fix types">
+            {pausedTypes.map(([type, reason]) => (
+              <li
+                key={type}
+                className="border-border bg-muted flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-2 text-sm"
+              >
+                {/* The server writes a complete sentence per paused type; render it verbatim. */}
+                <span className="text-foreground">
+                  <span className="font-medium">{TYPE_LABEL[type] ?? type}</span> — {reason}
+                </span>
+                <button
+                  type="button"
+                  className={SECONDARY_BUTTON_CLASS}
+                  onClick={() =>
+                    void save({ resumeTypes: [type] }, `Resumed ${TYPE_LABEL[type] ?? type}`)
+                  }
+                  disabled={actionDisabled}
+                >
+                  Resume {TYPE_LABEL[type] ?? type}
+                </button>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        <fieldset className="flex flex-col gap-4" disabled={disabled}>
+          <legend className="text-foreground mb-2 text-base font-medium">Fix types</legend>
+          {AUTOPILOT_TYPE_GROUPS.map((group) => (
+            <div key={group.label}>
+              <p className="text-muted-foreground mb-2 text-sm font-medium">{group.label}</p>
+              <ul className="flex flex-col gap-2">
+                {group.options.map((opt) => {
+                  const inputId = `${baseId}-${opt.id}`
+                  const helpId = `${inputId}-help`
+                  const typePaused = settings.pausedTypes[opt.id] !== undefined
+                  return (
+                    <li key={opt.id} className="flex items-start gap-3">
+                      <input
+                        id={inputId}
+                        type="checkbox"
+                        className={CHECKBOX_CLASS}
+                        checked={settings.types[opt.id] === true}
+                        onChange={(e) =>
+                          void save(
+                            { types: { [opt.id]: e.target.checked } },
+                            `${opt.label} ${e.target.checked ? 'enabled' : 'disabled'}`,
+                          )
+                        }
+                        disabled={disabled}
+                        aria-describedby={helpId}
+                      />
+                      <div className="min-w-0">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <label htmlFor={inputId} className="text-foreground text-sm font-medium">
+                            {opt.label}
+                          </label>
+                          <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium">
+                            {opt.producer}
+                          </span>
+                          {typePaused ? (
+                            <span className="text-warning inline-flex items-center gap-1 text-xs font-medium">
+                              <AlertTriangle size={12} aria-hidden="true" />
+                              Paused
+                            </span>
+                          ) : null}
+                        </div>
+                        <p id={helpId} className="text-muted-foreground text-sm">
+                          {opt.help}
+                        </p>
+                      </div>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ))}
+        </fieldset>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <NumberField
+            id={`${baseId}-brand`}
+            label="Minimum brand alignment"
+            hint={`${settings.minBrandAlignment} = ${brandAlignmentLabel(settings.minBrandAlignment)}. 0–100.`}
+            value={settings.minBrandAlignment}
+            min={SEO_AUTOPILOT_LIMITS.minBrandAlignment.min}
+            max={SEO_AUTOPILOT_LIMITS.minBrandAlignment.max}
+            disabled={disabled}
+            onCommit={(v) => save({ minBrandAlignment: v }, 'Brand threshold saved')}
+          />
+          <NumberField
+            id={`${baseId}-redirect`}
+            label="Minimum redirect confidence"
+            hint="50–100."
+            value={settings.redirectMinConfidence}
+            min={SEO_AUTOPILOT_LIMITS.redirectMinConfidence.min}
+            max={SEO_AUTOPILOT_LIMITS.redirectMinConfidence.max}
+            disabled={disabled}
+            onCommit={(v) => save({ redirectMinConfidence: v }, 'Redirect threshold saved')}
+          />
+          <NumberField
+            id={`${baseId}-per-run`}
+            label="Max changes per run"
+            hint="1–25."
+            value={settings.maxPerRun}
+            min={SEO_AUTOPILOT_LIMITS.maxPerRun.min}
+            max={SEO_AUTOPILOT_LIMITS.maxPerRun.max}
+            disabled={disabled}
+            onCommit={(v) => save({ maxPerRun: v }, 'Per-run cap saved')}
+          />
+          <NumberField
+            id={`${baseId}-per-day`}
+            label="Max changes per day"
+            hint="1–100."
+            value={settings.maxPerDay}
+            min={SEO_AUTOPILOT_LIMITS.maxPerDay.min}
+            max={SEO_AUTOPILOT_LIMITS.maxPerDay.max}
+            disabled={disabled}
+            onCommit={(v) => save({ maxPerDay: v }, 'Per-day cap saved')}
+          />
+          <NumberField
+            id={`${baseId}-verify`}
+            label="Stop a run after N verification failures"
+            hint="1–10."
+            value={settings.verifyFailuresPerRun}
+            min={SEO_AUTOPILOT_LIMITS.verifyFailuresPerRun.min}
+            max={SEO_AUTOPILOT_LIMITS.verifyFailuresPerRun.max}
+            disabled={disabled}
+            onCommit={(v) => save({ verifyFailuresPerRun: v }, 'Breaker saved')}
+          />
+        </div>
+
+        <div className="border-border flex flex-col gap-4 border-t pt-4">
+          <SettingsToggleRow
+            label="Outcome watch"
+            description="Compare Search Console clicks before and after each change; revert and pause the type on a regression."
+            checked={settings.outcomeWatch.enabled}
+            onChange={(v) =>
+              void save(
+                { outcomeWatch: { enabled: v } },
+                v ? 'Outcome watch enabled' : 'Outcome watch disabled',
+              )
+            }
+            disabled={disabled}
+          />
+          <div className="grid gap-4 md:grid-cols-3">
+            <NumberField
+              id={`${baseId}-days`}
+              label="Window (days)"
+              hint="7–28."
+              value={settings.outcomeWatch.days}
+              min={SEO_AUTOPILOT_LIMITS.outcomeDays.min}
+              max={SEO_AUTOPILOT_LIMITS.outcomeDays.max}
+              disabled={disabled || !settings.outcomeWatch.enabled}
+              onCommit={(v) => save({ outcomeWatch: { days: v } }, 'Window saved')}
+            />
+            <NumberField
+              id={`${baseId}-drop`}
+              label="Regression threshold (%)"
+              hint="20–80."
+              value={Math.round(settings.outcomeWatch.dropRatio * 100)}
+              min={SEO_AUTOPILOT_LIMITS.dropPercent.min}
+              max={SEO_AUTOPILOT_LIMITS.dropPercent.max}
+              disabled={disabled || !settings.outcomeWatch.enabled}
+              onCommit={(v) => save({ outcomeWatch: { dropRatio: v / 100 } }, 'Threshold saved')}
+            />
+            <NumberField
+              id={`${baseId}-prior`}
+              label="Minimum prior clicks"
+              hint="Pages below this are not judged."
+              value={settings.outcomeWatch.minPriorClicks}
+              min={SEO_AUTOPILOT_LIMITS.minPriorClicks.min}
+              max={SEO_AUTOPILOT_LIMITS.minPriorClicks.max}
+              disabled={disabled || !settings.outcomeWatch.enabled}
+              onCommit={(v) => save({ outcomeWatch: { minPriorClicks: v } }, 'Floor saved')}
+            />
+          </div>
+        </div>
+
+        {vetoed.length > 0 ? (
+          <section
+            className="border-warning/30 bg-warning/10 flex items-start gap-2 rounded-lg border px-4 py-3 text-sm"
+            aria-label="Governance warning"
+          >
+            <AlertTriangle size={16} className="text-warning mt-0.5 shrink-0" aria-hidden="true" />
+            <p className="text-foreground">
+              {vetoed.join(' and ')} {vetoed.length > 1 ? 'are' : 'is'} enabled here but the AI
+              feature still requires approval, so autopilot will skip{' '}
+              {vetoed.length > 1 ? 'them' : 'it'}. Turn off “Requires approval” in {settingsAiLink}{' '}
+              to let it run.
+            </p>
+          </section>
+        ) : (
+          <p className="text-muted-foreground text-sm">
+            AI governance still applies: a feature with “Requires approval” on in {settingsAiLink}{' '}
+            is never auto-applied, whatever is enabled here.
+          </p>
+        )}
+      </div>
+    </SettingsCard>
+  )
+}
+
+/**
+ * A bounded integer input that commits on blur (or Enter). The draft is local
+ * so typing never fires a PUT per keystroke; an unchanged or unparsable blur
+ * restores the saved value without a request. Out-of-range values are clamped
+ * to the server's limits before they are sent. A rejected commit (`onCommit`
+ * resolves `false`) falls back to the last saved value so the input never
+ * shows text the server refused.
+ */
+function NumberField({
+  id,
+  label,
+  hint,
+  value,
+  min,
+  max,
+  disabled,
+  onCommit,
+}: {
+  id: string
+  label: string
+  hint: string
+  value: number
+  min: number
+  max: number
+  disabled: boolean
+  onCommit: (v: number) => Promise<boolean>
+}) {
+  const [draft, setDraft] = useState(String(value))
+  const [syncedValue, setSyncedValue] = useState(value)
+  // Adopt a new server value without an effect: reset the draft during render
+  // when the prop changes (React's recommended "derive state from props" form).
+  if (value !== syncedValue) {
+    setSyncedValue(value)
+    setDraft(String(value))
+  }
+  const hintId = `${id}-hint`
+
+  function commit() {
+    const n = Number(draft)
+    if (draft.trim() === '' || !Number.isFinite(n)) {
+      setDraft(String(value))
+      return
+    }
+    const next = Math.max(min, Math.min(max, Math.round(n)))
+    if (next === value) {
+      setDraft(String(value))
+      return
+    }
+    void onCommit(next).then((ok) => {
+      // On success the parent adopts the server value and the derive-from-props
+      // branch above resets the draft; on failure `value` is unchanged, so reset here.
+      if (!ok) setDraft(String(value))
+    })
+  }
+
+  return (
+    <div>
+      <label htmlFor={id} className="text-foreground mb-1 block text-sm font-medium">
+        {label}
+      </label>
+      <input
+        id={id}
+        type="number"
+        inputMode="numeric"
+        className={INPUT_CLASS}
+        min={min}
+        max={max}
+        step={1}
+        value={draft}
+        disabled={disabled}
+        aria-describedby={hintId}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur()
+        }}
+      />
+      <p id={hintId} className="text-muted-foreground mt-1 text-sm">
+        {hint}
+      </p>
+    </div>
+  )
+}