@actuate-media/cms-admin 0.80.1 → 0.82.0

package/src/components/PublishSyncCard.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+/**
+ * Shows CMS Published vs publish-webhook delivery for a document (#677).
+ * Never claims the public host is "live" — only webhook notify state.
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { AlertTriangle, Info, RefreshCw, RotateCcw } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+
+export interface PublishSyncStatus {
+  documentId: string
+  cmsStatus: string
+  publishedAt: string | null
+  publishWebhookConfigured: boolean
+  webhookDelivery: {
+    state: 'not_configured' | 'no_delivery' | 'pending' | 'retrying' | 'delivered' | 'failed'
+    label: string
+    deliveries: Array<{
+      id: string
+      status: string
+      endpointName: string | null
+      endpointUrl: string
+      attempts: number
+      maxAttempts: number
+    }>
+  }
+  publicHostNote: string
+}
+
+export interface PublishSyncCardProps {
+  documentId: string
+  /** When status flips to PUBLISHED, refresh sync state. */
+  docStatus: string
+  onNavigate?: (path: string) => void
+}
+
+function stateClass(state: PublishSyncStatus['webhookDelivery']['state']): string {
+  switch (state) {
+    case 'failed':
+      return 'border-destructive/30 bg-destructive/10 text-destructive'
+    case 'retrying':
+    case 'pending':
+      return 'border-border bg-accent text-accent-foreground'
+    case 'delivered':
+      return 'border-border bg-muted text-foreground'
+    default:
+      return 'border-border bg-muted text-muted-foreground'
+  }
+}
+
+export function PublishSyncCard({ documentId, docStatus, onNavigate }: PublishSyncCardProps) {
+  const [status, setStatus] = useState<PublishSyncStatus | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    if (!documentId || docStatus !== 'PUBLISHED') {
+      setStatus(null)
+      return
+    }
+    setLoading(true)
+    const res = await cmsApi<PublishSyncStatus>(
+      `/documents/${encodeURIComponent(documentId)}/publish-sync`,
+    )
+    setLoading(false)
+    if (res.error) {
+      setStatus(null)
+      return
+    }
+    setStatus(res.data ?? null)
+  }, [documentId, docStatus])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  if (docStatus !== 'PUBLISHED') return null
+
+  async function retry(deliveryId: string) {
+    setRetryingId(deliveryId)
+    const res = await cmsApi<{ status: string; error?: string }>(
+      `/webhooks/deliveries/${encodeURIComponent(deliveryId)}/retry`,
+      { method: 'POST' },
+    )
+    setRetryingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.status === 'success') {
+      toast.success('Publish webhook delivered')
+    } else {
+      toast.error(res.data?.error ?? 'Webhook delivery still failing')
+    }
+    void load()
+  }
+
+  const state = status?.webhookDelivery.state
+  const failed = status?.webhookDelivery.deliveries.filter(
+    (d) => d.status === 'failed' || d.status === 'retrying',
+  )
+
+  return (
+    <div className="border-border bg-card rounded-lg border p-4">
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <h3 className="text-foreground font-medium">Public host sync</h3>
+        <button
+          type="button"
+          onClick={() => void load()}
+          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs"
+          aria-label="Refresh publish sync status"
+        >
+          <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+          Refresh
+        </button>
+      </div>
+
+      <p className="text-foreground mb-2 text-sm">
+        <span className="font-medium">CMS:</span> Published
+      </p>
+
+      {status ? (
+        <>
+          <div
+            className={`mb-2 rounded-md border px-3 py-2 text-sm ${stateClass(status.webhookDelivery.state)}`}
+            role="status"
+          >
+            {state === 'failed' || state === 'retrying' ? (
+              <AlertTriangle size={16} className="mb-1 inline" aria-hidden />
+            ) : (
+              <Info size={16} className="mb-1 inline" aria-hidden />
+            )}{' '}
+            {status.webhookDelivery.label}
+          </div>
+          <p className="text-muted-foreground text-xs">{status.publicHostNote}</p>
+          {failed && failed.length > 0 && (
+            <ul className="mt-3 space-y-2">
+              {failed.map((d) => (
+                <li
+                  key={d.id}
+                  className="text-foreground flex items-center justify-between gap-2 text-xs"
+                >
+                  <span className="truncate">
+                    {d.endpointName || d.endpointUrl} · {d.status} ({d.attempts}/{d.maxAttempts})
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => void retry(d.id)}
+                    disabled={retryingId === d.id}
+                    className="border-border hover:bg-accent inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 disabled:opacity-50"
+                  >
+                    <RotateCcw size={12} />
+                    Retry
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          {onNavigate && (
+            <button
+              type="button"
+              onClick={() => onNavigate('/settings?tab=webhooks')}
+              className="text-primary mt-3 text-xs font-medium hover:underline"
+            >
+              Manage publish webhooks
+            </button>
+          )}
+        </>
+      ) : (
+        <p className="text-muted-foreground text-sm">
+          {loading ? 'Checking webhook delivery…' : 'Unable to load sync status.'}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/fields/NavBuilderField.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { AlertTriangle, Plus, Trash2 } from 'lucide-react'
 import { Button } from '../components/ui/Button.js'
+import { cmsApi } from '../lib/api.js'
 
 interface NavNode {
   id: string
@@ -17,44 +19,135 @@ export interface NavBuilderFieldProps {
   helpText?: string
 }
 
+function coerceNodes(raw: unknown): NavNode[] {
+  if (!Array.isArray(raw)) return []
+  return raw
+    .filter((n): n is Record<string, unknown> => typeof n === 'object' && n !== null)
+    .map((n) => ({
+      id: typeof n.id === 'string' && n.id ? n.id : crypto.randomUUID(),
+      label: typeof n.label === 'string' ? n.label : 'New Item',
+      url: typeof n.url === 'string' ? n.url : '/',
+      children: coerceNodes(n.children),
+    }))
+}
+
+function updateNode(nodes: NavNode[], id: string, patch: Partial<NavNode>): NavNode[] {
+  return nodes.map((n) => {
+    if (n.id === id) return { ...n, ...patch, children: n.children }
+    return { ...n, children: updateNode(n.children, id, patch) }
+  })
+}
+
+function removeNode(nodes: NavNode[], id: string): NavNode[] {
+  return nodes
+    .filter((n) => n.id !== id)
+    .map((n) => ({ ...n, children: removeNode(n.children, id) }))
+}
+
+function addChild(nodes: NavNode[], parentId: string): NavNode[] {
+  return nodes.map((n) => {
+    if (n.id === parentId) {
+      return {
+        ...n,
+        children: [
+          ...n.children,
+          { id: crypto.randomUUID(), label: 'New Item', url: '/', children: [] },
+        ],
+      }
+    }
+    return { ...n, children: addChild(n.children, parentId) }
+  })
+}
+
 export function NavBuilderField({ label, value = [], onChange, helpText }: NavBuilderFieldProps) {
-  function addItem() {
-    onChange([...value, { id: crypto.randomUUID(), label: 'New Item', url: '/', children: [] }])
-  }
+  const nodes = coerceNodes(value)
+  const [warnings, setWarnings] = useState<string[]>([])
+  const [checking, setChecking] = useState(false)
+
+  const treeKey = JSON.stringify(nodes)
 
-  function removeItem(id: string) {
-    onChange(value.filter((n) => n.id !== id))
+  useEffect(() => {
+    let cancelled = false
+    const timer = window.setTimeout(() => {
+      setChecking(true)
+      void cmsApi<{ warnings?: string[] }>('/navigations/validate-targets', {
+        method: 'POST',
+        body: treeKey
+          ? JSON.stringify({ items: JSON.parse(treeKey) as NavNode[] })
+          : '{"items":[]}',
+      }).then((res) => {
+        if (cancelled) return
+        setWarnings(Array.isArray(res.data?.warnings) ? res.data.warnings : [])
+        setChecking(false)
+      })
+    }, 400)
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+    }
+  }, [treeKey])
+
+  function addItem() {
+    onChange([...nodes, { id: crypto.randomUUID(), label: 'New Item', url: '/', children: [] }])
   }
 
   function renderNode(node: NavNode, depth: number) {
+    const itemWarnings = warnings.filter(
+      (w) => w.includes(`"${node.label}"`) || w.includes(node.url),
+    )
     return (
       <div
         key={node.id}
-        className="rounded-md border border-[var(--border)] bg-[var(--card)] p-3"
+        className="border-border bg-card rounded-md border p-3"
         style={{ marginLeft: depth * 24 }}
       >
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm">
-            <svg
-              className="h-4 w-4 text-[var(--muted-foreground)]"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
+        <div className="flex flex-wrap items-end gap-2">
+          <label className="min-w-[8rem] flex-1">
+            <span className="text-muted-foreground mb-1 block text-sm">Label</span>
+            <input
+              type="text"
+              value={node.label}
+              onChange={(e) => onChange(updateNode(nodes, node.id, { label: e.target.value }))}
+              className="border-border bg-input-background text-foreground w-full rounded-md border px-2 py-1.5 text-sm"
+            />
+          </label>
+          <label className="min-w-[10rem] flex-[1.2]">
+            <span className="text-muted-foreground mb-1 block text-sm">URL</span>
+            <input
+              type="text"
+              value={node.url}
+              onChange={(e) => onChange(updateNode(nodes, node.id, { url: e.target.value }))}
+              className="border-border bg-input-background text-foreground w-full rounded-md border px-2 py-1.5 font-mono text-sm"
+              aria-invalid={itemWarnings.length > 0}
+            />
+          </label>
+          <div className="flex gap-1 pb-0.5">
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => onChange(addChild(nodes, node.id))}
+              aria-label={`Add child under ${node.label}`}
+            >
+              <Plus size={16} />
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => onChange(removeNode(nodes, node.id))}
+              aria-label={`Remove ${node.label}`}
             >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-            <span className="font-medium">{node.label}</span>
-            <span className="text-xs text-[var(--muted-foreground)]">{node.url}</span>
+              <Trash2 size={16} />
+            </Button>
           </div>
-          <button
-            type="button"
-            onClick={() => removeItem(node.id)}
-            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--destructive)]"
-          >
-            Remove
-          </button>
         </div>
+        {itemWarnings.length > 0 && (
+          <p className="text-destructive mt-2 flex items-start gap-1.5 text-sm" role="status">
+            <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden />
+            <span>No published page matches this internal URL.</span>
+          </p>
+        )}
         {node.children.length > 0 && (
           <div className="mt-2 space-y-2">
             {node.children.map((child) => renderNode(child, depth + 1))}
@@ -66,12 +159,30 @@ export function NavBuilderField({ label, value = [], onChange, helpText }: NavBu
 
   return (
     <div>
-      <label className="mb-2 block text-sm font-medium">{label}</label>
-      <div className="space-y-2">{value.map((node) => renderNode(node, 0))}</div>
+      <label className="text-foreground mb-2 block text-sm font-medium">{label}</label>
+      {warnings.length > 0 && (
+        <div
+          className="border-border bg-muted text-foreground mb-3 rounded-md border p-3 text-sm"
+          role="status"
+          aria-live="polite"
+        >
+          <p className="mb-1 flex items-center gap-1.5 font-medium">
+            <AlertTriangle size={16} aria-hidden />
+            {warnings.length} navigation link{warnings.length === 1 ? '' : 's'} may 404
+            {checking ? ' (checking…)' : ''}
+          </p>
+          <ul className="text-muted-foreground list-inside list-disc">
+            {warnings.map((w) => (
+              <li key={w}>{w}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <div className="space-y-2">{nodes.map((node) => renderNode(node, 0))}</div>
       <Button variant="secondary" size="sm" onClick={addItem} className="mt-2">
         Add Nav Item
       </Button>
-      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
+      {helpText && <p className="text-muted-foreground mt-1 text-xs">{helpText}</p>}
     </div>
   )
 }

package/src/views/DocumentEdit.tsx

@@ -26,6 +26,7 @@ import { SEOPanel } from '../components/SEOPanel.js'
 import type { SEOData } from '../components/SEOPanel.js'
 import { SchedulePublishDialog } from '../components/SchedulePublishDialog.js'
 import { SharePreviewLinkDialog } from '../components/SharePreviewLinkDialog.js'
+import { PublishSyncCard } from '../components/PublishSyncCard.js'
 import { cmsApi } from '../lib/api.js'
 
 export interface DocumentEditProps {
@@ -226,7 +227,7 @@ export function DocumentEdit({
     if (res.error) {
       toast.error(res.error)
     } else {
-      toast.success('Document published')
+      toast.success('Published in CMS')
       setDocStatus('PUBLISHED')
       setInitialValues(values)
       setInitialSeoData(seoData)
@@ -386,6 +387,13 @@ export function DocumentEdit({
               </div>
 
               <div className="space-y-6">
+                {!isNew && documentId && (
+                  <PublishSyncCard
+                    documentId={documentId}
+                    docStatus={docStatus}
+                    onNavigate={onNavigate}
+                  />
+                )}
                 <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
                   <h3 className="mb-4 font-medium">Status</h3>
                   <div className="space-y-3">

package/src/views/Settings.tsx

@@ -25,6 +25,7 @@ import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { SettingsCard } from './settings/components.js'
 import { UpdatesTab } from './settings/UpdatesTab.js'
+import { WebhooksTab } from './settings/WebhooksTab.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
@@ -93,6 +94,7 @@ export function Settings({
         'api-keys',
         'seo',
         'email',
+        'webhooks',
         'ai',
         'updates',
       ] as const,
@@ -228,6 +230,9 @@ export function Settings({
               Email
             </span>
           </Tabs.Trigger>
+          <Tabs.Trigger value="webhooks" className={tabTriggerClass}>
+            Webhooks
+          </Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Bot className="h-4 w-4" />
@@ -329,6 +334,10 @@ export function Settings({
           <EmailSettingsTab role={session?.user?.role} />
         </Tabs.Content>
 
+        <Tabs.Content value="webhooks" className="space-y-4">
+          <WebhooksTab role={session?.user?.role} />
+        </Tabs.Content>
+
         <Tabs.Content value="ai" className="space-y-4">
           <AISettingsTab role={session?.user?.role} config={config} />
         </Tabs.Content>