@actuate-media/cms-admin 0.74.0 → 0.75.0

package/src/components/seo/SeoInsightsMetrics.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import type { ReadabilityResult } from '@actuate-media/cms-core/seo/analysis'
+import { prominentWordsFromText } from '../../lib/editor-seo-content.js'
+
+export function SeoInsightsMetrics({
+  readability,
+  plainText,
+}: {
+  readability: ReadabilityResult
+  plainText: string
+}) {
+  const prominent = prominentWordsFromText(plainText)
+  const needsMoreCopy = readability.wordCount < 50
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h4 className="mb-1.5 text-[12.5px] font-medium text-[var(--txt)]">Prominent words</h4>
+        {needsMoreCopy ? (
+          <p className="text-[11.5px] text-[var(--sub)]">
+            Once you add more copy, we&apos;ll list the words that occur most in the content — a
+            quick read on what the page focuses on.
+          </p>
+        ) : prominent.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {prominent.map((word) => (
+              <span
+                key={word}
+                className="rounded-full border border-[var(--bdr)] bg-[var(--card)] px-2 py-0.5 text-[11.5px] text-[var(--txt)]"
+              >
+                {word}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p className="text-[11.5px] text-[var(--sub)]">No recurring terms yet.</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <MetricCard
+          label="Reading time"
+          value={String(readability.readingTimeMinutes)}
+          unit="minutes"
+          hint={
+            needsMoreCopy
+              ? 'Continue writing to estimate reading time.'
+              : `${readability.wordCount} words at ~200 wpm`
+          }
+        />
+        <MetricCard
+          label="Word count"
+          value={String(readability.wordCount)}
+          unit="words"
+          hint={needsMoreCopy ? 'Add body content to unlock metrics.' : undefined}
+        />
+      </div>
+
+      <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+        <div className="mb-1 text-[12.5px] font-medium text-[var(--txt)]">Flesch reading ease</div>
+        {needsMoreCopy ? (
+          <p className="text-[11.5px] text-[var(--sub)]">
+            Your text should be slightly longer to calculate readability. Keep writing to unlock
+            this score.
+          </p>
+        ) : (
+          <>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-medium text-[var(--acc)]">
+                {readability.fleschScore}
+              </span>
+              <span className="text-[11.5px] text-[var(--muted)]">out of 100</span>
+            </div>
+            <p className="mt-1 text-[11.5px] text-[var(--sub)]">
+              {readability.fleschLabel} —{' '}
+              {readability.fleschScore >= 60
+                ? 'Content is fairly easy to read.'
+                : 'Try shorter sentences and simpler words.'}
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function MetricCard({
+  label,
+  value,
+  unit,
+  hint,
+}: {
+  label: string
+  value: string
+  unit: string
+  hint?: string
+}) {
+  return (
+    <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+      <div className="text-[11.5px] font-medium text-[var(--sub)]">{label}</div>
+      <div className="mt-1 flex items-baseline gap-1">
+        <span className="text-xl font-medium text-[var(--acc)]">{value}</span>
+        <span className="text-[11px] text-[var(--muted)]">{unit}</span>
+      </div>
+      {hint && <p className="mt-1 text-[10.5px] text-[var(--muted)]">{hint}</p>}
+    </div>
+  )
+}

package/src/components/seo/SeoLinkingSection.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Link2, Loader2, Sparkles } from 'lucide-react'
+import { fetchLinkSuggestions, type LinkSuggestion } from '../../lib/seo-service.js'
+
+export function SeoLinkingSection({
+  entityType,
+  entityId,
+  internalLinks,
+  externalLinks,
+  internalLinkOk,
+  externalLinkOk,
+}: {
+  entityType: 'page' | 'post'
+  entityId: string | null
+  internalLinks: number
+  externalLinks: number
+  internalLinkOk: boolean
+  externalLinkOk: boolean
+}) {
+  const [loading, setLoading] = useState(false)
+  const [suggestions, setSuggestions] = useState<LinkSuggestion[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!entityId) {
+      setSuggestions([])
+      setError(null)
+      return
+    }
+    let alive = true
+    setLoading(true)
+    setError(null)
+    fetchLinkSuggestions({ targetEntityType: entityType, targetEntityId: entityId, limit: 5 })
+      .then((res) => {
+        if (!alive) return
+        if (res.error) {
+          setError(res.error)
+          setSuggestions([])
+          return
+        }
+        setSuggestions(res.data?.suggestions ?? [])
+      })
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [entityType, entityId])
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-3">
+        <LinkCountCard
+          label="Internal links"
+          count={internalLinks}
+          ok={internalLinkOk}
+          hint={
+            internalLinkOk
+              ? 'Links to other pages on your site.'
+              : 'Add links to related content — aim for at least one.'
+          }
+        />
+        <LinkCountCard
+          label="Outbound links"
+          count={externalLinks}
+          ok={externalLinkOk}
+          hint={
+            externalLinkOk
+              ? 'Links to external sources.'
+              : 'Consider linking to authoritative external sources.'
+          }
+        />
+      </div>
+
+      {!entityId ? (
+        <p className="rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-3 text-[11.5px] text-[var(--sub)]">
+          Save a draft first to load AI link opportunities for this page.
+        </p>
+      ) : loading ? (
+        <div className="flex items-center gap-2 text-[12px] text-[var(--muted)]">
+          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          Finding link opportunities…
+        </div>
+      ) : error ? (
+        <p className="text-[11.5px] text-[var(--err)]">{error}</p>
+      ) : suggestions.length > 0 ? (
+        <div>
+          <div className="mb-2 flex items-center gap-1.5 text-[12px] font-medium text-[var(--txt)]">
+            <Sparkles className="h-3.5 w-3.5 text-[var(--acc)]" aria-hidden />
+            Link opportunities
+          </div>
+          <ul className="space-y-2">
+            {suggestions.map((s) => (
+              <li
+                key={`${s.sourceEntityId}-${s.anchorText}`}
+                className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-2.5"
+              >
+                <div className="text-[12.5px] font-medium text-[var(--txt)]">{s.sourceTitle}</div>
+                <p className="mt-0.5 text-[11px] text-[var(--muted)]">{s.sourceUrl}</p>
+                <p className="mt-1 text-[11.5px] text-[var(--sub)]">
+                  Suggested anchor: <span className="text-[var(--txt)]">{s.anchorText}</span>
+                </p>
+                {s.excerpt && (
+                  <p className="mt-1 line-clamp-2 text-[11px] text-[var(--muted)]">{s.excerpt}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <p className="text-[11.5px] text-[var(--sub)]">
+          No inbound link suggestions yet. Run the site link index from SEO → Links to improve AI
+          recommendations.
+        </p>
+      )}
+
+      <div className="flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-2.5 text-[11px] text-[var(--sub)]">
+        <Link2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--acc)]" aria-hidden />
+        <span>
+          Best practice: mix internal links (site structure + crawl paths) with selective outbound
+          links (trust signals). We flag counts here; apply links in the content editor.
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function LinkCountCard({
+  label,
+  count,
+  ok,
+  hint,
+}: {
+  label: string
+  count: number
+  ok: boolean
+  hint: string
+}) {
+  return (
+    <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[11.5px] font-medium text-[var(--sub)]">{label}</span>
+        <span className={`text-lg font-medium ${ok ? 'text-[var(--suc)]' : 'text-[var(--warn)]'}`}>
+          {count}
+        </span>
+      </div>
+      <p className="mt-1 text-[10.5px] text-[var(--muted)]">{hint}</p>
+    </div>
+  )
+}

package/src/lib/editor-seo-content.ts

@@ -0,0 +1,144 @@
+import { getSectionType, type PageSection } from '@actuate-media/cms-core/page-sections'
+import { analyzeContent } from '@actuate-media/cms-core/seo/analysis'
+
+const HTML_LIKE = /<\/?[a-z][\s\S]*>/i
+
+/** Build an HTML-ish string from editor sections (+ optional post body) for SEO analysis. */
+export function buildEditorContentHtml(sections: PageSection[], body = ''): string {
+  const parts: string[] = []
+  if (body.trim()) parts.push(body)
+  for (const section of sections) {
+    if (section.visible === false) continue
+    const chunk = extractSectionContentHtml(section)
+    if (chunk) parts.push(chunk)
+  }
+  return parts.join('\n')
+}
+
+/** Live 0–100 SEO score from the current in-editor document state. */
+export function computeLiveSeoScore(input: {
+  title: string
+  slug: string
+  seoTitle: string
+  seoDescription: string
+  focusKeyword?: string
+  sections: PageSection[]
+  bodyHtml?: string
+}): number {
+  const content = buildEditorContentHtml(input.sections, input.bodyHtml ?? '')
+  return analyzeContent({
+    title: input.title,
+    slug: input.slug,
+    content,
+    metaTitle: input.seoTitle,
+    metaDescription: input.seoDescription,
+    focusKeyphrase: input.focusKeyword,
+  }).score
+}
+
+function extractSectionContentHtml(section: PageSection): string {
+  const content = section.content
+  if (!content || typeof content !== 'object') return ''
+  const def = getSectionType(section.sectionType)
+  const chunks: string[] = []
+
+  if (def) {
+    for (const field of def.fields) {
+      const val = content[field.key]
+      if (typeof val !== 'string' || !val.trim()) continue
+      if (field.type === 'richText' || HTML_LIKE.test(val)) {
+        chunks.push(val)
+      } else if (/heading|title|subtitle|eyebrow/i.test(field.key)) {
+        chunks.push(`<h2>${escapeHtml(val.trim())}</h2>`)
+      } else if (/body|content|text|copy|description|excerpt|quote|answer/i.test(field.key)) {
+        chunks.push(`<p>${escapeHtml(val.trim())}</p>`)
+      }
+    }
+  } else {
+    collectStringValues(content, chunks, 0)
+  }
+
+  return chunks.join('\n')
+}
+
+function collectStringValues(obj: Record<string, unknown>, chunks: string[], depth: number): void {
+  if (depth > 6) return
+  for (const value of Object.values(obj)) {
+    if (typeof value === 'string' && value.trim()) {
+      chunks.push(HTML_LIKE.test(value) ? value : `<p>${escapeHtml(value.trim())}</p>`)
+    } else if (Array.isArray(value)) {
+      for (const item of value) {
+        if (item && typeof item === 'object') {
+          collectStringValues(item as Record<string, unknown>, chunks, depth + 1)
+        }
+      }
+    } else if (value && typeof value === 'object') {
+      collectStringValues(value as Record<string, unknown>, chunks, depth + 1)
+    }
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+const STOP_WORDS = new Set([
+  'about',
+  'after',
+  'also',
+  'been',
+  'before',
+  'being',
+  'between',
+  'both',
+  'could',
+  'each',
+  'from',
+  'have',
+  'into',
+  'more',
+  'most',
+  'other',
+  'over',
+  'some',
+  'such',
+  'than',
+  'that',
+  'their',
+  'them',
+  'then',
+  'there',
+  'these',
+  'they',
+  'this',
+  'through',
+  'under',
+  'very',
+  'were',
+  'what',
+  'when',
+  'where',
+  'which',
+  'while',
+  'with',
+  'would',
+  'your',
+])
+
+/** Top content words for the Insights accordion (excluding common stop words). */
+export function prominentWordsFromText(plainText: string, limit = 8): string[] {
+  const counts = new Map<string, number>()
+  for (const raw of plainText.toLowerCase().split(/\s+/)) {
+    const word = raw.replace(/[^a-z0-9'-]/g, '')
+    if (word.length < 4 || STOP_WORDS.has(word)) continue
+    counts.set(word, (counts.get(word) ?? 0) + 1)
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, limit)
+    .map(([word]) => word)
+}

package/src/lib/seo-service.ts

@@ -9,6 +9,7 @@
  * `packages/cms-core/src/api/handlers.ts` across phases 2-3 and 6.
  */
 import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
+import type { SEOAnalysisResult } from '@actuate-media/cms-core/seo/analysis'
 import { cmsApi } from './api.js'
 
 /**
@@ -239,6 +240,12 @@ export interface SeoFieldPayload {
   llmsOptional?: boolean
 }
 
+export async function fetchDocumentSeoAnalysis(documentId: string): Promise<SEOAnalysisResult> {
+  const res = await cmsApi<SEOAnalysisResult>(`/seo/analysis/${encodeURIComponent(documentId)}`)
+  throwIfError(res)
+  return res.data ?? { score: 0, checks: [] }
+}
+
 export async function updateSeoFields(
   entityType: string,
   entityId: string,

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

@@ -10,12 +10,12 @@ import {
   Loader2,
   type LucideIcon,
   Monitor,
-  Search,
   Settings2,
   Smartphone,
   Tablet,
   TriangleAlert,
 } from 'lucide-react'
+import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
 import type { PageStatus } from '../../lib/page-editor-service.js'
 import { VIEWPORTS, type ViewportId } from './viewports.js'
 
@@ -61,6 +61,8 @@ interface EditorTopBarProps {
   /** Open the document SEO panel (meta, social, schema, analysis). */
   onOpenSeo?: () => void
   seoOpen?: boolean
+  /** Live 0–100 SEO score shown left of the SEO label. */
+  seoScore?: number
   onSaveDraft: () => void
   onPublish: () => void
   /**
@@ -108,6 +110,7 @@ export function EditorTopBar({
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
+  seoScore = 0,
   onSaveDraft,
   onPublish,
   structuralTypes = [],
@@ -203,15 +206,15 @@ export function EditorTopBar({
             type="button"
             onClick={onOpenSeo}
             aria-pressed={seoOpen}
-            aria-label="SEO"
-            title="SEO — meta tags, social preview, schema, and analysis"
+            aria-label={`SEO, score ${seoScore} out of 100`}
+            title={`SEO — score ${seoScore}/100. Meta tags, social preview, schema, and analysis.`}
             className={`inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors ${
               seoOpen
                 ? 'bg-primary text-primary-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-accent'
             }`}
           >
-            <Search className="h-4 w-4 shrink-0" aria-hidden />
+            <EditorSeoScoreBadge score={seoScore} inverted={seoOpen} />
             <span className="hidden sm:inline">SEO</span>
           </button>
         )}

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

@@ -45,6 +45,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`) */
@@ -128,6 +129,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 ──────────────────────────────────────────────────────────
@@ -518,6 +530,7 @@ export function PageSectionEditor({
           onOpenSettings={() => setSettingsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={seoOpen}
+          seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           structuralTypes={structuralTypes}
@@ -622,8 +635,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}

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