@prenta/admin 1.11.0 → 1.13.0

package/src/views/settings/AiFeaturesCard.tsx

@@ -13,8 +13,8 @@ const SELECT_CLASS =
  * Global AI feature toggles with per-feature model routing. Each switch persists
  * (via the Save bar) to the shared `ai.features.*` flags; the optional model
  * picker overrides which model that feature uses (otherwise it inherits the
- * default). Enforcement across modules lands in a later phase; here we surface
- * and store the operator's intent.
+ * default). The governance flags (approval, bulk apply, daily cap) are enforced
+ * by the governed AI runtime and the auto-apply gates in core.
  */
 export function AiFeaturesCard({
   features,
@@ -23,6 +23,7 @@ export function AiFeaturesCard({
   canEdit,
   onToggle,
   onSetFeatureModel,
+  onSetGovernance,
 }: {
   features: AiFeatureView[]
   models: AiModelView[]
@@ -30,6 +31,14 @@ export function AiFeaturesCard({
   canEdit: boolean
   onToggle: (key: string, enabled: boolean) => void
   onSetFeatureModel: (key: string, modelId: string) => void
+  onSetGovernance: (
+    key: string,
+    patch: Partial<{
+      approvalRequired: boolean
+      allowBulkApply: boolean
+      maxRequestsPerDay: string
+    }>,
+  ) => void
 }) {
   return (
     <SettingsCard
@@ -49,6 +58,7 @@ export function AiFeaturesCard({
               canEdit={canEdit}
               onToggle={onToggle}
               onSetFeatureModel={onSetFeatureModel}
+              onSetGovernance={onSetGovernance}
             />
           ))}
         </div>
@@ -64,6 +74,7 @@ function FeatureRow({
   canEdit,
   onToggle,
   onSetFeatureModel,
+  onSetGovernance,
 }: {
   feature: AiFeatureView
   models: AiModelView[]
@@ -71,8 +82,17 @@ function FeatureRow({
   canEdit: boolean
   onToggle: (key: string, enabled: boolean) => void
   onSetFeatureModel: (key: string, modelId: string) => void
+  onSetGovernance: (
+    key: string,
+    patch: Partial<{
+      approvalRequired: boolean
+      allowBulkApply: boolean
+      maxRequestsPerDay: string
+    }>,
+  ) => void
 }) {
   const selectId = useId()
+  const capId = useId()
   const required = feature.requiredCapabilities ?? []
   const effective = effectiveFeatureModel(feature.modelId, defaultModelId, required, models)
   const defaultModel = models.find(
@@ -141,6 +161,43 @@ function FeatureRow({
               needs. Pick a compatible model.
             </p>
           )}
+
+          <div className="border-border mt-4 space-y-3 border-t pt-3">
+            <SettingsToggleRow
+              label="Require approval"
+              description="AI output must be human-approved before it is applied."
+              checked={feature.approvalRequired}
+              disabled={!canEdit}
+              onChange={(v) => onSetGovernance(feature.key, { approvalRequired: v })}
+            />
+            <SettingsToggleRow
+              label="Allow bulk apply"
+              description="Permit applying many AI results in one operation."
+              checked={feature.allowBulkApply}
+              disabled={!canEdit}
+              onChange={(v) => onSetGovernance(feature.key, { allowBulkApply: v })}
+            />
+            <div>
+              <label htmlFor={capId} className="text-muted-foreground mb-1 block text-sm">
+                Max requests per day
+              </label>
+              <input
+                id={capId}
+                type="text"
+                inputMode="numeric"
+                value={feature.maxRequestsPerDay}
+                placeholder="Unlimited"
+                disabled={!canEdit}
+                onChange={(e) =>
+                  onSetGovernance(feature.key, { maxRequestsPerDay: e.target.value })
+                }
+                className={SELECT_CLASS}
+              />
+              <p className="text-muted-foreground mt-1 text-sm">
+                Site-wide daily cap for this feature. Leave empty for unlimited.
+              </p>
+            </div>
+          </div>
         </div>
       )}
     </div>

package/src/views/settings/SearchDataCard.tsx

@@ -0,0 +1,390 @@
+'use client'
+
+import { useCallback, useEffect, useId, useState } from 'react'
+import { AlertTriangle, CheckCircle2, KeyRound, Loader2, PlugZap, RefreshCw, X } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import { SettingsCard } 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 LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground'
+
+interface SearchConsoleStatus {
+  propertyUrl: string
+  hasServiceAccountKey: boolean
+  serviceAccountEmail: string | null
+  hasCruxApiKey: boolean
+  connected: boolean
+  lastSyncAt: string | null
+  syncStatus: {
+    state: 'ok' | 'partial' | 'error' | 'not-configured'
+    message?: string
+    parts?: {
+      searchConsole?: { ok: boolean; message?: string; rowsUpserted?: number }
+      crux?: { ok: boolean; message?: string; pagesChecked?: number }
+    }
+  } | null
+  suggestedProperty: string | null
+}
+
+function KeyStoredBadge() {
+  return (
+    <span className="text-muted-foreground border-border bg-muted inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs">
+      <CheckCircle2 size={11} className="text-success" aria-hidden="true" />
+      Key stored
+    </span>
+  )
+}
+
+/**
+ * Settings → SEO "Search data" card: Google Search Console service-account
+ * credentials, CrUX API key, connection test, and manual sync. Key material is
+ * write-only — the server stores it encrypted and never echoes it back, so the
+ * inputs stay empty with a "Key stored" badge once saved.
+ */
+export function SearchDataCard({ canEdit }: { canEdit: boolean }) {
+  const propertyId = useId()
+  const keyId = useId()
+  const cruxId = useId()
+
+  const [status, setStatus] = useState<SearchConsoleStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
+
+  const [property, setProperty] = useState('')
+  const [serviceKey, setServiceKey] = useState('')
+  const [cruxKey, setCruxKey] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [syncing, setSyncing] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setLoadError(null)
+    const res = await cmsApi<SearchConsoleStatus>('/seo/search-console')
+    if (res.data) {
+      setStatus(res.data)
+      setProperty(res.data.propertyUrl ?? '')
+    } else {
+      setLoadError(res.error ?? 'Failed to load search data settings')
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const dirty =
+    property.trim() !== (status?.propertyUrl ?? '') ||
+    serviceKey.trim() !== '' ||
+    cruxKey.trim() !== ''
+
+  async function save(extra?: { serviceAccountKey?: string; cruxApiKey?: string }) {
+    setSaving(true)
+    const body: Record<string, string> = { propertyUrl: property.trim(), ...extra }
+    if (!extra) {
+      if (serviceKey.trim()) body.serviceAccountKey = serviceKey.trim()
+      if (cruxKey.trim()) body.cruxApiKey = cruxKey.trim()
+    }
+    const res = await cmsApi('/seo/search-console', {
+      method: 'PUT',
+      body: JSON.stringify(body),
+    })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Search data settings saved')
+    setServiceKey('')
+    setCruxKey('')
+    await load()
+  }
+
+  async function testConnection() {
+    setTesting(true)
+    const res = await cmsApi<{ ok: boolean; code?: string; message?: string }>(
+      '/seo/search-console/test',
+      { method: 'POST' },
+    )
+    setTesting(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.ok) {
+      toast.success('Connected to Google Search Console')
+    } else {
+      toast.error(res.data?.message ?? 'Connection test failed')
+    }
+    await load()
+  }
+
+  async function syncNow() {
+    setSyncing(true)
+    const res = await cmsApi<{
+      status: NonNullable<SearchConsoleStatus['syncStatus']>
+      rowsUpserted: number
+      cruxChecked: number
+    }>('/seo/search-sync', { method: 'POST' })
+    setSyncing(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    const state = res.data?.status.state
+    if (state === 'ok') {
+      toast.success(`Sync complete — ${res.data?.rowsUpserted ?? 0} rows updated`)
+    } else if (state === 'partial') {
+      toast.warning(res.data?.status.message ?? 'Sync finished with warnings')
+    } else if (state === 'not-configured') {
+      toast.error('Add a service account key and property first.')
+    } else {
+      toast.error(res.data?.status.message ?? 'Sync failed')
+    }
+    await load()
+  }
+
+  if (loading) {
+    return (
+      <SettingsCard
+        title="Search data"
+        description="Google Search Console and Core Web Vitals feed real search performance into the SEO workspace."
+      >
+        <div className="space-y-3" aria-busy="true" aria-live="polite">
+          <span className="sr-only">Loading search data settings…</span>
+          <div className="bg-muted h-9 w-full animate-pulse rounded" />
+          <div className="bg-muted h-20 w-full animate-pulse rounded" />
+        </div>
+      </SettingsCard>
+    )
+  }
+
+  if (loadError) {
+    return (
+      <SettingsCard
+        title="Search data"
+        description="Google Search Console and Core Web Vitals feed real search performance into the SEO workspace."
+      >
+        <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">{loadError}</span>
+          <button
+            type="button"
+            onClick={() => void load()}
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      </SettingsCard>
+    )
+  }
+
+  const lastSync = status?.lastSyncAt ? new Date(status.lastSyncAt).toLocaleString() : 'Never'
+
+  return (
+    <SettingsCard
+      title="Search data"
+      description="Connect Google Search Console (service account) and the CrUX API to feed real clicks, impressions, and Core Web Vitals into audits, quick wins, and AI suggestions."
+    >
+      <div className="space-y-4">
+        {/* Connection status */}
+        <div className="flex items-center justify-between gap-2 text-sm">
+          <span className="text-muted-foreground">Status</span>
+          {status?.connected ? (
+            <span className="text-success inline-flex items-center gap-1 font-medium">
+              <CheckCircle2 size={14} aria-hidden="true" />
+              Connected
+            </span>
+          ) : (
+            <span className="text-muted-foreground inline-flex items-center gap-1 font-medium">
+              <X size={14} aria-hidden="true" />
+              Not connected
+            </span>
+          )}
+        </div>
+
+        {/* Property */}
+        <div>
+          <label htmlFor={propertyId} className={LABEL_CLASS}>
+            Search Console property
+          </label>
+          <input
+            id={propertyId}
+            type="text"
+            autoComplete="off"
+            spellCheck={false}
+            value={property}
+            disabled={!canEdit}
+            placeholder={status?.suggestedProperty ?? 'sc-domain:example.com'}
+            onChange={(e) => setProperty(e.target.value)}
+            className={INPUT_CLASS}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            Domain property (<code>sc-domain:example.com</code>) or URL prefix (
+            <code>https://example.com/</code>) exactly as it appears in Search Console.
+            {status?.suggestedProperty && !property.trim() && canEdit && (
+              <>
+                {' '}
+                <button
+                  type="button"
+                  onClick={() => setProperty(status.suggestedProperty ?? '')}
+                  className="text-brand hover:underline"
+                >
+                  Use {status.suggestedProperty}
+                </button>
+              </>
+            )}
+          </p>
+        </div>
+
+        {/* Service account key */}
+        <div>
+          <label htmlFor={keyId} className={LABEL_CLASS}>
+            Service account key (JSON)
+            {status?.hasServiceAccountKey && <KeyStoredBadge />}
+          </label>
+          <textarea
+            id={keyId}
+            rows={3}
+            value={serviceKey}
+            disabled={!canEdit}
+            autoComplete="off"
+            spellCheck={false}
+            placeholder={
+              status?.hasServiceAccountKey
+                ? 'Paste a new key to replace the stored one'
+                : '{ "type": "service_account", "client_email": … }'
+            }
+            onChange={(e) => setServiceKey(e.target.value)}
+            className={`${INPUT_CLASS} resize-y font-mono text-sm`}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            {status?.serviceAccountEmail ? (
+              <>
+                Grant{' '}
+                <span className="text-foreground font-medium">{status.serviceAccountEmail}</span>{' '}
+                access in Search Console → Settings → Users and permissions.
+              </>
+            ) : (
+              'Create a service account in Google Cloud, enable the Search Console API, and add its email as a user on the property.'
+            )}
+          </p>
+          {status?.hasServiceAccountKey && canEdit && (
+            <button
+              type="button"
+              onClick={() => void save({ serviceAccountKey: '' })}
+              className="text-muted-foreground hover:text-destructive mt-1 inline-flex items-center gap-1 rounded-md text-sm transition-colors"
+            >
+              <X size={13} aria-hidden="true" />
+              Remove stored key
+            </button>
+          )}
+        </div>
+
+        {/* CrUX key */}
+        <div>
+          <label htmlFor={cruxId} className={LABEL_CLASS}>
+            CrUX API key
+            {status?.hasCruxApiKey && <KeyStoredBadge />}
+          </label>
+          <input
+            id={cruxId}
+            type="password"
+            autoComplete="off"
+            value={cruxKey}
+            disabled={!canEdit}
+            placeholder={
+              status?.hasCruxApiKey ? 'Paste a new key to replace the stored one' : 'AIza…'
+            }
+            onChange={(e) => setCruxKey(e.target.value)}
+            className={INPUT_CLASS}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            Optional — collects real-user Core Web Vitals (LCP, INP, CLS) from the Chrome UX Report.
+          </p>
+          {status?.hasCruxApiKey && canEdit && (
+            <button
+              type="button"
+              onClick={() => void save({ cruxApiKey: '' })}
+              className="text-muted-foreground hover:text-destructive mt-1 inline-flex items-center gap-1 rounded-md text-sm transition-colors"
+            >
+              <X size={13} aria-hidden="true" />
+              Remove stored key
+            </button>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="border-border flex flex-wrap items-center gap-2 border-t pt-4">
+          <button
+            type="button"
+            onClick={() => void save()}
+            disabled={!canEdit || saving || !dirty}
+            className="bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {saving ? (
+              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
+            ) : (
+              <KeyRound size={14} aria-hidden="true" />
+            )}
+            Save credentials
+          </button>
+          <button
+            type="button"
+            onClick={() => void testConnection()}
+            disabled={!canEdit || testing || !status?.hasServiceAccountKey}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {testing ? (
+              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
+            ) : (
+              <PlugZap size={14} aria-hidden="true" />
+            )}
+            Test connection
+          </button>
+          <button
+            type="button"
+            onClick={() => void syncNow()}
+            disabled={!canEdit || syncing || !status?.connected}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {syncing ? (
+              <Loader2 size={14} className="animate-spin" aria-hidden="true" />
+            ) : (
+              <RefreshCw size={14} aria-hidden="true" />
+            )}
+            Sync now
+          </button>
+        </div>
+
+        {/* Sync status */}
+        <div className="space-y-2 text-sm">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-muted-foreground">Last sync</span>
+            <span className="text-foreground font-medium">{lastSync}</span>
+          </div>
+          {status?.syncStatus && status.syncStatus.state !== 'ok' && status.syncStatus.message && (
+            <div
+              role="status"
+              className={
+                status.syncStatus.state === 'error'
+                  ? 'border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border p-3'
+                  : 'border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-md border p-3'
+              }
+            >
+              <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" />
+              <span>{status.syncStatus.message}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </SettingsCard>
+  )
+}

package/src/views/settings/SeoDigestCard.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { useCallback, useEffect, useId, useState } from 'react'
+import { Loader2, Send } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchDigestSettings,
+  sendTestDigest,
+  updateDigestSettings,
+  type SeoDigestSettings,
+} from '../../lib/seo-service.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'
+
+/**
+ * Settings → SEO "Weekly SEO digest" card: opt-in toggle, explicit recipient
+ * list, last-sent status, and a rate-limited test send. The digest itself is
+ * sent by the Monday /cron/seo-scan tick after the persisted audit.
+ */
+export function SeoDigestCard({ canEdit }: { canEdit: boolean }) {
+  const recipientsId = useId()
+  const [settings, setSettings] = useState<SeoDigestSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [recipientsText, setRecipientsText] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [sendingTest, setSendingTest] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    const s = await fetchDigestSettings()
+    if (s) {
+      setSettings(s)
+      setRecipientsText(s.recipients.join(', '))
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function handleToggle(enabled: boolean) {
+    const res = await updateDigestSettings({ enabled })
+    if (!res.ok) {
+      toast.error(res.error ?? 'Failed to update digest settings')
+      return
+    }
+    toast.success(enabled ? 'Weekly digest enabled' : 'Weekly digest disabled')
+    await load()
+  }
+
+  async function handleSaveRecipients() {
+    setSaving(true)
+    const recipients = recipientsText
+      .split(',')
+      .map((r) => r.trim())
+      .filter((r) => r.length > 0)
+    const res = await updateDigestSettings({ recipients })
+    setSaving(false)
+    if (!res.ok) {
+      toast.error(res.error ?? 'Failed to save recipients')
+      return
+    }
+    toast.success('Digest recipients saved')
+    await load()
+  }
+
+  async function handleTestSend() {
+    setSendingTest(true)
+    const res = await sendTestDigest()
+    setSendingTest(false)
+    if (!res.ok) {
+      toast.error(res.error ?? 'Test digest failed')
+      return
+    }
+    toast.success(`Test digest sent to ${res.to ?? 'your email'}`)
+  }
+
+  if (loading) {
+    return (
+      <SettingsCard title="Weekly SEO digest">
+        <div className="text-muted-foreground flex items-center gap-2 text-sm">
+          <Loader2 size={16} className="motion-safe:animate-spin" aria-hidden="true" />
+          Loading…
+        </div>
+      </SettingsCard>
+    )
+  }
+  if (!settings) {
+    return (
+      <SettingsCard title="Weekly SEO digest">
+        <p className="text-destructive text-sm">Failed to load digest settings.</p>
+      </SettingsCard>
+    )
+  }
+
+  return (
+    <SettingsCard
+      title="Weekly SEO digest"
+      description="A Monday email with the site score, search performance, quick wins, new issues, and pending proposals. Sent by the weekly audit cron."
+    >
+      <div className="flex flex-col gap-4">
+        <SettingsToggleRow
+          label="Send weekly digest"
+          description="Requires at least one recipient below."
+          checked={settings.enabled}
+          onChange={handleToggle}
+          disabled={!canEdit}
+        />
+        <div>
+          <label
+            htmlFor={recipientsId}
+            className="text-foreground mb-1 flex items-center gap-2 text-sm font-medium"
+          >
+            Recipients
+          </label>
+          <input
+            id={recipientsId}
+            type="text"
+            className={INPUT_CLASS}
+            placeholder="owner@example.com, seo@example.com"
+            value={recipientsText}
+            onChange={(e) => setRecipientsText(e.target.value)}
+            disabled={!canEdit}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">Comma-separated, up to 10 addresses.</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={() => void handleSaveRecipients()}
+            disabled={!canEdit || saving}
+          >
+            {saving ? 'Saving…' : 'Save recipients'}
+          </button>
+          <button
+            type="button"
+            className="border-border text-foreground inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={() => void handleTestSend()}
+            disabled={!canEdit || sendingTest}
+          >
+            {sendingTest ? (
+              <Loader2 size={16} className="motion-safe:animate-spin" aria-hidden="true" />
+            ) : (
+              <Send size={16} aria-hidden="true" />
+            )}
+            Send test digest
+          </button>
+        </div>
+        <p className="text-muted-foreground text-sm">
+          {settings.lastSentAt
+            ? `Last sent ${new Date(settings.lastSentAt).toLocaleString()}`
+            : 'Never sent'}
+          {settings.lastError ? (
+            <span className="text-destructive"> · {settings.lastError}</span>
+          ) : null}
+        </p>
+      </div>
+    </SettingsCard>
+  )
+}

package/src/views/settings/SeoSettingsTab.tsx

@@ -16,6 +16,8 @@ import {
 import { siteUrlMatchesAdminOrigin } from '../../lib/preview-link.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
+import { SearchDataCard } from './SearchDataCard.js'
+import { SeoDigestCard } from './SeoDigestCard.js'
 import {
   ConfirmDangerousSettingDialog,
   SettingsCard,
@@ -149,6 +151,8 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <MetaDefaultsCard seo={seo} canEdit={canEdit} />
       <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />
+      <SearchDataCard canEdit={canEdit} />
+      <SeoDigestCard canEdit={canEdit} />
       <SitemapDefaultsCard seo={seo} canEdit={canEdit} onNavigate={onNavigate} />
 
       <details className="border-border bg-card group rounded-lg border">