@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/Settings.tsx

@@ -1,122 +1,158 @@
-'use client';
+'use client'
 
-import * as Tabs from '@radix-ui/react-tabs';
-import { Bot, Eye, EyeOff, Image, FileCode2, BookOpen, Sparkles, MessageSquare, Languages, Loader2, AlertTriangle, Download, CheckCircle2, ArrowUpCircle, ExternalLink, RefreshCw, GitPullRequest, Layers } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import { toast } from 'sonner';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
-import { useTheme } from '../components/ThemeProvider.js';
-import { RelationshipField } from '../fields/RelationshipField.js';
+import * as Tabs from '@radix-ui/react-tabs'
+import {
+  Bot,
+  Eye,
+  EyeOff,
+  Image,
+  FileCode2,
+  BookOpen,
+  Sparkles,
+  MessageSquare,
+  Languages,
+  Loader2,
+  AlertTriangle,
+  Download,
+  CheckCircle2,
+  ArrowUpCircle,
+  ExternalLink,
+  RefreshCw,
+  GitPullRequest,
+  Layers,
+} from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { toast } from 'sonner'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
+import { useTheme } from '../components/ThemeProvider.js'
+import { RelationshipField } from '../fields/RelationshipField.js'
 
 export interface SettingsProps {
-  onNavigate?: (path: string) => void;
-  config?: any;
+  onNavigate?: (path: string) => void
+  config?: any
 }
 
 export function Settings({ config, ..._props }: SettingsProps = {}) {
-  const { data, loading, error, refetch } = useApiData<any>('/globals/settings');
-
-  const [siteTitle, setSiteTitle] = useState('My CMS');
-  const [tagline, setTagline] = useState('A lightweight content management system');
-  const [siteUrl, setSiteUrl] = useState('https://example.com');
-  const [language, setLanguage] = useState('en');
-  const [timezone, setTimezone] = useState('UTC');
-  const [defaultNoIndex, setDefaultNoIndex] = useState(false);
-  const [defaultNoFollow, setDefaultNoFollow] = useState(false);
-  const [noIndexNonProduction, setNoIndexNonProduction] = useState(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
-  const [sessionTimeout, setSessionTimeout] = useState(false);
-  const [ipWhitelist, setIpWhitelist] = useState(false);
-  const [activeTab, setActiveTab] = useState('general');
-  const [saving, setSaving] = useState(false);
+  const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
+
+  const [siteTitle, setSiteTitle] = useState('My CMS')
+  const [tagline, setTagline] = useState('A lightweight content management system')
+  const [siteUrl, setSiteUrl] = useState('https://example.com')
+  const [language, setLanguage] = useState('en')
+  const [timezone, setTimezone] = useState('UTC')
+  const [defaultNoIndex, setDefaultNoIndex] = useState(false)
+  const [defaultNoFollow, setDefaultNoFollow] = useState(false)
+  const [noIndexNonProduction, setNoIndexNonProduction] = useState(false)
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
+  const [sessionTimeout, setSessionTimeout] = useState(false)
+  const [ipWhitelist, setIpWhitelist] = useState(false)
+  const [activeTab, setActiveTab] = useState('general')
+  const [saving, setSaving] = useState(false)
 
   // Layout defaults
-  const [defaultLayout, setDefaultLayout] = useState<Record<string, string>>({});
-  const layoutConfig = config?.layout;
-  const layoutRegions: Array<{ name: string; collection: string; label: string }> = layoutConfig?.regions
-    ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
-        name,
-        collection: region.collection,
-        label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
-      }))
-    : [];
-  const hasLayoutRegions = layoutRegions.length > 0;
+  const [defaultLayout, setDefaultLayout] = useState<Record<string, string>>({})
+  const layoutConfig = config?.layout
+  const layoutRegions: Array<{ name: string; collection: string; label: string }> =
+    layoutConfig?.regions
+      ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
+          name,
+          collection: region.collection,
+          label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+        }))
+      : []
+  const hasLayoutRegions = layoutRegions.length > 0
 
   // 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);
