@actuate-media/cms-admin 0.34.0 → 0.36.0

package/src/views/settings/AiFeaturesCard.tsx

@@ -1,22 +1,35 @@
 'use client'
 
+import { AlertTriangle } from 'lucide-react'
 import { useId } from 'react'
 import { SettingsToggleRow } from './components.js'
-import type { AiFeatureView } from './useAiSettings.js'
+import { capabilityLabel, effectiveFeatureModel, isModelCompatible } from './featureModel.js'
+import type { AiFeatureView, AiModelView } from './useAiSettings.js'
+
+const SELECT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-sm text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
 
 /**
- * Global AI feature toggles. Each switch persists (via the Save bar) to the
- * shared `ai.features.*` flags. Enforcement across modules lands in a later
- * phase; here we surface and store the operator's intent.
+ * 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.
  */
 export function AiFeaturesCard({
   features,
+  models,
+  defaultModelId,
   canEdit,
   onToggle,
+  onSetFeatureModel,
 }: {
   features: AiFeatureView[]
+  models: AiModelView[]
+  defaultModelId: string
   canEdit: boolean
   onToggle: (key: string, enabled: boolean) => void
+  onSetFeatureModel: (key: string, modelId: string) => void
 }) {
   const headingId = useId()
   return (
@@ -25,21 +38,23 @@ export function AiFeaturesCard({
         AI Features
       </h3>
       <p className="text-muted-foreground mb-4 text-sm">
-        Turn individual AI-powered features on or off across the CMS.
+        Turn individual AI-powered features on or off, and optionally route each to a specific
+        model.
       </p>
 
       {features.length === 0 ? (
         <p className="text-muted-foreground text-sm">No AI features are available.</p>
       ) : (
-        <div className="space-y-4">
+        <div className="divide-border divide-y">
           {features.map((f) => (
-            <SettingsToggleRow
+            <FeatureRow
               key={f.key}
-              label={f.label}
-              description={f.description}
-              checked={f.enabled}
-              disabled={!canEdit}
-              onChange={(v) => onToggle(f.key, v)}
+              feature={f}
+              models={models}
+              defaultModelId={defaultModelId}
+              canEdit={canEdit}
+              onToggle={onToggle}
+              onSetFeatureModel={onSetFeatureModel}
             />
           ))}
         </div>
@@ -47,3 +62,93 @@ export function AiFeaturesCard({
     </section>
   )
 }
+
+function FeatureRow({
+  feature,
+  models,
+  defaultModelId,
+  canEdit,
+  onToggle,
+  onSetFeatureModel,
+}: {
+  feature: AiFeatureView
+  models: AiModelView[]
+  defaultModelId: string
+  canEdit: boolean
+  onToggle: (key: string, enabled: boolean) => void
+  onSetFeatureModel: (key: string, modelId: string) => void
+}) {
+  const selectId = useId()
+  const required = feature.requiredCapabilities ?? []
+  const effective = effectiveFeatureModel(feature.modelId, defaultModelId, required, models)
+  const defaultModel = models.find(
+    (m) => m.id === defaultModelId || m.providerModelId === defaultModelId,
+  )
+
+  const hasModels = models.length > 0
+  const defaultLabel = defaultModel
+    ? `Use default (${defaultModel.displayName})`
+    : 'Use default model'
+
+  return (
+    <div className="py-4 first:pt-0 last:pb-0">
+      <SettingsToggleRow
+        label={feature.label}
+        description={feature.description}
+        checked={feature.enabled}
+        disabled={!canEdit}
+        onChange={(v) => onToggle(feature.key, v)}
+      />
+
+      {feature.enabled && (
+        <div className="mt-3 pl-0">
+          <label htmlFor={selectId} className="text-muted-foreground mb-1 block text-sm">
+            Model
+          </label>
+          {hasModels ? (
+            <select
+              id={selectId}
+              value={feature.modelId ?? ''}
+              disabled={!canEdit}
+              onChange={(e) => onSetFeatureModel(feature.key, e.target.value)}
+              className={SELECT_CLASS}
+            >
+              <option value="">{defaultLabel}</option>
+              {models.map((m) => {
+                const compatible = isModelCompatible(m, required)
+                return (
+                  <option key={m.id} value={m.id} disabled={!compatible}>
+                    {m.displayName}
+                    {m.status === 'unavailable' ? ' (unavailable)' : ''}
+                    {m.status !== 'unavailable' && !compatible ? ' (incompatible)' : ''}
+                  </option>
+                )
+              })}
+            </select>
+          ) : (
+            <p className="text-muted-foreground text-sm">
+              Connect a provider and refresh models to route this feature.
+            </p>
+          )}
+
+          {hasModels && !effective.isOverride && (
+            <p className="text-muted-foreground mt-1 text-sm">
+              {effective.model
+                ? `Uses the default model (${effective.model.displayName}).`
+                : 'No default model selected yet — set one in the AI Assistant card above.'}
+            </p>
+          )}
+
+          {hasModels && effective.missingCapabilities.length > 0 && (
+            <p className="text-warning mt-1.5 flex items-start gap-1.5 text-sm" role="status">
+              <AlertTriangle size={14} className="mt-0.5 shrink-0" aria-hidden="true" />
+              This model can&apos;t do{' '}
+              {effective.missingCapabilities.map(capabilityLabel).join(', ')}, which this feature
+              needs. Pick a compatible model.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/settings/BrandVoiceCard.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { Sparkles } from 'lucide-react'
+import { useId } from 'react'
+import { 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 headingId = useId()
+  const nameId = useId()
+  const toneId = useId()
+  const audienceId = useId()
+  const guidelinesId = useId()
+  const sampleId = useId()
+  const disabled = !canEdit
+
+  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">
+          <Sparkles size={18} aria-hidden="true" />
+        </span>
+        <div>
+          <h3 id={headingId} className="text-foreground text-base font-medium">
+            Brand voice
+          </h3>
+          <p className="text-muted-foreground text-sm">
+            Teach the AI how your brand sounds. Applied to content writing and SEO copy.
+          </p>
+        </div>
+      </div>
+
+      <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>
+    </section>
+  )
+}

package/src/views/settings/featureModel.ts

@@ -0,0 +1,64 @@
+/**
+ * Client-side, display-only feature → model resolution.
+ *
+ * Mirrors a simplified version of cms-core's `resolveFeatureModel` so the UI can
+ * preview which model a feature will use as the admin edits — including before
+ * Save. The server resolver remains the authority for the AI runtime; this only
+ * drives labels and capability warnings.
+ */
+
+import type { AiModelView } from './useAiSettings.js'
+
+const CAPABILITY_LABELS: Record<string, string> = {
+  text: 'text',
+  vision: 'vision',
+  imageGeneration: 'image generation',
+  embeddings: 'embeddings',
+  toolCalling: 'tool calling',
+  structuredOutput: 'structured output',
+  streaming: 'streaming',
+  reasoning: 'reasoning',
+  longContext: 'long context',
+}
+
+export function findModel(models: AiModelView[], id: string | undefined): AiModelView | undefined {
+  if (!id) return undefined
+  return models.find((m) => m.id === id || m.providerModelId === id)
+}
+
+/** Required capabilities a model is missing. Unknown capability strings are ignored. */
+export function missingCapabilities(model: AiModelView | undefined, required: string[]): string[] {
+  const wanted = required.filter((c) => c in CAPABILITY_LABELS)
+  if (!model) return wanted
+  return wanted.filter((c) => !model.capabilities?.[c])
+}
+
+export function capabilityLabel(key: string): string {
+  return CAPABILITY_LABELS[key] ?? key
+}
+
+export interface EffectiveFeatureModel {
+  /** The id that will be used (override, else the global default). */
+  modelId: string
+  model?: AiModelView
+  /** True when the feature has its own model override (not the default). */
+  isOverride: boolean
+  missingCapabilities: string[]
+}
+
+export function effectiveFeatureModel(
+  override: string | undefined,
+  defaultModelId: string,
+  required: string[],
+  models: AiModelView[],
+): EffectiveFeatureModel {
+  const isOverride = Boolean(override)
+  const modelId = override || defaultModelId
+  const model = findModel(models, modelId)
+  return { modelId, model, isOverride, missingCapabilities: missingCapabilities(model, required) }
+}
+
+/** Whether a model satisfies every required capability and is selectable. */
+export function isModelCompatible(model: AiModelView, required: string[]): boolean {
+  return model.status !== 'unavailable' && missingCapabilities(model, required).length === 0
+}

package/src/views/settings/useAiSettings.ts

@@ -76,6 +76,10 @@ export interface AiFeatureView {
   enabled: boolean
   category: string
   requiredCapabilities: string[]
+  /** Per-feature model override (`provider:modelId`). Empty = use the default. */
+  modelId?: string
+  /** Per-feature provider connection override. Usually derived from the model. */
+  providerId?: string
 }
 
 export interface AiUsageView {
@@ -89,12 +93,32 @@ export interface AiUsageView {
   runCount: number
 }
 
+/** Editable brand voice fields (the buffered Save-bar portion). */
+export interface BrandVoiceForm {
+  enabled: boolean
+  name: string
+  tone: string
+  audience: string
+  guidelines: string
+  sampleText: string
+}
+
+const EMPTY_BRAND_VOICE: BrandVoiceForm = {
+  enabled: false,
+  name: '',
+  tone: '',
+  audience: '',
+  guidelines: '',
+  sampleText: '',
+}
+
 /** The buffered (Save-bar) portion of AI settings. */
 export interface AiSettingsForm {
   defaultProviderId: string
   defaultModelId: string
   features: AiFeatureView[]
   monthlyTokenLimit: string
+  brandVoice: BrandVoiceForm
 }
 
 interface AiSettingsResponse {
@@ -103,6 +127,14 @@ interface AiSettingsResponse {
     defaultModelId?: string
     features: AiFeatureView[]
     budget: { monthlyTokenLimit?: number }
+    brandVoice?: {
+      enabled?: boolean
+      name?: string
+      tone?: string
+      audience?: string
+      guidelines?: string
+      sampleText?: string
+    }
   }
   providers: AiProviderView[]
   defaultModel: AiModelView | null
@@ -114,11 +146,23 @@ function formFromResponse(res: AiSettingsResponse): AiSettingsForm {
   return {
     defaultProviderId: res.settings.defaultProviderId ?? '',
     defaultModelId: res.settings.defaultModelId ?? '',
-    features: res.settings.features.map((f) => ({ ...f })),
+    features: res.settings.features.map((f) => ({
+      ...f,
+      modelId: f.modelId ?? '',
+      providerId: f.providerId ?? '',
+    })),
     monthlyTokenLimit:
       typeof res.settings.budget.monthlyTokenLimit === 'number'
         ? String(res.settings.budget.monthlyTokenLimit)
         : '',
+    brandVoice: {
+      enabled: res.settings.brandVoice?.enabled ?? false,
+      name: res.settings.brandVoice?.name ?? '',
+      tone: res.settings.brandVoice?.tone ?? '',
+      audience: res.settings.brandVoice?.audience ?? '',
+      guidelines: res.settings.brandVoice?.guidelines ?? '',
+      sampleText: res.settings.brandVoice?.sampleText ?? '',
+    },
   }
 }
 
@@ -127,6 +171,19 @@ const EMPTY_FORM: AiSettingsForm = {
   defaultModelId: '',
   features: [],
   monthlyTokenLimit: '',
+  brandVoice: { ...EMPTY_BRAND_VOICE },
+}
+
+/** A brand voice with no content and disabled clears the stored profile (send null). */
+function brandVoiceIsEmpty(bv: BrandVoiceForm): boolean {
+  return (
+    !bv.enabled &&
+    !bv.name.trim() &&
+    !bv.tone.trim() &&
+    !bv.audience.trim() &&
+    !bv.guidelines.trim() &&
+    !bv.sampleText.trim()
+  )
 }
 
 export interface ProviderInput {
@@ -152,6 +209,10 @@ export interface UseAiSettings {
   setDefaultModel: (id: string) => void
   setMonthlyTokenLimit: (value: string) => void
   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 one or more brand voice fields. */
+  setBrandVoice: (patch: Partial<BrandVoiceForm>) => void
   dirty: boolean
   budgetError: string | null
   saveState: SaveState
@@ -253,6 +314,21 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
     setSaveState('idle')
   }, [])
 
+  const setFeatureModel = useCallback((key: string, modelId: string) => {
+    setForm((prev) => ({
+      ...prev,
+      features: prev.features.map((f) =>
+        f.key === key ? { ...f, modelId, providerId: modelId ? f.providerId : '' } : f,
+      ),
+    }))
+    setSaveState('idle')
+  }, [])
+
+  const setBrandVoice = useCallback((patch: Partial<BrandVoiceForm>) => {
+    setForm((prev) => ({ ...prev, brandVoice: { ...prev.brandVoice, ...patch } }))
+    setSaveState('idle')
+  }, [])
+
   const budgetError = useMemo(() => {
     if (form.monthlyTokenLimit === '') return null
     const n = Number(form.monthlyTokenLimit)
@@ -265,7 +341,19 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
     if (form.defaultModelId !== baseline.defaultModelId) return true
     if (form.monthlyTokenLimit !== baseline.monthlyTokenLimit) return true
     if (form.features.length !== baseline.features.length) return true
-    return form.features.some((f, i) => f.enabled !== baseline.features[i]?.enabled)
+    const bvKeys: (keyof BrandVoiceForm)[] = [
+      'enabled',
+      'name',
+      'tone',
+      'audience',
+      'guidelines',
+      'sampleText',
+    ]
+    if (bvKeys.some((k) => form.brandVoice[k] !== baseline.brandVoice[k])) return true
+    return form.features.some((f, i) => {
+      const base = baseline.features[i]
+      return f.enabled !== base?.enabled || (f.modelId ?? '') !== (base?.modelId ?? '')
+    })
   }, [form, baseline])
 
   const save = useCallback(async () => {
@@ -278,11 +366,25 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
         body: JSON.stringify({
           defaultProviderId: form.defaultProviderId || null,
           defaultModelId: form.defaultModelId || null,
-          features: form.features.map((f) => ({ key: f.key, enabled: f.enabled })),
+          features: form.features.map((f) => ({
+            key: f.key,
+            enabled: f.enabled,
+            modelId: f.modelId ? f.modelId : null,
+          })),
           budget: {
             monthlyTokenLimit:
               form.monthlyTokenLimit === '' ? null : Number(form.monthlyTokenLimit),
           },
+          brandVoice: brandVoiceIsEmpty(form.brandVoice)
+            ? null
+            : {
+                enabled: form.brandVoice.enabled,
+                name: form.brandVoice.name,
+                tone: form.brandVoice.tone,
+                audience: form.brandVoice.audience,
+                guidelines: form.brandVoice.guidelines,
+                sampleText: form.brandVoice.sampleText,
+              },
         }),
       })
       if (res.error) throw new Error(res.error)
@@ -431,6 +533,8 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
     setDefaultModel: setDefaultModelId,
     setMonthlyTokenLimit,
     toggleFeature,
+    setFeatureModel,
+    setBrandVoice,
     dirty,
     budgetError,
     saveState,