@actuate-media/cms-admin 0.33.0 → 0.34.0

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

@@ -0,0 +1,225 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+/**
+ * Settings > AI reads three backends: /ai/settings (defaults + masked
+ * providers), /ai/models (catalog), /ai/usage/summary. Provider connection
+ * actions hit /ai/providers/*. Keys are never returned — only a masked last4.
+ */
+const SETTINGS_RESPONSE = {
+  settings: {
+    defaultProviderId: 'p1',
+    defaultModelId: 'anthropic:claude-sonnet-4-latest',
+    features: [
+      {
+        key: 'ai.features.contentWriting',
+        label: 'Content writing suggestions',
+        description: 'Draft, rewrite, summarize content.',
+        enabled: true,
+        category: 'content',
+        requiredCapabilities: ['text'],
+      },
+      {
+        key: 'ai.features.redirectChainFlattening',
+        label: 'Redirect chain flattening',
+        description: 'Suggest single-hop redirects.',
+        enabled: false,
+        category: 'seo',
+        requiredCapabilities: ['text'],
+      },
+    ],
+    budget: { monthlyTokenLimit: 1000000 },
+  },
+  providers: [
+    {
+      id: 'p1',
+      provider: 'anthropic',
+      displayName: 'Anthropic (Claude)',
+      enabled: true,
+      status: 'connected',
+      apiKeyLast4: 'f12a',
+      apiKeySource: 'database',
+      keyManagedExternally: false,
+      hasKey: true,
+      createdAt: '2026-01-01T00:00:00.000Z',
+      updatedAt: '2026-01-01T00:00:00.000Z',
+      updatedBy: 'u1',
+    },
+  ],
+  defaultModel: null,
+}
+
+const MODELS = [
+  {
+    id: 'anthropic:claude-sonnet-4-latest',
+    provider: 'anthropic',
+    providerModelId: 'claude-sonnet-4-latest',
+    displayName: 'Claude Sonnet (balanced)',
+    status: 'available',
+    capabilities: { text: true, vision: true, toolCalling: true },
+    contextWindow: 200000,
+    inputModalities: ['text', 'image'],
+    outputModalities: ['text'],
+    pricing: { inputPerMillion: 3, outputPerMillion: 15 },
+    lastSyncedAt: '2026-01-01T00:00:00.000Z',
+    source: 'config',
+  },
+]
+
+const USAGE = {
+  totalTokens: 412000,
+  promptTokens: 0,
+  completionTokens: 0,
+  monthlyTokenLimit: 1000000,
+  periodStart: '2026-06-01T00:00:00.000Z',
+  periodEnd: '2026-07-01T00:00:00.000Z',
+  runCount: 5,
+}
+
+// Mutable overrides so individual tests can tweak the loaded shape.
+let settingsResponse: typeof SETTINGS_RESPONSE = SETTINGS_RESPONSE
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/ai/settings' && method === 'GET')
+    return { data: settingsResponse, status: 200 }
+  if (endpoint === '/ai/settings' && method === 'PUT')
+    return { data: settingsResponse, status: 200 }
+  if (endpoint === '/ai/models' && method === 'GET')
+    return { data: { models: MODELS }, status: 200 }
+  if (endpoint === '/ai/usage/summary') return { data: USAGE, status: 200 }
+  if (endpoint === '/ai/providers/p1/test' && method === 'POST') {
+    return {
+      data: {
+        provider: settingsResponse.providers[0],
+        result: { ok: true, status: 'connected', message: 'Connection successful.' },
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/ai/providers/p1/sync-models' && method === 'POST') {
+    return { data: { models: MODELS, fromFallback: false, warning: null }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), loading: vi.fn() },
+}))
+
+const { AISettingsTab } = await import('../../views/settings/AISettingsTab.js')
+
+function deepClone<T>(v: T): T {
+  return JSON.parse(JSON.stringify(v))
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  settingsResponse = deepClone(SETTINGS_RESPONSE)
+})
+
+describe('AISettingsTab', () => {
+  it('loads the default provider, model, and capability badges', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    expect(await screen.findByText('AI Assistant')).toBeTruthy()
+
+    const assistant = screen.getByRole('region', { name: 'AI Assistant' })
+    expect((within(assistant).getByLabelText('Default model') as HTMLSelectElement).value).toBe(
+      'anthropic:claude-sonnet-4-latest',
+    )
+    // Capability badges render as text (not color-only).
+    expect(within(assistant).getByText('Vision')).toBeTruthy()
+    expect(within(assistant).getByText('200,000 token context')).toBeTruthy()
+  })
+
+  it('shows real monthly usage (never a fabricated number)', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    expect(await screen.findByText('412K tokens used')).toBeTruthy()
+    expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('41')
+  })
+
+  it('refreshes the model catalog via the provider sync endpoint', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    const assistant = await screen.findByRole('region', { name: 'AI Assistant' })
+    fireEvent.click(within(assistant).getByRole('button', { name: 'Refresh models' }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/providers/p1/sync-models',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+  })
+
+  it('tests a provider connection', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Assistant')
+    fireEvent.click(screen.getByRole('button', { name: 'Test connection' }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/providers/p1/test',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+  })
+
+  it('toggles a feature and saves it to /ai/settings', async () => {
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Features')
+    fireEvent.click(screen.getByRole('switch', { name: 'Content writing suggestions' }))
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/ai/settings',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/ai/settings' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    const cw = body.features.find((f: { key: string }) => f.key === 'ai.features.contentWriting')
+    expect(cw.enabled).toBe(false)
+  })
+
+  it('is read-only for non-admins', async () => {
+    render(<AISettingsTab role="EDITOR" />)
+    expect(await screen.findByText(/read-only access to AI settings/i)).toBeTruthy()
+    const assistant = screen.getByRole('region', { name: 'AI Assistant' })
+    expect((within(assistant).getByLabelText('Default model') as HTMLSelectElement).disabled).toBe(
+      true,
+    )
+    expect(
+      (screen.getByRole('switch', { name: 'Content writing suggestions' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true)
+  })
+
+  it('renders an env-managed key as read-only', async () => {
+    settingsResponse = deepClone(SETTINGS_RESPONSE)
+    settingsResponse.providers[0]!.keyManagedExternally = true
+    settingsResponse.providers[0]!.apiKeySource = 'environment'
+    render(<AISettingsTab role="ADMIN" />)
+    expect(await screen.findByText('Managed by environment')).toBeTruthy()
+    expect(screen.getByText(/set via an environment variable/i)).toBeTruthy()
+  })
+
+  it('warns when the configured default model is no longer available', async () => {
+    settingsResponse = deepClone(SETTINGS_RESPONSE)
+    settingsResponse.settings.defaultModelId = 'anthropic:ghost-model'
+    render(<AISettingsTab role="ADMIN" />)
+    await screen.findByText('AI Assistant')
+    expect(
+      await screen.findByText(/selected model is no longer offered by the provider/i),
+    ).toBeTruthy()
+  })
+})

package/src/views/Settings.tsx

@@ -24,6 +24,7 @@ import { cmsApi } from '../lib/api.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
 import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
 import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
+import { AISettingsTab } from './settings/AISettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { Users as UsersView } from './Users.js'
@@ -318,7 +319,7 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="ai" className="space-y-4">
-          <AiStatusTab />
+          <AISettingsTab role={session?.user?.role} />
         </Tabs.Content>
 
         <Tabs.Content value="users">
@@ -350,144 +351,6 @@ export function Settings({
   )
 }
 
-// ---------------------------------------------------------------------------
-// AI Status (read-only)
-// ---------------------------------------------------------------------------
-
-interface AiStatus {
-  installed: boolean
-  configured: boolean
-  provider: string | null
-}
-
-const PROVIDER_LABELS: Record<string, string> = {
-  anthropic: 'Anthropic (Claude)',
-  openai: 'OpenAI (GPT)',
-}
-
-/**
- * Honest, read-only view of the AI integration. AI is configured server-side
- * via the `@actuate-media/plugin-ai` plugin reading environment variables —
- * there is intentionally no API-key field here, because the dashboard never
- * stores provider keys. This panel just reports current status.
- */
-function AiStatusTab() {
-  const { data, loading, error, refetch } = useApiData<AiStatus>('/ai/status')
-
-  if (loading) {
-    return (
-      <div className="flex h-40 items-center justify-center">
-        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-        <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-        <span className="flex-1 text-sm text-red-800">{error}</span>
-        <button
-          onClick={refetch}
-          className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-        >
-          Retry
-        </button>
-      </div>
-    )
-  }
-
-  const installed = data?.installed ?? false
-  const configured = data?.configured ?? false
-  const providerLabel = data?.provider ? (PROVIDER_LABELS[data.provider] ?? data.provider) : null
-
-  const status: { tone: 'ok' | 'warn' | 'off'; title: string; detail: string } = !installed
-    ? {
-        tone: 'off',
-        title: 'AI features are not installed',
-        detail:
-          'Add the @actuate-media/plugin-ai plugin to your CMS config to enable AI-powered content features.',
-      }
-    : configured
-      ? {
-          tone: 'ok',
-          title: providerLabel ? `AI is active — ${providerLabel}` : 'AI is active',
-          detail:
-            'A provider is configured and ready. AI-powered features in the editor and media library will use it.',
-        }
-      : {
-          tone: 'warn',
-          title: 'AI plugin installed, but no provider is configured',
-          detail:
-            'Set a provider and API key where you register the plugin, e.g. aiPlugin({ provider: "anthropic", apiKey: process.env.ANTHROPIC_API_KEY }).',
-        }
-
-  const toneStyles: Record<typeof status.tone, string> = {
-    ok: 'border-green-200 bg-green-50',
-    warn: 'border-amber-200 bg-amber-50',
-    off: 'border-gray-200 bg-gray-50',
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className={`flex items-start gap-3 rounded-lg border p-4 ${toneStyles[status.tone]}`}>
-        {status.tone === 'ok' ? (
-          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-green-600" />
-        ) : status.tone === 'warn' ? (
-          <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-600" />
-        ) : (
-          <Bot className="mt-0.5 h-5 w-5 shrink-0 text-gray-500" />
-        )}
-        <div className="flex-1">
-          <h3 className="text-sm font-semibold text-gray-900">{status.title}</h3>
-          <p className="mt-0.5 text-xs text-gray-600">{status.detail}</p>
-        </div>
-      </div>
-
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <h3 className="mb-1 text-sm font-semibold text-gray-900">How AI is configured</h3>
-        <p className="mb-3 text-xs text-gray-500">
-          AI is set up in code, not from this dashboard. Provider credentials live in environment
-          variables and are never entered or stored here.
-        </p>
-        <ul className="space-y-1.5 text-xs text-gray-600">
-          <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
-              1
-            </span>
-            <span>
-              Install the AI plugin:{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">@actuate-media/plugin-ai</code>.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
-              2
-            </span>
-            <span>
-              Set <code className="rounded bg-gray-100 px-1 font-mono">ANTHROPIC_API_KEY</code> or{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">OPENAI_API_KEY</code> in your
-              environment.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
-              3
-            </span>
-            <span>
-              Register it in your CMS config:{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">
-                aiPlugin(&#123; provider, apiKey &#125;)
-              </code>
-              .
-            </span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // Updates Panel
 // ---------------------------------------------------------------------------