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/App.jsx

@@ -42,6 +42,8 @@ import UsersAdmin from './routes/admin/views/UsersAdmin.jsx'
 import UserDetail from './routes/admin/views/UserDetail.jsx'
 import InvitesAdmin from './routes/admin/views/InvitesAdmin.jsx'
 import ModulesAdmin from './routes/admin/views/ModulesAdmin.jsx'
+import EngagementRules from './routes/admin/views/EngagementRules.jsx'
+import EngagementAudiences from './routes/admin/views/EngagementAudiences.jsx'
 import TeamsAdmin from './routes/admin/views/TeamsAdmin.jsx'
 import AccountAdmin from './routes/admin/views/AccountAdmin.jsx'
 import Moderation from './routes/admin/views/Moderation.jsx'
@@ -184,6 +186,22 @@ export default function App() {
                   actions that publish a game-written name is applied per request
                   on the server, from the caller's live role (TEAMS.md 2.9). */}
               <Route path="teams" element={<TeamsAdmin />} />
+              {/* Engagement (ENGAGEMENT.md Phase 4b). Admin-only, matching the
+                  server: every route under /admin/engagement re-gates to `admin`
+                  on top of the group's staff gate, because this is the group that
+                  decides who receives mail. */}
+              <Route
+                path="engagement"
+                element={
+                  <RoleGate roles={['admin']}>
+                    <Outlet />
+                  </RoleGate>
+                }
+              >
+                <Route index element={<Navigate to="rules" replace />} />
+                <Route path="rules" element={<EngagementRules />} />
+                <Route path="audiences" element={<EngagementAudiences />} />
+              </Route>
               <Route path="account" element={<AccountAdmin />} />
               {/* Installed modules' admin pages, at /admin/<id>/…, already inside
                   RequireAuth + AdminLayout. A module cannot supply its own auth

client/src/api/client.js

@@ -357,6 +357,38 @@ export const api = {
     setModuleSources: (hosts) => req('/admin/modules/sources', { method: 'PUT', body: { hosts } }),
     restartServer: () => req('/admin/modules/restart', { method: 'POST' }),
 
+    // Engagement (docs/website/ENGAGEMENT.md Phase 4b). The first three are the
+    // catalog — triggers, audiences and channels, all served from the registries
+    // rather than from tables, so an installed module's declarations appear here
+    // without a client release.
+    //
+    // `setEngagementRuleEnabled` is its own call rather than a `saveEngagementRule`
+    // with one field, because the route is its own route: turning a rule off must
+    // work on a rule the registries would now refuse, which is exactly the rule an
+    // operator most wants stopped.
+    //
+    // `previewEngagementReach` answers with a COUNT and never a list of people.
+    engagementTriggers: () => req('/admin/engagement/triggers'),
+    engagementAudiences: () => req('/admin/engagement/audiences'),
+    engagementChannels: () => req('/admin/engagement/channels'),
+    listEngagementRules: () => req('/admin/engagement/rules'),
+    createEngagementRule: (body) => req('/admin/engagement/rules', { method: 'POST', body }),
+    updateEngagementRule: (id, body) => req(`/admin/engagement/rules/${id}`, { method: 'PUT', body }),
+    setEngagementRuleEnabled: (id, enabled) =>
+      req(`/admin/engagement/rules/${id}/enabled`, { method: 'PATCH', body: { enabled } }),
+    deleteEngagementRule: (id) => req(`/admin/engagement/rules/${id}`, { method: 'DELETE' }),
+    listEngagementSegments: () => req('/admin/engagement/segments'),
+    createEngagementSegment: (body) => req('/admin/engagement/segments', { method: 'POST', body }),
+    updateEngagementSegment: (id, body) => req(`/admin/engagement/segments/${id}`, { method: 'PUT', body }),
+    deleteEngagementSegment: (id) => req(`/admin/engagement/segments/${id}`, { method: 'DELETE' }),
+    previewEngagementReach: ({ audience, audienceSegmentId, triggerId } = {}) => {
+      const qs = new URLSearchParams()
+      if (audienceSegmentId) qs.set('audienceSegmentId', String(audienceSegmentId))
+      else if (audience) qs.set('audience', audience)
+      if (triggerId) qs.set('triggerId', triggerId)
+      return req(`/admin/engagement/audience-preview${withQs(qs.toString())}`)
+    },
+
     // Teams (docs/website/TEAMS.md §2.11). Three of these mean something
     // different depending on who calls them: for a moderator, unhide and
     // setTeamDisplayName file a request and the response says `pending: true`.

client/src/lib/engagementRules.js

@@ -0,0 +1,298 @@
+// What the Engagement screens say, and what they let an operator choose.
+//
+// ENGAGEMENT.md Phase 4b. Plain JS in its own file for the reason
+// `lib/moduleAdmin.js` is: it is the part of these two screens worth testing, and
+// the test runner cannot reach a `.jsx`.
+//
+// **None of this is a boundary.** `engagementRules.model.js` on the server
+// decides what may be saved, and the engine re-checks the audience ceiling again
+// at send time. Everything here is an affordance — not offering a choice the
+// server is going to refuse, and saying why in the form rather than in a toast.
+// The two copies are expected to drift, which is why the server's is the one
+// that decides.
+//
+// The one rule worth stating out loud, because it is the reason the audience
+// list is derived rather than hardcoded: **the ceiling vocabulary comes from the
+// server** (`GET /admin/engagement/triggers` serves `ceilings`, each with the set
+// it `permits`). A second copy of the lattice in the client would be a second
+// copy of a security rule, and a second copy is a copy that drifts.
+
+/** A rule row as the API returns it → the shape the form edits. */
+export function formFromRule(rule) {
+  return {
+    id: rule?.id ?? null,
+    triggerId: rule?.trigger_id ?? '',
+    name: rule?.name ?? '',
+    enabled: Boolean(rule?.enabled),
+    audience: rule?.audience ?? 'owner',
+    audienceSegmentId: rule?.audience_segment_id ?? null,
+    channels: Array.isArray(rule?.channels) ? [...rule.channels] : [],
+    templateKeys: { ...(rule?.template_keys || {}) },
+    conditions: rule?.conditions ?? null,
+    cooldownSeconds: Number(rule?.cooldown_seconds ?? 0),
+    delaySeconds: Number(rule?.delay_seconds ?? 0),
+    cancelOn: Array.isArray(rule?.cancel_on) ? [...rule.cancel_on] : [],
+    maxSendsPerHour: Number(rule?.max_sends_per_hour ?? 100),
+  }
+}
+
+/**
+ * The form → a POST/PUT body.
+ *
+ * `templateKeys` is filtered to the rule's channels rather than sent whole,
+ * because unticking a channel in the form leaves its template key behind and the
+ * server refuses a key naming a channel the rule does not have. Dropping it here
+ * makes unticking a channel do the obvious thing instead of producing an error
+ * about a field the operator cannot see.
+ */
+export function ruleToPayload(form) {
+  const channels = [...new Set(form.channels || [])]
+  const templateKeys = {}
+  for (const channel of channels) {
+    const key = (form.templateKeys || {})[channel]
+    if (key) templateKeys[channel] = key
+  }
+  return {
+    triggerId: form.triggerId,
+    name: (form.name || '').trim(),
+    enabled: Boolean(form.enabled),
+    audience: form.audience,
+    audienceSegmentId: form.audienceSegmentId ?? null,
+    channels,
+    templateKeys,
+    conditions: form.conditions ?? null,
+    cooldownSeconds: Number(form.cooldownSeconds) || 0,
+    delaySeconds: Number(form.delaySeconds) || 0,
+    cancelOn: [...new Set(form.cancelOn || [])],
+    maxSendsPerHour: Number(form.maxSendsPerHour) || 100,
+  }
+}
+
+/**
+ * Which plain audiences this trigger's ceiling allows, in lattice order.
+ *
+ * Derived from the `permits` list the server sends with each ceiling, so a
+ * trigger declared `owner` offers only `owner` and the editor never presents a
+ * choice the save is going to refuse. An unknown trigger (a dormant rule whose
+ * module is gone) offers nothing rather than everything — failing closed is the
+ * same posture `ceilings.permits` takes on the server.
+ */
+export function audienceChoicesFor(trigger, ceilings) {
+  if (!trigger || !Array.isArray(ceilings)) return []
+  const declared = ceilings.find((c) => c.id === trigger.ceiling)
+  if (!declared) return []
+  const allowed = new Set(declared.permits || [])
+  return ceilings.filter((c) => allowed.has(c.id))
+}
+
+/** Segments a rule under this trigger may point at — the same test, on the stored ceiling. */
+export function segmentChoicesFor(trigger, ceilings, segments) {
+  const allowed = new Set(audienceChoicesFor(trigger, ceilings).map((c) => c.id))
+  return (segments || []).filter((s) => allowed.has(s.ceiling))
+}
+
+/**
+ * The sentence rendered beside a reach preview.
+ *
+ * Every branch here exists because the bare number would be a lie in that case:
+ * a capped count is a floor, an `owner` audience has no advance answer, a dormant
+ * segment resolves to nobody for a reason worth naming, and a count the trigger's
+ * ceiling forbids is a number the save is about to refuse.
+ */
+export function describeReach(preview) {
+  if (!preview) return ''
+  if (preview.dormant) return `Resolves to nobody right now — ${preview.reason || 'dormant'}.`
+  if (preview.permitted === false) {
+    return `Reaches ${preview.count}, but this trigger does not permit that audience — saving will be refused.`
+  }
+  if (preview.reason) return `${preview.count} right now — ${preview.reason}.`
+  if (preview.capped) return `At least ${preview.count} people (the preview stops counting there).`
+  return preview.count === 1 ? '1 person right now.' : `${preview.count} people right now.`
+}
+
+// ── Segment expressions ────────────────────────────────────────────────────
+
+/**
+ * `not` is legal only as a child of `and` — the server's rule, checked here so
+ * the composer can grey the button out instead of letting the operator build
+ * something and then be refused.
+ *
+ * The reason, from §5.1a: a complement needs a universe, and the only one that
+ * does not widen is the set its siblings produced. `A AND NOT B` is "A, less B".
+ * A bare `NOT B`, or `A OR NOT B`, would have to mean "everyone except…", which
+ * is a way to build the whole deployment out of one narrow audience.
+ */
+export function notPlacementError(expression) {
+  const walk = (node, underAnd) => {
+    if (!node || typeof node !== 'object') return null
+    if (!node.op) return null
+    if (node.op === 'not' && !underAnd) {
+      return 'A "not" can only be used inside an "all of" group — on its own it would mean "everyone except…".'
+    }
+    for (const child of node.nodes || []) {
+      const err = walk(child, node.op === 'and')
+      if (err) return err
+    }
+    return null
+  }
+  return walk(expression, false)
+}
+
+/** A one-line summary of a segment expression, for the list. */
+export function describeExpression(node, audiencesById = {}) {
+  if (!node || typeof node !== 'object') return '—'
+  if (!node.op) {
+    const label = audiencesById[node.audienceId]?.label || node.audienceId
+    const params = Object.entries(node.params || {})
+    return params.length ? `${label} (${params.map(([k, v]) => `${k}: ${v}`).join(', ')})` : label
+  }
+  const parts = (node.nodes || []).map((n) => describeExpression(n, audiencesById))
+  if (node.op === 'not') return `not ${parts.join(', ')}`
+  return parts.join(node.op === 'and' ? ' and ' : ' or ')
+}
+
+/**
+ * The one-line summary of a rule, for the list.
+ *
+ * `dormant` is deliberately not folded in here — the list renders that as its own
+ * badge, because "this rule cannot fire" is a different fact from "this is what
+ * the rule says" and an operator needs both.
+ */
+export function describeRule(rule, { segmentsById = {} } = {}) {
+  const parts = []
+  const audience = rule.audience_segment_id
+    ? segmentsById[rule.audience_segment_id]?.name || `segment ${rule.audience_segment_id}`
+    : rule.audience
+  parts.push(`to ${audience}`)
+  parts.push(`via ${(rule.channels || []).join(', ') || 'no channel'}`)
+  if (rule.delay_seconds) parts.push(`after ${humanSeconds(rule.delay_seconds)}`)
+  if (rule.cooldown_seconds) parts.push(`at most once per ${humanSeconds(rule.cooldown_seconds)}`)
+  parts.push(`≤ ${rule.max_sends_per_hour}/hour`)
+  return parts.join(' · ')
+}
+
+// ── Conditions ─────────────────────────────────────────────────────────────
+//
+// The stored grammar is and/or/not over comparisons; the editor offers the flat
+// half of it — one and/or over a list of comparisons — because that is what a
+// dropdown-per-operator can render honestly and it covers the rules anyone
+// writes by hand.
+//
+// **A tree the editor cannot render is shown, not silently flattened.**
+// Flattening `A AND (B OR C)` into `A AND B AND C` changes which events fire the
+// rule, and the operator would have no way to know the save had done it. Such a
+// rule opens read-only with its JSON visible and one honest choice: leave it, or
+// clear it and start again.
+
+/** Which comparison operators apply to a variable of this declared type? */
+export function operatorsForType(operators, type) {
+  return (operators || []).filter((o) => !type || (o.types || []).includes(type))
+}
+
+/**
+ * A stored conditions tree → the flat rows the editor edits.
+ *
+ * `editable: false` means "this file will not pretend it can round-trip that",
+ * and the screen renders the tree read-only rather than losing part of it.
+ */
+export function conditionRowsFrom(conditions) {
+  if (!conditions) return { op: 'and', rows: [], editable: true }
+  if (conditions.cmp) return { op: 'and', rows: [rowFrom(conditions)], editable: true }
+  if (conditions.op === 'and' || conditions.op === 'or') {
+    const children = conditions.nodes || []
+    if (children.every((n) => n && n.cmp)) {
+      return { op: conditions.op, rows: children.map(rowFrom), editable: true }
+    }
+  }
+  return { op: 'and', rows: [], editable: false }
+}
+
+const rowFrom = (node) => ({
+  variable: node.variable,
+  cmp: node.cmp,
+  // A list operator's value arrives as an array and is edited as comma-separated
+  // text; everything else is edited as the literal it is.
+  value: Array.isArray(node.value) ? node.value.join(', ') : node.value === undefined ? '' : String(node.value),
+})
+
+/**
+ * The editor's rows → a conditions tree, with each literal coerced to the type
+ * the trigger DECLARED for that variable.
+ *
+ * The coercion is the point. Every value in an HTML input is a string, and the
+ * server refuses `{ cmp: 'gt', value: "5" }` against an `int` variable — rightly,
+ * because a rule whose comparison silently compares a number to a string is a
+ * rule that quietly never fires. Doing it here means the form's error is about
+ * something the operator typed rather than about JSON.
+ */
+export function conditionsFromRows(op, rows, variables) {
+  const byName = Object.fromEntries((variables || []).map((v) => [v.name, v]))
+  const nodes = (rows || [])
+    .filter((r) => r.variable && r.cmp)
+    .map((r) => {
+      const type = byName[r.variable]?.type || 'string'
+      const node = { variable: r.variable, cmp: r.cmp }
+      if (r.cmp === 'present' || r.cmp === 'absent') return node
+      if (r.cmp === 'in' || r.cmp === 'nin') {
+        node.value = String(r.value ?? '')
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+          .map((s) => coerceLiteral(type, s))
+      } else {
+        node.value = coerceLiteral(type, r.value)
+      }
+      return node
+    })
+  if (!nodes.length) return null
+  if (nodes.length === 1) return nodes[0]
+  return { op, nodes }
+}
+
+/**
+ * One typed literal out of one string.
+ *
+ * A value that does not parse is passed through UNCHANGED rather than turned
+ * into `NaN` or `false`: the server's type check will then refuse it and name the
+ * variable, which is a better error than a rule that saves cleanly and compares
+ * against a number the operator never typed.
+ */
+export function coerceLiteral(type, raw) {
+  if (raw === null || raw === undefined) return raw
+  const text = typeof raw === 'string' ? raw.trim() : raw
+  switch (type) {
+    case 'int': {
+      const n = Number(text)
+      return Number.isInteger(n) && text !== '' ? n : text
+    }
+    case 'float': {
+      const n = Number(text)
+      return Number.isFinite(n) && text !== '' ? n : text
+    }
+    case 'boolean': {
+      if (text === true || text === 'true') return true
+      if (text === false || text === 'false') return false
+      return text
+    }
+    default:
+      return text
+  }
+}
+
+/** Seconds as the coarsest exact unit — 3600 is "1 hour", 3660 is "61 minutes". */
+export function humanSeconds(seconds) {
+  const n = Number(seconds) || 0
+  if (n === 0) return 'none'
+  const units = [
+    [86_400, 'day'],
+    [3_600, 'hour'],
+    [60, 'minute'],
+  ]
+  for (const [size, name] of units) {
+    if (n % size === 0) {
+      const count = n / size
+      return `${count} ${name}${count === 1 ? '' : 's'}`
+    }
+  }
+  return `${n} seconds`
+}

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>
+  )
+}