feat(engagement): Admin - Engagement - Rules and Audiences (engagement Phase 4b)

The admin surface over the Phase 4a engine: two screens, twelve routes and the
reach preview. Nothing in the engine changed; what changed is that an operator
can now reach it.

Four decisions settled by the org lead before any code:

  - segments get their OWN nav entry, "Audiences", not a tab of the rules screen
  - the on/off switch is its own PATCH route, not a full PUT
  - the reach preview is a count only, on demand
  - a rule can be hard-deleted; the send log survives it

The switch is the one with real content in it. A PUT re-validates against the
registries as they are NOW, so the rules a re-validating toggle cannot switch
off are exactly the three an operator most wants stopped: a rule whose module
was uninstalled, one naming a channel that is gone, and one whose trigger has
since narrowed its ceiling under a saved audience. PATCH .../enabled writes one
column and always works. Switching ON unvalidated is safe because the engine
re-checks the ceiling at send time.

The preview calls the engine's own resolver rather than a second query that
agrees with it today, and answers a count and nothing else - the resolver's
output for a module-declared segment is a set of players derived from game data.
It reports `capped` at the 5000-row bound (the count is a floor, not a total),
`reason` for an `owner` audience (which resolves per event and has no advance
answer), and `permitted` so the editor cannot show a healthy number beside a
save the server will refuse.

Two defects found by walking it against a live server, both in Phase 4a's code:

  1. A rule pointing at a DORMANT segment read as healthy. listAnnotated asked
     only whether the segment ROW existed. The other shape of the same failure
     is a segment sitting exactly where it was whose every audience belongs to
     an uninstalled module: same outcome, nothing deleted. Uninstalling a module
     under an enabled rule produced a rule the screen showed as on and firing.
     The expression walk now lives in engagement/segments.js as
     `missingAudiences` and both lists ask it.
  2. "1 rule still use this segment" - the delete refusal pluralised the noun
     and not the verb, in the sentence an operator reads when told no.

Also: a rule's trigger is now a stated rule rather than an omission in the
UPDATE statement (its cooldowns, queued sends and history are all about one
trigger id); a condition tree the editor cannot render is shown read-only rather
than flattened, because flattening changes which events fire the rule; and
literals are coerced client-side to the type the trigger declared, with anything
that does not parse passed through unchanged so the server's refusal names the
variable.

Tests: 21 new server tests (test/engagementAdmin.test.js) and 25 client ones
(client/test/engagementRules.test.js), all green. The single failure in the
server suite (`the committed manifest matches the declarations in the tree`) is
the known Windows CRLF artifact and fails identically on clean edge.

Companion docs PR: docs#184.

- [x] AI-assisted: written with Claude Code (Opus)

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

client/src/routes/admin/AdminLayout.jsx

@@ -46,6 +46,8 @@ const IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0
 const IconNav = () => <Icon><path d="M4 6h16M4 12h16M4 18h10" /><circle cx="18" cy="18" r="2.5" /></Icon>
 const IconPalette = () => <Icon><path d="M12 3a9 9 0 1 0 0 18 2 2 0 0 0 1.6-3.2 2 2 0 0 1 1.6-3.2H18a3 3 0 0 0 3-3 9 9 0 0 0-9-8.6z" /><circle cx="7.5" cy="11.5" r="1" /><circle cx="10.5" cy="7.5" r="1" /><circle cx="15" cy="8.5" r="1" /></Icon>
 const IconModules = () => <Icon><path d="M12 3l8 4.5-8 4.5-8-4.5z" /><path d="M4 12l8 4.5 8-4.5" /><path d="M4 16.5L12 21l8-4.5" /></Icon>
+const IconMail = () => <Icon><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3.5 6.5L12 13l8.5-6.5" /></Icon>
+const IconList = () => <Icon><path d="M8 6h13M8 12h13M8 18h13" /><circle cx="4" cy="6" r="1.2" /><circle cx="4" cy="12" r="1.2" /><circle cx="4" cy="18" r="1.2" /></Icon>
 
 // Nav is grouped into collapsible categories. A group with no `title` renders
 // its items ungrouped (Dashboard at top, Account at bottom). Each item's `roles`
@@ -89,6 +91,19 @@ export const NAV = [
       { to: '/admin/teams', label: 'Teams', icon: IconUsers, roles: ['admin', 'moderator'] },
     ],
   },
