feat(engagement): the template editor, the trigger catalog and the send log (engagement Phase 5b)

Phase 5a gave templates a table, a renderer and nine seeded rows; nothing could
change one. This is the screen that lets an operator change one without being able
to break the mail the system depends on — plus the two screens Q4 promised Phase 5:
Triggers (read-only, from the registries) and the Send Log, which closes G15.

The shape follows from one fact: a mail body is rendered by the SERVER, so the
preview is too, and framed rather than redrawn in React. A client-side renderer
would be a second implementation of the one artifact that matters, agreeing with
the send path on the day it was written and drifting from the first Outlook fix on.

Settled with the org lead before any code: a shipped default is edited IN PLACE
(`protected` blocks deletion and nothing else, `customized = 1` keeps the edit);
duplicate is the only way to a new template; `renderByKey` now requires
`published`; a test send is logged under a synthetic `core.admin.test-send`; and a
template a rule points at refuses deletion with a 409 naming the rules.

Three things the plan did not know, found by building it:

  - The undeclared-variable check cannot be a token scan. `email.itemList.variable`
    holds a BARE name, so a digest pointed at `itmes` would have saved clean and
    arrived empty. Blocks now declare `variables(props)`; the editor makes that
    field a select over the trigger's list variables so the typo is unavailable.
  - A duplicate that drops `seed_key` loses its variable palette, so duplicating
    `notify.event` would have been refused for the tokens it was copied with — the
    one action §4.6.2 offers, refusing itself. The copy inherits it; `customized`
    is what the seeder actually reads.
  - `validateEmailBlocks` returns `{ valid, errors }`, not an array, and the first
    version tested it with `.length` — so block validation never ran at all.

Also fixes a Phase 4a defect the live walk found, with the org lead's approval: a
rule's template key was checked against a pattern with no dot in it, so no rule
could name any template that exists — §4.6.2's whole duplicate-and-point-a-rule-at-it
workflow was unreachable. Both models now read one pattern.

Verified against the running stack: real multipart mail into a mailpit catcher
including an unsaved draft, the draft/published arms both ways through the real
mailer path, every refusal, and the end-to-end duplicate → rule → 409 walk.
Server 1428 tests green, client 324.

Co-Authored-By: Claude <noreply@anthropic.com>

