@actuate-media/cms-admin 0.28.0 → 0.30.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>
   )
 }

package/src/views/Users.tsx

@@ -31,7 +31,9 @@ export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
   const { data, loading, error, refetch } = useApiData<any[]>('/users')
   const [showInviteDialog, setShowInviteDialog] = useState(false)
   const [inviteEmail, setInviteEmail] = useState('')
-  const [inviteRole, setInviteRole] = useState('editor')
+  const [inviteName, setInviteName] = useState('')
+  const [inviteRole, setInviteRole] = useState('author')
+  const [inviting, setInviting] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const [filterRole, setFilterRole] = useState('all')
   const [sortConfig, setSortConfig] = useState<SortConfig<UserSortKey> | null>(null)
@@ -61,12 +63,60 @@ export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
     return results
   }, [users, searchQuery, filterRole, sortConfig])
 
-  const handleInvite = (e: FormEvent) => {
-    e.preventDefault()
-    toast.success(`Invitation sent to ${inviteEmail}`)
-    setShowInviteDialog(false)
+  const resetInviteForm = () => {
     setInviteEmail('')
-    setInviteRole('editor')
+    setInviteName('')
+    setInviteRole('author')
+  }
+
+  const handleInvite = async (e: FormEvent) => {
+    e.preventDefault()
+    if (inviting) return
+    setInviting(true)
+    try {
+      const res = await cmsApi<{
+        success: boolean
+        emailed?: boolean
+        inviteUrl?: string
+        user?: { email: string }
+      }>('/users/invite', {
+        method: 'POST',
+        body: JSON.stringify({
+          email: inviteEmail.trim(),
+          name: inviteName.trim() || undefined,
+          role: inviteRole,
+        }),
+      })
+
+      if (res.error) {
+        toast.error(res.error)
+        return
+      }
+
+      if (res.data?.emailed) {
+        toast.success(`Invitation sent to ${inviteEmail.trim()}`)
+      } else if (res.data?.inviteUrl) {
+        // No email provider configured (or the send failed): surface the link
+        // so the admin can share it manually rather than silently succeeding.
+        await navigator.clipboard?.writeText(res.data.inviteUrl).catch(() => {})
+        toast.success(
+          'Invite created. Link copied — email isn’t configured, so share it manually.',
+          {
+            duration: 8000,
+          },
+        )
+      } else {
+        toast.success('Invitation created.')
+      }
+
+      setShowInviteDialog(false)
+      resetInviteForm()
+      refetch()
+    } catch {
+      toast.error('Could not create the invitation. Please try again.')
+    } finally {
+      setInviting(false)
+    }
   }
 
   const handleDelete = async (userId: number) => {
@@ -268,15 +318,23 @@ export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
           <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
-            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
+            <Dialog.Title className="mb-1 text-lg font-semibold text-gray-900">
               Invite User
             </Dialog.Title>
+            <Dialog.Description className="mb-4 text-sm text-gray-500">
+              They’ll get a link to set a password and sign in. If email isn’t configured, you’ll
+              get a link to share.
+            </Dialog.Description>
             <form onSubmit={handleInvite} className="space-y-4">
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">
+                <label
+                  htmlFor="invite-email"
+                  className="mb-1 block text-sm font-medium text-gray-700"
+                >
                   Email Address
                 </label>
                 <input
+                  id="invite-email"
                   type="email"
                   value={inviteEmail}
                   onChange={(e) => setInviteEmail(e.target.value)}
@@ -286,13 +344,35 @@ export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
                 />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Role</label>
+                <label
+                  htmlFor="invite-name"
+                  className="mb-1 block text-sm font-medium text-gray-700"
+                >
+                  Name <span className="font-normal text-gray-400">(optional)</span>
+                </label>
+                <input
+                  id="invite-name"
+                  type="text"
+                  value={inviteName}
+                  onChange={(e) => setInviteName(e.target.value)}
+                  placeholder="Jane Doe"
+                  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"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="invite-role"
+                  className="mb-1 block text-sm font-medium text-gray-700"
+                >
+                  Role
+                </label>
                 <select
+                  id="invite-role"
                   value={inviteRole}
                   onChange={(e) => setInviteRole(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="viewer">Viewer</option>
+                  <option value="author">Author</option>
                   <option value="editor">Editor</option>
                   <option value="admin">Admin</option>
                 </select>
@@ -308,9 +388,11 @@ export function Users({ onNavigate, embedded = false }: UsersProps = {}) {
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+                  disabled={inviting || !inviteEmail.trim()}
+                  className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
                 >
-                  Send Invite
+                  {inviting && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
+                  {inviting ? 'Sending…' : 'Send Invite'}
                 </button>
               </div>
             </form>