+  {
+    // Its own top-level group (ENGAGEMENT.md §7.1 Q4), not a section of
+    // Settings. Settings is already one long page of sections, and the screens
+    // that join this group in Phase 5 - Triggers, Templates and the send log -
+    // are a catalog, an editor and a paged table, none of which is a settings
+    // section. Email Delivery stays under Settings: configuring a transport is
+    // not the same job as deciding who gets mail.
+    title: 'Engagement',
+    items: [
+      { to: '/admin/engagement/rules', label: 'Rules', icon: IconMail, roles: ['admin'] },
+      { to: '/admin/engagement/audiences', label: 'Audiences', icon: IconList, roles: ['admin'] },
+    ],
+  },
   {
     title: 'System',
     items: [
@@ -157,6 +172,8 @@ const TITLES = {
   '/admin/users': 'Users',
   '/admin/invites': 'Invites',
   '/admin/account': 'Account Security',
+  '/admin/engagement/rules': 'Engagement Rules',
+  '/admin/engagement/audiences': 'Engagement Audiences',
 }
 
 // An installed module's admin pages are not in TITLES and cannot be — core does
@@ -176,6 +193,7 @@ function moduleTitle(baseNav, pathname) {
 function sectionTitle(pathname) {
   if (pathname.startsWith('/admin/moderation')) return 'Moderation'
   if (pathname.startsWith('/admin/users/')) return 'User'
+  if (pathname.startsWith('/admin/engagement')) return 'Engagement'
   return 'Admin'
 }
 

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

@@ -0,0 +1,431 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { api } from '../../../api/client.js'
+import { describeExpression, describeReach, notPlacementError } from '../../../lib/engagementRules.js'
+
+// Admin → Engagement → Audiences (ENGAGEMENT.md §5.1a, Phase 4b).
+//
+// A module declares named sets of users over its own data — "members of a team",
+// "the governors" — and an operator combines them here into a saved audience a
+// rule can point at. Core learns no game vocabulary: it knows an id, a label and
+// a resolver it may call.
+//
+// **Composition narrows and never widens**, and that is the whole security
+// content of this screen:
+//
+//   • the saved ceiling is DERIVED from the tightest audience in the expression,
+//     not chosen — including for "any of", where the intuitive answer (the widest
+//     of the two) is the wrong one. A ceiling says what an expression is allowed
+//     to reach, not what it will resolve to, so the boolean operator makes no
+//     difference to it.
+//   • two ceilings with no ordering between them (staff and owner, say) have no
+//     answer at all, and the save is refused rather than guessing a side.
+//   • "none of" is only available inside an "all of" group. On its own it would
+//     have to mean "everyone except…" — a broadcast built out of one narrow list.
+//     The composer does not offer it anywhere else, and the server refuses it
+//     anyway.
+//
+// The three-level composer here is deliberate: one top-level all-of/any-of, one
+// level of groups inside it, and audiences at the leaves. The stored grammar
+// allows more nesting; anything deeper is left to the rule that made it and shown
+// read-only, the same way the rule editor treats a nested condition.
+
+const DANGER = { color: '#d98b84', borderColor: '#5b2020' }
+
+/** A fresh, empty top-level group. */
+const blankExpression = () => ({ op: 'and', nodes: [] })
+
+/** Is this tree one the composer can render — a single group of leaves and not-groups? */
+function isComposable(node) {
+  if (!node || typeof node !== 'object') return false
+  if (!node.op) return true
+  if (node.op === 'not') return (node.nodes || []).every((n) => n && !n.op)
+  if (node.op !== 'and' && node.op !== 'or') return false
+  return (node.nodes || []).every((n) => n && (!n.op || (n.op === 'not' && (n.nodes || []).every((c) => !c.op))))
+}
+
+/** The composer edits a top-level group; a bare leaf is lifted into one. */
+const toGroup = (expression) =>
+  !expression ? blankExpression() : expression.op ? expression : { op: 'and', nodes: [expression] }
+
+// ── One leaf: an audience and its declared parameters ──────────────────────
+
+function LeafRow({ audiences, node, onChange, onRemove, negated, onToggleNegate, canNegate }) {
+  const declared = audiences.find((a) => a.id === node.audienceId)
+  return (
+    <div style={{ display: 'flex', gap: 8, marginBottom: 8, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+      <label style={{ flex: '1 1 240px' }}>
+        <span className="field-label">Audience</span>
+        <select
+          className="select"
+          value={node.audienceId || ''}
+          onChange={(e) => onChange({ audienceId: e.target.value, params: {} })}
+        >
+          <option value="">Choose…</option>
+          {audiences.map((a) => (
+            <option key={a.id} value={a.id}>{a.label} — reaches at most “{a.ceiling}”</option>
+          ))}
+        </select>
+      </label>
+      {(declared?.params || []).map((p) => (
+        <label key={p.id} style={{ flex: '0 1 160px' }}>
+          <span className="field-label">{p.id}{p.required ? ' *' : ''}</span>
+          <input
+            className="input"
+            value={node.params?.[p.id] ?? ''}
+            onChange={(e) =>
+              onChange({
+                ...node,
+                params: {
+                  ...node.params,
+                  // `int` params are sent as numbers: the server type-checks each
+                  // declared param, and "3" against an int is a refusal.
+                  [p.id]: p.type === 'int' && e.target.value !== '' ? Number(e.target.value) : e.target.value,
+                },
+              })
+            }
+          />
+        </label>
+      ))}
+      {canNegate && (
+        <label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, paddingBottom: 8, cursor: 'pointer' }}>
+          <input type="checkbox" checked={negated} onChange={onToggleNegate} />
+          exclude
+        </label>
+      )}
+      <button type="button" className="pill" style={{ ...DANGER, fontSize: '0.72rem', marginBottom: 6 }} onClick={onRemove}>
+        Remove
+      </button>
+    </div>
+  )
+}
+
+// ── The composer ───────────────────────────────────────────────────────────
+
+function SegmentEditor({ audiences, segment, onSaved, onCancel }) {
+  const [name, setName] = useState(segment?.name || '')
+  const [group, setGroup] = useState(() => toGroup(segment?.expression))
+  const [errors, setErrors] = useState([])
+  const [busy, setBusy] = useState(false)
+
+  const isNew = !segment
+
+  // `not` is only offered under "all of" (§5.1a). Under "any of" the checkbox
+  // disappears rather than being offered and refused.
+  const canNegate = group.op === 'and'
+
+  function setNodes(nodes) {
+    setGroup((g) => ({ ...g, nodes }))
+  }
+
+  function addLeaf() {
+    setNodes([...group.nodes, { audienceId: '', params: {} }])
+  }
+
+  function replaceAt(i, next) {
+    setNodes(group.nodes.map((n, j) => (i === j ? next : n)))
+  }
+
+  function toggleNegate(i) {
+    const node = group.nodes[i]
+    replaceAt(i, node.op === 'not' ? node.nodes[0] : { op: 'not', nodes: [node] })
+  }
+
+  function changeOp(op) {
+    // Switching to "any of" drops the exclusions rather than sending a tree the
+    // server will refuse — and says so, because silently keeping them and failing
+    // at save would be worse than either.
+    const nodes = op === 'or' ? group.nodes.map((n) => (n.op === 'not' ? n.nodes[0] : n)) : group.nodes
+    setGroup({ op, nodes })
+  }
+
+  const expression = useMemo(() => {
+    const nodes = group.nodes.filter((n) => (n.op === 'not' ? n.nodes[0]?.audienceId : n.audienceId))
+    if (!nodes.length) return null
+    if (nodes.length === 1 && !nodes[0].op) return nodes[0]
+    return { op: group.op, nodes }
+  }, [group])
+
+  const localError = expression ? notPlacementError(expression) : null
+
+  async function submit(e) {
+    e.preventDefault()
+    setErrors([])
+    if (!expression) return setErrors(['Add at least one audience.'])
+    if (localError) return setErrors([localError])
+    setBusy(true)
+    try {
+      const body = { name: name.trim(), expression }
+      if (isNew) await api.admin.createEngagementSegment(body)
+      else await api.admin.updateEngagementSegment(segment.id, body)
+      await onSaved()
+    } catch (err) {
+      setErrors(err.body?.errors?.length ? err.body.errors : [err.message || 'Could not save that audience.'])
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form className="panel" style={{ padding: 22, marginBottom: 22 }} onSubmit={submit}>
+      <div className="field-label" style={{ marginBottom: 14 }}>
+        {isNew ? 'New saved audience' : `Editing “${segment.name}”`}
+      </div>
+
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+        <label style={{ flex: '1 1 280px' }}>
+          <span className="field-label">Name</span>
+          <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Governors" />
+        </label>
+        <label style={{ flex: '0 1 200px' }}>
+          <span className="field-label">Combine with</span>
+          <select className="select" value={group.op} onChange={(e) => changeOp(e.target.value)}>
+            <option value="and">all of these</option>
+            <option value="or">any of these</option>
+          </select>
+        </label>
+      </div>
+
+      <div style={{ marginTop: 18 }}>
+        {group.nodes.length === 0 && (
+          <p className="sans" style={{ margin: '0 0 10px', fontSize: '0.84rem', color: 'var(--muted)' }}>
+            No audiences yet. A saved audience is built out of the lists installed modules declare.
+          </p>
+        )}
+        {group.nodes.map((node, i) => {
+          const negated = node.op === 'not'
+          const leaf = negated ? node.nodes[0] : node
+          return (
+            <LeafRow
+              key={i}
+              audiences={audiences}
+              node={leaf}
+              negated={negated}
+              canNegate={canNegate}
+              onToggleNegate={() => toggleNegate(i)}
+              onChange={(next) => replaceAt(i, negated ? { op: 'not', nodes: [next] } : next)}
+              onRemove={() => setNodes(group.nodes.filter((_, j) => j !== i))}
+            />
+          )
+        })}
+        <button type="button" className="btn btn-sq" onClick={addLeaf} disabled={!audiences.length}>
+          Add an audience
+        </button>
+        {!audiences.length && (
+          <span className="sans" style={{ marginLeft: 10, fontSize: '0.8rem', color: 'var(--muted)' }}>
+            No module currently declares any. Install one, or use a plain audience on the rule itself.
+          </span>
+        )}
+      </div>
+
+      {canNegate ? (
+        <p className="sans" style={{ margin: '12px 0 0', fontSize: '0.8rem', color: 'var(--muted)' }}>
+          “Exclude” removes people from what the other rows produced. It is only available under “all
+          of”: on its own it would mean “everyone except…”, which is a way to reach the whole
+          deployment from one narrow list.
+        </p>
+      ) : (
+        <p className="sans" style={{ margin: '12px 0 0', fontSize: '0.8rem', color: 'var(--muted)' }}>
+          “Any of” takes the tightest limit of the audiences in it, not the widest — combining two
+          lists never reaches further than the narrower one allows.
+        </p>
+      )}
+
+      {(errors.length > 0 || localError) && (
+        <ul className="sans" style={{ margin: '14px 0 0', paddingLeft: 18, color: '#d98b84', fontSize: '0.84rem' }}>
+          {(errors.length ? errors : [localError]).map((e) => <li key={e}>{e}</li>)}
+        </ul>
+      )}
+
+      <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
+        <button type="submit" className="btn btn-primary btn-sq" disabled={busy}>
+          {busy ? 'Saving…' : isNew ? 'Create' : 'Save changes'}
+        </button>
+        <button type="button" className="btn btn-sq" onClick={onCancel}>Cancel</button>
+      </div>
+    </form>
+  )
+}
+
+// ── The screen ─────────────────────────────────────────────────────────────
+
+export default function EngagementAudiences() {
+  const [audiences, setAudiences] = useState([])
+  const [segments, setSegments] = useState(null)
+  const [editing, setEditing] = useState(null) // null | { segment } | { segment: null }
+  const [error, setError] = useState('')
+  const [rowError, setRowError] = useState('')
+  const [reach, setReach] = useState({}) // segment id -> preview
+
+  const load = useCallback(async () => {
+    setError('')
+    try {
+      const [declared, saved] = await Promise.all([
+        api.admin.engagementAudiences(),
+        api.admin.listEngagementSegments(),
+      ])
+      setAudiences(declared.audiences || [])
+      setSegments(saved.segments || [])
+    } catch {
+      setError('Could not load audiences.')
+    }
+  }, [])
+  useEffect(() => { load() }, [load])
+
+  const audiencesById = useMemo(
+    () => Object.fromEntries(audiences.map((a) => [a.id, a])),
+    [audiences],
+  )
+
+  async function preview(segment) {
+    try {
+      const counted = await api.admin.previewEngagementReach({ audienceSegmentId: segment.id })
+      setReach((r) => ({ ...r, [segment.id]: counted }))
+    } catch (err) {
+      setReach((r) => ({ ...r, [segment.id]: { count: 0, dormant: true, reason: err.message } }))
+    }
+  }
+
+  async function remove(segment) {
+    if (!window.confirm(`Delete “${segment.name}”?`)) return
+    setRowError('')
+    try {
+      await api.admin.deleteEngagementSegment(segment.id)
+      await load()
+    } catch (err) {
+      // A 409 here is the interesting case and the message carries the count:
+      // deleting a segment a rule still points at would leave that rule reaching
+      // a different set of people, so it is refused rather than cascaded.
+      setRowError(err.message || 'Could not delete that audience.')
+    }
+  }
+
+  if (error) return <ErrorState message={error} />
+  if (!segments) return <Loading />
+
+  if (editing) {
+    return (
+      <section>
+        <SegmentEditor
+          audiences={audiences}
+          segment={editing.segment}
+          onSaved={async () => { setEditing(null); await load() }}
+          onCancel={() => setEditing(null)}
+        />
+      </section>
+    )
+  }
+
+  return (
+    <section>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <p className="sans" style={{ margin: 0, fontSize: '0.86rem', color: 'var(--muted)', maxWidth: 640 }}>
+          Named sets of people a rule can be pointed at, built out of the lists installed modules
+          declare. A saved audience can only ever narrow — combining two lists never reaches further
+          than the tighter of them allows.
+        </p>
+        <button type="button" className="btn btn-primary btn-sq" onClick={() => setEditing({ segment: null })}>
+          New audience
+        </button>
+      </div>
+
+      {rowError && (
+        <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.85rem' }}>{rowError}</p>
+      )}
+
+      <div className="panel-flat">
+        <table className="adm-table">
+          <thead>
+            <tr>
+              <th className="adm-th">Name</th>
+              <th className="adm-th">Made of</th>
+              <th className="adm-th">Reaches at most</th>
+              <th className="adm-th">Right now</th>
+              <th className="adm-th" />
+            </tr>
+          </thead>
+          <tbody>
+            {segments.length === 0 && (
+              <tr>
+                <td className="adm-td" colSpan={5} style={{ color: 'var(--muted)' }}>
+                  No saved audiences yet.
+                </td>
+              </tr>
+            )}
+            {segments.map((s) => (
+              <tr key={s.id}>
+                <td className="adm-td" style={{ color: 'var(--text)' }}>
+                  {s.name}
+                  {s.dormant && (
+                    <div>
+                      <span
+                        className="badge"
+                        title={`Not declared right now: ${(s.missingAudiences || []).join(', ')}`}
+                        style={{ color: 'var(--accent)', borderColor: 'var(--line)', background: 'var(--panel-flat)' }}
+                      >
+                        Dormant
+                      </span>
+                    </div>
+                  )}
+                </td>
+                <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>
+                  {describeExpression(s.expression, audiencesById)}
+                </td>
+                <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>{s.ceiling}</td>
+                <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>
+                  {reach[s.id] ? (
+                    describeReach(reach[s.id])
+                  ) : (
+                    <button type="button" className="pill" style={{ fontSize: '0.72rem' }} onClick={() => preview(s)}>
+                      Count
+                    </button>
+                  )}
+                </td>
+                <td className="adm-td" style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  <button
+                    type="button"
+                    className="pill"
+                    style={{ fontSize: '0.72rem', marginRight: 6 }}
+                    disabled={!isComposable(s.expression)}
+                    title={isComposable(s.expression) ? undefined : 'Nested more deeply than this composer renders'}
+                    onClick={() => setEditing({ segment: s })}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    className="pill"
+                    style={{ ...DANGER, fontSize: '0.72rem' }}
+                    onClick={() => remove(s)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="panel" style={{ padding: 18, marginTop: 22 }}>
+        <div className="field-label" style={{ marginBottom: 8 }}>What modules currently declare</div>
+        {audiences.length === 0 ? (
+          <p className="sans" style={{ margin: 0, fontSize: '0.84rem', color: 'var(--muted)' }}>
+            Nothing. Audiences come from installed modules — core declares none, because core knows no
+            game vocabulary.
+          </p>
+        ) : (
+          <ul className="sans" style={{ margin: 0, paddingLeft: 18, fontSize: '0.84rem', color: 'var(--muted)' }}>
+            {audiences.map((a) => (
+              <li key={a.id}>
+                <span style={{ color: 'var(--text)' }}>{a.label}</span> — <code>{a.id}</code>, reaches at
+                most “{a.ceiling}”
+                {(a.params || []).length ? ` (${a.params.map((p) => p.id).join(', ')})` : ''}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,628 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { api } from '../../../api/client.js'
+import {
+  formFromRule,
+  ruleToPayload,
+  audienceChoicesFor,
+  segmentChoicesFor,
+  describeReach,
+  describeRule,
+  conditionRowsFrom,
+  conditionsFromRows,
+  operatorsForType,
+} from '../../../lib/engagementRules.js'
+
+// Admin → Engagement → Rules (ENGAGEMENT.md Phase 4b).
+//
+// A rule is trigger → audience → channels → timing, and this is the screen that
+// writes one. Everything it decides lives in lib/engagementRules.js so it can be
+// tested; this file renders it and talks to the API.
+//
+// Four things about this screen are deliberate and would be wrong the obvious
+// way round:
+//
+//   1. **The on/off switch is not the form.** It is its own request against its
+//      own route, and it does not re-validate the rule. A rule whose module has
+//      been uninstalled is dormant, is the rule an operator most wants stopped,
+//      and is exactly the rule the form would refuse to save.
+//   2. **A rule's trigger is fixed once it exists.** Its cooldowns, its pending
+//      outbox rows and its send-log history are all about one trigger id.
+//   3. **Every rule arrives off.** §7.1 Q3 makes rules operator-editable data on
+//      the condition that nothing starts mailing by itself — so a new rule is
+//      created disabled and switched on afterwards, as a separate act.
+//   4. **The reach preview is a number.** Never a list of people: a
+//      module-declared segment resolves over game data, and this screen is about
+//      mail scheduling.
+
+const DANGER = { color: '#d98b84', borderColor: '#5b2020' }
+const BLANK = {
+  id: null,
+  triggerId: '',
+  name: '',
+  enabled: false,
+  audience: 'owner',
+  audienceSegmentId: null,
+  channels: [],
+  templateKeys: {},
+  conditions: null,
+  cooldownSeconds: 0,
+  delaySeconds: 0,
+  cancelOn: [],
+  maxSendsPerHour: 100,
+}
+
+function Dormant({ reasons }) {
+  return (
+    <span
+      className="badge"
+      title={reasons.join('\n')}
+      style={{ color: 'var(--accent)', borderColor: 'var(--line)', background: 'var(--panel-flat)' }}
+    >
+      Dormant
+    </span>
+  )
+}
+
+// ── The editor ─────────────────────────────────────────────────────────────
+
+function RuleEditor({ catalog, segments, rule, onSaved, onCancel }) {
+  const [form, setForm] = useState(() => (rule ? formFromRule(rule) : { ...BLANK }))
+  const [conditionState, setConditionState] = useState(() => conditionRowsFrom(rule?.conditions))
+  const [preview, setPreview] = useState(null)
+  const [previewing, setPreviewing] = useState(false)
+  const [errors, setErrors] = useState([])
+  const [busy, setBusy] = useState(false)
+
+  const isNew = !form.id
+  const set = (patch) => setForm((f) => ({ ...f, ...patch }))
+
+  const trigger = useMemo(
+    () => catalog.triggers.find((t) => t.id === form.triggerId) || null,
+    [catalog.triggers, form.triggerId],
+  )
+  const audienceChoices = audienceChoicesFor(trigger, catalog.ceilings)
+  const segmentChoices = segmentChoicesFor(trigger, catalog.ceilings, segments)
+  const variables = trigger?.variables || []
+
+  // Changing the trigger invalidates the audience and every condition, because
+  // both are stated in the old trigger's vocabulary. Clearing them is the honest
+  // move: keeping a condition on a variable the new trigger never carries would
+  // make the rule fire on nothing, silently (an absent variable fails every
+  // comparison, by design).
+  function pickTrigger(id) {
+    const next = catalog.triggers.find((t) => t.id === id)
+    setForm((f) => ({
+      ...f,
+      triggerId: id,
+      audience: next?.audience || 'owner',
+      audienceSegmentId: null,
+    }))
+    setConditionState({ op: 'and', rows: [], editable: true })
+    setPreview(null)
+  }
+
+  function toggleChannel(id) {
+    setForm((f) => ({
+      ...f,
+      channels: f.channels.includes(id) ? f.channels.filter((c) => c !== id) : [...f.channels, id],
+    }))
+  }
+
+  async function runPreview() {
+    setPreviewing(true)
+    try {
+      setPreview(
+        await api.admin.previewEngagementReach({
+          audience: form.audience,
+          audienceSegmentId: form.audienceSegmentId,
+          triggerId: form.triggerId,
+        }),
+      )
+    } catch (err) {
+      setPreview({ count: 0, dormant: true, reason: err.message || 'could not be resolved' })
+    } finally {
+      setPreviewing(false)
+    }
+  }
+
+  async function submit(e) {
+    e.preventDefault()
+    setErrors([])
+    setBusy(true)
+    const payload = ruleToPayload({
+      ...form,
+      conditions: conditionState.editable
+        ? conditionsFromRows(conditionState.op, conditionState.rows, variables)
+        : form.conditions,
+    })
+    try {
+      if (isNew) await api.admin.createEngagementRule(payload)
+      else await api.admin.updateEngagementRule(form.id, payload)
+      await onSaved()
+    } catch (err) {
+      // The server sends every problem, not just the first. A form that shows one
+      // makes an operator fix four things in four round trips.
+      setErrors(err.body?.errors?.length ? err.body.errors : [err.message || 'Could not save the rule.'])
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form className="panel" style={{ padding: 22, marginBottom: 22 }} onSubmit={submit}>
+      <div className="field-label" style={{ marginBottom: 14 }}>
+        {isNew ? 'New rule' : `Editing “${rule.name}”`}
+      </div>
+
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+        <label style={{ flex: '1 1 280px' }}>
+          <span className="field-label">Trigger</span>
+          {isNew ? (
+            <select className="select" value={form.triggerId} onChange={(e) => pickTrigger(e.target.value)}>
+              <option value="">Choose an event…</option>
+              {catalog.triggers.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.label} ({t.id})
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input className="input" value={form.triggerId} readOnly disabled />
+          )}
+          {!isNew && (
+            <span className="sans" style={{ fontSize: '0.78rem', color: 'var(--muted)' }}>
+              A rule keeps its trigger — its cooldowns, queued sends and history are all about this one.
+            </span>
+          )}
+        </label>
+        <label style={{ flex: '1 1 280px' }}>
+          <span className="field-label">Name</span>
+          <input
+            className="input"
+            value={form.name}
+            onChange={(e) => set({ name: e.target.value })}
+            placeholder="IDOC warning to the owner"
+          />
+        </label>
+      </div>
+
+      {trigger?.description && (
+        <p className="sans" style={{ margin: '10px 0 0', fontSize: '0.82rem', color: 'var(--muted)' }}>
+          {trigger.description}
+        </p>
+      )}
+
+      {/* ── Audience ── */}
+      <div className="field-label" style={{ marginTop: 20, marginBottom: 8 }}>Who it reaches</div>
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <label style={{ flex: '1 1 220px' }}>
+          <span className="field-label">Audience</span>
+          <select
+            className="select"
+            value={form.audienceSegmentId ? '' : form.audience}
+            disabled={Boolean(form.audienceSegmentId)}
+            onChange={(e) => { set({ audience: e.target.value, audienceSegmentId: null }); setPreview(null) }}
+          >
+            {audienceChoices.map((c) => (
+              <option key={c.id} value={c.id}>{c.label}</option>
+            ))}
+          </select>
+        </label>
+        <label style={{ flex: '1 1 220px' }}>
+          <span className="field-label">…or a saved audience</span>
+          <select
+            className="select"
+            value={form.audienceSegmentId || ''}
+            onChange={(e) => {
+              set({ audienceSegmentId: e.target.value ? Number(e.target.value) : null })
+              setPreview(null)
+            }}
+          >
+            <option value="">None — use the audience on the left</option>
+            {segmentChoices.map((s) => (
+              <option key={s.id} value={s.id}>{s.name}</option>
+            ))}
+          </select>
+        </label>
+        <button type="button" className="btn btn-sq" disabled={previewing || !form.triggerId} onClick={runPreview}>
+          {previewing ? 'Counting…' : 'Preview reach'}
+        </button>
+      </div>
+      {preview && (
+        <p
+          className="sans"
+          style={{
+            margin: '10px 0 0',
+            fontSize: '0.84rem',
+            color: preview.permitted === false || preview.dormant ? '#d98b84' : 'var(--muted)',
+          }}
+        >
+          {describeReach(preview)}
+        </p>
+      )}
+      {trigger && audienceChoices.length <= 1 && (
+        <p className="sans" style={{ margin: '10px 0 0', fontSize: '0.8rem', color: 'var(--muted)' }}>
+          This event only permits “{trigger.ceiling}”. The audience a rule may use is capped by the
+          event itself, not by the rule.
+        </p>
+      )}
+
+      {/* ── Channels ── */}
+      <div className="field-label" style={{ marginTop: 20, marginBottom: 8 }}>How it is delivered</div>
+      <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
+        {catalog.channels.map((c) => (
+          <div key={c.id} style={{ flex: '0 1 260px' }}>
+            <label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+              <input type="checkbox" checked={form.channels.includes(c.id)} onChange={() => toggleChannel(c.id)} />
+              {c.label}
+            </label>
+            {form.channels.includes(c.id) && (
+              <input
+                className="input"
+                style={{ marginTop: 6 }}
+                placeholder="template key (optional until Phase 5)"
+                value={form.templateKeys[c.id] || ''}
+                onChange={(e) => set({ templateKeys: { ...form.templateKeys, [c.id]: e.target.value } })}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      <p className="sans" style={{ margin: '10px 0 0', fontSize: '0.8rem', color: 'var(--muted)' }}>
+        Every channel is opt-in: a rule reaches only the people who turned that channel on for this
+        event in their own notification settings.
+      </p>
+
+      {/* ── Conditions ── */}
+      <div className="field-label" style={{ marginTop: 20, marginBottom: 8 }}>Only when…</div>
+      {!conditionState.editable ? (
+        <div>
+          <p className="sans" style={{ margin: 0, fontSize: '0.82rem', color: 'var(--accent)' }}>
+            This rule has a nested condition this editor does not render. It is left exactly as it is
+            unless you clear it — flattening it here would change which events fire the rule.
+          </p>
+          <pre
+            style={{ background: 'var(--panel-flat)', border: '1px solid var(--line)', borderRadius: 6, padding: 10, fontSize: '0.76rem', overflowX: 'auto' }}
+          >
+            {JSON.stringify(form.conditions, null, 2)}
+          </pre>
+          <button
+            type="button"
+            className="pill"
+            style={{ ...DANGER, fontSize: '0.72rem' }}
+            onClick={() => { set({ conditions: null }); setConditionState({ op: 'and', rows: [], editable: true }) }}
+          >
+            Clear and start again
+          </button>
+        </div>
+      ) : (
+        <>
+          {conditionState.rows.length > 1 && (
+            <label style={{ display: 'block', marginBottom: 8 }}>
+              <span className="field-label">Match</span>
+              <select
+                className="select"
+                style={{ maxWidth: 220 }}
+                value={conditionState.op}
+                onChange={(e) => setConditionState((s) => ({ ...s, op: e.target.value }))}
+              >
+                <option value="and">all of these</option>
+                <option value="or">any of these</option>
+              </select>
+            </label>
+          )}
+          {conditionState.rows.map((row, i) => {
+            const type = variables.find((v) => v.name === row.variable)?.type
+            const ops = operatorsForType(catalog.operators, type)
+            const takesValue = row.cmp !== 'present' && row.cmp !== 'absent'
+            const patch = (p) =>
+              setConditionState((s) => ({
+                ...s,
+                rows: s.rows.map((r, j) => (i === j ? { ...r, ...p } : r)),
+              }))
+            return (
+              <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
+                <select
+                  className="select"
+                  style={{ flex: '1 1 160px' }}
+                  value={row.variable}
+                  onChange={(e) => patch({ variable: e.target.value })}
+                >
+                  <option value="">Variable…</option>
+                  {variables.map((v) => (
+                    <option key={v.name} value={v.name}>{v.name}</option>
+                  ))}
+                </select>
+                <select
+                  className="select"
+                  style={{ flex: '1 1 160px' }}
+                  value={row.cmp}
+                  onChange={(e) => patch({ cmp: e.target.value })}
+                >
+                  <option value="">Is…</option>
+                  {ops.map((o) => (
+                    <option key={o.cmp} value={o.cmp}>{o.label}</option>
+                  ))}
+                </select>
+                {takesValue && (
+                  <input
+                    className="input"
+                    style={{ flex: '2 1 200px' }}
+                    value={row.value}
+                    placeholder={row.cmp === 'in' || row.cmp === 'nin' ? 'comma, separated, values' : 'value'}
+                    onChange={(e) => patch({ value: e.target.value })}
+                  />
+                )}
+                <button
+                  type="button"
+                  className="pill"
+                  style={{ ...DANGER, fontSize: '0.72rem' }}
+                  onClick={() => setConditionState((s) => ({ ...s, rows: s.rows.filter((_, j) => j !== i) }))}
+                >
+                  Remove
+                </button>
+              </div>
+            )
+          })}
+          <button
+            type="button"
+            className="btn btn-sq"
+            disabled={!variables.length}
+            onClick={() =>
+              setConditionState((s) => ({ ...s, rows: [...s.rows, { variable: '', cmp: '', value: '' }] }))
+            }
+          >
+            Add a condition
+          </button>
+          {!variables.length && (
+            <span className="sans" style={{ marginLeft: 10, fontSize: '0.8rem', color: 'var(--muted)' }}>
+              Choose a trigger first — its declared variables are what a condition can talk about.
+            </span>
+          )}
+        </>
+      )}
+
+      {/* ── Timing and the ceiling ── */}
+      <div className="field-label" style={{ marginTop: 20, marginBottom: 8 }}>Timing</div>
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+        <label style={{ flex: '1 1 160px' }}>
+          <span className="field-label">Wait before sending (seconds)</span>
+          <input
+            className="input"
+            type="number"
+            min="0"
+            value={form.delaySeconds}
+            onChange={(e) => set({ delaySeconds: Number(e.target.value) })}
+          />
+        </label>
+        <label style={{ flex: '1 1 160px' }}>
+          <span className="field-label">At most once per (seconds)</span>
+          <input
+            className="input"
+            type="number"
+            min="0"
+            value={form.cooldownSeconds}
+            onChange={(e) => set({ cooldownSeconds: Number(e.target.value) })}
+          />
+        </label>
+        <label style={{ flex: '1 1 160px' }}>
+          <span className="field-label">Hard cap (sends per hour)</span>
+          <input
+            className="input"
+            type="number"
+            min="1"
+            value={form.maxSendsPerHour}
+            onChange={(e) => set({ maxSendsPerHour: Number(e.target.value) })}
+          />
+        </label>
+      </div>
+      <p className="sans" style={{ margin: '10px 0 0', fontSize: '0.8rem', color: 'var(--muted)' }}>
+        The cooldown is per recipient and per subject
+        {trigger?.subjectKey ? ` (“${trigger.subjectKey}”)` : ''} — a player whose four houses are all
+        decaying hears about all four, once each. The hourly cap is per rule and is the hard stop that
+        keeps a misconfiguration to a bad hour.
+      </p>
+
+      {form.delaySeconds > 0 && (
+        <label style={{ display: 'block', marginTop: 14 }}>
+          <span className="field-label">Cancel the wait if any of these happen</span>
+          <select
+            className="select"
+            multiple
+            size={Math.min(5, Math.max(2, catalog.triggers.length))}
+            value={form.cancelOn}
+            onChange={(e) => set({ cancelOn: [...e.target.selectedOptions].map((o) => o.value) })}
+          >
+            {catalog.triggers.map((t) => (
+              <option key={t.id} value={t.id}>{t.label}</option>
+            ))}
+          </select>
+          <span className="sans" style={{ fontSize: '0.78rem', color: 'var(--muted)' }}>
+            Only meaningful with a wait — there is no window to cancel otherwise, and the save says so.
+          </span>
+        </label>
+      )}
+
+      {errors.length > 0 && (
+        <ul className="sans" style={{ margin: '14px 0 0', paddingLeft: 18, color: '#d98b84', fontSize: '0.84rem' }}>
+          {errors.map((e) => <li key={e}>{e}</li>)}
+        </ul>
+      )}
+
+      <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
+        <button type="submit" className="btn btn-primary btn-sq" disabled={busy}>
+          {busy ? 'Saving…' : isNew ? 'Create rule (off)' : 'Save changes'}
+        </button>
+        <button type="button" className="btn btn-sq" onClick={onCancel}>Cancel</button>
+        {isNew && (
+          <span className="sans" style={{ alignSelf: 'center', fontSize: '0.8rem', color: 'var(--muted)' }}>
+            A new rule is created switched off. Turn it on from the list when you are happy with it.
+          </span>
+        )}
+      </div>
+    </form>
+  )
+}
+
+// ── The screen ─────────────────────────────────────────────────────────────
+
+export default function EngagementRules() {
+  const [catalog, setCatalog] = useState(null)
+  const [segments, setSegments] = useState([])
+  const [rules, setRules] = useState(null)
+  const [editing, setEditing] = useState(null) // null | { rule } | { rule: null } for new
+  const [error, setError] = useState('')
+  const [rowError, setRowError] = useState('')
+
+  const load = useCallback(async () => {
+    setError('')
+    try {
+      const [triggers, channels, segs, list] = await Promise.all([
+        api.admin.engagementTriggers(),
+        api.admin.engagementChannels(),
+        api.admin.listEngagementSegments(),
+        api.admin.listEngagementRules(),
+      ])
+      setCatalog({
+        triggers: triggers.triggers || [],
+        ceilings: triggers.ceilings || [],
+        operators: triggers.operators || [],
+        channels: channels.channels || [],
+      })
+      setSegments(segs.segments || [])
+      setRules(list.rules || [])
+    } catch {
+      setError('Could not load the engagement rules.')
+    }
+  }, [])
+  useEffect(() => { load() }, [load])
+
+  const segmentsById = useMemo(
+    () => Object.fromEntries(segments.map((s) => [s.id, s])),
+    [segments],
+  )
+
+  async function toggle(rule) {
+    setRowError('')
+    try {
+      await api.admin.setEngagementRuleEnabled(rule.id, !rule.enabled)
+      await load()
+    } catch (err) {
+      setRowError(err.message || 'Could not change that rule.')
+    }
+  }
+
+  async function remove(rule) {
+    if (!window.confirm(`Delete “${rule.name}”? Its queued sends go with it; the send log does not.`)) return
+    setRowError('')
+    try {
+      await api.admin.deleteEngagementRule(rule.id)
+      await load()
+    } catch (err) {
+      setRowError(err.message || 'Could not delete that rule.')
+    }
+  }
+
+  if (error) return <ErrorState message={error} />
+  if (!catalog || !rules) return <Loading />
+
+  if (editing) {
+    return (
+      <section>
+        <RuleEditor
+          catalog={catalog}
+          segments={segments}
+          rule={editing.rule}
+          onSaved={async () => { setEditing(null); await load() }}
+          onCancel={() => setEditing(null)}
+        />
+      </section>
+    )
+  }
+
+  return (
+    <section>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <p className="sans" style={{ margin: 0, fontSize: '0.86rem', color: 'var(--muted)', maxWidth: 640 }}>
+          A rule turns an event into mail: which event, who hears about it, on which channels, and how
+          often at most. Nothing sends until a rule is switched on.
+        </p>
+        <button type="button" className="btn btn-primary btn-sq" onClick={() => setEditing({ rule: null })}>
+          New rule
+        </button>
+      </div>
+
+      {rowError && (
+        <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.85rem' }}>{rowError}</p>
+      )}
+
+      <div className="panel-flat">
+        <table className="adm-table">
+          <thead>
+            <tr>
+              <th className="adm-th">Rule</th>
+              <th className="adm-th">Trigger</th>
+              <th className="adm-th">What it does</th>
+              <th className="adm-th">State</th>
+              <th className="adm-th" />
+            </tr>
+          </thead>
+          <tbody>
+            {rules.length === 0 && (
+              <tr>
+                <td className="adm-td" colSpan={5} style={{ color: 'var(--muted)' }}>
+                  No rules yet. Nothing is being sent.
+                </td>
+              </tr>
+            )}
+            {rules.map((rule) => (
+              <tr key={rule.id}>
+                <td className="adm-td" style={{ color: 'var(--text)' }}>{rule.name}</td>
+                <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>{rule.trigger_id}</td>
+                <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>
+                  {describeRule(rule, { segmentsById })}
+                </td>
+                <td className="adm-td">
+                  <label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+                    <input type="checkbox" checked={Boolean(rule.enabled)} onChange={() => toggle(rule)} />
+                    {rule.enabled ? 'On' : 'Off'}
+                  </label>
+                  {rule.dormant && (
+                    <div style={{ marginTop: 4 }}><Dormant reasons={rule.dormantReasons || []} /></div>
+                  )}
+                </td>
+                <td className="adm-td" style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  <button
+                    type="button"
+                    className="pill"
+                    style={{ fontSize: '0.72rem', marginRight: 6 }}
+                    onClick={() => setEditing({ rule })}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    className="pill"
+                    style={{ ...DANGER, fontSize: '0.72rem' }}
+                    onClick={() => remove(rule)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {rules.some((r) => r.dormant) && (
+        <p className="sans" style={{ marginTop: 12, fontSize: '0.8rem', color: 'var(--muted)' }}>
+          A dormant rule names something that is not registered right now — usually a module that has
+          been uninstalled. It is kept exactly as it is, it never fires, and it starts working again
+          when the module comes back. It can still be switched off.
+        </p>
+      )}
+    </section>
+  )
+}