@prenta/admin 1.11.0 → 1.13.0

package/src/__tests__/views/seo-settings.render.test.tsx

@@ -2,10 +2,18 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
-// The SEO defaults tab reads four shared backends: /seo/config (meta defaults +
+// The SEO defaults tab reads six shared backends: /seo/config (meta defaults +
 // verification), /seo/crawl-settings (sitemap toggles), /seo/sitemap/status
-// (read-only summary), and /seo/index-status (environment).
-const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) => {
+// (read-only summary), /seo/index-status (environment), /seo/search-console
+// (Search data card), and /seo/digest-settings (Weekly SEO digest card).
+// `defaultApi` is the per-path route map; individual tests override the mock
+// implementation and delegate back to it for unrelated paths.
+type MockApiResponse = { data?: unknown; error?: string; status: number }
+
+async function defaultApi(
+  endpoint: string,
+  options?: { method?: string },
+): Promise<MockApiResponse> {
   const method = options?.method ?? 'GET'
   if (endpoint === '/seo/config' && method === 'GET') {
     return {
@@ -51,14 +59,49 @@ const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) =>
   if (endpoint === '/seo/index-status' && method === 'GET') {
     return { data: { environment: 'preview' }, status: 200 }
   }
+  if (endpoint === '/seo/search-console' && method === 'GET') {
+    return {
+      data: {
+        propertyUrl: '',
+        hasServiceAccountKey: false,
+        serviceAccountEmail: null,
+        hasCruxApiKey: false,
+        connected: false,
+        lastSyncAt: null,
+        syncStatus: null,
+        suggestedProperty: 'sc-domain:acme.test',
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/seo/digest-settings' && method === 'GET') {
+    return {
+      data: { enabled: false, recipients: [], lastSentAt: null, lastError: null },
+      status: 200,
+    }
+  }
   return { data: {}, status: 200 }
-})
+}
+
+const cmsApi = vi.fn(defaultApi)
 
 vi.mock('../../lib/api.js', () => ({
   cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
   ensureCsrfToken: vi.fn(async () => {}),
 }))
 
+// Record toast calls so tests can assert server errors are surfaced verbatim.
+const toastSuccess = vi.fn()
+const toastError = vi.fn()
+vi.mock('sonner', () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccess(...args),
+    error: (...args: unknown[]) => toastError(...args),
+    warning: vi.fn(),
+    loading: vi.fn(),
+  },
+}))
+
 // Stub the Media Center picker: when open, expose a button that selects a known
 // asset (id + url), exercising the asset-id storage path without the real
 // MediaBrowser/network stack.