+  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) {
-      setSiteTitle(data.siteTitle ?? 'My CMS');
-      setTagline(data.tagline ?? '');
-      setSiteUrl(data.siteUrl ?? '');
-      setLanguage(data.language ?? 'en');
-      setTimezone(data.timezone ?? 'UTC');
-      setDefaultNoIndex(data.defaultNoIndex ?? false);
-      setDefaultNoFollow(data.defaultNoFollow ?? false);
-      setNoIndexNonProduction(data.noIndexNonProduction ?? false);
-      setTwoFactorEnabled(data.twoFactorEnabled ?? false);
-      setSessionTimeout(data.sessionTimeout ?? false);
-      setIpWhitelist(data.ipWhitelist ?? false);
-      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);
+      setSiteTitle(data.siteTitle ?? 'My CMS')
+      setTagline(data.tagline ?? '')
+      setSiteUrl(data.siteUrl ?? '')
+      setLanguage(data.language ?? 'en')
+      setTimezone(data.timezone ?? 'UTC')
+      setDefaultNoIndex(data.defaultNoIndex ?? false)
+      setDefaultNoFollow(data.defaultNoFollow ?? false)
+      setNoIndexNonProduction(data.noIndexNonProduction ?? false)
+      setTwoFactorEnabled(data.twoFactorEnabled ?? false)
+      setSessionTimeout(data.sessionTimeout ?? false)
+      setIpWhitelist(data.ipWhitelist ?? false)
+      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);
+        setDefaultLayout(data.defaultLayout)
       }
     }
-  }, [data]);
+  }, [data])
 
   const handleSave = async () => {
-    setSaving(true);
-    const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {};
+    setSaving(true)
+    const layoutPayload = Object.keys(defaultLayout).length > 0 ? { defaultLayout } : {}
     const res = await cmsApi('/globals/settings', {
       method: 'PUT',
       body: JSON.stringify({
-        siteTitle, tagline, siteUrl, language, timezone,
-        defaultNoIndex, defaultNoFollow, noIndexNonProduction,
-        twoFactorEnabled, sessionTimeout, ipWhitelist,
-        aiProvider, aiAltTags, aiMediaCategorize, aiMetaDescriptions,
-        aiReadability, aiSchema, aiBrandVoice, aiWritingAssistant,
-        aiContentScoring, aiTranslation,
+        siteTitle,
+        tagline,
+        siteUrl,
+        language,
+        timezone,
+        defaultNoIndex,
+        defaultNoFollow,
+        noIndexNonProduction,
+        twoFactorEnabled,
+        sessionTimeout,
+        ipWhitelist,
+        aiProvider,
+        aiAltTags,
+        aiMediaCategorize,
+        aiMetaDescriptions,
+        aiReadability,
+        aiSchema,
+        aiBrandVoice,
+        aiWritingAssistant,
+        aiContentScoring,
+        aiTranslation,
         ...layoutPayload,
       }),
-    });
-    setSaving(false);
+    })
+    setSaving(false)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Settings saved successfully!');
+      toast.success('Settings saved successfully!')
     }
-  };
+  }
 
