@prenta/admin 1.10.1 → 1.12.0

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/SeoSettingsTab.tsx

@@ -16,6 +16,7 @@ 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 {
   ConfirmDangerousSettingDialog,
   SettingsCard,
@@ -149,6 +150,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <MetaDefaultsCard seo={seo} canEdit={canEdit} />
       <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />
+      <SearchDataCard canEdit={canEdit} />
       <SitemapDefaultsCard seo={seo} canEdit={canEdit} onNavigate={onNavigate} />
 
       <details className="border-border bg-card group rounded-lg border">

package/src/views/settings/useAiSettings.ts

@@ -86,6 +86,22 @@ export interface AiFeatureView {
   modelId?: string
   /** Per-feature provider connection override. Usually derived from the model. */
   providerId?: string
+  /** AI output must be human-approved before it is applied. */
+  approvalRequired: boolean
+  /** Permit applying many AI results in one operation. */
+  allowBulkApply: boolean
+  /** Site-wide daily request cap; empty string = unlimited (string-buffered input). */
+  maxRequestsPerDay: string
+}
+
+/** Raw feature shape on the wire (`GET /ai/settings`): governance fields optional, cap numeric. */
+type AiFeatureWire = Omit<
+  AiFeatureView,
+  'approvalRequired' | 'allowBulkApply' | 'maxRequestsPerDay'
+> & {
+  approvalRequired?: boolean
+  allowBulkApply?: boolean
+  maxRequestsPerDay?: number | null
 }
 
 export interface AiUsageView {
@@ -143,7 +159,7 @@ interface AiSettingsResponse {
   settings: {
     defaultProviderId?: string
     defaultModelId?: string
-    features: AiFeatureView[]
+    features: AiFeatureWire[]
     budget: { monthlyTokenLimit?: number }
     brandVoice?: {
       enabled?: boolean
@@ -172,6 +188,12 @@ function formFromResponse(res: AiSettingsResponse): AiSettingsForm {
       ...f,
       modelId: f.modelId ?? '',
       providerId: f.providerId ?? '',
+      approvalRequired: (f as { approvalRequired?: boolean }).approvalRequired !== false,
+      allowBulkApply: (f as { allowBulkApply?: boolean }).allowBulkApply === true,
+      maxRequestsPerDay:
+        typeof (f as { maxRequestsPerDay?: number }).maxRequestsPerDay === 'number'
+          ? String((f as { maxRequestsPerDay?: number }).maxRequestsPerDay)
+          : '',
     })),
     monthlyTokenLimit:
       typeof res.settings.budget.monthlyTokenLimit === 'number'
@@ -241,6 +263,15 @@ export interface UseAiSettings {
   toggleFeature: (key: string, enabled: boolean) => void
   /** Set a per-feature model override. Empty string reverts to the default model. */
   setFeatureModel: (key: string, modelId: string) => void
+  /** Patch per-feature governance controls (approval, bulk apply, daily cap). */
+  setFeatureGovernance: (
+    key: string,
+    patch: Partial<{
+      approvalRequired: boolean
+      allowBulkApply: boolean
+      maxRequestsPerDay: string
+    }>,
+  ) => void
   /** Patch one or more brand voice fields. */
   setBrandVoice: (patch: Partial<BrandVoiceForm>) => void
   /** Whether saves should trust the markdown document or quick-edit fields. */
@@ -374,6 +405,34 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
     setSaveState('idle')
   }, [])
 
+  const setFeatureGovernance = useCallback(
+    (
+      key: string,
+      patch: Partial<{
+        approvalRequired: boolean
+        allowBulkApply: boolean
+        maxRequestsPerDay: string
+      }>,
+    ) => {
+      setForm((prev) => ({
+        ...prev,
+        features: prev.features.map((f) =>
+          f.key === key
+            ? {
+                ...f,
+                ...patch,
+                ...(patch.maxRequestsPerDay !== undefined
+                  ? { maxRequestsPerDay: patch.maxRequestsPerDay.replace(/[^\d]/g, '') }
+                  : {}),
+              }
+            : f,
+        ),
+      }))
+      setSaveState('idle')
+    },
+    [],
+  )
+
   const setBrandVoice = useCallback((patch: Partial<BrandVoiceForm>) => {
     setForm((prev) => ({ ...prev, brandVoice: { ...prev.brandVoice, ...patch } }))
     setSaveState('idle')
@@ -474,7 +533,13 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
       return true
     return form.features.some((f, i) => {
       const base = baseline.features[i]
-      return f.enabled !== base?.enabled || (f.modelId ?? '') !== (base?.modelId ?? '')
+      return (
+        f.enabled !== base?.enabled ||
+        (f.modelId ?? '') !== (base?.modelId ?? '') ||
+        f.approvalRequired !== base?.approvalRequired ||
+        f.allowBulkApply !== base?.allowBulkApply ||
+        f.maxRequestsPerDay !== base?.maxRequestsPerDay
+      )
     })
   }, [form, baseline])
 
@@ -492,6 +557,9 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
             key: f.key,
             enabled: f.enabled,
             modelId: f.modelId ? f.modelId : null,
+            approvalRequired: f.approvalRequired,
+            allowBulkApply: f.allowBulkApply,
+            maxRequestsPerDay: f.maxRequestsPerDay === '' ? null : Number(f.maxRequestsPerDay),
           })),
           budget: {
             monthlyTokenLimit:
@@ -661,6 +729,7 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
     setMonthlyTokenLimit,
     toggleFeature,
     setFeatureModel,
+    setFeatureGovernance,
     setBrandVoice,
     analyzeBrandVoice,
     scoreBrandVoice,