@@ -89,6 +132,9 @@ const { SeoSettingsTab } = await import('../../views/settings/SeoSettingsTab.js'
 
 beforeEach(() => {
   cmsApi.mockClear()
+  cmsApi.mockImplementation(defaultApi)
+  toastSuccess.mockClear()
+  toastError.mockClear()
 })
 
 describe('SeoSettingsTab', () => {
@@ -247,4 +293,110 @@ describe('SeoSettingsTab', () => {
       true,
     )
   })
+
+  it('renders the Search data card in its not-connected state with gated actions', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    expect(await screen.findByText('Not connected')).toBeTruthy()
+
+    // Test/sync require a stored key or a working connection respectively.
+    expect(
+      (screen.getByRole('button', { name: /Test connection/ }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+    expect((screen.getByRole('button', { name: /Sync now/ }) as HTMLButtonElement).disabled).toBe(
+      true,
+    )
+  })
+
+  it('saves Search Console credentials via PUT /seo/search-console', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    fireEvent.change(await screen.findByLabelText(/Search Console property/), {
+      target: { value: 'sc-domain:acme.test' },
+    })
+    fireEvent.change(screen.getByLabelText(/Service account key/), {
+      target: { value: '{"client_email":"svc@acme.iam.gserviceaccount.com","private_key":"k"}' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: /Save credentials/ }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/search-console',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/seo/search-console' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    expect(body.propertyUrl).toBe('sc-domain:acme.test')
+    expect(body.serviceAccountKey).toContain('svc@acme.iam.gserviceaccount.com')
+  })
+
+  it('renders the Weekly SEO digest card with the toggle off by default', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    expect(await screen.findByText('Weekly SEO digest')).toBeTruthy()
+
+    const toggle = screen.getByRole('switch', { name: 'Send weekly digest' })
+    expect(toggle.getAttribute('aria-checked')).toBe('false')
+    expect(screen.getByText('Never sent')).toBeTruthy()
+  })
+
+  it('saves recipients as a trimmed, comma-split list', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    await screen.findByText('Weekly SEO digest')
+
+    fireEvent.change(screen.getByLabelText('Recipients'), {
+      target: { value: ' a@x.com , b@x.com ' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Save recipients' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/digest-settings',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/seo/digest-settings' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    expect(body.recipients).toEqual(['a@x.com', 'b@x.com'])
+  })
+
+  it('surfaces the server error verbatim when test-send fails', async () => {
+    cmsApi.mockImplementation(async (endpoint, options) => {
+      if (endpoint === '/seo/digest-settings/test-send' && options?.method === 'POST') {
+        return { error: 'No completed SEO audit yet — run an audit first', status: 409 }
+      }
+      return defaultApi(endpoint, options)
+    })
+    render(<SeoSettingsTab role="ADMIN" />)
+    await screen.findByText('Weekly SEO digest')
+
+    fireEvent.click(screen.getByRole('button', { name: /Send test digest/ }))
+
+    await waitFor(() =>
+      expect(toastError).toHaveBeenCalledWith('No completed SEO audit yet — run an audit first'),
+    )
+  })
+
+  it('shows the last error from settings in destructive tone', async () => {
+    cmsApi.mockImplementation(async (endpoint, options) => {
+      if (endpoint === '/seo/digest-settings' && (options?.method ?? 'GET') === 'GET') {
+        return {
+          data: {
+            enabled: true,
+            recipients: ['owner@acme.test'],
+            lastSentAt: '2026-09-01T04:00:00Z',
+            lastError: '1/2 digest sends failed',
+          },
+          status: 200,
+        }
+      }
+      return defaultApi(endpoint, options)
+    })
+    render(<SeoSettingsTab role="ADMIN" />)
+
+    const lastError = await screen.findByText(/1\/2 digest sends failed/)
+    expect(lastError.className).toContain('text-destructive')
+  })
 })

package/src/components/seo/SeoCopilotDrawer.tsx

@@ -32,6 +32,10 @@ export function SeoCopilotDrawer({
       setUnavailable(true)
       return
     }
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
     if (res.text) setSummary(res.text)
     else toast.error('No summary was returned.')
   }

package/src/components/seo/SeoEditorPane.tsx

@@ -51,6 +51,7 @@ import { SeoAccordion, SeoAccordionBadge, SeoAccordionItem } from './SeoAccordio
 import { SeoAnalysisList } from './SeoAnalysisList.js'
 import { SeoInsightsMetrics } from './SeoInsightsMetrics.js'
 import { SeoLinkingSection } from './SeoLinkingSection.js'
+import { SeoSearchStats } from './SeoSearchStats.js'
 
 // Ranges the audit's title/description checks score against — one definition,
 // so the meter cannot tell an editor they are in range while the check fails.
@@ -340,6 +341,12 @@ export function SeoEditorPane({
         toast.error('AI is not configured. Add an AI provider to enable suggestions.')
         return
       }
+      if (result.error) {
+        // Governed refusal (daily cap, budget, disabled feature) — the server
+        // message says which limit was hit and where to raise it.
+        toast.error(result.error)
+        return
+      }
       if (result.text) {
         // Write the suggestion into the field the editor actually asked to
         // generate. Previously an OG title/description generate was remapped
@@ -988,6 +995,12 @@ export function SeoEditorPane({
                 <SeoInsightsMetrics readability={readability} plainText={plainText} />
               </SeoAccordionItem>
 
+              {!isDraft && entityId && (
+                <SeoAccordionItem value="search-performance" title="Search performance">
+                  <SeoSearchStats entityId={entityId} />
+                </SeoAccordionItem>
+              )}
+
               <SeoAccordionItem value="linking-data" title="Linking data">
                 <SeoLinkingSection
                   entityType={entityType}

package/src/components/seo/SeoIssueFixDrawer.tsx

@@ -116,6 +116,10 @@ export function SeoIssueFixDrawer({
       toast.error('AI is not configured.')
       return
     }
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
     setExplanation(res.text ?? 'No explanation available.')
   }
 

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. */
@@ -743,6 +783,49 @@ export async function updateCrawlSettings(
   return res.error ? { error: res.error } : {}
 }
 
+// ─── Weekly digest ───────────────────────────────────────────────────
+
+export interface SeoDigestSettings {
+  enabled: boolean
+  recipients: string[]
+  lastSentAt: string | null
+  lastError: string | null
+}
+
+export async function fetchDigestSettings(): Promise<SeoDigestSettings | null> {
+  const res = await cmsApi<SeoDigestSettings>('/seo/digest-settings')
+  const d = res.data
+  // Validate the shape before handing it to the UI — an unexpected response
+  // body must render the card's error state, not crash on `recipients.join`.
+  if (!d || typeof d.enabled !== 'boolean' || !Array.isArray(d.recipients)) return null
+  return {
+    enabled: d.enabled,
+    recipients: d.recipients,
+    lastSentAt: d.lastSentAt ?? null,
+    lastError: d.lastError ?? null,
+  }
+}
+
+export async function updateDigestSettings(patch: {
+  enabled?: boolean
+  recipients?: string[]
+}): Promise<{ ok: boolean; error?: string }> {
+  const res = await cmsApi<{ ok: boolean }>('/seo/digest-settings', {
+    method: 'PUT',
+    body: JSON.stringify(patch),
+  })
+  if (res.error) return { ok: false, error: res.error }
+  return { ok: true }
+}
+
+export async function sendTestDigest(): Promise<{ ok: boolean; to?: string; error?: string }> {
+  const res = await cmsApi<{ ok: boolean; to?: string }>('/seo/digest-settings/test-send', {
+    method: 'POST',
+  })
+  if (res.error) return { ok: false, error: res.error }
+  return { ok: true, to: res.data?.to }
+}
+
 // ─── AI crawler activity ─────────────────────────────────────────────
 
 export interface AiCrawlerRow {
@@ -995,12 +1078,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 +1142,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 +1174,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 +1184,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 +1198,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}