@actuate-media/cms-admin 0.35.0 → 0.36.1

package/src/views/settings/AISettingsTab.tsx

@@ -1,13 +1,14 @@
 'use client'
 
-import { AlertTriangle, Bot, Info, Loader2, Plus } from 'lucide-react'
+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 { ModelSelector } from './ModelSelector.js'
 import { MonthlyUsageCard } from './MonthlyUsageCard.js'
 import { ProviderConnectionCard } from './ProviderConnectionCard.js'
-import { SettingsSaveBar } from './components.js'
+import { SettingsCard, SettingsSaveBar } from './components.js'
 import {
   useAiSettings,
   type AiProviderKey,
@@ -40,7 +41,7 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading AI settings…</span>
         {[0, 1, 2].map((i) => (
-          <div key={i} className="border-border bg-card rounded-lg border p-4">
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
             <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
             <div className="space-y-3">
               <div className="bg-muted h-9 w-full animate-pulse rounded" />
@@ -88,6 +89,7 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
         onToggle={ai.toggleFeature}
         onSetFeatureModel={ai.setFeatureModel}
       />
+      <BrandVoiceCard value={ai.form.brandVoice} canEdit={canEdit} onChange={ai.setBrandVoice} />
       <MonthlyUsageCard
         usage={ai.usage}
         monthlyTokenLimit={ai.form.monthlyTokenLimit}
@@ -123,7 +125,6 @@ export function AISettingsTab({ role }: AISettingsTabProps) {
 // ---------------------------------------------------------------------------
 
 function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
-  const headingId = useId()
   const providerSelectId = useId()
   const [refreshing, setRefreshing] = useState(false)
 
@@ -148,21 +149,10 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
   }
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-4 flex items-center gap-2">
-        <span className="bg-brand/10 text-brand flex h-9 w-9 items-center justify-center rounded-lg">
-          <Bot size={18} aria-hidden="true" />
-        </span>
-        <div>
-          <h3 id={headingId} className="text-foreground text-base font-medium">
-            AI Assistant
-          </h3>
-          <p className="text-muted-foreground text-sm">
-            The default provider and model used across AI features.
-          </p>
-        </div>
-      </div>
-
+    <SettingsCard
+      title="AI Assistant"
+      description="The default provider and model used across AI features."
+    >
       {ai.providers.length === 0 ? (
         <div className="border-border bg-muted/40 text-muted-foreground rounded-md border border-dashed p-4 text-sm">
           No AI providers are connected yet. Add one below to enable AI features.
@@ -204,7 +194,7 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
           />
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 
@@ -213,16 +203,14 @@ function AssistantCard({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean })
 // ---------------------------------------------------------------------------
 
 function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdit: boolean }) {
-  const headingId = useId()
   const [adding, setAdding] = useState(false)
 
   return (
-    <section aria-labelledby={headingId} className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h3 id={headingId} className="text-foreground text-base font-medium">
-          Provider connections
-        </h3>
-        {canEdit && !adding && (
+    <SettingsCard
+      title="Provider connections"
+      description="Connect Anthropic, OpenAI, xAI, or a custom OpenAI-compatible endpoint."
+      actions={
+        canEdit && !adding ? (
           <button
             type="button"
             onClick={() => setAdding(true)}
@@ -231,57 +219,59 @@ function ProviderConnectionsSection({ ai, canEdit }: { ai: UseAiSettings; canEdi
             <Plus size={14} aria-hidden="true" />
             Add provider
           </button>
+        ) : undefined
+      }
+    >
+      <div className="space-y-3">
+        {adding && (
+          <AddProviderForm
+            ai={ai}
+            onDone={() => setAdding(false)}
+            onCancel={() => setAdding(false)}
+          />
         )}
-      </div>
 
-      {adding && (
-        <AddProviderForm
-          ai={ai}
-          onDone={() => setAdding(false)}
-          onCancel={() => setAdding(false)}
-        />
-      )}
-
-      {ai.providers.map((p) => (
-        <ProviderConnectionCard
-          key={p.id}
-          provider={p}
-          canEdit={canEdit}
-          busy={ai.busyProviderId === p.id}
-          onTest={async () => {
-            const res = await ai.testProvider(p.id)
-            if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
-            else toast.success(res.message ?? 'Connection successful.')
-          }}
-          onSyncModels={async () => {
-            const res = await ai.syncModels(p.id)
-            if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
-            else if (res.fromFallback)
-              toast.warning(res.warning ?? 'Showing the curated model list.')
-            else toast.success('Model list refreshed.')
-          }}
-          onUpdateKey={async (apiKey) => {
-            const res = await ai.updateProvider(p.id, { apiKey })
-            if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
-            else toast.success('API key updated.')
-          }}
-          onUpdateBaseUrl={async (baseUrl) => {
-            const res = await ai.updateProvider(p.id, { baseUrl })
-            if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
-            else toast.success('Base URL updated.')
-          }}
-          onDisconnect={async () => {
-            const res = await ai.deleteProvider(p.id)
-            if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
-            else toast.success(`${p.displayName} disconnected.`)
-          }}
-        />
-      ))}
+        {ai.providers.map((p) => (
+          <ProviderConnectionCard
+            key={p.id}
+            provider={p}
+            canEdit={canEdit}
+            busy={ai.busyProviderId === p.id}
+            onTest={async () => {
+              const res = await ai.testProvider(p.id)
+              if (!res.ok) toast.error(res.error ?? res.message ?? 'Connection test failed.')
+              else toast.success(res.message ?? 'Connection successful.')
+            }}
+            onSyncModels={async () => {
+              const res = await ai.syncModels(p.id)
+              if (!res.ok) toast.error(res.error ?? 'Failed to refresh models.')
+              else if (res.fromFallback)
+                toast.warning(res.warning ?? 'Showing the curated model list.')
+              else toast.success('Model list refreshed.')
+            }}
+            onUpdateKey={async (apiKey) => {
+              const res = await ai.updateProvider(p.id, { apiKey })
+              if (!res.ok) toast.error(res.error ?? 'Failed to update key.')
+              else toast.success('API key updated.')
+            }}
+            onUpdateBaseUrl={async (baseUrl) => {
+              const res = await ai.updateProvider(p.id, { baseUrl })
+              if (!res.ok) toast.error(res.error ?? 'Failed to update base URL.')
+              else toast.success('Base URL updated.')
+            }}
+            onDisconnect={async () => {
+              const res = await ai.deleteProvider(p.id)
+              if (!res.ok) toast.error(res.error ?? 'Failed to disconnect.')
+              else toast.success(`${p.displayName} disconnected.`)
+            }}
+          />
+        ))}
 
-      {ai.providers.length === 0 && !adding && (
-        <p className="text-muted-foreground text-sm">No providers connected.</p>
-      )}
-    </section>
+        {ai.providers.length === 0 && !adding && (
+          <p className="text-muted-foreground text-sm">No providers connected.</p>
+        )}
+      </div>
+    </SettingsCard>
   )
 }
 
@@ -330,7 +320,7 @@ function AddProviderForm({
   }
 
   return (
-    <div className="border-border bg-card rounded-lg border p-4">
+    <div className="border-border bg-background rounded-lg border p-4">
       <h4 className="text-foreground mb-3 text-base font-medium">Add a provider</h4>
       <div className="space-y-3">
         <div>

package/src/views/settings/AiFeaturesCard.tsx

@@ -2,7 +2,7 @@
 
 import { AlertTriangle } from 'lucide-react'
 import { useId } from 'react'
-import { SettingsToggleRow } from './components.js'
+import { SettingsCard, SettingsToggleRow } from './components.js'
 import { capabilityLabel, effectiveFeatureModel, isModelCompatible } from './featureModel.js'
 import type { AiFeatureView, AiModelView } from './useAiSettings.js'
 
@@ -31,17 +31,11 @@ export function AiFeaturesCard({
   onToggle: (key: string, enabled: boolean) => void
   onSetFeatureModel: (key: string, modelId: string) => void
 }) {
-  const headingId = useId()
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        AI Features
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Turn individual AI-powered features on or off, and optionally route each to a specific
-        model.
-      </p>
-
+    <SettingsCard
+      title="AI Features"
+      description="Turn individual AI-powered features on or off, and optionally route each to a specific model."
+    >
       {features.length === 0 ? (
         <p className="text-muted-foreground text-sm">No AI features are available.</p>
       ) : (
@@ -59,7 +53,7 @@ export function AiFeaturesCard({
           ))}
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }
 

package/src/views/settings/BrandVoiceCard.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useId } from 'react'
+import { SettingsCard, SettingsToggleRow } from './components.js'
+import type { BrandVoiceForm } from './useAiSettings.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 TEXTAREA_CLASS = `${INPUT_CLASS} min-h-[88px] resize-y`
+const LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground'
+
+const TONE_MAX = 400
+const GUIDELINES_MAX = 2000
+const SAMPLE_MAX = 2000
+
+/**
+ * Brand voice — a reusable description of how generated copy should sound. When
+ * enabled, it is injected into the system prompt of content-generation features
+ * (co-author, SEO titles/descriptions) so every AI surface writes on-brand.
+ */
+export function BrandVoiceCard({
+  value,
+  canEdit,
+  onChange,
+}: {
+  value: BrandVoiceForm
+  canEdit: boolean
+  onChange: (patch: Partial<BrandVoiceForm>) => void
+}) {
+  const nameId = useId()
+  const toneId = useId()
+  const audienceId = useId()
+  const guidelinesId = useId()
+  const sampleId = useId()
+  const disabled = !canEdit
+
+  return (
+    <SettingsCard
+      title="Brand voice"
+      description="Teach the AI how your brand sounds. Applied to content writing and SEO copy."
+    >
+      <div className="space-y-4">
+        <SettingsToggleRow
+          label="Apply brand voice"
+          description="When on, generated copy follows the tone and guidelines below."
+          checked={value.enabled}
+          disabled={disabled}
+          onChange={(v) => onChange({ enabled: v })}
+        />
+
+        <div className="border-border space-y-4 border-t pt-4">
+          <div>
+            <label htmlFor={nameId} className={LABEL_CLASS}>
+              Name
+            </label>
+            <input
+              id={nameId}
+              type="text"
+              value={value.name}
+              disabled={disabled}
+              placeholder="e.g. Acme Marketing"
+              onChange={(e) => onChange({ name: e.target.value })}
+              className={INPUT_CLASS}
+            />
+          </div>
+
+          <div>
+            <label htmlFor={toneId} className={LABEL_CLASS}>
+              Tone
+            </label>
+            <input
+              id={toneId}
+              type="text"
+              value={value.tone}
+              disabled={disabled}
+              maxLength={TONE_MAX}
+              placeholder="e.g. confident, warm, plain-spoken"
+              onChange={(e) => onChange({ tone: e.target.value })}
+              className={INPUT_CLASS}
+            />
+          </div>
+
+          <div>
+            <label htmlFor={audienceId} className={LABEL_CLASS}>
+              Audience <span className="text-muted-foreground font-normal">(optional)</span>
+            </label>
+            <input
+              id={audienceId}
+              type="text"
+              value={value.audience}
+              disabled={disabled}
+              placeholder="e.g. busy IT directors at mid-market SaaS companies"
+              onChange={(e) => onChange({ audience: e.target.value })}
+              className={INPUT_CLASS}
+            />
+          </div>
+
+          <div>
+            <label htmlFor={guidelinesId} className={LABEL_CLASS}>
+              Guidelines <span className="text-muted-foreground font-normal">(optional)</span>
+            </label>
+            <textarea
+              id={guidelinesId}
+              value={value.guidelines}
+              disabled={disabled}
+              maxLength={GUIDELINES_MAX}
+              placeholder={
+                'Do: lead with the benefit, use active voice.\nDon\u2019t: use jargon, exclamation points, or hype.'
+              }
+              onChange={(e) => onChange({ guidelines: e.target.value })}
+              className={TEXTAREA_CLASS}
+            />
+            <p className="text-muted-foreground mt-1 text-sm">
+              {value.guidelines.length}/{GUIDELINES_MAX}
+            </p>
+          </div>
+
+          <div>
+            <label htmlFor={sampleId} className={LABEL_CLASS}>
+              Sample copy <span className="text-muted-foreground font-normal">(optional)</span>
+            </label>
+            <textarea
+              id={sampleId}
+              value={value.sampleText}
+              disabled={disabled}
+              maxLength={SAMPLE_MAX}
+              placeholder="Paste a paragraph of on-brand copy the AI can pattern-match against."
+              onChange={(e) => onChange({ sampleText: e.target.value })}
+              className={TEXTAREA_CLASS}
+            />
+            <p className="text-muted-foreground mt-1 text-sm">
+              {value.sampleText.length}/{SAMPLE_MAX}
+            </p>
+          </div>
+        </div>
+      </div>
+    </SettingsCard>
+  )
+}

package/src/views/settings/GeneralSettingsTab.tsx

@@ -25,7 +25,7 @@ export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps
       <div className="space-y-4" aria-busy="true" aria-live="polite">
         <span className="sr-only">Loading settings…</span>
         {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="border-border bg-card rounded-lg border p-4">
+          <div key={i} className="border-border bg-card rounded-lg border p-6">
             <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
             <div className="space-y-3">
               <div className="bg-muted h-9 w-full animate-pulse rounded" />

package/src/views/settings/LanguageRegionCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useId, useMemo } from 'react'
+import { SettingsCard } from './components.js'
 import type { GeneralSettingsForm, ValidationIssue } from './useGeneralSettings.js'
 
 const INPUT_CLASS =
@@ -58,13 +59,10 @@ export function LanguageRegionCard({ form, setField, issues, canEdit }: Language
   }, [form.timezone])
 
   return (
-    <section
-      aria-labelledby={`${langId}-heading`}
-      className="border-border bg-card rounded-lg border p-4"
+    <SettingsCard
+      title="Language & Region"
+      description="Default language and timezone applied across the admin and public site."
     >
-      <h3 id={`${langId}-heading`} className="text-foreground mb-4 text-base font-medium">
-        Language &amp; Region
-      </h3>
       <div className="space-y-4">
         <div>
           <label htmlFor={langId} className={LABEL_CLASS}>
@@ -114,6 +112,6 @@ export function LanguageRegionCard({ form, setField, issues, canEdit }: Language
           )}
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/MonthlyUsageCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useId } from 'react'
+import { SettingsCard } from './components.js'
 import type { AiUsageView } from './useAiSettings.js'
 
 const INPUT_CLASS =
@@ -31,7 +32,6 @@ export function MonthlyUsageCard({
   budgetError: string | null
   canEdit: boolean
 }) {
-  const headingId = useId()
   const limitId = useId()
 
   const used = usage?.totalTokens ?? 0
@@ -44,14 +44,10 @@ export function MonthlyUsageCard({
     : 'This month'
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        Monthly Usage
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Token usage for {periodLabel}. Aggregated from completed AI runs.
-      </p>
-
+    <SettingsCard
+      title="Monthly Usage"
+      description={`Token usage for ${periodLabel}. Aggregated from completed AI runs.`}
+    >
       <div className="space-y-4">
         <div>
           <div className="mb-1 flex items-center justify-between text-sm">
@@ -113,6 +109,6 @@ export function MonthlyUsageCard({
           )}
         </div>
       </div>
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/ProviderConnectionCard.tsx

@@ -94,7 +94,7 @@ export function ProviderConnectionCard({
   }
 
   return (
-    <div className="border-border bg-card rounded-lg border p-4">
+    <div className="border-border bg-background rounded-lg border p-4">
       <div className="mb-3 flex items-start justify-between gap-3">
         <div>
           <div className="flex items-center gap-2">

package/src/views/settings/SecurityStatusCard.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useId } from 'react'
 import { Shield, ShieldAlert, ShieldCheck, ShieldX } from 'lucide-react'
 import type { SecurityStatus, SecurityWarning } from '@actuate-media/cms-core/security-center'
+import { SettingsCard } from './components.js'
 import { CheckIcon } from './securityPrimitives.js'
 
 const LEVEL_STYLES: Record<
@@ -40,16 +40,14 @@ export function SecurityStatusCard({
   status: SecurityStatus
   onNavigate?: (path: string) => void
 }) {
-  const headingId = useId()
   const style = LEVEL_STYLES[status.status]
   const { Icon } = style
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <div className="mb-1 flex items-start justify-between gap-3">
-        <h3 id={headingId} className="text-foreground text-base font-medium">
-          Security Status
-        </h3>
+    <SettingsCard
+      title="Security Status"
+      description={status.description}
+      actions={
         <span
           className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-sm font-medium ${style.pill}`}
         >
@@ -57,9 +55,8 @@ export function SecurityStatusCard({
           {/* Visible text label means the status never relies on color alone. */}
           {style.word}
         </span>
-      </div>
-      <p className="text-muted-foreground mb-4 text-sm">{status.description}</p>
-
+      }
+    >
       <div className="grid grid-cols-1 gap-x-6 gap-y-1 sm:grid-cols-2">
         {status.checks.map((check) => (
           <button
@@ -105,6 +102,6 @@ export function SecurityStatusCard({
           ))}
         </div>
       )}
-    </section>
+    </SettingsCard>
   )
 }

package/src/views/settings/SecurityTab.tsx

@@ -12,7 +12,7 @@ import { useSecuritySettings } from './useSecuritySettings.js'
 
 function CardSkeleton() {
   return (
-    <div className="border-border bg-card animate-pulse rounded-lg border p-4">
+    <div className="border-border bg-card animate-pulse rounded-lg border p-6">
       <div className="bg-muted mb-3 h-4 w-40 rounded" />
       <div className="bg-muted mb-4 h-3 w-72 rounded" />
       <div className="space-y-3">

package/src/views/settings/SeoRobotsDefaultsCard.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useId, useState } from 'react'
-import { ConfirmDangerousSettingDialog, SettingsToggleRow } from './components.js'
+import { useState } from 'react'
+import { ConfirmDangerousSettingDialog, SettingsCard, SettingsToggleRow } from './components.js'
 import type { GeneralSettingsForm, SiteIndexStatus } from './useGeneralSettings.js'
 
 interface SeoRobotsDefaultsCardProps {
@@ -29,7 +29,6 @@ export function SeoRobotsDefaultsCard({
   canEdit,
   onNavigate,
 }: SeoRobotsDefaultsCardProps) {
-  const headingId = useId()
   const [pending, setPending] = useState<PendingChange | null>(null)
 
   // Some toggles can take the whole production site out of search results, so
@@ -65,16 +64,10 @@ export function SeoRobotsDefaultsCard({
   const sitemapStatus = sitemapCheck ? (sitemapCheck.value === 'Yes' ? 'Enabled' : 'Disabled') : '—'
 
   return (
-    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
-      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
-        SEO &amp; Robots Defaults
-      </h3>
-      <p className="text-muted-foreground mb-4 text-sm">
-        Set the site-wide default for search engine indexing. Individual pages can inherit or
-        override these rules in their SEO panel. These share the same configuration as the SEO
-        section.
-      </p>
-
+    <SettingsCard
+      title="SEO & Robots Defaults"
+      description="Set the site-wide default for search engine indexing. Individual pages can inherit or override these rules in their SEO panel. These share the same configuration as the SEO section."
+    >
       <div className="space-y-4">
         <SettingsToggleRow
           label="Default No Index"
@@ -133,7 +126,7 @@ export function SeoRobotsDefaultsCard({
         }}
         onCancel={() => setPending(null)}
       />
-    </section>
+    </SettingsCard>
   )
 }