@actuate-media/cms-admin 0.74.0 → 0.76.0

package/src/views/page-editor/PageSectionEditor.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, Blocks, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js'
 import { EditorSeoAside } from '../../components/EditorSeoAside.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
@@ -16,6 +17,7 @@ import {
   missingPageFields,
   moveSection,
   publishPage,
+  PAGES_COLLECTION,
   removeSection,
   reorderSections,
   savePageDraft,
@@ -45,6 +47,7 @@ import { AddSectionModal } from './AddSectionModal.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
+import { computeLiveSeoScore } from '../../lib/editor-seo-content.js'
 
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
@@ -102,6 +105,7 @@ export function PageSectionEditor({
   const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
+  const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
@@ -128,6 +132,17 @@ export function PageSectionEditor({
     [page],
   )
   const publishReady = Boolean(page) && publishCheck.errors.length === 0
+
+  const liveSeoScore = useMemo(() => {
+    if (!page) return 0
+    return computeLiveSeoScore({
+      title: page.title,
+      slug: page.slug,
+      seoTitle: page.seoTitle,
+      seoDescription: page.seoDescription,
+      sections: page.sections,
+    })
+  }, [page])
   const publishDisabledReason = publishCheck.errors[0]
 
   // ─── Load ──────────────────────────────────────────────────────────
@@ -312,6 +327,42 @@ export function PageSectionEditor({
     setConfirmPublish(true)
   }, [page])
 
+  const requestSchedule = useCallback(async () => {
+    if (!page) return
+    if (!page.id) {
+      toast.error('Save the page before scheduling')
+      return
+    }
+    const result = validatePage(page, true)
+    setValidation(result.errors.length || result.warnings.length ? result : null)
+    if (result.errors.length > 0) {
+      toast.error('Resolve the listed issues before scheduling')
+      return
+    }
+    if (dirty) {
+      const ok = await handleSaveDraft()
+      if (!ok) return
+    }
+    setScheduleOpen(true)
+  }, [page, dirty, handleSaveDraft])
+
+  const handleScheduled = useCallback(
+    (next: { status: string; scheduledAt: string | null; scheduledUnpublishAt: string | null }) => {
+      setPage((prev) =>
+        prev
+          ? {
+              ...prev,
+              status: next.status as EditorPage['status'],
+              scheduledAt: next.scheduledAt,
+              scheduledUnpublishAt: next.scheduledUnpublishAt,
+            }
+          : prev,
+      )
+      setValidation(null)
+    },
+    [],
+  )
+
   const doPublish = useCallback(async () => {
     if (!page) return
     setPublishing(true)
@@ -518,8 +569,13 @@ export function PageSectionEditor({
           onOpenSettings={() => setSettingsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={seoOpen}
+          seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
+          onSchedule={page.id ? requestSchedule : undefined}
+          scheduleReady={Boolean(page.id)}
+          scheduledAt={page.scheduledAt}
+          scheduledUnpublishAt={page.scheduledUnpublishAt}
           structuralTypes={structuralTypes}
         />
 
@@ -622,8 +678,10 @@ export function PageSectionEditor({
               entityType="page"
               entityId={page.id}
               title={page.title}
+              slug={page.slug}
               seoTitle={page.seoTitle}
               seoDescription={page.seoDescription}
+              sections={page.sections}
               canEdit={effectiveCanEdit}
               onClose={() => setSeoOpen(false)}
               onDraftChange={handlePageSettings}
@@ -672,6 +730,18 @@ export function PageSectionEditor({
         confirmLabel="Publish"
       />
 
+      {page.id && (
+        <SchedulePublishDialog
+          collectionSlug={PAGES_COLLECTION}
+          documentId={page.id}
+          scheduledAt={page.scheduledAt}
+          scheduledUnpublishAt={page.scheduledUnpublishAt}
+          open={scheduleOpen}
+          onClose={() => setScheduleOpen(false)}
+          onScheduled={handleScheduled}
+        />
+      )}
+
       <ConfirmDialog
         open={leaveTarget !== null}
         onClose={() => setLeaveTarget(null)}

package/src/views/page-editor/PageSettingsModal.tsx

@@ -4,15 +4,9 @@ import { useEffect, useRef, useState } from 'react'
 import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
-import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import { cmsApi } from '../../lib/api.js'
 import type { EditorPage } from '../../lib/page-editor-service.js'
 
-const SEO_TITLE_MIN = 30
-const SEO_TITLE_MAX = 60
-const SEO_DESC_MIN = 120
-const SEO_DESC_MAX = 160
-
 interface PageSettingsModalProps {
   open: boolean
   page: EditorPage
@@ -32,7 +26,7 @@ interface ParentOption {
   title: string
 }
 
-/** Edits page-level fields: title, slug, path, parent page, and SEO. */
+/** Edits page-level fields: title, slug, path, and parent page. SEO lives in the SEO tab. */
 export function PageSettingsModal({
   open,
   page,
@@ -44,8 +38,6 @@ export function PageSettingsModal({
   const [slug, setSlug] = useState(page.slug)
   const [path, setPath] = useState(page.path)
   const [parentPageId, setParentPageId] = useState(page.parentPageId ?? '')
-  const [seoTitle, setSeoTitle] = useState(page.seoTitle)
-  const [seoDescription, setSeoDescription] = useState(page.seoDescription)
   // Auto-derive slug/path from title until the user edits slug manually.
   const [slugTouched, setSlugTouched] = useState(Boolean(page.slug))
   const [parentOptions, setParentOptions] = useState<ParentOption[] | null>(null)
@@ -59,8 +51,6 @@ export function PageSettingsModal({
     setSlug(page.slug)
     setPath(page.path)
     setParentPageId(page.parentPageId ?? '')
-    setSeoTitle(page.seoTitle)
-    setSeoDescription(page.seoDescription)
     setSlugTouched(Boolean(page.slug))
   }, [open, page])
 
@@ -110,8 +100,6 @@ export function PageSettingsModal({
       slug,
       path: path || (slug ? `/${slug}` : '/'),
       parentPageId: parentPageId || null,
-      seoTitle,
-      seoDescription,
     })
     onClose()
   }
@@ -231,38 +219,6 @@ export function PageSettingsModal({
             Nests this page under a parent in the Pages tree view.
           </p>
         </div>
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-title">
-              SEO title
-            </label>
-            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
-          </div>
-          <input
-            id="ps-seo-title"
-            className={INPUT}
-            value={seoTitle}
-            disabled={!canEdit}
-            placeholder={title || 'Defaults to the page title'}
-            onChange={(e) => setSeoTitle(e.target.value)}
-          />
-        </div>
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-desc">
-              SEO description
-            </label>
-            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
-          </div>
-          <textarea
-            id="ps-seo-desc"
-            className={`${INPUT} min-h-[64px] resize-y`}
-            value={seoDescription}
-            disabled={!canEdit}
-            placeholder="Summarize the page for search results (120–160 characters)"
-            onChange={(e) => setSeoDescription(e.target.value)}
-          />
-        </div>
       </form>
     </Modal>
   )

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js'
 import { EditorSeoAside } from '../../components/EditorSeoAside.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
@@ -50,6 +51,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'
 
@@ -127,6 +129,7 @@ export function PostSectionEditor({
   const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
+  const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
@@ -158,6 +161,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 ──────────────────────────────────────────────────────────
@@ -362,6 +377,43 @@ export function PostSectionEditor({
     setConfirmPublish(true)
   }, [post])
 
+  const requestSchedule = useCallback(async () => {
+    if (!post) return
+    if (!post.id) {
+      toast.error('Save the post before scheduling')
+      return
+    }
+    const result = validatePost(post, true)
+    setValidation(result.errors.length || result.warnings.length ? result : null)
+    if (result.errors.length > 0) {
+      toast.error('Resolve the listed issues before scheduling')
+      return
+    }
+    if (dirty) {
+      const ok = await handleSaveDraft()
+      if (!ok) return
+    }
+    setScheduleOpen(true)
+  }, [post, dirty, handleSaveDraft])
+
+  const handleScheduled = useCallback(
+    (next: { status: string; scheduledAt: string | null; scheduledUnpublishAt: string | null }) => {
+      setPost((prev) =>
+        prev
+          ? {
+              ...prev,
+              status: next.status as EditorPost['status'],
+              scheduledAt: next.scheduledAt,
+              scheduledUnpublishAt: next.scheduledUnpublishAt,
+              publishDate: next.scheduledAt ?? prev.publishDate,
+            }
+          : prev,
+      )
+      setValidation(null)
+    },
+    [],
+  )
+
   const doPublish = useCallback(async () => {
     if (!post) return
     setPublishing(true)
@@ -560,8 +612,13 @@ export function PostSectionEditor({
           onOpenSettings={() => setFieldsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={seoOpen}
+          seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
+          onSchedule={post.id ? requestSchedule : undefined}
+          scheduleReady={Boolean(post.id)}
+          scheduledAt={post.scheduledAt}
+          scheduledUnpublishAt={post.scheduledUnpublishAt}
           structuralTypes={structuralTypes}
         />
 
@@ -645,8 +702,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}
@@ -701,6 +761,18 @@ export function PostSectionEditor({
         confirmLabel="Publish"
       />
 
+      {post.id && (
+        <SchedulePublishDialog
+          collectionSlug={postType}
+          documentId={post.id}
+          scheduledAt={post.scheduledAt}
+          scheduledUnpublishAt={post.scheduledUnpublishAt}
+          open={scheduleOpen}
+          onClose={() => setScheduleOpen(false)}
+          onScheduled={handleScheduled}
+        />
+      )}
+
       <ConfirmDialog
         open={leaveTarget !== null}
         onClose={() => setLeaveTarget(null)}

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 }))
   }