@actuate-media/cms-admin 0.29.0 → 0.31.0

package/src/views/Settings.tsx

@@ -5,11 +5,6 @@ import {
   Bot,
   Eye,
   EyeOff,
-  Image,
-  FileCode2,
-  BookOpen,
-  Sparkles,
-  MessageSquare,
   Loader2,
   AlertTriangle,
   Download,
@@ -44,8 +39,14 @@ export interface SettingsProps {
   initialTab?: string
 }
 
-/** Tabs that drive their own persistence (no global "Save Changes" footer). */
-const SELF_MANAGED_TABS = new Set(['general', 'appearance', 'security', 'users', 'api-keys'])
+/**
+ * Tabs that persist through the shared footer's `handleSave` (which writes
+ * `defaultLayout` into the settings global). Every other tab owns its own
+ * saving, so the footer must NOT render there — otherwise it shows a
+ * "Settings saved successfully!" toast while persisting nothing relevant.
+ * This is an allowlist on purpose: new tabs default to self-managed.
+ */
+const GLOBAL_SAVE_TABS = new Set(['layout'])
 
 function readSettingsTabFromUrl(): string | null {
   if (typeof window === 'undefined') return null
@@ -120,32 +121,8 @@ export function Settings({
     [normalizeTab, onNavigate],
   )
 
-  // AI settings
-  const [aiProvider, setAiProvider] = useState('anthropic')
-  const [aiApiKey, setAiApiKey] = useState('')
-  const [showApiKey, setShowApiKey] = useState(false)
-  const [aiAltTags, setAiAltTags] = useState(true)
-  const [aiMediaCategorize, setAiMediaCategorize] = useState(false)
-  const [aiMetaDescriptions, setAiMetaDescriptions] = useState(true)
-  const [aiReadability, setAiReadability] = useState(true)
-  const [aiSchema, setAiSchema] = useState(true)
-  const [aiBrandVoice, setAiBrandVoice] = useState(false)
-  const [aiWritingAssistant, setAiWritingAssistant] = useState(true)
-  const [aiContentScoring, setAiContentScoring] = useState(true)
-  const [aiTranslation, setAiTranslation] = useState(false)
-
   useEffect(() => {
     if (data) {
-      setAiProvider(data.aiProvider ?? 'anthropic')
-      setAiAltTags(data.aiAltTags ?? true)
-      setAiMediaCategorize(data.aiMediaCategorize ?? false)
-      setAiMetaDescriptions(data.aiMetaDescriptions ?? true)
-      setAiReadability(data.aiReadability ?? true)
-      setAiSchema(data.aiSchema ?? true)
-      setAiBrandVoice(data.aiBrandVoice ?? false)
-      setAiWritingAssistant(data.aiWritingAssistant ?? true)
-      setAiContentScoring(data.aiContentScoring ?? true)
-      setAiTranslation(data.aiTranslation ?? false)
       if (data.defaultLayout && typeof data.defaultLayout === 'object') {
         setDefaultLayout(data.defaultLayout)
       }
@@ -162,16 +139,6 @@ export function Settings({
       method: 'PUT',
       body: JSON.stringify({
         ...(current.data ?? {}),
-        aiProvider,
-        aiAltTags,
-        aiMediaCategorize,
-        aiMetaDescriptions,
-        aiReadability,
-        aiSchema,
-        aiBrandVoice,
-        aiWritingAssistant,
-        aiContentScoring,
-        aiTranslation,
         ...layoutPayload,
       }),
     })
@@ -351,198 +318,7 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="ai" className="space-y-4">
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-1 text-sm font-semibold text-gray-900">AI Provider & API Key</h3>
-            <p className="mb-4 text-xs text-gray-500">
-              Connect an AI provider to enable intelligent content features
-            </p>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Provider</label>
-                <select
-                  value={aiProvider}
-                  onChange={(e) => setAiProvider(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="anthropic">Anthropic (Claude)</option>
-                  <option value="openai">OpenAI (GPT)</option>
-                  <option value="google">Google (Gemini)</option>
-                </select>
-                <p className="mt-1 text-xs text-gray-500">
-                  {aiProvider === 'anthropic' &&
-                    'Recommended. Best for content analysis, brand voice learning, and nuanced writing.'}
-                  {aiProvider === 'openai' &&
-                    'Strong alternative. Good for general content generation and image understanding.'}
-                  {aiProvider === 'google' &&
-                    'Multimodal. Excellent for image analysis and multilingual content.'}
-                </p>
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">API Key</label>
-                <div className="flex gap-2">
-                  <div className="relative flex-1">
-                    <input
-                      type={showApiKey ? 'text' : 'password'}
-                      value={aiApiKey}
-                      onChange={(e) => setAiApiKey(e.target.value)}
-                      placeholder={
-                        aiProvider === 'anthropic'
-                          ? 'sk-ant-...'
-                          : aiProvider === 'openai'
-                            ? 'sk-...'
-                            : 'AIza...'
-                      }
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setShowApiKey(!showApiKey)}
-                      className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
-                    >
-                      {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                    </button>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      if (aiApiKey) toast.success('API key verified successfully')
-                      else toast.error('Please enter an API key first')
-                    }}
-                    className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
-                  >
-                    Verify
-                  </button>
-                </div>
-                <p className="mt-1 text-xs text-gray-500">
-                  Your key is encrypted at rest (AES-256-GCM) and never exposed to the client
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="mb-1 flex items-center gap-2">
-              <Image className="h-4 w-4 text-blue-600" />
-              <h3 className="text-sm font-semibold text-gray-900">Media Intelligence</h3>
-            </div>
-            <p className="mb-4 text-xs text-gray-500">AI-powered image and media analysis</p>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Auto Alt-Tag Generation"
-                description="Scan uploaded images and automatically generate descriptive alt text for accessibility and SEO"
-                checked={aiAltTags}
-                onChange={setAiAltTags}
-              />
-              <ToggleSetting
-                label="Media Auto-Categorization"
-                description="Automatically tag and categorize uploaded media based on visual content analysis"
-                checked={aiMediaCategorize}
-                onChange={setAiMediaCategorize}
-              />
-            </div>
-          </div>
-
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="mb-1 flex items-center gap-2">
-              <FileCode2 className="h-4 w-4 text-purple-600" />
-              <h3 className="text-sm font-semibold text-gray-900">Content SEO</h3>
-            </div>
-            <p className="mb-4 text-xs text-gray-500">
-              AI-driven SEO optimization for your content
-            </p>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Meta Description Generation"
-                description="Auto-generate optimized meta descriptions by digesting page content"
-                checked={aiMetaDescriptions}
-                onChange={setAiMetaDescriptions}
-              />
-              <ToggleSetting
-                label="Readability Analysis"
-                description="Score content readability (Flesch-Kincaid, Gunning Fog) with improvement suggestions"
-                checked={aiReadability}
-                onChange={setAiReadability}
-              />
-              <ToggleSetting
-                label="Schema.org Enrichment"
-                description="Automatically detect content types and generate appropriate Schema.org JSON-LD markup"
-                checked={aiSchema}
-                onChange={setAiSchema}
-              />
-            </div>
-          </div>
-
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="mb-1 flex items-center gap-2">
-              <MessageSquare className="h-4 w-4 text-green-600" />
-              <h3 className="text-sm font-semibold text-gray-900">Brand Voice & Writing</h3>
-            </div>
-            <p className="mb-4 text-xs text-gray-500">
-              AI that understands and writes in your brand&apos;s voice
-            </p>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Brand Voice Training"
-                description="Analyze existing content to learn your brand's tone, style, and vocabulary"
-                checked={aiBrandVoice}
-                onChange={setAiBrandVoice}
-              />
-              <ToggleSetting
-                label="AI Writing Assistant"
-                description="In-editor AI helper for drafting, rewriting, and expanding content in your brand voice"
-                checked={aiWritingAssistant}
-                onChange={setAiWritingAssistant}
-              />
-            </div>
-          </div>
-
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="mb-1 flex items-center gap-2">
-              <Sparkles className="h-4 w-4 text-yellow-600" />
-              <h3 className="text-sm font-semibold text-gray-900">Content Quality</h3>
-            </div>
-            <p className="mb-4 text-xs text-gray-500">
-              Automated quality scoring and content intelligence
-            </p>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Content Scoring"
-                description="Automatically score content quality based on structure, readability, SEO, and completeness"
-                checked={aiContentScoring}
-                onChange={setAiContentScoring}
-              />
-              <ToggleSetting
-                label="AI-Powered Translation"
-                description="Translate content into target languages while preserving tone and meaning"
-                checked={aiTranslation}
-                onChange={setAiTranslation}
-              />
-            </div>
-          </div>
-
-          <div className="rounded-lg border border-indigo-200 bg-indigo-50 p-4">
-            <div className="mb-1 flex items-center gap-2">
-              <BookOpen className="h-4 w-4 text-indigo-600" />
-              <h3 className="text-sm font-semibold text-indigo-900">AI Usage This Month</h3>
-            </div>
-            <div className="mt-3 grid grid-cols-3 gap-4">
-              <div>
-                <div className="text-lg font-semibold text-indigo-900">0</div>
-                <div className="text-xs text-indigo-700">API Calls</div>
-              </div>
-              <div>
-                <div className="text-lg font-semibold text-indigo-900">0</div>
-                <div className="text-xs text-indigo-700">Tokens Used</div>
-              </div>
-              <div>
-                <div className="text-lg font-semibold text-indigo-900">$0.00</div>
-                <div className="text-xs text-indigo-700">Estimated Cost</div>
-              </div>
-            </div>
-            <p className="mt-2 text-xs text-indigo-600">
-              Add an API key above to start using AI features
-            </p>
-          </div>
+          <AiStatusTab />
         </Tabs.Content>
 
         <Tabs.Content value="users">
@@ -558,7 +334,7 @@ export function Settings({
         </Tabs.Content>
       </Tabs.Root>
 
-      {!SELF_MANAGED_TABS.has(activeTab) && (
+      {GLOBAL_SAVE_TABS.has(activeTab) && (
         <div className="mt-6 flex justify-end">
           <button
             type="button"
@@ -574,37 +350,140 @@ export function Settings({
   )
 }
 
-function ToggleSetting({
-  label,
-  description,
-  checked,
-  onChange,
-}: {
-  label: string
-  description: string
-  checked: boolean
-  onChange: (v: boolean) => void
-}) {
+// ---------------------------------------------------------------------------
+// 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="flex items-center justify-between gap-4">
-      <div className="flex-1">
-        <label className="text-foreground text-sm font-medium">{label}</label>
-        <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
+    <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>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        aria-label={label}
-        onClick={() => onChange(!checked)}
-        className={`focus:ring-primary relative h-6 w-11 shrink-0 rounded-full transition-colors focus:ring-2 focus:outline-none ${checked ? 'bg-primary' : 'bg-muted'}`}
-      >
-        <span
-          className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${
-            checked ? 'translate-x-[22px]' : 'translate-x-0.5'
-          }`}
-        />
-      </button>
     </div>
   )
 }