-  const tabTriggerClass = "px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600";
+  const tabTriggerClass =
+    'px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:text-blue-600'
 
   if (loading) {
     return (
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -125,7 +161,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -136,8 +177,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
 
       <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
         <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
-          <Tabs.Trigger value="general" className={tabTriggerClass}>General</Tabs.Trigger>
-          <Tabs.Trigger value="appearance" className={tabTriggerClass}>Appearance</Tabs.Trigger>
+          <Tabs.Trigger value="general" className={tabTriggerClass}>
+            General
+          </Tabs.Trigger>
+          <Tabs.Trigger value="appearance" className={tabTriggerClass}>
+            Appearance
+          </Tabs.Trigger>
           {hasLayoutRegions && (
             <Tabs.Trigger value="layout" className={tabTriggerClass}>
               <span className="flex items-center gap-1.5">
@@ -146,14 +191,18 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               </span>
             </Tabs.Trigger>
           )}
-          <Tabs.Trigger value="security" className={tabTriggerClass}>Security</Tabs.Trigger>
+          <Tabs.Trigger value="security" className={tabTriggerClass}>
+            Security
+          </Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Bot className="w-4 h-4" />
               AI
             </span>
           </Tabs.Trigger>
-          <Tabs.Trigger value="integrations" className={tabTriggerClass}>Integrations</Tabs.Trigger>
+          <Tabs.Trigger value="integrations" className={tabTriggerClass}>
+            Integrations
+          </Tabs.Trigger>
           <Tabs.Trigger value="updates" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Download className="w-4 h-4" />
@@ -168,15 +217,30 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
             <div className="space-y-4">
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">Site Title</label>
-                <input type="text" value={siteTitle} onChange={(e) => setSiteTitle(e.target.value)} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <input
+                  type="text"
+                  value={siteTitle}
+                  onChange={(e) => setSiteTitle(e.target.value)}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
               </div>
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">Tagline</label>
-                <input type="text" value={tagline} onChange={(e) => setTagline(e.target.value)} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <input
+                  type="text"
+                  value={tagline}
+                  onChange={(e) => setTagline(e.target.value)}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
               </div>
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">Site URL</label>
-                <input type="url" value={siteUrl} onChange={(e) => setSiteUrl(e.target.value)} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                <input
+                  type="url"
+                  value={siteUrl}
+                  onChange={(e) => setSiteUrl(e.target.value)}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
               </div>
             </div>
           </div>
@@ -185,7 +249,11 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
             <div className="space-y-4">
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">Language</label>
-                <select value={language} onChange={(e) => setLanguage(e.target.value)} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <select
+                  value={language}
+                  onChange={(e) => setLanguage(e.target.value)}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
                   <option value="en">English</option>
                   <option value="es">Spanish</option>
                   <option value="fr">French</option>
@@ -194,7 +262,11 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               </div>
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">Timezone</label>
-                <select value={timezone} onChange={(e) => setTimezone(e.target.value)} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <select
+                  value={timezone}
+                  onChange={(e) => setTimezone(e.target.value)}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
                   <option value="UTC">UTC</option>
                   <option value="America/New_York">Eastern Time</option>
                   <option value="America/Chicago">Central Time</option>
@@ -207,7 +279,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           <div className="rounded-lg border border-border bg-card p-4">
             <h3 className="mb-1 text-sm font-medium text-foreground">SEO & Robots Defaults</h3>
             <p className="mb-4 text-xs text-muted-foreground">
-              Set the site-wide default for search engine indexing. Individual pages can inherit or override these rules in their SEO panel.
+              Set the site-wide default for search engine indexing. Individual pages can inherit or
+              override these rules in their SEO panel.
             </p>
             <div className="space-y-4">
               <ToggleSetting
@@ -241,8 +314,14 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                 <ThemeSelect />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Primary Color</label>
-                <input type="color" defaultValue="#3b82f6" className="h-10 w-full rounded-lg border border-gray-300 px-3 py-2" />
+                <label className="mb-1 block text-sm font-medium text-gray-700">
+                  Primary Color
+                </label>
+                <input
+                  type="color"
+                  defaultValue="#3b82f6"
+                  className="h-10 w-full rounded-lg border border-gray-300 px-3 py-2"
+                />
               </div>
             </div>
           </div>
@@ -253,7 +332,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
             <div className="rounded-lg border border-gray-200 bg-white p-4">
               <h3 className="mb-1 text-sm font-semibold text-gray-900">Default Layout Variants</h3>
               <p className="mb-4 text-xs text-gray-500">
-                Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages.
+                Select the default header, footer, and other layout variants used site-wide. Pages
+                can override these individually or inherit from parent pages.
               </p>
               <div className="space-y-4">
                 {layoutRegions.map((region) => (
@@ -263,14 +343,14 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                     value={defaultLayout[region.name] ?? ''}
                     onChange={(val) => {
                       setDefaultLayout((prev) => {
-                        const next = { ...prev };
+                        const next = { ...prev }
                         if (val && typeof val === 'string') {
-                          next[region.name] = val;
+                          next[region.name] = val
                         } else {
-                          delete next[region.name];
+                          delete next[region.name]
                         }
-                        return next;
-                      });
+                        return next
+                      })
                     }}
                     relationTo={region.collection}
                     helpText={`The ${region.label.toLowerCase()} variant used when no page in the ancestor chain specifies one`}
@@ -279,19 +359,40 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               </div>
             </div>
             <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-              <h3 className="text-sm font-semibold text-gray-700 mb-2">How Layout Inheritance Works</h3>
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                How Layout Inheritance Works
+              </h3>
               <ul className="space-y-1.5 text-xs text-gray-600">
                 <li className="flex items-start gap-2">
-                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">1</span>
-                  <span>Each page can assign specific layout variants (header, footer, etc.) from the document editor.</span>
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+                    1
+                  </span>
+                  <span>
+                    Each page can assign specific layout variants (header, footer, etc.) from the
+                    document editor.
+                  </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">2</span>
-                  <span>Child pages automatically inherit their parent&apos;s layout. For example, <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads/thank-you</code> inherits from <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads</code>.</span>
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+                    2
+                  </span>
+                  <span>
+                    Child pages automatically inherit their parent&apos;s layout. For example,{' '}
+                    <code className="font-mono bg-gray-200 px-1 rounded">
+                      /hampton-roads/thank-you
+                    </code>{' '}
+                    inherits from{' '}
+                    <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads</code>.
+                  </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">3</span>
-                  <span>If no page in the ancestor chain sets a variant, the defaults configured above are used.</span>
+                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+                    3
+                  </span>
+                  <span>
+                    If no page in the ancestor chain sets a variant, the defaults configured above
+                    are used.
+                  </span>
                 </li>
               </ul>
             </div>
@@ -302,9 +403,24 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           <div className="rounded-lg border border-gray-200 bg-white p-4">
             <h3 className="mb-4 text-sm font-semibold text-gray-900">Security Settings</h3>
             <div className="space-y-4">
-              <ToggleSetting label="Two-Factor Authentication" description="Require 2FA for all admin users" checked={twoFactorEnabled} onChange={setTwoFactorEnabled} />
-              <ToggleSetting label="Session Timeout" description="Automatically log out inactive users after 30 minutes" checked={sessionTimeout} onChange={setSessionTimeout} />
-              <ToggleSetting label="IP Whitelist" description="Only allow access from approved IP addresses" checked={ipWhitelist} onChange={setIpWhitelist} />
+              <ToggleSetting
+                label="Two-Factor Authentication"
+                description="Require 2FA for all admin users"
+                checked={twoFactorEnabled}
+                onChange={setTwoFactorEnabled}
+              />
+              <ToggleSetting
+                label="Session Timeout"
+                description="Automatically log out inactive users after 30 minutes"
+                checked={sessionTimeout}
+                onChange={setSessionTimeout}
+              />
+              <ToggleSetting
+                label="IP Whitelist"
+                description="Only allow access from approved IP addresses"
+                checked={ipWhitelist}
+                onChange={setIpWhitelist}
+              />
             </div>
           </div>
         </Tabs.Content>
@@ -312,7 +428,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         <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>
+            <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>
@@ -326,9 +444,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                   <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.'}
+                  {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>
@@ -339,7 +460,13 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                       type={showApiKey ? 'text' : 'password'}
                       value={aiApiKey}
                       onChange={(e) => setAiApiKey(e.target.value)}
-                      placeholder={aiProvider === 'anthropic' ? 'sk-ant-...' : aiProvider === 'openai' ? 'sk-...' : 'AIza...'}
+                      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:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                     <button
@@ -353,15 +480,17 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                   <button
                     type="button"
                     onClick={() => {
-                      if (aiApiKey) toast.success('API key verified successfully');
-                      else toast.error('Please enter an API key first');
+                      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>
+                <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>
@@ -393,7 +522,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               <FileCode2 className="w-4 h-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>
+            <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"
@@ -421,7 +552,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               <MessageSquare className="w-4 h-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>
+            <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"
@@ -443,7 +576,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               <Sparkles className="w-4 h-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>
+            <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"
@@ -479,7 +614,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                 <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>
+            <p className="mt-2 text-xs text-indigo-600">
+              Add an API key above to start using AI features
+            </p>
           </div>
         </Tabs.Content>
 
@@ -490,8 +627,18 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               <div>
                 <label className="mb-1 block text-sm font-medium text-gray-700">API Key</label>
                 <div className="flex gap-2">
-                  <input type="text" value="•••••••••••••••••••••••••" readOnly className="flex-1 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm" />
-                  <button type="button" className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50">Regenerate</button>
+                  <input
+                    type="text"
+                    value="•••••••••••••••••••••••••"
+                    readOnly
+                    className="flex-1 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm"
+                  />
+                  <button
+                    type="button"
+                    className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
+                  >
+                    Regenerate
+                  </button>
                 </div>
               </div>
             </div>
@@ -514,11 +661,11 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
         </button>
       </div>
     </div>
-  );
+  )
 }
 
 function ThemeSelect() {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme()
   return (
     <select
       value={theme}
@@ -529,7 +676,7 @@ function ThemeSelect() {
       <option value="dark">Dark</option>
       <option value="system">Auto (System)</option>
     </select>
-  );
+  )
 }
 
 function ToggleSetting({
@@ -538,10 +685,10 @@ function ToggleSetting({
   checked,
   onChange,
 }: {
-  label: string;
-  description: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
+  label: string
+  description: string
+  checked: boolean
+  onChange: (v: boolean) => void
 }) {
   return (
     <div className="flex items-center justify-between gap-4">
@@ -564,7 +711,7 @@ function ToggleSetting({
         />
       </button>
     </div>
-  );
+  )
 }
 
 // ---------------------------------------------------------------------------
@@ -572,56 +719,56 @@ function ToggleSetting({
 // ---------------------------------------------------------------------------
 
 interface UpdateInfo {
-  current: string;
-  latest: string;
-  updateAvailable: boolean;
-  severity?: 'patch' | 'minor' | 'major';
-  releaseDate?: string;
-  changelog?: Array<{ version: string; date: string; summary: string }>;
-  updateCommand?: string;
-  hasGithubToken?: boolean;
-  githubRepo?: string;
+  current: string
+  latest: string
+  updateAvailable: boolean
+  severity?: 'patch' | 'minor' | 'major'
+  releaseDate?: string
+  changelog?: Array<{ version: string; date: string; summary: string }>
+  updateCommand?: string
+  hasGithubToken?: boolean
+  githubRepo?: string
 }
 
 function UpdatesPanel() {
-  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
-  const [checking, setChecking] = useState(false);
-  const [checkError, setCheckError] = useState('');
-  const [applying, setApplying] = useState(false);
-  const [prResult, setPrResult] = useState<{ prUrl: string; prNumber: number } | null>(null);
-  const [hasChecked, setHasChecked] = useState(false);
+  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
+  const [checking, setChecking] = useState(false)
+  const [checkError, setCheckError] = useState('')
+  const [applying, setApplying] = useState(false)
+  const [prResult, setPrResult] = useState<{ prUrl: string; prNumber: number } | null>(null)
+  const [hasChecked, setHasChecked] = useState(false)
 
   // GitHub config
-  const [ghToken, setGhToken] = useState('');
-  const [ghRepo, setGhRepo] = useState('');
-  const [showGhToken, setShowGhToken] = useState(false);
-  const [savingConfig, setSavingConfig] = useState(false);
-  const [configSaved, setConfigSaved] = useState(false);
+  const [ghToken, setGhToken] = useState('')
+  const [ghRepo, setGhRepo] = useState('')
+  const [showGhToken, setShowGhToken] = useState(false)
+  const [savingConfig, setSavingConfig] = useState(false)
+  const [configSaved, setConfigSaved] = useState(false)
 
   const checkForUpdates = async () => {
-    setChecking(true);
-    setCheckError('');
-    setPrResult(null);
+    setChecking(true)
+    setCheckError('')
+    setPrResult(null)
 
     try {
-      const res = await cmsApi<UpdateInfo>('/updates/check');
+      const res = await cmsApi<UpdateInfo>('/updates/check')
       if (res.error) {
-        setCheckError(res.error);
+        setCheckError(res.error)
       } else if (res.data) {
-        setUpdateInfo(res.data);
-        if (res.data.githubRepo) setGhRepo(res.data.githubRepo);
+        setUpdateInfo(res.data)
+        if (res.data.githubRepo) setGhRepo(res.data.githubRepo)
       }
     } catch {
-      setCheckError('Unable to check for updates. Please try again.');
+      setCheckError('Unable to check for updates. Please try again.')
     } finally {
-      setChecking(false);
-      setHasChecked(true);
+      setChecking(false)
+      setHasChecked(true)
     }
-  };
+  }
 
   const saveGitHubConfig = async () => {
-    setSavingConfig(true);
-    setConfigSaved(false);
+    setSavingConfig(true)
+    setConfigSaved(false)
     try {
       const res = await cmsApi('/updates/config', {
         method: 'PUT',
@@ -629,56 +776,64 @@ function UpdatesPanel() {
           ...(ghToken ? { githubToken: ghToken } : {}),
           ...(ghRepo ? { githubRepo: ghRepo } : {}),
         }),
-      });
+      })
       if (res.error) {
-        toast.error(res.error);
+        toast.error(res.error)
       } else {
-        toast.success('GitHub configuration saved and encrypted.');
-        setConfigSaved(true);
-        setGhToken('');
+        toast.success('GitHub configuration saved and encrypted.')
+        setConfigSaved(true)
+        setGhToken('')
         if (updateInfo) {
-          setUpdateInfo({ ...updateInfo, hasGithubToken: true, githubRepo: ghRepo });
+          setUpdateInfo({ ...updateInfo, hasGithubToken: true, githubRepo: ghRepo })
         }
       }
     } catch {
-      toast.error('Failed to save configuration.');
+      toast.error('Failed to save configuration.')
     } finally {
-      setSavingConfig(false);
+      setSavingConfig(false)
     }
-  };
+  }
 
   const applyUpdate = async () => {
-    if (!updateInfo?.latest) return;
-    setApplying(true);
+    if (!updateInfo?.latest) return
+    setApplying(true)
 
     try {
       const res = await cmsApi<{ prUrl: string; prNumber: number }>('/updates/apply', {
         method: 'POST',
         body: JSON.stringify({ targetVersion: updateInfo.latest }),
-      });
+      })
 
       if (res.error) {
-        toast.error(res.error);
+        toast.error(res.error)
       } else if (res.data) {
-        setPrResult(res.data);
-        toast.success('Update PR created successfully!');
+        setPrResult(res.data)
+        toast.success('Update PR created successfully!')
       }
     } catch {
-      toast.error('Failed to create update PR. Check your GitHub configuration.');
+      toast.error('Failed to create update PR. Check your GitHub configuration.')
     } finally {
-      setApplying(false);
+      setApplying(false)
     }
-  };
+  }
 
   useEffect(() => {
-    checkForUpdates();
-  }, []);
+    checkForUpdates()
+  }, [])
 
