@actuate-media/cms-admin 0.81.0 → 0.83.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/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>

package/src/views/settings/WebhooksTab.tsx

@@ -0,0 +1,342 @@
+'use client'
+
+/**
+ * Settings → Webhooks (#677): configure document.published endpoints and
+ * retry failed deliveries. Delivery success means "notified", not "live".
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { AlertTriangle, Plus, RefreshCw, RotateCcw, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import { Button } from '../../components/ui/Button.js'
+import { SettingsCard } from './components.js'
+
+interface WebhookEndpoint {
+  id: string
+  name: string | null
+  url: string
+  events: string[]
+  active: boolean
+  /** Present only on create / rotate responses. */
+  secret?: string | null
+}
+
+interface DeliveryRow {
+  id: string
+  event: string
+  status: string
+  attempts: number
+  maxAttempts: number
+  responseStatus: number | null
+  createdAt: string
+  endpoint?: { id: string; name: string | null; url: string }
+}
+
+const PUBLISH_EVENTS = ['document.published'] as const
+
+export function WebhooksTab({ role }: { role?: string }) {
+  const canEdit = role === 'ADMIN'
+  const [endpoints, setEndpoints] = useState<WebhookEndpoint[]>([])
+  const [deliveries, setDeliveries] = useState<DeliveryRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [url, setUrl] = useState('')
+  const [name, setName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+  const [revealedSecret, setRevealedSecret] = useState<{ id: string; secret: string } | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    const [epRes, delRes] = await Promise.all([
+      cmsApi<WebhookEndpoint[]>('/webhooks'),
+      cmsApi<{ docs: DeliveryRow[] }>('/webhooks/deliveries?status=failed,retrying&pageSize=25'),
+    ])
+    setLoading(false)
+    if (epRes.error) {
+      setError(epRes.error)
+      return
+    }
+    setEndpoints(Array.isArray(epRes.data) ? epRes.data : [])
+    const docs = delRes.data?.docs
+    setDeliveries(Array.isArray(docs) ? docs : [])
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function createEndpoint() {
+    if (!url.trim()) {
+      toast.error('Webhook URL is required')
+      return
+    }
+    setSaving(true)
+    const res = await cmsApi<WebhookEndpoint>('/webhooks', {
+      method: 'POST',
+      body: JSON.stringify({
+        url: url.trim(),
+        name: name.trim() || 'Publish / rebuild',
+        events: [...PUBLISH_EVENTS],
+        active: true,
+      }),
+    })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Publish webhook created — copy the signing secret now')
+    if (res.data?.id && typeof res.data.secret === 'string' && res.data.secret) {
+      setRevealedSecret({ id: res.data.id, secret: res.data.secret })
+    }
+    setUrl('')
+    setName('')
+    void load()
+  }
+
+  async function removeEndpoint(id: string) {
+    const res = await cmsApi(`/webhooks/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Webhook removed')
+    if (revealedSecret?.id === id) setRevealedSecret(null)
+    void load()
+  }
+
+  async function rotateSecret(id: string) {
+    const res = await cmsApi<WebhookEndpoint>(`/webhooks/${encodeURIComponent(id)}/rotate-secret`, {
+      method: 'POST',
+    })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Secret rotated — previous secret remains valid for 24 hours')
+    if (res.data?.id && typeof res.data.secret === 'string' && res.data.secret) {
+      setRevealedSecret({ id: res.data.id, secret: res.data.secret })
+    }
+    void load()
+  }
+
+  async function retryDelivery(id: string) {
+    setRetryingId(id)
+    const res = await cmsApi<{ status: string; error?: string }>(
+      `/webhooks/deliveries/${encodeURIComponent(id)}/retry`,
+      { method: 'POST' },
+    )
+    setRetryingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.status === 'success') {
+      toast.success('Webhook delivered')
+    } else {
+      toast.error(res.data?.error ?? 'Delivery still failing')
+    }
+    void load()
+  }
+
+  if (loading) {
+    return <p className="text-muted-foreground text-sm">Loading webhooks…</p>
+  }
+
+  if (error) {
+    return (
+      <div
+        role="alert"
+        className="border-destructive/30 bg-destructive/10 text-destructive rounded-lg border p-3 text-sm"
+      >
+        {error}
+        <button type="button" className="ml-3 underline" onClick={() => void load()}>
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <SettingsCard
+        title="Publish webhooks"
+        description="Signed document.published notifications (HMAC + timestamp skew). Consumers must verify X-Actuate-Signature and reject replays outside the skew window before rebuild/purge. A 2xx response means notified — not that the public page is live."
+      >
+        <div className="space-y-3">
+          {revealedSecret && (
+            <div className="border-border bg-muted rounded-md border p-3 text-sm" role="status">
+              <p className="text-foreground mb-1 font-medium">
+                Signing secret (shown once — copy now)
+              </p>
+              <code className="text-foreground block font-mono text-xs break-all">
+                {revealedSecret.secret}
+              </code>
+              <div className="mt-2 flex gap-2">
+                <button
+                  type="button"
+                  className="text-primary text-xs font-medium hover:underline"
+                  onClick={() => {
+                    void navigator.clipboard.writeText(revealedSecret.secret)
+                    toast.success('Secret copied')
+                  }}
+                >
+                  Copy
+                </button>
+                <button
+                  type="button"
+                  className="text-muted-foreground text-xs hover:underline"
+                  onClick={() => setRevealedSecret(null)}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </div>
+          )}
+          {endpoints.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No webhooks yet. Without one, editors only see “Published in CMS” and the public host
+              may lag behind TTL caches.
+            </p>
+          ) : (
+            <ul className="space-y-2" aria-label="Webhook endpoints">
+              {endpoints.map((ep) => (
+                <li
+                  key={ep.id}
+                  className="border-border flex items-start justify-between gap-3 rounded-md border p-3"
+                >
+                  <div className="min-w-0">
+                    <p className="text-foreground truncate text-sm font-medium">
+                      {ep.name || 'Untitled webhook'}
+                      {!ep.active && (
+                        <span className="text-muted-foreground ml-2 text-xs">(inactive)</span>
+                      )}
+                    </p>
+                    <p className="text-muted-foreground truncate font-mono text-xs">{ep.url}</p>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Events: {(Array.isArray(ep.events) ? ep.events : []).join(', ') || '—'}
+                    </p>
+                  </div>
+                  {canEdit && (
+                    <div className="flex shrink-0 flex-col gap-1">
+                      <button
+                        type="button"
+                        onClick={() => void rotateSecret(ep.id)}
+                        className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs"
+                        aria-label={`Rotate secret for ${ep.name || ep.url}`}
+                      >
+                        <RefreshCw size={14} />
+                        Rotate secret
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => void removeEndpoint(ep.id)}
+                        className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs"
+                        aria-label={`Delete ${ep.name || ep.url}`}
+                      >
+                        <Trash2 size={14} />
+                        Delete
+                      </button>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {canEdit && (
+            <div className="border-border mt-4 space-y-2 border-t pt-4">
+              <label className="block text-sm">
+                <span className="text-muted-foreground mb-1 block">Name</span>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Astro rebuild"
+                  className="border-border bg-input-background w-full rounded-md border px-3 py-2 text-sm"
+                />
+              </label>
+              <label className="block text-sm">
+                <span className="text-muted-foreground mb-1 block">HTTPS URL</span>
+                <input
+                  type="url"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="https://api.vercel.com/.../deployments"
+                  className="border-border bg-input-background w-full rounded-md border px-3 py-2 font-mono text-sm"
+                />
+              </label>
+              <p className="text-muted-foreground text-xs">
+                Creates an active endpoint for <code>document.published</code> only. Payload is
+                HMAC-signed with <code>X-Actuate-Signature</code>.
+              </p>
+              <Button
+                type="button"
+                variant="primary"
+                size="sm"
+                onClick={() => void createEndpoint()}
+                loading={saving}
+              >
+                <Plus size={16} />
+                Add publish webhook
+              </Button>
+            </div>
+          )}
+        </div>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Failed deliveries"
+        description="Retry outbound webhook failures. Automatic retries also run on the cleanup cron."
+      >
+        <div className="mb-3 flex justify-end">
+          <button
+            type="button"
+            onClick={() => void load()}
+            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+          >
+            <RefreshCw size={14} />
+            Refresh
+          </button>
+        </div>
+        {deliveries.length === 0 ? (
+          <p className="text-muted-foreground text-sm">No failed or retrying deliveries.</p>
+        ) : (
+          <ul className="space-y-2" aria-label="Failed webhook deliveries">
+            {deliveries.map((d) => (
+              <li
+                key={d.id}
+                className="border-border flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
+              >
+                <div className="min-w-0">
+                  <p className="text-foreground flex items-center gap-1.5 font-medium">
+                    <AlertTriangle size={14} className="text-destructive shrink-0" aria-hidden />
+                    {d.event} · {d.status}
+                  </p>
+                  <p className="text-muted-foreground truncate text-xs">
+                    {d.endpoint?.name || d.endpoint?.url || d.endpoint?.id} · attempt {d.attempts}/
+                    {d.maxAttempts}
+                    {d.responseStatus != null ? ` · HTTP ${d.responseStatus}` : ''}
+                  </p>
+                </div>
+                {canEdit && (
+                  <button
+                    type="button"
+                    onClick={() => void retryDelivery(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 text-xs disabled:opacity-50"
+                  >
+                    <RotateCcw size={12} />
+                    Retry
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </SettingsCard>
+    </div>
+  )
+}