@prenta/admin 1.11.0 → 1.12.0

package/src/components/seo/SeoSearchStats.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+/**
+ * Read-only search-performance block for the SEO editor pane: synced Google
+ * Search Console 28-day stats, top queries, and CrUX Core Web Vitals for one
+ * document. Purely informational — editing happens in the fields above it.
+ */
+import { useEffect, useState } from 'react'
+import { fetchSearchInsight, type SearchInsight } from '../../lib/seo-service.js'
+import { SeoLoading } from './primitives.js'
+
+function formatCompact(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, '')}K`
+  return String(n)
+}
+
+function DeltaHint({
+  current,
+  previous,
+  lowerIsBetter = false,
+}: {
+  current: number | null
+  previous: number | null
+  lowerIsBetter?: boolean
+}) {
+  if (current == null || previous == null || previous === 0) return null
+  const diff = current - previous
+  if (diff === 0) return null
+  const improved = lowerIsBetter ? diff < 0 : diff > 0
+  return (
+    <span className={improved ? 'text-[var(--suc)]' : 'text-[var(--err)]'}>
+      {diff > 0 ? '+' : ''}
+      {Number.isInteger(diff) ? diff : diff.toFixed(1)}
+    </span>
+  )
+}
+
+function cwvTone(status: SearchInsight['cwvStatus']): { label: string; cls: string } {
+  switch (status) {
+    case 'good':
+      return { label: 'Good', cls: 'bg-[var(--suc-l)] text-[var(--suc)]' }
+    case 'needs-improvement':
+      return { label: 'Needs improvement', cls: 'bg-[var(--warn-l)] text-[var(--warn)]' }
+    case 'poor':
+      return { label: 'Poor', cls: 'bg-[var(--err-l)] text-[var(--err)]' }
+    default:
+      return { label: 'No field data', cls: 'bg-[var(--bg)] text-[var(--muted)]' }
+  }
+}
+
+export function SeoSearchStats({ entityId }: { entityId: string }) {
+  const [loading, setLoading] = useState(true)
+  const [connected, setConnected] = useState(false)
+  const [insight, setInsight] = useState<SearchInsight | null>(null)
+
+  useEffect(() => {
+    let alive = true
+    setLoading(true)
+    fetchSearchInsight(entityId)
+      .then((res) => {
+        if (!alive) return
+        setConnected(res.connected)
+        setInsight(res.insight)
+      })
+      .catch(() => {
+        if (!alive) return
+        setConnected(false)
+        setInsight(null)
+      })
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [entityId])
+
+  if (loading) return <SeoLoading />
+
+  if (!connected) {
+    return (
+      <p className="text-[11.5px] text-[var(--sub)]">
+        Connect Google Search Console in Settings → SEO → Search data to see real clicks,
+        impressions, and queries for this page.
+      </p>
+    )
+  }
+
+  if (!insight) {
+    return (
+      <p className="text-[11.5px] text-[var(--sub)]">
+        No search data synced for this page yet. Data appears after the next nightly sync once the
+        page has impressions in Google Search.
+      </p>
+    )
+  }
+
+  const cwv = cwvTone(insight.cwvStatus)
+
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-3 gap-2">
+        {[
+          {
+            label: 'Clicks',
+            value: formatCompact(insight.clicks28d),
+            delta: <DeltaHint current={insight.clicks28d} previous={insight.clicksPrev28d} />,
+          },
+          {
+            label: 'Impressions',
+            value: formatCompact(insight.impressions28d),
+            delta: (
+              <DeltaHint current={insight.impressions28d} previous={insight.impressionsPrev28d} />
+            ),
+          },
+          {
+            label: 'Avg. position',
+            value: insight.avgPosition28d != null ? insight.avgPosition28d.toFixed(1) : '—',
+            delta: (
+              <DeltaHint
+                current={insight.avgPosition28d}
+                previous={insight.avgPositionPrev28d}
+                lowerIsBetter
+              />
+            ),
+          },
+        ].map((stat) => (
+          <div key={stat.label} className="rounded-[7px] border border-[var(--bdr)] px-2.5 py-2">
+            <div className="text-[10.5px] text-[var(--muted)]">{stat.label}</div>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-[15px] font-semibold text-[var(--txt)]">{stat.value}</span>
+              <span className="text-[10.5px]">{stat.delta}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+      <p className="text-[10.5px] text-[var(--muted)]">
+        Last 28 days vs the prior 28 — synced from Google Search Console.
+      </p>
+
+      {insight.topQueries.length > 0 && (
+        <div>
+          <p className="mb-1.5 text-[11px] font-medium text-[var(--sub)]">Top queries</p>
+          <table className="w-full text-[11.5px]" aria-label="Top search queries for this page">
+            <thead>
+              <tr className="text-left text-[10.5px] text-[var(--muted)]">
+                <th className="pb-1 font-medium">Query</th>
+                <th className="pb-1 text-right font-medium">Clicks</th>
+                <th className="pb-1 text-right font-medium">Pos.</th>
+              </tr>
+            </thead>
+            <tbody>
+              {insight.topQueries.slice(0, 8).map((q) => (
+                <tr key={q.query} className="border-t border-[var(--bdr)]">
+                  <td className="max-w-0 truncate py-1 pr-2 text-[var(--txt)]" title={q.query}>
+                    {q.query}
+                  </td>
+                  <td className="py-1 text-right text-[var(--sub)]">{formatCompact(q.clicks)}</td>
+                  <td className="py-1 text-right text-[var(--sub)]">{q.position.toFixed(1)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between gap-2 border-t border-[var(--bdr)] pt-2.5">
+        <span className="text-[11px] font-medium text-[var(--sub)]">
+          Core Web Vitals (real users)
+        </span>
+        <span className={`rounded-full px-2 py-0.5 text-[10.5px] font-medium ${cwv.cls}`}>
+          {cwv.label}
+        </span>
+      </div>
+      {insight.cwvStatus !== null && (
+        <div className="grid grid-cols-3 gap-2 text-[11px] text-[var(--sub)]">
+          <span>LCP {insight.lcpMs != null ? `${(insight.lcpMs / 1000).toFixed(1)}s` : '—'}</span>
+          <span>INP {insight.inpMs != null ? `${insight.inpMs}ms` : '—'}</span>
+          <span>CLS {insight.cls != null ? insight.cls : '—'}</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/lib/seo-service.ts

@@ -144,6 +144,46 @@ export async function fetchSearchPerformance(
   return res.data?.rows ?? []
 }
 
+// ─── Per-document search insight (synced GSC + CrUX) ─────────────────
+
+export interface SearchInsightTopQuery {
+  query: string
+  clicks: number
+  impressions: number
+  position: number
+}
+
+export interface SearchInsight {
+  path: string
+  clicks28d: number
+  impressions28d: number
+  avgPosition28d: number | null
+  clicksPrev28d: number
+  impressionsPrev28d: number
+  avgPositionPrev28d: number | null
+  topQueries: SearchInsightTopQuery[]
+  lcpMs: number | null
+  inpMs: number | null
+  cls: number | null
+  cwvStatus: 'good' | 'needs-improvement' | 'poor' | null
+  lastSyncedAt: string | null
+}
+
+/**
+ * Synced search stats for one document. `insight` is null when Search Console
+ * isn't connected or no data has synced for the page yet — the editor pane
+ * renders a quiet hint instead of an error in that case.
+ */
+export async function fetchSearchInsight(
+  entityId: string,
+): Promise<{ connected: boolean; insight: SearchInsight | null }> {
+  const res = await cmsApi<{ connected: boolean; insight: SearchInsight | null }>(
+    `/seo/search-insights/${encodeURIComponent(entityId)}`,
+  )
+  throwIfError(res)
+  return res.data ?? { connected: false, insight: null }
+}
+
 // ─── Content SEO ─────────────────────────────────────────────────────
 
 /** Schema.org types available in document SEO editors. */
@@ -995,12 +1035,24 @@ export async function saveRedirectRecoverySettings(
 export async function generate404RecoverySuggestions(): Promise<{
   error?: string
   autoApplied?: number
+  /**
+   * Set when AI governance vetoed a requested auto-apply (eligible plans were
+   * stored as pending suggestions instead). Human-readable reason to surface.
+   */
+  governanceBlocked?: string
 }> {
-  const res = await cmsApi<{ created?: number; autoApplied?: number }>('/seo/redirects/suggest', {
+  const res = await cmsApi<{
+    created?: number
+    autoApplied?: number
+    governanceBlocked?: string | null
+  }>('/seo/redirects/suggest', {
     method: 'POST',
   })
   if (res.error) return { error: res.error }
-  return { autoApplied: res.data?.autoApplied ?? 0 }
+  return {
+    autoApplied: res.data?.autoApplied ?? 0,
+    governanceBlocked: res.data?.governanceBlocked ?? undefined,
+  }
 }
 
 export async function acceptRedirectSuggestion(suggestionId: string): Promise<{ error?: string }> {
@@ -1047,6 +1099,12 @@ export interface SeoAiResult {
   brandAlignment?: BrandAlignmentScoreResult
   /** True when the AI provider is not configured (graceful fallback). */
   unavailable?: boolean
+  /**
+   * Server-reported refusal (daily request cap, monthly budget, disabled
+   * feature). Surface verbatim — the runtime crafts these messages to tell the
+   * user which limit was hit and where to raise it.
+   */
+  error?: string
 }
 
 /**
@@ -1073,6 +1131,7 @@ export async function generateSeoField(
     body: JSON.stringify({ field, ...context }),
   })
   if (isAiUnavailable(res.status)) return { unavailable: true }
+  if (res.error) return { error: res.error }
   return res.data ?? {}
 }
 
@@ -1082,6 +1141,7 @@ export async function explainSeoIssue(issueId: string): Promise<SeoAiResult> {
     body: JSON.stringify({ issueId }),
   })
   if (isAiUnavailable(res.status)) return { unavailable: true }
+  if (res.error) return { error: res.error }
   return res.data ?? {}
 }
 
@@ -1095,12 +1155,14 @@ export async function generateStructuredData(context: {
     body: JSON.stringify(context),
   })
   if (isAiUnavailable(res.status)) return { unavailable: true }
+  if (res.error) return { error: res.error }
   return res.data ?? {}
 }
 
 export async function summarizeSeoAudit(): Promise<SeoAiResult> {
   const res = await cmsApi<SeoAiResult>('/ai/seo/summarize', { method: 'POST' })
   if (isAiUnavailable(res.status)) return { unavailable: true }
+  if (res.error) return { error: res.error }
   return res.data ?? {}
 }
 

package/src/views/seo/OverviewTab.tsx

@@ -200,7 +200,7 @@ export function OverviewTab({
           <SeoEmptyState
             icon={<BarChart3 size={24} />}
             title="Search Console not connected"
-            description="Add a Google Search Console verification token in Settings → SEO. Performance charts will appear here when the Search Analytics API is wired."
+            description="Connect a Google service account in Settings → SEO → Search data, then run a sync. Real clicks, impressions, and positions will appear here."
           />
         ) : searchPerformance.length === 0 ? (
           <SeoEmptyState title="No search performance data" />

package/src/views/seo/RedirectsTab.tsx

@@ -172,6 +172,12 @@ function Ai404RecoveryCard({ onApplied }: { onApplied: () => void }) {
         ? ` ${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}`)
+    }
     refetch()
   }
 

package/src/views/settings/AISettingsTab.tsx

@@ -122,6 +122,7 @@ export function AISettingsTab({ role, config }: AISettingsTabProps) {
         canEdit={canEdit}
         onToggle={ai.toggleFeature}
         onSetFeatureModel={ai.setFeatureModel}
+        onSetGovernance={ai.setFeatureGovernance}
       />
       <BrandVoiceCard
         value={ai.form.brandVoice}

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>