client/src/routes/admin/views/EngagementSendLog.jsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { api } from '../../../api/client.js'
+
+// Admin → Engagement → Send Log (ENGAGEMENT.md §4.5, gap G15, Phase 5b).
+//
+// G15 was stated as: "no per-message record — no send log, no delivery status, no
+// audit". The table has been filling since Phase 4a; this is the screen that reads
+// it, and the question it exists to answer is the operator's, not the engine's:
+// **did that person get that mail, and if not, why not?**
+//
+// Two things it deliberately does not show.
+//
+//   • **The address.** The log stores a sha256 so a bounce can be correlated back
+//     to a recipient (Phase 9) without becoming a second address book. The route
+//     strips the column; this screen could not render it if it wanted to.
+//   • **A name for the user.** The `user_id` is what the log holds, and joining
+//     users in would make a delivery screen into a directory. The id is enough to
+//     paste into Moderation, which is where a person's record belongs.
+//
+// `failed` rows are the point of the screen, so the reason is a column and not a
+// tooltip: a delivery log whose failures need a hover is a log nobody reads.
+
+const STATUS_LABEL = {
+  sent: 'Sent',
+  failed: 'Failed',
+  suppressed: 'Not sent',
+  bounced: 'Bounced',
+  complained: 'Marked as spam',
+}
+
+const STATUS_COLOR = {
+  failed: '#d98b84',
+  bounced: '#d98b84',
+  complained: '#d98b84',
+}
+
+const PAGE = 50
+
+export default function EngagementSendLog() {
+  const [rows, setRows] = useState([])
+  const [total, setTotal] = useState(0)
+  const [offset, setOffset] = useState(0)
+  const [status, setStatus] = useState('')
+  const [testTrigger, setTestTrigger] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const load = useCallback(async (nextOffset, nextStatus) => {
+    const result = await api.admin.listEngagementSends({
+      limit: PAGE,
+      offset: nextOffset,
+      status: nextStatus || undefined,
+    })
+    setRows(result.sends || [])
+    setTotal(result.total || 0)
+    setTestTrigger(result.testSendTrigger || '')
+  }, [])
+
+  useEffect(() => {
+    let alive = true
+    ;(async () => {
+      setLoading(true)
+      try {
+        await load(offset, status)
+        if (alive) setError(null)
+      } catch (err) {
+        if (alive) setError(err.message)
+      } finally {
+        if (alive) setLoading(false)
+      }
+    })()
+    return () => { alive = false }
+  }, [load, offset, status])
+
+  if (loading && rows.length === 0) return <Loading />
+  if (error) return <ErrorState message={error} />
+
+  const to = Math.min(offset + PAGE, total)
+
+  return (
+    <section>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, marginBottom: 16, flexWrap: 'wrap' }}>
+        <p className="sans" style={{ margin: 0, fontSize: '0.86rem', color: 'var(--muted)', maxWidth: 560 }}>
+          Every message this deployment tried to deliver, successful or not. Addresses are not kept
+          here — only a one-way hash, so a bounce can be matched back without the log becoming a
+          second address book.
+        </p>
+        <label>
+          <span className="field-label">Show</span>
+          <select className="select" value={status} onChange={(e) => { setOffset(0); setStatus(e.target.value) }}>
+            <option value="">Everything</option>
+            <option value="sent">Sent</option>
+            <option value="failed">Failed</option>
+            <option value="suppressed">Not sent</option>
+            <option value="bounced">Bounced</option>
+            <option value="complained">Marked as spam</option>
+          </select>
+        </label>
+      </div>
+
+      {total === 0 ? (
+        <p className="sans dim" style={{ fontSize: '0.85rem' }}>
+          {status ? 'Nothing matches that filter.' : 'Nothing has been sent yet.'}
+        </p>
+      ) : (
+        <>
+          <div className="panel-flat">
+            <table className="adm-table">
+              <thead>
+                <tr>
+                  <th className="adm-th">When</th>
+                  <th className="adm-th">What</th>
+                  <th className="adm-th">To</th>
+                  <th className="adm-th">Channel</th>
+                  <th className="adm-th">Result</th>
+                  <th className="adm-th">Detail</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r) => (
+                  <tr key={r.id}>
+                    <td className="adm-td" style={{ whiteSpace: 'nowrap', fontSize: '0.8rem' }}>
+                      {new Date(r.created_at).toLocaleString()}
+                    </td>
+                    <td className="adm-td" style={{ fontSize: '0.82rem' }}>
+                      {/* The synthetic test-send id is rendered by name: it is not a
+                          registered trigger and will never appear in the catalog,
+                          so showing the raw id would send someone looking for it. */}
+                      {r.trigger_id === testTrigger
+                        ? <span>Test send <span className="dim">from the template editor</span></span>
+                        : <code style={{ fontSize: '0.8rem' }}>{r.trigger_id}</code>}
+                    </td>
+                    <td className="adm-td" style={{ fontSize: '0.82rem' }}>
+                      {r.user_id ? <span className="dim">user #{r.user_id}</span> : <span className="dim">—</span>}
+                    </td>
+                    <td className="adm-td" style={{ fontSize: '0.82rem' }}>
+                      {r.channel}
+                      {r.transport && <span className="dim"> · {r.transport}</span>}
+                    </td>
+                    <td className="adm-td" style={{ fontSize: '0.82rem', color: STATUS_COLOR[r.status] || undefined }}>
+                      {STATUS_LABEL[r.status] || r.status}
+                    </td>
+                    <td className="adm-td" style={{ fontSize: '0.8rem', maxWidth: 320, overflowWrap: 'anywhere' }}>
+                      {r.detail || ''}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
+            <span className="sans dim" style={{ fontSize: '0.82rem' }}>
+              {offset + 1}–{to} of {total}
+            </span>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button type="button" className="pill" style={{ fontSize: '0.74rem' }}
+                disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - PAGE))}>
+                Newer
+              </button>
+              <button type="button" className="pill" style={{ fontSize: '0.74rem' }}
+                disabled={to >= total} onClick={() => setOffset(offset + PAGE)}>
+                Older
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </section>
+  )
+}