-  const severityColors: Record<string, { bg: string; text: string; border: string; label: string }> = {
+  const severityColors: Record<
+    string,
+    { bg: string; text: string; border: string; label: string }
+  > = {
     patch: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Patch' },
-    minor: { bg: 'bg-yellow-50', text: 'text-yellow-700', border: 'border-yellow-200', label: 'Minor' },
+    minor: {
+      bg: 'bg-yellow-50',
+      text: 'text-yellow-700',
+      border: 'border-yellow-200',
+      label: 'Minor',
+    },
     major: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200', label: 'Major' },
-  };
+  }
 
   return (
     <>
@@ -688,7 +843,8 @@ function UpdatesPanel() {
           <div>
             <h3 className="text-sm font-semibold text-gray-900">Actuate CMS</h3>
             <p className="mt-1 text-sm text-gray-600">
-              Current version: <span className="font-mono font-medium">{updateInfo?.current ?? '...'}</span>
+              Current version:{' '}
+              <span className="font-mono font-medium">{updateInfo?.current ?? '...'}</span>
             </p>
           </div>
           <button
@@ -708,7 +864,12 @@ function UpdatesPanel() {
         <div className="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{checkError}</span>
-          <button onClick={checkForUpdates} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={checkForUpdates}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -719,7 +880,8 @@ function UpdatesPanel() {
           <div>
             <h3 className="text-sm font-semibold text-green-900">You&apos;re up to date!</h3>
             <p className="text-sm text-green-700 mt-0.5">
-              Actuate CMS <span className="font-mono">{updateInfo.current}</span> is the latest version.
+              Actuate CMS <span className="font-mono">{updateInfo.current}</span> is the latest
+              version.
             </p>
           </div>
         </div>
@@ -728,24 +890,33 @@ function UpdatesPanel() {
       {/* Update Available */}
       {updateInfo?.updateAvailable && (
         <>
-          <div className={`rounded-lg border p-4 ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'} ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'}`}>
+          <div
+            className={`rounded-lg border p-4 ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'} ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'}`}
+          >
             <div className="flex items-start gap-3">
-              <ArrowUpCircle className={`w-6 h-6 mt-0.5 shrink-0 ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`} />
+              <ArrowUpCircle
+                className={`w-6 h-6 mt-0.5 shrink-0 ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
+              />
               <div className="flex-1">
                 <div className="flex items-center gap-2">
-                  <h3 className={`text-sm font-semibold ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}>
+                  <h3
+                    className={`text-sm font-semibold ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
+                  >
                     Update Available
                   </h3>
-                  <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'} ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'} border ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'}`}>
+                  <span
+                    className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'} ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'} border ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'}`}
+                  >
                     {severityColors[updateInfo.severity ?? 'patch']?.label ?? 'Update'}
                   </span>
                 </div>
                 <p className="text-sm mt-1" style={{ color: 'inherit' }}>
-                  <span className="font-mono">{updateInfo.current}</span>
-                  {' '}&rarr;{' '}
+                  <span className="font-mono">{updateInfo.current}</span> &rarr;{' '}
                   <span className="font-mono font-semibold">{updateInfo.latest}</span>
                   {updateInfo.releaseDate && (
-                    <span className="text-xs ml-2 opacity-70">Released {updateInfo.releaseDate}</span>
+                    <span className="text-xs ml-2 opacity-70">
+                      Released {updateInfo.releaseDate}
+                    </span>
                   )}
                 </p>
               </div>
@@ -790,7 +961,9 @@ function UpdatesPanel() {
               <div className="space-y-2 max-h-64 overflow-y-auto">
                 {updateInfo.changelog.map((entry) => (
                   <div key={entry.version} className="flex items-baseline gap-3 text-sm">
-                    <span className="font-mono text-xs text-gray-500 shrink-0 w-14">{entry.version}</span>
+                    <span className="font-mono text-xs text-gray-500 shrink-0 w-14">
+                      {entry.version}
+                    </span>
                     <span className="text-xs text-gray-400 shrink-0 w-20">{entry.date}</span>
                     <span className="text-gray-700">{entry.summary}</span>
                   </div>
@@ -809,8 +982,12 @@ function UpdatesPanel() {
             <div>
               <h3 className="text-sm font-semibold text-green-900">Pull Request Created</h3>
               <p className="text-sm text-green-700 mt-1">
-                PR #{prResult.prNumber} has been created on your repository.
-                Review and merge it to apply the update, then run <code className="text-xs font-mono bg-green-100 px-1 rounded">npx prisma migrate deploy</code>.
+                PR #{prResult.prNumber} has been created on your repository. Review and merge it to
+                apply the update, then run{' '}
+                <code className="text-xs font-mono bg-green-100 px-1 rounded">
+                  npx prisma migrate deploy
+                </code>
+                .
               </p>
               <a
                 href={prResult.prUrl}
@@ -830,7 +1007,8 @@ function UpdatesPanel() {
       <div className="rounded-lg border border-gray-200 bg-white p-4">
         <h3 className="text-sm font-semibold text-gray-900 mb-1">GitHub Integration</h3>
         <p className="text-xs text-gray-500 mb-4">
-          Connect your repository to enable one-click update PRs. Credentials are encrypted at rest (AES-256-GCM).
+          Connect your repository to enable one-click update PRs. Credentials are encrypted at rest
+          (AES-256-GCM).
         </p>
 
         <div className="space-y-4">
@@ -843,7 +1021,12 @@ function UpdatesPanel() {
               placeholder="owner/repo"
               className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
-            <p className="mt-1 text-xs text-gray-500">e.g. <code className="font-mono bg-gray-100 px-1 rounded">actuate-media/my-client-site</code></p>
+            <p className="mt-1 text-xs text-gray-500">
+              e.g.{' '}
+              <code className="font-mono bg-gray-100 px-1 rounded">
+                actuate-media/my-client-site
+              </code>
+            </p>
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-gray-700">
@@ -858,7 +1041,9 @@ function UpdatesPanel() {
                   type={showGhToken ? 'text' : 'password'}
                   value={ghToken}
                   onChange={(e) => setGhToken(e.target.value)}
-                  placeholder={updateInfo?.hasGithubToken ? '••••••••••••••••' : 'ghp_... or github_pat_...'}
+                  placeholder={
+                    updateInfo?.hasGithubToken ? '••••••••••••••••' : 'ghp_... or github_pat_...'
+                  }
                   className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
                 <button
@@ -871,8 +1056,14 @@ function UpdatesPanel() {
               </div>
             </div>
             <p className="mt-1 text-xs text-gray-500">
-              Needs <code className="font-mono bg-gray-100 px-1 rounded">repo</code> scope. Create at{' '}
-              <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+              Needs <code className="font-mono bg-gray-100 px-1 rounded">repo</code> scope. Create
+              at{' '}
+              <a
+                href="https://github.com/settings/tokens"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
                 github.com/settings/tokens
               </a>
             </p>
@@ -901,23 +1092,42 @@ function UpdatesPanel() {
         <h3 className="text-sm font-semibold text-gray-700 mb-2">How Updates Work</h3>
         <ul className="space-y-1.5 text-xs text-gray-600">
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">1</span>
-            <span>Click &quot;Check for Updates&quot; to see if a new version is available on npm.</span>
+            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+              1
+            </span>
+            <span>
+              Click &quot;Check for Updates&quot; to see if a new version is available on npm.
+            </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">2</span>
-            <span>Add your GitHub token and repository above. They&apos;re encrypted at rest — never stored in plaintext.</span>
+            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+              2
+            </span>
+            <span>
+              Add your GitHub token and repository above. They&apos;re encrypted at rest — never
+              stored in plaintext.
+            </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">3</span>
-            <span>Click &quot;Create Update PR&quot; to open a pull request that bumps your CMS packages automatically.</span>
+            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+              3
+            </span>
+            <span>
+              Click &quot;Create Update PR&quot; to open a pull request that bumps your CMS packages
+              automatically.
+            </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">4</span>
-            <span>Review and merge the PR, then deploy. Database migrations run automatically via <code className="font-mono bg-gray-200 px-1 rounded">prisma migrate deploy</code>.</span>
+            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+              4
+            </span>
+            <span>
+              Review and merge the PR, then deploy. Database migrations run automatically via{' '}
+              <code className="font-mono bg-gray-200 px-1 rounded">prisma migrate deploy</code>.
+            </span>
           </li>
         </ul>
       </div>
     </>
-  );
+  )
 }