@actuate-media/cms-admin 0.56.2 → 0.57.1

package/src/components/seo/SeoEditorDrawer.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { cloneElement, isValidElement, useEffect, useId, useState, type ReactElement } from 'react'
-import { Sparkles, Check } from 'lucide-react'
+import { Sparkles, Check, Loader2, Wand2 } from 'lucide-react'
 import { toast } from 'sonner'
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
 import {
   fetchSeoContentRecord,
   updateSeoFields,
@@ -11,6 +12,8 @@ import {
   type SeoFieldPayload,
   type LlmsInclude,
 } from '../../lib/seo-service.js'
+import { fixBrandVoiceContent } from '../../lib/brand-voice-client.js'
+import { BrandVoiceAlignmentBadge } from '../BrandVoiceAlignmentBadge.js'
 import { Drawer } from './Drawer.js'
 import { SeoLoading, SeoErrorState, btnPrimary, btnSecondary, gradeMeta } from './primitives.js'
 
@@ -28,6 +31,11 @@ type AiField =
 const KEY_TAKEAWAY_MAX = 240
 const LLMS_DESC_MAX = 160
 
+function seoBrandChannel(field: AiField): string | undefined {
+  if (field === 'metaDescription' || field === 'ogDescription') return 'meta_description'
+  return undefined
+}
+
 function CharCount({ value, max }: { value: string; max: number }) {
   const over = value.length > max
   return (
@@ -90,6 +98,10 @@ export function SeoEditorDrawer({
   const [error, setError] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
   const [aiBusy, setAiBusy] = useState<AiField | null>(null)
+  const [aiFixBusy, setAiFixBusy] = useState<AiField | null>(null)
+  const [aiAlignments, setAiAlignments] = useState<
+    Partial<Record<AiField, BrandAlignmentScoreResult>>
+  >({})
   const [form, setForm] = useState<SeoFieldPayload>({})
 
   useEffect(() => {
@@ -141,6 +153,9 @@ export function SeoEditorDrawer({
       }
       if (result.text) {
         update({ [field]: result.text } as Partial<SeoFieldPayload>)
+        if (result.brandAlignment) {
+          setAiAlignments((prev) => ({ ...prev, [field]: result.brandAlignment }))
+        }
         toast.success('AI suggestion applied — review before saving.')
       } else {
         toast.error('No suggestion was returned.')
@@ -152,6 +167,53 @@ export function SeoEditorDrawer({
     }
   }
 
+  async function handleAiFix(field: AiField) {
+    const text = (form[field as keyof SeoFieldPayload] as string | undefined) ?? ''
+    if (!text.trim()) return
+    setAiFixBusy(field)
+    try {
+      const res = await fixBrandVoiceContent({
+        content: text,
+        channel: seoBrandChannel(field),
+      })
+      if (!res.ok || !res.result) {
+        toast.error(res.error ?? 'Could not fix copy for brand voice.')
+        return
+      }
+      update({ [field]: res.result.text } as Partial<SeoFieldPayload>)
+      setAiAlignments((prev) => ({ ...prev, [field]: res.result!.afterScore }))
+      toast.success('Copy adjusted to match brand voice.')
+    } finally {
+      setAiFixBusy(null)
+    }
+  }
+
+  function alignmentRow(field: AiField) {
+    const alignment = aiAlignments[field]
+    if (!alignment) return null
+    const fixing = aiFixBusy === field
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-2">
+        <BrandVoiceAlignmentBadge alignment={alignment} compact />
+        {alignment.score < 85 && (
+          <button
+            type="button"
+            onClick={() => handleAiFix(field)}
+            disabled={fixing || aiBusy !== null}
+            className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+          >
+            {fixing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+            ) : (
+              <Wand2 className="h-3.5 w-3.5" aria-hidden />
+            )}
+            Fix for brand voice
+          </button>
+        )}
+      </div>
+    )
+  }
+
   async function handleSave() {
     if (!entityType || !entityId) return
     setSaving(true)
@@ -252,6 +314,7 @@ export function SeoEditorDrawer({
               onChange={(e) => update({ metaDescription: e.target.value })}
               placeholder="Short summary shown under the title in search results"
             />
+            {alignmentRow('metaDescription')}
           </Field>
 
           <Field label="Focus keyword" hint={aiButton('focusKeyword')}>
@@ -307,6 +370,7 @@ export function SeoEditorDrawer({
                 onChange={(e) => update({ ogDescription: e.target.value })}
                 placeholder={form.metaDescription || 'Description when shared on social media'}
               />
+              {alignmentRow('ogDescription')}
             </Field>
             <div className="border-border overflow-hidden rounded-lg border">
               {record.ogImage ? (

package/src/lib/brand-voice-client.ts

@@ -0,0 +1,38 @@
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
+import { cmsApi } from './api.js'
+
+export type { BrandAlignmentScoreResult }
+
+export interface BrandVoiceFixResult {
+  text: string
+  deterministicFixes: string[]
+  beforeScore: BrandAlignmentScoreResult
+  afterScore: BrandAlignmentScoreResult
+  usedAi: boolean
+}
+
+export async function fixBrandVoiceContent(input: {
+  content: string
+  channel?: string
+  useAi?: boolean
+}): Promise<{ ok: boolean; result?: BrandVoiceFixResult; error?: string }> {
+  const res = await cmsApi<BrandVoiceFixResult>('/ai/brand-voice/fix', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  })
+  if (res.error) return { ok: false, error: res.error }
+  if (!res.data?.text) return { ok: false, error: 'No fixed copy was returned.' }
+  return { ok: true, result: res.data }
+}
+
+export function brandAlignmentLabel(score: number): string {
+  if (score >= 85) return 'On brand'
+  if (score >= 65) return 'Mostly on brand'
+  return 'Off brand'
+}
+
+export function brandAlignmentTone(score: number): string {
+  if (score >= 85) return 'text-success'
+  if (score >= 65) return 'text-warning'
+  return 'text-destructive'
+}

package/src/lib/coauthor-client.ts

@@ -1,4 +1,5 @@
 import { cmsApi } from './api.js'
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
 
 /**
  * Inline AI co-author client — thin, typed wrapper around the
@@ -68,6 +69,7 @@ export interface CoauthorResult {
   text: string
   /** Populated only when `action === 'proofread'`. */
   changes?: ProofreadChange[]
+  brandAlignment?: BrandAlignmentScoreResult
 }
 
 export type CoauthorOutcome =
@@ -125,6 +127,7 @@ export async function coauthorText(
     action?: CoauthorAction
     text?: unknown
     changes?: unknown
+    brandAlignment?: BrandAlignmentScoreResult
   }>('/ai/coauthor', {
     method: 'POST',
     body: JSON.stringify(body),
@@ -155,6 +158,7 @@ export async function coauthorText(
         action === 'proofread' && Array.isArray(res.data.changes)
           ? (res.data.changes as ProofreadChange[])
           : undefined,
+      brandAlignment: res.data.brandAlignment,
     },
   }
 }

package/src/lib/seo-service.ts

@@ -8,6 +8,7 @@
  * Endpoint paths here are the contract implemented by cms-core
  * `packages/cms-core/src/api/handlers.ts` across phases 2-3 and 6.
  */
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
 import { cmsApi } from './api.js'
 
 /**
@@ -643,6 +644,7 @@ export interface SeoAiResult {
   text?: string
   alternatives?: string[]
   structuredData?: Record<string, unknown>
+  brandAlignment?: BrandAlignmentScoreResult
   /** True when the AI provider is not configured (graceful fallback). */
   unavailable?: boolean
 }

package/src/views/Settings.tsx

@@ -325,7 +325,7 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="ai" className="space-y-4">
-          <AISettingsTab role={session?.user?.role} />
+          <AISettingsTab role={session?.user?.role} config={config} />
         </Tabs.Content>
 
         <Tabs.Content value="users">

package/src/views/settings/AISettingsTab.tsx

@@ -4,7 +4,7 @@ import { AlertTriangle, Info, Loader2, Plus } from 'lucide-react'
 import { useId, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import { AiFeaturesCard } from './AiFeaturesCard.js'
-import { BrandVoiceCard } from './BrandVoiceCard.js'
+import { BrandVoiceCard, type BrandVoiceAiReadiness } from './BrandVoiceCard.js'
 import { ModelSelector } from './ModelSelector.js'
 import { MonthlyUsageCard } from './MonthlyUsageCard.js'
 import { ProviderConnectionCard } from './ProviderConnectionCard.js'
@@ -30,12 +30,46 @@ const PROVIDER_OPTIONS: Array<{ value: AiProviderKey; label: string }> = [
 export interface AISettingsTabProps {
   /** Current user's role. Only ADMIN can persist changes. */
   role?: string
+  /** Resolved CMS config — used to list content collections for brand voice analysis. */
+  config?: unknown
 }
 
-export function AISettingsTab({ role }: AISettingsTabProps) {
+export function AISettingsTab({ role, config }: AISettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const ai = useAiSettings(canEdit)
 
+  const brandVoiceAiReadiness = useMemo((): BrandVoiceAiReadiness => {
+    const contentWriting = ai.form.features.find((f) => f.key === 'ai.features.contentWriting')
+    if (contentWriting && !contentWriting.enabled) {
+      return {
+        ready: false,
+        message:
+          'Content writing suggestions are turned off. Enable them in AI Features and click Save changes before generating a brand voice profile.',
+      }
+    }
+    if (ai.providers.length === 0) {
+      return {
+        ready: false,
+        message:
+          'Connect an AI provider under Provider connections before generating a brand voice profile.',
+      }
+    }
+    if (!ai.form.defaultModelId) {
+      return {
+        ready: false,
+        message:
+          'Select a default model in the AI Assistant card and click Save changes. Analyze & draft profile uses the Content writing feature.',
+      }
+    }
+    if (ai.dirty) {
+      return {
+        ready: false,
+        message: 'Save your AI settings before generating a brand voice profile.',
+      }
+    }
+    return { ready: true }
+  }, [ai.dirty, ai.form.defaultModelId, ai.form.features, ai.providers.length])
+
   if (ai.loading) {
     return (
       <div className="space-y-4" aria-busy="true" aria-live="polite">
@@ -89,7 +123,17 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
         onToggle={ai.toggleFeature}
         onSetFeatureModel={ai.setFeatureModel}
       />
-      <BrandVoiceCard value={ai.form.brandVoice} canEdit={canEdit} onChange={ai.setBrandVoice} />
+      <BrandVoiceCard
+        value={ai.form.brandVoice}
+        canEdit={canEdit}
+        onChange={ai.setBrandVoice}
+        config={config}
+        onAnalyze={canEdit ? ai.analyzeBrandVoice : undefined}
+        onScore={canEdit ? ai.scoreBrandVoice : undefined}
+        editMode={ai.brandVoiceEditMode}
+        onEditModeChange={ai.setBrandVoiceEditMode}
+        aiReadiness={brandVoiceAiReadiness}
+      />
       <MonthlyUsageCard
         usage={ai.usage}
         monthlyTokenLimit={ai.form.monthlyTokenLimit}