@actuate-media/cms-admin 0.74.0 → 0.76.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/page-editor-service.ts

@@ -75,6 +75,8 @@ export interface EditorPage {
   seoDescription: string
   publishedAt: string | null
   updatedAt: string | null
+  scheduledAt: string | null
+  scheduledUnpublishAt: string | null
   /**
    * True when the document was authored in the visual Page Builder (it carries
    * a `_layout` tree). Such a page's `sections` are *compiled* from the layout
@@ -176,6 +178,8 @@ interface DocumentApiRow {
   slug: string | null
   status: PageStatus
   publishedAt: string | null
+  scheduledAt?: string | null
+  scheduledUnpublishAt?: string | null
   updatedAt: string | null
   data: Record<string, unknown> | null
   /** The page-builder tree, lifted out of `data` onto the wire envelope by the API. */
@@ -207,6 +211,8 @@ function rowToEditorPage(doc: DocumentApiRow): EditorPage {
     seoDescription: typeof data.metaDescription === 'string' ? data.metaDescription : '',
     publishedAt: doc.publishedAt ?? null,
     updatedAt: doc.updatedAt ?? null,
+    scheduledAt: doc.scheduledAt ?? null,
+    scheduledUnpublishAt: doc.scheduledUnpublishAt ?? null,
     builderOwned,
   }
 }
@@ -302,6 +308,8 @@ export function emptyPage(parentPageId: string | null = null): EditorPage {
     seoDescription: '',
     publishedAt: null,
     updatedAt: null,
+    scheduledAt: null,
+    scheduledUnpublishAt: null,
     builderOwned: false,
   }
 }

package/src/lib/post-editor-service.ts

@@ -78,6 +78,9 @@ export interface EditorPost {
   tags: string[]
   status: PostStatus
   publishDate: string | null
+  /** When set and status is SCHEDULED, the cron publishes at this time. */
+  scheduledAt: string | null
+  scheduledUnpublishAt: string | null
   sections: PageSection[]
   seoTitle: string
   seoDescription: string
@@ -189,6 +192,7 @@ interface DocumentApiRow {
   status: PostStatus
   publishedAt: string | null
   scheduledAt?: string | null
+  scheduledUnpublishAt?: string | null
   updatedAt: string | null
   data: Record<string, unknown> | null
 }
@@ -235,6 +239,8 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     tags: parseTags(data.tags),
     status: doc.status ?? 'DRAFT',
     publishDate: (data.publishDate as string) ?? doc.scheduledAt ?? null,
+    scheduledAt: doc.scheduledAt ?? null,
+    scheduledUnpublishAt: doc.scheduledUnpublishAt ?? null,
     // Preserve unknown (externally-managed) sections so the editor can show
     // them read-only and round-trip them on save instead of dropping them.
     sections: coerceSections(data.sections, { onUnknown: 'preserve' }),
@@ -417,6 +423,8 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     tags: [],
     status: 'DRAFT',
     publishDate: null,
+    scheduledAt: null,
+    scheduledUnpublishAt: null,
     sections,
     seoTitle: '',
     seoDescription: '',

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

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  Calendar,
   Check,
   ExternalLink,
   Eye,
@@ -10,12 +11,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,8 +62,16 @@ 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
+  /** Open the schedule-publish dialog. Omitted when the document is unsaved. */
+  onSchedule?: () => void
+  /** When false, Schedule stays disabled (e.g. unsaved document). Defaults to true. */
+  scheduleReady?: boolean
+  scheduledAt?: string | null
+  scheduledUnpublishAt?: string | null
   /**
    * Section types the canvas renders as placeholders (custom / unmanaged).
    * When non-empty the editor is in "structure" mode: the eye preview is
@@ -108,8 +117,13 @@ export function EditorTopBar({
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
+  seoScore = 0,
   onSaveDraft,
   onPublish,
+  onSchedule,
+  scheduleReady = true,
+  scheduledAt = null,
+  scheduledUnpublishAt = null,
   structuralTypes = [],
 }: EditorTopBarProps) {
   const statusInfo = STATUS_TEXT[status]
@@ -132,6 +146,26 @@ export function EditorTopBar({
           ? 'You do not have permission to publish'
           : undefined
 
+  const scheduleBlocked =
+    !onSchedule ||
+    !canPublish ||
+    !publishReady ||
+    !scheduleReady ||
+    publishing ||
+    saveState === 'saving'
+  const scheduleTitle =
+    saveState === 'saving'
+      ? 'Wait for the current save to finish'
+      : !scheduleReady
+        ? 'Save before scheduling'
+        : canPublish && !publishReady && publishDisabledReason
+          ? publishDisabledReason
+          : !canPublish
+            ? 'You do not have permission to schedule'
+            : scheduledAt
+              ? `Reschedule — currently publishes ${formatScheduleLabel(scheduledAt)}`
+              : 'Schedule a future publish date'
+
   return (
     <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
       {/* Breadcrumb + status */}
@@ -155,6 +189,18 @@ export function EditorTopBar({
         >
           {statusInfo.label}
         </span>
+        {scheduledAt && (
+          <span
+            className="text-muted-foreground ml-1 hidden shrink-0 text-xs sm:inline"
+            title={
+              scheduledUnpublishAt
+                ? `Publishes ${formatScheduleLabel(scheduledAt)} · Unpublishes ${formatScheduleLabel(scheduledUnpublishAt)}`
+                : `Publishes ${formatScheduleLabel(scheduledAt)}`
+            }
+          >
+            · {formatScheduleLabel(scheduledAt)}
+          </span>
+        )}
         <SaveStatus state={saveState} dirty={dirty} />
       </div>
 
@@ -203,15 +249,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>
         )}
@@ -291,6 +337,20 @@ export function EditorTopBar({
           {saveState === 'saving' ? 'Saving…' : 'Save Draft'}
         </button>
 
+        {onSchedule && (
+          <button
+            type="button"
+            onClick={onSchedule}
+            disabled={scheduleBlocked}
+            title={scheduleTitle}
+            aria-label={scheduledAt ? 'Reschedule publish' : 'Schedule publish'}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Calendar className="h-3.5 w-3.5" aria-hidden />
+            <span className="hidden sm:inline">{scheduledAt ? 'Reschedule' : 'Schedule'}</span>
+          </button>
+        )}
+
         <button
           type="button"
           onClick={onPublish}
@@ -350,3 +410,15 @@ function SaveStatus({ state, dirty }: { state: SaveState; dirty: boolean }) {
   }
   return null
 }
+
+function formatScheduleLabel(iso: string): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}