@actuate-media/cms-admin 0.34.0 → 0.35.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/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 {
@@ -114,7 +118,11 @@ 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)
@@ -152,6 +160,8 @@ 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
   dirty: boolean
   budgetError: string | null
   saveState: SaveState
@@ -253,6 +263,16 @@ 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 budgetError = useMemo(() => {
     if (form.monthlyTokenLimit === '') return null
     const n = Number(form.monthlyTokenLimit)
@@ -265,7 +285,10 @@ 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)
+    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,7 +301,11 @@ 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),
@@ -431,6 +458,7 @@ export function useAiSettings(canEdit: boolean): UseAiSettings {
     setDefaultModel: setDefaultModelId,
     setMonthlyTokenLimit,
     toggleFeature,
+    setFeatureModel,
     dirty,
     budgetError,
     saveState,