@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/components/seo/SeoEditorPane.tsx

@@ -0,0 +1,533 @@
+'use client'
+
+/**
+ * Inline SEO editor pane — design-parity replacement for the old
+ * `SeoEditorDrawer` overlay. Rendered inside an `<InspectorPane>` beside the
+ * Content SEO list (380px in the handoff). Same fields, validation, AI
+ * assists, and `updateSeoFields` save path as the drawer; only the
+ * presentation pattern changed.
+ */
+import { cloneElement, isValidElement, useEffect, useId, useState, type ReactElement } from 'react'
+import { Sparkles, Check, Loader2, Wand2 } from 'lucide-react'
+import { toast } from 'sonner'
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
+import {
+  fetchSeoContentRecord,
+  updateSeoFields,
+  generateSeoField,
+  SEO_SCHEMA_TYPES,
+  type SeoContentRecord,
+  type SeoFieldPayload,
+  type LlmsInclude,
+} from '../../lib/seo-service.js'
+import { fixBrandVoiceContent } from '../../lib/brand-voice-client.js'
+import { BrandVoiceAlignmentBadge } from '../BrandVoiceAlignmentBadge.js'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { Toggle } from '../ui/Toggle.js'
+import { SeoLoading, SeoErrorState, gradeMeta } from './primitives.js'
+
+const META_TITLE_MAX = 60
+const META_DESC_MAX = 160
+const KEY_TAKEAWAY_MAX = 240
+const LLMS_DESC_MAX = 160
+
+type AiField =
+  | 'metaTitle'
+  | 'metaDescription'
+  | 'ogTitle'
+  | 'ogDescription'
+  | 'focusKeyword'
+  | 'keyTakeaway'
+
+function seoBrandChannel(field: AiField): string | undefined {
+  if (field === 'metaDescription' || field === 'ogDescription') return 'meta_description'
+  return undefined
+}
+
+const inputCls =
+  'w-full rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-[12.5px] text-[var(--txt)] placeholder:text-[var(--muted)] focus:border-[var(--acc)] focus:outline-none'
+
+function CharCount({ value, max }: { value: string; max: number }) {
+  const over = value.length > max
+  return (
+    <span className={`text-[11px] ${over ? 'text-[var(--err)]' : 'text-[var(--muted)]'}`}>
+      {value.length}/{max}
+    </span>
+  )
+}
+
+function PaneField({
+  label,
+  children,
+  hint,
+}: {
+  label: string
+  children: React.ReactNode
+  hint?: React.ReactNode
+}) {
+  // Associate the visible label with its control for screen readers. We inject
+  // a generated id onto the single child input/textarea (unless it already has
+  // one) and point the <label htmlFor> at it.
+  const generatedId = useId()
+  let control = children
+  if (isValidElement(children) && (children.props as { id?: string }).id == null) {
+    control = cloneElement(children as ReactElement<{ id?: string }>, { id: generatedId })
+  }
+  const controlId = isValidElement(control) ? (control.props as { id?: string }).id : undefined
+
+  return (
+    <div className="mb-3 last:mb-0">
+      <div className="mb-1 flex items-center justify-between gap-2">
+        <label htmlFor={controlId} className="text-[11.5px] font-medium text-[var(--sub)]">
+          {label}
+        </label>
+        {hint}
+      </div>
+      {control}
+    </div>
+  )
+}
+
+function PaneToggleRow({
+  label,
+  hint,
+  checked,
+  onCheckedChange,
+}: {
+  label: string
+  hint: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5">
+      <div className="min-w-0">
+        <div className="text-[12.5px] font-medium text-[var(--txt)]">{label}</div>
+        <div className="text-[11px] text-[var(--muted)]">{hint}</div>
+      </div>
+      <Toggle checked={checked} onCheckedChange={onCheckedChange} aria-label={label} />
+    </div>
+  )
+}
+
+export interface SeoEditorPaneProps {
+  entityType: string
+  entityId: string
+  onClose: () => void
+  /** Called after a successful save so the list can refetch. */
+  onSaved?: () => void
+}
+
+export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEditorPaneProps) {
+  const [record, setRecord] = useState<SeoContentRecord | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [aiBusy, setAiBusy] = useState<AiField | null>(null)
+  const [aiFixBusy, setAiFixBusy] = useState<AiField | null>(null)
+  const [aiAlignments, setAiAlignments] = useState<
+    Partial<Record<AiField, BrandAlignmentScoreResult>>
+  >({})
+  const [form, setForm] = useState<SeoFieldPayload>({})
+
+  useEffect(() => {
+    let alive = true
+    setLoading(true)
+    setError(null)
+    fetchSeoContentRecord(entityType, entityId)
+      .then((rec) => {
+        if (!alive) return
+        if (!rec) {
+          setError('Could not load this record.')
+          return
+        }
+        setRecord(rec)
+        setForm({
+          metaTitle: rec.metaTitle ?? '',
+          metaDescription: rec.metaDescription ?? '',
+          canonicalUrl: rec.canonicalUrl ?? '',
+          focusKeyword: rec.focusKeyword ?? '',
+          keyTakeaway: rec.keyTakeaway ?? '',
+          ogTitle: rec.ogTitle ?? '',
+          ogDescription: rec.ogDescription ?? '',
+          structuredDataType: rec.structuredDataType ?? 'WebPage',
+          noindex: rec.noindex,
+          nofollow: rec.nofollow,
+          llmsInclude: rec.llmsInclude ?? 'AUTO',
+          llmsDescription: rec.llmsDescription ?? '',
+          llmsSection: rec.llmsSection ?? '',
+          llmsOptional: rec.llmsOptional ?? false,
+        })
+      })
+      .catch((e: unknown) => alive && setError(e instanceof Error ? e.message : 'Failed to load'))
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [entityType, entityId])
+
+  const update = (patch: Partial<SeoFieldPayload>) => setForm((f) => ({ ...f, ...patch }))
+
+  async function handleAiGenerate(field: AiField) {
+    setAiBusy(field)
+    try {
+      const result = await generateSeoField(field, { entityType, entityId })
+      if (result.unavailable) {
+        toast.error('AI is not configured. Add an AI provider to enable suggestions.')
+        return
+      }
+      if (result.text) {
+        update({ [field]: result.text } as Partial<SeoFieldPayload>)
+        if (result.brandAlignment) {
+          setAiAlignments((prev) => ({ ...prev, [field]: result.brandAlignment }))
+        }
+        toast.success('AI suggestion applied — review before saving.')
+      } else {
+        toast.error('No suggestion was returned.')
+      }
+    } catch {
+      toast.error('AI request failed.')
+    } finally {
+      setAiBusy(null)
+    }
+  }
+
+  async function handleAiFix(field: AiField) {
+    const text = (form[field as keyof SeoFieldPayload] as string | undefined) ?? ''
+    if (!text.trim()) return
+    setAiFixBusy(field)
+    try {
+      const res = await fixBrandVoiceContent({
+        content: text,
+        channel: seoBrandChannel(field),
+      })
+      if (!res.ok || !res.result) {
+        toast.error(res.error ?? 'Could not fix copy for brand voice.')
+        return
+      }
+      update({ [field]: res.result.text } as Partial<SeoFieldPayload>)
+      setAiAlignments((prev) => ({ ...prev, [field]: res.result!.afterScore }))
+      toast.success('Copy adjusted to match brand voice.')
+    } finally {
+      setAiFixBusy(null)
+    }
+  }
+
+  function alignmentRow(field: AiField) {
+    const alignment = aiAlignments[field]
+    if (!alignment) return null
+    const fixing = aiFixBusy === field
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-2">
+        <BrandVoiceAlignmentBadge alignment={alignment} compact />
+        {alignment.score < 85 && (
+          <button
+            type="button"
+            onClick={() => void handleAiFix(field)}
+            disabled={fixing || aiBusy !== null}
+            className="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[11.5px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+          >
+            {fixing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+            ) : (
+              <Wand2 className="h-3.5 w-3.5" aria-hidden />
+            )}
+            Fix for brand voice
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  async function handleSave() {
+    setSaving(true)
+    const res = await updateSeoFields(entityType, entityId, form)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('SEO fields saved.')
+    onSaved?.()
+  }
+
+  const title = form.metaTitle || record?.title || 'Untitled'
+  const desc = form.metaDescription || 'No meta description set. Search engines may generate one.'
+  const url = record?.url ?? ''
+
+  function aiButton(field: AiField) {
+    return (
+      <button
+        type="button"
+        onClick={() => void handleAiGenerate(field)}
+        disabled={aiBusy !== null}
+        className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+      >
+        <Sparkles className={`h-3 w-3 ${aiBusy === field ? 'animate-pulse' : ''}`} aria-hidden />
+        {aiBusy === field ? 'Generating…' : 'AI Generate'}
+      </button>
+    )
+  }
+
+  return (
+    <>
+      <InspectorPaneHeader onClose={onClose} closeLabel="Close SEO editor">
+        <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">
+          {record?.title ?? 'Edit SEO'}
+        </div>
+        {url && <div className="mt-0.5 truncate text-[11.5px] text-[var(--muted)]">{url}</div>}
+      </InspectorPaneHeader>
+
+      <InspectorPaneBody>
+        {loading ? (
+          <div className="px-4 py-3.5">
+            <SeoLoading />
+          </div>
+        ) : error ? (
+          <div className="px-4 py-3.5">
+            <SeoErrorState message={error} />
+          </div>
+        ) : record ? (
+          <>
+            <InspectorPaneSection title="Google Preview">
+              <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+                <p className="truncate text-[11.5px] text-[var(--suc)]">{url}</p>
+                <p className="text-[15px] leading-snug text-[var(--acc)]">{title}</p>
+                <p className="line-clamp-2 text-[12px] text-[var(--sub)]">{desc}</p>
+              </div>
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Meta Tags">
+              <PaneField
+                label="Meta title"
+                hint={
+                  <span className="flex items-center gap-2">
+                    <CharCount value={form.metaTitle ?? ''} max={META_TITLE_MAX} />
+                    {aiButton('metaTitle')}
+                  </span>
+                }
+              >
+                <input
+                  className={inputCls}
+                  value={form.metaTitle ?? ''}
+                  onChange={(e) => update({ metaTitle: e.target.value })}
+                  placeholder="Page title for search results"
+                />
+              </PaneField>
+              <PaneField
+                label="Meta description"
+                hint={
+                  <span className="flex items-center gap-2">
+                    <CharCount value={form.metaDescription ?? ''} max={META_DESC_MAX} />
+                    {aiButton('metaDescription')}
+                  </span>
+                }
+              >
+                <textarea
+                  className={`${inputCls} min-h-20 resize-y`}
+                  value={form.metaDescription ?? ''}
+                  onChange={(e) => update({ metaDescription: e.target.value })}
+                  placeholder="Short summary shown under the title in search results"
+                />
+              </PaneField>
+              {alignmentRow('metaDescription')}
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Focus Keyword">
+              <PaneField label="Target keyword" hint={aiButton('focusKeyword')}>
+                <input
+                  className={inputCls}
+                  value={form.focusKeyword ?? ''}
+                  onChange={(e) => update({ focusKeyword: e.target.value })}
+                  placeholder="Primary keyword this page targets"
+                />
+              </PaneField>
+              <PaneField
+                label="Key takeaway"
+                hint={
+                  <span className="flex items-center gap-2">
+                    <CharCount value={form.keyTakeaway ?? ''} max={KEY_TAKEAWAY_MAX} />
+                    {aiButton('keyTakeaway')}
+                  </span>
+                }
+              >
+                <textarea
+                  className={`${inputCls} min-h-16 resize-y`}
+                  value={form.keyTakeaway ?? ''}
+                  onChange={(e) => update({ keyTakeaway: e.target.value })}
+                  placeholder="One or two sentences AI answer engines can quote — what is this page about?"
+                />
+              </PaneField>
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Open Graph" subtitle="Social sharing">
+              <PaneField label="OG title" hint={aiButton('ogTitle')}>
+                <input
+                  className={inputCls}
+                  value={form.ogTitle ?? ''}
+                  onChange={(e) => update({ ogTitle: e.target.value })}
+                  placeholder={form.metaTitle || 'Title when shared on social media'}
+                />
+              </PaneField>
+              <PaneField label="OG description" hint={aiButton('ogDescription')}>
+                <textarea
+                  className={`${inputCls} min-h-16 resize-y`}
+                  value={form.ogDescription ?? ''}
+                  onChange={(e) => update({ ogDescription: e.target.value })}
+                  placeholder={form.metaDescription || 'Description when shared on social media'}
+                />
+              </PaneField>
+              {alignmentRow('ogDescription')}
+              <div className="mt-3 overflow-hidden rounded-[7px] border border-[var(--bdr)]">
+                {record.ogImage ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={record.ogImage}
+                    alt={`Social preview for ${record.title}`}
+                    className="aspect-[1200/630] w-full bg-[var(--bg)] object-cover"
+                  />
+                ) : (
+                  <div className="flex aspect-[1200/630] w-full items-center justify-center bg-[var(--bg)] text-[12px] text-[var(--muted)]">
+                    No OG image set
+                  </div>
+                )}
+                <div className="p-2.5">
+                  <p className="truncate text-[10.5px] text-[var(--muted)] uppercase">
+                    {url.replace(/^https?:\/\//, '').split('/')[0]}
+                  </p>
+                  <p className="truncate text-[12.5px] font-medium text-[var(--txt)]">
+                    {form.ogTitle || title}
+                  </p>
+                  <p className="line-clamp-1 text-[12px] text-[var(--sub)]">
+                    {form.ogDescription || desc}
+                  </p>
+                </div>
+              </div>
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Technical SEO">
+              <PaneField label="Canonical URL">
+                <input
+                  className={inputCls}
+                  value={form.canonicalUrl ?? ''}
+                  onChange={(e) => update({ canonicalUrl: e.target.value })}
+                  placeholder={url || 'https://example.com/page'}
+                />
+              </PaneField>
+              {!form.canonicalUrl?.trim() && url ? (
+                <p className="mb-3 text-[11px] text-[var(--muted)]">
+                  Auto-canonical: {record.canonicalUrl ?? url}
+                </p>
+              ) : null}
+              <PaneField label="Schema type">
+                <select
+                  className={inputCls}
+                  value={form.structuredDataType ?? 'WebPage'}
+                  onChange={(e) => update({ structuredDataType: e.target.value })}
+                >
+                  {SEO_SCHEMA_TYPES.map((t) => (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  ))}
+                </select>
+              </PaneField>
+              <PaneToggleRow
+                label="No-index"
+                hint="Hide this page from search engines"
+                checked={!!form.noindex}
+                onCheckedChange={(v) => update({ noindex: v })}
+              />
+              <PaneToggleRow
+                label="No-follow"
+                hint="Tell crawlers not to follow links on this page"
+                checked={!!form.nofollow}
+                onCheckedChange={(v) => update({ nofollow: v })}
+              />
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="AI Discovery" subtitle="llms.txt">
+              <p className="mb-3 text-[11px] text-[var(--muted)]">
+                Controls how this page appears in the curated <code>llms.txt</code> guide that AI
+                agents read. It does not affect search ranking.
+              </p>
+              <PaneField label="Include in llms.txt">
+                <select
+                  className={inputCls}
+                  value={form.llmsInclude ?? 'AUTO'}
+                  onChange={(e) => update({ llmsInclude: e.target.value as LlmsInclude })}
+                >
+                  <option value="AUTO">Auto — include when eligible</option>
+                  <option value="ALWAYS">Always — pin it in</option>
+                  <option value="NEVER">Never — exclude</option>
+                </select>
+              </PaneField>
+              <PaneField
+                label="Agent description"
+                hint={<CharCount value={form.llmsDescription ?? ''} max={LLMS_DESC_MAX} />}
+              >
+                <textarea
+                  className={`${inputCls} min-h-16 resize-y`}
+                  value={form.llmsDescription ?? ''}
+                  onChange={(e) => update({ llmsDescription: e.target.value })}
+                  placeholder={
+                    form.keyTakeaway ||
+                    form.metaDescription ||
+                    'One line for an AI agent — what this page covers and why it matters.'
+                  }
+                />
+              </PaneField>
+              <PaneField label="Section">
+                <input
+                  className={inputCls}
+                  value={form.llmsSection ?? ''}
+                  onChange={(e) => update({ llmsSection: e.target.value })}
+                  placeholder="Defaults to the content type"
+                />
+              </PaneField>
+              <PaneToggleRow
+                label="Optional"
+                hint="Group under “Optional” — agents skip these first when context is tight"
+                checked={!!form.llmsOptional}
+                onCheckedChange={(v) => update({ llmsOptional: v })}
+              />
+            </InspectorPaneSection>
+
+            <InspectorPaneSection>
+              {(() => {
+                const meta = gradeMeta(record.seoGrade)
+                return (
+                  <div
+                    className={`flex items-center gap-2 rounded-[7px] px-3 py-2 text-[12.5px] ${meta.bg} ${meta.text}`}
+                  >
+                    <Check className="h-4 w-4 shrink-0" aria-hidden />
+                    <span>
+                      Current SEO score: <span className="font-medium">{record.seoScore}</span> (
+                      {meta.label})
+                    </span>
+                  </div>
+                )
+              })()}
+            </InspectorPaneSection>
+          </>
+        ) : null}
+      </InspectorPaneBody>
+
+      <InspectorPaneFooter>
+        <button
+          type="button"
+          onClick={() => void handleSave()}
+          disabled={saving || loading || !!error}
+          className="w-full rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {saving ? 'Saving…' : 'Save Changes'}
+        </button>
+      </InspectorPaneFooter>
+    </>
+  )
+}

package/src/hooks/useIdleLogout.ts

@@ -0,0 +1,77 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+/** How often the idle checker wakes up to compare against the deadline. */
+const CHECK_INTERVAL_MS = 30_000
+
+/**
+ * Signs the user out after `timeoutMs` of no user activity, when enabled by
+ * the Settings → Security "Idle auto-logout" policy.
+ *
+ * Deliberately lightweight: activity events only stamp a ref (no state, no
+ * re-renders), and a single coarse interval compares the last-activity stamp
+ * against the deadline. Returning to a hidden tab re-checks immediately via
+ * `visibilitychange`, so a tab left overnight logs out as soon as it's seen
+ * (or at the next interval tick) rather than staying signed in.
+ *
+ * All listeners and the interval are torn down on unmount or when disabled.
+ */
+export function useIdleLogout(options: {
+  enabled: boolean
+  timeoutMs: number
+  onIdle: () => void
+}): void {
+  const { enabled, timeoutMs } = options
+  // Keep the latest callback without re-subscribing listeners on every render.
+  const onIdleRef = useRef(options.onIdle)
+  onIdleRef.current = options.onIdle
+
+  useEffect(() => {
+    if (!enabled || timeoutMs <= 0 || typeof window === 'undefined') return
+
+    let lastActivity = Date.now()
+    let fired = false
+
+    const markActivity = () => {
+      lastActivity = Date.now()
+    }
+
+    const checkIdle = () => {
+      if (fired) return
+      if (Date.now() - lastActivity >= timeoutMs) {
+        fired = true
+        onIdleRef.current()
+      }
+    }
+
+    // Passive listeners — activity stamping must never block scrolling/typing.
+    const activityEvents = [
+      'pointermove',
+      'pointerdown',
+      'keydown',
+      'scroll',
+      'touchstart',
+    ] as const
+    for (const event of activityEvents) {
+      window.addEventListener(event, markActivity, { passive: true })
+    }
+
+    // A tab becoming visible again is NOT user activity — check whether the
+    // deadline passed while it was hidden and log out immediately if so.
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') checkIdle()
+    }
+    document.addEventListener('visibilitychange', onVisibility)
+
+    const interval = window.setInterval(checkIdle, Math.min(CHECK_INTERVAL_MS, timeoutMs))
+
+    return () => {
+      for (const event of activityEvents) {
+        window.removeEventListener(event, markActivity)
+      }
+      document.removeEventListener('visibilitychange', onVisibility)
+      window.clearInterval(interval)
+    }
+  }, [enabled, timeoutMs])
+}

package/src/lib/api.ts

@@ -65,7 +65,7 @@ function appendLocaleParam(endpoint: string): string {
 export async function cmsApi<T = unknown>(
   endpoint: string,
   options: RequestInit = {},
-): Promise<{ data?: T; error?: string; status: number }> {
+): Promise<{ data?: T; error?: string; code?: string; status: number }> {
   const url = `${basePath}${appendLocaleParam(endpoint)}`
   const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
 
@@ -96,7 +96,13 @@ export async function cmsApi<T = unknown>(
     const json = await res.json().catch(() => ({}))
 
     if (!res.ok) {
-      return { error: json.error || `Request failed (${res.status})`, status: res.status }
+      return {
+        error: json.error || `Request failed (${res.status})`,
+        // Machine-readable error discriminator (e.g. IP_LOCKOUT_RISK) set by
+        // guard responses so callers can branch without parsing the message.
+        code: typeof json.code === 'string' ? json.code : undefined,
+        status: res.status,
+      }
     }
 
     return { data: json.data ?? json, status: res.status }