@actuate-media/cms-admin 0.18.0 → 0.20.0

package/src/views/page-editor/sections/ArticleBodySection.tsx

@@ -4,8 +4,12 @@ import { bool, str, type PostRenderContext } from './parts.js'
 /**
  * Renders the post's main body. When `source === 'field'` it shows the
  * post's own Body field (passed via context); otherwise it renders the
- * section's own `body` copy. Body text is treated as plain paragraphs split
- * on blank lines — the renderer never injects raw HTML.
+ * section's own `body` copy.
+ *
+ * The Body field is a `richText` field (sanitized HTML on write), so this
+ * canvas preview renders it as HTML — exactly like the public site's
+ * article-body renderer — to stay WYSIWYG. It previews the author's own
+ * in-progress draft; the server sanitizes (sanitize-html) on save.
  */
 export function ArticleBodySection({
   section,
@@ -16,15 +20,10 @@ export function ArticleBodySection({
 }) {
   const c = section.content
   const source = str(c, 'source', 'field')
-  const raw = source === 'field' ? (context?.body ?? '') : str(c, 'body')
+  const html = source === 'field' ? (context?.body ?? '') : str(c, 'body')
   const wide = str(c, 'width', 'normal') === 'wide'
   const showToc = bool(c, 'showToc')
 
-  const paragraphs = raw
-    .split(/\n{2,}/)
-    .map((p) => p.trim())
-    .filter(Boolean)
-
   return (
     <div className={`mx-auto px-6 ${wide ? 'max-w-4xl' : 'max-w-2xl'}`}>
       {showToc && (
@@ -37,14 +36,11 @@ export function ArticleBodySection({
           </p>
         </div>
       )}
-      {paragraphs.length > 0 ? (
-        <div className="space-y-4">
-          {paragraphs.map((p, i) => (
-            <p key={i} className="text-base leading-relaxed text-zinc-700">
-              {p}
-            </p>
-          ))}
-        </div>
+      {html.trim() ? (
+        <div
+          className="prose prose-zinc max-w-none text-base leading-relaxed text-zinc-700"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
       ) : (
         <p className="text-base leading-relaxed text-zinc-400 italic">
           {source === 'field'

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

@@ -102,6 +102,12 @@ export function PostEditorCanvas({
 }
 
 function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
+  // This block sits inside the fixed-white preview surface, so the neutral
+  // greys intentionally match the website-preview palette used by PostHeader
+  // and the section renderers (not the admin theme tokens, which flip in dark
+  // mode and would lose contrast on the always-white surface). The CTA is the
+  // one true admin affordance here, so it uses the brand `primary` token,
+  // which carries a guaranteed-contrast foreground in both modes.
   return (
     <div className="flex flex-col items-center justify-center gap-3 border-t border-zinc-100 px-6 py-16 text-center">
       <span className="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100">
@@ -113,7 +119,7 @@ function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
       <button
         type="button"
         onClick={onAddSection}
-        className="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700"
+        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
       >
         <Plus className="h-4 w-4" aria-hidden />
         Add Section

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

@@ -3,6 +3,8 @@
 import { useEffect, useState } from 'react'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
+import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { RichTextField } from '../../fields/RichTextField.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
 interface PostFieldsModalProps {
@@ -36,6 +38,7 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
   const [seoTitle, setSeoTitle] = useState(post.seoTitle)
   const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
+  const [mediaOpen, setMediaOpen] = useState(false)
 
   useEffect(() => {
     if (!open) return
@@ -134,16 +137,26 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
         </div>
         <div>
           <label className={LABEL} htmlFor="pf-image">
-            Featured image URL
+            Featured image
           </label>
-          <input
-            id="pf-image"
-            className={INPUT}
-            value={featuredImage}
-            disabled={!canEdit}
-            placeholder="https://…"
-            onChange={(e) => setFeaturedImage(e.target.value)}
-          />
+          <div className="flex gap-2">
+            <input
+              id="pf-image"
+              className={`${INPUT} flex-1`}
+              value={featuredImage}
+              disabled={!canEdit}
+              placeholder="https://… or pick from the media library"
+              onChange={(e) => setFeaturedImage(e.target.value)}
+            />
+            <button
+              type="button"
+              disabled={!canEdit}
+              onClick={() => setMediaOpen(true)}
+              className="bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+            >
+              Browse
+            </button>
+          </div>
           {featuredImage && (
             <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
               <img src={featuredImage} alt="" className="h-28 w-full object-cover" />
@@ -151,20 +164,12 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
           )}
         </div>
         <div>
-          <label className={LABEL} htmlFor="pf-body">
-            Body
-          </label>
-          <textarea
-            id="pf-body"
-            className={`${INPUT} min-h-[120px] resize-y`}
+          <RichTextField
+            label="Body"
             value={body}
-            disabled={!canEdit}
-            placeholder="The main post content. Shown by the Article Body section."
-            onChange={(e) => setBody(e.target.value)}
+            onChange={canEdit ? setBody : () => {}}
+            helpText="Rendered by the Article Body section when its source is set to the post Body field."
           />
-          <p className="text-muted-foreground mt-1 text-xs">
-            Rendered by the Article Body section when its source is set to the post Body field.
-          </p>
         </div>
         <div>
           <label className={LABEL} htmlFor="pf-seo-title">
@@ -191,6 +196,16 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
           />
         </div>
       </div>
+
+      <MediaPickerModal
+        open={mediaOpen}
+        onClose={() => setMediaOpen(false)}
+        onSelect={(url) => {
+          setFeaturedImage(url)
+          setMediaOpen(false)
+        }}
+        accept="image/*"
+      />
     </Modal>
   )
 }

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

@@ -1,3 +1,4 @@
+import { computeReadingTime } from '@actuate-media/cms-core/page-sections'
 import type { PostHeaderConfig } from '../page-editor/section-types.js'
 import type { PostRenderContext } from '../page-editor/sections/index.js'
 
@@ -37,7 +38,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
       )}
       {config.showAuthor && <span>{context.author?.name || 'Author name'}</span>}
       {date && <span>{date}</span>}
-      {config.showReadingTime && <span>5 min read</span>}
+      {config.showReadingTime && <span>{computeReadingTime(context.body)} min read</span>}
     </div>
   )
 
@@ -45,7 +46,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
     return (
       <header className="relative">
         <img src={context.featuredImageUrl} alt="" className="h-[360px] w-full object-cover" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-black/10" aria-hidden />
+        <div className="absolute inset-0 bg-linear-to-t from-black/70 to-black/10" aria-hidden />
         <div className="absolute inset-x-0 bottom-0 px-6 pb-8">
           <div className={`mx-auto flex max-w-3xl flex-col ${align}`}>
             <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
@@ -66,7 +67,6 @@ export function PostHeader({ config, context }: PostHeaderProps) {
       <div
         className={`flex max-w-3xl flex-col ${align} ${config.layout === 'centered' ? 'mx-auto' : ''}`}
       >
-        {config.showCategory && context.category && config.layout !== 'centered' && null}
         <h1 className="text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
         {config.showExcerpt && context.excerpt && (
           <p className="mt-3 max-w-2xl text-lg text-zinc-600">{context.excerpt}</p>
@@ -78,7 +78,7 @@ export function PostHeader({ config, context }: PostHeaderProps) {
           <img
             src={context.featuredImageUrl}
             alt=""
-            className="aspect-[16/9] w-full rounded-xl object-cover"
+            className="aspect-video w-full rounded-xl object-cover"
           />
         </div>
       )}

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

@@ -78,6 +78,17 @@ export function PostPreview({ postType, documentId, session, onNavigate }: PostP
   }
   const visible = post.sections.filter((s) => s.visible)
 
+  // `window.close()` only works for tabs JS opened (the "View preview" action
+  // opens this view via window.open). When the user reached it through in-app
+  // navigation there is no opener, so close() is a silent no-op — fall back to
+  // the editor after a tick so the Close button always does something.
+  const handleClose = () => {
+    window.close()
+    setTimeout(() => {
+      onNavigate(`/posts/${postType}/${documentId}/edit`)
+    }, 120)
+  }
+
   return (
     <div className="flex h-full flex-col">
       {/* Slim preview bar. This view opens in its own browser tab, so
@@ -85,7 +96,7 @@ export function PostPreview({ postType, documentId, session, onNavigate }: PostP
       <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
         <button
           type="button"
-          onClick={() => window.close()}
+          onClick={handleClose}
           className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
           aria-label="Close preview tab"
         >

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

@@ -43,12 +43,23 @@ import { ValidationSummary } from '../page-editor/ValidationSummary.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal } from './PostFieldsModal.js'
 
+/** The slice of the resolved CMS config this editor reads. */
+interface EditorConfig {
+  collections?: Record<string, { labels?: { singular?: string }; urlPrefix?: string } | undefined>
+  seo?: { siteUrl?: string }
+}
+
+/** The slice of the admin session this editor reads. */
+interface EditorSession {
+  user?: { role?: string; name?: string; email?: string }
+}
+
 interface PostSectionEditorProps {
   postType: string
   /** undefined when creating a new post (`/posts/:type/new`) */
   documentId?: string
-  config?: any
-  session?: any
+  config?: EditorConfig
+  session?: EditorSession
   onNavigate: (path: string) => void
   /**
    * Open a preview route in a new browser tab. `prepare` runs before the tab
@@ -58,9 +69,15 @@ interface PostSectionEditorProps {
   onOpenPreview?: (path: string, prepare?: () => Promise<boolean | void> | boolean | void) => void
 }
 
-function deriveCan(session: any): { canEdit: boolean; canPublish: boolean } {
-  const role: string | undefined = session?.user?.role
-  if (!role) return { canEdit: true, canPublish: true }
+function deriveCan(session: EditorSession | undefined): {
+  canEdit: boolean
+  canPublish: boolean
+} {
+  const role = session?.user?.role
+  // Default closed: when we can't identify a role, hide the edit/publish
+  // affordances rather than exposing them. The server independently enforces
+  // access on every write, so this is a UX guard — but it should fail safe.
+  if (!role) return { canEdit: false, canPublish: false }
   const editors = ['ADMIN', 'EDITOR', 'AUTHOR']
   const publishers = ['ADMIN', 'EDITOR']
   return { canEdit: editors.includes(role), canPublish: publishers.includes(role) }

package/src/views/seo/AuditTab.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { ClipboardCheck, Clock, CheckCircle2 } from 'lucide-react'
+import {
+  fetchSeoIssues,
+  fetchSeoAuditRuns,
+  type SeoIssue,
+  type SeoIssueQuery,
+  type SeoSeverity,
+  type SeoIssueStatus,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  severityMeta,
+  SeoStatusBadge,
+} from '../../components/seo/primitives.js'
+import { SeoIssueFixDrawer } from '../../components/seo/SeoIssueFixDrawer.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const SEVERITY_FILTERS: { id: SeoSeverity | 'all'; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'critical', label: 'Critical' },
+  { id: 'warning', label: 'Warnings' },
+  { id: 'info', label: 'Info' },
+]
+
+const STATUS_FILTERS: { id: SeoIssueStatus | 'all'; label: string }[] = [
+  { id: 'open', label: 'Open' },
+  { id: 'recurring', label: 'Recurring' },
+  { id: 'ignored', label: 'Ignored' },
+  { id: 'resolved', label: 'Resolved' },
+  { id: 'all', label: 'All' },
+]
+
+function issueStatusTone(status: SeoIssueStatus) {
+  switch (status) {
+    case 'resolved':
+      return 'good' as const
+    case 'ignored':
+      return 'neutral' as const
+    case 'recurring':
+      return 'fair' as const
+    default:
+      return 'critical' as const
+  }
+}
+
+function AuditSummaryCards({ refetchKey }: { refetchKey: number }) {
+  const { data, loading } = useSeoResource(fetchSeoAuditRuns, [refetchKey])
+  const last = (data ?? [])[0]
+  return (
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground flex items-center gap-1.5 text-sm">
+          <Clock className="h-3.5 w-3.5" aria-hidden /> Last audit
+        </p>
+        <p className="text-foreground mt-1 text-sm font-medium">
+          {loading ? '…' : last ? new Date(last.startedAt).toLocaleString() : 'Never'}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Pages scanned</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.pagesScanned ?? 0}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Issues found</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.issuesFound ?? 0}
+        </p>
+      </div>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <p className="text-muted-foreground text-sm">Site score</p>
+        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+          {last?.siteScoreAfter ?? '—'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function AuditTab({
+  refetchKey = 0,
+  initialIssueId,
+  onNavigate,
+}: {
+  refetchKey?: number
+  initialIssueId?: string | null
+  onNavigate?: (path: string) => void
+}) {
+  const [severity, setSeverity] = useState<SeoSeverity | 'all'>('all')
+  const [status, setStatus] = useState<SeoIssueStatus | 'all'>('open')
+  const [openIssue, setOpenIssue] = useState<string | null>(initialIssueId ?? null)
+
+  const query: SeoIssueQuery = useMemo(() => ({ severity, status }), [severity, status])
+  const { data, loading, error, refetch } = useSeoResource(
+    () => fetchSeoIssues(query),
+    [severity, status, refetchKey],
+  )
+
+  const issues = data ?? []
+
+  return (
+    <div className="space-y-4">
+      <AuditSummaryCards refetchKey={refetchKey} />
+
+      <SectionCard>
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap gap-1" role="tablist" aria-label="Filter by severity">
+            {SEVERITY_FILTERS.map((f) => (
+              <button
+                key={f.id}
+                role="tab"
+                aria-selected={severity === f.id}
+                onClick={() => setSeverity(f.id)}
+                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                  severity === f.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-1" role="tablist" aria-label="Filter by status">
+            {STATUS_FILTERS.map((f) => (
+              <button
+                key={f.id}
+                role="tab"
+                aria-selected={status === f.id}
+                onClick={() => setStatus(f.id)}
+                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                  status === f.id
+                    ? 'bg-accent text-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {loading ? (
+          <SeoLoading label="Loading issues…" />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : issues.length === 0 ? (
+          <SeoEmptyState
+            icon={status === 'open' ? <CheckCircle2 size={24} /> : <ClipboardCheck size={24} />}
+            title={status === 'open' ? 'No open issues' : 'No issues match'}
+            description={
+              status === 'open'
+                ? 'Run an audit to scan for new issues, or adjust the filters.'
+                : 'Try a different severity or status filter.'
+            }
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="SEO issues">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Severity</th>
+                  <th className="py-2 pr-4 font-medium">Issue</th>
+                  <th className="py-2 pr-4 font-medium">Page</th>
+                  <th className="py-2 pr-4 font-medium">Status</th>
+                  <th className="py-2 text-right font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {issues.map((issue: SeoIssue) => {
+                  const meta = severityMeta(issue.severity)
+                  return (
+                    <tr key={issue.id} className="hover:bg-accent/40">
+                      <td className="py-2.5 pr-4">
+                        <span className={`inline-flex items-center gap-1.5 text-sm ${meta.text}`}>
+                          <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+                          {meta.label}
+                        </span>
+                      </td>
+                      <td className="py-2.5 pr-4">
+                        <span className="text-foreground block font-medium">{issue.title}</span>
+                        <span className="text-muted-foreground block capitalize">
+                          {issue.category}
+                        </span>
+                      </td>
+                      <td className="text-muted-foreground py-2.5 pr-4">
+                        <span className="block truncate">
+                          {issue.entityTitle || issue.url || '—'}
+                        </span>
+                      </td>
+                      <td className="py-2.5 pr-4">
+                        <SeoStatusBadge label={issue.status} tone={issueStatusTone(issue.status)} />
+                      </td>
+                      <td className="py-2.5 text-right">
+                        <button
+                          onClick={() => setOpenIssue(issue.id)}
+                          className="text-primary hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                        >
+                          {issue.fixable ? 'Fix' : 'View'}
+                        </button>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+
+      <SeoIssueFixDrawer
+        open={openIssue !== null}
+        onOpenChange={(o) => !o && setOpenIssue(null)}
+        issueId={openIssue}
+        onChanged={refetch}
+        onNavigate={onNavigate}
+      />
+    </div>
+  )
+}

package/src/views/seo/ContentTab.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Search, FileText, Pencil } from 'lucide-react'
+import {
+  fetchSeoContentRecords,
+  applyContentSeoQuery,
+  type ContentSeoFilter,
+} from '../../lib/seo-service.js'
+import {
+  SectionCard,
+  SeoLoading,
+  SeoEmptyState,
+  SeoErrorState,
+  ScorePill,
+  SeoStatusBadge,
+} from '../../components/seo/primitives.js'
+import { SeoEditorDrawer } from '../../components/seo/SeoEditorDrawer.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const FILTERS: { id: ContentSeoFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'pages', label: 'Pages' },
+  { id: 'posts', label: 'Posts' },
+]
+
+const inputCls =
+  'w-full rounded-md border border-border bg-input-background py-2 pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+
+export function ContentTab({
+  initialEntityType,
+  initialEntityId,
+}: {
+  initialEntityType?: string | null
+  initialEntityId?: string | null
+}) {
+  const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, [])
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<ContentSeoFilter>('all')
+  const [editor, setEditor] = useState<{ type: string; id: string } | null>(
+    initialEntityType && initialEntityId ? { type: initialEntityType, id: initialEntityId } : null,
+  )
+
+  const rows = useMemo(
+    () => applyContentSeoQuery(data ?? [], { search, filter }),
+    [data, search, filter],
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative max-w-sm flex-1">
+          <Search
+            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            aria-hidden
+          />
+          <input
+            className={inputCls}
+            placeholder="Search content…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            aria-label="Search content"
+          />
+        </div>
+        <div className="flex gap-1" role="tablist" aria-label="Content type filter">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              role="tab"
+              aria-selected={filter === f.id}
+              onClick={() => setFilter(f.id)}
+              className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                filter === f.id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+              }`}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <SectionCard>
+        {loading ? (
+          <SeoLoading label="Loading content…" />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : rows.length === 0 ? (
+          <SeoEmptyState
+            icon={<FileText size={24} />}
+            title={search || filter !== 'all' ? 'No matching content' : 'No content yet'}
+            description={
+              search || filter !== 'all'
+                ? 'Try adjusting your search or filter.'
+                : 'Publish pages or posts to manage their SEO here.'
+            }
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" aria-label="Content SEO">
+              <thead>
+                <tr className="text-muted-foreground border-border border-b text-left">
+                  <th className="py-2 pr-4 font-medium">Title</th>
+                  <th className="py-2 pr-4 font-medium">Type</th>
+                  <th className="py-2 pr-4 font-medium">Meta</th>
+                  <th className="py-2 pr-4 text-right font-medium">Score</th>
+                  <th className="py-2 text-right font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {rows.map((r) => (
+                  <tr key={`${r.entityType}-${r.entityId}`} className="hover:bg-accent/40">
+                    <td className="py-2.5 pr-4">
+                      <span className="text-foreground block font-medium">{r.title}</span>
+                      <span className="text-muted-foreground block truncate">{r.url}</span>
+                    </td>
+                    <td className="py-2.5 pr-4 capitalize">
+                      <span className="text-muted-foreground">{r.entityType}</span>
+                    </td>
+                    <td className="py-2.5 pr-4">
+                      <span className="flex flex-wrap gap-1.5">
+                        <SeoStatusBadge
+                          label={r.metaTitle ? 'Title' : 'No title'}
+                          tone={r.metaTitle ? 'good' : 'critical'}
+                        />
+                        <SeoStatusBadge
+                          label={r.metaDescription ? 'Desc' : 'No desc'}
+                          tone={r.metaDescription ? 'good' : 'critical'}
+                        />
+                        {r.noindex && <SeoStatusBadge label="No-index" tone="fair" />}
+                      </span>
+                    </td>
+                    <td className="py-2.5 pr-4 text-right">
+                      <ScorePill score={r.seoScore} />
+                    </td>
+                    <td className="py-2.5 text-right">
+                      <button
+                        onClick={() => setEditor({ type: r.entityType, id: r.entityId })}
+                        className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                      >
+                        <Pencil className="h-3.5 w-3.5" aria-hidden /> Edit
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </SectionCard>
+
+      <SeoEditorDrawer
+        open={editor !== null}
+        onOpenChange={(o) => !o && setEditor(null)}
+        entityType={editor?.type ?? null}
+        entityId={editor?.id ?? null}
+        onSaved={refetch}
+      />
+    </div>
+  )
+}