@prenta/admin 0.92.0

package/src/views/settings/WebhooksTab.tsx

@@ -0,0 +1,353 @@
+'use client'
+
+/**
+ * Settings → Webhooks (#677): configure publish-lifecycle 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 }
+}
+
+/**
+ * Full publish lifecycle: purge/rebuild receivers need `document.unpublished`
+ * (evict the now-offline page), `document.updated` (live-page content edits —
+ * receivers skip draft edits via the payload `status`), and
+ * `document.deleted` in addition to `document.published`.
+ */
+const PUBLISH_EVENTS = [
+  'document.published',
+  'document.unpublished',
+  'document.updated',
+  'document.deleted',
+] 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 publish-lifecycle notifications: published, unpublished, updated, deleted (HMAC + timestamp skew). Consumers must verify X-Prenta-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 the publish lifecycle (published, unpublished,
+                updated, deleted). Payload is HMAC-signed with <code>X-Prenta-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>
+  )
+}

package/src/views/settings/brand-voice/BrandVoiceAlignmentPanel.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+import type { BrandAlignmentScoreResult } from '@prenta/core/brand-voice'
+import { BRAND_VOICE_CHANNEL_PRESETS } from '@prenta/core/brand-voice'
+import { Loader2, Wand2 } from 'lucide-react'
+import { useId, useState } from 'react'
+import { toast } from 'sonner'
+import { fixBrandVoiceContent } from '../../../lib/brand-voice-client.js'
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+const TEXTAREA_CLASS = `${INPUT_CLASS} min-h-[120px] resize-y`
+const LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground'
+
+function scoreTone(score: number): string {
+  if (score >= 85) return 'text-success'
+  if (score >= 65) return 'text-warning'
+  return 'text-destructive'
+}
+
+export function BrandVoiceAlignmentPanel({
+  disabled,
+  onScore,
+}: {
+  disabled: boolean
+  onScore: (input: { content: string; channel?: string }) => Promise<{
+    ok: boolean
+    result?: BrandAlignmentScoreResult
+    error?: string
+  }>
+}) {
+  const contentId = useId()
+  const channelId = useId()
+  const [content, setContent] = useState('')
+  const [channel, setChannel] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [fixing, setFixing] = useState(false)
+  const [result, setResult] = useState<BrandAlignmentScoreResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function runScore() {
+    if (!content.trim()) return
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await onScore({
+        content: content.trim(),
+        channel: channel || undefined,
+      })
+      if (!res.ok || !res.result) {
+        setResult(null)
+        setError(res.error ?? 'Could not score this copy.')
+        return
+      }
+      setResult(res.result)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function runFix() {
+    if (!content.trim()) return
+    setFixing(true)
+    setError(null)
+    try {
+      const res = await fixBrandVoiceContent({
+        content: content.trim(),
+        channel: channel || undefined,
+      })
+      if (!res.ok || !res.result) {
+        setError(res.error ?? 'Could not fix this copy.')
+        return
+      }
+      setContent(res.result.text)
+      setResult(res.result.afterScore)
+      toast.success(
+        res.result.usedAi
+          ? 'Copy revised to match brand voice.'
+          : 'Applied brand voice rule fixes.',
+      )
+    } finally {
+      setFixing(false)
+    }
+  }
+
+  return (
+    <div className="border-border space-y-4 rounded-md border border-dashed p-4">
+      <div>
+        <h4 className="text-foreground text-base font-medium">Check alignment</h4>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Paste draft copy to score it against your vocabulary rules, mechanics, and channel limits.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-[1fr_220px]">
+        <div>
+          <label htmlFor={contentId} className={LABEL_CLASS}>
+            Draft copy
+          </label>
+          <textarea
+            id={contentId}
+            value={content}
+            disabled={disabled || loading}
+            placeholder="Paste a headline, meta description, or paragraph to score."
+            onChange={(e) => setContent(e.target.value)}
+            className={TEXTAREA_CLASS}
+          />
+        </div>
+        <div>
+          <label htmlFor={channelId} className={LABEL_CLASS}>
+            Channel (optional)
+          </label>
+          <select
+            id={channelId}
+            value={channel}
+            disabled={disabled || loading}
+            onChange={(e) => setChannel(e.target.value)}
+            className={INPUT_CLASS}
+          >
+            <option value="">General</option>
+            {BRAND_VOICE_CHANNEL_PRESETS.map((preset) => (
+              <option key={preset.id} value={preset.id}>
+                {preset.label}
+              </option>
+            ))}
+          </select>
+          <button
+            type="button"
+            onClick={runScore}
+            disabled={disabled || loading || !content.trim()}
+            className="bg-primary text-primary-foreground mt-3 inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {loading && <Loader2 size={16} className="animate-spin" aria-hidden="true" />}
+            Score copy
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive rounded-md border p-3 text-sm"
+        >
+          {error}
+        </div>
+      )}
+
+      {result && (
+        <div className="space-y-3" aria-live="polite">
+          <div className="flex flex-wrap items-center gap-3">
+            <p className={`text-2xl font-medium ${scoreTone(result.score)}`}>{result.score}/100</p>
+            <p className="text-muted-foreground text-sm">
+              {result.channel ? `Scored for ${result.channel.replace(/_/g, ' ')}` : 'General score'}
+            </p>
+            {result.score < 85 && (
+              <button
+                type="button"
+                onClick={runFix}
+                disabled={disabled || fixing || loading}
+                className="border-border bg-card text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {fixing ? (
+                  <Loader2 size={16} className="animate-spin" aria-hidden="true" />
+                ) : (
+                  <Wand2 size={16} aria-hidden="true" />
+                )}
+                Fix to match brand voice
+              </button>
+            )}
+          </div>
+
+          {result.issues.length > 0 && (
+            <ul className="space-y-2">
+              {result.issues.map((issue) => (
+                <li
+                  key={issue.id}
+                  className="border-border bg-muted/30 rounded-md border px-3 py-2 text-sm"
+                >
+                  <p className="text-foreground">{issue.message}</p>
+                  {issue.suggestion && (
+                    <p className="text-muted-foreground mt-1">{issue.suggestion}</p>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {result.dimensions.length > 0 && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              {result.dimensions.map((dimension) => (
+                <div key={dimension.name} className="border-border rounded-md border px-3 py-2">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-foreground text-sm font-medium">{dimension.name}</p>
+                    <p className={`text-sm ${scoreTone(dimension.score)}`}>{dimension.score}</p>
+                  </div>
+                  <p className="text-muted-foreground mt-1 text-sm">{dimension.feedback}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}