@actuate-media/cms-admin 0.74.0 → 0.75.0

package/src/views/post-editor/PostFieldsModal.tsx

@@ -9,16 +9,9 @@ import { Button } from '../../components/ui/Button.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { TagInput } from '../../components/TagInput.js'
-import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import { coauthorText } from '../../lib/coauthor-client.js'
-import { generateSeoField } from '../../lib/seo-service.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
-const SEO_TITLE_MIN = 30
-const SEO_TITLE_MAX = 60
-const SEO_DESC_MIN = 120
-const SEO_DESC_MAX = 160
-
 /**
  * The slice of a collection's field config the modal reads to pick controls:
  * a `select` category renders a dropdown (structured vocabulary), an `array`
@@ -47,8 +40,6 @@ const INPUT =
 
 const slugify = normalizeSlug
 
-type AiTarget = 'excerpt' | 'seoTitle' | 'seoDescription'
-
 type FormSnapshot = {
   title: string
   slug: string
@@ -56,8 +47,6 @@ type FormSnapshot = {
   featuredImage: string
   category: string
   tags: string
-  seoTitle: string
-  seoDescription: string
 }
 
 function snapshotFromPost(post: EditorPost): FormSnapshot {
@@ -68,8 +57,6 @@ function snapshotFromPost(post: EditorPost): FormSnapshot {
     featuredImage: post.featuredImage,
     category: post.category,
     tags: [...post.tags].sort().join('\0'),
-    seoTitle: post.seoTitle,
-    seoDescription: post.seoDescription,
   }
 }
 
@@ -80,8 +67,6 @@ function snapshotFromFields(input: {
   featuredImage: string
   category: string
   tags: string[]
-  seoTitle: string
-  seoDescription: string
 }): FormSnapshot {
   return {
     ...input,
@@ -132,7 +117,7 @@ function AiFieldButton({
   )
 }
 
-/** Edits post metadata: title, slug, excerpt, featured image, category, tags, SEO. */
+/** Edits post metadata: title, slug, excerpt, featured image, category, and tags. SEO lives in the SEO tab. */
 export function PostFieldsModal({
   open,
   post,
@@ -147,11 +132,9 @@ export function PostFieldsModal({
   const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
   const [category, setCategory] = useState(post.category)
   const [tags, setTags] = useState<string[]>(post.tags)
-  const [seoTitle, setSeoTitle] = useState(post.seoTitle)
-  const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
   const [mediaOpen, setMediaOpen] = useState(false)
-  const [aiBusy, setAiBusy] = useState<AiTarget | null>(null)
+  const [aiBusy, setAiBusy] = useState(false)
   const [confirmDiscard, setConfirmDiscard] = useState(false)
   const baselineRef = useRef<FormSnapshot | null>(null)
   // Land the user in the Title field (name-it-first flow for new posts).
@@ -177,10 +160,8 @@ export function PostFieldsModal({
     setFeaturedImage(post.featuredImage)
     setCategory(post.category)
     setTags(post.tags)
-    setSeoTitle(post.seoTitle)
-    setSeoDescription(post.seoDescription)
     setSlugTouched(Boolean(post.slug))
-    setAiBusy(null)
+    setAiBusy(false)
     baselineRef.current = snapshotFromPost(post)
   }, [open, post])
 
@@ -193,11 +174,9 @@ export function PostFieldsModal({
       featuredImage,
       category,
       tags,
-      seoTitle,
-      seoDescription,
     })
     return JSON.stringify(current) !== JSON.stringify(baselineRef.current)
-  }, [open, title, slug, excerpt, featuredImage, category, tags, seoTitle, seoDescription])
+  }, [open, title, slug, excerpt, featuredImage, category, tags])
 
   function requestDismiss() {
     if (isDirty) {
@@ -214,7 +193,7 @@ export function PostFieldsModal({
 
   const slugError = validateSlug(slug)
 
-  async function handleAiGenerate(target: AiTarget) {
+  async function handleAiGenerateExcerpt() {
     const context = buildContentContext(title, post.body, excerpt)
     if (!context.trim()) {
       toast.error(
@@ -223,77 +202,29 @@ export function PostFieldsModal({
       return
     }
 
-    setAiBusy(target)
+    setAiBusy(true)
     try {
-      if (target === 'excerpt') {
-        const outcome = await coauthorText('compress', context, {
-          instructions:
-            'Write a 1–2 sentence excerpt for blog listings and cards. Return only the excerpt text.',
-          targetLength: 45,
-        })
-        if (!outcome.ok) {
-          toast.error(outcome.error)
-          return
-        }
-        setExcerpt(outcome.result.text.trim())
-        toast.success('Excerpt generated — review before saving.')
+      const outcome = await coauthorText('compress', context, {
+        instructions:
+          'Write a 1–2 sentence excerpt for blog listings and cards. Return only the excerpt text.',
+        targetLength: 45,
+      })
+      if (!outcome.ok) {
+        toast.error(outcome.error)
         return
       }
-
-      if (post.id) {
-        const field = target === 'seoTitle' ? 'metaTitle' : 'metaDescription'
-        const result = await generateSeoField(field, {
-          entityType: post.postType,
-          entityId: post.id,
-        })
-        if (result.unavailable) {
-          toast.error('AI is not configured. Add an AI provider to enable suggestions.')
-          return
-        }
-        if (result.text) {
-          if (target === 'seoTitle') setSeoTitle(result.text)
-          else setSeoDescription(result.text)
-          toast.success('AI suggestion applied — review before saving.')
-        } else {
-          toast.error('No suggestion was returned.')
-        }
-        return
-      }
-
-      if (target === 'seoTitle') {
-        const outcome = await coauthorText('rewrite', context, {
-          style: 'seo-optimized',
-          instructions:
-            'Write a single SEO page title under 60 characters. Return only the title — no quotes.',
-        })
-        if (!outcome.ok) {
-          toast.error(outcome.error)
-          return
-        }
-        setSeoTitle(outcome.result.text.trim().slice(0, SEO_TITLE_MAX))
-      } else {
-        const outcome = await coauthorText('compress', context, {
-          instructions:
-            'Write a compelling SEO meta description of 120–160 characters for search results. Return only the description.',
-          targetLength: 155,
-        })
-        if (!outcome.ok) {
-          toast.error(outcome.error)
-          return
-        }
-        setSeoDescription(outcome.result.text.trim().slice(0, SEO_DESC_MAX))
-      }
-      toast.success('AI suggestion applied — review before saving.')
+      setExcerpt(outcome.result.text.trim())
+      toast.success('Excerpt generated — review before saving.')
     } catch {
       toast.error('AI request failed.')
     } finally {
-      setAiBusy(null)
+      setAiBusy(false)
     }
   }
 
   function handleSave() {
     if (slugError) return
-    onSave({ title, slug, excerpt, featuredImage, category, tags, seoTitle, seoDescription })
+    onSave({ title, slug, excerpt, featuredImage, category, tags })
     onClose()
   }
 
@@ -421,9 +352,9 @@ export function PostFieldsModal({
               </label>
               <AiFieldButton
                 label="Generate excerpt from content"
-                busy={aiBusy === 'excerpt'}
+                busy={aiBusy}
                 disabled={!canEdit}
-                onClick={() => void handleAiGenerate('excerpt')}
+                onClick={() => void handleAiGenerateExcerpt()}
               />
             </div>
             <textarea
@@ -464,56 +395,6 @@ export function PostFieldsModal({
               </div>
             )}
           </div>
-
-          <div>
-            <div className="mb-1 flex items-center justify-between gap-2">
-              <div className="flex min-w-0 items-center gap-2">
-                <label className={`${LABEL} mb-0`} htmlFor="pf-seo-title">
-                  SEO title
-                </label>
-                <AiFieldButton
-                  label="Generate SEO title from content"
-                  busy={aiBusy === 'seoTitle'}
-                  disabled={!canEdit}
-                  onClick={() => void handleAiGenerate('seoTitle')}
-                />
-              </div>
-              <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
-            </div>
-            <input
-              id="pf-seo-title"
-              className={INPUT}
-              value={seoTitle}
-              disabled={!canEdit}
-              placeholder={title || 'Defaults to the post title'}
-              onChange={(e) => setSeoTitle(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <div className="mb-1 flex items-center justify-between gap-2">
-              <div className="flex min-w-0 items-center gap-2">
-                <label className={`${LABEL} mb-0`} htmlFor="pf-seo-desc">
-                  SEO description
-                </label>
-                <AiFieldButton
-                  label="Generate SEO description from content"
-                  busy={aiBusy === 'seoDescription'}
-                  disabled={!canEdit}
-                  onClick={() => void handleAiGenerate('seoDescription')}
-                />
-              </div>
-              <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
-            </div>
-            <textarea
-              id="pf-seo-desc"
-              className={`${INPUT} min-h-[72px] resize-y`}
-              value={seoDescription}
-              disabled={!canEdit}
-              placeholder={excerpt || 'Summarize the post for search results (120–160 characters)'}
-              onChange={(e) => setSeoDescription(e.target.value)}
-            />
-          </div>
         </div>
       </Modal>
 

package/src/views/post-editor/PostSectionEditor.tsx

@@ -50,6 +50,7 @@ import { SectionInspector } from '../page-editor/SectionInspector.js'
 import { AddSectionModal } from '../page-editor/AddSectionModal.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
+import { computeLiveSeoScore } from '../../lib/editor-seo-content.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
 
@@ -158,6 +159,18 @@ export function PostSectionEditor({
     [post],
   )
   const publishReady = Boolean(post) && publishCheck.errors.length === 0
+
+  const liveSeoScore = useMemo(() => {
+    if (!post) return 0
+    return computeLiveSeoScore({
+      title: post.title,
+      slug: post.slug,
+      seoTitle: post.seoTitle,
+      seoDescription: post.seoDescription,
+      sections: post.sections,
+      bodyHtml: post.body,
+    })
+  }, [post])
   const publishDisabledReason = publishCheck.errors[0]
 
   // ─── Load ──────────────────────────────────────────────────────────
@@ -560,6 +573,7 @@ export function PostSectionEditor({
           onOpenSettings={() => setFieldsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={seoOpen}
+          seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           structuralTypes={structuralTypes}
@@ -645,8 +659,11 @@ export function PostSectionEditor({
               entityType="post"
               entityId={post.id}
               title={post.title}
+              slug={post.slug}
               seoTitle={post.seoTitle}
               seoDescription={post.seoDescription}
+              sections={post.sections}
+              bodyHtml={post.body}
               canEdit={canEdit}
               onClose={() => setSeoOpen(false)}
               onDraftChange={handleFields}

package/src/views/seo/ContentTab.tsx

@@ -34,7 +34,12 @@ const FILTERS: { id: ContentSeoFilter; label: string }[] = [
 const inputCls =
   'w-full rounded-md border border-[var(--bdr)] bg-input-background py-2 pl-9 pr-3 text-base text-[var(--txt)] placeholder:text-[var(--sub)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]'
 
-type Selection = { type: string; id: string } | null
+type SeoEntityType = 'page' | 'post'
+type Selection = { type: SeoEntityType; id: string } | null
+
+function parseEntityType(value: string | null | undefined): SeoEntityType | null {
+  return value === 'page' || value === 'post' ? value : null
+}
 
 export function ContentTab({
   initialEntityType,
@@ -46,16 +51,17 @@ export function ContentTab({
   const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, [])
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<ContentSeoFilter>('all')
-  const [selection, setSelection] = useState<Selection>(
-    initialEntityType && initialEntityId ? { type: initialEntityType, id: initialEntityId } : null,
-  )
+  const [selection, setSelection] = useState<Selection>(() => {
+    const type = parseEntityType(initialEntityType)
+    return type && initialEntityId ? { type, id: initialEntityId } : null
+  })
 
   const rows = useMemo(
     () => applyContentSeoQuery(data ?? [], { search, filter }),
     [data, search, filter],
   )
 
-  const toggleRow = (type: string, id: string) => {
+  const toggleRow = (type: SeoEntityType, id: string) => {
     setSelection((prev) => (prev?.type === type && prev.id === id ? null : { type, id }))
   }