@prenta/admin 1.15.0 → 1.17.0

package/src/views/settings/SeoGeoSettingsCard.tsx

@@ -0,0 +1,310 @@
+'use client'
+
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { AlertTriangle, RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  SEO_GEO_RETENTION,
+  fetchGeoSettings,
+  updateGeoSettings,
+  type SeoGeoSettings,
+  type SeoGeoSettingsPatch,
+} from '../../lib/seo-service.js'
+import { Skeleton } from '../../components/ui/Skeleton.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
+
+const INPUT_CLASS =
+  'w-32 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 aria-invalid:border-destructive'
+/** Horizontally scrollable, so focusable (`tabIndex={0}`) for keyboard scrolling. */
+const SNIPPET_CLASS =
+  'bg-muted text-foreground focus-visible:ring-ring overflow-x-auto rounded-md p-3 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+/**
+ * The two host-side one-liners. Kept as plain strings so the test can pin the
+ * identifiers (`observeGeoTraffic`, `createAstroRedirectMiddleware`) against
+ * the `@prenta/core/site` and `@prenta/core/astro/redirects` exports.
+ */
+const NEXT_SNIPPET = `import { applyPublicRedirect, observeGeoTraffic } from '@prenta/core/site'
+// inside proxy(), just before the applyPublicRedirect call:
+observeGeoTraffic(request, { baseUrl: origin, adminPaths: ['/admin'] })`
+const ASTRO_SNIPPET = `// src/middleware.ts — GEO capture is on by default:
+import { createAstroRedirectMiddleware } from '@prenta/core/astro/redirects'
+export const onRequest = createAstroRedirectMiddleware({ baseUrl: import.meta.env.PRENTA_CMS_URL })`
+
+/**
+ * Settings → SEO "AI visibility" card (spec 2026-09-08 §6): the measurement
+ * kill switch, daily-bucket retention, and the one-line middleware setup for
+ * Next and Astro hosts. Owns its own fetch/save like `SeoAutopilotCard`; every
+ * control PUTs a sparse patch immediately, saves queue behind each other, and
+ * the card re-reads the server's resolved settings after each success. Takes
+ * no `onNavigate`, so it names the AI visibility tab in copy without linking.
+ */
+export function SeoGeoSettingsCard({ canEdit }: { canEdit: boolean }) {
+  const baseId = useId()
+  const [settings, setSettings] = useState<SeoGeoSettings | null>(null)
+  /** Mirrors `settings` synchronously so a queued save reads the latest resolved values. */
+  const settingsRef = useRef<SeoGeoSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  /** 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)
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  const commitSettings = useCallback((next: SeoGeoSettings) => {
+    settingsRef.current = next
+    setSettings(next)
+  }, [])
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    const s = await fetchGeoSettings()
+    if (!mountedRef.current) return
+    if (s) commitSettings(s)
+    setLoading(false)
+  }, [commitSettings])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  /**
+   * Re-read without the skeleton after a successful save. The PUT answers only
+   * `{ ok }`, so the server-resolved values come from a fresh GET; if that GET
+   * fails, the accepted patch is applied locally — it is exactly what the
+   * server stored (the card clamps retention the way the server does).
+   */
+  const refresh = useCallback(
+    async (accepted: SeoGeoSettingsPatch) => {
+      const s = await fetchGeoSettings()
+      if (!mountedRef.current) return
+      if (s) commitSettings(s)
+      else if (settingsRef.current) commitSettings({ ...settingsRef.current, ...accepted })
+    },
+    [commitSettings],
+  )
+
+  /** Resolves `true` when the server accepted the patch. */
+  async function performSave(patch: SeoGeoSettingsPatch, successMessage: string): Promise<boolean> {
+    if (!settingsRef.current || !mountedRef.current) return false
+    setBusy(true)
+    try {
+      const res = await updateGeoSettings(patch)
+      if (!mountedRef.current) return false
+      if (!res.ok) {
+        toast.error(res.error ?? 'Failed to update AI visibility settings')
+        return false
+      }
+      toast.success(successMessage)
+      await refresh(patch)
+      return true
+    } finally {
+      if (mountedRef.current) setBusy(false)
+    }
+  }
+
+  /**
+   * 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: SeoGeoSettingsPatch, successMessage: string): Promise<boolean> {
+    const next = saveChainRef.current.then(() => performSave(patch, successMessage))
+    saveChainRef.current = next.catch(() => undefined)
+    return next
+  }
+
+  if (loading) {
+    return (
+      <SettingsCard title="AI visibility">
+        <div aria-busy="true" aria-live="polite">
+          <span className="sr-only">Loading AI visibility settings…</span>
+          <Skeleton lines={4} />
+        </div>
+      </SettingsCard>
+    )
+  }
+  if (!settings) {
+    return (
+      <SettingsCard title="AI visibility">
+        <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 AI visibility settings.</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>
+    )
+  }
+
+  // Controls lock only for read-only users; a save in flight must not steal
+  // focus (saves queue), so the card is marked busy instead.
+  const disabled = !canEdit
+
+  return (
+    <SettingsCard
+      title="AI visibility"
+      description="Record which AI and search crawlers fetch your pages and which answer engines send visitors. Only bot names, engine names, and your own paths are stored — never IPs, user agents, or referrer URLs."
+      busy={busy}
+    >
+      <div className="flex flex-col gap-5">
+        <SettingsToggleRow
+          label="Record AI crawler and referral activity"
+          description="When off, the server drops incoming beacons and the AI visibility tab in SEO shows a disabled state. Existing data stays until retention prunes it."
+          checked={settings.enabled}
+          onChange={(v) =>
+            void save(
+              { enabled: v },
+              v ? 'AI visibility measurement enabled' : 'AI visibility measurement disabled',
+            )
+          }
+          disabled={disabled}
+        />
+
+        <RetentionField
+          id={`${baseId}-retention`}
+          value={settings.retentionDays}
+          disabled={disabled}
+          onCommit={(v) => save({ retentionDays: v }, `Retention set to ${v} days`)}
+        />
+
+        <div className="border-border flex flex-col gap-3 border-t pt-4">
+          <div>
+            <p className="text-foreground text-base font-medium">Site middleware setup</p>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Counts arrive only once the public site reports them. Add one line to the host that
+              serves your pages.
+            </p>
+          </div>
+          <div>
+            <p className="text-muted-foreground mb-1 text-sm">
+              Next.js — <code className="text-foreground">proxy.ts</code>
+            </p>
+            <pre className={SNIPPET_CLASS} tabIndex={0} aria-label="Next.js middleware snippet">
+              <code>{NEXT_SNIPPET}</code>
+            </pre>
+          </div>
+          <div>
+            <p className="text-muted-foreground mb-1 text-sm">Astro</p>
+            <pre className={SNIPPET_CLASS} tabIndex={0} aria-label="Astro middleware snippet">
+              <code>{ASTRO_SNIPPET}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </SettingsCard>
+  )
+}
+
+/**
+ * Retention input that commits on blur (or Enter). The draft is local so typing
+ * never fires a PUT per keystroke; an unchanged blur restores the saved value
+ * without a request. Out-of-range integers are clamped to 7–365 before they are
+ * sent (the server clamps identically). An empty, non-numeric, or fractional
+ * draft is a client-side validation failure: it shows an inline error and sends
+ * nothing. A rejected commit (`onCommit` resolves `false`) falls back to the
+ * last saved value so the input never shows text the server refused.
+ */
+function RetentionField({
+  id,
+  value,
+  disabled,
+  onCommit,
+}: {
+  id: string
+  value: number
+  disabled: boolean
+  onCommit: (v: number) => Promise<boolean>
+}) {
+  const [draft, setDraft] = useState(String(value))
+  const [syncedValue, setSyncedValue] = useState(value)
+  const [error, setError] = useState<string | null>(null)
+  // 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))
+  }
+  /**
+   * Latest confirmed value, readable from a commit's `.then` after later
+   * renders. Saves queue, so a second commit can fail after an earlier one
+   * changed `value`; reverting to the closed-over `value` would show the
+   * pre-first-save number while the server holds the first save.
+   */
+  const valueRef = useRef(value)
+  valueRef.current = value
+  const hintId = `${id}-hint`
+  const errorId = `${id}-error`
+  const { min, max } = SEO_GEO_RETENTION
+
+  function commit() {
+    const n = Number(draft)
+    if (draft.trim() === '' || !Number.isInteger(n)) {
+      setError('Retention must be a whole number of days')
+      return
+    }
+    const next = Math.max(min, Math.min(max, n))
+    if (next === valueRef.current) {
+      setDraft(String(valueRef.current))
+      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 revert to the latest confirmed
+      // value (not the one closed over when this commit started).
+      if (!ok) setDraft(String(valueRef.current))
+    })
+  }
+
+  return (
+    <div>
+      <label htmlFor={id} className="text-foreground mb-1 block text-sm font-medium">
+        Retention (days)
+      </label>
+      <input
+        id={id}
+        type="number"
+        inputMode="numeric"
+        className={INPUT_CLASS}
+        min={min}
+        max={max}
+        step={1}
+        value={draft}
+        disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={error ? `${hintId} ${errorId}` : hintId}
+        onChange={(e) => {
+          setDraft(e.target.value)
+          if (error) setError(null)
+        }}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur()
+        }}
+      />
+      <p id={hintId} className="text-muted-foreground mt-1 text-sm">
+        Daily counts older than this are deleted by the nightly cleanup. {min}–{max} days.
+      </p>
+      {error ? (
+        <p id={errorId} className="text-destructive mt-1 flex items-center gap-1 text-sm">
+          <AlertTriangle size={14} className="shrink-0" aria-hidden="true" />
+          {error}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/views/settings/SeoSettingsTab.tsx

@@ -19,6 +19,7 @@ import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
 import { SearchDataCard } from './SearchDataCard.js'
 import { SeoAutopilotCard } from './SeoAutopilotCard.js'
 import { SeoDigestCard } from './SeoDigestCard.js'
+import { SeoGeoSettingsCard } from './SeoGeoSettingsCard.js'
 import {
   ConfirmDangerousSettingDialog,
   SettingsCard,
@@ -153,6 +154,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />
       <SearchDataCard canEdit={canEdit} />
+      <SeoGeoSettingsCard canEdit={canEdit} />
       <SeoAutopilotCard canEdit={canEdit} onNavigate={onNavigate} />
       <SeoDigestCard canEdit={canEdit} />
       <SitemapDefaultsCard seo={seo} canEdit={canEdit} onNavigate={onNavigate} />