diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..ffa1c6e
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,14 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "start",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": [
+        "run",
+        "start"
+      ],
+      "port": 3000
+    }
+  ]
+}
diff --git a/CLAUDE.md b/CLAUDE.md
index ba8b906..655a735 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -37,6 +37,7 @@ title-bar controls). The rules that matter most:
 - Verify against the guide's testing section and resilience checklist. Mocks
   for the existing upstreams: `node tools/prodcom-mock.js` (ProdCom) and
   `node band-lineup-display/tmp/pp-mock.js 1599` (ProPresenter).
+  `node tools/slack-mock.js 24716` (Slack; run ProdDash with `SLACK_API_BASE=http://127.0.0.1:24716/api`).
 
 ## Reference code (read-only forks — don't develop these here)
 
diff --git a/README.md b/README.md
index 80696b3..8856226 100644
--- a/README.md
+++ b/README.md
@@ -15,9 +15,10 @@ touching the shell (see [docs/MODULE-GUIDE.md](docs/MODULE-GUIDE.md)).
 2. Discovers modules in `modules/` and serves each one's client at
    `/modules/<id>/`.
 3. Mounts each enabled module's server routes under `/api/modules/<id>/` —
-   that's where module servers proxy ProdCom, poll ProPresenter, and stream
-   live updates over SSE, so browsers never talk to production gear
-   directly (no CORS, and API keys never leave the server).
+   that's where module servers follow ProdCom, poll ProPresenter, and stream
+   live updates over SSE — one upstream connection per module, however many
+   dashboards are open — so browsers never talk to production gear directly
+   (no CORS, and API keys never leave the server).
 4. Stores server-wide module config and named layouts in a per-machine data
    directory outside the app folder, so updating ProdDash never loses them.
 
@@ -99,6 +100,7 @@ with this machine's shell settings — the same keys as the checked-in
 | --- | --- |
 | `port` | Port ProdDash serves on (default `24500`). The macOS launcher writes this one, so the port it is set to holds however ProdDash is started. |
 | `adminPasscode` | If set, the admin page asks for this shared passcode. Leave `""` for none — it's a plain-HTTP LAN tool. |
+| `theme` | The dashboard palette: `booth` (default), `harbor`, `graphite`, `ember` or `daylight`. The admin page's **Theme** section writes this one — see [Themes](#themes). |
 
 Environment variables override both files: `PORT`, `PRODDASH_PASSCODE`, and
 `PRODDASH_DATA_DIR` to put the data directory somewhere else (a relative path
@@ -111,6 +113,22 @@ so and falls back to the app's `config/` folder.
 directory, so nothing has to be re-entered. The old files are left in place and
 ignored from then on.
 
+### Themes
+
+The whole dashboard — every tile, on every browser — draws with one palette,
+chosen in the admin page's **Theme** section and switched live: pick a swatch
+and open dashboards change without a reload. Five presets ship: **Booth**
+(the default dark, mint accent), **Harbor** (deep navy, cyan), **Graphite**
+(neutral charcoal, electric blue), **Ember** (warm broadcast black, orange)
+and **Daylight**, a light palette for a front-of-house desk in daytime. Each
+keeps the status colours apart — the accent is never near the danger red or
+the warning amber — and muted text readable in a dark booth. The choice is
+stored as `theme` in the data directory's `proddash.json` (table above), so
+it holds across restarts and updates; a browser remembers the last theme it
+saw and applies it before the server answers, so nothing flashes. Modules
+style with the shell's colour variables, which is why they follow; a colour
+set on a tile itself (a PCO Plan header colour, say) is deliberately kept.
+
 ## Installing modules and updating
 
 Everything below happens in the **admin page**; ProdDash talks to its GitHub
diff --git a/docs/MODULE-GUIDE.md b/docs/MODULE-GUIDE.md
index 64ca0c2..acaafe1 100644
--- a/docs/MODULE-GUIDE.md
+++ b/docs/MODULE-GUIDE.md
@@ -92,6 +92,7 @@ the app); its settings are kept for a later reinstall.
 | `proddash` | yes | The ProdDash versions this module works with: `">=1.1.0"`, `"^1.1.0"`, `">=1.1.0 <2.0.0"`, or `"*"`. A module whose requirement the running shell doesn't meet is listed in the admin page but never loaded, and can't be installed from the catalog. |
 | `description` | no | Shown in the admin page / picker. |
 | `permissions` | no | What macOS must allow before this module can work — see **Permissions macOS has to grant**. Ignored by the shell; read by the macOS launcher. |
+| `provides` | no | Capabilities other modules can consume — `["timers"]` today. Forwarded in `/api/modules` so a consumer can find you. See **Working with other modules**. |
 | `client` | yes | Client entry file, loaded as an ES module. |
 | `server` | no | Server entry file (CommonJS), loaded with `require()`. |
 | `style` | no | A stylesheet the shell injects once per module. |
@@ -103,7 +104,7 @@ the app); its settings are kept for a later reinstall.
 Both schemas map field names to specs:
 
 ```
-{ "type": "string" | "number" | "boolean" | "switch" | "select" | "color" | "password" | "endpoint",
+{ "type": "string" | "text" | "number" | "boolean" | "switch" | "select" | "multiselect" | "template" | "color" | "password" | "endpoint",
   "label": "Shown next to the field",
   "default": <value>,
   "group": "Section heading",                         // optional; see below
@@ -115,10 +116,33 @@ Both schemas map field names to specs:
 }
 ```
 
-`boolean` renders as a checkbox; `switch` is the same true/false value shown
-as a toggle (use it for a feature on/off that other fields depend on).
+`boolean` and `switch` are the same true/false value. In a tile's gear popover
+both render as a switch; in the admin page `switch` is the toggle and
+`boolean` the plainer checkbox (use `switch` for a feature on/off that other
+fields depend on). **Label a switch with the noun of what it turns on** —
+"Seconds", "Top bar", "Section headers" — never "Show seconds": on means
+shown or enabled, off means hidden or disabled, and the label shouldn't say
+so twice.
 `color` renders a swatch picker and stores a `#rrggbb` string (give it a hex
 default; the tile applies it as a CSS custom property — see `pco-plan`).
+`multiselect` is several picks from one list — the same `options` /
+`optionsRoute` as `select`, rendered as one switch per option and stored as
+an array of values. A saved value the list no longer offers stays checked and
+marked, so nothing is dropped behind anyone's back. In a tile's gear popover
+it also takes `columns` (2–4) and `allByDefault: true`: a tile that has never
+chosen shows every option on and saves nothing until someone flips one, so
+options that turn up later are on as well (give it no `default` then).
+`select` and `multiselect` may use `optionsRoute` in `instanceSchema` too —
+the popover GETs `/api/modules/<id><optionsRoute>` like the admin page does.
+
+`template` (tile settings) is a text with placeholders, built by dragging or
+clicking the variables the module offers into it: `"variables": [ { "value":
+"{series}", "label": "Series" }, … ]`. Keep `help` to the joining rules; the
+chips carry the names.
+
+`text` is a multi-line string — a `<textarea>` in the admin page, stored with
+its newlines; one item per line is the convention (the `slack` module's quick
+replies). Admin config only.
 
 `group` gathers consecutive fields under a labeled subsection in the admin
 page, so a module with several distinct concerns (e.g. a ProPresenter
@@ -141,7 +165,15 @@ the group name:
   still empty. Omit it and the group is a plain, always-open block.
 - `columns`: 2–4 lays the group's fields out in a grid — the way to keep a
   long checklist of booleans compact.
-- `help`: a line of guidance at the top of the group.
+- `help`: guidance for the whole group. The admin page shows it as an
+  ⓘ beside the group title (click or hover to read), so a group can carry a
+  paragraph without pushing its fields down the page. Say where a value comes
+  from, not what a field is.
+- `toggle`: the key of a `switch` field in this group. It renders in the
+  group's title row, at the right, as the group's on/off; the rest of the group
+  dims while it is off, and the field is not repeated in the body. This is how
+  an integration is disabled without unmounting the module — ProPresenter
+  timers, say, on a Sunday when ProPresenter isn't running.
 
 `help` on a field puts one line of guidance under its control — allowed
 placeholders, where a value comes from. Keep labels short and put the
@@ -149,13 +181,27 @@ explanation there.
 
 `group` and `help` work on `instanceSchema` fields too, and a manifest
 `instanceGroups` map plays the `configGroups` role for the tile's gear
-popover (`collapsed: true | false`, `columns`, `help`). That is how a module
-with a long show/hide checklist keeps the popover usable — see `pco-plan`.
-Display choices belong there, per tile; admin config is for connections.
+popover (`collapsed: true | false`, `columns`, `help`, `toggle`). That is how
+a module with a long show/hide checklist keeps the popover usable — see
+`pco-plan`. Display choices belong there, per tile; admin config is for
+connections. The popover itself is a small window beside the tile — sized to
+its content, moved by the slim bar on top, closed by clicking anywhere else
+or pressing Escape — so a tile never has to be big enough to hold its own
+settings, and a change can be watched as it lands. Under everything you
+offer, the shell adds **Tile tint** — a colour the operator can wash that
+tile's chrome in, saved with the layout. It is not yours to declare and it
+never remounts you; don't offer one of your own.
+
+A picker entry (see **Presenting multiple tiles**) may carry its own
+`instanceSchema` and `instanceGroups`: tiles added from that entry get those
+instead of the module's. A tile that shows one ProPresenter timer has no use
+for a clock's format switches — give it a schema of what applies.
 
 `showWhen: "<key>"` hides a field until the boolean/`switch` field named
 `<key>` is on — e.g. the audio device and channel appear only once the LTC
 listener switch is enabled. The hidden field still keeps its stored value.
+It works the same in a tile's gear (`instanceSchema`): "Short day" and
+"Short month" appear once the clock's "Date" is on.
 
 A `select` whose choices are only knowable at runtime (audio devices, serial
 ports, discovered sources) sets `optionsRoute` instead of — or as a fallback
@@ -272,7 +318,7 @@ export default function create({ root, moduleApi }) {
 | `instanceId` | Unique per tile — two tiles of the same module get different ids. Handy for keying anything per-tile. |
 | `variant` | For multi-tile modules: the id of the tile-list entry this tile was added as, `''` otherwise (see **Presenting multiple tiles**). |
 | `config` | Admin (server-wide) config, read-only, always current. Password fields are absent — they never reach the client. |
-| `instanceSettings` | This tile's settings: your `instanceSchema` defaults overlaid with whatever this tile has saved. Read it fresh whenever you render — don't cache it. |
+| `instanceSettings` | This tile's settings: your `instanceSchema` defaults overlaid with whatever this tile has saved. Read it fresh whenever you render — don't cache it. Keys beginning `__` are the shell's own (`__tint`, the tile's colour) — never use that prefix, and ignore the ones you find. |
 | `saveInstanceSettings(patch)` | Merge `patch` into this tile's settings and persist them with the layout. No restart happens — you made the change, you already know. Use it for state the user sets *inside* your tile (a toggled filter, a chosen tab). |
 | `fetch(path, opts)` | `fetch` scoped to your server routes: `fetch('/state')` hits `/api/modules/<id>/state`. |
 | `sse(path, handlers)` | An `EventSource` scoped the same way, **with auto-reconnect** (see below). Returns a handle with `close()`. |
@@ -287,16 +333,17 @@ bar, next to the shell's gear/close buttons:
 
 ```js
 const btn = moduleApi.header.addButton({
-  icon: '<svg …>…</svg>',   // inline SVG string, and/or
-  label: 'A+',              // short text
-  title: 'Larger text',     // hover tooltip
+  icon: '<svg …>…</svg>',   // inline SVG string (13 px), and/or
+  label: 'Timers ▾',        // short text
+  title: 'Larger text',     // tooltip — one or two words; the shell shows
+                            // it the moment the pointer arrives
   onClick() { … },
 });
 btn.classList.add('active'); // toggle styling for on/off buttons
 
 const menu = moduleApi.header.addMenu({
   label: 'Channels ▾',
-  title: 'Choose visible channels',
+  title: 'Channels',
   build(menuEl) {
     // called on every open with an emptied menu element — fill it with
     // buttons (give them your scoped classes; the container is styled and
@@ -308,7 +355,17 @@ menu.setLabel('Channels (2/4) ▾'); // update the button text any time
 
 Everything you add is removed automatically when your instance stops, so a
 remount never duplicates controls. Keep them compact (icon buttons, short
-labels): the title bar is 32 px tall and shared with the tile's name.
+labels): the title bar is 32 px tall and shared with the tile's name. Draw
+icons as inline SVG rather than characters — a glyph such as ✕ or ＋ takes
+its size from whatever font each browser picks; text-size buttons are a
+drawn − and +.
+
+**One control per action.** Whatever has a dedicated header button is not
+offered again in the gear popover: text size is A− / A+ up here (persisted
+through `saveInstanceSettings({ textSize })`, read back with a sane
+fallback), never a "Text size" field in `instanceSchema`; a timestamps or
+newest-first toggle in the header means no such switch in the gear. The
+gear is for display choices that have no button of their own.
 
 One more thing to know: the user can hide the whole title bar with the
 small notch on its bottom edge (a clean-view mode for wall displays). Your
@@ -327,14 +384,20 @@ const stream = moduleApi.sse('/stream', {
 // later: stream.close()
 ```
 
-Browsers' `EventSource` retries transient drops itself but gives up for good
-when a retry gets a completed non-SSE response — which is what a proxy's 502
-looks like while the upstream is down. The shell's `sse()` recreates closed
-streams on a 3-second timer until they work again, so **reconnect logic is
-free**: handle `open` (refresh/backfill your state; you may have missed
-events) and `error` (report degraded status), and you're resilient. Streams
-you forget to close are force-closed when the tile unmounts — but close your
-own in `stop()` anyway.
+Your route serves a plain SSE stream; how it reaches the page is the
+shell's business. A dashboard holds **one** connection for every stream on
+it (`GET /api/stream`, which the server feeds from your route over
+loopback) — browsers allow about six connections to a host and a tile per
+stream ran out of them — so `open` also fires whenever that shared
+connection is remade (a tile was added or removed) and whenever your route
+comes back after a drop. Browsers' `EventSource` retries transient drops
+itself but gives up for good when a retry gets a completed non-SSE
+response — which is what a proxy's 502 looks like while the upstream is
+down; the shell recreates a closed connection on a 3-second timer until it
+works again, so **reconnect logic is free**: handle `open` (refresh/backfill
+your state; you may have missed events) and `error` (report degraded
+status), and you're resilient. Streams you forget to close are force-closed
+when the tile unmounts — but close your own in `stop()` anyway.
 
 ### Lifecycle you must expect
 
@@ -363,9 +426,15 @@ own in `stop()` anyway.
 
 2. **Style with the shell's CSS variables — no hardcoded colors.** The
    palette: `--bg` (page), `--panel` (tile), `--border`, `--text`,
-   `--muted`, `--accent`, `--danger`, `--warn`. Derive tints with
+   `--muted`, `--accent`, `--accent-text` (text that sits on the accent —
+   dark on most themes, white where the accent is deep), `--danger`,
+   `--warn`. Derive tints with
    `color-mix(in srgb, var(--accent) 20%, transparent)`. This is what makes
-   every module look native on the dark, high-contrast booth theme.
+   every module look native — and what makes the dashboard's **themes**
+   (Admin → Theme) reach into every tile: a theme swaps those variables and
+   nothing else. A colour a tile is configured with (a `color` instance
+   setting, applied as a custom property on the tile) is set closer than the
+   theme and wins over it, by design.
 
 3. **No external network calls from the client.** Browsers talk only to
    ProdDash. Anything upstream (your device, service, API) goes through your
@@ -385,7 +454,7 @@ ethos; Node 18+ so global `fetch` is available). Exports either or both of:
 
 ```js
 module.exports = {
-  init({ config, log }) {
+  init({ config, log, shell }) {
     // Called on startup / re-init, BEFORE routes(). Start your upstream
     // connection here. Return a handle:
     return {
@@ -394,7 +463,7 @@ module.exports = {
     };
   },
 
-  routes({ config, log }) {
+  routes({ config, log, shell }) {
     // Route table, mounted under /api/modules/<id>/
     return {
       'GET /state':     (req, res) => { … },
@@ -410,6 +479,9 @@ module.exports = {
 - `config` is your admin config: `configSchema` defaults overlaid with what
   the admin page saved — **including password fields**.
 - `log(...)` prefixes output with your module id.
+- `shell.port` is the port ProdDash is serving on — what you need to read
+  another module's routes over loopback (`http://127.0.0.1:${shell.port}/api/
+  modules/<id>/…`). Never guess it.
 - Handlers get plain Node `(req, res)`. On a prefix route, `req.wildcard` is
   the matched remainder (leading `/` included) and `req.search` is the query
   string (with `?`, or `''`) — so a proxy rebuilds the upstream path as
@@ -446,7 +518,7 @@ module.exports = {
     return config.pages.map((page) => ({
       id: page.name,                    // stable id, stored with the tile
       name: page.name,                  // picker label AND the tile's title
-      description: page.url,            // optional line under the label
+      description: page.url,            // optional; the picker's tooltip
       settings: { page: page.name },    // preset instance settings
       defaultSize: { w: 4, h: 3 },      // optional per-entry size overrides
       minSize: { w: 2, h: 2 },
@@ -459,6 +531,17 @@ module.exports = {
   keep it fast (answer from state you already hold; don't fetch upstream on
   demand). A throw or a hang (>2 s) falls back to the classic single entry,
   so a dead upstream can't break the picker.
+- `instanceSchema` / `instanceGroups` on an entry replace the module's for
+  tiles added from it — settings that fit that tile, nothing else.
+- `aliases: ['old-id', …]` on an entry names earlier variant ids it stands
+  for: a tile added under one of them (a layout saved by an older version of
+  your module) gets this entry's settings too. A tile whose variant matches
+  no entry and no alias falls back to the module's full `instanceSchema`.
+- Entry `description`s are tooltips in the ＋ picker now, not visible lines —
+  one short sentence.
+- `single: true` on an entry allows at most one such tile per dashboard: the
+  picker greys the entry out once it is placed. Use it for a control surface
+  that would only confuse in duplicate — a send box, a master switch.
 - When the user adds an entry, its `settings` overlay your `instanceSchema`
   defaults in that tile's instance settings, the entry's `name` becomes the
   tile's title, and `moduleApi.variant` carries its `id`.
@@ -496,6 +579,71 @@ per-client `res.write` in try/catch (drop the client on failure). The
 `propresenter-now-next` module is the reference implementation of this
 pattern.
 
+## Working with other modules
+
+Modules don't import each other. When one needs what another knows, it reads
+that module's **own server routes over loopback**, exactly as a browser would:
+`http://127.0.0.1:${shell.port}/api/modules/<id>/…`. The PCO Plan module
+follows ProPresenter this way — it reads `propresenter-now-next`'s `/stream`
+rather than talking to ProPresenter a second time. A consumer must survive the
+provider being disabled, uninstalled, or restarting mid-service (404s and
+dropped connections are normal; retry with backoff and say so in `health()`).
+
+### Offering timers to the Timers module
+
+The Timers module shows timers from anywhere: ProPresenter, LTC, its own
+clock, and any module that offers some. A module offers timers by:
+
+1. Declaring it — `"provides": ["timers"]` in `module.json`. The shell
+   forwards `provides` in `/api/modules`, which is how the Timers module finds
+   providers without a list anyone maintains.
+2. Serving `GET /timers` from its server routes, returning a snapshot:
+
+```json
+{
+  "source": "pco-plan",
+  "label": "PCO Plan",
+  "updatedAt": 1757800000000,
+  "timers": [
+    {
+      "id": "service",
+      "label": "Service",
+      "kind": "elapsed",
+      "state": "running",
+      "startedAt": 1757799000000,
+      "elapsedMs": 1000000,
+      "remainingMs": null,
+      "targetMs": 4500000,
+      "status": { "text": "Welcome & Announcements", "tone": "ok" },
+      "detail": "Item 3 of 12"
+    }
+  ]
+}
+```
+
+| Field | Meaning |
+| --- | --- |
+| `source`, `label` | Your module id, and the heading the Timers module puts over your timers. |
+| `updatedAt` | ms since epoch when this snapshot was taken. Every duration below is *as of this instant*. |
+| `id` | Stable within your module — the Timers module keys tile settings (shown/hidden, colours) on `source` + `id`. |
+| `kind` | `elapsed` (counts up), `countdown` (counts down to zero), `clock` (a time of day; put the ISO time in `status.text`). |
+| `state` | `running`, `paused`, `stopped` (finished; value frozen), `idle` (exists, hasn't started — a timer that will start at 11:00). |
+| `startedAt` | ms epoch when it last started running; the consumer extrapolates from here, so a running timer never needs a fast poll. |
+| `elapsedMs`, `remainingMs` | The values at `updatedAt`; `null` when not meaningful for the kind. |
+| `targetMs` | Planned length (elapsed) or full length (countdown), or `null`. Lets the consumer colour overruns. |
+| `status` | Optional one-liner the consumer shows beside the time — the current item, "ahead 1:20". `tone`: `ok`, `warn`, `danger`, `muted`. |
+| `detail` | Optional second line. |
+
+The consumer derives the displayed time locally from `startedAt`/`elapsedMs`
+and its own clock, so a snapshot every couple of seconds is plenty — `/timers`
+must be cheap to answer (serve from state you already hold; never call
+upstream to answer it). Optionally also serve `GET /timers/stream` as SSE
+(`event: timers`, `data:` the same object, on every change plus a heartbeat
+comment every 15 s); the consumer uses the stream when it exists and polls
+`/timers` otherwise. Only offer timers a production tech would want on a
+wall — the Timers module lets them hide any of them per tile, but every entry
+you add is a decision someone has to make.
+
 ## Complete minimal example
 
 A working clock — copy-paste this as your starter. (A slightly fancier
diff --git a/modules/clock/module.json b/modules/clock/module.json
index f95087f..d90051c 100644
--- a/modules/clock/module.json
+++ b/modules/clock/module.json
@@ -1,9 +1,8 @@
 {
   "id": "clock",
   "name": "Clock",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "proddash": ">=1.1.0",
-  "description": "Big booth clock — the smallest possible ProdDash module",
   "client": "client.js",
   "style": "style.css",
   "minSize": { "w": 2, "h": 1 },
@@ -18,7 +17,7 @@
         { "value": "12h", "label": "12-hour" }
       ]
     },
-    "showSeconds": { "type": "boolean", "label": "Show seconds", "default": true },
-    "showDate": { "type": "boolean", "label": "Show date", "default": false }
+    "showSeconds": { "type": "boolean", "label": "Seconds", "default": true },
+    "showDate": { "type": "boolean", "label": "Date", "default": false }
   }
 }
diff --git a/modules/pco-plan/client.js b/modules/pco-plan/client.js
index 8e88a70..5088322 100644
--- a/modules/pco-plan/client.js
+++ b/modules/pco-plan/client.js
@@ -4,10 +4,16 @@
    ProPresenter module's live item; this tile only renders the plan it is
    streamed. What is shown is this tile's own choice (gear menu →
    moduleApi.instanceSettings: show/hide checklist, top-bar template,
-   colors, text size); /admin only holds the connection settings. */
+   colors, item-note categories); the text size is the title bar's A− / A+
+   (saved with the tile, 14 px until someone presses one); /admin only holds
+   the connection settings. */
 
 const REFRESH_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>';
 
+/* the text-size buttons: a drawn − and + at the icon size, like every other header icon */
+const MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>';
+const PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';
+
 export default function create({ root, moduleApi }) {
   let state = null;
   let skew = 0;               // server clock − local clock, ms
@@ -53,7 +59,7 @@ export default function create({ root, moduleApi }) {
 
   const refreshBtn = moduleApi.header.addButton({
     icon: REFRESH_SVG,
-    title: 'Re-read the plan from Planning Center now',
+    title: 'Refresh',
     onClick() {
       refreshBtn.classList.add('active');
       moduleApi.fetch('/refresh', { method: 'POST' })
@@ -67,8 +73,8 @@ export default function create({ root, moduleApi }) {
     moduleApi.saveInstanceSettings({ textSize: Math.min(40, Math.max(9, size + delta)) });
     applyPrefs();
   }
-  moduleApi.header.addButton({ label: 'A−', title: 'Smaller text', onClick: () => bumpTextSize(-1) });
-  moduleApi.header.addButton({ label: 'A+', title: 'Larger text', onClick: () => bumpTextSize(1) });
+  moduleApi.header.addButton({ icon: MINUS_SVG, title: 'Smaller text', onClick: () => bumpTextSize(-1) });
+  moduleApi.header.addButton({ icon: PLUS_SVG, title: 'Larger text', onClick: () => bumpTextSize(1) });
 
   /* ── formatting ─────────────────────────────────────────────────── */
 
@@ -87,6 +93,16 @@ export default function create({ root, moduleApi }) {
     return `${sign}${m}:${String(sec).padStart(2, '0')}`;
   }
 
+  /** "Starts in": under a day like fmtDur; a day or more reads "2 Days, 05:12:44". */
+  function fmtStartsIn(totalSec) {
+    const s = Math.max(0, Math.round(totalSec));
+    const days = Math.floor(s / 86400);
+    if (!days) return fmtDur(s);
+    const rest = s % 86400;
+    const pad = (v) => String(v).padStart(2, '0');
+    return `${days} ${days === 1 ? 'Day' : 'Days'}, ${pad(Math.floor(rest / 3600))}:${pad(Math.floor((rest % 3600) / 60))}:${pad(rest % 60)}`;
+  }
+
   function fmtMinutes(totalSec) {
     const m = Math.round(totalSec / 60);
     if (m < 60) return `${m} min`;
@@ -121,10 +137,19 @@ export default function create({ root, moduleApi }) {
     });
   }
 
+  /**
+   * Which note categories this tile shows. Unset (never chosen in the gear
+   * window) means every category, including ones Planning Center gains
+   * later; an array is exactly those, by name. A layout saved before the
+   * categories were a list holds a comma-separated string — read as that
+   * list, blank as unset.
+   */
   function noteFilter() {
-    const raw = String(cfg().noteCategories || '');
-    const wanted = raw.split(',').map((s) => s.trim().toLowerCase()).filter(Boolean);
-    return wanted.length ? (note) => wanted.includes(String(note.category || '').toLowerCase()) : () => true;
+    const raw = cfg().noteCategories;
+    const names = Array.isArray(raw) ? raw : String(raw ?? '').split(',');
+    const wanted = new Set(names.map((s) => String(s).trim().toLowerCase()).filter(Boolean));
+    if (!Array.isArray(raw) && !wanted.size) return () => true;
+    return (note) => wanted.has(String(note.category || '').trim().toLowerCase());
   }
 
   /* ── status dot ─────────────────────────────────────────────────── */
@@ -209,36 +234,55 @@ export default function create({ root, moduleApi }) {
     renderClock();
   }
 
+  /**
+   * The header clock follows the service the server says owns the clock
+   * (state.service: idle → running → stopped, by schedule or by the admin's
+   * ProPresenter document cues): a countdown before it, the running time
+   * while it runs (with ahead/behind when following ProPresenter), the final
+   * time once it has ended.
+   */
   function renderClock() {
     const plan = state?.plan;
     const live = state?.live || {};
+    const svc = state?.service || {};
     clockLabelEl.textContent = '';
     clockValueEl.textContent = '';
     clockValueEl.className = 'pp-clock-value';
     if (!plan || headEl.hidden) return;
     const now = serverNow();
-    if (on('showRunningClock') && live.following && live.serviceStartedAt) {
+    const startedAt = svc.startedAt || live.serviceStartedAt || 0;
+    if (on('showRunningClock') && svc.phase === 'running' && startedAt) {
       clockLabelEl.textContent = 'Running';
-      clockValueEl.textContent = fmtDur((now - live.serviceStartedAt) / 1000);
-      // Ahead of / behind the plan: elapsed minus what the completed items were planned to take.
-      const done = state.items.filter((it) => live.history?.[it.id]?.endedAt);
-      const planned = done.reduce((sum, it) => sum + (it.length || 0), 0);
-      const actual = done.reduce((sum, it) => sum + (live.history[it.id].endedAt - live.history[it.id].startedAt) / 1000, 0);
-      const drift = actual - planned;
-      if (planned && Math.abs(drift) >= 30) {
-        clockLabelEl.textContent = `Running · ${drift > 0 ? 'behind' : 'ahead'} ${fmtDur(Math.abs(drift))}`;
-        clockValueEl.classList.add(drift > 0 ? 'is-behind' : 'is-ahead');
+      clockValueEl.textContent = fmtDur((now - startedAt) / 1000);
+      if (live.following) {
+        // Ahead of / behind the plan: elapsed minus what the completed items were planned to take.
+        const done = state.items.filter((it) => live.history?.[it.id]?.endedAt);
+        const planned = done.reduce((sum, it) => sum + (it.length || 0), 0);
+        const actual = done.reduce((sum, it) => sum + (live.history[it.id].endedAt - live.history[it.id].startedAt) / 1000, 0);
+        const drift = actual - planned;
+        if (planned && Math.abs(drift) >= 30) {
+          clockLabelEl.textContent = `Running · ${drift > 0 ? 'behind' : 'ahead'} ${fmtDur(Math.abs(drift))}`;
+          clockValueEl.classList.add(drift > 0 ? 'is-behind' : 'is-ahead');
+        }
       }
       return;
     }
-    if (on('showCountdown') && plan.serviceStartsAt && plan.serviceStartsAt > now) {
-      clockLabelEl.textContent = 'Starts in';
-      clockValueEl.textContent = fmtDur((plan.serviceStartsAt - now) / 1000);
+    if (on('showRunningClock') && svc.phase === 'stopped' && startedAt && svc.endedAt) {
+      clockLabelEl.textContent = 'Ended';
+      clockValueEl.textContent = fmtDur((svc.endedAt - startedAt) / 1000);
       return;
     }
-    if (on('showRunningClock') && plan.serviceStartsAt) {
-      clockLabelEl.textContent = 'Since start';
-      clockValueEl.textContent = fmtDur((now - plan.serviceStartsAt) / 1000);
+    const startsAt = svc.startsAt || plan.serviceStartsAt || 0;
+    if (on('showCountdown') && startsAt > now) {
+      clockLabelEl.textContent = 'Starts in';
+      clockValueEl.textContent = fmtStartsIn((startsAt - now) / 1000);
+      return;
+    }
+    if (on('showRunningClock') && startsAt) {
+      // Past the scheduled start and not started: waiting for the admin's
+      // start document to go live in ProPresenter (or its failsafe).
+      clockLabelEl.textContent = 'Scheduled';
+      clockValueEl.textContent = fmtClock(startsAt);
     }
   }
 
diff --git a/modules/pco-plan/matching.js b/modules/pco-plan/matching.js
new file mode 100644
index 0000000..0ed052b
--- /dev/null
+++ b/modules/pco-plan/matching.js
@@ -0,0 +1,85 @@
+'use strict';
+
+/**
+ * Title matching for the PCO Plan module — the one answer to "is this
+ * ProPresenter document that Planning Center thing?", used twice:
+ *
+ *   - mapping the document ProPresenter has live to a plan item (the
+ *     highlight and the item runtimes), and
+ *   - recognising the documents an admin picked as the service start / end
+ *     cues (see service-timing.js).
+ *
+ * A ProPresenter name and a Planning Center title rarely agree letter for
+ * letter ("This Is The Day - [ Full ]" vs "This Is The Day"), so both sides
+ * are tidied the way propresenter-core.cleanItemName does (tags in brackets,
+ * leading date codes and dash separators dropped), lower-cased, stripped of
+ * punctuation and compared:
+ *
+ *   1.00  identical after tidying     "Post-Service Loop"  ≈ "Post Service Loop"
+ *   0.85  one contains the other      "Welcome"            ≈ "Welcome & Announcements"
+ *   Dice  2·shared words ÷ all words  "Pre Service Loop"   vs "Post Service Loop" → 0.67
+ *
+ * Filler words ("the", "of", "and"…) are ignored. The thresholds:
+ *
+ *   MATCH_THRESHOLD   0.6   plan items — two of three words is enough, because
+ *                           the item that scores best *and* is next in the
+ *                           plan wins, so a near miss lands on the right row.
+ *   TRIGGER_THRESHOLD 0.75  service cues — a cue starts or freezes the service
+ *                           clock, so one wrong word must not fire it: the
+ *                           pre-service loop (0.67 against "Post Service Loop")
+ *                           stays a non-match, while a renamed
+ *                           "Post-Service Loop", a tagged "Post Service Loop
+ *                           [Full]" (1.0) or a shortened "Post Service" (0.85)
+ *                           still trigger.
+ */
+
+const MATCH_THRESHOLD = 0.6;
+const TRIGGER_THRESHOLD = 0.75;
+
+/** Same title tidying as propresenter-core.cleanItemName (drops [tags], date codes). */
+function cleanTitle(raw) {
+  const original = String(raw || '').trim();
+  let s = original;
+  s = s.replace(/[[({][^\])}]*[\])}]/g, ' ');
+  s = s.replace(/^\s*\d{6,8}\b[\s\-–—:.]*/, '');
+  s = s.replace(/\s[-–—]+\s/g, ' ');
+  s = s.replace(/^[\s\-–—:.]+|[\s\-–—:.]+$/g, '');
+  s = s.replace(/\s{2,}/g, ' ').trim();
+  return s || original;
+}
+
+function normalize(raw) {
+  return cleanTitle(raw)
+    .toLowerCase()
+    .replace(/&/g, ' and ')
+    .replace(/[’'`]/g, '')
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim();
+}
+
+const STOPWORDS = new Set(['the', 'a', 'an', 'of', 'and', 'to', 'in', 'is', 'my', 'your', 'our']);
+function tokens(norm) {
+  return new Set(norm.split(' ').filter((t) => t && !STOPWORDS.has(t)));
+}
+
+/** 0..1 similarity between two titles. */
+function similarity(a, b) {
+  const na = normalize(a);
+  const nb = normalize(b);
+  if (!na || !nb) return 0;
+  if (na === nb) return 1;
+  if (na.length >= 4 && nb.length >= 4 && (na.includes(nb) || nb.includes(na))) return 0.85;
+  const ta = tokens(na);
+  const tb = tokens(nb);
+  if (!ta.size || !tb.size) return 0;
+  let common = 0;
+  for (const t of ta) if (tb.has(t)) common += 1;
+  return (2 * common) / (ta.size + tb.size); // Dice coefficient
+}
+
+/** Does a live ProPresenter document count as the cue document an admin picked? */
+function isCue(liveName, cueDocument) {
+  return Boolean(cueDocument) && similarity(liveName, cueDocument) >= TRIGGER_THRESHOLD;
+}
+
+module.exports = { MATCH_THRESHOLD, TRIGGER_THRESHOLD, cleanTitle, normalize, similarity, isCue };
diff --git a/modules/pco-plan/module.json b/modules/pco-plan/module.json
index 25537dd..7899921 100644
--- a/modules/pco-plan/module.json
+++ b/modules/pco-plan/module.json
@@ -1,9 +1,10 @@
 {
   "id": "pco-plan",
   "name": "PCO Plan",
-  "version": "1.3.0",
-  "proddash": ">=1.3.0",
-  "description": "Order of service from Planning Center Services, following ProPresenter live",
+  "version": "1.4.0",
+  "proddash": ">=1.4.0",
+  "description": "Order of service from Planning Center Services",
+  "provides": ["timers"],
   "client": "client.js",
   "server": "server.js",
   "style": "style.css",
@@ -12,13 +13,16 @@
   "configGroups": {
     "Planning Center credentials": {
       "collapsed": "whenSet",
-      "help": "Create a Personal Access Token at api.planningcenteronline.com (Application ID + Secret), or paste an OAuth 2.0 access token instead. Saved secrets never reach browsers."
+      "help": "Create a Personal Access Token at api.planningcenteronline.com and paste its Client ID + Secret here, or paste an OAuth 2.0 access token instead. Saved secrets never reach browsers."
+    },
+    "Service timing": {
+      "help": "Each service in the plan takes its turn owning the service clock: the next one takes over Pre-roll minutes before its scheduled start, and the elapsed clock, item timing and countdown start afresh for it. A service starts at its scheduled time — or, with document triggers on, the moment the chosen Start document goes live in ProPresenter (falling back to the schedule after the start failsafe) — and ends when the End document goes live, or when the next service takes over. The document lists hold what ProPresenter has shown or listed since ProdDash started plus what is saved here; names are matched loosely, so a renamed \"Post-Service Loop\" still counts."
     }
   },
   "configSchema": {
     "appId": {
       "type": "string",
-      "label": "Application ID",
+      "label": "Client ID",
       "default": "",
       "group": "Planning Center credentials"
     },
@@ -30,7 +34,7 @@
     },
     "accessToken": {
       "type": "password",
-      "label": "OAuth 2.0 access token (instead of Application ID + Secret)",
+      "label": "OAuth 2.0 access token (instead of Client ID + Secret)",
       "default": "",
       "group": "Planning Center credentials"
     },
@@ -38,8 +42,7 @@
       "type": "select",
       "label": "Service type",
       "default": "",
-      "optionsRoute": "/service-types",
-      "help": "Your Planning Center Services folders appear as groups in this list; pick the service type whose plans the tiles follow. Save the credentials first if the list is empty."
+      "optionsRoute": "/service-types"
     },
     "planId": {
       "type": "select",
@@ -47,18 +50,67 @@
       "default": "",
       "options": [{ "value": "", "label": "Automatic — today's plan, else the next upcoming" }],
       "optionsRoute": "/plans",
-      "optionsDependsOn": "serviceTypeId",
-      "help": "Leave on Automatic for services. Pin a specific plan for rehearsals or to review a past service."
+      "optionsDependsOn": "serviceTypeId"
     },
     "pollSeconds": {
       "type": "number",
-      "label": "Re-read the plan every N seconds",
+      "label": "Refresh Interval (s)",
       "default": 30
     },
     "followProPresenter": {
       "type": "switch",
-      "label": "Follow the ProPresenter module's live item to highlight the current plan item and time it",
+      "label": "Follow ProPresenter Module",
       "default": true
+    },
+    "preRollMinutes": {
+      "type": "number",
+      "label": "Pre-roll (min)",
+      "default": 30,
+      "group": "Service timing",
+      "help": "How long before a service's scheduled start the clock, item timing and countdown switch to it."
+    },
+    "useDocumentTriggers": {
+      "type": "switch",
+      "label": "ProPresenter document triggers",
+      "default": false,
+      "group": "Service timing"
+    },
+    "serviceStartTrigger": {
+      "type": "select",
+      "label": "Service start",
+      "default": "schedule",
+      "group": "Service timing",
+      "showWhen": "useDocumentTriggers",
+      "options": [
+        { "value": "schedule", "label": "Scheduled service time" },
+        { "value": "document", "label": "ProPresenter document" }
+      ]
+    },
+    "serviceStartDocument": {
+      "type": "select",
+      "label": "Start document",
+      "default": "",
+      "group": "Service timing",
+      "showWhen": "useDocumentTriggers",
+      "optionsRoute": "/documents",
+      "help": "The document that goes live as the service begins."
+    },
+    "startGraceMinutes": {
+      "type": "number",
+      "label": "Start failsafe (min)",
+      "default": 10,
+      "group": "Service timing",
+      "showWhen": "useDocumentTriggers",
+      "help": "Without the start document this long after the scheduled start, the service counts from the scheduled start anyway."
+    },
+    "serviceEndDocument": {
+      "type": "select",
+      "label": "End document",
+      "default": "",
+      "group": "Service timing",
+      "showWhen": "useDocumentTriggers",
+      "optionsRoute": "/documents",
+      "help": "The document that goes live as the service ends; it freezes the service clock."
     }
   },
   "instanceGroups": {
@@ -69,32 +121,48 @@
       "collapsed": false,
       "columns": 2
     },
+    "Item notes": {
+      "toggle": "showNotes"
+    },
     "Show / hide": {
       "collapsed": true,
       "columns": 3,
-      "help": "Untick anything this tile should not show."
+      "help": "Switch off anything this tile should not show."
     }
   },
   "instanceSchema": {
-    "textSize": { "type": "number", "label": "Text size (px)", "default": 14 },
     "autoScroll": { "type": "boolean", "label": "Keep the current item in view", "default": true },
-    "noteCategories": {
-      "type": "string",
-      "label": "Item note categories to show (comma-separated, blank = all)",
-      "default": ""
-    },
     "headerTemplate": {
-      "type": "string",
+      "type": "template",
       "label": "Top bar text",
       "default": "{series} • {part} | {serviceType} • {date}",
       "group": "Top bar",
-      "help": "Placeholders: {series} series name · {part} plan title / part number · {serviceType} · {date} · {shortDate} · {time} service start time · {length} planned length · {items} item count. Use • between items (an item whose placeholders are empty or hidden is dropped) and | to start a second line."
+      "variables": [
+        { "value": "{series}", "label": "Series" },
+        { "value": "{part}", "label": "Part / plan title" },
+        { "value": "{serviceType}", "label": "Service type" },
+        { "value": "{date}", "label": "Date" },
+        { "value": "{shortDate}", "label": "Short date" },
+        { "value": "{time}", "label": "Service time" },
+        { "value": "{length}", "label": "Planned length" },
+        { "value": "{items}", "label": "Item count" }
+      ],
+      "help": "Use • between items and | to start a second line."
     },
     "keyColor": { "type": "color", "label": "Song key", "default": "#4ea1ff", "group": "Colors" },
     "headerColor": { "type": "color", "label": "Section headers", "default": "#2ee59a", "group": "Colors" },
     "currentColor": { "type": "color", "label": "Current item", "default": "#2ee59a", "group": "Colors" },
     "headerGradient": { "type": "boolean", "label": "Fade header color to the right", "default": true, "group": "Colors" },
     "tintByType": { "type": "boolean", "label": "Tint items by type (song / media / other)", "default": false, "group": "Colors" },
+    "showNotes": { "type": "switch", "label": "Item notes", "default": true, "group": "Item notes" },
+    "noteCategories": {
+      "type": "multiselect",
+      "label": "Categories",
+      "group": "Item notes",
+      "optionsRoute": "/note-categories",
+      "columns": 3,
+      "allByDefault": true
+    },
     "showTopBar": { "type": "boolean", "label": "Top bar", "default": true, "group": "Show / hide" },
     "showSeries": { "type": "boolean", "label": "Series name", "default": true, "group": "Show / hide" },
     "showPart": { "type": "boolean", "label": "Part # / plan title", "default": true, "group": "Show / hide" },
@@ -113,7 +181,6 @@
     "showArrangement": { "type": "boolean", "label": "Song arrangement", "default": false, "group": "Show / hide" },
     "showSongAuthor": { "type": "boolean", "label": "Song author / CCLI", "default": false, "group": "Show / hide" },
     "showDescription": { "type": "boolean", "label": "Item description", "default": true, "group": "Show / hide" },
-    "showNotes": { "type": "boolean", "label": "Item notes", "default": true, "group": "Show / hide" },
     "showPreService": { "type": "boolean", "label": "Pre-service items", "default": true, "group": "Show / hide" },
     "showPostService": { "type": "boolean", "label": "Post-service items", "default": true, "group": "Show / hide" },
     "showNowIndicator": { "type": "boolean", "label": "Now indicator", "default": true, "group": "Show / hide" },
diff --git a/modules/pco-plan/server.js b/modules/pco-plan/server.js
index 0b3c937..e1dd0b3 100644
--- a/modules/pco-plan/server.js
+++ b/modules/pco-plan/server.js
@@ -13,23 +13,36 @@
  *   GET  /service-types → { options } for the admin "Service type" select,
  *                         grouped by Planning Center folder path
  *   GET  /plans?serviceTypeId=… → { options } for the admin "Plan" select
+ *   GET  /documents → { options } for the admin start / end document selects
+ *                     (documents ProPresenter has shown or lists — see below)
+ *   GET  /note-categories → { options } for a tile's "Item notes" categories:
+ *                     the service type's item note categories, by name
+ *   GET  /timers        → snapshot for the Timers module (guide: "Offering
+ *   GET  /timers/stream → SSE, `timers` events   timers to the Timers module")
  *
  * Planning Center API v2 (https://api.planningcenteronline.com/services/v2):
- *   Auth: Personal Access Token (HTTP Basic app_id:secret) or an OAuth 2.0
+ *   Auth: Personal Access Token (HTTP Basic client_id:secret) or an OAuth 2.0
  *   bearer token. Responses are JSON:API — `data`, `included`, `links.next`.
  *   GET /folders, /service_types                       (setup browsing)
  *   GET /service_types/{st}/plans?filter=future|past   (pick the plan)
  *   GET /service_types/{st}/plans/{id}                 (title, dates…)
  *   GET …/plans/{id}/plan_times                        (service start times)
  *   GET …/plans/{id}/items?include=song,arrangement,item_notes
+ *   GET /service_types/{st}/item_note_categories       (note category names)
  *
- * Phase 2 — following ProPresenter: instead of talking to ProPresenter a
- * second time, this module reads the propresenter-now-next module's own SSE
- * feed over loopback (/api/modules/propresenter-now-next/stream) and matches
- * the live presentation name to a plan item. Item start/end timestamps are
- * tracked here, once, so every tile agrees on the runtime. The shell's port
- * is guessed the way the shell decides it and then confirmed from the Host
- * header of the first tile request.
+ * Following ProPresenter: instead of talking to ProPresenter a second time,
+ * this module reads the propresenter-now-next module's own SSE feed over
+ * loopback (/api/modules/propresenter-now-next/stream, on shell.port) and
+ * matches the live presentation name to a plan item. Item start/end
+ * timestamps are tracked here, once, so every tile agrees on the runtime.
+ *
+ * Service timing: a plan's services (9:00, 11:00…) take turns owning the
+ * service clock — the rules live in service-timing.js. A service starts at
+ * its scheduled time, or (admin "Service timing") when a chosen ProPresenter
+ * document goes live, and ends when the chosen end document goes live, with
+ * schedule failsafes for both. The result is offered to the Timers module as
+ * three timers: the service, the current item and the countdown to the
+ * service.
  *
  * PCO_PLAN_API_BASE=http://127.0.0.1:24700 points the module at
  * tools/pco-mock.js for development.
@@ -39,6 +52,16 @@ const http = require('http');
 const fs = require('fs');
 const os = require('os');
 const path = require('path');
+const { MATCH_THRESHOLD, similarity } = require('./matching');
+const {
+  MINUTE,
+  serviceTimes,
+  serviceWindows,
+  selectService,
+  freshService,
+  advance,
+  fmtTime,
+} = require('./service-timing');
 
 const DEFAULT_API_BASE = 'https://api.planningcenteronline.com';
 const API_BASE = String(process.env.PCO_PLAN_API_BASE || DEFAULT_API_BASE).replace(/\/+$/, '');
@@ -56,8 +79,18 @@ const HEARTBEAT_MS = 15000;
 const NOW_NEXT_ID = 'propresenter-now-next';
 const NOW_NEXT_RETRY_MS = 3000;
 const NOW_NEXT_MISSING_RETRY_MS = 15000;
-/** Minimum name-similarity to call a ProPresenter document a plan item. */
-const MATCH_THRESHOLD = 0.6;
+/** How many distinct documents seen live are remembered for the admin selects. */
+const SEEN_DOCUMENTS_MAX = 200;
+/** How long a service type's item note categories are believed before Planning Center is asked again. */
+const NOTE_CATEGORIES_TTL_MS = 10 * MINUTE;
+/**
+ * Service timer tone (the Timers module colours by it): running behind the
+ * plan — completed items over their planned length, plus the current item's
+ * overrun — by BEHIND_WARN_MS is `warn`, by BEHIND_DANGER_MS `danger`; past
+ * the planned total length is `warn`, by more than BEHIND_DANGER_MS `danger`.
+ */
+const BEHIND_WARN_MS = 2 * MINUTE;
+const BEHIND_DANGER_MS = 5 * MINUTE;
 
 /** Set by init(), read by the routes — both are rebuilt together on remount. */
 let current = null;
@@ -76,6 +109,8 @@ function clearedState() {
     plan: null,
     items: [],
     live: clearedLive(),
+    service: clearedService(),
+    timing: null,          // the admin's service-timing choices (no secrets)
   };
 }
 
@@ -90,17 +125,39 @@ function clearedLive() {
     matched: false,       // activeName maps to a plan item
     currentItemId: '',
     currentScore: 0,
-    serviceStartedAt: 0,  // first matched item start, ms epoch
+    serviceStartedAt: 0,  // the service's actual start, ms epoch (0 until it starts)
+    serviceEndedAt: 0,    // …and its end, once it has one
     history: {},          // itemId → { startedAt, endedAt }
   };
 }
 
+/** The service that owns the clock, as tiles and the timers see it. */
+function clearedService() {
+  return {
+    id: '',
+    phase: 'none',        // 'none' (no plan / no services) | 'idle' | 'running' | 'stopped'
+    startedAt: 0,
+    endedAt: 0,
+    startTrigger: '',
+    endTrigger: '',
+    cue: '',
+    name: '',
+    label: '',
+    index: -1,
+    count: 0,
+    startsAt: 0,
+    endsAt: 0,
+    windowFrom: 0,
+    windowUntil: 0,
+  };
+}
+
 /**
- * First guess at the shell's port, so the loopback Now/Next feed lands on this
- * ProdDash before any browser has talked to us. Mirrors how the shell decides:
+ * Fallback for a shell that does not hand us its port (init() without
+ * `shell`, i.e. ProdDash before 1.4.0): guess the way the shell decides —
  * PORT env, then this machine's proddash.json in the data directory, then the
- * checked-in config/proddash.json, then 24500. The guess is corrected from the
- * Host header of the first request that reaches a route (see learnPort).
+ * checked-in config/proddash.json, then 24500 — and correct the guess from
+ * the Host header of the first request that reaches a route (see learnPort).
  */
 function guessShellPort() {
   const env = Number(process.env.PORT);
@@ -138,45 +195,15 @@ function localYmd(d) {
   return `${y}-${m}-${day}`;
 }
 
-/** Same title tidying as propresenter-core.cleanItemName (drops [tags], date codes). */
-function cleanTitle(raw) {
-  const original = String(raw || '').trim();
-  let s = original;
-  s = s.replace(/[[({][^\])}]*[\])}]/g, ' ');
-  s = s.replace(/^\s*\d{6,8}\b[\s\-–—:.]*/, '');
-  s = s.replace(/\s[-–—]+\s/g, ' ');
-  s = s.replace(/^[\s\-–—:.]+|[\s\-–—:.]+$/g, '');
-  s = s.replace(/\s{2,}/g, ' ').trim();
-  return s || original;
-}
-
-function normalize(raw) {
-  return cleanTitle(raw)
-    .toLowerCase()
-    .replace(/&/g, ' and ')
-    .replace(/[’'`]/g, '')
-    .replace(/[^a-z0-9]+/g, ' ')
-    .trim();
-}
-
-const STOPWORDS = new Set(['the', 'a', 'an', 'of', 'and', 'to', 'in', 'is', 'my', 'your', 'our']);
-function tokens(norm) {
-  return new Set(norm.split(' ').filter((t) => t && !STOPWORDS.has(t)));
-}
-
-/** 0..1 similarity between two titles. */
-function similarity(a, b) {
-  const na = normalize(a);
-  const nb = normalize(b);
-  if (!na || !nb) return 0;
-  if (na === nb) return 1;
-  if (na.length >= 4 && nb.length >= 4 && (na.includes(nb) || nb.includes(na))) return 0.85;
-  const ta = tokens(na);
-  const tb = tokens(nb);
-  if (!ta.size || !tb.size) return 0;
-  let common = 0;
-  for (const t of ta) if (tb.has(t)) common += 1;
-  return (2 * common) / (ta.size + tb.size); // Dice coefficient
+/** "1:02:03" / "4:05" for a duration in ms (for logs and status lines). */
+function fmtDur(ms) {
+  const s = Math.max(0, Math.round(Math.abs(Number(ms) || 0) / 1000));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  return h
+    ? `${h}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
+    : `${m}:${String(sec).padStart(2, '0')}`;
 }
 
 /* ── Planning Center client ─────────────────────────────────────────── */
@@ -244,16 +271,6 @@ function createPcoClient(config) {
 
 /* ── plan shaping ───────────────────────────────────────────────────── */
 
-function pickServiceTime(planTimes, nowMs) {
-  const services = planTimes.filter((t) => t.timeType === 'service' && t.startsAt);
-  const pool = services.length ? services : planTimes.filter((t) => t.startsAt);
-  if (!pool.length) return null;
-  pool.sort((a, b) => a.startsAt - b.startsAt);
-  // The service that is running or up next; after the last one, the last one.
-  const upcoming = pool.find((t) => (t.endsAt || t.startsAt + 90 * 60000) > nowMs);
-  return upcoming || pool[pool.length - 1];
-}
-
 /** Scheduled start of every item from the chosen service start time. */
 function scheduleItems(items, serviceStartMs) {
   for (const item of items) item.startsAt = 0;
@@ -280,6 +297,13 @@ function scheduleItems(items, serviceStartMs) {
   }
 }
 
+/** Planned length of the service proper (the "during" items), ms. */
+function plannedLengthMs(items) {
+  return (items || [])
+    .filter((it) => it.servicePosition === 'during')
+    .reduce((sum, it) => sum + (Number(it.length) || 0) * 1000, 0);
+}
+
 function shapeItems(itemsBody) {
   const included = new Map();
   for (const rec of itemsBody.included || []) included.set(`${rec.type}/${rec.id}`, rec);
@@ -344,27 +368,72 @@ function shapePlan(planRec, serviceTypeId, planTimes) {
   };
 }
 
+/** "9:00 service" / "9:00 First Service" — how a service is named in details and logs. */
+function serviceLabel(win) {
+  if (!win || !win.startsAt) return '';
+  const name = String(win.name || '').trim();
+  return `${fmtTime(win.startsAt)} ${name && !/^service$/i.test(name) ? name : 'service'}`;
+}
+
+/** What /timers answers while the module is not running. */
+function emptyTimers(now) {
+  return { source: 'pco-plan', label: 'PCO Plan', updatedAt: now, timers: [] };
+}
+
 /* ── the module ─────────────────────────────────────────────────────── */
 
 module.exports = {
-  init({ config, log }) {
-    const streams = new Set();
+  init({ config, log, shell }) {
+    const streams = new Set();       // /stream clients (tiles)
+    const timerStreams = new Set();  // /timers/stream clients (the Timers module)
     const pco = createPcoClient(config);
     const serviceTypeId = String(config.serviceTypeId || '').trim();
     const pinnedPlanId = String(config.planId || '').trim();
     const pollMs = Math.max(MIN_POLL_S, Number(config.pollSeconds) || 30) * 1000;
     const follow = config.followProPresenter !== false;
 
+    // Service timing choices (admin "Service timing"). A blank number field
+    // reaches us as 0, which is a legitimate choice; an absent one as the
+    // schema default.
+    const minutes = (value, dflt, max) => {
+      const n = Number(value);
+      return Number.isFinite(n) && n >= 0 && value !== undefined && value !== null && value !== ''
+        ? Math.min(max, n)
+        : dflt;
+    };
+    const triggersOn = Boolean(config.useDocumentTriggers);
+    const startDocument = triggersOn ? String(config.serviceStartDocument || '').trim() : '';
+    const endDocument = triggersOn ? String(config.serviceEndDocument || '').trim() : '';
+    const wantsDocumentStart = triggersOn && String(config.serviceStartTrigger || 'schedule') === 'document';
+    const timing = {
+      preRollMs: minutes(config.preRollMinutes, 30, 240) * MINUTE,
+      startGraceMs: minutes(config.startGraceMinutes, 10, 120) * MINUTE,
+      triggersOn,
+      startMode: wantsDocumentStart && startDocument ? 'document' : 'schedule',
+      startDocument,
+      endDocument,
+    };
+    const serviceOpts = {
+      startMode: timing.startMode,
+      startDocument: timing.startDocument,
+      endDocument: timing.endDocument,
+      startGraceMs: timing.startGraceMs,
+    };
+    // Document cues need the ProPresenter feed even when the tiles don't follow it.
+    const wantFeed = follow || triggersOn;
+
     let state = clearedState();
     state.configured = pco.configured;
     state.serviceTypeSet = Boolean(serviceTypeId);
     state.serviceType = { id: serviceTypeId, name: '' };
     state.live.following = follow;
+    state.timing = { ...timing };
 
     let stopped = false;
     let pollTimer = null;
     let inFlight = null;
     let lastFrame = '';
+    let lastTimersSig = '';
 
     /* — broadcasting — */
 
@@ -372,19 +441,40 @@ module.exports = {
       return JSON.stringify(state);
     }
 
+    function writeAll(set, payload) {
+      for (const res of set) {
+        try {
+          res.write(payload);
+        } catch {
+          set.delete(res);
+        }
+      }
+    }
+
     function broadcast(force) {
       const frame = frameOf();
       if (!force && frame === lastFrame) return;
       lastFrame = frame;
       if (!streams.size) return;
-      const payload = `event: state\ndata: ${JSON.stringify({ state, now: Date.now() })}\n\n`;
-      for (const res of streams) {
-        try {
-          res.write(payload);
-        } catch {
-          streams.delete(res);
-        }
-      }
+      writeAll(streams, `event: state\ndata: ${JSON.stringify({ state, now: Date.now() })}\n\n`);
+    }
+
+    /**
+     * The timers change "structurally" far less often than their displayed
+     * value does (the consumer extrapolates from startedAt), so a frame goes
+     * out only when something other than the running values changed.
+     */
+    function timersSignature(snap) {
+      return JSON.stringify(snap.timers.map((t) => [t.id, t.state, t.startedAt, t.targetMs, t.status, t.detail]));
+    }
+
+    function broadcastTimers(force) {
+      const snap = timersSnapshot(Date.now());
+      const sig = timersSignature(snap);
+      if (!force && sig === lastTimersSig) return;
+      lastTimersSig = sig;
+      if (!timerStreams.size) return;
+      writeAll(timerStreams, `event: timers\ndata: ${JSON.stringify(snap)}\n\n`);
     }
 
     /* — plan reading — */
@@ -474,32 +564,74 @@ module.exports = {
         }
       }
       if (!planRec) {
+        if (state.plan) log('no plan found any more — service timing reset');
         state.plan = null;
         state.items = [];
         state.reachable = true;
         state.lastError = '';
         state.lastFetched = Date.now();
+        syncServiceSafe(Date.now(), null);
         return;
       }
       const [planTimes, items] = await Promise.all([readPlanTimes(planRec.id), readItems(planRec.id)]);
       const plan = shapePlan(planRec, serviceTypeId, planTimes);
-      const service = pickServiceTime(planTimes, Date.now());
-      if (service) {
-        plan.serviceStartsAt = service.startsAt;
-        plan.serviceEndsAt = service.endsAt;
-        plan.serviceName = service.name;
-      }
-      scheduleItems(items, plan.serviceStartsAt || plan.sortDate);
-      if (state.plan?.id !== plan.id) {
-        if (state.plan) log(`plan changed: ${state.plan.id} → ${plan.id} (${plan.dates} ${plan.title})`);
+      const planChanged = state.plan?.id !== plan.id;
+      if (planChanged) {
+        if (state.plan) log(`plan changed: ${state.plan.id} → ${plan.id} (${plan.dates} ${plan.title}) — service timing reset`);
         else log(`following plan ${plan.id}: ${plan.dates} ${plan.title || ''}`.trim());
-        resetLiveTracking();
       }
       state.plan = plan;
       state.items = items;
       state.reachable = true;
       state.lastError = '';
       state.lastFetched = Date.now();
+      if (planChanged) {
+        // A new plan: the next syncService picks its first window afresh
+        // (and resets the item timing while doing so).
+        win = null;
+        svc = freshService(null);
+      }
+      // Service selection, item schedule and the running clock all follow
+      // from the plan's service times — decided in one place.
+      syncServiceSafe(Date.now(), null);
+    }
+
+    /* — item note categories (a tile's "Item notes" → Categories switches) — */
+
+    let noteCategories = { at: 0, options: [] }; // the last good answer from Planning Center
+    let noteCategoriesInFlight = null;
+
+    /**
+     * The service type's item note categories, by name — notes are matched
+     * to categories by name, so the names are the values. Believed for
+     * NOTE_CATEGORIES_TTL_MS, read once however many tiles ask at the same
+     * moment; a failed re-read keeps serving the last good list. A module
+     * that cannot ask (no credentials, no service type) answers an empty
+     * list — the gear window then says there is nothing to choose from yet.
+     */
+    async function noteCategoryOptions() {
+      if (!pco.configured || !serviceTypeId) return [];
+      if (Date.now() - noteCategories.at < NOTE_CATEGORIES_TTL_MS) return noteCategories.options;
+      if (!noteCategoriesInFlight) {
+        noteCategoriesInFlight = (async () => {
+          const body = await pco.getAll(`${SERVICES}/service_types/${encodeURIComponent(serviceTypeId)}/item_note_categories`);
+          const seen = new Set();
+          const options = (body.data || [])
+            .filter((c) => !c?.attributes?.deleted_at)
+            .map((c) => ({ name: String(c.attributes?.name || '').trim(), sequence: Number(c.attributes?.sequence) || 0 }))
+            .sort((a, b) => a.sequence - b.sequence)
+            .filter((c) => c.name && !seen.has(c.name.toLowerCase()) && seen.add(c.name.toLowerCase()))
+            .map((c) => ({ value: c.name, label: c.name }));
+          noteCategories = { at: Date.now(), options };
+          return options;
+        })().finally(() => { noteCategoriesInFlight = null; });
+      }
+      try {
+        return await noteCategoriesInFlight;
+      } catch (err) {
+        log(`item note categories read failed: ${err?.message || err}`);
+        return noteCategories.options;
+      }
     }
 
     function schedulePoll(ms) {
@@ -523,6 +655,7 @@ module.exports = {
           log(`plan read failed: ${state.lastError}`);
         }
         broadcast();
+        broadcastTimers();
         schedulePoll(delay);
       })();
       try {
@@ -532,29 +665,324 @@ module.exports = {
       }
     }
 
-    /* — phase 2: follow the ProPresenter Now/Next feed over loopback — */
+    /* — service timing: which service owns the clock, and its start / end — */
+
+    let windows = [];                 // serviceWindows() of the current plan
+    let win = null;                   // the window that owns the clock now
+    let svc = freshService(null);     // its idle → running → stopped state (service-timing.js)
+    let lastTimingError = '';
+    let countdownTargetId = '';
+    let countdownSince = 0;
+
+    /** A plan with no plan times still has a date — treat it as one service starting then. */
+    function planServices(plan) {
+      if (serviceTimes(plan.planTimes).length) return plan.planTimes;
+      return plan.sortDate ? [{ id: 'plan', name: '', timeType: 'service', startsAt: plan.sortDate, endsAt: 0 }] : [];
+    }
+
+    /** The plan's header times and every item's scheduled start follow the current service. */
+    function applyServiceTimes() {
+      const plan = state.plan;
+      if (!plan) return;
+      plan.serviceStartsAt = win ? win.startsAt : 0;
+      plan.serviceEndsAt = win ? win.endsAt : 0;
+      plan.serviceName = win ? win.name : '';
+      scheduleItems(state.items, plan.serviceStartsAt || plan.sortDate);
+    }
+
+    /** state.service and the live mirror fields, from `win` + `svc`. */
+    function mirrorService() {
+      const finite = (v) => (Number.isFinite(v) ? v : 0);
+      state.service = {
+        ...clearedService(),
+        ...svc,
+        name: win ? win.name : '',
+        label: serviceLabel(win),
+        index: win ? win.index : -1,
+        count: win ? win.count : 0,
+        startsAt: win ? win.startsAt : 0,
+        endsAt: win ? win.endsAt : 0,
+        windowFrom: win ? finite(win.windowFrom) : 0,
+        windowUntil: win ? finite(win.windowUntil) : 0,
+      };
+      state.live.serviceStartedAt = svc.phase === 'running' || svc.phase === 'stopped' ? svc.startedAt : 0;
+      state.live.serviceEndedAt = svc.phase === 'stopped' ? svc.endedAt : 0;
+    }
+
+    /**
+     * Bring the service timing up to `now`, optionally with a document that
+     * has just gone live in ProPresenter (`cue`). Selects the window that
+     * owns the clock (flipping — and resetting item timing — when the next
+     * service's window has opened), then advances that service's own
+     * idle → running → stopped state. Pure logic in service-timing.js.
+     */
+    function syncService(now, cue) {
+      const plan = state.plan;
+      if (!plan) {
+        if (win || svc.phase !== 'none') {
+          win = null;
+          windows = [];
+          svc = freshService(null);
+          mirrorService();
+        }
+        return;
+      }
+      const endedAt = svc.phase === 'stopped' && svc.endedAt ? { [svc.id]: svc.endedAt } : {};
+      windows = serviceWindows(planServices(plan), {
+        preRollMs: timing.preRollMs,
+        plannedMs: plannedLengthMs(state.items),
+        endedAt,
+      });
+      const next = selectService(windows, now);
+      if (!next) {
+        // A plan with neither service times nor a date: nothing to time.
+        if (win || svc.phase !== 'none') {
+          const hadWindow = Boolean(win);
+          win = null;
+          svc = freshService(null);
+          if (hadWindow) resetLiveTracking();
+          applyServiceTimes();
+          mirrorService();
+        }
+        return;
+      }
+      if (!win || win.id !== next.id) {
+        // Leaving a window: a service still running is stopped at the boundary
+        // (the "next service's start" failsafe), then the new service takes
+        // over with fresh item timing.
+        if (win && svc.id === win.id && svc.phase === 'running') {
+          const leaving = windows.find((w) => w.id === win.id) || win;
+          const out = advance(svc, leaving, serviceOpts, Math.max(now, leaving.failsafeEndAt), null);
+          const endedAtMs = out.changed ? Math.min(out.svc.endedAt, now) : now;
+          log(`service ${serviceLabel(leaving)} ${out.changed ? out.event : 'left its window while running'} (ran ${fmtDur(endedAtMs - svc.startedAt)})`);
+        }
+        win = next;
+        svc = freshService(win);
+        log(`service window → ${serviceLabel(win)} (${win.index + 1} of ${win.count}; scheduled start ${fmtTime(win.startsAt)}, start by ${timing.startMode}${timing.endDocument ? ', end by document' : ''})`);
+        resetLiveTracking();
+        applyServiceTimes();
+      } else {
+        win = next; // refreshed fields — the plan's times may have been edited
+        if (plan.serviceStartsAt !== win.startsAt || plan.serviceEndsAt !== win.endsAt || plan.serviceName !== win.name) {
+          applyServiceTimes();
+        }
+      }
+      const out = advance(svc, win, serviceOpts, now, cue);
+      if (out.changed) {
+        svc = out.svc;
+        log(`service ${serviceLabel(win)} ${out.event}`);
+      }
+      mirrorService();
+    }
+
+    /** syncService that can never take the plan display down with it. */
+    function syncServiceSafe(now, cue) {
+      try {
+        syncService(now, cue);
+      } catch (err) {
+        const msg = err?.message || String(err);
+        if (msg !== lastTimingError) {
+          lastTimingError = msg;
+          log(`service timing error (plan display unaffected): ${msg}`);
+        }
+      }
+    }
+
+    /* — timers offered to the Timers module — */
+
+    /** How far behind the plan the service runs, ms (negative = ahead). */
+    function behindMs(now) {
+      const history = state.live.history || {};
+      let drift = 0;
+      let any = false;
+      for (const it of state.items) {
+        const h = history[it.id];
+        if (!h) continue;
+        if (h.endedAt) {
+          drift += (h.endedAt - h.startedAt) - (it.length || 0) * 1000;
+          any = true;
+        } else if (it.length) {
+          const over = (now - h.startedAt) - it.length * 1000;
+          if (over > 0) {
+            drift += over;
+            any = true;
+          }
+        }
+      }
+      return any ? drift : 0;
+    }
+
+    function serviceTone(elapsedMs, plannedMs, behind) {
+      const over = plannedMs ? elapsedMs - plannedMs : 0;
+      if (over > BEHIND_DANGER_MS || behind >= BEHIND_DANGER_MS) return 'danger';
+      if (over > 0 || behind >= BEHIND_WARN_MS) return 'warn';
+      return 'ok';
+    }
+
+    /** The service the countdown counts to: the idle current one, or the next one once this one ended. */
+    function countdownTarget() {
+      if (!win) return null;
+      if (svc.phase === 'idle') return win;
+      if (svc.phase === 'stopped') return windows[win.index + 1] || null;
+      return null;
+    }
+
+    function timersSnapshot(now) {
+      const plan = state.plan;
+      const live = state.live;
+      const items = state.items.filter((it) => it.itemType !== 'header');
+      const idx = live.currentItemId ? items.findIndex((it) => it.id === live.currentItemId) : -1;
+      const item = idx >= 0 ? items[idx] : null;
+      const hist = item ? live.history[item.id] : null;
+      const label = serviceLabel(win);
+      const itemDetail = item ? `Item ${idx + 1} of ${items.length}` : '';
+      const itemTitle = item ? item.title || item.song?.title || '(untitled)' : '';
+      const plannedMs = plannedLengthMs(state.items)
+        || (plan?.totalLength ? plan.totalLength * 1000 : 0)
+        || (win && win.endsAt > win.startsAt ? win.endsAt - win.startsAt : 0)
+        || null;
+      const timer = (id, name, kind) => ({
+        id,
+        label: name,
+        kind,
+        state: 'idle',
+        startedAt: null,
+        elapsedMs: null,
+        remainingMs: null,
+        targetMs: null,
+        status: null,
+        detail: '',
+      });
+
+      // "Service" — elapsed since the service started, against its planned length.
+      const service = timer('service', 'Service', 'elapsed');
+      service.targetMs = plannedMs;
+      if (!plan || !win) {
+        service.status = { text: plan ? 'No service times in this plan' : 'No plan', tone: 'muted' };
+      } else if (svc.phase === 'running') {
+        const elapsed = now - svc.startedAt;
+        const behind = behindMs(now);
+        service.state = 'running';
+        service.startedAt = svc.startedAt;
+        service.elapsedMs = elapsed;
+        // The live item is the headline; without one (not following
+        // ProPresenter, nothing matched yet) say how far behind, else when
+        // the service began.
+        service.status = {
+          text: itemTitle || (behind >= BEHIND_WARN_MS ? `Behind ${fmtDur(behind)}` : `Started ${fmtTime(svc.startedAt)}`),
+          tone: serviceTone(elapsed, plannedMs, behind),
+        };
+        service.detail = [label, itemDetail].filter(Boolean).join(' · ');
+      } else if (svc.phase === 'stopped') {
+        service.state = 'stopped';
+        service.startedAt = svc.startedAt;
+        service.elapsedMs = svc.endedAt - svc.startedAt;
+        service.status = { text: `Ended ${fmtTime(svc.endedAt)}`, tone: 'muted' };
+        service.detail = label;
+      } else {
+        const waiting = timing.startMode === 'document' && now >= win.startsAt;
+        service.status = waiting
+          ? { text: 'Waiting for the start document', tone: 'warn' }
+          : { text: `Starts ${fmtTime(win.startsAt)}`, tone: 'muted' };
+        service.detail = label;
+      }
+
+      // "Current item" — the live plan item's runtime against its planned length.
+      const currentItem = timer('item', 'Current item', 'elapsed');
+      if (item && hist) {
+        const elapsed = (hist.endedAt || now) - hist.startedAt;
+        const planned = item.length ? item.length * 1000 : 0;
+        const over = planned ? elapsed - planned : 0;
+        currentItem.state = hist.endedAt ? 'stopped' : 'running';
+        currentItem.startedAt = hist.startedAt;
+        currentItem.elapsedMs = elapsed;
+        currentItem.targetMs = planned || null;
+        // With ProPresenter (or its module) unreachable this is the last item
+        // we knew of — still counting, but muted so the wall says "stale".
+        const stale = !live.available || !live.ppReachable;
+        currentItem.status = {
+          text: itemTitle,
+          tone: stale ? 'muted' : over > planned * 0.25 + 30000 ? 'danger' : over > 0 ? 'warn' : 'ok',
+        };
+        currentItem.detail = stale ? `${itemDetail} · ProPresenter unreachable` : itemDetail;
+      } else {
+        currentItem.status = {
+          text: !live.following ? 'Not following ProPresenter' : !live.available ? 'ProPresenter feed unavailable' : 'Nothing live',
+          tone: 'muted',
+        };
+      }
+
+      // "Countdown to service" — to the current service's start, then to the
+      // next one once this one has ended; frozen at zero while it runs; idle
+      // when today holds no further service.
+      const countdown = timer('countdown', 'Countdown to service', 'countdown');
+      const target = countdownTarget();
+      if (target && localYmd(new Date(target.startsAt)) === localYmd(new Date(now))) {
+        if (target.id !== countdownTargetId) {
+          countdownTargetId = target.id;
+          countdownSince = now;
+        }
+        const remaining = Math.max(0, target.startsAt - now);
+        countdown.detail = serviceLabel(target);
+        if (remaining > 0) {
+          countdown.state = 'running';
+          countdown.startedAt = countdownSince;
+          countdown.targetMs = target.startsAt - countdownSince;
+          countdown.remainingMs = remaining;
+        } else {
+          countdown.state = 'stopped';
+          countdown.remainingMs = 0;
+          countdown.status = {
+            text: timing.startMode === 'document' ? 'Waiting for the start document' : 'Service time',
+            tone: 'muted',
+          };
+        }
+      } else if (win && svc.phase === 'running') {
+        countdown.state = 'stopped';
+        countdown.remainingMs = 0;
+        countdown.detail = label;
+      } else {
+        countdown.status = { text: 'No upcoming service today', tone: 'muted' };
+      }
+
+      return { source: 'pco-plan', label: 'PCO Plan', updatedAt: now, timers: [service, currentItem, countdown] };
+    }
+
+    /* — the ProPresenter Now/Next feed over loopback — */
 
     let nnRequest = null;
     let nnRetryTimer = null;
     let lastLiveName = null;
-    const guessedPort = guessShellPort();
+    let lastView = null;                 // the latest Now/Next view-model (playlist items → document list)
+    const seenDocuments = new Map();     // document name → last seen live, ms
+    // The shell tells us its port (ProdDash ≥ 1.4.0). Without it, fall back to
+    // guessing and learning it from the first browser's Host header.
+    const shellPort = Number(shell?.port) || 0;
+    const guessedPort = shellPort || guessShellPort();
     let nnPort = guessedPort;
     /** Learned ports that refused the loopback connection (a reverse proxy's port, say). */
     const badPorts = new Set();
 
-    /** A browser reached us on this Host — normally the port the shell really serves on. */
+    /** Fallback only: a browser reached us on this Host — normally the shell's real port. */
     function learnPort(hostHeader) {
+      if (shellPort) return; // the shell told us; nothing to learn
       const port = portFromHost(hostHeader);
       if (!port || port === nnPort || badPorts.has(port)) return;
       log(`ProdDash is on port ${port} (guessed ${nnPort}) — reconnecting the ProPresenter feed there`);
       nnPort = port;
-      if (!follow || stopped) return;
+      if (!wantFeed || stopped) return;
       clearTimeout(nnRetryTimer);
       try { nnRequest?.destroy(); } catch { /* gone */ }
       nnRequest = null;
       connectNowNext();
     }
 
+    /**
+     * Forget the item timing (a new plan, or the next service's window). Only
+     * a *change* of document is a cue from here on — whatever is live at this
+     * moment (the previous service's loop, a document left up) must not start
+     * or end the new service — but the highlight may pick it straight back up.
+     */
     function resetLiveTracking() {
       const keep = state.live;
       state.live = {
@@ -566,7 +994,15 @@ module.exports = {
         ppReachable: keep.ppReachable,
         activeName: keep.activeName,
       };
-      lastLiveName = null;
+      lastLiveName = keep.activeName || '';
+      if (follow && keep.activeName) {
+        const hit = matchItem(keep.activeName);
+        state.live.matched = Boolean(hit);
+        if (hit) {
+          state.live.currentScore = hit.score;
+          startItem(hit.item.id);
+        }
+      }
     }
 
     /** Best plan item for a live presentation name, preferring the ones ahead of us. */
@@ -592,7 +1028,54 @@ module.exports = {
       return best;
     }
 
+    /** Remember a document ProPresenter put live, most recent first, for the admin selects. */
+    function rememberDocument(name) {
+      const n = String(name || '').trim();
+      if (!n) return;
+      seenDocuments.delete(n);
+      seenDocuments.set(n, Date.now());
+      while (seenDocuments.size > SEEN_DOCUMENTS_MAX) seenDocuments.delete(seenDocuments.keys().next().value);
+    }
+
+    /**
+     * Options for the admin "Start document" / "End document" selects. The
+     * Now/Next module exposes the live document and the active playlist's
+     * items — not ProPresenter's library — so the list is: what is live now,
+     * the active playlist, every document seen live since ProdDash started,
+     * and whatever is saved (kept selectable even when ProPresenter doesn't
+     * show it right now).
+     */
+    function documentOptions() {
+      const options = [{ value: '', label: 'None' }];
+      const seen = new Set(['']);
+      const add = (name, group) => {
+        const n = String(name || '').trim();
+        if (!n || seen.has(n)) return;
+        seen.add(n);
+        options.push({ value: n, label: n, group });
+      };
+      const live = state.live;
+      if (live.activeName) add(live.activeName, 'Live now');
+      const playlist = Array.isArray(lastView?.items) ? lastView.items : [];
+      const playlistGroup = lastView?.playlistName ? `Playlist: ${lastView.playlistName}` : 'Active playlist';
+      for (const it of playlist) {
+        if (!it || it.isHidden || it.type === 'header') continue;
+        add(it.name, playlistGroup);
+      }
+      const recent = [...seenDocuments.entries()].sort((a, b) => b[1] - a[1]);
+      for (const [name] of recent) add(name, 'Seen live since ProdDash started');
+      for (const saved of [timing.startDocument, timing.endDocument]) {
+        if (saved && !seen.has(saved)) add(saved, 'Saved (not in ProPresenter right now)');
+      }
+      let note = '';
+      if (!wantFeed) note = 'Turn on ProPresenter document triggers (or Follow ProPresenter Module), save, then reopen this list.';
+      else if (!live.available) note = `ProPresenter module feed unavailable — ${live.reason || 'reconnecting'}; showing what was seen earlier and what is saved.`;
+      else if (!live.ppReachable) note = 'ProPresenter is unreachable — showing what was seen earlier and what is saved.';
+      return { options, note };
+    }
+
     function applyLiveView(view) {
+      lastView = view && typeof view === 'object' ? view : null;
       const live = state.live;
       live.available = true;
       live.reason = '';
@@ -605,17 +1088,27 @@ module.exports = {
         // Cleared output between items is normal — the current item stays current.
         lastLiveName = '';
         broadcast();
+        broadcastTimers();
         return;
       }
-      if (name === lastLiveName) return;
-      lastLiveName = name;
-      const hit = matchItem(name);
-      live.matched = Boolean(hit);
-      if (hit) {
-        live.currentScore = hit.score;
-        if (hit.item.id !== live.currentItemId) startItem(hit.item.id);
+      if (name === lastLiveName) {
+        broadcast(); // reachability may have changed; the frame check keeps it quiet otherwise
+        return;
       }
+      lastLiveName = name;
+      rememberDocument(name);
+      if (follow) {
+        const hit = matchItem(name);
+        live.matched = Boolean(hit);
+        if (hit) {
+          live.currentScore = hit.score;
+          if (hit.item.id !== live.currentItemId) startItem(hit.item.id);
+        }
+      }
+      // The same document is also a possible service start / end cue.
+      syncServiceSafe(Date.now(), name);
       broadcast();
+      broadcastTimers();
     }
 
     function startItem(itemId) {
@@ -626,7 +1119,6 @@ module.exports = {
       }
       live.currentItemId = itemId;
       live.history[itemId] = { startedAt: now, endedAt: 0 };
-      if (!live.serviceStartedAt) live.serviceStartedAt = now;
       const item = state.items.find((it) => it.id === itemId);
       log(`live item → ${item?.title || itemId}`);
     }
@@ -638,6 +1130,7 @@ module.exports = {
         live.reason = reason;
         live.ppReachable = false;
         broadcast();
+        broadcastTimers();
       }
       if (stopped) return;
       clearTimeout(nnRetryTimer);
@@ -646,7 +1139,7 @@ module.exports = {
     }
 
     function connectNowNext() {
-      if (stopped || !follow) return;
+      if (stopped || !wantFeed) return;
       const port = nnPort;
       const req = http.get(
         { host: '127.0.0.1', port, path: `/api/modules/${NOW_NEXT_ID}/stream`, headers: { Accept: 'text/event-stream' } },
@@ -684,7 +1177,7 @@ module.exports = {
       );
       req.on('error', (err) => {
         if (req !== nnRequest) return; // superseded by a reconnect on the learned port
-        if (port !== guessedPort) {
+        if (!shellPort && port !== guessedPort) {
           // The Host header lied (reverse proxy, port forward) — that port is
           // not this ProdDash. Go back to the guess and never trust it again.
           badPorts.add(port);
@@ -700,7 +1193,7 @@ module.exports = {
     /* — start — */
 
     if (!pco.configured) {
-      state.lastError = 'No Planning Center credentials — add an Application ID + Secret (or OAuth token) in /admin';
+      state.lastError = 'No Planning Center credentials — add a Client ID + Secret (or OAuth token) in /admin';
       log(state.lastError);
     } else if (!serviceTypeId) {
       state.lastError = 'No service type selected — choose one under PCO Plan in /admin';
@@ -709,24 +1202,50 @@ module.exports = {
       log(`reading service type ${serviceTypeId} from ${API_BASE} (${pco.method})${pinnedPlanId ? `, plan ${pinnedPlanId} pinned` : ''}`);
       schedulePoll(0);
     }
-    if (follow) {
+    log(
+      `service timing: pre-roll ${Math.round(timing.preRollMs / MINUTE)} min; start by ${
+        timing.startMode === 'document'
+          ? `document "${timing.startDocument}" (failsafe ${Math.round(timing.startGraceMs / MINUTE)} min after the scheduled start)`
+          : 'the scheduled time'
+      }; end ${timing.endDocument ? `by document "${timing.endDocument}"` : 'at the next service / plan end'}`
+    );
+    if (wantsDocumentStart && !startDocument) {
+      log('service start is set to "ProPresenter document" but no start document is chosen — starting by the scheduled time instead');
+    }
+    if (wantFeed) {
       state.live.reason = 'Connecting to the ProPresenter module feed';
       connectNowNext();
     }
+    mirrorService();
 
     const heartbeat = setInterval(() => {
-      for (const res of streams) {
-        try {
-          res.write(': ping\n\n');
-        } catch {
-          streams.delete(res);
-        }
-      }
+      writeAll(streams, ': ping\n\n');
+      writeAll(timerStreams, ': ping\n\n');
     }, HEARTBEAT_MS);
     heartbeat.unref?.();
 
+    // The clock moves services along on its own: scheduled starts, window
+    // flips, failsafes, the countdown reaching zero. Every step is guarded —
+    // timing can never take the plan display down.
+    const ticker = setInterval(() => {
+      if (stopped) return;
+      syncServiceSafe(Date.now(), null);
+      try {
+        broadcast();
+        broadcastTimers();
+      } catch (err) {
+        const msg = err?.message || String(err);
+        if (msg !== lastTimingError) {
+          lastTimingError = msg;
+          log(`broadcast error: ${msg}`);
+        }
+      }
+    }, 1000);
+    ticker.unref?.();
+
     current = {
       streams,
+      timerStreams,
       pco,
       getState: () => state,
       learnPort,
@@ -736,19 +1255,25 @@ module.exports = {
       },
       listPlans,
       pickPlan,
+      timersSnapshot,
+      documentOptions,
+      noteCategoryOptions,
     };
 
     return {
       stop() {
         stopped = true;
         clearInterval(heartbeat);
+        clearInterval(ticker);
         clearTimeout(pollTimer);
         clearTimeout(nnRetryTimer);
         try { nnRequest?.destroy(); } catch { /* gone */ }
-        for (const res of streams) {
-          try { res.end(); } catch { /* already gone */ }
+        for (const set of [streams, timerStreams]) {
+          for (const res of set) {
+            try { res.end(); } catch { /* already gone */ }
+          }
+          set.clear();
         }
-        streams.clear();
         if (current && current.streams === streams) current = null;
       },
       health() {
@@ -759,8 +1284,9 @@ module.exports = {
         }
         const name = state.serviceType.name || serviceTypeId;
         const plan = state.plan ? ` · ${state.plan.dates}${state.plan.title ? ` — ${state.plan.title}` : ''}` : ' · no plan found';
-        const live = follow ? (state.live.available ? '' : ' · ProPresenter feed unavailable') : '';
-        return { status: 'ok', message: `Following ${name}${plan}${live}` };
+        const service = win ? ` · ${serviceLabel(win)} ${svc.phase}` : '';
+        const live = wantFeed ? (state.live.available ? '' : ' · ProPresenter feed unavailable') : '';
+        return { status: 'ok', message: `Following ${name}${plan}${service}${live}` };
       },
     };
   },
@@ -770,6 +1296,15 @@ module.exports = {
       res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
       res.end(JSON.stringify(body));
     };
+    const sseHead = (res) => {
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream; charset=utf-8',
+        'Cache-Control': 'no-cache, no-transform',
+        Connection: 'keep-alive',
+        'X-Accel-Buffering': 'no',
+      });
+      res.write('retry: 3000\n\n');
+    };
 
     return {
       'GET /state': (req, res) => {
@@ -779,13 +1314,7 @@ module.exports = {
 
       'GET /stream': (req, res) => {
         current?.learnPort(req.headers.host);
-        res.writeHead(200, {
-          'Content-Type': 'text/event-stream; charset=utf-8',
-          'Cache-Control': 'no-cache, no-transform',
-          Connection: 'keep-alive',
-          'X-Accel-Buffering': 'no',
-        });
-        res.write('retry: 3000\n\n');
+        sseHead(res);
         const state = current ? current.getState() : clearedState();
         res.write(`event: state\ndata: ${JSON.stringify({ state, now: Date.now() })}\n\n`);
         if (!current) return void res.end();
@@ -803,6 +1332,47 @@ module.exports = {
         );
       },
 
+      /* — timers for the Timers module (module guide: "Offering timers") — */
+
+      'GET /timers': (req, res) => {
+        const now = Date.now();
+        json(res, 200, current ? current.timersSnapshot(now) : emptyTimers(now));
+      },
+
+      'GET /timers/stream': (req, res) => {
+        sseHead(res);
+        const now = Date.now();
+        res.write(`event: timers\ndata: ${JSON.stringify(current ? current.timersSnapshot(now) : emptyTimers(now))}\n\n`);
+        if (!current) return void res.end();
+        const { timerStreams } = current;
+        try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
+        timerStreams.add(res);
+        req.on('close', () => timerStreams.delete(res));
+      },
+
+      /** Options for the admin "Start document" / "End document" selects. */
+      'GET /documents': (req, res) => {
+        if (!current) return json(res, 200, { options: [{ value: '', label: 'None' }], note: 'Module not running.' });
+        json(res, 200, current.documentOptions());
+      },
+
+      /**
+       * Options for a tile's "Item notes" → Categories switches: the
+       * configured service type's item note categories, by name. Always a
+       * 200 with a list — empty while the module is unconfigured, not
+       * running or cannot reach Planning Center — because the gear window
+       * has nothing better to do with an error than show an empty list.
+       */
+      'GET /note-categories': async (req, res) => {
+        let options = [];
+        try {
+          if (current) options = await current.noteCategoryOptions();
+        } catch (err) {
+          log(`note categories: ${err?.message || err}`);
+        }
+        json(res, 200, { options });
+      },
+
       /**
        * Options for the admin page's "Service type" select: every service
        * type, grouped by its Planning Center folder path — so the folders
diff --git a/modules/pco-plan/service-timing.js b/modules/pco-plan/service-timing.js
new file mode 100644
index 0000000..d180e9e
--- /dev/null
+++ b/modules/pco-plan/service-timing.js
@@ -0,0 +1,238 @@
+'use strict';
+
+/**
+ * Service timing for the PCO Plan module — pure functions, no I/O, no
+ * timers. server.js feeds them the plan's service times, the documents
+ * ProPresenter puts live and the clock; service-timing.test.js calls them
+ * directly. Two questions are answered here:
+ *
+ *   1. Which of a plan's services owns the clock right now?   → serviceWindows / selectService
+ *   2. When does that service count as started, and as ended? → advance
+ *
+ * ── Service windows ────────────────────────────────────────────────────
+ *
+ * A plan can have several services (plan_times of type "service": 9:00 and
+ * 11:00, say). Only ONE owns the service-elapsed clock, the current-item
+ * timing and the countdown at any moment, and moving into the next
+ * service's window resets all three. Each service's window runs from the
+ * end of the previous one to a boundary the next service's pre-roll sets:
+ *
+ *   boundary(i → i+1) = min( start[i+1],
+ *                            max( start[i+1] − preRoll, endOf[i] ) )
+ *
+ *   endOf[i] = the moment service i ended (its end cue fired), else its
+ *              scheduled end (plan_time ends_at, else start + the planned
+ *              length of the "during" items, else 90 min).
+ *
+ * In words: the next service takes over `preRoll` before its scheduled
+ * start (30 min by default; admin "Pre-roll"), but never before the current
+ * one has ended or was due to end, and never later than its own start. A
+ * service still running at the boundary is stopped there — that is the
+ * "next service's start" failsafe the end cue has. The first window opens at
+ * the beginning of time (before 9:00 the day belongs to the 9:00 service:
+ * countdown running, service idle); the last window never closes — the last
+ * service stays "stopped" until the plan itself changes (the next day's plan
+ * takes over through the plan picker). The last service also has a failsafe
+ * end: its scheduled end + LAST_SERVICE_OVERRUN_MS.
+ *
+ * ── Start and end of a service ─────────────────────────────────────────
+ *
+ * phase: idle → running → stopped, never backwards within one window.
+ *
+ *   start, schedule mode  (default)  at the scheduled start; startedAt = it.
+ *   start, document mode             when the start document goes live
+ *                                    (edge: it has to *become* live, from
+ *                                    pre-roll before the scheduled start
+ *                                    onwards — a rehearsal an hour earlier
+ *                                    that shows the same document is not the
+ *                                    service). Failsafe: if the document has
+ *                                    not gone live by start + grace (admin
+ *                                    "Start failsafe", 10 min default), the
+ *                                    service starts anyway, counting from
+ *                                    the scheduled start — the best estimate
+ *                                    of when it really began.
+ *   end, document                    when the end document goes live while
+ *                                    the service is running (an end document
+ *                                    live before the start — the previous
+ *                                    service's loop — is ignored). Failsafe
+ *                                    either way: the window boundary (see
+ *                                    above), or, for the last service, its
+ *                                    scheduled end + LAST_SERVICE_OVERRUN_MS.
+ *
+ * Cue documents are matched with matching.isCue (TRIGGER_THRESHOLD, see
+ * matching.js for the tolerance), so "Post-Service Loop" still ends the
+ * service when ProPresenter calls it "Post Service Loop".
+ */
+
+const { similarity, TRIGGER_THRESHOLD } = require('./matching');
+
+const MINUTE = 60000;
+/** How long before a service's scheduled start the timers switch to it (admin "Pre-roll"). */
+const DEFAULT_PRE_ROLL_MS = 30 * MINUTE;
+/** Document mode: start by the schedule anyway this long after the scheduled start (admin "Start failsafe"). */
+const DEFAULT_START_GRACE_MS = 10 * MINUTE;
+/** The last service of a plan is stopped this long after its scheduled end if nothing ended it. */
+const LAST_SERVICE_OVERRUN_MS = 60 * MINUTE;
+/** A service with no end time and no planned item lengths is assumed this long. */
+const DEFAULT_SERVICE_LENGTH_MS = 90 * MINUTE;
+
+/** The plan times that are services (every timed one when none is typed "service"), earliest first. */
+function serviceTimes(planTimes) {
+  const list = Array.isArray(planTimes) ? planTimes.filter((t) => t && Number(t.startsAt) > 0) : [];
+  const services = list.filter((t) => t.timeType === 'service');
+  return (services.length ? services : list).slice().sort((a, b) => a.startsAt - b.startsAt);
+}
+
+/**
+ * The window each service owns (see the file comment).
+ *
+ * @param {Array}  planTimes        [{ id, name, timeType, startsAt, endsAt }] (ms epochs)
+ * @param {object} [opts]
+ * @param {number} [opts.preRollMs] how early the next service may take over (default 30 min)
+ * @param {number} [opts.plannedMs] planned length of the service — for services without ends_at
+ * @param {object} [opts.endedAt]   { [serviceId]: ms } services already ended by their cue
+ * @returns {Array<{ id, name, index, count, startsAt, endsAt, windowFrom, windowUntil, cueFrom, failsafeEndAt, isLast }>}
+ */
+function serviceWindows(planTimes, opts = {}) {
+  const preRoll = Number.isFinite(opts.preRollMs) ? Math.max(0, opts.preRollMs) : DEFAULT_PRE_ROLL_MS;
+  const planned = Number(opts.plannedMs) > 0 ? Number(opts.plannedMs) : 0;
+  const ended = opts.endedAt && typeof opts.endedAt === 'object' ? opts.endedAt : {};
+  const services = serviceTimes(planTimes);
+  const windows = services.map((svc, i) => {
+    const scheduledEnd = svc.endsAt > svc.startsAt ? svc.endsAt : svc.startsAt + (planned || DEFAULT_SERVICE_LENGTH_MS);
+    const endOf = Number(ended[svc.id]) > 0 ? Number(ended[svc.id]) : scheduledEnd;
+    const next = services[i + 1];
+    const windowUntil = next ? Math.min(next.startsAt, Math.max(next.startsAt - preRoll, endOf)) : Infinity;
+    return {
+      id: String(svc.id),
+      name: String(svc.name || ''),
+      index: i,
+      count: services.length,
+      startsAt: svc.startsAt,
+      endsAt: scheduledEnd,
+      windowFrom: -Infinity, // filled in below
+      windowUntil,
+      cueFrom: svc.startsAt - preRoll, // a start document counts from here on
+      failsafeEndAt: next ? windowUntil : scheduledEnd + LAST_SERVICE_OVERRUN_MS,
+      isLast: !next,
+    };
+  });
+  for (let i = 1; i < windows.length; i += 1) windows[i].windowFrom = windows[i - 1].windowUntil;
+  return windows;
+}
+
+/** The window that holds `now` — null only when there are no services. */
+function selectService(windows, now) {
+  if (!Array.isArray(windows) || !windows.length) return null;
+  return windows.find((w) => now >= w.windowFrom && now < w.windowUntil) || windows[windows.length - 1];
+}
+
+/** Timing state for a service that has just come into its window. */
+function freshService(window) {
+  return {
+    id: window ? String(window.id) : '',
+    phase: window ? 'idle' : 'none',
+    startedAt: 0,
+    endedAt: 0,
+    startTrigger: '', // 'schedule' | 'document' | 'failsafe'
+    endTrigger: '',   // 'document' | 'next-service' | 'plan-end'
+    cue: '',          // the document that started / ended it
+  };
+}
+
+function fmtTime(ms) {
+  return new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
+/**
+ * Move a service's timing on by a clock tick or by a document going live.
+ * Pure: returns a new state and a one-line description of what happened
+ * (for the log), or `changed: false`.
+ *
+ * @param {object} svc       state from freshService(window) / a previous advance()
+ * @param {object} window    from serviceWindows()
+ * @param {object} opts      { startMode: 'schedule'|'document', startDocument, endDocument, startGraceMs }
+ * @param {number} now       ms epoch
+ * @param {string} [cue]     the document that just went live (omit on a plain tick)
+ * @returns {{ svc: object, changed: boolean, event: string }}
+ */
+function advance(svc, window, opts, now, cue) {
+  const o = opts || {};
+  const grace = Number.isFinite(o.startGraceMs) ? Math.max(0, o.startGraceMs) : DEFAULT_START_GRACE_MS;
+  const cueName = String(cue || '').trim();
+  const same = { svc, changed: false, event: '' };
+  if (!svc || !window || svc.id !== String(window.id)) return same;
+  const at = fmtTime(window.startsAt);
+
+  if (svc.phase === 'idle') {
+    const documentMode = o.startMode === 'document' && o.startDocument;
+    if (documentMode) {
+      if (cueName && now >= window.cueFrom) {
+        const score = similarity(cueName, o.startDocument);
+        if (score >= TRIGGER_THRESHOLD) {
+          return {
+            svc: { ...svc, phase: 'running', startedAt: now, startTrigger: 'document', cue: cueName },
+            changed: true,
+            event: `started at ${fmtTime(now)} — "${cueName}" went live (start document "${o.startDocument}", match ${score.toFixed(2)})`,
+          };
+        }
+      }
+      if (now >= window.startsAt + grace) {
+        return {
+          svc: { ...svc, phase: 'running', startedAt: window.startsAt, startTrigger: 'failsafe' },
+          changed: true,
+          event: `started (failsafe) — the start document "${o.startDocument}" did not go live within ${Math.round(grace / MINUTE)} min of ${at}; counting from ${at}`,
+        };
+      }
+      return same;
+    }
+    if (now >= window.startsAt) {
+      return {
+        svc: { ...svc, phase: 'running', startedAt: window.startsAt, startTrigger: 'schedule' },
+        changed: true,
+        event: `started — scheduled ${at}`,
+      };
+    }
+    return same;
+  }
+
+  if (svc.phase === 'running') {
+    if (o.endDocument && cueName) {
+      const score = similarity(cueName, o.endDocument);
+      if (score >= TRIGGER_THRESHOLD) {
+        return {
+          svc: { ...svc, phase: 'stopped', endedAt: now, endTrigger: 'document', cue: cueName },
+          changed: true,
+          event: `ended at ${fmtTime(now)} — "${cueName}" went live (end document "${o.endDocument}", match ${score.toFixed(2)})`,
+        };
+      }
+    }
+    if (now >= window.failsafeEndAt) {
+      const endedAt = Math.min(now, window.failsafeEndAt);
+      return {
+        svc: { ...svc, phase: 'stopped', endedAt, endTrigger: window.isLast ? 'plan-end' : 'next-service' },
+        changed: true,
+        event: window.isLast
+          ? `stopped (failsafe) — ${Math.round(LAST_SERVICE_OVERRUN_MS / MINUTE)} min past its scheduled end ${fmtTime(window.endsAt)}`
+          : `stopped (failsafe) — the next service's window opened at ${fmtTime(endedAt)}`,
+      };
+    }
+    return same;
+  }
+
+  return same;
+}
+
+module.exports = {
+  MINUTE,
+  DEFAULT_PRE_ROLL_MS,
+  DEFAULT_START_GRACE_MS,
+  LAST_SERVICE_OVERRUN_MS,
+  DEFAULT_SERVICE_LENGTH_MS,
+  serviceTimes,
+  serviceWindows,
+  selectService,
+  freshService,
+  advance,
+  fmtTime,
+};
diff --git a/modules/pco-plan/service-timing.test.js b/modules/pco-plan/service-timing.test.js
new file mode 100644
index 0000000..8ee3479
--- /dev/null
+++ b/modules/pco-plan/service-timing.test.js
@@ -0,0 +1,229 @@
+'use strict';
+
+/**
+ * Unit tests for the PCO Plan module's pure service-timing logic.
+ *
+ *   node modules/pco-plan/service-timing.test.js
+ *
+ * Plain Node, no dependencies; exits non-zero on the first failure. Times are
+ * built for a two-service Sunday (9:00 and 11:00, 75 min each, 30 min
+ * pre-roll) so the expectations read like the day would.
+ */
+
+const assert = require('assert');
+const { similarity, isCue, MATCH_THRESHOLD, TRIGGER_THRESHOLD } = require('./matching');
+const {
+  MINUTE,
+  LAST_SERVICE_OVERRUN_MS,
+  serviceWindows,
+  selectService,
+  freshService,
+  advance,
+} = require('./service-timing');
+
+const DAY = new Date(2026, 8, 13, 0, 0, 0, 0).getTime(); // a local midnight
+const at = (h, m = 0) => DAY + (h * 60 + m) * MINUTE;
+const hm = (ms) => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+
+const PLAN_TIMES = [
+  { id: 'r', name: 'Rehearsal', timeType: 'rehearsal', startsAt: at(8, 0), endsAt: at(8, 45) },
+  { id: 's1', name: 'First Service', timeType: 'service', startsAt: at(9, 0), endsAt: at(10, 15) },
+  { id: 's2', name: 'Second Service', timeType: 'service', startsAt: at(11, 0), endsAt: at(12, 15) },
+];
+const PRE_ROLL = 30 * MINUTE;
+const OPTS = { preRollMs: PRE_ROLL };
+
+let passed = 0;
+function test(name, fn) {
+  try {
+    fn();
+    passed += 1;
+    console.log(`  ok   ${name}`);
+  } catch (err) {
+    console.log(`  FAIL ${name}\n       ${err.message}`);
+    process.exitCode = 1;
+    throw err;
+  }
+}
+
+console.log('service windows');
+
+test('rehearsal is not a service; windows are contiguous and ordered', () => {
+  const w = serviceWindows(PLAN_TIMES, OPTS);
+  assert.deepStrictEqual(w.map((x) => x.id), ['s1', 's2']);
+  assert.strictEqual(w[0].windowFrom, -Infinity);
+  assert.strictEqual(w[0].windowUntil, w[1].windowFrom);
+  assert.strictEqual(w[1].windowUntil, Infinity);
+  assert.strictEqual(w[0].count, 2);
+});
+
+test('the boundary is 30 min before the next start once the first was due to end', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  // 10:15 scheduled end, 11:00 − 30 = 10:30 → boundary 10:30
+  assert.strictEqual(hm(w1.windowUntil), hm(at(10, 30)));
+  assert.strictEqual(w1.failsafeEndAt, w1.windowUntil, 'first service failsafe-stops at the boundary');
+});
+
+test('a pre-roll larger than the gap waits for the scheduled end, never passes the next start', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, { preRollMs: 60 * MINUTE });
+  assert.strictEqual(hm(w1.windowUntil), hm(at(10, 15)), 'max(10:00, 10:15)');
+  const [tight] = serviceWindows(
+    [
+      { id: 'a', timeType: 'service', startsAt: at(9, 0), endsAt: at(10, 30) },
+      { id: 'b', timeType: 'service', startsAt: at(10, 0), endsAt: at(11, 0) },
+    ],
+    OPTS
+  );
+  assert.strictEqual(hm(tight.windowUntil), hm(at(10, 0)), 'capped at the next start');
+});
+
+test('an early actual end lets the next window open at pre-roll', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, { preRollMs: 60 * MINUTE, endedAt: { s1: at(10, 5) } });
+  assert.strictEqual(hm(w1.windowUntil), hm(at(10, 5)), 'ended at 10:05 inside the 10:00 pre-roll → flips at 10:05');
+  const [w1b] = serviceWindows(PLAN_TIMES, { preRollMs: PRE_ROLL, endedAt: { s1: at(10, 5) } });
+  assert.strictEqual(hm(w1b.windowUntil), hm(at(10, 30)), 'ended at 10:05 before the 10:30 pre-roll → flips at 10:30');
+});
+
+test('a service without ends_at gets the planned length, else 90 min', () => {
+  const [w] = serviceWindows([{ id: 'x', timeType: 'service', startsAt: at(9, 0), endsAt: 0 }], { plannedMs: 70 * MINUTE });
+  assert.strictEqual(hm(w.endsAt), hm(at(10, 10)));
+  const [w90] = serviceWindows([{ id: 'x', timeType: 'service', startsAt: at(9, 0), endsAt: 0 }], {});
+  assert.strictEqual(hm(w90.endsAt), hm(at(10, 30)));
+  assert.strictEqual(w90.failsafeEndAt, w90.endsAt + LAST_SERVICE_OVERRUN_MS);
+});
+
+test('selectService: 8:50 → 9:00, 9:30 → 9:00, 10:55 → 11:00, 11:05 → 11:00', () => {
+  const w = serviceWindows(PLAN_TIMES, OPTS);
+  assert.strictEqual(selectService(w, at(8, 50)).id, 's1');
+  assert.strictEqual(selectService(w, at(9, 30)).id, 's1');
+  assert.strictEqual(selectService(w, at(10, 29)).id, 's1', 'still the first service until the 10:30 boundary');
+  assert.strictEqual(selectService(w, at(10, 55)).id, 's2');
+  assert.strictEqual(selectService(w, at(11, 5)).id, 's2');
+  assert.strictEqual(selectService(w, at(6, 0)).id, 's1', 'the morning belongs to the first service');
+  assert.strictEqual(selectService(w, at(15, 0)).id, 's2', 'the afternoon stays with the last service');
+  assert.strictEqual(selectService([], at(9, 0)), null);
+});
+
+console.log('service start');
+
+const SCHEDULE = { startMode: 'schedule', startDocument: '', endDocument: '', startGraceMs: 10 * MINUTE };
+const DOCUMENT = {
+  startMode: 'document',
+  startDocument: 'Welcome & Announcements',
+  endDocument: 'Post Service Loop',
+  startGraceMs: 10 * MINUTE,
+};
+
+test('schedule mode: idle before 9:00, running from 9:00 counting from 9:00; documents ignored', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  let s = freshService(w1);
+  assert.strictEqual(advance(s, w1, SCHEDULE, at(8, 59), 'Welcome').changed, false, 'a document is not a cue in schedule mode');
+  assert.strictEqual(advance(s, w1, SCHEDULE, at(8, 59)).changed, false);
+  const out = advance(s, w1, SCHEDULE, at(9, 0, 30));
+  assert.strictEqual(out.changed, true);
+  s = out.svc;
+  assert.strictEqual(s.phase, 'running');
+  assert.strictEqual(s.startedAt, at(9, 0), 'counts from the scheduled start, not the tick that noticed');
+  assert.strictEqual(s.startTrigger, 'schedule');
+});
+
+test('document mode: the start document going live starts the service at that moment', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  const s = freshService(w1);
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(9, 0, 30)).changed, false, 'the scheduled time alone does not start it');
+  const out = advance(s, w1, DOCUMENT, at(8, 58), 'Welcome and Announcements [Full]');
+  assert.strictEqual(out.changed, true, 'a renamed / tagged start document still counts');
+  assert.strictEqual(out.svc.phase, 'running');
+  assert.strictEqual(out.svc.startedAt, at(8, 58), 'an early start is the real start');
+  assert.strictEqual(out.svc.startTrigger, 'document');
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(9, 1), 'Post Service Loop').changed, false, 'the end document does not start an idle service');
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(9, 1), 'Goodness of God').changed, false, 'an unrelated document does nothing');
+});
+
+test('document mode: the start document is only a cue from pre-roll before the start', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  const s = freshService(w1);
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(8, 0), 'Welcome & Announcements').changed, false, 'rehearsal at 8:00 shows it — not the service');
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(8, 30), 'Welcome & Announcements').changed, true, 'from 8:30 it counts');
+});
+
+test('document mode: failsafe at start + grace counts from the scheduled start', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  const s = freshService(w1);
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(9, 9, 59)).changed, false);
+  const out = advance(s, w1, DOCUMENT, at(9, 10));
+  assert.strictEqual(out.changed, true);
+  assert.strictEqual(out.svc.phase, 'running');
+  assert.strictEqual(out.svc.startedAt, at(9, 0));
+  assert.strictEqual(out.svc.startTrigger, 'failsafe');
+  assert.match(out.event, /failsafe/);
+});
+
+test('document mode: a cue and the failsafe in the same tick — the cue wins', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  const out = advance(freshService(w1), w1, DOCUMENT, at(9, 12), 'Welcome & Announcements');
+  assert.strictEqual(out.svc.startTrigger, 'document');
+  assert.strictEqual(out.svc.startedAt, at(9, 12));
+});
+
+console.log('service end');
+
+test('the end document freezes a running service; a second start document is ignored', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  let s = advance(freshService(w1), w1, DOCUMENT, at(9, 0), 'Welcome & Announcements').svc;
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(9, 40), 'Welcome & Announcements').changed, false, 'shown again mid-service: nothing');
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(9, 40), 'Pre Service Loop').changed, false, 'the PRE-service loop must not end it (0.67 < 0.75)');
+  const out = advance(s, w1, DOCUMENT, at(10, 12), 'Post-Service Loop');
+  assert.strictEqual(out.changed, true, 'a hyphenated end document still counts');
+  s = out.svc;
+  assert.strictEqual(s.phase, 'stopped');
+  assert.strictEqual(s.endedAt, at(10, 12));
+  assert.strictEqual(s.endTrigger, 'document');
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(10, 20), 'Welcome & Announcements').changed, false, 'stopped stays stopped');
+  assert.strictEqual(advance(s, w1, DOCUMENT, at(10, 45)).changed, false);
+});
+
+test('failsafe: a service still running when the next window opens stops at the boundary', () => {
+  const [w1] = serviceWindows(PLAN_TIMES, OPTS);
+  const s = advance(freshService(w1), w1, SCHEDULE, at(9, 0)).svc;
+  assert.strictEqual(advance(s, w1, SCHEDULE, at(10, 29)).changed, false, 'running past its 10:15 end is allowed');
+  const out = advance(s, w1, SCHEDULE, at(10, 31));
+  assert.strictEqual(out.changed, true);
+  assert.strictEqual(out.svc.phase, 'stopped');
+  assert.strictEqual(hm(out.svc.endedAt), hm(at(10, 30)), 'frozen at the boundary, not at the tick');
+  assert.strictEqual(out.svc.endTrigger, 'next-service');
+});
+
+test('failsafe: the last service stops an hour after its scheduled end', () => {
+  const [, w2] = serviceWindows(PLAN_TIMES, OPTS);
+  const s = advance(freshService(w2), w2, SCHEDULE, at(11, 0)).svc;
+  assert.strictEqual(advance(s, w2, SCHEDULE, at(13, 14)).changed, false);
+  const out = advance(s, w2, SCHEDULE, at(13, 15));
+  assert.strictEqual(out.changed, true);
+  assert.strictEqual(out.svc.phase, 'stopped');
+  assert.strictEqual(hm(out.svc.endedAt), hm(at(13, 15)));
+  assert.strictEqual(out.svc.endTrigger, 'plan-end');
+});
+
+test('the end document does not stop a service in the wrong window', () => {
+  const w = serviceWindows(PLAN_TIMES, OPTS);
+  const s1 = advance(freshService(w[0]), w[0], DOCUMENT, at(9, 0), 'Welcome & Announcements').svc;
+  assert.strictEqual(advance(s1, w[1], DOCUMENT, at(10, 40), 'Post Service Loop').changed, false, 'state and window must belong together');
+});
+
+console.log('matching');
+
+test('plan items: 0.6 — two of three words; cues: 0.75 — pre/post loops stay apart', () => {
+  assert.strictEqual(MATCH_THRESHOLD, 0.6);
+  assert.strictEqual(TRIGGER_THRESHOLD, 0.75);
+  assert.strictEqual(similarity('Post-Service Loop', 'Post Service Loop'), 1);
+  assert.strictEqual(similarity('Post Service Loop [Full]', 'Post Service Loop'), 1);
+  assert.strictEqual(similarity('Post Service', 'Post Service Loop'), 0.85);
+  assert.ok(Math.abs(similarity('Pre Service Loop', 'Post Service Loop') - 2 / 3) < 0.001);
+  assert.strictEqual(isCue('Pre Service Loop', 'Post Service Loop'), false);
+  assert.strictEqual(isCue('Post-Service Loop', 'Post Service Loop'), true);
+  assert.strictEqual(isCue('Welcome', 'Welcome & Announcements'), true);
+  assert.strictEqual(isCue('Anything', ''), false);
+});
+
+console.log(`\n${passed} tests passed`);
diff --git a/modules/prodcom-transcript/client.js b/modules/prodcom-transcript/client.js
index 76bff3b..87a1980 100644
--- a/modules/prodcom-transcript/client.js
+++ b/modules/prodcom-transcript/client.js
@@ -3,8 +3,13 @@
    Ported from prodcom-listener/public/app.js into the ProdDash module
    contract: everything lives inside the tile's root, per-tile state
    (hidden channels, channel icons, timestamps, text size, flow direction)
-   persists in instance settings, and all network traffic goes through
-   moduleApi (the module's server proxy at /prodcom/*). */
+   persists in instance settings, and the data comes from the module's own
+   server, which keeps one connection to ProdCom for every dashboard: a
+   snapshot on connect (`state`), then each changed entry (`entry`). */
+
+/* the text-size buttons: a drawn − and + at the icon size, like every other header icon */
+const MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>';
+const PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';
 
 export default function create({ root, moduleApi }) {
   /* ── per-instance state ─────────────────────────────────────────── */
@@ -15,7 +20,6 @@ export default function create({ root, moduleApi }) {
   let pinnedToLatest = true;
   let hiddenChannels = new Set(moduleApi.instanceSettings.hiddenChannels || []);
   let stream = null;          // moduleApi.sse handle
-  let bootTimer = null;
   let stopped = false;
 
   /* ── DOM skeleton ───────────────────────────────────────────────── */
@@ -48,7 +52,7 @@ export default function create({ root, moduleApi }) {
   let channelMenuEl = null; // the open menu's element (filled on each open)
   const channelsMenu = moduleApi.header.addMenu({
     icon: CHANNELS_SVG,
-    title: 'Choose visible channels',
+    title: 'Channels',
     build(menu) {
       menu.classList.add('pt-menu');
       channelMenuEl = menu;
@@ -65,7 +69,7 @@ export default function create({ root, moduleApi }) {
   let timeBtn = null;
   timeBtn = moduleApi.header.addButton({
     icon: CLOCK_SVG,
-    title: 'Show / hide timestamps',
+    title: 'Timestamps',
     onClick() {
       moduleApi.saveInstanceSettings({ showTimes: !moduleApi.instanceSettings.showTimes });
       applyInstanceSettings();
@@ -77,8 +81,8 @@ export default function create({ root, moduleApi }) {
     moduleApi.saveInstanceSettings({ textSize: Math.min(48, Math.max(10, current + delta)) });
     applyInstanceSettings();
   }
-  moduleApi.header.addButton({ label: 'A−', title: 'Smaller text', onClick: () => bumpTextSize(-2) });
-  moduleApi.header.addButton({ label: 'A+', title: 'Larger text', onClick: () => bumpTextSize(2) });
+  moduleApi.header.addButton({ icon: MINUS_SVG, title: 'Smaller text', onClick: () => bumpTextSize(-2) });
+  moduleApi.header.addButton({ icon: PLUS_SVG, title: 'Larger text', onClick: () => bumpTextSize(2) });
 
   // icon and tooltip track the current direction — applyInstanceSettings sets both
   const flowBtn = moduleApi.header.addButton({
@@ -93,7 +97,7 @@ export default function create({ root, moduleApi }) {
 
   moduleApi.header.addButton({
     icon: JUMP_SVG,
-    title: 'Jump to latest',
+    title: 'Latest',
     onClick() {
       pinnedToLatest = true;
       jumpBtn.hidden = true;
@@ -103,7 +107,7 @@ export default function create({ root, moduleApi }) {
 
   const clearBtn = moduleApi.header.addButton({
     icon: CLEAR_SVG,
-    title: 'Clear this tile (does not affect ProdCom)',
+    title: 'Clear',
     onClick: clearView,
   });
   clearBtn.classList.add('pt-clear');
@@ -120,9 +124,7 @@ export default function create({ root, moduleApi }) {
     wrap.classList.toggle('newest-first', up);
     flowBtn.innerHTML = up ? FLOW_UP_SVG : FLOW_DOWN_SVG;
     flowBtn.classList.toggle('active', up);
-    flowBtn.title = up
-      ? 'Newest at top — click for newest at bottom'
-      : 'Newest at bottom — click for newest at top';
+    flowBtn.title = up ? 'Newest first' : 'Oldest first';
     jumpBtn.textContent = (up ? '↑' : '↓') + ' New messages';
   }
   applyInstanceSettings();
@@ -174,9 +176,7 @@ export default function create({ root, moduleApi }) {
     channelCountEl.textContent = filtering ? `${visibleCount}/${channels.size}` : '';
     channelCountEl.hidden = !filtering;
     channelsMenu.button.classList.toggle('active', filtering);
-    channelsMenu.button.title = filtering
-      ? `Channels — showing ${visibleCount} of ${channels.size}`
-      : 'Choose visible channels';
+    channelsMenu.button.title = filtering ? `Channels ${visibleCount}/${channels.size}` : 'Channels';
   }
 
   function rebuildChannelMenu() {
@@ -353,120 +353,68 @@ export default function create({ root, moduleApi }) {
 
   /* The stream sends JSON objects for new/updated/completed transcript
      entries. Be liberal about the envelope shape. */
-  function extractEntries(obj) {
-    if (!obj || typeof obj !== 'object') return [];
-    if (Array.isArray(obj)) return obj.flatMap(extractEntries);
-    if (typeof obj.text === 'string' && (obj.id || obj.channelId)) return [obj];
-    for (const key of ['data', 'payload', 'entry', 'entries', 'transcript']) {
-      if (obj[key] && typeof obj[key] === 'object') {
-        const found = extractEntries(obj[key]);
-        if (found.length) return found;
-      }
-    }
-    return [];
+  /* ── the module's feed: one snapshot, then each change ─────────── */
+
+  function applyStatus(st) {
+    if (!st || typeof st !== 'object') return;
+    if (st.state === 'ok') moduleApi.setStatus('ok', st.message || 'Live');
+    else moduleApi.setStatus(st.state === 'error' ? 'error' : 'connecting', st.message || 'Connecting to ProdCom…');
   }
 
-  function handleEventData(raw) {
-    let obj;
-    try { obj = JSON.parse(raw); } catch { return; }
-    const kind = String(obj.type || obj.event || '').toLowerCase();
-    if (kind.includes('clear')) {
-      entryEls.forEach((el) => el.remove());
-      entryEls.clear();
-      emptyEl.hidden = false;
-      return;
-    }
-    extractEntries(obj).forEach(upsertEntry);
-  }
-
-  /* ── data loading (all via the module's proxy) ──────────────────── */
-
-  async function loadChannels() {
-    const res = await moduleApi.fetch('/prodcom/api/v1/channels');
-    if (!res.ok) throw new Error('channels ' + res.status);
-    const body = await res.json();
+  function applySnapshot(snap) {
+    if (!snap || typeof snap !== 'object') return;
     channels.clear();
-    for (const ch of body.data || []) {
-      channels.set(ch.id, { name: ch.name, color: ch.color || '#8b98a5' });
-    }
-    rebuildChannelMenu();
-  }
-
-  async function loadGroups() {
-    const res = await moduleApi.fetch('/prodcom/api/v1/groups');
-    if (!res.ok) throw new Error('groups ' + res.status);
-    const body = await res.json();
+    for (const ch of snap.channels || []) channels.set(String(ch.id), { name: ch.name, color: ch.color || '#8b98a5' });
     groups.clear();
-    for (const g of body.data || []) {
-      groups.set(g.id, { name: g.name, channelIds: g.channelIds || [] });
-    }
+    for (const g of snap.groups || []) groups.set(String(g.id), { name: g.name, channelIds: g.channelIds || [] });
     rebuildChannelMenu();
+    const list = (snap.entries || []).slice().sort((a, b) => new Date(a.date) - new Date(b.date));
+    list.forEach(upsertEntry); // dedupes by id, so a snapshot after a reconnect is harmless
+    applyStatus(snap.status);
   }
 
-  async function loadHistory() {
-    const res = await moduleApi.fetch('/prodcom/api/v1/transcript?limit=100');
-    if (!res.ok) throw new Error('transcript ' + res.status);
-    const body = await res.json();
-    const entries = (body.data || []).slice();
-    entries.sort((a, b) => new Date(a.date) - new Date(b.date));
-    entries.forEach(upsertEntry);
+  async function loadState() {
+    try {
+      const res = await moduleApi.fetch('/state');
+      if (!res.ok) throw new Error(String(res.status));
+      applySnapshot(await res.json());
+    } catch { /* the stream's own snapshot covers it */ }
   }
 
-  /* ── live stream ────────────────────────────────────────────────── */
-
-  const SSE_EVENT_NAMES = [
-    'transcript', 'transcript.new', 'transcript.updated', 'transcript.update',
-    'transcript.completed', 'transcript.complete', 'entry', 'new', 'update',
-    'updated', 'complete', 'completed',
-  ];
-
   function connect() {
-    const onEvent = (ev) => handleEventData(ev.data);
-    const events = {};
-    for (const name of SSE_EVENT_NAMES) events[name] = onEvent;
-
-    stream = moduleApi.sse('/prodcom/api/v1/transcript/stream', {
+    stream = moduleApi.sse('/stream', {
       open() {
-        moduleApi.setStatus('ok', 'Live');
-        // refresh channels/groups and backfill entries missed while
-        // disconnected (upsertEntry dedupes by id, so this is harmless)
-        loadChannels().catch(() => {});
-        loadGroups().catch(() => {});
-        loadHistory().catch(() => {});
+        loadState(); // a late joiner, or a reconnect: catch up on what was missed
       },
       error() {
-        moduleApi.setStatus('error', 'ProdCom unreachable — reconnecting…');
+        moduleApi.setStatus('error', 'ProdDash ProdCom module unreachable — reconnecting…');
+      },
+      events: {
+        state(ev) {
+          try { applySnapshot(JSON.parse(ev.data)); } catch { /* a bad frame is skipped */ }
+        },
+        entry(ev) {
+          try { upsertEntry(JSON.parse(ev.data)); } catch { /* skipped */ }
+        },
+        clear() {
+          clearView();
+        },
+        status(ev) {
+          try { applyStatus(JSON.parse(ev.data)); } catch { /* skipped */ }
+        },
       },
-      message: onEvent,
-      events,
     });
   }
 
   /* ── lifecycle ──────────────────────────────────────────────────── */
 
-  async function boot() {
-    if (stopped) return;
-    moduleApi.setStatus('connecting', 'Connecting to ProdCom…');
-    try {
-      await loadChannels();
-      await loadGroups().catch(() => {}); // groups are optional
-      await loadHistory();
-    } catch {
-      moduleApi.setStatus('error', 'ProdCom unreachable — retrying…');
-      bootTimer = setTimeout(boot, 5000);
-      return;
-    }
-    scrollToLatest();
-    connect();
-  }
-
   return {
     start() {
-      boot();
+      moduleApi.setStatus('connecting', 'Connecting to ProdCom…');
+      connect();
     },
     stop() {
       stopped = true;
-      clearTimeout(bootTimer);
       stream?.close();
       root.innerHTML = ''; // header controls are removed by the shell
     },
diff --git a/modules/prodcom-transcript/module.json b/modules/prodcom-transcript/module.json
index 8de270a..55c4e04 100644
--- a/modules/prodcom-transcript/module.json
+++ b/modules/prodcom-transcript/module.json
@@ -1,22 +1,34 @@
 {
   "id": "prodcom-transcript",
   "name": "ProdCom",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "proddash": ">=1.1.0",
-  "description": "Live ProdCom transcript stream",
+  "description": "Live ProdCom transcript",
   "permissions": [
-    { "kind": "local-network", "reason": "Reaching the ProdCom API on this network" }
+    {
+      "kind": "local-network",
+      "reason": "Reaching the ProdCom API on this network"
+    }
   ],
   "client": "client.js",
   "server": "server.js",
   "style": "style.css",
-  "minSize": { "w": 3, "h": 2 },
-  "defaultSize": { "w": 4, "h": 4 },
+  "minSize": {
+    "w": 3,
+    "h": 2
+  },
+  "defaultSize": {
+    "w": 4,
+    "h": 4
+  },
   "configSchema": {
     "prodcom": {
       "type": "endpoint",
       "label": "ProdCom server",
-      "default": { "host": "10.3.11.152", "port": 24480 }
+      "default": {
+        "host": "10.3.11.152",
+        "port": 24480
+      }
     },
     "apiKey": {
       "type": "password",
@@ -29,16 +41,6 @@
       "type": "boolean",
       "label": "Show channel icons",
       "default": true
-    },
-    "newestFirst": {
-      "type": "boolean",
-      "label": "Newest first (transcript reads bottom-up)",
-      "default": false
-    },
-    "showTimes": {
-      "type": "boolean",
-      "label": "Show timestamps",
-      "default": false
     }
   }
 }
diff --git a/modules/prodcom-transcript/server.js b/modules/prodcom-transcript/server.js
index 0ee3aaa..3d9531f 100644
--- a/modules/prodcom-transcript/server.js
+++ b/modules/prodcom-transcript/server.js
@@ -3,73 +3,34 @@
 /**
  * ProdCom Transcript — server part.
  *
- * One wildcard route that proxies /prodcom/* (including the SSE transcript
- * stream) to the ProdCom API configured in the admin page, so browsers never
- * talk to ProdCom directly (no CORS, and the API key never reaches clients).
- * Ported from prodcom-listener/server.js.
+ * One connection to ProdCom for the whole server, however many dashboards
+ * show the transcript. The module holds the channel list, the groups and
+ * the last entries, follows ProdCom's SSE stream, and hands every browser a
+ * snapshot on connect plus each change as it happens. (It used to proxy each
+ * browser's stream to ProdCom one to one — N screens meant N upstream
+ * connections; ProdCom now sees one.)
+ *
+ * Routes (under /api/modules/prodcom-transcript):
+ *   GET /state   → { status, channels, groups, entries }   (entries by date)
+ *   GET /stream  → SSE: `state` (the snapshot, first), then `entry` for each
+ *                  changed entry, `clear`, and `status` when the link changes
+ *
+ * ProdCom's API, as the reference listener speaks it:
+ *   GET /api/v1/channels, /api/v1/groups, /api/v1/transcript?limit=N and the
+ *   SSE /api/v1/transcript/stream, whose frames carry an entry, or a
+ *   { type, entry | data } wrapper, in a few historical shapes (see
+ *   extractEntries). A bearer API key is sent when one is configured.
  */
 
 const http = require('http');
 
-// Hop-by-hop headers that must not be forwarded
-const HOP_HEADERS = new Set([
-  'connection', 'keep-alive', 'proxy-authenticate', 'proxy-authorization',
-  'te', 'trailer', 'transfer-encoding', 'upgrade',
-]);
-
-/** Health shown in the admin page: outcome of the most recent proxied request. */
-let health = { status: 'connecting', message: 'No traffic yet' };
-
-function proxy(req, res, target, apiKey) {
-  const upstreamPath = (req.wildcard || '/') + (req.search || '');
-  const headers = {};
-  for (const [k, v] of Object.entries(req.headers)) {
-    if (!HOP_HEADERS.has(k.toLowerCase())) headers[k] = v;
-  }
-  headers.host = target.host;
-  delete headers['accept-encoding']; // keep SSE unbuffered and simple
-  if (apiKey) headers.authorization = 'Bearer ' + apiKey;
-
-  const preq = http.request(
-    {
-      hostname: target.hostname,
-      port: target.port || 80,
-      path: upstreamPath,
-      method: req.method,
-      headers,
-    },
-    (pres) => {
-      health = { status: 'ok', message: `ProdCom reachable (last: HTTP ${pres.statusCode})` };
-      const outHeaders = {};
-      for (const [k, v] of Object.entries(pres.headers)) {
-        if (!HOP_HEADERS.has(k.toLowerCase())) outHeaders[k] = v;
-      }
-      res.writeHead(pres.statusCode, outHeaders);
-      // Flush immediately — SSE streams may send no bytes for a while, and
-      // the browser needs the headers to consider the stream open.
-      res.flushHeaders();
-      pres.pipe(res);
-      // If ProdCom dies mid-stream, pipe() unpipes on error without ending
-      // the browser's response, leaving SSE clients hanging on a dead
-      // stream. Destroy it so they notice immediately and reconnect.
-      pres.on('close', () => {
-        if (!res.writableEnded) res.destroy();
-      });
-    }
-  );
-
-  preq.on('error', (e) => {
-    health = { status: 'error', message: 'ProdCom unreachable: ' + (e.code || String(e)) };
-    if (!res.headersSent) {
-      res.writeHead(502, { 'Content-Type': 'application/json' });
-    }
-    res.end(JSON.stringify({ error: 'ProdCom unreachable', detail: e.code || String(e) }));
-  });
-
-  // Tear down the upstream connection when the browser disconnects
-  res.on('close', () => preq.destroy());
-  req.pipe(preq);
-}
+const HISTORY_LIMIT = 100;            // entries asked for on (re)connect
+const ENTRIES_MAX = 300;              // entries kept in memory
+const RETRY_MIN_MS = 2000;
+const RETRY_MAX_MS = 15000;
+const REQUEST_TIMEOUT_MS = 8000;
+const REFRESH_LISTS_MS = 5 * 60 * 1000; // channels and groups re-read
+const HEARTBEAT_MS = 15000;
 
 /** The ProdCom base URL from the endpoint config. A legacy prodcomUrl (saved
     before the endpoint field existed) can only still be present until the
@@ -82,23 +43,281 @@ function resolveTarget(config) {
   return null;
 }
 
+/** Entries inside whatever ProdCom sent: a bare entry, or one wrapped in data / payload / entry / entries / transcript. */
+function extractEntries(obj) {
+  if (!obj || typeof obj !== 'object') return [];
+  if (Array.isArray(obj)) return obj.flatMap(extractEntries);
+  if (typeof obj.text === 'string' && (obj.id || obj.channelId)) return [obj];
+  for (const key of ['data', 'payload', 'entry', 'entries', 'transcript']) {
+    if (obj[key] && typeof obj[key] === 'object') {
+      const found = extractEntries(obj[key]);
+      if (found.length) return found;
+    }
+  }
+  return [];
+}
+
+/** One entry as the tiles read it; an entry without an id is keyed by channel and time. */
+function normalizeEntry(e) {
+  const id = e.id !== undefined && e.id !== null && e.id !== '' ? String(e.id) : `${e.channelId || ''}|${e.date || ''}`;
+  return {
+    id,
+    channelId: e.channelId === undefined || e.channelId === null ? '' : String(e.channelId),
+    channelName: e.channelName ? String(e.channelName) : '',
+    text: String(e.text ?? ''),
+    date: e.date ? String(e.date) : new Date().toISOString(),
+    inProgress: Boolean(e.inProgress),
+  };
+}
+
+let current = null; // the running instance, for routes()
+
 module.exports = {
-  init({ config }) {
-    health = resolveTarget(config)
-      ? { status: 'connecting', message: 'No traffic yet' }
-      : { status: 'error', message: 'No ProdCom server configured' };
+  init({ config, log }) {
+    const target = resolveTarget(config);
+    const apiKey = String(config.apiKey || '');
+    const channels = [];
+    const groups = [];
+    const entries = new Map(); // id → entry, in arrival order
+    const streams = new Set(); // browsers' SSE responses
+    let status = { state: 'connecting', message: target ? 'Connecting to ProdCom…' : 'No ProdCom server configured' };
+    let stopped = false;
+    let upstream = null;
+    let generation = 0;        // callbacks from a superseded connection are ignored
+    let retryTimer = null;
+    let retryMs = RETRY_MIN_MS;
+
+    const authHeaders = () => (apiKey ? { authorization: `Bearer ${apiKey}` } : {});
+
+    async function getJson(pathname) {
+      const res = await fetch(new URL(pathname, target), {
+        headers: { accept: 'application/json', ...authHeaders() },
+        signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status} for ${pathname}`);
+      return res.json();
+    }
+
+    function sortedEntries() {
+      return [...entries.values()].sort((a, b) => new Date(a.date) - new Date(b.date));
+    }
+
+    function snapshot() {
+      return { status, channels, groups, entries: sortedEntries() };
+    }
+
+    function broadcast(event, data) {
+      if (!streams.size) return;
+      const frame = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+      for (const res of streams) {
+        try {
+          res.write(frame);
+        } catch {
+          streams.delete(res);
+        }
+      }
+    }
+
+    function setStatus(state, message) {
+      if (status.state === state && status.message === message) return;
+      status = { state, message };
+      broadcast('status', status);
+    }
+
+    function trim() {
+      while (entries.size > ENTRIES_MAX) entries.delete(entries.keys().next().value);
+    }
+
+    /** A changed entry: kept, and told to every browser. */
+    function upsert(raw) {
+      const e = normalizeEntry(raw);
+      const prev = entries.get(e.id);
+      if (prev && prev.text === e.text && prev.inProgress === e.inProgress && prev.channelId === e.channelId) return;
+      entries.set(e.id, e);
+      trim();
+      broadcast('entry', e);
+    }
+
+    function clearAll() {
+      entries.clear();
+      broadcast('clear', {});
+    }
+
+    async function loadLists() {
+      const [ch, gr] = await Promise.all([
+        getJson('/api/v1/channels'),
+        getJson('/api/v1/groups').catch(() => ({ data: [] })), // groups are optional in ProdCom
+      ]);
+      channels.splice(0, channels.length, ...(ch.data || []).map((c) => ({ id: String(c.id), name: String(c.name || c.id), color: c.color || '#8b98a5' })));
+      groups.splice(0, groups.length, ...(gr.data || []).map((g) => ({ id: String(g.id), name: String(g.name || g.id), channelIds: Array.isArray(g.channelIds) ? g.channelIds.map(String) : [] })));
+    }
+
+    async function loadHistory() {
+      const body = await getJson(`/api/v1/transcript?limit=${HISTORY_LIMIT}`);
+      for (const e of extractEntries(body).map(normalizeEntry)) entries.set(e.id, e);
+      trim();
+    }
+
+    function handleFrame(block) {
+      const data = [];
+      for (const line of block.split('\n')) {
+        if (line.startsWith('data:')) data.push(line.slice(5).replace(/^ /, ''));
+      }
+      if (!data.length) return;
+      let obj;
+      try {
+        obj = JSON.parse(data.join('\n'));
+      } catch {
+        return;
+      }
+      const kind = String(obj?.type || obj?.event || '').toLowerCase();
+      if (kind.includes('clear')) return clearAll();
+      extractEntries(obj).forEach(upsert);
+    }
+
+    function scheduleRetry() {
+      if (stopped) return;
+      clearTimeout(retryTimer);
+      retryTimer = setTimeout(connect, retryMs);
+      retryMs = Math.min(RETRY_MAX_MS, retryMs * 2);
+    }
+
+    function fail(gen, why) {
+      if (stopped || gen !== generation) return;
+      generation += 1; // whatever else this connection reports is stale now
+      try { upstream?.destroy(); } catch { /* already gone */ }
+      upstream = null;
+      setStatus('error', `ProdCom unreachable (${why}) — retrying`);
+      log(`ProdCom ${target.origin}: ${why} — retrying in ${retryMs / 1000} s`);
+      scheduleRetry();
+    }
+
+    /** Lists and history first (a fresh snapshot for the tiles), then the live stream. */
+    async function connect() {
+      if (stopped || !target) return;
+      const gen = ++generation;
+      try {
+        await loadLists();
+        await loadHistory();
+      } catch (err) {
+        if (gen !== generation || stopped) return;
+        return fail(gen, err.cause?.code || err.code || err.message);
+      }
+      if (gen !== generation || stopped) return;
+      broadcast('state', snapshot());
+      const url = new URL('/api/v1/transcript/stream', target);
+      const req = http.request({
+        hostname: url.hostname,
+        port: url.port || 80,
+        path: url.pathname,
+        method: 'GET',
+        headers: { accept: 'text/event-stream', ...authHeaders() },
+      }, (res) => {
+        if (gen !== generation) return void res.destroy();
+        if (res.statusCode !== 200) {
+          res.resume();
+          return fail(gen, `HTTP ${res.statusCode} from the transcript stream`);
+        }
+        retryMs = RETRY_MIN_MS;
+        setStatus('ok', 'Live');
+        log(`following ${target.origin} — ${channels.length} channels, ${entries.size} entries`);
+        let buf = '';
+        res.setEncoding('utf8');
+        res.on('data', (chunk) => {
+          if (gen !== generation) return;
+          buf += chunk;
+          let i;
+          while ((i = buf.indexOf('\n\n')) >= 0) {
+            handleFrame(buf.slice(0, i));
+            buf = buf.slice(i + 2);
+          }
+          if (buf.length > 1e6) buf = ''; // a frame that never ends is dropped
+        });
+        res.on('end', () => fail(gen, 'stream ended'));
+        res.on('error', (err) => fail(gen, err.code || err.message));
+      });
+      req.on('error', (err) => fail(gen, err.code || err.message));
+      req.end();
+      upstream = req;
+    }
+
+    const listsTimer = setInterval(() => {
+      if (stopped || status.state !== 'ok') return;
+      loadLists().then(() => broadcast('state', snapshot())).catch(() => { /* the next reconnect re-reads them */ });
+    }, REFRESH_LISTS_MS);
+    listsTimer.unref?.();
+    const heartbeat = setInterval(() => {
+      for (const res of streams) {
+        try {
+          res.write(': ping\n\n');
+        } catch {
+          streams.delete(res);
+        }
+      }
+    }, HEARTBEAT_MS);
+    heartbeat.unref?.();
+
+    if (target) {
+      log(`one connection to ProdCom at ${target.origin}, shared by every dashboard`);
+      connect();
+    } else {
+      log('no ProdCom server configured — set the endpoint in /admin');
+    }
+
+    current = {
+      snapshot,
+      streams,
+      health() {
+        if (status.state === 'ok') return { status: 'ok', message: `Live — ${channels.length} channel${channels.length === 1 ? '' : 's'}, ${entries.size} entries` };
+        return { status: status.state === 'error' ? 'error' : 'connecting', message: status.message };
+      },
+    };
+
     return {
-      stop() { /* nothing persistent to tear down — streams die with their sockets */ },
-      health: () => health,
+      stop() {
+        stopped = true;
+        generation += 1;
+        clearTimeout(retryTimer);
+        clearInterval(listsTimer);
+        clearInterval(heartbeat);
+        try { upstream?.destroy(); } catch { /* already gone */ }
+        for (const res of streams) {
+          try { res.end(); } catch { /* gone */ }
+        }
+        streams.clear();
+        if (current?.streams === streams) current = null;
+      },
+      health: () => (current ? current.health() : { status: 'connecting', message: 'Restarting…' }),
     };
   },
 
-  routes({ config, log }) {
-    // An invalid host/URL throws here, which surfaces as a mount error in /admin.
-    const target = resolveTarget(config) || new URL('http://10.3.11.152:24480');
-    log(`proxying /prodcom/* → ${target.origin}`);
+  routes() {
+    const sendJson = (res, code, body) => {
+      res.writeHead(code, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+      res.end(JSON.stringify(body));
+    };
     return {
-      '* /prodcom/*': (req, res) => proxy(req, res, target, config.apiKey || ''),
+      'GET /state': (req, res) => {
+        if (!current) return sendJson(res, 503, { error: 'ProdCom module is restarting — try again' });
+        sendJson(res, 200, current.snapshot());
+      },
+      'GET /stream': (req, res) => {
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream; charset=utf-8',
+          'Cache-Control': 'no-cache, no-transform',
+          Connection: 'keep-alive',
+          'X-Accel-Buffering': 'no',
+        });
+        res.write('retry: 3000\n\n');
+        if (!current) {
+          res.write(`event: state\ndata: ${JSON.stringify({ status: { state: 'connecting', message: 'ProdCom module is restarting…' }, channels: [], groups: [], entries: [] })}\n\n`);
+          return void res.end();
+        }
+        res.write(`event: state\ndata: ${JSON.stringify(current.snapshot())}\n\n`);
+        try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
+        current.streams.add(res);
+        req.on('close', () => current && current.streams.delete(res));
+      },
     };
   },
 };
diff --git a/modules/propresenter-timers/client.js b/modules/propresenter-timers/client.js
index 94dd235..5223b40 100644
--- a/modules/propresenter-timers/client.js
+++ b/modules/propresenter-timers/client.js
@@ -1,15 +1,81 @@
-/* ProPresenter Timers — client part.
+/* Timers — client part.
 
-   The server part does all the ProPresenter talking and streams one merged
-   state object here over SSE. Each tile renders whichever timers (and/or the
-   LTC timecode) it has enabled, as auto-sized cards in a responsive grid.
-   Which items a tile shows is per-tile state, picked in a "Timers ▾" header
-   menu and persisted with the layout — the timer list is dynamic, so a
-   static instanceSchema field can't list them (same approach as the ProdCom
-   module's channels menu). Timers this tile has never seen default to
-   enabled: only explicit un-ticks are stored. */
+   The server part follows every source (ProPresenter, the LTC listener, the
+   time of day, other modules offering timers) and streams one merged state
+   object here over SSE: sources, each with its health and its timers as the
+   module guide's standard timer objects. This tile renders every timer from
+   every source it has switched on, grouped under the source's heading, as
+   auto-sized cards — label, the big time, a status line, a detail line.
 
-const LTC_KEY = '__ltc__';
+   The time is derived LOCALLY. A snapshot says what a timer's value was at
+   its source's updatedAt; a running card counts on from there with this
+   browser's clock, offset-corrected against the server's, so digits tick
+   smoothly between snapshots and a slow provider never needs a fast poll.
+   The LTC card counts individual frames the same way (see the SMPTE math).
+
+   Per-tile choices: the gear popover's static switches (whole sources,
+   headings, status lines, the clock's format, the state colours) and the
+   "Timers ▾" header menu, which hides any single timer — keyed `source:id`
+   and saved with the layout via saveInstanceSettings. The header can be
+   hidden by the user, so the static switches stay the primary controls.
+   A solo tile's gear carries only the settings its one card can use (the
+   picker entry's own schema — see tiles() in server.js), so a setting may
+   simply be absent here: every read goes through pref(), which falls back
+   to DEFAULTS rather than to whatever schema the tile happens to have.
+
+   Feedback — the state colours, and the thresholds behind them:
+     running elapsed, no planned length            running
+     running elapsed with a planned length         warning within
+         WARN_FLOOR_MS or WARN_FRACTION of the length (whichever is larger,
+         but never more than half the length — a 20 s countdown warns
+         under 10 s, a 25 min one under 2:30) of the end; overrun past it
+     running countdown                             warning with that much
+         left; overrun at zero and below
+     stopped countdown at zero ("complete")        warning
+     paused / idle / stopped                       idle (muted)
+     the wall clock                                plain text colour
+     LTC                                           running = running colour,
+         stopped = idle, no signal = idle digits + blinking warning line
+   The colours are the tile's Running / Warning / Overrun / Idle settings,
+   set as custom properties on the tile root so they win over the dashboard
+   theme; left at their defaults they follow the theme's variables. */
+
+/** Which instance switch governs a source kind. */
+/** Colour settings → custom property, and the schema default (module.json) that means "follow the theme". */
+const COLOR_SETTINGS = [
+  ['runningColor', '--tm-ok', '#2ee59a'],
+  ['warningColor', '--tm-warn', '#f0b429'],
+  ['overrunColor', '--tm-danger', '#f4433c'],
+  ['idleColor', '--tm-muted', '#8b98a5'],
+];
+
+/** Warning thresholds (see the header comment). */
+const WARN_FLOOR_MS = 60000;
+const WARN_FRACTION = 0.1;
+
+/** How often running digits are repainted. Whole seconds, so 5×/s is plenty. */
+const PAINT_MS = 200;
+
+const LTC_KEY = 'ltc:ltc';
+
+/** What the tile assumes for a setting its schema doesn't carry (a solo
+    tile offers only what applies to its card) or that was never saved. The
+    switches default to on, the clock to 24-hour with seconds and no date —
+    the same values module.json gives the full "All timers" schema. */
+const DEFAULTS = {
+  showNames: true,
+  groupBySource: false,
+  showHeadings: true,
+  showStatus: true,
+  showDetail: true,
+  showSeconds: true,
+  leadingZeros: false,
+  clock24h: true,
+  clockSeconds: true,
+  clockDate: false,
+  dateShortDay: false,
+  dateShortMonth: false,
+};
 
 /* ── SMPTE timecode math (module-scope, exported for tests) ─────────
    The server anchors us ~4×/s with { time, fps, df, ageMs }; the card
@@ -50,23 +116,127 @@ export function framesToTc(n, nominal, df) {
   return `${pad(Math.floor(secs / 3600))}:${pad(Math.floor(secs / 60) % 60)}:${pad(secs % 60)}:${pad(f)}`;
 }
 
+/* ── timer math (module-scope, exported for tests) ──────────────────── */
+
+/**
+ * A timer's value at server time `now`: remaining ms for a countdown,
+ * elapsed ms otherwise, or null when the snapshot can't say. The values as
+ * of the snapshot (`elapsedMs` / `remainingMs`) are preferred and carried
+ * forward while running; `startedAt` is the fallback when they are absent.
+ */
+export function valueAt(timer, sourceUpdatedAt, now) {
+  const running = timer.state === 'running';
+  const at = Number(sourceUpdatedAt) || now;
+  const dt = running ? Math.max(0, now - at) : 0;
+  const has = (v) => v !== null && v !== undefined && Number.isFinite(v);
+  if (timer.kind === 'countdown') {
+    if (has(timer.remainingMs)) return timer.remainingMs - dt;
+    if (has(timer.targetMs) && has(timer.elapsedMs)) return timer.targetMs - timer.elapsedMs - dt;
+    if (running && has(timer.targetMs) && has(timer.startedAt)) return timer.targetMs - (now - timer.startedAt);
+    return null;
+  }
+  if (has(timer.elapsedMs)) return timer.elapsedMs + dt;
+  if (running && has(timer.startedAt)) return now - timer.startedAt;
+  return null;
+}
+
+/** Signed ms → "M:SS" / "H:MM:SS" (whole seconds, floor of the magnitude). */
+/**
+ * A duration as digits. `seconds: false` shows minutes only — a countdown
+ * rounds up (3:59 left reads "4", 0:30 over reads "-1"), an elapsed timer
+ * rounds down; `zeros` pads the leading field to two digits ("05:07").
+ */
+export function fmtDuration(ms, { seconds = true, zeros = false, up = false } = {}) {
+  const sign = ms < 0 ? '-' : '';
+  const total = Math.abs(ms) / 1000;
+  const pad = (v) => String(v).padStart(2, '0');
+  if (!seconds) {
+    const mins = up ? Math.ceil(total / 60) : Math.floor(total / 60);
+    const h = Math.floor(mins / 60);
+    const m = mins % 60;
+    return h ? `${sign}${zeros ? pad(h) : h}:${pad(m)}` : `${sign}${zeros ? pad(m) : m}`;
+  }
+  const s = Math.floor(total);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  return h ? `${sign}${zeros ? pad(h) : h}:${pad(m)}:${pad(sec)}` : `${sign}${zeros ? pad(m) : m}:${pad(sec)}`;
+}
+
+function warnWindow(targetMs) {
+  if (!targetMs) return WARN_FLOOR_MS;
+  return Math.min(Math.max(WARN_FLOOR_MS, targetMs * WARN_FRACTION), targetMs / 2);
+}
+
+/** The state colour for a (non-clock) timer given its current value. */
+export function toneFor(timer, value) {
+  if (timer.state === 'running') {
+    if (value === null) return 'ok';
+    if (timer.kind === 'countdown') {
+      if (value <= 0) return 'danger';
+      if (value <= warnWindow(timer.targetMs)) return 'warn';
+      return 'ok';
+    }
+    if (timer.targetMs !== null && timer.targetMs !== undefined && Number.isFinite(timer.targetMs)) {
+      if (value >= timer.targetMs) return 'danger';
+      if (value >= timer.targetMs - warnWindow(timer.targetMs)) return 'warn';
+    }
+    return 'ok';
+  }
+  if (timer.state === 'stopped' && timer.kind === 'countdown' && value !== null && value <= 0) return 'warn';
+  return 'muted';
+}
+
+function defaultStatus(timer, value, tone) {
+  if (timer.state === 'running') return tone === 'danger' ? 'Overrun' : 'Running';
+  if (timer.state === 'paused') return 'Paused';
+  if (timer.state === 'idle') return 'Ready';
+  return timer.kind === 'countdown' && value !== null && value <= 0 ? 'Complete' : 'Stopped';
+}
+
+/* ── the tile ─────────────────────────────────────────────────────────── */
+
 export default function create({ root, moduleApi }) {
   let state = null;
   let feedOffline = false;
   let stream = null;
   let resizeObserver = null;
-  let hiddenItems = new Set(moduleApi.instanceSettings.hiddenItems || []);
+  let paintTimer = null;
+  /** Date.now() minus the server's clock, refined from every snapshot. */
+  let clockOffset = NaN;
+  let needFit = true;
 
-  // Which picker entry this tile was added as (the module's tiles() list):
-  // '' or 'all' = every item, selectable via the Timers ▾ menu;
-  // 'timer:<uuid>' or 'ltc' = exactly one card, no menu.
+  const settings = () => moduleApi.instanceSettings;
+  /** One setting, resolved here: what this tile saved, else DEFAULTS — never
+      whatever its (possibly slimmer) schema would or wouldn't default. */
+  const pref = (key) => {
+    const v = settings()[key];
+    if (v !== undefined && v !== null) return v;
+    // A layout from before the 24-hour switch chose a "clockFormat".
+    if (key === 'clock24h' && settings().clockFormat === '12h') return false;
+    return DEFAULTS[key];
+  };
+  const keyOf = (source, timer) => `${source.id}:${timer.id}`;
+
+  /* Per-tile hidden timers, keyed source:id. Layouts saved by the earlier
+     ProPresenter-only tile stored `hiddenItems` (uuids, and __ltc__ for the
+     timecode) — read those too, and write them back in the new key. */
+  const hidden = new Set(Array.isArray(settings().hiddenTimers) ? settings().hiddenTimers.map(String) : []);
+  for (const old of Array.isArray(settings().hiddenItems) ? settings().hiddenItems : []) {
+    hidden.add(old === '__ltc__' ? LTC_KEY : `propresenter:${old}`);
+  }
+
+  /* Which picker entry this tile was added as (the module's tiles() list):
+     '' or 'all' = every timer, selectable via the Timers ▾ menu;
+     'solo:<source>:<id>' = exactly one card, no menu, no headings. The
+     earlier entries 'timer:<uuid>' and 'ltc' map onto the new keys. */
   const variant = String(moduleApi.variant || '');
-  const soloKey = variant === 'ltc' ? LTC_KEY
-    : variant.startsWith('timer:') ? variant.slice('timer:'.length)
-      : '';
-  /** Last name seen for a solo timer, so its card stays labeled if the
-      timer is later deleted in ProPresenter. */
-  let lastSoloName = '';
+  const solo = variant === 'ltc' ? LTC_KEY
+    : variant.startsWith('timer:') ? `propresenter:${variant.slice('timer:'.length)}`
+      : variant.startsWith('solo:') ? variant.slice('solo:'.length)
+        : '';
+  /** Last label seen for a solo timer, so its card stays labeled if the timer is later deleted upstream. */
+  let lastSoloLabel = '';
 
   /* ── DOM skeleton ───────────────────────────────────────────────── */
 
@@ -74,45 +244,72 @@ export default function create({ root, moduleApi }) {
     <div class="tm-wrap">
       <div class="tm-banner" hidden></div>
       <div class="tm-hint" hidden></div>
-      <div class="tm-grid"></div>
+      <div class="tm-groups"></div>
     </div>`;
 
   const wrap = root.querySelector('.tm-wrap');
   const bannerEl = root.querySelector('.tm-banner');
   const hintEl = root.querySelector('.tm-hint');
-  const gridEl = root.querySelector('.tm-grid');
+  const groupsEl = root.querySelector('.tm-groups');
 
-  /** key (uuid or LTC_KEY) → { el, nameEl, timeEl, stateEl } */
+  /** key → { key, el, nameEl, timeEl, statusEl, detailEl, item, chars, cls } */
   const cards = new Map();
+  /** group id (source id) → { el, headEl, titleEl, noteEl, emptyEl, gridEl, count } */
+  const groupEls = new Map();
 
-  /* ── title-bar menu: pick which timers / LTC this tile shows ────── */
+  /** The tile's colour settings → custom properties (only when changed from the theme-following default). */
+  function applyColors() {
+    const s = settings();
+    for (const [key, prop, fallback] of COLOR_SETTINGS) {
+      const v = String(s[key] || '').trim().toLowerCase();
+      if (/^#[0-9a-f]{6}$/.test(v) && v !== fallback) wrap.style.setProperty(prop, v);
+      else wrap.style.removeProperty(prop);
+    }
+  }
+
+  /* ── server clock ───────────────────────────────────────────────── */
+
+  function noteServerClock(serverNow) {
+    if (!Number.isFinite(serverNow)) return;
+    const sample = Date.now() - serverNow;
+    // A step (first sample, a resumed laptop) snaps; jitter is smoothed.
+    if (!Number.isFinite(clockOffset) || Math.abs(sample - clockOffset) > 1000) clockOffset = sample;
+    else clockOffset += (sample - clockOffset) * 0.2;
+  }
+
+  const serverNow = () => Date.now() - (Number.isFinite(clockOffset) ? clockOffset : 0);
+
+  /* ── title-bar menu: hide / show individual timers ──────────────── */
 
   let menuEl = null; // the open menu's element (filled on each open)
-  const itemsMenu = soloKey ? null : moduleApi.header.addMenu({
+  const itemsMenu = solo ? null : moduleApi.header.addMenu({
     label: 'Timers ▾',
-    title: 'Choose which timers this tile shows',
+    title: 'Choose timers',
     build(menu) {
+      // the shell hands over an emptied element on every open
       menu.classList.add('tm-menu');
       menuEl = menu;
-      rebuildMenu();
+      rebuildMenu(true);
     },
   });
 
   function menuRows() {
-    const rows = (state?.timers || []).map((t) => ({ key: t.uuid, name: t.name }));
-    // No LTC row while the listener is off in Admin — the item shouldn't
-    // even be offerable.
-    if (state?.ltcEnabled) rows.push({ key: LTC_KEY, name: 'LTC timecode' });
+    const rows = [];
+    for (const source of state?.sources || []) {
+      for (const t of source.timers) rows.push({ key: keyOf(source, t), text: `${source.label} › ${t.label}` });
+    }
     return rows;
   }
 
   function persistHidden() {
-    moduleApi.saveInstanceSettings({ hiddenItems: [...hiddenItems] });
+    // `hiddenItems` was the old key: clearing it keeps a layout from
+    // re-hiding something the user has since re-enabled here.
+    moduleApi.saveInstanceSettings({ hiddenTimers: [...hidden], hiddenItems: undefined });
   }
 
-  function toggleItem(key) {
-    if (hiddenItems.has(key)) hiddenItems.delete(key);
-    else hiddenItems.add(key);
+  function toggleTimer(key) {
+    if (hidden.has(key)) hidden.delete(key);
+    else hidden.add(key);
     persistHidden();
     rebuildMenu();
     render();
@@ -121,129 +318,223 @@ export default function create({ root, moduleApi }) {
   function updateMenuLabel() {
     if (!itemsMenu) return;
     const rows = menuRows();
-    const visible = rows.filter((r) => !hiddenItems.has(r.key)).length;
-    itemsMenu.setLabel(visible === rows.length
-      ? 'Timers ▾'
-      : `Timers (${visible}/${rows.length}) ▾`);
+    const visible = rows.filter((r) => !hidden.has(r.key)).length;
+    itemsMenu.setLabel(visible === rows.length ? 'Timers ▾' : `Timers (${visible}/${rows.length}) ▾`);
   }
 
-  function rebuildMenu() {
+  let menuSignature = '';
+  function rebuildMenu(force = false) {
     updateMenuLabel();
     if (!menuEl) return; // menu not opened yet — the label is enough
-    menuEl.innerHTML = '';
     const rows = menuRows();
-    if (rows.length === 1) {
+    // Snapshots arrive several times a second; rebuilding the open menu's
+    // rows each time would replace them under the user's finger. Only a
+    // changed row set (or a toggled switch) is worth touching the DOM for.
+    const signature = JSON.stringify(rows.map((r) => [r.key, r.text, hidden.has(r.key)]));
+    if (!force && signature === menuSignature && menuEl.childElementCount) return;
+    menuSignature = signature;
+    menuEl.innerHTML = '';
+    if (!rows.length) {
       const note = document.createElement('div');
       note.className = 'tm-menu-note';
-      note.textContent = 'No timers discovered yet';
+      note.textContent = 'No timers known yet';
       menuEl.appendChild(note);
     }
     for (const row of rows) {
-      const on = !hiddenItems.has(row.key);
+      const on = !hidden.has(row.key);
       const item = document.createElement('button');
       item.className = 'tm-menu-item' + (on ? ' on' : '');
       item.setAttribute('role', 'menuitemcheckbox');
       item.setAttribute('aria-checked', String(on));
-      const check = document.createElement('span');
-      check.className = 'check';
-      check.textContent = '✓';
       const name = document.createElement('span');
       name.className = 'name';
-      name.textContent = row.name;
-      item.append(check, name);
+      name.textContent = row.text;
+      const sw = document.createElement('span');
+      sw.className = 'tm-switch';
+      item.append(name, sw);
       item.addEventListener('click', (e) => {
         // keep the menu open: the rebuild detaches this item, which would
-        // make the outside-click handler think we clicked outside
+        // make the shell's outside-click handler think we clicked outside
         e.stopPropagation();
-        toggleItem(row.key);
+        toggleTimer(row.key);
       });
       menuEl.appendChild(item);
     }
   }
 
-  /* ── state → cards ──────────────────────────────────────────────── */
+  /* ── state → what this tile shows ───────────────────────────────── */
 
-  /** Map the API's state string onto our four looks. The spec's enum is
-      stopped|running|complete|overrunning|overran, but its own response
-      example says "overrun" — match the substring. */
-  function classify(apiState) {
-    const s = String(apiState || '').toLowerCase();
-    if (s.includes('overr')) return 'overrun';
-    if (s === 'running') return 'running';
-    if (s === 'complete') return 'complete';
-    return 'stopped';
-  }
-
-  const STATE_TEXT = { running: 'Running', stopped: 'Stopped', complete: 'Complete', overrun: 'Overrun' };
-
-  /** Show the value the way ProPresenter reports it (sign included);
-      only the ".00" hundredths some builds append are dropped for fit. */
-  function displayTime(raw) {
-    const s = String(raw || '').replace(/\.\d+$/, '');
-    return s || '—';
-  }
-
-  function visibleItems() {
-    const ltcState = state?.ltc || { supported: null, time: '', receiving: false };
-    if (soloKey === LTC_KEY) return [{ key: LTC_KEY, ltc: ltcState }];
-    if (soloKey) {
-      const timer = (state?.timers || []).find((t) => t.uuid === soloKey);
-      if (timer) {
-        lastSoloName = timer.name;
-        return [{ key: soloKey, timer }];
+  /** [{ id, source, items: [{ key, source, timer } | { key, missing }] }] */
+  function visibleGroups() {
+    if (!state) return [];
+    if (solo) {
+      for (const source of state.sources) {
+        for (const timer of source.timers) {
+          if (keyOf(source, timer) !== solo) continue;
+          lastSoloLabel = timer.label;
+          return [{ id: source.id, source, items: [{ key: solo, source, timer }] }];
+        }
       }
-      // The timer this tile was added for isn't in ProPresenter's list (yet,
-      // or any more) — keep a clearly-labeled card up rather than erroring.
-      return [{ key: soloKey, missing: true }];
+      // The timer this tile was added for isn't offered (yet, or any more) —
+      // keep a clearly-labeled card up rather than erroring.
+      const sourceId = solo.slice(0, solo.indexOf(':'));
+      const source = state.sources.find((s) => s.id === sourceId) || null;
+      return [{ id: 'missing', source, items: [{ key: solo, missing: true, source }] }];
     }
-    const items = [];
-    for (const t of state?.timers || []) {
-      if (!hiddenItems.has(t.uuid)) items.push({ key: t.uuid, timer: t });
+    const groups = [];
+    for (const source of state.sources) {
+      const items = [];
+      for (const timer of source.timers) {
+        const key = keyOf(source, timer);
+        if (!hidden.has(key)) items.push({ key, source, timer });
+      }
+      // Every timer of a live source hidden on purpose: nothing to say.
+      if (!items.length && source.timers.length) continue;
+      groups.push({ id: source.id, source, items });
     }
-    if (state?.ltcEnabled && !hiddenItems.has(LTC_KEY)) items.push({ key: LTC_KEY, ltc: ltcState });
-    return items;
+    if (pref('groupBySource') === true) return groups;
+    // Grouping off: every timer in one grid, filled row by row. A source in
+    // trouble is still named, in one line above the cards.
+    const trouble = groups.filter((g) => g.source && g.source.status !== 'ok');
+    return [{
+      id: 'all',
+      source: null,
+      flat: true,
+      items: groups.flatMap((g) => g.items),
+      status: trouble.length ? 'error' : 'ok',
+      message: trouble.map((g) => `${g.source.label}: ${g.source.message || 'unavailable'}`).join(' · '),
+    }];
   }
 
+  /* ── cards ──────────────────────────────────────────────────────── */
+
   function makeCard(item) {
     const el = document.createElement('div');
-    el.className = 'tm-card' + (item.ltc ? ' tm-card-ltc' : '');
+    el.className = 'tm-card';
     const nameEl = document.createElement('div');
     nameEl.className = 'tm-name';
+    const labelEl = document.createElement('span');
+    labelEl.className = 'tm-label';
+    nameEl.appendChild(labelEl);
     const timeEl = document.createElement('div');
     timeEl.className = 'tm-time';
-    const stateEl = document.createElement('div');
-    stateEl.className = 'tm-state';
-    if (item.ltc) {
-      const badge = document.createElement('span');
-      badge.className = 'tm-ltc-badge';
-      badge.textContent = 'LTC';
-      nameEl.append(badge, document.createTextNode('Timecode'));
+    const statusEl = document.createElement('div');
+    statusEl.className = 'tm-status';
+    const detailEl = document.createElement('div');
+    detailEl.className = 'tm-detail';
+    el.append(nameEl, timeEl, statusEl, detailEl);
+    return { key: item.key, el, nameEl, labelEl, timeEl, statusEl, detailEl, item, chars: 5, cls: '' };
+  }
+
+  function setText(el, text) {
+    if (el.textContent !== text) el.textContent = text;
+  }
+
+  function setCardClass(card, cls) {
+    if (card.cls === cls) return;
+    card.cls = cls;
+    card.el.className = cls;
+  }
+
+  /** The parts of a card that only change with the snapshot (label, kind). */
+  function updateCard(card, item) {
+    card.item = item;
+    card.isClock = !item.missing && item.source?.kind === 'clock';
+    const isLtc = item.source?.kind === 'ltc';
+    const badge = card.nameEl.querySelector('.tm-ltc-badge');
+    if (isLtc && !badge) {
+      const b = document.createElement('span');
+      b.className = 'tm-ltc-badge';
+      b.textContent = 'LTC';
+      card.nameEl.prepend(b);
+    } else if (!isLtc && badge) {
+      badge.remove();
     }
-    el.append(nameEl, timeEl, stateEl);
-    return { el, nameEl, timeEl, stateEl };
+    const label = item.missing ? (lastSoloLabel || 'Timer') : card.isClock ? '' : item.timer.label;
+    if (card.labelEl.textContent !== label) {
+      setText(card.labelEl, label);
+      needFit = true; // the title's size follows its length
+    }
   }
 
-  /** A solo tile whose timer vanished from ProPresenter's list. While the
-      server is unreachable the list is merely unknown — the banner already
-      says so, so only claim "not in ProPresenter" when actually connected. */
   function updateMissingCard(card) {
-    card.nameEl.textContent = lastSoloName || 'Timer';
-    card.timeEl.textContent = '—';
-    if (state?.reachable) {
-      card.stateEl.textContent = 'Not in ProPresenter';
-      card.el.className = 'tm-card is-missing';
-    } else {
-      card.stateEl.textContent = '—';
-      card.el.className = 'tm-card is-stopped';
-    }
+    const source = card.item.source;
+    setText(card.timeEl, '—');
+    card.chars = 5;
+    let note;
+    if (!source) note = 'Source not available — check Admin';
+    else if (source.status === 'ok') note = `Not offered by ${source.label}`;
+    else note = '—';
+    setText(card.statusEl, note);
+    card.statusEl.hidden = false;
+    card.statusEl.className = 'tm-status is-note';
+    card.statusEl.dataset.tone = source && source.status === 'ok' ? 'warn' : 'muted';
+    card.detailEl.hidden = true;
+    setCardClass(card, 'tm-card is-muted is-missing');
   }
 
-  function updateTimerCard(card, timer) {
-    card.nameEl.textContent = timer.name;
-    card.timeEl.textContent = displayTime(timer.time);
-    const kind = classify(timer.state);
-    card.stateEl.textContent = timer.state ? (STATE_TEXT[kind] || timer.state) : '—';
-    card.el.className = `tm-card is-${kind}`;
+  /* ── clocks ─────────────────────────────────────────────────────── */
+
+  function clockOptions() {
+    const h12 = pref('clock24h') === false;
+    return {
+      hour12: h12,
+      hour: h12 ? 'numeric' : '2-digit',
+      minute: '2-digit',
+      ...(pref('clockSeconds') !== false ? { second: '2-digit' } : {}),
+    };
+  }
+
+  function wallClockText() {
+    return new Date().toLocaleTimeString([], clockOptions());
+  }
+
+  /** The date as the day and the rest — the break, when one is needed, falls between them. */
+  function dateParts() {
+    const d = new Date();
+    return {
+      day: d.toLocaleDateString([], { weekday: pref('dateShortDay') ? 'short' : 'long' }),
+      rest: d.toLocaleDateString([], { month: pref('dateShortMonth') ? 'short' : 'long', day: 'numeric' }),
+    };
+  }
+
+  /**
+   * The clock's date under its digits: one line when it fits the card,
+   * otherwise a line break after the day and a size that fits the longer
+   * half. Re-done only when the text or the card width changes.
+   */
+  function renderDate(card, d) {
+    const cw = lastFit.cw;
+    const lineSize = lastFit.meta * LINE_SCALE;
+    const whole = `${d.day}, ${d.rest}`;
+    const key = `${whole}|${Math.round(cw)}|${lineSize}`;
+    if (card.dateKey === key) return;
+    card.dateKey = key;
+    let px = lineSize;
+    let wrapIt = false;
+    if (textWidth(whole, lineSize, 0.1) > cw) {
+      wrapIt = true;
+      const widest = Math.max(textWidth(`${d.day},`, lineSize, 0.1), textWidth(d.rest, lineSize, 0.1));
+      px = Math.max(8, Math.floor(lineSize * Math.min(1, cw / widest)));
+    }
+    const el = card.statusEl;
+    el.textContent = '';
+    const a = document.createElement('span');
+    a.textContent = `${d.day},`;
+    const b = document.createElement('span');
+    b.textContent = d.rest;
+    el.append(a, document.createTextNode(' '), b);
+    el.style.fontSize = px === lineSize ? '' : `${px}px`;
+    card.dateCls = wrapIt ? ' is-date is-wrap' : ' is-date';
+  }
+
+  /** A provider's kind:"clock" timer carries an ISO time in status.text as of its snapshot. */
+  function providerClockText(timer, source, now) {
+    const raw = String(timer.status?.text || '');
+    const d = new Date(raw);
+    if (!raw || Number.isNaN(d.getTime())) return raw || '—';
+    const dt = timer.state === 'running' ? Math.max(0, now - (Number(source.updatedAt) || now)) : 0;
+    return new Date(d.getTime() + dt).toLocaleTimeString([], clockOptions());
   }
 
   /* ── real-time LTC: count every frame between server anchors ─────── */
@@ -260,10 +551,15 @@ export default function create({ root, moduleApi }) {
       frames the next update would visibly rewind. */
   const ANCHOR_FRESH_MS = 350;
 
+  function ltcTimer() {
+    const source = state?.sources.find((s) => s.kind === 'ltc');
+    return source ? source.timers.find((t) => t.id === 'ltc') || null : null;
+  }
+
   function updateLtcAnchor() {
-    const l = state?.ltc;
+    const l = ltcTimer()?.ltc;
     // The listener is extrapolatable — it knows the frame rate.
-    const live = l && l.status === 'running' && l.fps > 0 && l.source === 'listener';
+    const live = l && l.status === 'running' && l.fps > 0;
     const tc = live ? parseTc(l.time) : null;
     if (!tc) {
       ltcAnchor = null;
@@ -287,9 +583,9 @@ export default function create({ root, moduleApi }) {
   }
 
   /** Paint the frame the anchor implies for right now. Called both by the
-      rAF loop (smooth, per-frame, on visible tabs) and by render() at the
-      4×/s anchor rate — so a throttled/backgrounded tab, where rAF is
-      paused, still advances at the anchor rate instead of freezing. */
+      rAF loop (smooth, per-frame, on visible tabs) and by paint() at the
+      anchor rate — so a throttled/backgrounded tab, where rAF is paused,
+      still advances instead of freezing. */
   function paintLtcFrame() {
     const a = ltcAnchor;
     const card = cards.get(LTC_KEY);
@@ -314,48 +610,94 @@ export default function create({ root, moduleApi }) {
     ltcRaf = requestAnimationFrame(ltcTick);
   }
 
-  function updateLtcCard(card, ltc) {
-    let mode;
-    // Only the audio sources know the frame rate (decoded from the LTC
-    // bits); a set drop-frame flag implies 29.97 whatever fps rounds to.
-    const rate = ltc.df ? '29.97 DF' : ltc.fps ? `${ltc.fps} fps` : '';
-    if (ltc.supported === false) {
-      mode = 'unavailable';
-      card.timeEl.textContent = '—';
-      // The server says why when it knows (listener disabled, no device
-      // selected, capture failed, starting up…) — surface that.
-      card.stateEl.textContent = ltc.note || 'LTC not available';
-    } else if (ltc.receiving) {
-      mode = 'receiving';
-      // With an anchor active, paint the frame it implies for now (this
-      // keeps a throttled tab advancing at the 4×/s anchor rate); the rAF
-      // loop refines it to every frame when the tab is visible. Without an
-      // anchor (rate unknown), fall back to the raw anchor timecode.
-      if (ltcAnchor) paintLtcFrame();
-      else card.timeEl.textContent = displayTime(ltc.time);
-      card.stateEl.textContent = rate ? `Running · ${rate}` : 'Running';
-    } else if (ltc.status === 'stopped' || ltc.time) {
-      // LTC ceased but we know where it stopped — hold the last frame.
-      mode = 'stopped';
-      card.timeEl.textContent = displayTime(ltc.time);
-      card.stateEl.textContent = 'Stopped';
-    } else {
-      mode = 'nosignal';
-      card.timeEl.textContent = '—';
-      card.stateEl.textContent = 'No signal';
+  /* ── painting the numbers (every PAINT_MS, and on every snapshot) ── */
+
+  function paint() {
+    if (!state) return;
+    const now = serverNow();
+    const showStatus = pref('showStatus') !== false;
+    const showDetail = pref('showDetail') !== false;
+    const digits = { seconds: pref('showSeconds') !== false, zeros: pref('leadingZeros') === true };
+    let charsChanged = false;
+    for (const card of cards.values()) {
+      const { item } = card;
+      if (item.missing) {
+        updateMissingCard(card);
+        continue;
+      }
+      const { source, timer } = item;
+      let text;
+      let tone;
+      let statusText = '';
+      let statusTone = '';
+      let detailText = '';
+      let extra = '';
+      let date = null;
+      if (timer.kind === 'clock') {
+        if (source.kind === 'ltc') {
+          const l = timer.ltc || {};
+          text = l.time || timer.status?.text || '—';
+          if (timer.state === 'running') tone = 'ok';
+          else if (timer.state === 'stopped') tone = 'muted';
+          else {
+            tone = 'muted';
+            extra = l.status === 'nosignal' ? ' is-nosignal' : ' is-unavailable';
+          }
+          statusText = timer.detail || '';
+          statusTone = timer.status?.tone || (tone === 'ok' ? 'ok' : extra ? 'warn' : 'muted');
+        } else if (source.kind === 'clock') {
+          text = wallClockText();
+          tone = 'plain';
+          date = pref('clockDate') ? dateParts() : null;
+          statusText = date ? `${date.day}, ${date.rest}` : '';
+          statusTone = 'muted';
+        } else {
+          text = providerClockText(timer, source, now);
+          tone = timer.state === 'running' ? 'plain' : 'muted';
+          statusText = timer.detail || '';
+          statusTone = timer.status?.tone || 'muted';
+        }
+      } else {
+        const value = valueAt(timer, source.updatedAt, now);
+        text = value === null ? '—' : fmtDuration(value, { ...digits, up: timer.kind === 'countdown' });
+        tone = toneFor(timer, value);
+        statusText = timer.status?.text || defaultStatus(timer, value, tone);
+        statusTone = timer.status?.tone || tone;
+        detailText = timer.detail || '';
+        if (tone === 'danger' && timer.state === 'running') extra = ' is-overrun';
+      }
+      // The LTC card's digits belong to the frame counter while an anchor is live.
+      if (!(card.key === LTC_KEY && ltcAnchor)) setText(card.timeEl, text);
+      else paintLtcFrame();
+      const chars = Math.max(5, text.length);
+      if (chars !== card.chars) {
+        card.chars = chars;
+        charsChanged = true;
+      }
+      // Notes that must survive the compact look: an unavailable LTC input.
+      const isNote = extra === ' is-unavailable';
+      setText(card.statusEl, statusText); // a no-op over the date's two spans: same text
+      card.statusEl.hidden = !statusText || (!showStatus && !isNote);
+      if (date && !card.statusEl.hidden) renderDate(card, date);
+      else if (card.dateCls) {
+        card.dateCls = '';
+        card.dateKey = '';
+        card.statusEl.style.fontSize = '';
+      }
+      card.statusEl.className = 'tm-status' + (isNote ? ' is-note' : '') + (card.dateCls || '');
+      card.statusEl.dataset.tone = statusTone;
+      setText(card.detailEl, detailText);
+      card.detailEl.hidden = !detailText || !showDetail;
+      const kindCls = source.kind === 'ltc' ? ' tm-card-ltc' : source.kind === 'clock' ? ' tm-card-clock' : '';
+      const stale = source.status === 'error' ? ' is-stale' : '';
+      setCardClass(card, `tm-card is-${tone}${extra}${kindCls}${stale}`);
     }
-    // The built-in listener is independent of ProPresenter, so its card
-    // must not gray out with the rest when only ProPresenter is unreachable.
-    const live = ltc.source === 'listener' ? ' src-reader' : '';
-    card.el.className = `tm-card tm-card-ltc is-ltc-${mode}${live}`;
+    if (charsChanged) fit();
   }
 
-  /* ── status dot + degraded banners ──────────────────────────────── */
+  /* ── status dot + degraded banner ───────────────────────────────── */
 
   function renderStatus() {
-    wrap.classList.toggle('is-stale', feedOffline || (state ? !state.reachable && state.enabled : false));
-    // The stale gray-out spares the reader-fed LTC card — unless the feed
-    // from the ProdDash server itself is down, when everything is stale.
     wrap.classList.toggle('is-feed-down', feedOffline);
     if (feedOffline) {
       bannerEl.hidden = false;
@@ -363,30 +705,49 @@ export default function create({ root, moduleApi }) {
       moduleApi.setStatus('error', 'ProdDash server unreachable — reconnecting…');
       return;
     }
+    bannerEl.hidden = true;
     if (!state) {
-      bannerEl.hidden = true;
       moduleApi.setStatus('connecting', 'Connecting…');
       return;
     }
-    if (!state.enabled) {
-      bannerEl.hidden = true;
-      // The LTC listener feeds us with or without ProPresenter — an
-      // LTC-only setup is working, not broken.
-      if (state.ltc?.supported) moduleApi.setStatus('ok', 'LTC only — no ProPresenter host configured');
-      else moduleApi.setStatus('error', 'No ProPresenter host configured — set one in Admin');
+    const groups = visibleGroups();
+    const shown = groups.map((g) => g.source).filter(Boolean);
+    const say = (list) => list.map((s) => `${s.label}: ${s.message}`).join(' · ');
+    const bad = shown.filter((s) => s.status === 'error');
+    if (bad.length) {
+      moduleApi.setStatus('error', say(bad));
       return;
     }
-    if (!state.reachable) {
-      bannerEl.hidden = false;
-      bannerEl.textContent = 'ProPresenter unreachable — reconnecting…';
-      moduleApi.setStatus('error', 'ProPresenter unreachable — reconnecting…');
+    const waiting = shown.filter((s) => s.status === 'connecting');
+    if (waiting.length) {
+      moduleApi.setStatus('connecting', say(waiting));
       return;
     }
-    bannerEl.hidden = true;
-    moduleApi.setStatus('ok', 'Following ProPresenter timers');
+    const n = groups.reduce((a, g) => a + g.items.filter((i) => !i.missing).length, 0);
+    moduleApi.setStatus('ok', `${n} timer${n === 1 ? '' : 's'} from ${shown.length} source${shown.length === 1 ? '' : 's'}`);
   }
 
-  /* ── main render: diff the card set, update in place ────────────── */
+  /* ── main render: diff groups and cards, update in place ────────── */
+
+  function makeGroup(id) {
+    const el = document.createElement('section');
+    el.className = 'tm-group';
+    el.dataset.source = id;
+    const headEl = document.createElement('div');
+    headEl.className = 'tm-head';
+    const titleEl = document.createElement('span');
+    titleEl.className = 'tm-title';
+    const noteEl = document.createElement('span');
+    noteEl.className = 'tm-note';
+    headEl.append(titleEl, noteEl);
+    const emptyEl = document.createElement('div');
+    emptyEl.className = 'tm-empty';
+    emptyEl.hidden = true;
+    const gridEl = document.createElement('div');
+    gridEl.className = 'tm-grid';
+    el.append(headEl, emptyEl, gridEl);
+    return { el, headEl, titleEl, noteEl, emptyEl, gridEl, count: 0 };
+  }
 
   function render() {
     renderStatus();
@@ -398,96 +759,239 @@ export default function create({ root, moduleApi }) {
     const mono = state?.timerFont === 'monospace';
     if (mono !== wrap.classList.contains('tm-mono')) {
       wrap.classList.toggle('tm-mono', mono);
-      fit();
+      needFit = true;
+    }
+    // Headings belong to sections; without grouping there is one grid and no heading.
+    const showHeadings = !solo && pref('groupBySource') === true && pref('showHeadings') !== false;
+    wrap.classList.toggle('tm-headings', showHeadings);
+    for (const [cls, on] of [
+      ['tm-grouped', !solo && pref('groupBySource') === true],
+      ['tm-nostatus', pref('showStatus') === false],
+      ['tm-nodetail', pref('showDetail') === false],
+      ['tm-nonames', pref('showNames') === false],
+    ]) {
+      if (wrap.classList.contains(cls) !== on) {
+        wrap.classList.toggle(cls, on);
+        needFit = true;
+      }
     }
 
     let hint = '';
-    if (state && !state.enabled && !state.ltc?.supported) {
-      hint = 'No ProPresenter connection — set the host and port in Admin.';
-    }
-    const items = hint ? [] : visibleItems();
-    if (!hint && state?.reachable && !items.length) {
-      hint = 'Nothing selected — pick timers in the Timers ▾ menu.';
-    }
+    const groups = visibleGroups();
+    if (state && !state.sources.length) hint = 'Every source is switched off — turn one on in Admin.';
+    else if (state && !groups.length) hint = 'Nothing selected — switch a source on in this tile’s settings, or pick timers in the Timers ▾ menu.';
     hintEl.hidden = !hint;
     hintEl.textContent = hint;
-    gridEl.hidden = Boolean(hint);
-    if (hint) return;
+    groupsEl.hidden = Boolean(hint);
+    if (hint || !state) return;
 
-    const wanted = new Set(items.map((i) => i.key));
     let structureChanged = false;
+    const wantedKeys = new Set();
+    const orderedGroups = [];
+    for (const g of groups) {
+      let ge = groupEls.get(g.id);
+      if (!ge) {
+        ge = makeGroup(g.id);
+        groupEls.set(g.id, ge);
+        structureChanged = true;
+      }
+      const source = g.source;
+      const status = g.status ?? (source ? source.status : 'ok');
+      const message = g.message ?? (source ? source.message : '');
+      ge.headEl.hidden = !showHeadings;
+      setText(ge.titleEl, source ? source.label : 'Timers');
+      setText(ge.noteEl, status !== 'ok' ? message : g.items.length ? '' : 'no timers');
+      // Without headings the source's trouble still has to be said somewhere.
+      const emptyText = status !== 'ok' ? message : 'No timers';
+      const showEmpty = !showHeadings && (status !== 'ok' || !g.items.length);
+      ge.emptyEl.hidden = !showEmpty;
+      setText(ge.emptyEl, showEmpty ? emptyText : '');
+      ge.emptyEl.dataset.tone = showEmpty && status !== 'ok' ? 'warn' : '';
+      // In the flat grid a card dims for its own source (paint), not the whole grid.
+      ge.el.classList.toggle('is-down', !g.flat && status !== 'ok');
+      ge.el.classList.toggle('is-stale', !g.flat && status === 'error' && g.items.length > 0);
+      if (ge.gridEl.classList.contains('is-flow') !== Boolean(g.flat)) {
+        ge.gridEl.classList.toggle('is-flow', Boolean(g.flat));
+        structureChanged = true;
+      }
+
+      const els = [];
+      for (const item of g.items) {
+        let card = cards.get(item.key);
+        if (!card) {
+          card = makeCard(item);
+          cards.set(item.key, card);
+          structureChanged = true;
+        }
+        updateCard(card, item);
+        wantedKeys.add(item.key);
+        els.push(card.el);
+      }
+      if (ge.count !== els.length) structureChanged = true;
+      ge.count = els.length;
+      if (els.length !== ge.gridEl.children.length || els.some((el, i) => ge.gridEl.children[i] !== el)) {
+        ge.gridEl.replaceChildren(...els);
+        structureChanged = true;
+      }
+      orderedGroups.push(ge.el);
+    }
     for (const [key, card] of cards) {
-      if (!wanted.has(key)) {
-        card.el.remove();
-        cards.delete(key);
-        structureChanged = true;
-      }
+      if (wantedKeys.has(key)) continue;
+      card.el.remove();
+      cards.delete(key);
+      structureChanged = true;
     }
-    for (const item of items) {
-      let card = cards.get(item.key);
-      if (!card) {
-        card = makeCard(item);
-        cards.set(item.key, card);
-        structureChanged = true;
-      }
-      if (item.ltc) updateLtcCard(card, item.ltc);
-      else if (item.missing) updateMissingCard(card);
-      else updateTimerCard(card, item.timer);
+    for (const [id, ge] of groupEls) {
+      if (groups.some((g) => g.id === id)) continue;
+      ge.el.remove();
+      groupEls.delete(id);
+      structureChanged = true;
     }
-    // Keep DOM order in step with the state's order (config-list order).
-    const orderedEls = items.map((i) => cards.get(i.key).el);
-    if (structureChanged || orderedEls.some((el, i) => gridEl.children[i] !== el)) {
-      gridEl.replaceChildren(...orderedEls);
+    if (orderedGroups.length !== groupsEl.children.length || orderedGroups.some((el, i) => groupsEl.children[i] !== el)) {
+      groupsEl.replaceChildren(...orderedGroups);
+      structureChanged = true;
+    }
+    paint();
+    if (structureChanged || needFit) {
+      needFit = false;
       fit();
     }
   }
 
-  /* ── sizing: pick the column count that gives the biggest digits ── */
+  /* ── sizing: the column count that gives the biggest digits ─────── */
+
+  /** Status and detail lines are drawn at this share of the label's size (style.css agrees). */
+  const LINE_SCALE = 0.8;
+
+  /* Text measured off-screen the way the CSS draws it (bold, uppercase,
+     letter-spaced), so a title or the date can shrink before the card
+     would cut it off. */
+  const measurer = document.createElement('canvas').getContext('2d');
+  let textFamily = '';
+  function textWidth(text, px, spacingEm) {
+    if (!textFamily) textFamily = getComputedStyle(root).fontFamily || 'sans-serif';
+    measurer.font = `700 ${px}px ${textFamily}`;
+    const t = String(text || '').toUpperCase();
+    return measurer.measureText(t).width + spacingEm * px * Math.max(0, t.length - 1);
+  }
+  /** The last fit's card width and label size — what the date is fitted against. */
+  let lastFit = { cw: 200, meta: 12 };
+  function fitLabel(card, meta, avail) {
+    if (card.isClock) return; // the clock has no label line
+    const room = Math.max(24, avail - (card.nameEl.querySelector('.tm-ltc-badge') ? 34 : 0));
+    const natural = textWidth(card.labelEl.textContent, meta, 0.08);
+    const px = natural > room ? Math.max(8, Math.floor((meta * room) / natural)) : meta;
+    card.labelEl.style.fontSize = px === meta ? '' : `${px}px`;
+  }
 
   function fit() {
-    const n = Math.max(1, gridEl.childElementCount);
+    const list = [...cards.values()];
+    const n = list.length;
     const W = root.clientWidth;
     const H = root.clientHeight;
-    if (!W || !H) return;
+    if (!n || !W || !H) return;
     const PAD = H < 120 ? 4 : 10;
     const GAP = H < 120 ? 5 : 8;
     const CARD_PAD = 12; // a card's own vertical padding + borders
+    const HEAD_H = 20; // a source heading line, margin included
+    const groups = [...groupEls.values()].filter((g) => g.el.isConnected);
+    // Grouped: each source's grid wraps on its own, so its rows add up; flat:
+    // one grid. Headings only add a line each — they never decide the rows.
+    const grouped = wrap.classList.contains('tm-grouped') && groups.length > 1;
+    const headings = wrap.classList.contains('tm-headings') ? groups.length : 0;
+    const showStatus = !wrap.classList.contains('tm-nostatus');
+    const showDetail = !wrap.classList.contains('tm-nodetail');
+    const namesOn = !wrap.classList.contains('tm-nonames');
+    // Lines under the digits: status, and detail if any card has one.
+    const metaLines = (showStatus ? 1 : 0) + (showDetail && list.some((c) => !c.detailEl.hidden) ? 1 : 0);
+    const date = showStatus && pref('clockDate') && list.some((c) => c.isClock) ? dateParts() : null;
+    const dateWhole = date ? `${date.day}, ${date.rest}` : '';
 
-    // For each column count, budget a card's full stack (name line, digits,
-    // state line) and score by the digit size it affords ("-00:00:00" ≈ 9
-    // tabular chars wide). Cards too short for three readable lines drop to
-    // a compact look — no state text, the card color carries the state —
-    // but any layout with a readable full stack beats every compact one.
+    // For each column count, budget a card's full stack (label, digits,
+    // lines) and score by the digit size it affords — the SMALLEST card's,
+    // so no timer ends up unreadable. Cards too short for the full stack
+    // drop to a compact look (label + digits, the colour carries the
+    // state), but any layout with a readable full stack beats every
+    // compact one. The clock has no label line, and its date may take two.
+    const budgetFor = (c, ch, meta, mode, dateWrap) => {
+      const nameLine = namesOn && !c.isClock ? 1.3 * meta : 0;
+      if (mode === 'compact') return ch - nameLine;
+      const lines = metaLines + (c.isClock && dateWrap ? 1 : 0);
+      return ch - nameLine - lines * 1.3 * meta * LINE_SCALE;
+    };
+    const rowsFor = (cols) => (grouped
+      ? groups.reduce((a, g) => a + Math.max(1, Math.ceil(g.count / cols)), 0)
+      : Math.ceil(n / cols));
     let best = null;
     for (let cols = 1; cols <= n; cols += 1) {
-      const rows = Math.ceil(n / cols);
+      const rows = rowsFor(cols);
       const cw = (W - PAD * 2 - GAP * (cols - 1)) / cols - 18;
-      const ch = (H - PAD * 2 - GAP * (rows - 1)) / rows - CARD_PAD;
+      // Every row the same height: padding, one heading line per group, and
+      // a gap between any two rows (between groups too) come off the top.
+      const rowH = (H - PAD * 2 - headings * HEAD_H - GAP * (rows - 1)) / rows;
+      const ch = rowH - CARD_PAD;
       if (cw <= 0 || ch <= 0) continue;
       const meta = Math.max(9, Math.min(22, Math.floor(ch * 0.16)));
-      const byWidth = (cw * 1.55) / 9;
-      const full = Math.min(byWidth, ch - 2.6 * meta);
-      const compact = Math.min(byWidth, ch - 1.3 * meta);
+      const dateWrap = Boolean(dateWhole) && textWidth(dateWhole, meta * LINE_SCALE, 0.1) > cw;
+      let full = Infinity;
+      let compact = Infinity;
+      for (const c of list) {
+        const byWidth = (cw * 1.55) / c.chars;
+        full = Math.min(full, byWidth, budgetFor(c, ch, meta, 'full', dateWrap));
+        compact = Math.min(compact, byWidth, budgetFor(c, ch, meta, 'compact', dateWrap));
+      }
       const mode = full >= 14 ? 'full' : 'compact';
       const size = mode === 'full' ? full : compact;
       const score = (mode === 'full' ? 1000 : 0) + size;
-      if (!best || score > best.score) best = { cols, meta, mode, size, cw, score };
+      if (!best || score > best.score) best = { cols, meta, mode, cw, ch, rowH, dateWrap, score };
     }
     if (!best) return;
-    gridEl.style.gridTemplateColumns = `repeat(${best.cols}, 1fr)`;
+    for (const g of groups) {
+      g.gridEl.style.gridTemplateColumns = `repeat(${best.cols}, 1fr)`;
+      g.gridEl.style.setProperty('--tm-cols', String(best.cols));
+      // Each group takes exactly the height its rows, gaps and heading need,
+      // so a card is the same height under every heading.
+      const rows = Math.max(1, Math.ceil(g.count / best.cols));
+      const head = headings ? HEAD_H : 0;
+      g.el.style.flexGrow = String(Math.max(1, Math.round(head + rows * best.rowH + (rows - 1) * GAP)));
+    }
     wrap.style.setProperty('--tm-pad', PAD + 'px');
     wrap.style.setProperty('--tm-gap', GAP + 'px');
-    wrap.classList.toggle('tm-compact', best.mode === 'compact');
-    const timeSize = Math.max(11, Math.floor(best.size));
-    // LTC digits ("00:00:00:00") are ~11.5 tabular chars wide in the same cell.
-    const ltcSize = Math.max(11, Math.floor(Math.min((best.cw * 1.55) / 11.5, best.size)));
-    wrap.style.setProperty('--tm-time-size', timeSize + 'px');
-    wrap.style.setProperty('--tm-ltc-size', ltcSize + 'px');
     wrap.style.setProperty('--tm-meta-size', best.meta + 'px');
+    wrap.classList.toggle('tm-compact', best.mode === 'compact');
+    lastFit = { cw: best.cw, meta: best.meta };
+    for (const c of list) {
+      const budget = budgetFor(c, best.ch, best.meta, best.mode, best.dateWrap);
+      const px = Math.max(11, Math.floor(Math.min((best.cw * 1.55) / c.chars, budget)));
+      c.timeEl.style.fontSize = px + 'px';
+      fitLabel(c, best.meta, best.cw);
+      c.dateKey = ''; // the date re-fits to the new card width on the next paint
+    }
+    // Then a look at the real thing: the layout is applied, so each card's
+    // height is known. Digits that would still spill past it — an estimate
+    // off by a line, a heading taller than budgeted — shrink to what is
+    // there. Only ever smaller; the estimate above sets the ceiling.
+    for (const c of list) {
+      const box = c.el.clientHeight;
+      if (!box) continue;
+      const parts = [c.nameEl, c.timeEl, c.statusEl, c.detailEl].filter((el) => !el.hidden && getComputedStyle(el).display !== 'none');
+      const others = parts.filter((el) => el !== c.timeEl).reduce((a, el) => a + el.getBoundingClientRect().height, 0);
+      const room = box - CARD_PAD - others - 0.02 * box * Math.max(0, parts.length - 1); // .tm-card's 2% gaps
+      const px = parseFloat(c.timeEl.style.fontSize) || 0;
+      if (room > 0 && px * 1.05 > room) c.timeEl.style.fontSize = `${Math.max(11, Math.floor(room / 1.05))}px`;
+    }
   }
 
   /* ── live feed ──────────────────────────────────────────────────── */
 
+  function takeState(next) {
+    if (!next || typeof next !== 'object' || !Array.isArray(next.sources)) return;
+    noteServerClock(Number(next.serverNow));
+    state = next;
+    feedOffline = false;
+    render();
+  }
+
   function connect() {
     stream = moduleApi.sse('/stream', {
       open() {
@@ -502,13 +1006,13 @@ export default function create({ root, moduleApi }) {
       },
       events: {
         state(ev) {
+          let parsed;
           try {
-            state = JSON.parse(ev.data);
+            parsed = JSON.parse(ev.data);
           } catch {
             return;
           }
-          feedOffline = false;
-          render();
+          takeState(parsed);
         },
       },
     });
@@ -518,15 +1022,13 @@ export default function create({ root, moduleApi }) {
 
   return {
     start() {
+      applyColors();
       moduleApi.setStatus('connecting', 'Connecting…');
       // Instant paint from the snapshot, then live updates.
       moduleApi.fetch('/state')
         .then((res) => (res.ok ? res.json() : null))
         .then((body) => {
-          if (body && body.state && !state) {
-            state = body.state;
-            render();
-          }
+          if (body && body.state && !state) takeState(body.state);
         })
         .catch(() => { /* the stream will cover it */ });
       connect();
@@ -542,17 +1044,22 @@ export default function create({ root, moduleApi }) {
         fit();
       });
       resizeObserver.observe(root);
+      paintTimer = setInterval(paint, PAINT_MS);
       render();
     },
     stop() {
       stream?.close();
       stream = null;
+      clearInterval(paintTimer);
+      paintTimer = null;
       resizeObserver?.disconnect();
       resizeObserver = null;
       if (ltcRaf) {
         cancelAnimationFrame(ltcRaf);
         ltcRaf = 0;
       }
+      cards.clear();
+      groupEls.clear();
       root.innerHTML = ''; // header controls are removed by the shell
     },
     onResize() {
diff --git a/modules/propresenter-timers/module.json b/modules/propresenter-timers/module.json
index c6f56b1..683de2b 100644
--- a/modules/propresenter-timers/module.json
+++ b/modules/propresenter-timers/module.json
@@ -1,34 +1,73 @@
 {
   "id": "propresenter-timers",
   "name": "Timers",
-  "version": "1.2.1",
-  "proddash": ">=1.2.0",
-  "description": "Live ProPresenter timers and LTC timecode",
+  "version": "1.3.0",
+  "proddash": ">=1.4.0",
+  "description": "Timers, Clocks, and LTC From configured Modules",
+  "provides": [
+    "timers"
+  ],
   "permissions": [
-    { "kind": "microphone", "reason": "Decoding SMPTE LTC timecode from an audio input on this machine" },
-    { "kind": "local-network", "reason": "Reaching ProPresenter on this network" }
+    {
+      "kind": "microphone",
+      "reason": "Decoding SMPTE LTC timecode from an audio input on this machine"
+    },
+    {
+      "kind": "local-network",
+      "reason": "Reaching ProPresenter on this network"
+    }
   ],
   "client": "client.js",
   "server": "server.js",
   "style": "style.css",
-  "minSize": { "w": 2, "h": 1 },
-  "defaultSize": { "w": 4, "h": 2 },
+  "minSize": {
+    "w": 2,
+    "h": 1
+  },
+  "defaultSize": {
+    "w": 4,
+    "h": 3
+  },
+  "configGroups": {
+    "ProPresenter": {
+      "toggle": "ppEnabled",
+      "help": "The timers configured in ProPresenter, read over its network API. Enable the network in ProPresenter's Preferences › Network and enter the host and port shown there. Switch it off on a day ProPresenter isn't running and nothing is polled."
+    },
+    "LTC Timecode": {
+      "toggle": "ltcEnabled",
+      "help": "SMPTE LTC decoded from an audio input on this machine, shown as a running timecode. Pick the device and the channel the timecode arrives on; macOS has to grant ProdDash the microphone (see the launcher's Permissions)."
+    },
+    "PCO Plan": {
+      "toggle": "pcoEnabled",
+      "help": "Timers the PCO Plan module offers — service elapsed, current item, countdown to service — appear here under a PCO Plan heading when that module is installed and configured. Nothing to set up on this side."
+    }
+  },
   "configSchema": {
+    "ppEnabled": {
+      "type": "switch",
+      "label": "ProPresenter timers",
+      "group": "ProPresenter",
+      "default": true
+    },
     "propresenter": {
       "type": "endpoint",
       "label": "ProPresenter",
       "group": "ProPresenter",
-      "default": { "host": "", "port": 1025 }
+      "default": {
+        "host": "",
+        "port": 1025
+      }
     },
     "password": {
       "type": "password",
-      "label": "API password (only if set in ProPresenter)",
+      "label": "API password",
       "group": "ProPresenter",
-      "default": ""
+      "default": "",
+      "help": "Only if a password is set in ProPresenter's network preferences."
     },
     "ltcEnabled": {
       "type": "switch",
-      "label": "LTC listener — decode timecode from an audio input on this machine",
+      "label": "LTC timecode",
       "group": "LTC Timecode",
       "default": false
     },
@@ -42,10 +81,17 @@
     },
     "ltcChannel": {
       "type": "number",
-      "label": "Channel on that device (1-based)",
+      "label": "Channel",
       "group": "LTC Timecode",
       "showWhen": "ltcEnabled",
-      "default": 1
+      "default": 1,
+      "help": "The channel on that device carrying the timecode, counted from 1."
+    },
+    "pcoEnabled": {
+      "type": "switch",
+      "label": "PCO Plan timers",
+      "group": "PCO Plan",
+      "default": true
     },
     "timerFont": {
       "type": "select",
@@ -53,9 +99,131 @@
       "group": "Display",
       "default": "default",
       "options": [
-        { "value": "default", "label": "Default (system)" },
-        { "value": "monospace", "label": "Monospace — steadier changing digits" }
+        {
+          "value": "default",
+          "label": "Default (system)"
+        },
+        {
+          "value": "monospace",
+          "label": "Monospace — steadier changing digits"
+        }
       ]
     }
+  },
+  "instanceGroups": {
+    "Show": {
+      "collapsed": false,
+      "columns": 2
+    },
+    "Clock": {
+      "collapsed": false,
+      "columns": 2
+    },
+    "Colours": {
+      "collapsed": true,
+      "columns": 2,
+      "help": "The time's colour per state. Left at the default, a colour follows the dashboard theme; one you change here wins over it."
+    }
+  },
+  "instanceSchema": {
+    "showNames": {
+      "type": "switch",
+      "label": "Names",
+      "default": true,
+      "group": "Show"
+    },
+    "showStatus": {
+      "type": "switch",
+      "label": "Status lines",
+      "default": true,
+      "group": "Show"
+    },
+    "showDetail": {
+      "type": "switch",
+      "label": "Detail lines",
+      "default": true,
+      "group": "Show"
+    },
+    "showSeconds": {
+      "type": "switch",
+      "label": "Seconds",
+      "default": true,
+      "group": "Show"
+    },
+    "leadingZeros": {
+      "type": "switch",
+      "label": "Leading zeros",
+      "default": false,
+      "group": "Show"
+    },
+    "groupBySource": {
+      "type": "switch",
+      "label": "Group by source",
+      "default": false,
+      "group": "Show"
+    },
+    "showHeadings": {
+      "type": "switch",
+      "label": "Source headings",
+      "default": true,
+      "group": "Show",
+      "showWhen": "groupBySource"
+    },
+    "clock24h": {
+      "type": "switch",
+      "label": "24-hour",
+      "default": true,
+      "group": "Clock"
+    },
+    "clockSeconds": {
+      "type": "switch",
+      "label": "Seconds",
+      "default": true,
+      "group": "Clock"
+    },
+    "clockDate": {
+      "type": "switch",
+      "label": "Date",
+      "default": false,
+      "group": "Clock"
+    },
+    "dateShortDay": {
+      "type": "switch",
+      "label": "Short day",
+      "default": false,
+      "group": "Clock",
+      "showWhen": "clockDate"
+    },
+    "dateShortMonth": {
+      "type": "switch",
+      "label": "Short month",
+      "default": false,
+      "group": "Clock",
+      "showWhen": "clockDate"
+    },
+    "runningColor": {
+      "type": "color",
+      "label": "Running",
+      "default": "#2ee59a",
+      "group": "Colours"
+    },
+    "warningColor": {
+      "type": "color",
+      "label": "Warning",
+      "default": "#f0b429",
+      "group": "Colours"
+    },
+    "overrunColor": {
+      "type": "color",
+      "label": "Overrun",
+      "default": "#f4433c",
+      "group": "Colours"
+    },
+    "idleColor": {
+      "type": "color",
+      "label": "Idle",
+      "default": "#8b98a5",
+      "group": "Colours"
+    }
   }
 }
diff --git a/modules/propresenter-timers/server.js b/modules/propresenter-timers/server.js
index 41b2926..5b1dba6 100644
--- a/modules/propresenter-timers/server.js
+++ b/modules/propresenter-timers/server.js
@@ -1,393 +1,1177 @@
 'use strict';
 
 /**
- * ProPresenter Timers — server part.
+ * Timers — server part.
  *
- * Polls the ProPresenter openAPI for the configured timer list and the live
- * timer values, decodes LTC timecode from an audio input, and fans one
- * merged state object out to every tile over SSE. Browsers never talk to
- * ProPresenter or the audio hardware directly.
+ * One tile for every timer and clock in the room, from any source. Each
+ * SOURCE turns its own world into the module guide's standard timer objects
+ * ({ id, label, kind, state, startedAt, elapsedMs, remainingMs, targetMs,
+ * status, detail } — see "Offering timers to the Timers module") and reports
+ * its health. This file merges the sources, fans the merged state out to the
+ * tiles over SSE, and offers the whole set to the rest of ProdDash as a
+ * timers provider itself. Browsers never talk to ProPresenter, the audio
+ * hardware or other modules directly.
  *
- *   GET /state        → { state: <state> }   (instant paint for new tiles)
- *   GET /stream       → SSE, `state` events  (change-detected, heartbeated)
- *   GET /ltc/devices  → this machine's audio input devices, for the admin
- *                       page's device picker (select + optionsRoute).
+ * Sources (one factory each, below):
+ *   propresenter  the ProPresenter openAPI timer list + live values, polled
+ *                 exactly as before (admin switch: ppEnabled)
+ *   ltc           SMPTE LTC decoded from an audio input by the built-in
+ *                 listener (ltc-listener.js / ltc.js — untouched), shown as a
+ *                 kind:"clock" timer whose status.text is the timecode and
+ *                 whose `ltc` extension carries fps/df/ageMs so the tile can
+ *                 count frames between reports (admin switch: ltcEnabled)
+ *   clock         time of day. Trivial here — the tile paints its own wall
+ *                 clock — it exists so the clock is one more entry in
+ *                 /timers and in the tile's list, like everything else
+ *   modules       every other module whose manifest says
+ *                 "provides": ["timers"], discovered from the shell's
+ *                 /api/modules over loopback (shell.port, never guessed) and
+ *                 read through its /timers/stream when that answers as SSE,
+ *                 else its /timers polled every 2 s. Re-discovered every 30 s
+ *                 so a newly installed provider appears without a restart.
+ *                 PCO Plan sits behind the admin pcoEnabled switch; any other
+ *                 provider is consumed as soon as it is found (give it a
+ *                 switch of its own in module.json the day one needs it).
  *
- * Endpoints used, verified against openapi.propresenter.com (API v1):
+ * ADDING A SOURCE (another timer platform) is a dozen lines. Write a factory
+ * that returns
+ *
+ *   { id, label, kind, start(emit), stop(), health() }
+ *
+ *   id      short, stable ('propresenter', 'ltc', …) — the tile keys its
+ *           show/hide settings on `${id}:${timer.id}`
+ *   label   the heading the tile puts over this source's timers
+ *   kind    which tile switch governs it: 'propresenter' | 'ltc' | 'clock'
+ *           | 'module' (a new platform would add its own switch and kind)
+ *   start(emit) begins following the upstream and calls
+ *           emit({ status, message, timers, updatedAt }) whenever the view
+ *           changes — status 'ok' | 'connecting' | 'error', message one
+ *           human line (shown under the heading while not ok), timers an
+ *           array of standard timer objects as of updatedAt
+ *   stop()  tears everything down (a re-init follows every admin save)
+ *   health() → { status, message } for the admin health line
+ *
+ * then, in init(), push it onto `fixed` behind its own admin `switch` field
+ * (named as that group's `toggle` in module.json). Merging, change
+ * detection, both SSE feeds, /timers and the tile are generic — nothing
+ * else changes.
+ *
+ * Routes:
+ *   GET /state          → { state }            tile snapshot (instant paint)
+ *   GET /stream         → SSE `state` events    tile feed, change-detected
+ *   GET /timers         → provider snapshot     the module guide's contract
+ *   GET /timers/stream  → SSE `timers` events   same, for other consumers
+ *   GET /ltc/devices    → this machine's audio inputs, for the admin page's
+ *                         device picker (select + optionsRoute)
+ *
+ * ProPresenter endpoints, verified against openapi.propresenter.com (v1):
  *   GET /v1/timers          → [ { id:{uuid,name,index}, allows_overrun,
  *                                 countdown:{duration} | count_down_to_time:{time_of_day,period}
  *                                 | elapsed:{start_time,end_time} } ]
  *   GET /v1/timers/current  → [ { id:{uuid,name,index}, time:"HH:MM:SS", state } ]
  *     `time` may be negative ("-00:00:02") while overrunning, and some builds
- *     append hundredths ("00:00:01.00" appears in the spec's schema example).
- *     `state` enum is stopped|running|complete|overrunning|overran — but the
- *     spec's own response example says "overrun", so treat anything containing
- *     "overr" as overrun. The API exposes NO per-timer color anywhere.
- *
- * LTC: ProPresenter exposes no timecode over any API (the HTTP openAPI has
- * no timecode route, and the classic stage-display websocket drops the
- * field — both verified dead on ProPresenter 21.4), so LTC is read from the
- * audio signal itself. Behind the admin "LTC listener" switch: off means no
- * LTC tile in the picker and nothing captured; on, the built-in listener
- * (ltc-listener.js) captures the admin-selected device/channel and decodes
- * in-process. It is the module's one and only LTC source.
- *
- * ProPresenter's built-in HTTP server is easily overwhelmed (see the hot-path
- * notes in ../propresenter-now-next/propresenter-core). So: requests run
- * strictly sequentially, the next tick is scheduled only after the previous
- * one finished, live values are the only every-tick call, and the timer list
- * rides a slow lane. The endpoints do offer `?chunked` streaming, but polling
- * matches how propresenter-core survives real-world ProPresenter quirks.
+ *     append hundredths. `state` enum is stopped|running|complete|overrunning|
+ *     overran — but the spec's own example says "overrun", so anything
+ *     containing "overr" is overrun. The API exposes NO per-timer color.
+ *   ProPresenter's HTTP server is easily overwhelmed, so requests run strictly
+ *   sequentially, live values are the only every-tick call, and the timer
+ *   list rides a slow lane.
  */
 
-/** Hot-path cadence — live timer values. */
+const http = require('http');
+const path = require('path');
+const { spawn } = require('child_process');
+const { createLtcListener } = require('./ltc-listener');
+const manifest = require('./module.json');
+
+/** This module's id — left out of provider discovery (we don't consume ourselves). */
+const SELF_ID = 'propresenter-timers';
+/** The provider the admin "PCO Plan" switch governs; every other provider is always on. */
+const PCO_ID = 'pco-plan';
+
+/* ProPresenter cadence. */
 const POLL_MS = 500;
-/** Backoff while ProPresenter is unreachable. */
 const RETRY_MS = 2500;
-/** The configured-timer list refreshes every Nth tick (~2s at 500ms). */
 const SLOW_EVERY = 4;
-/** Abort a hung request well before it can stall the loop for good. */
 const REQUEST_TIMEOUT_MS = 4000;
+
+/* Timers offered by other modules. */
+const DISCOVER_MS = 30000; // re-read /api/modules: a newly installed provider shows up without a restart
+const DISCOVER_RETRY_MS = 5000; // …sooner while the shell isn't answering yet (boot)
+const DISCOVER_FIRST_MS = 1500; // init() runs before the shell listens
+const MODULE_POLL_MS = 2000; // GET /timers cadence for a provider with no stream
+const BACKOFF_MIN_MS = 3000;
+const BACKOFF_MAX_MS = 15000;
+const GRACE_MS = 10000; // a provider's timers survive this long without a fresh snapshot
+const STREAM_SILENCE_MS = 45000; // a stream with no bytes for this long (heartbeats are 15 s) is dead
+const MAX_TIMERS_PER_PROVIDER = 50;
+
 /** SSE comment ping cadence — keeps idle connections alive through sleepy Wi-Fi. */
 const HEARTBEAT_MS = 15000;
 
-const { spawn } = require('child_process');
-const { createLtcListener } = require('./ltc-listener');
+const KINDS = new Set(['elapsed', 'countdown', 'clock']);
+const STATES = new Set(['running', 'paused', 'stopped', 'idle']);
+const TONES = new Set(['ok', 'warn', 'danger', 'muted']);
 
-/** Set by init(), read by the routes — both are rebuilt together on remount. */
+/** Set by init(), read by routes() and tiles() — all rebuilt together on remount. */
 let current = null;
 
-function clearedState(enabled, ltcEnabled = false, timerFont = 'default') {
+/* ── small helpers ────────────────────────────────────────────────────── */
+
+function sendJson(res, code, body) {
+  res.writeHead(code, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(JSON.stringify(body));
+}
+
+/** Open an SSE response, send the first frame, and register it in `set`. */
+function openSse(req, res, set, firstFrame) {
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream; charset=utf-8',
+    'Cache-Control': 'no-cache, no-transform',
+    Connection: 'keep-alive',
+    'X-Accel-Buffering': 'no',
+  });
+  res.write('retry: 3000\n\n');
+  res.write(firstFrame);
+  if (!set) return void res.end();
+  // A viewer that stops reading (locked tablet, sleeping laptop) must not
+  // queue frames forever; keepalive probes make the OS notice.
+  try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
+  set.add(res);
+  req.on('close', () => set.delete(res));
+}
+
+function writeAll(set, payload) {
+  for (const res of set) {
+    try {
+      res.write(payload);
+    } catch {
+      set.delete(res);
+    }
+  }
+}
+
+/** "HH:MM:SS", "-HH:MM:SS", "MM:SS", optional ".hh" → signed milliseconds, or null. */
+function hmsToMs(str) {
+  const m = /^\s*(-)?(?:(\d+):)?(\d{1,2}):(\d{2})(?:\.(\d+))?\s*$/.exec(String(str || ''));
+  if (!m) return null;
+  const h = m[2] ? Number(m[2]) : 0;
+  let ms = (h * 3600 + Number(m[3]) * 60 + Number(m[4])) * 1000;
+  if (m[5]) ms += Math.round(Number('0.' + m[5]) * 1000);
+  return m[1] ? -ms : ms;
+}
+
+/** ms → "M:SS" / "H:MM:SS" (for detail lines). */
+function fmtMs(ms) {
+  const s = Math.max(0, Math.round(ms / 1000));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  const pad = (v) => String(v).padStart(2, '0');
+  return h ? `${h}:${pad(m)}:${pad(sec)}` : `${m}:${pad(sec)}`;
+}
+
+/** ProPresenter's count_down_to_time target, short: "9:30a", "12:05p", or "21:30" for a 24-hour clock. */
+function timeOfDayText(seconds, period) {
+  const s = Number(seconds);
+  if (!Number.isFinite(s)) return '';
+  const h = Math.floor(s / 3600) % 24;
+  const m = Math.floor((s % 3600) / 60);
+  const p = String(period || '').toLowerCase();
+  if (p === 'am' || p === 'pm') return `${h % 12 || 12}:${String(m).padStart(2, '0')}${p[0]}`;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+
+function errorText(err) {
+  return String(err?.cause?.code || err?.code || err?.message || err || 'failed');
+}
+
+/* ── validation of what other modules hand us ─────────────────────────── */
+
+function numOrNull(v) {
+  if (v === null || v === undefined || v === '') return null;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : null;
+}
+
+/** One timer object from a provider, coerced to the contract (or null to drop it). */
+function sanitizeTimer(t) {
+  if (!t || typeof t !== 'object') return null;
+  const id = t.id === null || t.id === undefined ? '' : String(t.id);
+  if (!id) return null;
+  let status = null;
+  if (t.status && typeof t.status === 'object' && t.status.text !== undefined && t.status.text !== null) {
+    status = { text: String(t.status.text).slice(0, 200) };
+    if (TONES.has(t.status.tone)) status.tone = t.status.tone;
+  }
   return {
-    enabled,
-    ltcEnabled,
-    timerFont,
-    reachable: false,
-    lastError: '',
-    timers: [],
-    // supported true once the listener has a verdict; false when the
-    // listener is off, has no device, or its capture failed (note says
-    // why). status is running|stopped|nosignal; while running, ageMs lets
-    // clients count frames locally between updates.
-    ltc: { supported: false, time: '', receiving: false, status: '', fps: 0, df: false, source: '', note: '' },
+    id,
+    label: String(t.label || id).slice(0, 120),
+    kind: KINDS.has(t.kind) ? t.kind : 'elapsed',
+    state: STATES.has(t.state) ? t.state : 'stopped',
+    startedAt: numOrNull(t.startedAt),
+    elapsedMs: numOrNull(t.elapsedMs),
+    remainingMs: numOrNull(t.remainingMs),
+    targetMs: numOrNull(t.targetMs),
+    status,
+    detail: t.detail === null || t.detail === undefined ? '' : String(t.detail).slice(0, 200),
   };
 }
 
-module.exports = {
-  init({ config, log }) {
-    const streams = new Set();
-    // Endpoint config. Legacy flat host/port keys (saved before the endpoint
-    // field existed) can only still be present until the admin form is
-    // re-saved, so when they exist they win over the endpoint's default.
-    const ep = config.propresenter && typeof config.propresenter === 'object' ? config.propresenter : {};
-    const host = String(config.host ?? ep.host ?? '');
-    const port = Number(config.port ?? ep.port) || 1025;
-    const password = String(config.password || '');
-    const enabled = Boolean(host && port);
-    const ltcEnabled = Boolean(config.ltcEnabled);
-    const ltcDevice = String(config.ltcDevice || '');
-    const ltcChannel = Math.max(1, Math.trunc(Number(config.ltcChannel)) || 1);
-    const timerFont = config.timerFont === 'monospace' ? 'monospace' : 'default';
+/** A provider's /timers document → { label, timers, updatedAt }, or null when it isn't one. */
+function sanitizeSnapshot(raw) {
+  if (!raw || typeof raw !== 'object' || !Array.isArray(raw.timers)) return null;
+  return {
+    label: raw.label ? String(raw.label).slice(0, 60) : '',
+    timers: raw.timers.map(sanitizeTimer).filter(Boolean).slice(0, MAX_TIMERS_PER_PROVIDER),
+    updatedAt: Number(raw.updatedAt) || Date.now(),
+  };
+}
 
-    let latest = clearedState(enabled, ltcEnabled, timerFont);
-    let lastFrame = '';
-    let stopped = false;
-    let pollTimer = null;
-    let tick = 0;
+/* ── source: ProPresenter ─────────────────────────────────────────────── */
 
-    /** uuid → { name, index, type, allowsOverrun } from /v1/timers, in list order. */
-    let timerConfigs = new Map();
-    /** Built-in listener's latest word: { state, time, fps, df, ageMs } | { error }. */
-    let listenerLtc = null;
+function createProPresenterSource({ config, log }) {
+  // Endpoint config. Legacy flat host/port keys (saved before the endpoint
+  // field existed) can only still be present until the admin form is
+  // re-saved, so when they exist they win over the endpoint's default.
+  const ep = config.propresenter && typeof config.propresenter === 'object' ? config.propresenter : {};
+  const host = String(config.host ?? ep.host ?? '');
+  const port = Number(config.port ?? ep.port) || 1025;
+  const password = String(config.password || '');
+  const configured = Boolean(host && port);
 
-    /** The LTC verdict — the built-in listener is the only source. */
-    function composeLtc() {
-      if (!ltcEnabled) {
-        return { supported: false, source: '', time: '', receiving: false, status: '', fps: 0, df: false, note: 'LTC listener disabled' };
+  let emit = () => {};
+  let stopped = false;
+  let pollTimer = null;
+  let tick = 0;
+  let reachable = false;
+  let lastError = '';
+  let timers = [];
+  let updatedAt = 0;
+  /** uuid → { name, index, type, allowsOverrun, targetMs, detail } from /v1/timers, in list order. */
+  let timerConfigs = new Map();
+
+  function url(target) {
+    const built = new URL(`http://${host}:${port}${target}`);
+    if (password) built.searchParams.set('password', password);
+    return built;
+  }
+
+  async function requestJson(target) {
+    const response = await fetch(url(target), {
+      headers: { Accept: 'application/json' },
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+    });
+    if (!response.ok) {
+      const err = new Error(`ProPresenter ${response.status} ${response.statusText}`);
+      err.status = response.status;
+      throw err;
+    }
+    const text = await response.text();
+    return text ? JSON.parse(text) : null;
+  }
+
+  function describe(entry) {
+    if (entry.countdown) {
+      const targetMs = Number(entry.countdown.duration) > 0 ? Number(entry.countdown.duration) * 1000 : null;
+      return { type: 'countdown', targetMs, detail: targetMs !== null ? `Countdown ${fmtMs(targetMs)}` : 'Countdown' };
+    }
+    if (entry.count_down_to_time) {
+      const at = timeOfDayText(entry.count_down_to_time.time_of_day, entry.count_down_to_time.period);
+      return { type: 'countdown_to_time', targetMs: null, detail: at ? `to ${at}` : 'to a time of day' };
+    }
+    if (entry.elapsed) {
+      const end = Number(entry.elapsed.end_time);
+      const targetMs = Number.isFinite(end) && end > 0 ? end * 1000 : null;
+      return { type: 'elapsed', targetMs, detail: targetMs !== null ? `Elapsed · to ${fmtMs(targetMs)}` : 'Elapsed' };
+    }
+    return { type: 'unknown', targetMs: null, detail: '' };
+  }
+
+  function applyTimerList(list) {
+    if (!Array.isArray(list)) return;
+    const next = new Map();
+    for (const entry of list) {
+      const uuid = entry?.id?.uuid;
+      if (!uuid) continue;
+      next.set(uuid, {
+        name: String(entry.id.name || 'Timer'),
+        index: Number(entry.id.index) || 0,
+        allowsOverrun: Boolean(entry.allows_overrun),
+        ...describe(entry),
+      });
+    }
+    timerConfigs = next;
+  }
+
+  /** One ProPresenter timer (configured entry + live value) → a standard timer object. */
+  function toTimer(uuid, cfg, live, now) {
+    const rawState = String(live?.state || '').toLowerCase();
+    const overrun = rawState.includes('overr');
+    const value = live ? hmsToMs(live.time) : null;
+    const type = cfg ? cfg.type : 'unknown';
+    // A timer reported live but missing from the (stale) config list has an
+    // unknown type until the slow lane catches up (~2 s); treat it as elapsed
+    // meanwhile — the whole-second display can't drift wrong in that time.
+    const kind = type === 'countdown' || type === 'countdown_to_time' ? 'countdown' : 'elapsed';
+    const targetMs = cfg ? cfg.targetMs : null;
+    let state;
+    if (!live) state = 'idle';
+    else if (rawState === 'running' || overrun) state = 'running';
+    else if (rawState === 'complete') state = 'stopped';
+    else {
+      // ProPresenter's "stopped" covers both a timer that never started
+      // (still showing its full length) and one paused mid-way.
+      const atStart = value === null || (kind === 'countdown' ? targetMs !== null && value === targetMs : value === 0);
+      state = atStart ? 'idle' : 'paused';
+    }
+    const elapsedMs = kind === 'elapsed' ? value : targetMs !== null && value !== null ? targetMs - value : null;
+    const remainingMs = kind === 'countdown' ? value : targetMs !== null && value !== null ? targetMs - value : null;
+    const startedAt = state === 'running' && elapsedMs !== null ? now - elapsedMs : null;
+    const text = !live ? '—' : overrun ? 'Overrun' : rawState === 'running' ? 'Running' : rawState === 'complete' ? 'Complete' : 'Stopped';
+    const tone = overrun ? 'danger' : rawState === 'running' ? 'ok' : rawState === 'complete' ? 'warn' : 'muted';
+    return {
+      id: uuid,
+      label: (live && live.name) || (cfg && cfg.name) || 'Timer',
+      kind,
+      state,
+      startedAt,
+      elapsedMs,
+      remainingMs,
+      targetMs,
+      status: { text, tone },
+      detail: cfg ? cfg.detail : '',
+    };
+  }
+
+  /** Merge configured timers (order, type) with live values into one list. */
+  function mergeTimers(currentTimes, now) {
+    const live = new Map();
+    if (Array.isArray(currentTimes)) {
+      for (const entry of currentTimes) {
+        const uuid = entry?.id?.uuid;
+        if (!uuid) continue;
+        live.set(uuid, {
+          name: String(entry.id.name || ''),
+          time: typeof entry.time === 'string' ? entry.time : '',
+          state: typeof entry.state === 'string' ? entry.state : '',
+        });
       }
-      if (!listenerLtc) {
-        return { supported: false, source: '', time: '', receiving: false, status: '', fps: 0, df: false, note: 'Starting LTC listener…' };
+    }
+    const out = [];
+    for (const [uuid, cfg] of timerConfigs) {
+      const now_ = live.get(uuid) || null;
+      live.delete(uuid);
+      out.push(toTimer(uuid, cfg, now_, now));
+    }
+    // Timers reported live but missing from the (possibly stale) config
+    // list still deserve a card — type unknown until the slow lane catches up.
+    for (const [uuid, now_] of live) out.push(toTimer(uuid, null, now_, now));
+    return out;
+  }
+
+  function status() {
+    if (!configured) return 'error';
+    if (reachable) return 'ok';
+    return lastError ? 'error' : 'connecting';
+  }
+
+  function message() {
+    if (!configured) return 'No ProPresenter host configured — set one in Admin, or switch ProPresenter timers off';
+    if (reachable) return `Polling ${host}:${port}, ${timers.length} timer${timers.length === 1 ? '' : 's'}`;
+    return lastError ? `Unreachable at ${host}:${port} — ${lastError}` : `Reaching ${host}:${port}…`;
+  }
+
+  function publish() {
+    if (stopped) return;
+    emit({ status: status(), message: message(), timers, updatedAt });
+  }
+
+  async function pollTick() {
+    if (stopped) return;
+    try {
+      tick += 1;
+      // Slow lane first on the very first tick so cards get names/types
+      // immediately; afterwards every SLOW_EVERY ticks.
+      if (tick % SLOW_EVERY === 1 || !timerConfigs.size) {
+        applyTimerList(await requestJson('/v1/timers'));
       }
-      if (listenerLtc.error) {
-        return { supported: false, source: '', time: '', receiving: false, status: '', fps: 0, df: false, note: listenerLtc.error };
+      // THE HOT PATH — live values every tick.
+      const currentTimes = await requestJson('/v1/timers/current');
+      updatedAt = Date.now();
+      timers = mergeTimers(currentTimes, updatedAt);
+      reachable = true;
+      lastError = '';
+    } catch (err) {
+      reachable = false;
+      lastError = errorText(err); // "ECONNREFUSED" beats fetch's "fetch failed"
+    }
+    publish();
+    if (stopped) return;
+    pollTimer = setTimeout(pollTick, reachable ? POLL_MS : RETRY_MS);
+  }
+
+  return {
+    id: 'propresenter',
+    label: 'ProPresenter',
+    kind: 'propresenter',
+    start(e) {
+      emit = e;
+      if (!configured) {
+        log('ProPresenter timers on, but no host configured — set one in /admin');
+        publish();
+        return;
       }
-      const running = listenerLtc.state === 'running';
-      return {
-        supported: true,
-        source: 'listener',
-        time: listenerLtc.time,
-        receiving: running,
-        status: listenerLtc.state,
-        fps: listenerLtc.fps,
-        df: listenerLtc.df,
-        // While running: how old this timecode is, so clients can pin the
-        // anchor to their own clock and count frames between updates.
-        ...(running && Number.isFinite(listenerLtc.ageMs) ? { ageMs: Math.max(0, listenerLtc.ageMs) } : {}),
-        note: '',
+      log(`polling timers on ${host}:${port}`);
+      pollTick();
+    },
+    stop() {
+      stopped = true;
+      clearTimeout(pollTimer);
+    },
+    health() {
+      return { status: status(), message: message() };
+    },
+  };
+}
+
+/* ── source: LTC timecode (built-in listener) ─────────────────────────── */
+
+function createLtcSource({ config, log, moduleDir }) {
+  const device = String(config.ltcDevice || '');
+  const channel = Math.max(1, Math.trunc(Number(config.ltcChannel)) || 1);
+
+  let emit = () => {};
+  let listener = null;
+  let stopped = false;
+  /** The listener's latest word: { state, time, fps, df, ageMs } | { error } | null while starting. */
+  let word = null;
+
+  function rateText() {
+    return word?.df ? '29.97 DF' : word?.fps ? `${word.fps} fps` : '';
+  }
+
+  /** The LTC timecode as one standard timer object (kind clock, timecode in status.text). */
+  function timer() {
+    const base = { id: 'ltc', label: 'Timecode', kind: 'clock', startedAt: null, elapsedMs: null, remainingMs: null, targetMs: null };
+    if (!word || word.error) {
+      const note = word ? word.error : 'Starting LTC listener…';
+      return { ...base, state: 'idle', status: { text: '', tone: 'muted' }, detail: note, ltc: { time: '', fps: 0, df: false, status: '', note } };
+    }
+    const running = word.state === 'running';
+    const rate = rateText();
+    const ltc = { time: word.time || '', fps: word.fps || 0, df: Boolean(word.df), status: word.state, note: '' };
+    // While running: how old this timecode is, so the tile can pin the
+    // anchor to its own clock and count frames between reports.
+    if (running && Number.isFinite(word.ageMs)) ltc.ageMs = Math.max(0, word.ageMs);
+    return {
+      ...base,
+      state: running ? 'running' : word.state === 'stopped' ? 'stopped' : 'idle',
+      status: { text: word.time || '', tone: running ? 'ok' : word.state === 'stopped' ? 'muted' : 'warn' },
+      detail: running ? (rate ? `Running · ${rate}` : 'Running') : word.state === 'stopped' ? 'Stopped' : 'No signal',
+      ltc,
+    };
+  }
+
+  function status() {
+    if (!word) return 'connecting';
+    return word.error ? 'error' : 'ok';
+  }
+
+  function message() {
+    if (!word) return 'Starting LTC listener…';
+    if (word.error) return word.error;
+    const rate = rateText();
+    return word.state === 'running' ? `LTC running${rate ? ` · ${rate}` : ''}` : word.state === 'stopped' ? 'LTC stopped' : 'LTC no signal';
+  }
+
+  function publish() {
+    if (stopped) return;
+    emit({ status: status(), message: message(), timers: [timer()], updatedAt: Date.now() });
+  }
+
+  return {
+    id: 'ltc',
+    label: 'LTC',
+    kind: 'ltc',
+    start(e) {
+      emit = e;
+      if (!device) {
+        word = { error: 'LTC timecode is on but no audio device is selected — pick one in Admin' };
+        publish();
+        return;
+      }
+      publish();
+      listener = createLtcListener({
+        device,
+        channel,
+        moduleDir,
+        log,
+        onUpdate(update) {
+          word = update;
+          publish();
+        },
+      });
+    },
+    stop() {
+      stopped = true;
+      listener?.stop();
+      listener = null;
+    },
+    health() {
+      return { status: status(), message: message() };
+    },
+  };
+}
+
+/* ── source: time of day ──────────────────────────────────────────────── */
+
+function createClockSource() {
+  return {
+    id: 'clock',
+    label: 'Clock',
+    kind: 'clock',
+    start(emit) {
+      // status.text (the ISO time) is stamped when a snapshot is served —
+      // see stampClock() — so this never has to re-emit.
+      emit({
+        status: 'ok',
+        message: 'ticking',
+        updatedAt: Date.now(),
+        timers: [{ id: 'local', label: 'Clock', kind: 'clock', state: 'running', startedAt: null, elapsedMs: null, remainingMs: null, targetMs: null, status: { text: '', tone: 'ok' }, detail: '' }],
+      });
+    },
+    stop() {},
+    health() {
+      return { status: 'ok', message: '' };
+    },
+  };
+}
+
+/* ── source: another module's timers (over loopback) ─────────────────── */
+
+function createModuleSource({ moduleId, name, shellPort, log }) {
+  const base = `/api/modules/${encodeURIComponent(moduleId)}`;
+  let emit = () => {};
+  let stopped = false;
+  let label = String(name || moduleId);
+  let timers = [];
+  let updatedAt = 0;
+  let lastOkAt = 0;
+  let lastError = '';
+  let state = 'connecting'; // 'ok' | 'connecting' | 'error'
+  let via = ''; // 'stream' | 'poll' once we know which the provider offers
+  let stream = null; // the open http.ClientRequest of /timers/stream
+  let pollTimer = null;
+  let pollInflight = false;
+  let retryTimer = null;
+  let silenceTimer = null;
+  let backoff = BACKOFF_MIN_MS;
+
+  function message() {
+    if (state === 'ok') return `${timers.length} timer${timers.length === 1 ? '' : 's'}${via ? ` (${via})` : ''}`;
+    if (state === 'connecting') return lastError ? `reconnecting — ${lastError}` : 'connecting…';
+    return `unreachable — ${lastError}`;
+  }
+
+  function publish() {
+    if (stopped) return;
+    emit({ label, status: state, message: message(), timers, updatedAt });
+  }
+
+  function accept(raw) {
+    const snap = sanitizeSnapshot(raw);
+    if (!snap) {
+      fail('malformed /timers snapshot');
+      return;
+    }
+    if (snap.label) label = snap.label;
+    timers = snap.timers;
+    updatedAt = snap.updatedAt;
+    lastOkAt = Date.now();
+    lastError = '';
+    state = 'ok';
+    backoff = BACKOFF_MIN_MS;
+    publish();
+  }
+
+  /** A provider restarting mid-service drops its stream for a moment; its
+      timers stay up through the grace period and only then disappear. */
+  function fail(why) {
+    lastError = why;
+    if (Date.now() - lastOkAt > GRACE_MS) {
+      timers = [];
+      state = 'error';
+    } else {
+      state = 'connecting';
+    }
+    publish();
+  }
+
+  function later(fn, ms) {
+    const t = setTimeout(() => { if (!stopped) fn(); }, ms);
+    t.unref?.();
+    return t;
+  }
+
+  function backoffLater(fn) {
+    clearTimeout(retryTimer);
+    retryTimer = later(fn, backoff);
+    backoff = Math.min(BACKOFF_MAX_MS, backoff * 2);
+  }
+
+  function closeStream() {
+    clearTimeout(silenceTimer);
+    silenceTimer = null;
+    if (stream) {
+      const s = stream;
+      stream = null;
+      try { s.destroy(); } catch { /* already gone */ }
+    }
+  }
+
+  function connectStream() {
+    if (stopped || stream) return;
+    let done = false;
+    const drop = (why) => {
+      if (done || stopped) return;
+      done = true;
+      closeStream();
+      fail(why);
+      backoffLater(connectStream);
+    };
+    const req = http.get({ host: '127.0.0.1', port: shellPort, path: `${base}/timers/stream`, headers: { Accept: 'text/event-stream' } }, (res) => {
+      const type = String(res.headers['content-type'] || '');
+      if (res.statusCode !== 200 || !/text\/event-stream/i.test(type)) {
+        // No stream here (404: the provider only serves /timers; 502: it
+        // failed to start) — poll instead, and try the stream again at the
+        // next discovery pass.
+        done = true;
+        res.resume();
+        stream = null;
+        via = 'poll';
+        poll();
+        return;
+      }
+      via = 'stream';
+      clearTimeout(pollTimer);
+      pollTimer = null;
+      res.setEncoding('utf8');
+      let buf = '';
+      const armSilence = () => {
+        clearTimeout(silenceTimer);
+        silenceTimer = later(() => drop('stream went silent'), STREAM_SILENCE_MS);
       };
-    }
+      armSilence();
+      res.on('data', (chunk) => {
+        armSilence();
+        buf += chunk.replace(/\r\n/g, '\n');
+        let at;
+        while ((at = buf.indexOf('\n\n')) >= 0) {
+          const block = buf.slice(0, at);
+          buf = buf.slice(at + 2);
+          let event = 'message';
+          const data = [];
+          for (const line of block.split('\n')) {
+            if (!line || line.startsWith(':')) continue;
+            const colon = line.indexOf(':');
+            const field = colon < 0 ? line : line.slice(0, colon);
+            let value = colon < 0 ? '' : line.slice(colon + 1);
+            if (value.startsWith(' ')) value = value.slice(1);
+            if (field === 'event') event = value;
+            else if (field === 'data') data.push(value);
+          }
+          if (!data.length || (event !== 'timers' && event !== 'message')) continue;
+          try {
+            accept(JSON.parse(data.join('\n')));
+          } catch { /* not for us */ }
+        }
+        if (buf.length > 1e6) buf = ''; // runaway guard: never an SSE frame this size
+      });
+      res.on('end', () => drop('stream ended'));
+      res.on('close', () => drop('stream closed'));
+      res.on('error', (err) => drop(errorText(err)));
+    });
+    stream = req;
+    req.on('error', (err) => drop(errorText(err)));
+  }
 
-    function url(target) {
-      const built = new URL(`http://${host}:${port}${target}`);
-      if (password) built.searchParams.set('password', password);
-      return built;
-    }
-
-    async function requestJson(target) {
-      const response = await fetch(url(target), {
+  async function pollOnce() {
+    pollTimer = null;
+    if (stopped || pollInflight || via === 'stream') return;
+    pollInflight = true;
+    let ok = false;
+    try {
+      const res = await fetch(`http://127.0.0.1:${shellPort}${base}/timers`, {
         headers: { Accept: 'application/json' },
         signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
       });
-      if (!response.ok) {
-        const err = new Error(`ProPresenter ${response.status} ${response.statusText}`);
-        err.status = response.status;
-        throw err;
-      }
-      const text = await response.text();
-      return text ? JSON.parse(text) : null;
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const body = await res.json();
+      if (via === 'stream' || stopped) return; // the stream came up meanwhile
+      accept(body);
+      ok = true;
+    } catch (err) {
+      if (!stopped && via !== 'stream') fail(errorText(err));
+    } finally {
+      pollInflight = false;
     }
-
-    function timerType(entry) {
-      if (entry.countdown) return 'countdown';
-      if (entry.count_down_to_time) return 'countdown_to_time';
-      if (entry.elapsed) return 'elapsed';
-      return 'unknown';
+    if (stopped || via === 'stream') return;
+    if (ok) {
+      pollTimer = later(pollOnce, MODULE_POLL_MS);
+    } else {
+      pollTimer = later(pollOnce, backoff);
+      backoff = Math.min(BACKOFF_MAX_MS, backoff * 2);
     }
+  }
 
-    function applyTimerList(list) {
-      if (!Array.isArray(list)) return;
-      const next = new Map();
-      for (const entry of list) {
-        const uuid = entry?.id?.uuid;
-        if (!uuid) continue;
-        next.set(uuid, {
-          name: String(entry.id.name || 'Timer'),
-          index: Number(entry.id.index) || 0,
-          type: timerType(entry),
-          allowsOverrun: Boolean(entry.allows_overrun),
-        });
-      }
-      timerConfigs = next;
-    }
+  function poll() {
+    if (stopped || pollTimer || pollInflight) return;
+    pollTimer = later(pollOnce, 0);
+  }
 
-    /** Merge configured timers (order, type) with live values into one list. */
-    function mergeTimers(currentTimes) {
-      const live = new Map();
-      if (Array.isArray(currentTimes)) {
-        for (const entry of currentTimes) {
-          const uuid = entry?.id?.uuid;
-          if (!uuid) continue;
-          live.set(uuid, {
-            name: String(entry.id.name || ''),
-            time: typeof entry.time === 'string' ? entry.time : '',
-            state: typeof entry.state === 'string' ? entry.state : '',
-          });
+  return {
+    id: moduleId,
+    kind: 'module',
+    get label() {
+      return label;
+    },
+    start(e) {
+      emit = e;
+      publish();
+      connectStream();
+    },
+    stop() {
+      stopped = true;
+      closeStream();
+      clearTimeout(retryTimer);
+      clearTimeout(pollTimer);
+      retryTimer = null;
+      pollTimer = null;
+    },
+    /** Called on every discovery pass: a provider that had no stream may have one now. */
+    retryStream() {
+      if (!stopped && !stream && via === 'poll') connectStream();
+    },
+    health() {
+      return { status: state, message: message() };
+    },
+  };
+}
+
+/**
+ * Finds timer providers — every active module whose manifest says
+ * "provides": ["timers"] — by reading the shell's own /api/modules over
+ * loopback, and keeps one module source per provider alive.
+ */
+function createModuleDiscovery({ shellPort, log, flags, onAdd, onRemove }) {
+  const sources = new Map(); // module id → source
+  let timer = null;
+  let stopped = false;
+  let listed = null; // providers named by the last successful read, [{ id, name }]
+  let listError = '';
+
+  function wanted(id) {
+    return id === PCO_ID ? flags.pco : true;
+  }
+
+  async function discover() {
+    timer = null;
+    if (stopped) return;
+    try {
+      if (!shellPort) throw new Error('shell port unknown (needs ProdDash 1.4.0)');
+      const res = await fetch(`http://127.0.0.1:${shellPort}/api/modules`, {
+        headers: { Accept: 'application/json' },
+        signal: AbortSignal.timeout(5000),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const body = await res.json();
+      if (stopped) return;
+      const mods = Array.isArray(body?.modules) ? body.modules : [];
+      listed = mods
+        .filter((m) => m && typeof m.id === 'string' && m.id !== SELF_ID && Array.isArray(m.provides) && m.provides.includes('timers'))
+        .map((m) => ({ id: m.id, name: String(m.name || m.id) }));
+      listError = '';
+      const keep = new Set();
+      for (const m of listed) {
+        if (!wanted(m.id)) continue;
+        keep.add(m.id);
+        const have = sources.get(m.id);
+        if (have) {
+          have.retryStream();
+        } else {
+          const source = createModuleSource({ moduleId: m.id, name: m.name, shellPort, log });
+          sources.set(m.id, source);
+          log(`following timers offered by module "${m.id}"`);
+          onAdd(source);
         }
       }
-      const out = [];
-      for (const [uuid, cfg] of timerConfigs) {
-        const now = live.get(uuid);
-        live.delete(uuid);
-        out.push({
-          uuid,
-          name: (now && now.name) || cfg.name,
-          type: cfg.type,
-          allowsOverrun: cfg.allowsOverrun,
-          time: now ? now.time : '',
-          state: now ? now.state : '',
-        });
+      // Disabled, uninstalled, or no longer offering timers: the shell is
+      // authoritative, so its timers go now rather than after the grace.
+      for (const [id, source] of sources) {
+        if (keep.has(id)) continue;
+        source.stop();
+        sources.delete(id);
+        log(`module "${id}" no longer offers timers`);
+        onRemove(id);
       }
-      // Timers reported live but missing from the (possibly stale) config
-      // list still deserve a card — type unknown until the slow lane catches up.
-      for (const [uuid, now] of live) {
-        out.push({ uuid, name: now.name || 'Timer', type: 'unknown', allowsOverrun: false, time: now.time, state: now.state });
+    } catch (err) {
+      listError = errorText(err);
+    }
+    if (!stopped) {
+      timer = setTimeout(discover, listError ? DISCOVER_RETRY_MS : DISCOVER_MS);
+      timer.unref?.();
+    }
+  }
+
+  return {
+    start() {
+      timer = setTimeout(discover, DISCOVER_FIRST_MS);
+      timer.unref?.();
+    },
+    stop() {
+      stopped = true;
+      clearTimeout(timer);
+      timer = null;
+      for (const source of sources.values()) source.stop();
+      sources.clear();
+    },
+    /** Health lines for the admin page: one for PCO Plan, one per other provider. */
+    health() {
+      const parts = [];
+      let status = 'ok';
+      const bump = (s) => {
+        if (s === 'error') status = 'error';
+        else if (s === 'connecting' && status === 'ok') status = 'connecting';
+      };
+      if (!flags.pco) parts.push('PCO Plan: off');
+      if (listed === null) {
+        parts.push(listError ? `Modules: waiting for the shell (${listError})` : 'Modules: discovering…');
+        return { status: 'connecting', parts };
       }
-      return out;
+      if (listError) {
+        parts.push(`Modules: cannot re-read /api/modules (${listError})`);
+        bump('error');
+      }
+      if (flags.pco) {
+        const pco = sources.get(PCO_ID);
+        if (pco) {
+          const h = pco.health();
+          parts.push(`PCO Plan: ${h.message}`);
+          bump(h.status);
+        } else {
+          parts.push('PCO Plan: not installed, or not offering timers yet');
+        }
+      }
+      // Every other provider found is listed under its own name.
+      for (const s of [...sources.values()].filter((x) => x.id !== PCO_ID)) {
+        const h = s.health();
+        parts.push(`${s.label}: ${h.message}`);
+        bump(h.status);
+      }
+      return { status, parts };
+    },
+  };
+}
+
+/* ── what each tile's gear offers ─────────────────────────────────────
+   module.json's instanceSchema is the full set — what an "All timers" tile
+   offers, and what the shell falls back to for a tile with no picker entry
+   (one added before the picker listed timers). A solo tile shows one card,
+   so its picker entry carries a schema of just what that card can use, and
+   the shell renders that instead (module guide, "Presenting multiple
+   tiles"): a Message Timer has no use for the clock's format switches.
+   Every field is drawn from the manifest so it is defined once; the client
+   falls back to its own defaults for keys a slimmer schema leaves out. */
+
+const FULL_SCHEMA = manifest.instanceSchema || {};
+const FULL_GROUPS = manifest.instanceGroups || {};
+
+/**
+ * A gear schema of just `keys` (manifest order kept) with the groups they
+ * use. `loose` names keys shown outside their group; `groups` overrides a
+ * group's meta. A group toggle whose switch isn't among the keys is dropped.
+ */
+function gearOf(keys, { loose = [], groups = {} } = {}) {
+  const instanceSchema = {};
+  for (const key of Object.keys(FULL_SCHEMA)) {
+    if (!keys.includes(key)) continue;
+    const spec = { ...FULL_SCHEMA[key] };
+    if (loose.includes(key)) delete spec.group;
+    instanceSchema[key] = spec;
+  }
+  const instanceGroups = {};
+  for (const spec of Object.values(instanceSchema)) {
+    if (!spec.group || instanceGroups[spec.group]) continue;
+    const meta = { ...(FULL_GROUPS[spec.group] || {}), ...(groups[spec.group] || {}) };
+    if (meta.toggle && !(meta.toggle in instanceSchema)) delete meta.toggle;
+    instanceGroups[spec.group] = meta;
+  }
+  return { instanceSchema, instanceGroups };
+}
+
+const COLOURS = ['runningColor', 'warningColor', 'overrunColor', 'idleColor'];
+/** What a timer card can show or hide of itself (which timers appear is the header menu's job). */
+const TIMER_ELEMENTS = ['showNames', 'showStatus', 'showDetail', 'showSeconds', 'leadingZeros'];
+const CLOCK_ELEMENTS = ['clock24h', 'clockSeconds', 'clockDate', 'dateShortDay', 'dateShortMonth'];
+/** With one card there is little else to see: the colours start unfolded. */
+const OPEN_COLOURS = { groups: { Colours: { collapsed: false } } };
+
+const GEAR = {
+  /** Every card's elements, the headings, how the clock reads, the tones. */
+  all: { instanceSchema: FULL_SCHEMA, instanceGroups: FULL_GROUPS },
+  /** One ProPresenter or module timer: its elements, and the tone its digits take per state. */
+  timer: gearOf([...TIMER_ELEMENTS, ...COLOURS], OPEN_COLOURS),
+  /** The timecode: running, no signal (warning) and stopped (idle) — it never overruns, and frames are frames. */
+  ltc: gearOf(['showNames', 'showStatus', 'runningColor', 'warningColor', 'idleColor'], OPEN_COLOURS),
+  /** The time of day: plain digits, so only how they read. */
+  clock: gearOf(CLOCK_ELEMENTS),
+  /** A clock another module offers: read like the clock, muted while it isn't running. */
+  providerClock: gearOf(['showNames', 'showStatus', 'clock24h', 'clockSeconds', 'idleColor'], OPEN_COLOURS),
+};
+
+/** The gear a solo card of this timer gets — by what the card can show. */
+function gearFor(source, timer) {
+  if (source.kind === 'ltc') return GEAR.ltc;
+  if (source.kind === 'clock') return GEAR.clock;
+  if (timer.kind === 'clock') return GEAR.providerClock;
+  return GEAR.timer;
+}
+
+/* ── the module ───────────────────────────────────────────────────────── */
+
+/** Sort order of the sources in the tile: fixed ones first, then PCO Plan, then other modules by name. */
+const ORDER = { propresenter: 0, ltc: 1, clock: 2, [PCO_ID]: 3 };
+
+function emptyState(timerFont = 'default') {
+  return { serverNow: Date.now(), timerFont, sources: [] };
+}
+
+function emptyProvider() {
+  return { source: SELF_ID, label: 'Timers', updatedAt: Date.now(), timers: [] };
+}
+
+module.exports = {
+  init({ config, log, shell }) {
+    const shellPort = Number(shell && shell.port) || 0;
+    const timerFont = config.timerFont === 'monospace' ? 'monospace' : 'default';
+    const flags = {
+      pp: config.ppEnabled !== false,
+      ltc: Boolean(config.ltcEnabled),
+      pco: config.pcoEnabled !== false,
+    };
+
+    const tileStreams = new Set();
+    const providerStreams = new Set();
+    /** source id → { id, kind, label, status, message, timers, updatedAt } */
+    const views = new Map();
+    let latest = emptyState(timerFont);
+    let lastKey = '';
+    let stopped = false;
+
+    const orderedViews = () => [...views.values()].sort((a, b) => ((ORDER[a.id] ?? 10) - (ORDER[b.id] ?? 10)) || a.label.localeCompare(b.label));
+
+    /** The tile state: every source, its health, its timers as of updatedAt. */
+    function buildState() {
+      return {
+        serverNow: Date.now(),
+        timerFont,
+        sources: orderedViews().map((v) => ({ id: v.id, label: v.label, kind: v.kind, status: v.status, message: v.message, updatedAt: v.updatedAt, timers: v.timers })),
+      };
     }
 
-    function broadcast() {
-      latest = {
-        enabled,
-        ltcEnabled,
-        timerFont,
-        reachable: latest.reachable,
-        lastError: latest.lastError,
-        timers: latest.timers,
-        ltc: composeLtc(),
-      };
-      if (!streams.size) return;
-      let frame;
+    /**
+     * The provider snapshot (the module guide's contract): all enabled
+     * sources merged, ids prefixed with their source so they stay unique,
+     * every duration re-anchored to this snapshot's own instant.
+     */
+    function buildProviderSnapshot() {
+      const now = Date.now();
+      const timers = [];
+      for (const v of orderedViews()) {
+        for (const t of v.timers) {
+          const out = { ...t, id: `${v.id}:${t.id}`, group: v.label };
+          if (v.id === 'clock') out.status = { text: new Date(now).toISOString(), tone: 'ok' };
+          if (t.state === 'running' && v.updatedAt > 0) {
+            const dt = Math.max(0, now - v.updatedAt);
+            if (out.elapsedMs !== null && out.elapsedMs !== undefined) out.elapsedMs += dt;
+            if (out.remainingMs !== null && out.remainingMs !== undefined) out.remainingMs -= dt;
+            if (out.ltc && Number.isFinite(out.ltc.ageMs)) out.ltc = { ...out.ltc, ageMs: out.ltc.ageMs + dt };
+          }
+          timers.push(out);
+        }
+      }
+      return { source: SELF_ID, label: 'Timers', updatedAt: now, timers };
+    }
+
+    /** Recompute the merged state; broadcast only when something other than the clocks moved. */
+    function rebuild() {
+      if (stopped) return;
+      latest = buildState();
+      // updatedAt / serverNow move on every poll, and a startedAt derived
+      // from a whole-second value jitters with them; the tiles extrapolate
+      // from the values but don't need a frame for that alone.
+      let key;
       try {
-        frame = JSON.stringify(latest);
+        key = JSON.stringify(latest.sources.map((v) => [v.id, v.label, v.status, v.message, v.timers.map(({ startedAt, ...rest }) => rest)]));
       } catch {
         return;
       }
-      if (frame === lastFrame) return;
-      lastFrame = frame;
-      const payload = `event: state\ndata: ${frame}\n\n`;
-      for (const res of streams) {
-        try {
-          res.write(payload);
-        } catch {
-          streams.delete(res);
-        }
-      }
+      if (key === lastKey) return;
+      lastKey = key;
+      if (tileStreams.size) writeAll(tileStreams, `event: state\ndata: ${JSON.stringify(latest)}\n\n`);
+      if (providerStreams.size) writeAll(providerStreams, `event: timers\ndata: ${JSON.stringify(buildProviderSnapshot())}\n\n`);
     }
 
-    async function pollTick() {
+    const emitFor = (source) => (view) => {
       if (stopped) return;
+      views.set(source.id, {
+        id: source.id,
+        kind: source.kind,
+        label: String(view.label || source.label),
+        status: view.status === 'ok' || view.status === 'connecting' || view.status === 'error' ? view.status : 'ok',
+        message: String(view.message || ''),
+        timers: Array.isArray(view.timers) ? view.timers : [],
+        updatedAt: Number(view.updatedAt) || Date.now(),
+      });
+      rebuild();
+    };
+
+    // The fixed sources, each behind its admin switch. Add a platform here.
+    const fixed = [];
+    if (flags.pp) fixed.push(createProPresenterSource({ config, log }));
+    else log('ProPresenter timers are off (admin switch)');
+    if (flags.ltc) fixed.push(createLtcSource({ config, log, moduleDir: __dirname }));
+    fixed.push(createClockSource());
+
+    const discovery = createModuleDiscovery({
+      shellPort,
+      log,
+      flags,
+      onAdd(source) {
+        source.start(emitFor(source));
+      },
+      onRemove(id) {
+        views.delete(id);
+        rebuild();
+      },
+    });
+
+    for (const source of fixed) {
       try {
-        tick += 1;
-        // Slow lane first on the very first tick so cards get names/types
-        // immediately; afterwards every SLOW_EVERY ticks.
-        if (tick % SLOW_EVERY === 1 || !timerConfigs.size) {
-          applyTimerList(await requestJson('/v1/timers'));
-        }
-        // THE HOT PATH — live values every tick.
-        const currentTimes = await requestJson('/v1/timers/current');
-        latest.timers = mergeTimers(currentTimes);
-        latest.reachable = true;
-        latest.lastError = '';
+        source.start(emitFor(source));
       } catch (err) {
-        latest.reachable = false;
-        latest.lastError = err instanceof Error ? err.message : String(err);
-      }
-      broadcast();
-      if (stopped) return;
-      pollTimer = setTimeout(pollTick, latest.reachable ? POLL_MS : RETRY_MS);
-    }
-
-    if (enabled) {
-      pollTick();
-      log(`polling timers on ${host}:${port}`);
-    } else {
-      log('no ProPresenter host configured — set one in /admin');
-    }
-
-    // The built-in listener is independent of ProPresenter — LTC-only
-    // setups (no host configured) still get the LTC card.
-    let ltcListener = null;
-    if (ltcEnabled) {
-      if (ltcDevice) {
-        ltcListener = createLtcListener({
-          device: ltcDevice,
-          channel: ltcChannel,
-          moduleDir: __dirname,
-          log,
-          onUpdate(update) {
-            listenerLtc = update;
-            broadcast();
-          },
-        });
-      } else {
-        listenerLtc = { error: 'LTC listener is on but no audio device is selected — pick one in Admin' };
-        broadcast();
+        log(`${source.id} failed to start: ${err.message}`);
       }
     }
+    discovery.start();
+    if (!flags.pco) log('PCO Plan timers are off (admin switch)');
 
     const heartbeat = setInterval(() => {
-      for (const res of streams) {
-        try {
-          res.write(': ping\n\n');
-        } catch {
-          streams.delete(res);
-        }
-      }
+      writeAll(tileStreams, ': ping\n\n');
+      writeAll(providerStreams, ': ping\n\n');
     }, HEARTBEAT_MS);
     heartbeat.unref?.();
 
-    current = { streams, getLatest: () => latest };
+    current = {
+      tileStreams,
+      providerStreams,
+      getState: () => ({ ...latest, serverNow: Date.now() }),
+      getProviderSnapshot: buildProviderSnapshot,
+    };
 
     return {
       stop() {
         stopped = true;
-        clearTimeout(pollTimer);
         clearInterval(heartbeat);
-        ltcListener?.stop();
-        for (const res of streams) {
-          try { res.end(); } catch { /* already gone */ }
+        discovery.stop();
+        for (const source of fixed) {
+          try { source.stop(); } catch { /* already down */ }
         }
-        streams.clear();
-        if (current && current.streams === streams) current = null;
+        for (const set of [tileStreams, providerStreams]) {
+          for (const res of set) {
+            try { res.end(); } catch { /* already gone */ }
+          }
+          set.clear();
+        }
+        if (current && current.tileStreams === tileStreams) current = null;
       },
       health() {
-        // LTC status suffix for the admin health line.
-        const ltcNote = !ltcEnabled
-          ? ''
-          : latest.ltc.supported
-            ? `, LTC ${latest.ltc.status}`
-            : (latest.ltc.note ? ` (LTC: ${latest.ltc.note})` : '');
-        if (!enabled) {
-          // The LTC listener works regardless of ProPresenter — an
-          // LTC-only setup is half-configured but working.
-          if (latest.ltc.supported) return { status: 'ok', message: `No ProPresenter host configured — LTC only, ${latest.ltc.status}` };
-          return { status: 'error', message: 'No ProPresenter host configured' };
-        }
-        if (latest.reachable) {
-          return { status: 'ok', message: `Polling ${host}:${port}, ${latest.timers.length} timer(s)${ltcNote}` };
-        }
-        return {
-          status: 'error',
-          message: latest.lastError
-            ? `ProPresenter unreachable: ${latest.lastError}`
-            : 'Trying to reach ProPresenter…',
+        const parts = [];
+        let status = 'ok';
+        const bump = (s) => {
+          if (s === 'error') status = 'error';
+          else if (s === 'connecting' && status === 'ok') status = 'connecting';
         };
+        for (const source of fixed) {
+          if (source.id === 'clock') continue;
+          const h = source.health();
+          parts.push(`${source.label}: ${h.message}`);
+          bump(h.status);
+        }
+        if (!flags.pp) parts.push('ProPresenter: off');
+        if (!flags.ltc) parts.push('LTC: off');
+        const d = discovery.health();
+        parts.push(...d.parts);
+        bump(d.status);
+        return { status, message: parts.join(' · ') };
       },
     };
   },
 
   /**
-   * The Add-tile picker's entries: one per discovered timer, plus "All
-   * timers" and the LTC card (moduleApi.variant carries the entry id —
-   * 'all', 'timer:<uuid>' or 'ltc'). Answered from the poller's latest
-   * state, never from a fresh upstream request — the picker must stay
-   * instant, and a dead ProPresenter must not stall it.
+   * The Add-tile picker's entries: "All timers" plus one solo card per known
+   * timer from any source (moduleApi.variant carries the entry id — 'all',
+   * or 'solo:<source>:<timer id>'; the older 'timer:<uuid>' / 'ltc' ids keep
+   * working). Each entry carries the gear settings that fit its tile (see
+   * GEAR above); descriptions are the picker's tooltips, one sentence each.
+   * Answered from the merged state, never from upstream — the picker must
+   * stay instant and a dead upstream must not stall it.
    */
   tiles() {
-    const state = current ? current.getLatest() : null;
-    if (!state || (!state.enabled && !state.ltcEnabled)) return []; // unconfigured → classic single entry
-    const TYPE_LABEL = {
-      countdown: 'Countdown timer',
-      countdown_to_time: 'Countdown to a time of day',
-      elapsed: 'Elapsed timer',
-      unknown: 'Timer',
-    };
+    const state = current ? current.getState() : null;
+    if (!state) return [];
+    const KIND_WORD = { countdown: 'countdown', elapsed: 'elapsed timer', clock: 'clock' };
     const oneCard = { defaultSize: { w: 3, h: 2 }, minSize: { w: 2, h: 1 } };
-    return [
-      {
-        id: 'all',
-        name: 'All timers',
-        description: state.ltcEnabled
-          ? 'Every timer and the LTC timecode, selectable per tile'
-          : 'Every timer, selectable per tile',
-      },
-      ...state.timers.map((t) => ({
-        id: `timer:${t.uuid}`,
-        name: t.name,
-        description: TYPE_LABEL[t.type] || 'Timer',
-        ...oneCard,
-      })),
-      // The LTC entry exists only while the admin switch is on.
-      ...(state.ltcEnabled
-        ? [{ id: 'ltc', name: 'LTC timecode', description: 'Incoming timecode (HH:MM:SS:FF)', ...oneCard }]
-        : []),
-    ];
+    const out = [{ id: 'all', name: 'All timers', description: 'Every timer and clock, grouped by source', ...GEAR.all }];
+    for (const src of state.sources) {
+      for (const t of src.timers) {
+        const description = src.kind === 'ltc' ? 'The incoming LTC timecode on its own'
+          : src.kind === 'clock' ? 'The time of day on its own'
+            : `This ${src.label} ${KIND_WORD[t.kind] || 'timer'} on its own`;
+        // Layouts from before 1.3.0 hold 'timer:<uuid>' / 'ltc' — the same tiles.
+        const aliases = src.id === 'propresenter' ? [`timer:${t.id}`] : src.kind === 'ltc' ? ['ltc'] : [];
+        out.push({ id: `solo:${src.id}:${t.id}`, name: t.label, description, ...oneCard, ...gearFor(src, t), ...(aliases.length ? { aliases } : {}) });
+      }
+    }
+    return out;
   },
 
   routes() {
-    const sendJson = (res, code, body) => {
-      res.writeHead(code, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
-      res.end(JSON.stringify(body));
-    };
     return {
       'GET /state': (req, res) => {
-        sendJson(res, 200, { state: current ? current.getLatest() : clearedState(false) });
+        sendJson(res, 200, { state: current ? current.getState() : emptyState() });
+      },
+
+      'GET /stream': (req, res) => {
+        const state = current ? current.getState() : emptyState();
+        openSse(req, res, current ? current.tileStreams : null, `event: state\ndata: ${JSON.stringify(state)}\n\n`);
+      },
+
+      // ProdDash itself as a timers provider — the module guide's contract.
+      'GET /timers': (req, res) => {
+        sendJson(res, 200, current ? current.getProviderSnapshot() : emptyProvider());
+      },
+
+      'GET /timers/stream': (req, res) => {
+        const snap = current ? current.getProviderSnapshot() : emptyProvider();
+        openSse(req, res, current ? current.providerStreams : null, `event: timers\ndata: ${JSON.stringify(snap)}\n\n`);
       },
 
       // The admin device picker asks this machine what it can hear. The
       // options shape matches the admin select's optionsRoute contract.
       'GET /ltc/devices': (req, res) => {
-        const bin = require('path').join(__dirname, 'ltc-capture');
+        const bin = path.join(__dirname, 'ltc-capture');
         const child = spawn(bin, ['--list'], { stdio: ['ignore', 'ignore', 'pipe'], timeout: 4000 });
         let err = '';
         child.stderr.setEncoding('utf8');
@@ -405,25 +1189,6 @@ module.exports = {
           sendJson(res, 200, { options });
         });
       },
-
-      'GET /stream': (req, res) => {
-        res.writeHead(200, {
-          'Content-Type': 'text/event-stream; charset=utf-8',
-          'Cache-Control': 'no-cache, no-transform',
-          Connection: 'keep-alive',
-          'X-Accel-Buffering': 'no',
-        });
-        res.write('retry: 3000\n\n');
-        const state = current ? current.getLatest() : clearedState(false);
-        res.write(`event: state\ndata: ${JSON.stringify(state)}\n\n`);
-        if (!current) return void res.end();
-        const { streams } = current;
-        // A viewer that stops reading (locked tablet, sleeping laptop) must
-        // not queue frames forever; keepalive probes make the OS notice.
-        try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
-        streams.add(res);
-        req.on('close', () => streams.delete(res));
-      },
     };
   },
 };
diff --git a/modules/propresenter-timers/style.css b/modules/propresenter-timers/style.css
index 129771e..a216138 100644
--- a/modules/propresenter-timers/style.css
+++ b/modules/propresenter-timers/style.css
@@ -1,11 +1,16 @@
-/* ProPresenter Timers module — scoped to its tiles, shell variables only.
-   The API exposes no per-timer color, so a card's color IS its state:
-   accent = running, muted = stopped, warn = complete, danger = overrun.
-   Overrun must be unmistakable at a distance — danger fill + pulse. */
+/* Timers module — scoped to its tiles, shell variables only.
+   A card's colour IS its state: running / warning / overrun / idle. The four
+   tones are custom properties on the tile root: they default to the shell's
+   palette (so a dashboard theme reaches them) and the tile's own colour
+   settings, when changed, are set inline on .tm-wrap and win — the
+   documented mechanism. Overrun must be unmistakable across the room:
+   danger fill + pulse. */
 
 [data-module="propresenter-timers"] .tm-wrap {
-  --tm-time-size: 32px;
-  --tm-ltc-size: 26px;
+  --tm-ok: var(--accent);
+  --tm-warn: var(--warn);
+  --tm-danger: var(--danger);
+  --tm-muted: var(--muted);
   --tm-meta-size: 11px;
   position: absolute;
   inset: 0;
@@ -15,7 +20,7 @@
   -webkit-user-select: none;
 }
 
-/* ── degraded-state banner (feed lost / ProPresenter unreachable) ── */
+/* ── degraded-state banner (the ProdDash feed itself is down) ── */
 
 [data-module="propresenter-timers"] .tm-banner {
   flex: none;
@@ -30,12 +35,12 @@
 }
 [data-module="propresenter-timers"] .tm-banner[hidden] { display: none; }
 
-/* Values still on screen while the feed is down are stale — say so visually.
-   Per-card, because the reader-fed LTC card is not stale when only
-   ProPresenter is unreachable; it dims only when the ProdDash feed itself
-   is down (is-feed-down) and everything on screen really is old. */
-[data-module="propresenter-timers"] .tm-wrap.is-stale .tm-card { opacity: 0.45; }
-[data-module="propresenter-timers"] .tm-wrap.is-stale:not(.is-feed-down) .tm-card-ltc.src-reader { opacity: 1; }
+/* Values still on screen while their source is down are stale — say so
+   visually, per group: the LTC card keeps ticking when only ProPresenter
+   is unreachable. When the ProdDash feed is down everything is old. */
+[data-module="propresenter-timers"] .tm-group.is-stale .tm-card,
+[data-module="propresenter-timers"] .tm-card.is-stale,
+[data-module="propresenter-timers"] .tm-wrap.is-feed-down .tm-card { opacity: 0.45; }
 
 [data-module="propresenter-timers"] .tm-hint {
   flex: 1;
@@ -49,7 +54,69 @@
 }
 [data-module="propresenter-timers"] .tm-hint[hidden] { display: none; }
 
-/* ── card grid (column count set by client.js fit()) ── */
+/* ── source groups: heading + card grid (column count set by fit()) ── */
+
+[data-module="propresenter-timers"] .tm-groups {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--tm-gap, 8px);
+  padding: var(--tm-pad, 10px);
+}
+[data-module="propresenter-timers"] .tm-groups[hidden] { display: none; }
+
+[data-module="propresenter-timers"] .tm-group {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+}
+
+[data-module="propresenter-timers"] .tm-head {
+  flex: none;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin: 0 2px 4px;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--muted);
+}
+[data-module="propresenter-timers"] .tm-head[hidden] { display: none; }
+
+[data-module="propresenter-timers"] .tm-title {
+  flex: none;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* The source's own word while it isn't OK ("Unreachable at …"). */
+[data-module="propresenter-timers"] .tm-note {
+  flex: 1;
+  min-width: 0;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+[data-module="propresenter-timers"] .tm-group.is-down .tm-note { color: var(--tm-warn); }
+[data-module="propresenter-timers"] .tm-group.is-stale .tm-note { color: var(--tm-danger); }
+
+/* Headings off: a source in trouble, or with nothing to show, still says so. */
+[data-module="propresenter-timers"] .tm-empty {
+  flex: none;
+  padding: 2px 4px;
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-module="propresenter-timers"] .tm-empty[hidden] { display: none; }
+[data-module="propresenter-timers"] .tm-group.is-down .tm-empty { color: var(--tm-warn); }
 
 [data-module="propresenter-timers"] .tm-grid {
   flex: 1;
@@ -57,16 +124,34 @@
   display: grid;
   grid-auto-rows: 1fr;
   gap: var(--tm-gap, 8px);
-  padding: var(--tm-pad, 10px);
 }
-[data-module="propresenter-timers"] .tm-grid[hidden] { display: none; }
+[data-module="propresenter-timers"] .tm-grid:empty { display: none; }
 
-/* Compact cards (short tiles): the state line goes, its color stays.
-   The one exception is the LTC card with no timecode API behind it —
-   that message must never be hidden. */
-[data-module="propresenter-timers"] .tm-compact .tm-card .tm-state { display: none; }
-[data-module="propresenter-timers"] .tm-compact .tm-card-ltc.is-ltc-unavailable .tm-state { display: block; }
-[data-module="propresenter-timers"] .tm-compact .tm-card.is-missing .tm-state { display: block; }
+/* Grouping off: one grid for every timer, filled row by row. A wrapping
+   flex row instead of a CSS grid, so the last row's cards widen to use the
+   whole width — nothing is left empty. Rows share the height equally. */
+[data-module="propresenter-timers"] .tm-grid.is-flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  align-items: stretch;
+}
+[data-module="propresenter-timers"] .tm-grid.is-flow .tm-card {
+  flex: 1 1 calc((100% - var(--tm-gap, 8px) * (var(--tm-cols, 1) - 1)) / var(--tm-cols, 1));
+  min-width: 0;
+}
+[data-module="propresenter-timers"] .tm-empty[data-tone="warn"] { color: var(--tm-warn); }
+
+/* Compact cards (short tiles) and "Status lines" off: the lines under the
+   digits go, the colour stays. A note that explains a missing value (no
+   LTC input, a solo timer no longer offered) must never be hidden. */
+[data-module="propresenter-timers"] .tm-compact .tm-status:not(.is-note),
+[data-module="propresenter-timers"] .tm-compact .tm-detail,
+[data-module="propresenter-timers"] .tm-nostatus .tm-status:not(.is-note),
+[data-module="propresenter-timers"] .tm-nodetail .tm-detail { display: none; }
+/* "Names" off hides every title; the clock never carries one — its digits say what it is */
+[data-module="propresenter-timers"] .tm-nonames .tm-name,
+[data-module="propresenter-timers"] .tm-card-clock .tm-name { display: none; }
 
 /* ── one timer card ── */
 
@@ -98,13 +183,20 @@
   text-transform: uppercase;
   color: var(--muted);
   white-space: nowrap;
+}
+
+/* The label is its own box so a long name ends in an ellipsis (a flex
+   container's bare text won't). */
+[data-module="propresenter-timers"] .tm-label {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 [data-module="propresenter-timers"] .tm-time {
   flex: none;
-  font-size: var(--tm-time-size);
+  font-size: 32px; /* fit() sets the real size per card */
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.02em;
@@ -113,17 +205,17 @@
   white-space: nowrap;
 }
 
-/* Admin "Timer font: Monospace" — steadier digits as the numbers change.
-   Applies to timer and LTC values alike (both are .tm-time). */
+/* Admin "Timer font: Monospace" — steadier digits as the numbers change. */
 [data-module="propresenter-timers"] .tm-mono .tm-time {
   font-family: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", "Consolas", monospace;
   letter-spacing: 0;
 }
 
-[data-module="propresenter-timers"] .tm-state {
+[data-module="propresenter-timers"] .tm-status,
+[data-module="propresenter-timers"] .tm-detail {
   flex: none;
   max-width: 100%;
-  font-size: var(--tm-meta-size);
+  font-size: calc(var(--tm-meta-size) * 0.8); /* smaller than the title; fit() budgets the same share */
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -132,102 +224,110 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+[data-module="propresenter-timers"] .tm-status[hidden],
+[data-module="propresenter-timers"] .tm-detail[hidden] { display: none; }
 
-/* ── state looks ── */
-
-[data-module="propresenter-timers"] .tm-card.is-running {
-  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-  background: color-mix(in srgb, var(--accent) 10%, transparent);
-}
-[data-module="propresenter-timers"] .tm-card.is-running .tm-time { color: var(--accent); }
-[data-module="propresenter-timers"] .tm-card.is-running .tm-state { color: var(--accent); }
-
-[data-module="propresenter-timers"] .tm-card.is-stopped .tm-time { color: var(--muted); }
-
-[data-module="propresenter-timers"] .tm-card.is-complete {
-  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
-  background: color-mix(in srgb, var(--warn) 10%, transparent);
-}
-[data-module="propresenter-timers"] .tm-card.is-complete .tm-time { color: var(--warn); }
-[data-module="propresenter-timers"] .tm-card.is-complete .tm-state { color: var(--warn); }
-
-/* A solo tile whose timer was deleted in ProPresenter. */
-[data-module="propresenter-timers"] .tm-card.is-missing { border-style: dashed; }
-[data-module="propresenter-timers"] .tm-card.is-missing .tm-time { color: var(--muted); }
-[data-module="propresenter-timers"] .tm-card.is-missing .tm-state { color: var(--warn); }
-
-/* Overrun: readable across the room even on a wall display. */
-[data-module="propresenter-timers"] .tm-card.is-overrun {
-  border-color: var(--danger);
-  background: color-mix(in srgb, var(--danger) 22%, transparent);
-  animation: tm-overrun-pulse 1.2s ease-in-out infinite;
-}
-[data-module="propresenter-timers"] .tm-card.is-overrun .tm-time { color: var(--danger); }
-[data-module="propresenter-timers"] .tm-card.is-overrun .tm-state {
-  color: var(--danger);
-  font-weight: 800;
+[data-module="propresenter-timers"] .tm-detail {
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  opacity: 0.85;
 }
 
-@keyframes tm-overrun-pulse {
-  50% { background: color-mix(in srgb, var(--danger) 38%, transparent); }
+/* A provider's status line carries its own tone ("ahead 1:20" in green). */
+[data-module="propresenter-timers"] .tm-status[data-tone="ok"] { color: var(--tm-ok); }
+[data-module="propresenter-timers"] .tm-status[data-tone="warn"] { color: var(--tm-warn); }
+[data-module="propresenter-timers"] .tm-status[data-tone="danger"] { color: var(--tm-danger); }
+[data-module="propresenter-timers"] .tm-status[data-tone="muted"] { color: var(--tm-muted); }
+
+/* The clock's date: one line when it fits, else the day on its own line
+   (renderDate() sizes it to the longer half). */
+[data-module="propresenter-timers"] .tm-status.is-date {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  text-align: center;
+  line-height: 1.15;
 }
+[data-module="propresenter-timers"] .tm-status.is-date span { white-space: nowrap; }
+[data-module="propresenter-timers"] .tm-status.is-date.is-wrap span { display: block; }
 
-/* ── the LTC card: visually its own thing ── */
-
-[data-module="propresenter-timers"] .tm-card-ltc {
-  border-style: dashed;
-}
-[data-module="propresenter-timers"] .tm-card-ltc .tm-time {
-  font-size: var(--tm-ltc-size);
-}
-
-[data-module="propresenter-timers"] .tm-ltc-badge {
-  flex: none;
-  padding: 0.15em 0.55em;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--accent) 24%, transparent);
-  color: var(--text);
-  font-size: 0.95em;
-  letter-spacing: 0.12em;
-}
-
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-receiving {
-  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-  background: color-mix(in srgb, var(--accent) 10%, transparent);
-}
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-receiving .tm-time { color: var(--accent); }
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-receiving .tm-state { color: var(--accent); }
-
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-nosignal {
-  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
-}
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-nosignal .tm-time { color: var(--muted); }
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-nosignal .tm-state {
-  color: var(--warn);
-  animation: tm-nosignal-blink 1.6s steps(2) infinite;
-}
-
-@keyframes tm-nosignal-blink { 50% { opacity: 0.35; } }
-
-/* LTC ceased mid-show: hold the last frame, quietly — no alarm colors,
-   stopping the clock is usually somebody doing their job. */
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-stopped .tm-time { color: var(--muted); }
-
-/* No timecode API on this ProPresenter: say so, quietly. */
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-unavailable .tm-time { color: var(--muted); }
-[data-module="propresenter-timers"] .tm-card-ltc.is-ltc-unavailable .tm-state {
+/* Explanatory notes read as sentences, not badges. */
+[data-module="propresenter-timers"] .tm-status.is-note {
   text-transform: none;
   letter-spacing: 0.02em;
   white-space: normal;
   text-align: center;
 }
 
+/* ── state looks (feedbacks) ── */
+
+[data-module="propresenter-timers"] .tm-card.is-ok {
+  border-color: color-mix(in srgb, var(--tm-ok) 55%, var(--border));
+  background: color-mix(in srgb, var(--tm-ok) 10%, transparent);
+}
+[data-module="propresenter-timers"] .tm-card.is-ok .tm-time { color: var(--tm-ok); }
+
+[data-module="propresenter-timers"] .tm-card.is-warn {
+  border-color: color-mix(in srgb, var(--tm-warn) 55%, var(--border));
+  background: color-mix(in srgb, var(--tm-warn) 10%, transparent);
+}
+[data-module="propresenter-timers"] .tm-card.is-warn .tm-time { color: var(--tm-warn); }
+
+[data-module="propresenter-timers"] .tm-card.is-muted .tm-time { color: var(--tm-muted); }
+
+/* The wall clock is information, not a state — plain text colour. */
+[data-module="propresenter-timers"] .tm-card.is-plain .tm-time { color: var(--text); }
+
+/* Overrun: readable across the room even on a wall display. */
+[data-module="propresenter-timers"] .tm-card.is-danger {
+  border-color: var(--tm-danger);
+  background: color-mix(in srgb, var(--tm-danger) 22%, transparent);
+}
+[data-module="propresenter-timers"] .tm-card.is-danger .tm-time { color: var(--tm-danger); }
+[data-module="propresenter-timers"] .tm-card.is-overrun {
+  animation: tm-overrun-pulse 1.2s ease-in-out infinite;
+}
+[data-module="propresenter-timers"] .tm-card.is-overrun .tm-status { font-weight: 800; }
+
+@keyframes tm-overrun-pulse {
+  50% { background: color-mix(in srgb, var(--tm-danger) 38%, transparent); }
+}
+
+/* A solo tile whose timer is no longer offered. */
+[data-module="propresenter-timers"] .tm-card.is-missing { border-style: dashed; }
+
+/* ── the LTC card: visually its own thing ── */
+
+[data-module="propresenter-timers"] .tm-card-ltc { border-style: dashed; }
+
+[data-module="propresenter-timers"] .tm-ltc-badge {
+  flex: none;
+  padding: 0.15em 0.55em;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--tm-ok) 24%, transparent);
+  color: var(--text);
+  font-size: 0.95em;
+  letter-spacing: 0.12em;
+}
+
+/* No signal: muted digits, a blinking warning line. */
+[data-module="propresenter-timers"] .tm-card.is-nosignal {
+  border-color: color-mix(in srgb, var(--tm-warn) 55%, var(--border));
+}
+[data-module="propresenter-timers"] .tm-card.is-nosignal .tm-status {
+  animation: tm-nosignal-blink 1.6s steps(2) infinite;
+}
+
+@keyframes tm-nosignal-blink { 50% { opacity: 0.35; } }
+
 /* ── the "Timers ▾" menu (container styled/positioned by the shell) ── */
 
 [data-module="propresenter-timers"] .tm-menu-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 14px;
   width: 100%;
   padding: 6px 9px;
   background: none;
@@ -241,16 +341,41 @@
   white-space: nowrap;
 }
 [data-module="propresenter-timers"] .tm-menu-item:hover { background: var(--border); }
-
-[data-module="propresenter-timers"] .tm-menu-item .check {
-  width: 14px;
-  flex: none;
-  color: var(--accent);
-  font-weight: 700;
-  visibility: hidden;
-}
-[data-module="propresenter-timers"] .tm-menu-item.on .check { visibility: visible; }
 [data-module="propresenter-timers"] .tm-menu-item .name { font-weight: 600; }
+[data-module="propresenter-timers"] .tm-menu-item:not(.on) .name { color: var(--muted); }
+
+/* A small switch: off = hollow pill, on = filled with the accent. (The menu
+   hangs off the tile's title bar, outside .tm-wrap, so the tile's own colour
+   properties don't reach it — the shell's palette does.) */
+[data-module="propresenter-timers"] .tm-switch {
+  flex: none;
+  position: relative;
+  width: 26px;
+  height: 14px;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--muted) 25%, transparent);
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+[data-module="propresenter-timers"] .tm-switch::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text);
+  transition: transform 0.15s ease;
+}
+[data-module="propresenter-timers"] .tm-menu-item.on .tm-switch {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+[data-module="propresenter-timers"] .tm-menu-item.on .tm-switch::after {
+  transform: translateX(12px);
+  background: var(--bg);
+}
 
 [data-module="propresenter-timers"] .tm-menu-note {
   padding: 6px 9px;
diff --git a/modules/slack/EMOJI-DATA-LICENSE b/modules/slack/EMOJI-DATA-LICENSE
new file mode 100644
index 0000000..85ddb3c
--- /dev/null
+++ b/modules/slack/EMOJI-DATA-LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Cal Henderson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/modules/slack/client.js b/modules/slack/client.js
new file mode 100644
index 0000000..59637e3
--- /dev/null
+++ b/modules/slack/client.js
@@ -0,0 +1,1514 @@
+/* Slack — client part.
+
+   Tiles from one module (moduleApi.variant / the tile's `view` setting pick):
+   one channel transcript per configured channel, a PIN-gated free-text sender
+   and a PIN-gated grid of preset replies. The two senders post to the channel
+   of whichever transcript was clicked last (see the send target below).
+   Everything lives inside the tile's root; all traffic goes through the
+   module's server routes (the token and the PIN never reach a browser).
+   Nothing here uses innerHTML with data — every string from Slack lands in
+   a text node. */
+
+/* ── shared helpers ─────────────────────────────────────────────────── */
+
+function el(tag, cls, text) {
+  const node = document.createElement(tag);
+  if (cls) node.className = cls;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function fmtTime(ms) {
+  const d = new Date(ms);
+  return isNaN(d) ? '' : d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
+}
+
+/* Inline marks the server left in the text: ```code``` `code` *bold*
+   _italic_ ~strike~. Openers must not sit inside a word (snake_case_names
+   and 5 * 3 * 2 stay as they are). Built with DOM nodes, so any character
+   in a message is safe. */
+const MARK_RE = /(```[\s\S]*?```|`[^`\n]+`|(?<![\w*])\*(?!\s)[^*\n]*?(?<!\s)\*(?![\w*])|(?<![\w_])_(?!\s)[^_\n]*?(?<!\s)_(?![\w_])|(?<![\w~])~(?!\s)[^~\n]*?(?<!\s)~(?![\w~]))/g;
+
+/* Standard :codes: arrive as their characters (the server swaps them); a
+   custom emoji's :code: is still text here and becomes its image once the
+   workspace's set is known. */
+const CUSTOM_CODE_RE = /:([a-z0-9_+-]{1,100}):/gi;
+function appendText(container, str) {
+  if (!str) return;
+  if (!emojiStore.ready() || !str.includes(':')) return void container.appendChild(document.createTextNode(str));
+  let last = 0;
+  for (const m of str.matchAll(CUSTOM_CODE_RE)) {
+    if (!emojiStore.isCustom(m[1])) continue;
+    if (m.index > last) container.appendChild(document.createTextNode(str.slice(last, m.index)));
+    container.appendChild(emojiStore.node(m[1]));
+    last = m.index + m[0].length;
+  }
+  if (last < str.length) container.appendChild(document.createTextNode(str.slice(last)));
+}
+
+function renderRich(container, text, depth = 0) {
+  container.textContent = '';
+  const s = String(text || '');
+  let last = 0;
+  if (depth < 3) {
+    for (const m of s.matchAll(MARK_RE)) {
+      if (m.index > last) appendText(container, s.slice(last, m.index));
+      const tok = m[0];
+      let node;
+      if (tok.startsWith('```')) {
+        node = el('span', 'sl-code sl-block', tok.slice(3, -3).replace(/^\n+|\n+$/g, ''));
+      } else if (tok.startsWith('`')) {
+        node = el('code', 'sl-code', tok.slice(1, -1));
+      } else {
+        node = el(tok.startsWith('*') ? 'b' : tok.startsWith('_') ? 'i' : 's');
+        renderRich(node, tok.slice(1, -1), depth + 1);
+      }
+      container.appendChild(node);
+      last = m.index + tok.length;
+    }
+  }
+  if (last < s.length) appendText(container, s.slice(last));
+}
+
+function textSizePx(moduleApi, fallback = 14) {
+  return Math.min(48, Math.max(10, Number(moduleApi.instanceSettings.textSize) || fallback));
+}
+
+async function readJson(res) {
+  try {
+    return await res.json();
+  } catch {
+    return {};
+  }
+}
+
+const NO_CHANNEL = 'No channel configured — pick channels in Admin → Slack → Channels';
+
+const LOCK_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>';
+const JUMP_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11"/><path d="m7 10 5 5 5-5"/><path d="M5 20h14"/></svg>';
+const BACK_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 6H8l-5 6 5 6h13a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/><path d="m18 9-6 6M12 9l6 6"/></svg>';
+
+/* ── the send target ────────────────────────────────────────────────── */
+
+/* Deliberately module-level. The guide forbids module-level *per-instance*
+   state — two tiles' closures must never leak into each other — and every
+   piece of per-tile state in this file still lives inside its create(). This
+   is a different kind of thing: one fact about the whole page, "which
+   transcript did the operator click last", that Send message, Quick replies
+   and every transcript tile on this dashboard have to agree on. It is UI
+   state of this browser, not of the machine (another screen in the booth may
+   be pointed at another channel), so it stays out of the server and lives
+   here: an EventTarget plus the chosen channel id, mirrored in localStorage
+   under proddash:slack:sendTarget so a reload keeps it. */
+const SEND_TARGET_KEY = 'proddash:slack:sendTarget';
+
+const sendTarget = (() => {
+  const bus = new EventTarget();
+  const transcripts = new Map(); // instanceId -> channel id, for every transcript tile on the page
+  let id = '';
+  try {
+    id = String(localStorage.getItem(SEND_TARGET_KEY) || '');
+  } catch { /* private mode or blocked storage — the choice lasts until reload */ }
+  const emit = () => bus.dispatchEvent(new Event('change'));
+  return {
+    /** The channel the operator clicked last ('' if never). */
+    get() {
+      return id;
+    },
+    /** A transcript was clicked: remember it and tell every Slack tile. */
+    select(channelId) {
+      const next = String(channelId || '');
+      if (next === id) return;
+      id = next;
+      try {
+        localStorage.setItem(SEND_TARGET_KEY, id);
+      } catch { /* fine — see above */ }
+      emit();
+    },
+    /** Transcript tiles register, so the fallback rule can tell a selected channel whose tile is gone. */
+    attach(instanceId, channelId) {
+      if (transcripts.get(instanceId) === channelId) return;
+      transcripts.set(instanceId, channelId);
+      emit();
+    },
+    detach(instanceId) {
+      if (transcripts.delete(instanceId)) emit();
+    },
+    hasTranscript(channelId) {
+      for (const v of transcripts.values()) if (v === channelId) return true;
+      return false;
+    },
+    /**
+     * Where a send goes, given the configured channels in admin order: the
+     * selection while it is still configured and its transcript is on the
+     * page; otherwise the first configured channel.
+     */
+    resolve(configured) {
+      const list = Array.isArray(configured) ? configured : [];
+      if (!list.length) return '';
+      if (id && list.includes(id) && this.hasTranscript(id)) return id;
+      return list[0];
+    },
+    on(fn) {
+      bus.addEventListener('change', fn);
+      return () => bus.removeEventListener('change', fn);
+    },
+  };
+})();
+
+/* ── this module's API path, for <img src> (moduleApi.fetch covers the rest) ── */
+const API_BASE = '/api/modules/slack';
+const apiUrl = (path) => `${API_BASE}${path}`;
+
+/* ── emoji: the shipped table plus the workspace's custom set, once per page ── */
+const emojiStore = (() => {
+  const bus = new EventTarget();
+  let data = null;    // { standard: { code: char }, custom: { name: { url } | { char } }, version }
+  let version = -1;
+  let loading = null;
+  let reverse = null; // char (variation selector stripped) → code
+  const strip = (str) => String(str || '').replace(/️/g, '');
+  const split = (code) => {
+    const m = /^(.+?)(?:::(skin-tone-[2-6]))?$/.exec(String(code || '').replace(/^:|:$/g, ''));
+    return m ? { base: m[1], tone: m[2] || '' } : { base: '', tone: '' };
+  };
+  function load(moduleApi) {
+    if (!loading) {
+      loading = moduleApi.fetch('/emoji')
+        .then(async (res) => {
+          if (!res.ok) throw new Error(String(res.status));
+          const body = await res.json();
+          data = { standard: body.standard || {}, custom: body.custom || {}, version: Number(body.version) || 0 };
+          version = data.version;
+          reverse = null;
+          bus.dispatchEvent(new Event('change'));
+        })
+        .catch(() => { /* the next state frame asks again */ })
+        .finally(() => { loading = null; });
+    }
+    return loading;
+  }
+  return {
+    ready: () => Boolean(data),
+    on(fn) {
+      bus.addEventListener('change', fn);
+      return () => bus.removeEventListener('change', fn);
+    },
+    /** With every state frame: fetch the table the first time, again when the custom set changed. */
+    sync(moduleApi, v) {
+      if (!data || (v !== undefined && Number(v) !== version)) load(moduleApi);
+    },
+    isCustom: (code) => Boolean(data?.custom?.[split(code).base]),
+    /** The character for a code — '' for a custom image or an unknown code. */
+    charOf(code) {
+      if (!data) return '';
+      const { base, tone } = split(code);
+      const ch = data.standard[base] || data.custom[base]?.char || '';
+      if (!ch) return '';
+      const t = tone ? data.standard[tone] || '' : '';
+      return t ? strip(ch) + t : ch;
+    },
+    imageOf(code) {
+      return data?.custom?.[split(code).base]?.url || '';
+    },
+    /** The code Slack knows a character by ('' if none) — a reaction needs the code. */
+    nameOf(char) {
+      if (!data) return '';
+      if (!reverse) {
+        reverse = new Map();
+        for (const [code, ch] of Object.entries(data.standard)) {
+          if (code.startsWith('skin-tone-')) continue;
+          const key = strip(ch);
+          if (!reverse.has(key)) reverse.set(key, code);
+        }
+      }
+      const str = strip(char);
+      const tone = /[\u{1F3FB}-\u{1F3FF}]$/u.exec(str);
+      if (tone) {
+        const base = reverse.get(str.slice(0, -tone[0].length));
+        const toneCode = Object.keys(data.standard).find((c) => c.startsWith('skin-tone-') && data.standard[c] === tone[0]);
+        return base && toneCode ? `${base}::${toneCode}` : '';
+      }
+      return reverse.get(str) || '';
+    },
+    /** A node drawing :code: — the character, or the custom image. */
+    node(code) {
+      const img = this.imageOf(code);
+      if (img) {
+        const i = el('img', 'sl-emoji');
+        i.src = img;
+        i.alt = `:${code}:`;
+        i.title = `:${code}:`;
+        i.loading = 'lazy';
+        i.draggable = false;
+        return i;
+      }
+      const span = el('span', 'sl-emoji-char', this.charOf(code) || `:${code}:`);
+      span.title = `:${code}:`;
+      return span;
+    },
+    /** Codes matching a search: custom ones first, names that start with it before the rest. */
+    search(q, limit = 40) {
+      const str = String(q || '').trim().toLowerCase().replace(/^:|:$/g, '').replace(/\s+/g, '_');
+      if (!data || !str) return [];
+      const out = [];
+      const seen = new Set();
+      const add = (code) => {
+        if (!seen.has(code) && out.length < limit) {
+          seen.add(code);
+          out.push(code);
+        }
+      };
+      const customs = Object.keys(data.custom);
+      const standard = Object.keys(data.standard).filter((c) => !c.startsWith('skin-tone-'));
+      for (const c of customs) if (c.startsWith(str)) add(c);
+      for (const c of standard) if (c.startsWith(str)) add(c);
+      for (const c of customs) if (c.includes(str)) add(c);
+      for (const c of standard) if (c.includes(str)) add(c);
+      return out;
+    },
+  };
+})();
+
+/* ── the unlock: one PIN entry serves every Slack tile on this page ── */
+/* The same kind of thing as sendTarget — a fact about the whole page, not
+   one tile: the operator has entered the PIN. It holds the server's unlock
+   token in memory only (a reload asks again) so that unlocking Send message
+   also unlocks Quick replies and lets a transcript react. */
+const unlockStore = (() => {
+  const bus = new EventTarget();
+  let token = '';
+  let expiresAt = 0;
+  let reason = '';
+  return {
+    get() {
+      return token && expiresAt > Date.now() ? token : '';
+    },
+    expiresAt: () => expiresAt,
+    reason: () => reason,
+    set(t, exp) {
+      token = String(t || '');
+      expiresAt = Number(exp) || 0;
+      reason = '';
+      bus.dispatchEvent(new Event('change'));
+    },
+    /** A send or reaction slid the server's expiry along. */
+    touch(exp) {
+      if (token && Number(exp) > 0) expiresAt = Number(exp);
+    },
+    clear(why = '') {
+      if (!token) return;
+      token = '';
+      expiresAt = 0;
+      reason = why;
+      bus.dispatchEvent(new Event('change'));
+    },
+    on(fn) {
+      bus.addEventListener('change', fn);
+      return () => bus.removeEventListener('change', fn);
+    },
+  };
+})();
+
+/**
+ * The PIN pad: 1–9, 0 and ⌫ under a row of dots, one per digit of the PIN.
+ * It submits by itself once as many digits as the PIN has are in (the
+ * server says how many, never which), or at eight. On success the page-wide
+ * unlock is set and `onUnlocked` runs.
+ */
+function createPinPad({ moduleApi, heading = 'Enter PIN', subtitle, pinLength, onUnlocked }) {
+  let pinBuf = '';
+  let busy = false;
+  let error = '';
+  let note = '';
+  const pad = el('div', 'sl-pad');
+  const head = el('div', 'sl-pad-head');
+  const sub = el('span', 'sl-pad-sub');
+  head.append(el('b', '', heading), sub);
+  const dots = el('div', 'sl-dots');
+  for (let i = 0; i < 8; i += 1) dots.appendChild(el('span', 'sl-dot'));
+  const keys = el('div', 'sl-keys');
+  const key = (label, cls, onClick, html) => {
+    const b = el('button', 'sl-key' + (cls ? ' ' + cls : ''));
+    b.type = 'button';
+    if (html) b.innerHTML = html; // our own SVG constants only
+    else b.textContent = label;
+    b.addEventListener('click', (e) => {
+      e.preventDefault();
+      onClick();
+    });
+    return b;
+  };
+  for (const d of ['1', '2', '3', '4', '5', '6', '7', '8', '9']) keys.appendChild(key(d, '', () => press(d)));
+  keys.appendChild(el('span', 'sl-key sl-key-blank'));
+  keys.appendChild(key('0', '', () => press('0')));
+  const back = key('⌫', 'sl-key-back', backspace, BACK_SVG);
+  back.title = 'Backspace';
+  keys.appendChild(back);
+  const msg = el('div', 'sl-pad-msg');
+  // Shown instead of the keys when the tile is too short for them (style.css).
+  const hint = el('div', 'sl-pad-hint', 'Type the PIN, or make the tile taller for a keypad.');
+  pad.append(head, dots, keys, hint, msg);
+
+  const wanted = () => Math.min(8, Math.max(0, Math.trunc(Number(pinLength?.()) || 0)));
+
+  function refresh() {
+    const text = subtitle ? String(subtitle() || '') : '';
+    sub.textContent = text ? ` · ${text}` : '';
+    const n = Math.min(8, pinBuf.length);
+    // One dot per digit of the PIN; while its length is unknown, 4 and one spare.
+    const slots = wanted() || Math.max(4, n + (n < 8 ? 1 : 0));
+    [...dots.children].forEach((d, i) => {
+      d.classList.toggle('on', i < n);
+      d.hidden = i >= slots;
+    });
+    pad.classList.toggle('is-busy', busy);
+    msg.textContent = error || note;
+    msg.classList.toggle('is-error', Boolean(error));
+  }
+
+  function press(d) {
+    if (busy || pinBuf.length >= 8) return;
+    pinBuf += d;
+    error = '';
+    refresh();
+    const len = wanted();
+    if ((len && pinBuf.length >= len) || pinBuf.length === 8) submit();
+  }
+
+  function backspace() {
+    if (busy) return;
+    pinBuf = pinBuf.slice(0, -1);
+    error = '';
+    refresh();
+  }
+
+  function shake(message) {
+    error = message;
+    note = '';
+    pinBuf = '';
+    refresh();
+    pad.classList.remove('sl-shake');
+    void pad.offsetWidth; // restart the animation
+    pad.classList.add('sl-shake');
+  }
+
+  async function submit() {
+    if (busy || pinBuf.length < 4) return;
+    busy = true;
+    refresh();
+    try {
+      const res = await moduleApi.fetch('/unlock', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pin: pinBuf }),
+      });
+      const body = await readJson(res);
+      if (!res.ok || !body.token) {
+        shake(body.error || `Could not unlock (HTTP ${res.status})`);
+        return;
+      }
+      pinBuf = '';
+      error = '';
+      note = '';
+      unlockStore.set(body.token, Number(body.expiresAt) || Date.now() + 10 * 60000);
+      onUnlocked?.(body);
+    } catch {
+      shake('ProdDash unreachable — try again');
+    } finally {
+      busy = false;
+      refresh();
+    }
+  }
+
+  /** Keyboard: digits, Backspace, Enter (submit early), Escape (clear). True when handled. */
+  function onKey(e) {
+    if (/^[0-9]$/.test(e.key)) press(e.key);
+    else if (e.key === 'Backspace') backspace();
+    else if (e.key === 'Enter') submit();
+    else if (e.key === 'Escape') {
+      pinBuf = '';
+      error = '';
+      refresh();
+    } else return false;
+    e.preventDefault();
+    return true;
+  }
+
+  refresh();
+  return {
+    el: pad,
+    refresh,
+    onKey,
+    setNote(text) {
+      note = String(text || '');
+      error = '';
+      refresh();
+    },
+  };
+}
+
+/* ── the reaction menu: right-click a message, pick an emoji ── */
+/* One for the page, on document.body so a tile's overflow can't clip it;
+   `data-module="slack"` keeps the module's scoped styles applying to it. */
+const emojiMenu = (() => {
+  let menu = null;
+  let ctx = null;
+  let cleanup = null;
+
+  function close() {
+    if (!menu) return;
+    cleanup?.();
+    cleanup = null;
+    menu.remove();
+    menu = null;
+    ctx = null;
+  }
+
+  function place(x, y) {
+    const r = menu.getBoundingClientRect();
+    const left = Math.max(8, Math.min(x, window.innerWidth - r.width - 8));
+    const top = Math.max(8, Math.min(y, window.innerHeight - r.height - 8));
+    menu.style.left = `${Math.round(left)}px`;
+    menu.style.top = `${Math.round(top)}px`;
+  }
+
+  function anchor() {
+    return { x: parseFloat(menu.style.left) || 8, y: parseFloat(menu.style.top) || 8 };
+  }
+
+  /** Add (or remove) :code: on the message; resolves to '' or an error sentence. */
+  async function perform(code, remove) {
+    const { moduleApi, channel, ts } = ctx;
+    const token = unlockStore.get();
+    if (!token) return 'locked';
+    try {
+      const res = await moduleApi.fetch('/react', {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channel, ts, name: code, remove: Boolean(remove) }),
+      });
+      const body = await readJson(res);
+      if (res.status === 401) {
+        unlockStore.clear(body.error || 'Locked — enter the PIN');
+        return 'locked';
+      }
+      if (!res.ok) return body.error || `Could not react (HTTP ${res.status})`;
+      unlockStore.touch(body.expiresAt);
+      return '';
+    } catch {
+      return 'ProdDash unreachable — try again';
+    }
+  }
+
+  async function pick(code, remove) {
+    if (!menu || !ctx) return;
+    menu.classList.add('is-busy');
+    const err = await perform(code, remove);
+    if (!menu) return;
+    menu.classList.remove('is-busy');
+    if (!err) return void close();
+    if (err === 'locked') return void render();
+    render(err);
+  }
+
+  function button(code) {
+    const b = el('button', 'sl-emoji-btn');
+    b.type = 'button';
+    b.title = `:${code}:`;
+    b.appendChild(emojiStore.node(code));
+    b.addEventListener('click', () => pick(code, false));
+    return b;
+  }
+
+  function render(error = '') {
+    if (!menu || !ctx) return;
+    const { x, y } = anchor();
+    menu.textContent = '';
+    menu.hidden = false;
+    if (!unlockStore.get()) {
+      // Locked: the PIN first. A pending toggle (a click on a reaction pill)
+      // is carried out the moment the PIN is in.
+      const pad = createPinPad({
+        moduleApi: ctx.moduleApi,
+        heading: 'Enter PIN to react',
+        subtitle: () => (ctx?.sendingAs ? `as ${ctx.sendingAs}` : ''),
+        pinLength: () => ctx?.pinLength || 0,
+        onUnlocked() {
+          if (!ctx) return;
+          if (ctx.pending) {
+            const { code, remove } = ctx.pending;
+            ctx.pending = null;
+            pick(code, remove);
+          } else render();
+        },
+      });
+      if (unlockStore.reason()) pad.setNote(unlockStore.reason());
+      menu.appendChild(pad.el);
+      menu.onkeydown = (e) => pad.onKey(e);
+      menu.focus({ preventScroll: true });
+      place(x, y);
+      return;
+    }
+    menu.onkeydown = null;
+    if (ctx.pending) {
+      // Unlocked and asked for one toggle: do it without showing a picker.
+      const { code, remove } = ctx.pending;
+      ctx.pending = null;
+      menu.hidden = true;
+      pick(code, remove);
+      return;
+    }
+    const head = el('div', 'sl-emoji-head', ctx.sendingAs ? `React as ${ctx.sendingAs}` : 'React');
+    const quick = el('div', 'sl-emoji-quickrow');
+    for (const q of Array.isArray(ctx.quick) ? ctx.quick : []) {
+      const code = q.name || emojiStore.nameOf(q.char);
+      if (code) quick.appendChild(button(code));
+    }
+    const search = el('input', 'sl-emoji-search');
+    search.type = 'search';
+    search.placeholder = 'Search all emoji…';
+    search.autocomplete = 'off';
+    search.spellcheck = false;
+    const results = el('div', 'sl-emoji-results');
+    const paint = () => {
+      results.textContent = '';
+      const q = search.value.trim();
+      const list = q ? emojiStore.search(q, 40) : [];
+      if (!list.length) {
+        results.appendChild(el('div', 'sl-emoji-none', q ? 'Nothing by that name' : 'Type to search — names as in Slack'));
+        return;
+      }
+      for (const code of list) results.appendChild(button(code));
+    };
+    search.addEventListener('input', paint);
+    search.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        results.querySelector('.sl-emoji-btn')?.click();
+      }
+    });
+    const msg = el('div', 'sl-emoji-msg' + (error ? ' is-error' : ''), error);
+    menu.append(head, quick, search, results, msg);
+    paint();
+    place(x, y);
+    search.focus({ preventScroll: true });
+  }
+
+  return {
+    /**
+     * Open at (x, y) for message `ts` in `channel`. `quick` is the admin's
+     * quick emoji list; `pending` { code, remove } performs that one toggle
+     * (a click on a reaction pill) instead of showing the picker.
+     */
+    open({ moduleApi, x, y, channel, ts, quick, sendingAs, pinLength, pending = null }) {
+      close();
+      ctx = { moduleApi, channel, ts, quick, sendingAs, pinLength, pending };
+      menu = el('div', 'sl-emoji-menu');
+      menu.dataset.module = 'slack';
+      menu.tabIndex = -1;
+      menu.setAttribute('role', 'dialog');
+      menu.setAttribute('aria-label', 'React with an emoji');
+      menu.style.left = `${Math.round(x)}px`;
+      menu.style.top = `${Math.round(y)}px`;
+      document.body.appendChild(menu);
+      render();
+      const onDown = (e) => { if (menu && !menu.contains(e.target)) close(); };
+      const onKey = (e) => {
+        if (e.key === 'Escape' && menu) {
+          e.stopPropagation();
+          close();
+        }
+      };
+      document.addEventListener('pointerdown', onDown, true);
+      document.addEventListener('keydown', onKey, true);
+      window.addEventListener('resize', close);
+      cleanup = () => {
+        document.removeEventListener('pointerdown', onDown, true);
+        document.removeEventListener('keydown', onKey, true);
+        window.removeEventListener('resize', close);
+      };
+    },
+    close,
+  };
+})();
+
+/* ── the factory ────────────────────────────────────────────────────── */
+
+/* the text-size buttons: a drawn − and + at the icon size, like every other header icon */
+const MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>';
+const PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';
+
+export default function create({ root, moduleApi }) {
+  const variant = String(moduleApi.variant || '');
+  // The entry's preset `view` is authoritative; a tile added under 1.0.0 has
+  // the plain variant "transcript", a new one "transcript:<channel id>".
+  const view = String(moduleApi.instanceSettings.view || (variant.startsWith('transcript') ? 'transcript' : variant) || 'transcript');
+  if (view === 'send' || view === 'quick') return createSendTile({ root, moduleApi, mode: view });
+  return createTranscriptTile({ root, moduleApi });
+}
+
+/* ── transcript ─────────────────────────────────────────────────────── */
+
+function createTranscriptTile({ root, moduleApi }) {
+  const entries = new Map(); // ts -> { el, sig, ... }
+  // The channel this tile shows: preset by the picker entry; a tile from
+  // 1.0.0 has none and follows the first configured channel.
+  const pinnedChannel = String(moduleApi.instanceSettings.channel || '');
+  let channelId = pinnedChannel;
+  let lastState = null;
+  let pinnedToLatest = true;
+  let painted = false;
+  let stream = null;
+  let stopped = false;
+  let targetTimer = null;
+
+  root.innerHTML = `
+    <div class="sl-wrap sl-transcript">
+      <div class="sl-banner" hidden></div>
+      <div class="sl-stream">
+        <div class="sl-empty">Connecting to Slack…</div>
+        <div class="sl-entries"></div>
+      </div>
+      <button class="sl-jump" hidden>↓ New messages</button>
+    </div>`;
+  const wrap = root.querySelector('.sl-wrap');
+  const banner = root.querySelector('.sl-banner');
+  const streamEl = root.querySelector('.sl-stream');
+  const entriesEl = root.querySelector('.sl-entries');
+  const emptyEl = root.querySelector('.sl-empty');
+  const jumpBtn = root.querySelector('.sl-jump');
+
+  /* title-bar controls */
+  function bumpTextSize(delta) {
+    moduleApi.saveInstanceSettings({ textSize: Math.min(48, Math.max(10, textSizePx(moduleApi) + delta)) });
+    applyInstanceSettings();
+  }
+  moduleApi.header.addButton({ icon: MINUS_SVG, title: 'Smaller text', onClick: () => bumpTextSize(-1) });
+  moduleApi.header.addButton({ icon: PLUS_SVG, title: 'Larger text', onClick: () => bumpTextSize(1) });
+  moduleApi.header.addButton({
+    icon: JUMP_SVG,
+    title: 'Latest',
+    onClick() {
+      pinnedToLatest = true;
+      jumpBtn.hidden = true;
+      scrollToLatest();
+    },
+  });
+
+  function applyInstanceSettings() {
+    const s = moduleApi.instanceSettings;
+    wrap.style.setProperty('--sl-size', textSizePx(moduleApi) + 'px');
+    wrap.classList.toggle('hide-avatars', s.showAvatars === false);
+    wrap.classList.toggle('show-times', s.showTimes !== false);
+    wrap.classList.toggle('show-names', s.showNames !== false);
+    wrap.classList.toggle('show-system', s.showSystem !== false);
+    if (pinnedToLatest) scrollToLatest();
+  }
+  applyInstanceSettings();
+
+  /* scrolling */
+  streamEl.addEventListener('scroll', () => {
+    const near = streamEl.scrollHeight - streamEl.scrollTop - streamEl.clientHeight < 60;
+    pinnedToLatest = near;
+    if (near) jumpBtn.hidden = true;
+  });
+  jumpBtn.addEventListener('click', () => {
+    pinnedToLatest = true;
+    jumpBtn.hidden = true;
+    scrollToLatest();
+  });
+  function scrollToLatest() {
+    streamEl.scrollTop = streamEl.scrollHeight;
+  }
+
+  /* the send target: a click anywhere in the body points the senders here */
+  wrap.addEventListener('click', () => {
+    if (!channelId || !lastState?.channels?.[channelId]) return; // not configured — can't be a target
+    sendTarget.select(channelId);
+  });
+  const offTarget = sendTarget.on(() => {
+    // Coalesce: a remount detaches and re-attaches within a few ms.
+    clearTimeout(targetTimer);
+    targetTimer = setTimeout(paintTarget, 50);
+  });
+  // Custom emoji images and reaction glyphs need the table: redraw once it is here (or changes).
+  const offEmoji = emojiStore.on(() => {
+    if (stopped) return;
+    for (const e of entries.values()) e.sig = '';
+    if (lastState) applyState(lastState);
+  });
+
+  function isTarget() {
+    return Boolean(channelId) && sendTarget.resolve(lastState?.channelOrder) === channelId;
+  }
+
+  function paintTarget() {
+    if (stopped) return;
+    const on = isTarget();
+    if (on === wrap.classList.contains('is-target')) return;
+    wrap.classList.toggle('is-target', on);
+    if (lastState) reportStatus(lastState);
+  }
+
+  /* entries — laid out like the ProdCom transcript: a square picture on the
+     left, then the name line with its time, the text, the reactions */
+  const messagesByTs = new Map(); // ts → message (replies too), for the reaction menu
+
+  function hueOf(name) {
+    let h = 0;
+    for (const c of String(name || '')) h = (h * 31 + c.codePointAt(0)) % 360;
+    return h;
+  }
+
+  function initialsOf(name) {
+    const parts = String(name || '').trim().split(/\s+/).filter(Boolean);
+    if (!parts.length) return '?';
+    const first = [...parts[0]][0] || '';
+    const last = parts.length > 1 ? [...parts[parts.length - 1]][0] || '' : '';
+    return (first + last).toUpperCase();
+  }
+
+  function buildAvatar(m) {
+    const av = el('span', 'sl-avatar');
+    av.style.setProperty('--sl-hue', String(hueOf(m.name)));
+    if (m.avatarEmoji) {
+      av.appendChild(el('span', 'sl-avatar-emoji', m.avatarEmoji));
+      return av;
+    }
+    const initials = () => {
+      av.textContent = '';
+      av.appendChild(el('span', 'sl-avatar-initials', initialsOf(m.name)));
+    };
+    if (m.avatar) {
+      const img = el('img', 'sl-avatar-img');
+      img.alt = '';
+      img.loading = 'lazy';
+      img.draggable = false;
+      img.addEventListener('error', initials, { once: true });
+      img.src = apiUrl(`/avatar/${m.avatar}`);
+      av.appendChild(img);
+    } else initials();
+    return av;
+  }
+
+  function buildMeta(m) {
+    const meta = el('div', 'sl-meta');
+    meta.append(el('span', 'sl-name', m.name || ''), el('span', 'sl-time', fmtTime(m.time)));
+    return meta;
+  }
+
+  function buildReactions(m) {
+    const row = el('div', 'sl-reactions');
+    for (const r of m.reactions) {
+      const pill = el('button', 'sl-reaction' + (r.me ? ' is-me' : ''));
+      pill.type = 'button';
+      pill.title = `:${r.name}: — ${r.me ? 'you reacted; click to take it back' : 'click to react too'}`;
+      pill.append(emojiStore.node(r.name), el('span', 'sl-reaction-count', String(r.count)));
+      pill.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const rect = pill.getBoundingClientRect();
+        openReactionMenu(m, rect.left, rect.bottom + 4, { code: r.name, remove: Boolean(r.me) });
+      });
+      row.appendChild(pill);
+    }
+    return row;
+  }
+
+  /** A message or a thread reply as one row; returns the row and its body (replies nest in the body). */
+  function buildLine(m, reply = false) {
+    const line = el('div', reply ? 'sl-reply' : 'sl-row');
+    line.dataset.ts = m.ts;
+    line.classList.toggle('sl-me', Boolean(m.me));
+    line.classList.toggle('sl-bot', Boolean(m.bot));
+    const body = el('div', 'sl-body');
+    body.appendChild(buildMeta(m));
+    const text = el('div', 'sl-text');
+    renderRich(text, m.text);
+    if (m.edited) text.appendChild(el('span', 'sl-edited', ' (edited)'));
+    body.appendChild(text);
+    if (Array.isArray(m.reactions) && m.reactions.length) body.appendChild(buildReactions(m));
+    line.append(buildAvatar(m), body);
+    return { line, body };
+  }
+
+  function buildEntry(m) {
+    const node = el('div', 'sl-entry');
+    node.dataset.ts = m.ts;
+    return { el: node, sig: '' };
+  }
+
+  function fillEntry(entry, m) {
+    const sig = JSON.stringify(m);
+    if (sig === entry.sig) return;
+    entry.sig = sig;
+    const node = entry.el;
+    node.textContent = '';
+    node.classList.toggle('sl-system', Boolean(m.system));
+    node.classList.toggle('sl-me', Boolean(m.me));
+    if (m.system) {
+      const line = el('div', 'sl-sysline');
+      line.append(el('span', 'sl-time', fmtTime(m.time)), el('span', 'sl-systext', m.text || ''));
+      node.appendChild(line);
+      return;
+    }
+    const { line, body } = buildLine(m);
+    node.appendChild(line);
+    if (Array.isArray(m.replies)) {
+      if (m.replies.length) {
+        const list = el('div', 'sl-replies');
+        for (const r of m.replies) list.appendChild(buildLine(r, true).line);
+        body.appendChild(list);
+      }
+    } else if (m.replyCount > 0) {
+      body.appendChild(el('div', 'sl-replycount', `${m.replyCount} ${m.replyCount === 1 ? 'reply' : 'replies'}`));
+    }
+  }
+
+  /* reactions: a right-click on a row, or a click on a pill, opens the menu */
+  function openReactionMenu(m, x, y, pending = null) {
+    if (!channelId || !lastState?.channels?.[channelId]) return;
+    emojiMenu.open({
+      moduleApi,
+      x,
+      y,
+      channel: channelId,
+      ts: m.ts,
+      quick: lastState.quickEmojis || [],
+      sendingAs: lastState.sendingAs || '',
+      pinLength: Number(lastState.pinLength) || 0,
+      pending,
+    });
+  }
+  entriesEl.addEventListener('contextmenu', (e) => {
+    const line = e.target.closest('.sl-row, .sl-reply');
+    if (!line || !entriesEl.contains(line)) return;
+    const m = messagesByTs.get(line.dataset.ts);
+    if (!m) return;
+    e.preventDefault();
+    openReactionMenu(m, e.clientX, e.clientY);
+  });
+
+  function renderMessages(list) {
+    const seen = new Set();
+    let prev = null;
+    let added = 0;
+    messagesByTs.clear();
+    for (const m of list) {
+      if (!m || !m.ts) continue;
+      seen.add(m.ts);
+      messagesByTs.set(m.ts, m);
+      if (Array.isArray(m.replies)) for (const r of m.replies) if (r?.ts) messagesByTs.set(r.ts, r);
+      let entry = entries.get(m.ts);
+      if (!entry) {
+        entry = buildEntry(m);
+        entries.set(m.ts, entry);
+        if (painted) entry.el.classList.add('sl-new');
+        added += 1;
+      }
+      fillEntry(entry, m);
+      const node = entry.el;
+      // Keep DOM order equal to list order without re-inserting settled nodes
+      // (a move would replay the fade-in).
+      if (prev ? node.previousElementSibling !== prev : node !== entriesEl.firstElementChild) {
+        if (prev) prev.after(node);
+        else entriesEl.prepend(node);
+      }
+      prev = node;
+    }
+    for (const [ts, entry] of entries) {
+      if (seen.has(ts)) continue;
+      entry.el.remove();
+      entries.delete(ts);
+    }
+    if (pinnedToLatest) scrollToLatest();
+    else if (added) jumpBtn.hidden = false;
+  }
+
+  /** The status dot, banner and empty-state text for the current state. */
+  function reportStatus(s) {
+    const ch = channelId && s.channels && typeof s.channels === 'object' ? s.channels[channelId] : null;
+    const hasEntries = entries.size > 0;
+    const who = s.identity?.name ? ` as ${s.identity.name}` : '';
+    let problem = '';
+    if (!channelId) problem = NO_CHANNEL;
+    else if (!ch) problem = `#${channelId} is no longer one of this module's channels — pick it again in Admin → Slack → Channels, or remove this tile`;
+    if (problem) {
+      moduleApi.setStatus('error', problem);
+      banner.hidden = true;
+      emptyEl.hidden = false;
+      emptyEl.textContent = problem;
+      emptyEl.classList.add('is-error');
+      return;
+    }
+    const chan = `#${ch.name || channelId}`;
+    const st = ch.status || {};
+    if (st.state === 'ok') {
+      moduleApi.setStatus('ok', `Live — ${chan}${who}${isTarget() ? ' · sends go here' : ''}`);
+      banner.hidden = true;
+    } else {
+      moduleApi.setStatus(st.state === 'error' ? 'error' : 'connecting', st.message || 'Connecting to Slack…');
+      // With messages on screen the problem rides in a banner; with none,
+      // the empty state says it, once.
+      banner.textContent = st.message || 'Connecting to Slack…';
+      banner.classList.toggle('is-error', st.state === 'error');
+      banner.hidden = !hasEntries;
+    }
+    emptyEl.hidden = hasEntries;
+    if (!hasEntries) {
+      emptyEl.textContent = st.state !== 'ok' ? (st.message || 'Connecting to Slack…') : `No messages yet in ${chan}`;
+      emptyEl.classList.toggle('is-error', st.state === 'error');
+    }
+  }
+
+  function applyState(s) {
+    if (stopped || !s || typeof s !== 'object') return;
+    lastState = s;
+    emojiStore.sync(moduleApi, s.emojiVersion);
+    const order = Array.isArray(s.channelOrder) ? s.channelOrder.map(String) : [];
+    channelId = pinnedChannel || order[0] || '';
+    const ch = channelId && s.channels && typeof s.channels === 'object' ? s.channels[channelId] : null;
+    // Registered while its channel is configured: that is what makes it a
+    // possible send target (see sendTarget.resolve).
+    if (ch) sendTarget.attach(moduleApi.instanceId, channelId);
+    else sendTarget.detach(moduleApi.instanceId);
+    renderMessages(ch && Array.isArray(ch.messages) ? ch.messages : []);
+    wrap.classList.toggle('is-target', isTarget());
+    reportStatus(s);
+    painted = true;
+  }
+
+  async function loadState() {
+    try {
+      const res = await moduleApi.fetch('/state');
+      if (!res.ok) throw new Error(String(res.status));
+      applyState(await res.json());
+    } catch {
+      /* the stream's next frame paints; the error handler reports the outage */
+    }
+  }
+
+  function connect() {
+    stream = moduleApi.sse('/stream', {
+      open() {
+        // Tiles share one stream; a late joiner missed its first frame, and a
+        // reconnect may have missed changes — a snapshot covers both.
+        loadState();
+      },
+      error() {
+        moduleApi.setStatus('error', 'ProdDash Slack module unreachable — reconnecting…');
+        banner.textContent = 'ProdDash Slack module unreachable — reconnecting…';
+        banner.classList.add('is-error');
+        banner.hidden = entries.size === 0;
+        if (!entries.size) {
+          emptyEl.textContent = 'ProdDash Slack module unreachable — reconnecting…';
+          emptyEl.classList.add('is-error');
+        }
+      },
+      events: {
+        state(e) {
+          try {
+            applyState(JSON.parse(e.data));
+          } catch { /* a bad frame is skipped */ }
+        },
+      },
+    });
+  }
+
+  return {
+    start() {
+      moduleApi.setStatus('connecting', 'Connecting to Slack…');
+      connect();
+    },
+    stop() {
+      stopped = true;
+      clearTimeout(targetTimer);
+      offTarget();
+      offEmoji();
+      emojiMenu.close();
+      sendTarget.detach(moduleApi.instanceId);
+      stream?.close();
+      root.innerHTML = ''; // header controls are removed by the shell
+    },
+    onResize() {
+      if (pinnedToLatest) scrollToLatest();
+    },
+  };
+}
+
+/* ── send + quick replies ───────────────────────────────────────────── */
+
+function createSendTile({ root, moduleApi, mode }) {
+  let token = unlockStore.get(); // the page's unlock (unlockStore) — memory only, gone on reload
+  let state = null;        // latest snapshot: sending flags, identity, channels, status
+  let stream = null;
+  let ticker = null;
+  let stopped = false;
+  let busy = false;
+  let gateNote = '';       // one line under the pad ("Locked after inactivity")
+  let gateError = '';      // the server's refusal ("Wrong PIN", "locked for 30 s")
+  let gateKind = '';       // what the gate currently shows, to avoid needless rebuilds
+  let presets = null;
+  let targetTimer = null;
+
+  root.innerHTML = `
+    <div class="sl-wrap sl-send" tabindex="0">
+      <div class="sl-gate"></div>
+      <div class="sl-compose" hidden></div>
+    </div>`;
+  const wrap = root.querySelector('.sl-wrap');
+  const gate = root.querySelector('.sl-gate');
+  const compose = root.querySelector('.sl-compose');
+
+  const lockBtn = moduleApi.header.addButton({ icon: LOCK_SVG, title: 'Lock', onClick: () => lock('Locked') });
+  lockBtn.style.display = 'none';
+
+  function applyInstanceSettings() {
+    wrap.style.setProperty('--sl-size', textSizePx(moduleApi) + 'px');
+  }
+  applyInstanceSettings();
+
+  /* ── where a send goes ── */
+  function configured() {
+    return Array.isArray(state?.channelOrder) ? state.channelOrder.map(String) : [];
+  }
+
+  function targetId() {
+    return sendTarget.resolve(configured());
+  }
+
+  function targetName() {
+    const id = targetId();
+    if (!id) return '';
+    const ch = state?.channels?.[id];
+    return `#${ch?.name || id}`;
+  }
+
+  function sendingLine() {
+    if (state && !configured().length) return NO_CHANNEL;
+    const who = state?.sendingAs || '…';
+    return `Sending as ${who} → ${targetName() || '…'}`;
+  }
+
+  function placeholder() {
+    const name = targetName();
+    return name ? `Message ${name}…` : 'Message…';
+  }
+
+  /** The selection changed somewhere on the page: every line that names the target follows. */
+  function repaintTarget() {
+    if (stopped || !state) return;
+    if (token) {
+      if (composeEls) {
+        composeEls.line.textContent = sendingLine();
+        if (composeEls.input) composeEls.input.placeholder = placeholder();
+      }
+    } else renderGate();
+    moduleApi.setStatus(statusState(), `${statusMessage()} · ${token ? 'unlocked' : 'locked'}`);
+  }
+  const offTarget = sendTarget.on(() => {
+    clearTimeout(targetTimer);
+    targetTimer = setTimeout(repaintTarget, 50);
+  });
+  // Another Slack tile (or the reaction menu) unlocked or locked the page.
+  const offUnlock = unlockStore.on(() => {
+    if (stopped) return;
+    const t = unlockStore.get();
+    if (t && t !== token) {
+      token = t;
+      gateNote = '';
+      gateError = '';
+      showCompose();
+    } else if (!t && token) lock(unlockStore.reason() || 'Locked', true);
+  });
+
+  function authHeaders(extra = {}) {
+    return { Authorization: `Bearer ${token}`, ...extra };
+  }
+
+  /* ── the gate: a PIN pad, or the reason there isn't one ── */
+  function renderGate() {
+    compose.hidden = true;
+    gate.hidden = false;
+    lockBtn.style.display = 'none';
+    let kind;
+    if (!state) kind = 'connecting';
+    else if (!state.sending?.enabled) kind = 'off';
+    else if (!state.sending?.pinSet) kind = 'nopin';
+    else if (!configured().length) kind = 'nochannel';
+    else kind = 'pad';
+    if (kind !== gateKind) {
+      gateKind = kind;
+      gate.textContent = '';
+      if (kind === 'pad') {
+        pinPad = createPinPad({
+          moduleApi,
+          subtitle: () => sendingLine().replace(/^Sending/, 'sending'),
+          pinLength: () => Number(state?.pinLength) || 0,
+          onUnlocked() {
+            token = unlockStore.get();
+            gateNote = '';
+            gateError = '';
+            showCompose();
+          },
+        });
+        gate.appendChild(pinPad.el);
+      } else {
+        const note = el('div', 'sl-note');
+        note.textContent = kind === 'connecting' ? 'Connecting to ProdDash…'
+          : kind === 'off' ? 'Sending is off — turn it on in Admin → Slack → Sending'
+            : kind === 'nopin' ? 'Set a PIN in Admin → Slack → Sending'
+              : NO_CHANNEL;
+        gate.appendChild(note);
+      }
+    }
+    if (kind === 'pad' && pinPad) {
+      pinPad.setNote(gateError || gateNote);
+      pinPad.refresh();
+    }
+  }
+
+  let pinPad = null;
+  wrap.addEventListener('keydown', (e) => {
+    if (!gate.hidden && gateKind === 'pad' && pinPad) pinPad.onKey(e);
+  });
+
+  /* ── unlocked: compose or the preset grid ── */
+  let composeEls = null;
+  function buildCompose() {
+    compose.textContent = '';
+    const head = el('div', 'sl-compose-head');
+    const line = el('span', 'sl-sending', sendingLine());
+    const lockLink = el('button', 'sl-lock-link', 'Lock');
+    lockLink.type = 'button';
+    lockLink.title = 'Lock now';
+    lockLink.addEventListener('click', () => lock('Locked'));
+    head.append(line, lockLink);
+    compose.appendChild(head);
+
+    const foot = el('div', 'sl-compose-foot');
+    const msg = el('div', 'sl-msg');
+    const countdown = el('span', 'sl-countdown');
+    countdown.hidden = true;
+    let input = null;
+    let sendBtn = null;
+    let grid = null;
+
+    if (mode === 'send') {
+      input = el('textarea', 'sl-input');
+      input.rows = 3;
+      input.placeholder = placeholder();
+      input.spellcheck = true;
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendText();
+        }
+      });
+      compose.appendChild(input);
+      sendBtn = el('button', 'sl-sendbtn', 'Send');
+      sendBtn.type = 'button';
+      sendBtn.addEventListener('click', sendText);
+      // The admin's quick emojis: one press sends one, no confirmation.
+      const quick = el('div', 'sl-emoji-sendrow');
+      for (const q of Array.isArray(state?.quickEmojis) ? state.quickEmojis : []) {
+        const label = q.char || `:${q.name}:`;
+        const b = el('button', 'sl-emoji-send');
+        b.type = 'button';
+        b.title = `Send ${label}`;
+        b.setAttribute('aria-label', `Send ${label}`);
+        b.appendChild(q.name && (!q.char || emojiStore.isCustom(q.name)) ? emojiStore.node(q.name) : el('span', 'sl-emoji-char', q.char));
+        b.addEventListener('click', () => sendEmoji(q, b));
+        quick.appendChild(b);
+      }
+      foot.append(msg, countdown, quick, sendBtn);
+    } else {
+      grid = el('div', 'sl-grid');
+      compose.appendChild(grid);
+      foot.append(msg, countdown);
+    }
+    compose.appendChild(foot);
+    composeEls = { line, msg, countdown, input, sendBtn, grid };
+  }
+
+  async function showCompose() {
+    buildCompose();
+    gate.hidden = true;
+    compose.hidden = false;
+    lockBtn.style.display = '';
+    moduleApi.setStatus(statusState(), `${statusMessage()} · unlocked`);
+    if (mode === 'quick') await loadPresets();
+    else composeEls.input?.focus();
+    tickLock();
+  }
+
+  function flash(text) {
+    if (!composeEls) return;
+    composeEls.msg.textContent = text;
+    composeEls.msg.className = 'sl-msg is-flash';
+    clearTimeout(flash.timer);
+    flash.timer = setTimeout(() => {
+      if (composeEls && composeEls.msg.textContent === text) {
+        composeEls.msg.textContent = '';
+        composeEls.msg.className = 'sl-msg';
+      }
+    }, 1800);
+  }
+
+  function showError(text) {
+    if (!composeEls) return;
+    clearTimeout(flash.timer);
+    composeEls.msg.textContent = text;
+    composeEls.msg.className = 'sl-msg is-error';
+  }
+
+  /** POST one message to the selected channel; true when it landed. */
+  async function postText(text, what) {
+    const channel = targetId();
+    if (!channel) {
+      showError(NO_CHANNEL);
+      return false;
+    }
+    try {
+      const res = await moduleApi.fetch('/send', {
+        method: 'POST',
+        headers: authHeaders({ 'Content-Type': 'application/json' }),
+        body: JSON.stringify({ text, channel }),
+      });
+      const body = await readJson(res);
+      if (res.status === 401) {
+        lock(body.error || 'Locked — enter the PIN', true);
+        return false;
+      }
+      if (!res.ok) {
+        showError(body.error || `Send failed (HTTP ${res.status})`);
+        return false;
+      }
+      unlockStore.touch(body.expiresAt);
+      flash(`Sent ${what || ''}to ${body.channel || targetName()} ✓`);
+      return true;
+    } catch {
+      showError('ProdDash unreachable — not sent');
+      return false;
+    }
+  }
+
+  async function sendText() {
+    if (busy || !composeEls?.input) return;
+    const text = composeEls.input.value.trim();
+    if (!text) return;
+    busy = true;
+    composeEls.sendBtn.disabled = true;
+    try {
+      if (await postText(text)) composeEls.input.value = '';
+    } finally {
+      busy = false;
+      if (composeEls?.sendBtn) {
+        composeEls.sendBtn.disabled = false;
+        composeEls.input?.focus();
+      }
+    }
+  }
+
+  /** A quick emoji: the character (or :code: for a custom one) as a message of its own. */
+  async function sendEmoji(q, btn) {
+    if (busy) return;
+    busy = true;
+    btn.disabled = true;
+    btn.classList.add('is-busy');
+    try {
+      const text = q.char || `:${q.name}:`;
+      if (await postText(text, `${text} `)) {
+        btn.classList.add('is-sent');
+        setTimeout(() => btn.classList.remove('is-sent'), 900);
+      }
+    } finally {
+      busy = false;
+      btn.disabled = false;
+      btn.classList.remove('is-busy');
+      composeEls?.input?.focus();
+    }
+  }
+
+  async function loadPresets() {
+    if (!composeEls?.grid) return;
+    composeEls.grid.textContent = '';
+    composeEls.grid.appendChild(el('div', 'sl-note', 'Loading…'));
+    try {
+      const res = await moduleApi.fetch('/quick', { headers: authHeaders() });
+      const body = await readJson(res);
+      if (res.status === 401) return void lock(body.error || 'Locked — enter the PIN', true);
+      if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
+      presets = Array.isArray(body.presets) ? body.presets : [];
+      unlockStore.touch(body.expiresAt);
+      renderPresets();
+    } catch (err) {
+      composeEls.grid.textContent = '';
+      const note = el('div', 'sl-note is-error', `Could not load quick replies — ${err.message}`);
+      composeEls.grid.appendChild(note);
+    }
+  }
+
+  function renderPresets() {
+    if (!composeEls?.grid) return;
+    const grid = composeEls.grid;
+    grid.textContent = '';
+    if (!presets.length) {
+      grid.appendChild(el('div', 'sl-note', 'No quick replies yet — add some in Admin → Slack → Sending'));
+      return;
+    }
+    for (const p of presets) {
+      const b = el('button', 'sl-quick');
+      b.type = 'button';
+      b.appendChild(el('span', 'sl-quick-label', p.label));
+      // A preset bound to its own channel says so — it ignores the selection.
+      if (p.channel) b.appendChild(el('span', 'sl-quick-chan', `→ ${p.channel}`));
+      b.addEventListener('click', () => sendQuick(p.index, b));
+      grid.appendChild(b);
+    }
+  }
+
+  async function sendQuick(index, btn) {
+    if (busy) return;
+    busy = true;
+    btn.disabled = true;
+    btn.classList.add('is-busy');
+    try {
+      const channel = targetId();
+      const res = await moduleApi.fetch('/quick', {
+        method: 'POST',
+        headers: authHeaders({ 'Content-Type': 'application/json' }),
+        body: JSON.stringify(channel ? { index, channel } : { index }),
+      });
+      const body = await readJson(res);
+      if (res.status === 401) return void lock(body.error || 'Locked — enter the PIN', true);
+      if (!res.ok) return void showError(body.error || `Send failed (HTTP ${res.status})`);
+      unlockStore.touch(body.expiresAt);
+      if (composeEls) {
+        composeEls.msg.textContent = '';
+        composeEls.msg.className = 'sl-msg';
+      }
+      btn.classList.remove('is-busy');
+      btn.classList.add('is-sent');
+      const label = btn.querySelector('.sl-quick-label');
+      const original = label.textContent;
+      label.textContent = 'Sent ✓';
+      flash(`Sent to ${body.channel || targetName()} ✓`);
+      setTimeout(() => {
+        if (!btn.isConnected) return;
+        label.textContent = original;
+        btn.classList.remove('is-sent');
+      }, 1000);
+    } catch {
+      showError('ProdDash unreachable — not sent');
+    } finally {
+      busy = false;
+      btn.disabled = false;
+      btn.classList.remove('is-busy');
+    }
+  }
+
+  /* ── locking ── */
+  function lock(note, fromServer = false) {
+    const had = token;
+    token = '';
+    presets = null;
+    composeEls = null;
+    compose.textContent = '';
+    if (had && !fromServer) {
+      moduleApi.fetch('/lock', { method: 'POST', headers: { Authorization: `Bearer ${had}` } }).catch(() => {});
+    }
+    if (had) unlockStore.clear(note || 'Locked'); // every Slack tile on the page locks with this one
+    gateNote = note || '';
+    gateError = '';
+    gateKind = ''; // rebuild the pad fresh
+    pinPad = null;
+    renderGate();
+    moduleApi.setStatus(statusState(), `${statusMessage()} · locked`);
+  }
+
+  function tickLock() {
+    if (!token) return;
+    const left = unlockStore.expiresAt() - Date.now();
+    if (left <= 0) return void lock('Locked after inactivity');
+    if (composeEls) {
+      const cd = composeEls.countdown;
+      if (left < 60000) {
+        const s = Math.ceil(left / 1000);
+        cd.textContent = `Locks in 0:${String(s).padStart(2, '0')}`;
+        cd.hidden = false;
+      } else cd.hidden = true;
+    }
+  }
+
+  /* ── server state ── */
+  function statusState() {
+    const st = state?.status?.state;
+    return st === 'ok' || st === 'connecting' || st === 'error' ? st : 'connecting';
+  }
+  function statusMessage() {
+    if (state?.status?.state === 'ok') return sendingLine();
+    return state?.status?.message || 'Connecting to Slack…';
+  }
+
+  function applyState(s) {
+    if (stopped || !s || typeof s !== 'object') return;
+    state = s;
+    emojiStore.sync(moduleApi, s.emojiVersion);
+    moduleApi.setStatus(statusState(), `${statusMessage()} · ${token ? 'unlocked' : 'locked'}`);
+    if (token) {
+      // Sending switched off or the PIN removed while unlocked: the server
+      // will refuse the next send; say so now instead of on failure.
+      if (!s.sending?.enabled || !s.sending?.pinSet) return void lock('');
+      if (!composeEls) return void showCompose(); // the page was unlocked before this tile appeared
+      if (composeEls) {
+        composeEls.line.textContent = sendingLine();
+        if (composeEls.input) composeEls.input.placeholder = placeholder();
+      }
+    } else renderGate();
+  }
+
+  async function loadState() {
+    try {
+      const res = await moduleApi.fetch('/state');
+      if (!res.ok) throw new Error(String(res.status));
+      applyState(await res.json());
+    } catch { /* the stream paints */ }
+  }
+
+  function connect() {
+    stream = moduleApi.sse('/stream', {
+      open() { loadState(); },
+      error() {
+        moduleApi.setStatus('error', 'ProdDash Slack module unreachable — reconnecting…');
+      },
+      events: {
+        state(e) {
+          try {
+            applyState(JSON.parse(e.data));
+          } catch { /* skip a bad frame */ }
+        },
+      },
+    });
+  }
+
+  return {
+    start() {
+      moduleApi.setStatus('connecting', 'Connecting to Slack…');
+      token = unlockStore.get();
+      renderGate();
+      connect();
+      ticker = setInterval(tickLock, 1000);
+    },
+    stop() {
+      stopped = true;
+      clearInterval(ticker);
+      clearTimeout(flash.timer);
+      clearTimeout(targetTimer);
+      offTarget();
+      offUnlock();
+      stream?.close();
+      root.innerHTML = ''; // the page's unlock outlives a remount; a reload asks again
+    },
+  };
+}
diff --git a/modules/slack/emoji.json b/modules/slack/emoji.json
new file mode 100644
index 0000000..8adcf92
--- /dev/null
+++ b/modules/slack/emoji.json
@@ -0,0 +1 @@
+{"source":"iamcal/emoji-data (MIT) — short names → emoji; :name::skin-tone-N: appends the modifier","names":{"100":"💯","1234":"🔢","+1":"👍","-1":"👎","8ball":"🎱","a":"🅰️","ab":"🆎","abacus":"🧮","abc":"🔤","abcd":"🔡","accept":"🉑","accordion":"🪗","adhesive_bandage":"🩹","admission_tickets":"🎟️","adult":"🧑","aerial_tramway":"🚡","airplane":"✈️","airplane_arriving":"🛬","airplane_departure":"🛫","alarm_clock":"⏰","alembic":"⚗️","alien":"👽","ambulance":"🚑","amphora":"🏺","anatomical_heart":"🫀","anchor":"⚓","angel":"👼","anger":"💢","angry":"😠","anguished":"😧","ant":"🐜","apple":"🍎","aquarius":"♒","aries":"♈","arrow_backward":"◀️","arrow_double_down":"⏬","arrow_double_up":"⏫","arrow_down":"⬇️","arrow_down_small":"🔽","arrow_forward":"▶️","arrow_heading_down":"⤵️","arrow_heading_up":"⤴️","arrow_left":"⬅️","arrow_lower_left":"↙️","arrow_lower_right":"↘️","arrow_right":"➡️","arrow_right_hook":"↪️","arrow_up":"⬆️","arrow_up_down":"↕️","arrow_up_small":"🔼","arrow_upper_left":"↖️","arrow_upper_right":"↗️","arrows_clockwise":"🔃","arrows_counterclockwise":"🔄","art":"🎨","articulated_lorry":"🚛","artist":"🧑‍🎨","astonished":"😲","astronaut":"🧑‍🚀","athletic_shoe":"👟","atm":"🏧","atom_symbol":"⚛️","auto_rickshaw":"🛺","avocado":"🥑","axe":"🪓","b":"🅱️","baby":"👶","baby_bottle":"🍼","baby_chick":"🐤","baby_symbol":"🚼","back":"🔙","bacon":"🥓","badger":"🦡","badminton_racquet_and_shuttlecock":"🏸","bagel":"🥯","baggage_claim":"🛄","baguette_bread":"🥖","bald_man":"👨‍🦲","bald_person":"🧑‍🦲","bald_woman":"👩‍🦲","ballet_shoes":"🩰","balloon":"🎈","ballot_box_with_ballot":"🗳️","ballot_box_with_check":"☑️","bamboo":"🎍","banana":"🍌","bangbang":"‼️","banjo":"🪕","bank":"🏦","bar_chart":"📊","barber":"💈","barely_sunny":"🌥️","baseball":"⚾","basket":"🧺","basketball":"🏀","bat":"🦇","bath":"🛀","bathtub":"🛁","battery":"🔋","beach_with_umbrella":"🏖️","beans":"🫘","bear":"🐻","bearded_person":"🧔","beaver":"🦫","bed":"🛏️","bee":"🐝","beer":"🍺","beers":"🍻","beetle":"🪲","beginner":"🔰","bell":"🔔","bell_pepper":"🫑","bellhop_bell":"🛎️","bento":"🍱","beverage_box":"🧃","bicyclist":"🚴","bike":"🚲","bikini":"👙","billed_cap":"🧢","biohazard_sign":"☣️","bird":"🐦","birthday":"🎂","bison":"🦬","biting_lip":"🫦","black_bird":"🐦‍⬛","black_cat":"🐈‍⬛","black_circle":"⚫","black_circle_for_record":"⏺️","black_heart":"🖤","black_joker":"🃏","black_large_square":"⬛","black_left_pointing_double_triangle_with_vertical_bar":"⏮️","black_medium_small_square":"◾","black_medium_square":"◼️","black_nib":"✒️","black_right_pointing_double_triangle_with_vertical_bar":"⏭️","black_right_pointing_triangle_with_double_vertical_bar":"⏯️","black_small_square":"▪️","black_square_button":"🔲","black_square_for_stop":"⏹️","blond-haired-man":"👱‍♂️","blond-haired-woman":"👱‍♀️","blossom":"🌼","blowfish":"🐡","blue_book":"📘","blue_car":"🚙","blue_heart":"💙","blueberries":"🫐","blush":"😊","boar":"🐗","boat":"⛵","bomb":"💣","bone":"🦴","book":"📖","bookmark":"🔖","bookmark_tabs":"📑","books":"📚","boom":"💥","boomerang":"🪃","boot":"👢","bouquet":"💐","bow":"🙇","bow_and_arrow":"🏹","bowl_with_spoon":"🥣","bowling":"🎳","boxing_glove":"🥊","boy":"👦","brain":"🧠","bread":"🍞","breast-feeding":"🤱","bricks":"🧱","bride_with_veil":"👰","bridge_at_night":"🌉","briefcase":"💼","briefs":"🩲","broccoli":"🥦","broken_chain":"⛓️‍💥","broken_heart":"💔","broom":"🧹","brown_heart":"🤎","brown_mushroom":"🍄‍🟫","bubble_tea":"🧋","bubbles":"🫧","bucket":"🪣","bug":"🐛","building_construction":"🏗️","bulb":"💡","bullettrain_front":"🚅","bullettrain_side":"🚄","burrito":"🌯","bus":"🚌","busstop":"🚏","bust_in_silhouette":"👤","busts_in_silhouette":"👥","butter":"🧈","butterfly":"🦋","cactus":"🌵","cake":"🍰","calendar":"📆","call_me_hand":"🤙","calling":"📲","camel":"🐫","camera":"📷","camera_with_flash":"📸","camping":"🏕️","cancer":"♋","candle":"🕯️","candy":"🍬","canned_food":"🥫","canoe":"🛶","capital_abcd":"🔠","capricorn":"♑","car":"🚗","card_file_box":"🗃️","card_index":"📇","card_index_dividers":"🗂️","carousel_horse":"🎠","carpentry_saw":"🪚","carrot":"🥕","cat":"🐱","cat2":"🐈","cd":"💿","chains":"⛓️","chair":"🪑","champagne":"🍾","chart":"💹","chart_with_downwards_trend":"📉","chart_with_upwards_trend":"📈","checkered_flag":"🏁","cheese_wedge":"🧀","cherries":"🍒","cherry_blossom":"🌸","chess_pawn":"♟️","chestnut":"🌰","chicken":"🐔","child":"🧒","children_crossing":"🚸","chipmunk":"🐿️","chocolate_bar":"🍫","chopsticks":"🥢","christmas_tree":"🎄","church":"⛪","cinema":"🎦","circus_tent":"🎪","city_sunrise":"🌇","city_sunset":"🌆","cityscape":"🏙️","cl":"🆑","clap":"👏","clapper":"🎬","classical_building":"🏛️","clinking_glasses":"🥂","clipboard":"📋","clock1":"🕐","clock10":"🕙","clock1030":"🕥","clock11":"🕚","clock1130":"🕦","clock12":"🕛","clock1230":"🕧","clock130":"🕜","clock2":"🕑","clock230":"🕝","clock3":"🕒","clock330":"🕞","clock4":"🕓","clock430":"🕟","clock5":"🕔","clock530":"🕠","clock6":"🕕","clock630":"🕡","clock7":"🕖","clock730":"🕢","clock8":"🕗","clock830":"🕣","clock9":"🕘","clock930":"🕤","closed_book":"📕","closed_lock_with_key":"🔐","closed_umbrella":"🌂","cloud":"☁️","clown_face":"🤡","clubs":"♣️","cn":"🇨🇳","coat":"🧥","cockroach":"🪳","cocktail":"🍸","coconut":"🥥","coffee":"☕","coffin":"⚰️","coin":"🪙","cold_face":"🥶","cold_sweat":"😰","collision":"💥","comet":"☄️","compass":"🧭","compression":"🗜️","computer":"💻","confetti_ball":"🎊","confounded":"😖","confused":"😕","congratulations":"㊗️","construction":"🚧","construction_worker":"👷","control_knobs":"🎛️","convenience_store":"🏪","cook":"🧑‍🍳","cookie":"🍪","cooking":"🍳","cool":"🆒","cop":"👮","copyright":"©️","coral":"🪸","corn":"🌽","couch_and_lamp":"🛋️","couple":"👫","couple_with_heart":"💑","couplekiss":"💏","cow":"🐮","cow2":"🐄","crab":"🦀","credit_card":"💳","crescent_moon":"🌙","cricket":"🦗","cricket_bat_and_ball":"🏏","crocodile":"🐊","croissant":"🥐","crossed_fingers":"🤞","crossed_flags":"🎌","crossed_swords":"⚔️","crown":"👑","crutch":"🩼","cry":"😢","crying_cat_face":"😿","crystal_ball":"🔮","cucumber":"🥒","cup_with_straw":"🥤","cupcake":"🧁","cupid":"💘","curling_stone":"🥌","curly_haired_man":"👨‍🦱","curly_haired_person":"🧑‍🦱","curly_haired_woman":"👩‍🦱","curly_loop":"➰","currency_exchange":"💱","curry":"🍛","custard":"🍮","customs":"🛃","cut_of_meat":"🥩","cyclone":"🌀","dagger_knife":"🗡️","dancer":"💃","dancers":"👯","dango":"🍡","dark_sunglasses":"🕶️","dart":"🎯","dash":"💨","date":"📅","de":"🇩🇪","deaf_man":"🧏‍♂️","deaf_person":"🧏","deaf_woman":"🧏‍♀️","deciduous_tree":"🌳","deer":"🦌","department_store":"🏬","derelict_house_building":"🏚️","desert":"🏜️","desert_island":"🏝️","desktop_computer":"🖥️","diamond_shape_with_a_dot_inside":"💠","diamonds":"♦️","disappointed":"😞","disappointed_relieved":"😥","disguised_face":"🥸","diving_mask":"🤿","diya_lamp":"🪔","dizzy":"💫","dizzy_face":"😵","dna":"🧬","do_not_litter":"🚯","dodo":"🦤","dog":"🐶","dog2":"🐕","dollar":"💵","dolls":"🎎","dolphin":"🐬","donkey":"🫏","door":"🚪","dotted_line_face":"🫥","double_vertical_bar":"⏸️","doughnut":"🍩","dove_of_peace":"🕊️","dragon":"🐉","dragon_face":"🐲","dress":"👗","dromedary_camel":"🐪","drooling_face":"🤤","drop_of_blood":"🩸","droplet":"💧","drum_with_drumsticks":"🥁","duck":"🦆","dumpling":"🥟","dvd":"📀","e-mail":"📧","eagle":"🦅","ear":"👂","ear_of_rice":"🌾","ear_with_hearing_aid":"🦻","earth_africa":"🌍","earth_americas":"🌎","earth_asia":"🌏","egg":"🥚","eggplant":"🍆","eight":"8️⃣","eight_pointed_black_star":"✴️","eight_spoked_asterisk":"✳️","eject":"⏏️","electric_plug":"🔌","elephant":"🐘","elevator":"🛗","elf":"🧝","email":"✉️","empty_nest":"🪹","end":"🔚","envelope":"✉️","envelope_with_arrow":"📩","es":"🇪🇸","euro":"💶","european_castle":"🏰","european_post_office":"🏤","evergreen_tree":"🌲","exclamation":"❗","exploding_head":"🤯","expressionless":"😑","eye":"👁️","eye-in-speech-bubble":"👁️‍🗨️","eyeglasses":"👓","eyes":"👀","face_exhaling":"😮‍💨","face_holding_back_tears":"🥹","face_in_clouds":"😶‍🌫️","face_palm":"🤦","face_vomiting":"🤮","face_with_bags_under_eyes":"🫩","face_with_cowboy_hat":"🤠","face_with_diagonal_mouth":"🫤","face_with_finger_covering_closed_lips":"🤫","face_with_hand_over_mouth":"🤭","face_with_head_bandage":"🤕","face_with_monocle":"🧐","face_with_one_eyebrow_raised":"🤨","face_with_open_eyes_and_hand_over_mouth":"🫢","face_with_open_mouth_vomiting":"🤮","face_with_peeking_eye":"🫣","face_with_raised_eyebrow":"🤨","face_with_rolling_eyes":"🙄","face_with_spiral_eyes":"😵‍💫","face_with_symbols_on_mouth":"🤬","face_with_thermometer":"🤒","facepunch":"👊","factory":"🏭","factory_worker":"🧑‍🏭","fairy":"🧚","falafel":"🧆","fallen_leaf":"🍂","family":"👪","family_adult_adult_child":"🧑‍🧑‍🧒","family_adult_adult_child_child":"🧑‍🧑‍🧒‍🧒","family_adult_child":"🧑‍🧒","family_adult_child_child":"🧑‍🧒‍🧒","farmer":"🧑‍🌾","fast_forward":"⏩","fax":"📠","fearful":"😨","feather":"🪶","feet":"🐾","female-artist":"👩‍🎨","female-astronaut":"👩‍🚀","female-construction-worker":"👷‍♀️","female-cook":"👩‍🍳","female-detective":"🕵️‍♀️","female-doctor":"👩‍⚕️","female-factory-worker":"👩‍🏭","female-farmer":"👩‍🌾","female-firefighter":"👩‍🚒","female-guard":"💂‍♀️","female-judge":"👩‍⚖️","female-mechanic":"👩‍🔧","female-office-worker":"👩‍💼","female-pilot":"👩‍✈️","female-police-officer":"👮‍♀️","female-scientist":"👩‍🔬","female-singer":"👩‍🎤","female-student":"👩‍🎓","female-teacher":"👩‍🏫","female-technologist":"👩‍💻","female_elf":"🧝‍♀️","female_fairy":"🧚‍♀️","female_genie":"🧞‍♀️","female_mage":"🧙‍♀️","female_sign":"♀️","female_superhero":"🦸‍♀️","female_supervillain":"🦹‍♀️","female_vampire":"🧛‍♀️","female_zombie":"🧟‍♀️","fencer":"🤺","ferris_wheel":"🎡","ferry":"⛴️","field_hockey_stick_and_ball":"🏑","file_cabinet":"🗄️","file_folder":"📁","film_frames":"🎞️","film_projector":"📽️","fingerprint":"🫆","fire":"🔥","fire_engine":"🚒","fire_extinguisher":"🧯","firecracker":"🧨","firefighter":"🧑‍🚒","fireworks":"🎆","first_place_medal":"🥇","first_quarter_moon":"🌓","first_quarter_moon_with_face":"🌛","fish":"🐟","fish_cake":"🍥","fishing_pole_and_fish":"🎣","fist":"✊","five":"5️⃣","flag-ac":"🇦🇨","flag-ad":"🇦🇩","flag-ae":"🇦🇪","flag-af":"🇦🇫","flag-ag":"🇦🇬","flag-ai":"🇦🇮","flag-al":"🇦🇱","flag-am":"🇦🇲","flag-ao":"🇦🇴","flag-aq":"🇦🇶","flag-ar":"🇦🇷","flag-as":"🇦🇸","flag-at":"🇦🇹","flag-au":"🇦🇺","flag-aw":"🇦🇼","flag-ax":"🇦🇽","flag-az":"🇦🇿","flag-ba":"🇧🇦","flag-bb":"🇧🇧","flag-bd":"🇧🇩","flag-be":"🇧🇪","flag-bf":"🇧🇫","flag-bg":"🇧🇬","flag-bh":"🇧🇭","flag-bi":"🇧🇮","flag-bj":"🇧🇯","flag-bl":"🇧🇱","flag-bm":"🇧🇲","flag-bn":"🇧🇳","flag-bo":"🇧🇴","flag-bq":"🇧🇶","flag-br":"🇧🇷","flag-bs":"🇧🇸","flag-bt":"🇧🇹","flag-bv":"🇧🇻","flag-bw":"🇧🇼","flag-by":"🇧🇾","flag-bz":"🇧🇿","flag-ca":"🇨🇦","flag-cc":"🇨🇨","flag-cd":"🇨🇩","flag-cf":"🇨🇫","flag-cg":"🇨🇬","flag-ch":"🇨🇭","flag-ci":"🇨🇮","flag-ck":"🇨🇰","flag-cl":"🇨🇱","flag-cm":"🇨🇲","flag-cn":"🇨🇳","flag-co":"🇨🇴","flag-cp":"🇨🇵","flag-cr":"🇨🇷","flag-cu":"🇨🇺","flag-cv":"🇨🇻","flag-cw":"🇨🇼","flag-cx":"🇨🇽","flag-cy":"🇨🇾","flag-cz":"🇨🇿","flag-de":"🇩🇪","flag-dg":"🇩🇬","flag-dj":"🇩🇯","flag-dk":"🇩🇰","flag-dm":"🇩🇲","flag-do":"🇩🇴","flag-dz":"🇩🇿","flag-ea":"🇪🇦","flag-ec":"🇪🇨","flag-ee":"🇪🇪","flag-eg":"🇪🇬","flag-eh":"🇪🇭","flag-england":"🏴󠁧󠁢󠁥󠁮󠁧󠁿","flag-er":"🇪🇷","flag-es":"🇪🇸","flag-et":"🇪🇹","flag-eu":"🇪🇺","flag-fi":"🇫🇮","flag-fj":"🇫🇯","flag-fk":"🇫🇰","flag-fm":"🇫🇲","flag-fo":"🇫🇴","flag-fr":"🇫🇷","flag-ga":"🇬🇦","flag-gb":"🇬🇧","flag-gd":"🇬🇩","flag-ge":"🇬🇪","flag-gf":"🇬🇫","flag-gg":"🇬🇬","flag-gh":"🇬🇭","flag-gi":"🇬🇮","flag-gl":"🇬🇱","flag-gm":"🇬🇲","flag-gn":"🇬🇳","flag-gp":"🇬🇵","flag-gq":"🇬🇶","flag-gr":"🇬🇷","flag-gs":"🇬🇸","flag-gt":"🇬🇹","flag-gu":"🇬🇺","flag-gw":"🇬🇼","flag-gy":"🇬🇾","flag-hk":"🇭🇰","flag-hm":"🇭🇲","flag-hn":"🇭🇳","flag-hr":"🇭🇷","flag-ht":"🇭🇹","flag-hu":"🇭🇺","flag-ic":"🇮🇨","flag-id":"🇮🇩","flag-ie":"🇮🇪","flag-il":"🇮🇱","flag-im":"🇮🇲","flag-in":"🇮🇳","flag-io":"🇮🇴","flag-iq":"🇮🇶","flag-ir":"🇮🇷","flag-is":"🇮🇸","flag-it":"🇮🇹","flag-je":"🇯🇪","flag-jm":"🇯🇲","flag-jo":"🇯🇴","flag-jp":"🇯🇵","flag-ke":"🇰🇪","flag-kg":"🇰🇬","flag-kh":"🇰🇭","flag-ki":"🇰🇮","flag-km":"🇰🇲","flag-kn":"🇰🇳","flag-kp":"🇰🇵","flag-kr":"🇰🇷","flag-kw":"🇰🇼","flag-ky":"🇰🇾","flag-kz":"🇰🇿","flag-la":"🇱🇦","flag-lb":"🇱🇧","flag-lc":"🇱🇨","flag-li":"🇱🇮","flag-lk":"🇱🇰","flag-lr":"🇱🇷","flag-ls":"🇱🇸","flag-lt":"🇱🇹","flag-lu":"🇱🇺","flag-lv":"🇱🇻","flag-ly":"🇱🇾","flag-ma":"🇲🇦","flag-mc":"🇲🇨","flag-md":"🇲🇩","flag-me":"🇲🇪","flag-mf":"🇲🇫","flag-mg":"🇲🇬","flag-mh":"🇲🇭","flag-mk":"🇲🇰","flag-ml":"🇲🇱","flag-mm":"🇲🇲","flag-mn":"🇲🇳","flag-mo":"🇲🇴","flag-mp":"🇲🇵","flag-mq":"🇲🇶","flag-mr":"🇲🇷","flag-ms":"🇲🇸","flag-mt":"🇲🇹","flag-mu":"🇲🇺","flag-mv":"🇲🇻","flag-mw":"🇲🇼","flag-mx":"🇲🇽","flag-my":"🇲🇾","flag-mz":"🇲🇿","flag-na":"🇳🇦","flag-nc":"🇳🇨","flag-ne":"🇳🇪","flag-nf":"🇳🇫","flag-ng":"🇳🇬","flag-ni":"🇳🇮","flag-nl":"🇳🇱","flag-no":"🇳🇴","flag-np":"🇳🇵","flag-nr":"🇳🇷","flag-nu":"🇳🇺","flag-nz":"🇳🇿","flag-om":"🇴🇲","flag-pa":"🇵🇦","flag-pe":"🇵🇪","flag-pf":"🇵🇫","flag-pg":"🇵🇬","flag-ph":"🇵🇭","flag-pk":"🇵🇰","flag-pl":"🇵🇱","flag-pm":"🇵🇲","flag-pn":"🇵🇳","flag-pr":"🇵🇷","flag-ps":"🇵🇸","flag-pt":"🇵🇹","flag-pw":"🇵🇼","flag-py":"🇵🇾","flag-qa":"🇶🇦","flag-re":"🇷🇪","flag-ro":"🇷🇴","flag-rs":"🇷🇸","flag-ru":"🇷🇺","flag-rw":"🇷🇼","flag-sa":"🇸🇦","flag-sark":"🇨🇶","flag-sb":"🇸🇧","flag-sc":"🇸🇨","flag-scotland":"🏴󠁧󠁢󠁳󠁣󠁴󠁿","flag-sd":"🇸🇩","flag-se":"🇸🇪","flag-sg":"🇸🇬","flag-sh":"🇸🇭","flag-si":"🇸🇮","flag-sj":"🇸🇯","flag-sk":"🇸🇰","flag-sl":"🇸🇱","flag-sm":"🇸🇲","flag-sn":"🇸🇳","flag-so":"🇸🇴","flag-sr":"🇸🇷","flag-ss":"🇸🇸","flag-st":"🇸🇹","flag-sv":"🇸🇻","flag-sx":"🇸🇽","flag-sy":"🇸🇾","flag-sz":"🇸🇿","flag-ta":"🇹🇦","flag-tc":"🇹🇨","flag-td":"🇹🇩","flag-tf":"🇹🇫","flag-tg":"🇹🇬","flag-th":"🇹🇭","flag-tj":"🇹🇯","flag-tk":"🇹🇰","flag-tl":"🇹🇱","flag-tm":"🇹🇲","flag-tn":"🇹🇳","flag-to":"🇹🇴","flag-tr":"🇹🇷","flag-tt":"🇹🇹","flag-tv":"🇹🇻","flag-tw":"🇹🇼","flag-tz":"🇹🇿","flag-ua":"🇺🇦","flag-ug":"🇺🇬","flag-um":"🇺🇲","flag-un":"🇺🇳","flag-us":"🇺🇸","flag-uy":"🇺🇾","flag-uz":"🇺🇿","flag-va":"🇻🇦","flag-vc":"🇻🇨","flag-ve":"🇻🇪","flag-vg":"🇻🇬","flag-vi":"🇻🇮","flag-vn":"🇻🇳","flag-vu":"🇻🇺","flag-wales":"🏴󠁧󠁢󠁷󠁬󠁳󠁿","flag-wf":"🇼🇫","flag-ws":"🇼🇸","flag-xk":"🇽🇰","flag-ye":"🇾🇪","flag-yt":"🇾🇹","flag-za":"🇿🇦","flag-zm":"🇿🇲","flag-zw":"🇿🇼","flags":"🎏","flamingo":"🦩","flashlight":"🔦","flatbread":"🫓","fleur_de_lis":"⚜️","flipper":"🐬","floppy_disk":"💾","flower_playing_cards":"🎴","flushed":"😳","flute":"🪈","fly":"🪰","flying_disc":"🥏","flying_saucer":"🛸","fog":"🌫️","foggy":"🌁","folding_hand_fan":"🪭","fondue":"🫕","foot":"🦶","football":"🏈","footprints":"👣","fork_and_knife":"🍴","fortune_cookie":"🥠","fountain":"⛲","four":"4️⃣","four_leaf_clover":"🍀","fox_face":"🦊","fr":"🇫🇷","frame_with_picture":"🖼️","free":"🆓","fried_egg":"🍳","fried_shrimp":"🍤","fries":"🍟","frog":"🐸","frowning":"😦","fuelpump":"⛽","full_moon":"🌕","full_moon_with_face":"🌝","funeral_urn":"⚱️","game_die":"🎲","garlic":"🧄","gb":"🇬🇧","gear":"⚙️","gem":"💎","gemini":"♊","genie":"🧞","ghost":"👻","gift":"🎁","gift_heart":"💝","ginger_root":"🫚","giraffe_face":"🦒","girl":"👧","glass_of_milk":"🥛","globe_with_meridians":"🌐","gloves":"🧤","goal_net":"🥅","goat":"🐐","goggles":"🥽","golf":"⛳","golfer":"🏌️","goose":"🪿","gorilla":"🦍","grapes":"🍇","green_apple":"🍏","green_book":"📗","green_heart":"💚","green_salad":"🥗","grey_exclamation":"❕","grey_heart":"🩶","grey_question":"❔","grimacing":"😬","grin":"😁","grinning":"😀","grinning_face_with_one_large_and_one_small_eye":"🤪","grinning_face_with_star_eyes":"🤩","guardsman":"💂","guide_dog":"🦮","guitar":"🎸","gun":"🔫","hair_pick":"🪮","haircut":"💇","hamburger":"🍔","hammer":"🔨","hammer_and_pick":"⚒️","hammer_and_wrench":"🛠️","hamsa":"🪬","hamster":"🐹","hand":"✋","hand_with_index_and_middle_fingers_crossed":"🤞","hand_with_index_finger_and_thumb_crossed":"🫰","handbag":"👜","handball":"🤾","handshake":"🤝","hankey":"💩","harp":"🪉","hash":"#️⃣","hatched_chick":"🐥","hatching_chick":"🐣","head_shaking_horizontally":"🙂‍↔️","head_shaking_vertically":"🙂‍↕️","headphones":"🎧","headstone":"🪦","health_worker":"🧑‍⚕️","hear_no_evil":"🙉","heart":"❤️","heart_decoration":"💟","heart_eyes":"😍","heart_eyes_cat":"😻","heart_hands":"🫶","heart_on_fire":"❤️‍🔥","heartbeat":"💓","heartpulse":"💗","hearts":"♥️","heavy_check_mark":"✔️","heavy_division_sign":"➗","heavy_dollar_sign":"💲","heavy_equals_sign":"🟰","heavy_exclamation_mark":"❗","heavy_heart_exclamation_mark_ornament":"❣️","heavy_minus_sign":"➖","heavy_multiplication_x":"✖️","heavy_plus_sign":"➕","hedgehog":"🦔","helicopter":"🚁","helmet_with_white_cross":"⛑️","herb":"🌿","hibiscus":"🌺","high_brightness":"🔆","high_heel":"👠","hiking_boot":"🥾","hindu_temple":"🛕","hippopotamus":"🦛","hocho":"🔪","hole":"🕳️","honey_pot":"🍯","honeybee":"🐝","hook":"🪝","horse":"🐴","horse_racing":"🏇","hospital":"🏥","hot_face":"🥵","hot_pepper":"🌶️","hotdog":"🌭","hotel":"🏨","hotsprings":"♨️","hourglass":"⌛","hourglass_flowing_sand":"⏳","house":"🏠","house_buildings":"🏘️","house_with_garden":"🏡","hugging_face":"🤗","hushed":"😯","hut":"🛖","hyacinth":"🪻","i_love_you_hand_sign":"🤟","ice_cream":"🍨","ice_cube":"🧊","ice_hockey_stick_and_puck":"🏒","ice_skate":"⛸️","icecream":"🍦","id":"🆔","identification_card":"🪪","ideograph_advantage":"🉐","imp":"👿","inbox_tray":"📥","incoming_envelope":"📨","index_pointing_at_the_viewer":"🫵","infinity":"♾️","information_desk_person":"💁","information_source":"ℹ️","innocent":"😇","interrobang":"⁉️","iphone":"📱","it":"🇮🇹","izakaya_lantern":"🏮","jack_o_lantern":"🎃","japan":"🗾","japanese_castle":"🏯","japanese_goblin":"👺","japanese_ogre":"👹","jar":"🫙","jeans":"👖","jellyfish":"🪼","jigsaw":"🧩","joy":"😂","joy_cat":"😹","joystick":"🕹️","jp":"🇯🇵","judge":"🧑‍⚖️","juggling":"🤹","kaaba":"🕋","kangaroo":"🦘","key":"🔑","keyboard":"⌨️","keycap_star":"*️⃣","keycap_ten":"🔟","khanda":"🪯","kimono":"👘","kiss":"💋","kissing":"😗","kissing_cat":"😽","kissing_closed_eyes":"😚","kissing_heart":"😘","kissing_smiling_eyes":"😙","kite":"🪁","kiwifruit":"🥝","kneeling_person":"🧎","knife":"🔪","knife_fork_plate":"🍽️","knot":"🪢","koala":"🐨","koko":"🈁","kr":"🇰🇷","lab_coat":"🥼","label":"🏷️","lacrosse":"🥍","ladder":"🪜","lady_beetle":"🐞","ladybug":"🐞","lantern":"🏮","large_blue_circle":"🔵","large_blue_diamond":"🔷","large_blue_square":"🟦","large_brown_circle":"🟤","large_brown_square":"🟫","large_green_circle":"🟢","large_green_square":"🟩","large_orange_circle":"🟠","large_orange_diamond":"🔶","large_orange_square":"🟧","large_purple_circle":"🟣","large_purple_square":"🟪","large_red_square":"🟥","large_yellow_circle":"🟡","large_yellow_square":"🟨","last_quarter_moon":"🌗","last_quarter_moon_with_face":"🌜","latin_cross":"✝️","laughing":"😆","leafless_tree":"🪾","leafy_green":"🥬","leaves":"🍃","ledger":"📒","left-facing_fist":"🤛","left_luggage":"🛅","left_right_arrow":"↔️","left_speech_bubble":"🗨️","leftwards_arrow_with_hook":"↩️","leftwards_hand":"🫲","leftwards_pushing_hand":"🫷","leg":"🦵","lemon":"🍋","leo":"♌","leopard":"🐆","level_slider":"🎚️","libra":"♎","light_blue_heart":"🩵","light_rail":"🚈","lightning":"🌩️","lightning_cloud":"🌩️","lime":"🍋‍🟩","link":"🔗","linked_paperclips":"🖇️","lion_face":"🦁","lips":"👄","lipstick":"💄","lizard":"🦎","llama":"🦙","lobster":"🦞","lock":"🔒","lock_with_ink_pen":"🔏","lollipop":"🍭","long_drum":"🪘","loop":"➿","lotion_bottle":"🧴","lotus":"🪷","loud_sound":"🔊","loudspeaker":"📢","love_hotel":"🏩","love_letter":"💌","low_battery":"🪫","low_brightness":"🔅","lower_left_ballpoint_pen":"🖊️","lower_left_crayon":"🖍️","lower_left_fountain_pen":"🖋️","lower_left_paintbrush":"🖌️","luggage":"🧳","lungs":"🫁","lying_face":"🤥","m":"Ⓜ️","mag":"🔍","mag_right":"🔎","mage":"🧙","magic_wand":"🪄","magnet":"🧲","mahjong":"🀄","mailbox":"📫","mailbox_closed":"📪","mailbox_with_mail":"📬","mailbox_with_no_mail":"📭","male-artist":"👨‍🎨","male-astronaut":"👨‍🚀","male-construction-worker":"👷‍♂️","male-cook":"👨‍🍳","male-detective":"🕵️‍♂️","male-doctor":"👨‍⚕️","male-factory-worker":"👨‍🏭","male-farmer":"👨‍🌾","male-firefighter":"👨‍🚒","male-guard":"💂‍♂️","male-judge":"👨‍⚖️","male-mechanic":"👨‍🔧","male-office-worker":"👨‍💼","male-pilot":"👨‍✈️","male-police-officer":"👮‍♂️","male-scientist":"👨‍🔬","male-singer":"👨‍🎤","male-student":"👨‍🎓","male-teacher":"👨‍🏫","male-technologist":"👨‍💻","male_elf":"🧝‍♂️","male_fairy":"🧚‍♂️","male_genie":"🧞‍♂️","male_mage":"🧙‍♂️","male_sign":"♂️","male_superhero":"🦸‍♂️","male_supervillain":"🦹‍♂️","male_vampire":"🧛‍♂️","male_zombie":"🧟‍♂️","mammoth":"🦣","man":"👨","man-biking":"🚴‍♂️","man-bouncing-ball":"⛹️‍♂️","man-bowing":"🙇‍♂️","man-boy":"👨‍👦","man-boy-boy":"👨‍👦‍👦","man-cartwheeling":"🤸‍♂️","man-facepalming":"🤦‍♂️","man-frowning":"🙍‍♂️","man-gesturing-no":"🙅‍♂️","man-gesturing-ok":"🙆‍♂️","man-getting-haircut":"💇‍♂️","man-getting-massage":"💆‍♂️","man-girl":"👨‍👧","man-girl-boy":"👨‍👧‍👦","man-girl-girl":"👨‍👧‍👧","man-golfing":"🏌️‍♂️","man-heart-man":"👨‍❤️‍👨","man-juggling":"🤹‍♂️","man-kiss-man":"👨‍❤️‍💋‍👨","man-lifting-weights":"🏋️‍♂️","man-man-boy":"👨‍👨‍👦","man-man-boy-boy":"👨‍👨‍👦‍👦","man-man-girl":"👨‍👨‍👧","man-man-girl-boy":"👨‍👨‍👧‍👦","man-man-girl-girl":"👨‍👨‍👧‍👧","man-mountain-biking":"🚵‍♂️","man-playing-handball":"🤾‍♂️","man-playing-water-polo":"🤽‍♂️","man-pouting":"🙎‍♂️","man-raising-hand":"🙋‍♂️","man-rowing-boat":"🚣‍♂️","man-running":"🏃‍♂️","man-shrugging":"🤷‍♂️","man-surfing":"🏄‍♂️","man-swimming":"🏊‍♂️","man-tipping-hand":"💁‍♂️","man-walking":"🚶‍♂️","man-wearing-turban":"👳‍♂️","man-with-bunny-ears-partying":"👯‍♂️","man-woman-boy":"👨‍👩‍👦","man-woman-boy-boy":"👨‍👩‍👦‍👦","man-woman-girl":"👨‍👩‍👧","man-woman-girl-boy":"👨‍👩‍👧‍👦","man-woman-girl-girl":"👨‍👩‍👧‍👧","man-wrestling":"🤼‍♂️","man_and_woman_holding_hands":"👫","man_climbing":"🧗‍♂️","man_dancing":"🕺","man_feeding_baby":"👨‍🍼","man_in_business_suit_levitating":"🕴️","man_in_lotus_position":"🧘‍♂️","man_in_manual_wheelchair":"👨‍🦽","man_in_manual_wheelchair_facing_right":"👨‍🦽‍➡️","man_in_motorized_wheelchair":"👨‍🦼","man_in_motorized_wheelchair_facing_right":"👨‍🦼‍➡️","man_in_steamy_room":"🧖‍♂️","man_in_tuxedo":"🤵‍♂️","man_kneeling":"🧎‍♂️","man_kneeling_facing_right":"🧎‍♂️‍➡️","man_running_facing_right":"🏃‍♂️‍➡️","man_standing":"🧍‍♂️","man_walking_facing_right":"🚶‍♂️‍➡️","man_with_beard":"🧔‍♂️","man_with_gua_pi_mao":"👲","man_with_probing_cane":"👨‍🦯","man_with_turban":"👳","man_with_veil":"👰‍♂️","man_with_white_cane_facing_right":"👨‍🦯‍➡️","mango":"🥭","mans_shoe":"👞","mantelpiece_clock":"🕰️","manual_wheelchair":"🦽","maple_leaf":"🍁","maracas":"🪇","martial_arts_uniform":"🥋","mask":"😷","massage":"💆","mate_drink":"🧉","meat_on_bone":"🍖","mechanic":"🧑‍🔧","mechanical_arm":"🦾","mechanical_leg":"🦿","medal":"🎖️","medical_symbol":"⚕️","mega":"📣","melon":"🍈","melting_face":"🫠","memo":"📝","men-with-bunny-ears-partying":"👯‍♂️","men_holding_hands":"👬","mending_heart":"❤️‍🩹","menorah_with_nine_branches":"🕎","mens":"🚹","mermaid":"🧜‍♀️","merman":"🧜‍♂️","merperson":"🧜","metro":"🚇","microbe":"🦠","microphone":"🎤","microscope":"🔬","middle_finger":"🖕","military_helmet":"🪖","milky_way":"🌌","minibus":"🚐","minidisc":"💽","mirror":"🪞","mirror_ball":"🪩","mobile_phone_off":"📴","money_mouth_face":"🤑","money_with_wings":"💸","moneybag":"💰","monkey":"🐒","monkey_face":"🐵","monorail":"🚝","moon":"🌔","moon_cake":"🥮","moose":"🫎","mortar_board":"🎓","mosque":"🕌","mosquito":"🦟","mostly_sunny":"🌤️","mother_christmas":"🤶","motor_boat":"🛥️","motor_scooter":"🛵","motorized_wheelchair":"🦼","motorway":"🛣️","mount_fuji":"🗻","mountain":"⛰️","mountain_bicyclist":"🚵","mountain_cableway":"🚠","mountain_railway":"🚞","mouse":"🐭","mouse2":"🐁","mouse_trap":"🪤","movie_camera":"🎥","moyai":"🗿","mrs_claus":"🤶","muscle":"💪","mushroom":"🍄","musical_keyboard":"🎹","musical_note":"🎵","musical_score":"🎼","mute":"🔇","mx_claus":"🧑‍🎄","nail_care":"💅","name_badge":"📛","national_park":"🏞️","nauseated_face":"🤢","nazar_amulet":"🧿","necktie":"👔","negative_squared_cross_mark":"❎","nerd_face":"🤓","nest_with_eggs":"🪺","nesting_dolls":"🪆","neutral_face":"😐","new":"🆕","new_moon":"🌑","new_moon_with_face":"🌚","newspaper":"📰","ng":"🆖","night_with_stars":"🌃","nine":"9️⃣","ninja":"🥷","no_bell":"🔕","no_bicycles":"🚳","no_entry":"⛔","no_entry_sign":"🚫","no_good":"🙅","no_mobile_phones":"📵","no_mouth":"😶","no_pedestrians":"🚷","no_smoking":"🚭","non-potable_water":"🚱","nose":"👃","notebook":"📓","notebook_with_decorative_cover":"📔","notes":"🎶","nut_and_bolt":"🔩","o":"⭕","o2":"🅾️","ocean":"🌊","octagonal_sign":"🛑","octopus":"🐙","oden":"🍢","office":"🏢","office_worker":"🧑‍💼","oil_drum":"🛢️","ok":"🆗","ok_hand":"👌","ok_woman":"🙆","old_key":"🗝️","older_adult":"🧓","older_man":"👴","older_woman":"👵","olive":"🫒","om_symbol":"🕉️","on":"🔛","oncoming_automobile":"🚘","oncoming_bus":"🚍","oncoming_police_car":"🚔","oncoming_taxi":"🚖","one":"1️⃣","one-piece_swimsuit":"🩱","onion":"🧅","open_book":"📖","open_file_folder":"📂","open_hands":"👐","open_mouth":"😮","ophiuchus":"⛎","orange_book":"📙","orange_heart":"🧡","orangutan":"🦧","orthodox_cross":"☦️","otter":"🦦","outbox_tray":"📤","owl":"🦉","ox":"🐂","oyster":"🦪","package":"📦","page_facing_up":"📄","page_with_curl":"📃","pager":"📟","palm_down_hand":"🫳","palm_tree":"🌴","palm_up_hand":"🫴","palms_up_together":"🤲","pancakes":"🥞","panda_face":"🐼","paperclip":"📎","parachute":"🪂","parking":"🅿️","parrot":"🦜","part_alternation_mark":"〽️","partly_sunny":"⛅","partly_sunny_rain":"🌦️","partying_face":"🥳","passenger_ship":"🛳️","passport_control":"🛂","paw_prints":"🐾","pea_pod":"🫛","peace_symbol":"☮️","peach":"🍑","peacock":"🦚","peanuts":"🥜","pear":"🍐","pencil":"📝","pencil2":"✏️","penguin":"🐧","pensive":"😔","people_holding_hands":"🧑‍🤝‍🧑","people_hugging":"🫂","performing_arts":"🎭","persevere":"😣","person_climbing":"🧗","person_doing_cartwheel":"🤸","person_feeding_baby":"🧑‍🍼","person_frowning":"🙍","person_in_lotus_position":"🧘","person_in_manual_wheelchair":"🧑‍🦽","person_in_manual_wheelchair_facing_right":"🧑‍🦽‍➡️","person_in_motorized_wheelchair":"🧑‍🦼","person_in_motorized_wheelchair_facing_right":"🧑‍🦼‍➡️","person_in_steamy_room":"🧖","person_in_tuxedo":"🤵","person_kneeling_facing_right":"🧎‍➡️","person_running_facing_right":"🏃‍➡️","person_walking_facing_right":"🚶‍➡️","person_with_ball":"⛹️","person_with_blond_hair":"👱","person_with_crown":"🫅","person_with_headscarf":"🧕","person_with_pouting_face":"🙎","person_with_probing_cane":"🧑‍🦯","person_with_white_cane_facing_right":"🧑‍🦯‍➡️","petri_dish":"🧫","phoenix":"🐦‍🔥","phone":"☎️","pick":"⛏️","pickup_truck":"🛻","pie":"🥧","pig":"🐷","pig2":"🐖","pig_nose":"🐽","pill":"💊","pilot":"🧑‍✈️","pinata":"🪅","pinched_fingers":"🤌","pinching_hand":"🤏","pineapple":"🍍","pink_heart":"🩷","pirate_flag":"🏴‍☠️","pisces":"♓","pizza":"🍕","placard":"🪧","place_of_worship":"🛐","playground_slide":"🛝","pleading_face":"🥺","plunger":"🪠","point_down":"👇","point_left":"👈","point_right":"👉","point_up":"☝️","point_up_2":"👆","polar_bear":"🐻‍❄️","police_car":"🚓","poodle":"🐩","poop":"💩","popcorn":"🍿","post_office":"🏣","postal_horn":"📯","postbox":"📮","potable_water":"🚰","potato":"🥔","potted_plant":"🪴","pouch":"👝","poultry_leg":"🍗","pound":"💷","pouring_liquid":"🫗","pouting_cat":"😾","pray":"🙏","prayer_beads":"📿","pregnant_man":"🫃","pregnant_person":"🫄","pregnant_woman":"🤰","pretzel":"🥨","prince":"🤴","princess":"👸","printer":"🖨️","probing_cane":"🦯","punch":"👊","purple_heart":"💜","purse":"👛","pushpin":"📌","put_litter_in_its_place":"🚮","question":"❓","rabbit":"🐰","rabbit2":"🐇","raccoon":"🦝","racehorse":"🐎","racing_car":"🏎️","racing_motorcycle":"🏍️","radio":"📻","radio_button":"🔘","radioactive_sign":"☢️","rage":"😡","railway_car":"🚃","railway_track":"🛤️","rain_cloud":"🌧️","rainbow":"🌈","rainbow-flag":"🏳️‍🌈","raised_back_of_hand":"🤚","raised_hand":"✋","raised_hand_with_fingers_splayed":"🖐️","raised_hands":"🙌","raising_hand":"🙋","ram":"🐏","ramen":"🍜","rat":"🐀","razor":"🪒","receipt":"🧾","recycle":"♻️","red_car":"🚗","red_circle":"🔴","red_envelope":"🧧","red_haired_man":"👨‍🦰","red_haired_person":"🧑‍🦰","red_haired_woman":"👩‍🦰","registered":"®️","relaxed":"☺️","relieved":"😌","reminder_ribbon":"🎗️","repeat":"🔁","repeat_one":"🔂","restroom":"🚻","reversed_hand_with_middle_finger_extended":"🖕","revolving_hearts":"💞","rewind":"⏪","rhinoceros":"🦏","ribbon":"🎀","rice":"🍚","rice_ball":"🍙","rice_cracker":"🍘","rice_scene":"🎑","right-facing_fist":"🤜","right_anger_bubble":"🗯️","rightwards_hand":"🫱","rightwards_pushing_hand":"🫸","ring":"💍","ring_buoy":"🛟","ringed_planet":"🪐","robot_face":"🤖","rock":"🪨","rocket":"🚀","roll_of_paper":"🧻","rolled_up_newspaper":"🗞️","roller_coaster":"🎢","roller_skate":"🛼","rolling_on_the_floor_laughing":"🤣","rooster":"🐓","root_vegetable":"🫜","rose":"🌹","rosette":"🏵️","rotating_light":"🚨","round_pushpin":"📍","rowboat":"🚣","ru":"🇷🇺","rugby_football":"🏉","runner":"🏃","running":"🏃","running_shirt_with_sash":"🎽","sa":"🈂️","safety_pin":"🧷","safety_vest":"🦺","sagittarius":"♐","sailboat":"⛵","sake":"🍶","salt":"🧂","saluting_face":"🫡","sandal":"👡","sandwich":"🥪","santa":"🎅","sari":"🥻","satellite":"🛰️","satellite_antenna":"📡","satisfied":"😆","sauropod":"🦕","saxophone":"🎷","scales":"⚖️","scarf":"🧣","school":"🏫","school_satchel":"🎒","scientist":"🧑‍🔬","scissors":"✂️","scooter":"🛴","scorpion":"🦂","scorpius":"♏","scream":"😱","scream_cat":"🙀","screwdriver":"🪛","scroll":"📜","seal":"🦭","seat":"💺","second_place_medal":"🥈","secret":"㊙️","see_no_evil":"🙈","seedling":"🌱","selfie":"🤳","serious_face_with_symbols_covering_mouth":"🤬","service_dog":"🐕‍🦺","seven":"7️⃣","sewing_needle":"🪡","shaking_face":"🫨","shallow_pan_of_food":"🥘","shamrock":"☘️","shark":"🦈","shaved_ice":"🍧","sheep":"🐑","shell":"🐚","shield":"🛡️","shinto_shrine":"⛩️","ship":"🚢","shirt":"👕","shit":"💩","shocked_face_with_exploding_head":"🤯","shoe":"👞","shopping_bags":"🛍️","shopping_trolley":"🛒","shorts":"🩳","shovel":"🪏","shower":"🚿","shrimp":"🦐","shrug":"🤷","shushing_face":"🤫","sign_of_the_horns":"🤘","signal_strength":"📶","singer":"🧑‍🎤","six":"6️⃣","six_pointed_star":"🔯","skateboard":"🛹","ski":"🎿","skier":"⛷️","skin-tone-2":"🏻","skin-tone-3":"🏼","skin-tone-4":"🏽","skin-tone-5":"🏾","skin-tone-6":"🏿","skull":"💀","skull_and_crossbones":"☠️","skunk":"🦨","sled":"🛷","sleeping":"😴","sleeping_accommodation":"🛌","sleepy":"😪","sleuth_or_spy":"🕵️","slightly_frowning_face":"🙁","slightly_smiling_face":"🙂","slot_machine":"🎰","sloth":"🦥","small_airplane":"🛩️","small_blue_diamond":"🔹","small_orange_diamond":"🔸","small_red_triangle":"🔺","small_red_triangle_down":"🔻","smile":"😄","smile_cat":"😸","smiley":"😃","smiley_cat":"😺","smiling_face_with_3_hearts":"🥰","smiling_face_with_smiling_eyes_and_hand_covering_mouth":"🤭","smiling_face_with_tear":"🥲","smiling_imp":"😈","smirk":"😏","smirk_cat":"😼","smoking":"🚬","snail":"🐌","snake":"🐍","sneezing_face":"🤧","snow_capped_mountain":"🏔️","snow_cloud":"🌨️","snowboarder":"🏂","snowflake":"❄️","snowman":"☃️","snowman_without_snow":"⛄","soap":"🧼","sob":"😭","soccer":"⚽","socks":"🧦","softball":"🥎","soon":"🔜","sos":"🆘","sound":"🔉","space_invader":"👾","spades":"♠️","spaghetti":"🍝","sparkle":"❇️","sparkler":"🎇","sparkles":"✨","sparkling_heart":"💖","speak_no_evil":"🙊","speaker":"🔈","speaking_head_in_silhouette":"🗣️","speech_balloon":"💬","speedboat":"🚤","spider":"🕷️","spider_web":"🕸️","spiral_calendar_pad":"🗓️","spiral_note_pad":"🗒️","splatter":"🫟","spock-hand":"🖖","sponge":"🧽","spoon":"🥄","sports_medal":"🏅","squid":"🦑","stadium":"🏟️","staff_of_aesculapius":"⚕️","standing_person":"🧍","star":"⭐","star-struck":"🤩","star2":"🌟","star_and_crescent":"☪️","star_of_david":"✡️","stars":"🌠","station":"🚉","statue_of_liberty":"🗽","steam_locomotive":"🚂","stethoscope":"🩺","stew":"🍲","stopwatch":"⏱️","straight_ruler":"📏","strawberry":"🍓","stuck_out_tongue":"😛","stuck_out_tongue_closed_eyes":"😝","stuck_out_tongue_winking_eye":"😜","student":"🧑‍🎓","studio_microphone":"🎙️","stuffed_flatbread":"🥙","sun_behind_cloud":"🌥️","sun_behind_rain_cloud":"🌦️","sun_small_cloud":"🌤️","sun_with_face":"🌞","sunflower":"🌻","sunglasses":"😎","sunny":"☀️","sunrise":"🌅","sunrise_over_mountains":"🌄","superhero":"🦸","supervillain":"🦹","surfer":"🏄","sushi":"🍣","suspension_railway":"🚟","swan":"🦢","sweat":"😓","sweat_drops":"💦","sweat_smile":"😅","sweet_potato":"🍠","swimmer":"🏊","symbols":"🔣","synagogue":"🕍","syringe":"💉","t-rex":"🦖","table_tennis_paddle_and_ball":"🏓","taco":"🌮","tada":"🎉","takeout_box":"🥡","tamale":"🫔","tanabata_tree":"🎋","tangerine":"🍊","taurus":"♉","taxi":"🚕","tea":"🍵","teacher":"🧑‍🏫","teapot":"🫖","technologist":"🧑‍💻","teddy_bear":"🧸","telephone":"☎️","telephone_receiver":"📞","telescope":"🔭","tennis":"🎾","tent":"⛺","test_tube":"🧪","the_horns":"🤘","thermometer":"🌡️","thinking_face":"🤔","third_place_medal":"🥉","thong_sandal":"🩴","thought_balloon":"💭","thread":"🧵","three":"3️⃣","three_button_mouse":"🖱️","thumbsdown":"👎","thumbsup":"👍","thunder_cloud_and_rain":"⛈️","ticket":"🎫","tiger":"🐯","tiger2":"🐅","timer_clock":"⏲️","tired_face":"😫","tm":"™️","toilet":"🚽","tokyo_tower":"🗼","tomato":"🍅","tongue":"👅","toolbox":"🧰","tooth":"🦷","toothbrush":"🪥","top":"🔝","tophat":"🎩","tornado":"🌪️","tornado_cloud":"🌪️","trackball":"🖲️","tractor":"🚜","traffic_light":"🚥","train":"🚋","train2":"🚆","tram":"🚊","transgender_flag":"🏳️‍⚧️","transgender_symbol":"⚧️","triangular_flag_on_post":"🚩","triangular_ruler":"📐","trident":"🔱","triumph":"😤","troll":"🧌","trolleybus":"🚎","trophy":"🏆","tropical_drink":"🍹","tropical_fish":"🐠","truck":"🚚","trumpet":"🎺","tshirt":"👕","tulip":"🌷","tumbler_glass":"🥃","turkey":"🦃","turtle":"🐢","tv":"📺","twisted_rightwards_arrows":"🔀","two":"2️⃣","two_hearts":"💕","two_men_holding_hands":"👬","two_women_holding_hands":"👭","u5272":"🈹","u5408":"🈴","u55b6":"🈺","u6307":"🈯","u6708":"🈷️","u6709":"🈶","u6e80":"🈵","u7121":"🈚","u7533":"🈸","u7981":"🈲","u7a7a":"🈳","uk":"🇬🇧","umbrella":"☂️","umbrella_on_ground":"⛱️","umbrella_with_rain_drops":"☔","unamused":"😒","underage":"🔞","unicorn_face":"🦄","unlock":"🔓","up":"🆙","upside_down_face":"🙃","us":"🇺🇸","v":"✌️","vampire":"🧛","vertical_traffic_light":"🚦","vhs":"📼","vibration_mode":"📳","video_camera":"📹","video_game":"🎮","violin":"🎻","virgo":"♍","volcano":"🌋","volleyball":"🏐","vs":"🆚","waffle":"🧇","walking":"🚶","waning_crescent_moon":"🌘","waning_gibbous_moon":"🌖","warning":"⚠️","wastebasket":"🗑️","watch":"⌚","water_buffalo":"🐃","water_polo":"🤽","watermelon":"🍉","wave":"👋","waving_black_flag":"🏴","waving_white_flag":"🏳️","wavy_dash":"〰️","waxing_crescent_moon":"🌒","waxing_gibbous_moon":"🌔","wc":"🚾","weary":"😩","wedding":"💒","weight_lifter":"🏋️","whale":"🐳","whale2":"🐋","wheel":"🛞","wheel_of_dharma":"☸️","wheelchair":"♿","white_check_mark":"✅","white_circle":"⚪","white_flower":"💮","white_frowning_face":"☹️","white_haired_man":"👨‍🦳","white_haired_person":"🧑‍🦳","white_haired_woman":"👩‍🦳","white_heart":"🤍","white_large_square":"⬜","white_medium_small_square":"◽","white_medium_square":"◻️","white_small_square":"▫️","white_square_button":"🔳","wilted_flower":"🥀","wind_blowing_face":"🌬️","wind_chime":"🎐","window":"🪟","wine_glass":"🍷","wing":"🪽","wink":"😉","wireless":"🛜","wolf":"🐺","woman":"👩","woman-biking":"🚴‍♀️","woman-bouncing-ball":"⛹️‍♀️","woman-bowing":"🙇‍♀️","woman-boy":"👩‍👦","woman-boy-boy":"👩‍👦‍👦","woman-cartwheeling":"🤸‍♀️","woman-facepalming":"🤦‍♀️","woman-frowning":"🙍‍♀️","woman-gesturing-no":"🙅‍♀️","woman-gesturing-ok":"🙆‍♀️","woman-getting-haircut":"💇‍♀️","woman-getting-massage":"💆‍♀️","woman-girl":"👩‍👧","woman-girl-boy":"👩‍👧‍👦","woman-girl-girl":"👩‍👧‍👧","woman-golfing":"🏌️‍♀️","woman-heart-man":"👩‍❤️‍👨","woman-heart-woman":"👩‍❤️‍👩","woman-juggling":"🤹‍♀️","woman-kiss-man":"👩‍❤️‍💋‍👨","woman-kiss-woman":"👩‍❤️‍💋‍👩","woman-lifting-weights":"🏋️‍♀️","woman-mountain-biking":"🚵‍♀️","woman-playing-handball":"🤾‍♀️","woman-playing-water-polo":"🤽‍♀️","woman-pouting":"🙎‍♀️","woman-raising-hand":"🙋‍♀️","woman-rowing-boat":"🚣‍♀️","woman-running":"🏃‍♀️","woman-shrugging":"🤷‍♀️","woman-surfing":"🏄‍♀️","woman-swimming":"🏊‍♀️","woman-tipping-hand":"💁‍♀️","woman-walking":"🚶‍♀️","woman-wearing-turban":"👳‍♀️","woman-with-bunny-ears-partying":"👯‍♀️","woman-woman-boy":"👩‍👩‍👦","woman-woman-boy-boy":"👩‍👩‍👦‍👦","woman-woman-girl":"👩‍👩‍👧","woman-woman-girl-boy":"👩‍👩‍👧‍👦","woman-woman-girl-girl":"👩‍👩‍👧‍👧","woman-wrestling":"🤼‍♀️","woman_and_man_holding_hands":"👫","woman_climbing":"🧗‍♀️","woman_feeding_baby":"👩‍🍼","woman_in_lotus_position":"🧘‍♀️","woman_in_manual_wheelchair":"👩‍🦽","woman_in_manual_wheelchair_facing_right":"👩‍🦽‍➡️","woman_in_motorized_wheelchair":"👩‍🦼","woman_in_motorized_wheelchair_facing_right":"👩‍🦼‍➡️","woman_in_steamy_room":"🧖‍♀️","woman_in_tuxedo":"🤵‍♀️","woman_kneeling":"🧎‍♀️","woman_kneeling_facing_right":"🧎‍♀️‍➡️","woman_running_facing_right":"🏃‍♀️‍➡️","woman_standing":"🧍‍♀️","woman_walking_facing_right":"🚶‍♀️‍➡️","woman_with_beard":"🧔‍♀️","woman_with_probing_cane":"👩‍🦯","woman_with_veil":"👰‍♀️","woman_with_white_cane_facing_right":"👩‍🦯‍➡️","womans_clothes":"👚","womans_flat_shoe":"🥿","womans_hat":"👒","women-with-bunny-ears-partying":"👯‍♀️","women_holding_hands":"👭","womens":"🚺","wood":"🪵","woozy_face":"🥴","world_map":"🗺️","worm":"🪱","worried":"😟","wrench":"🔧","wrestlers":"🤼","writing_hand":"✍️","x":"❌","x-ray":"🩻","yarn":"🧶","yawning_face":"🥱","yellow_heart":"💛","yen":"💴","yin_yang":"☯️","yo-yo":"🪀","yum":"😋","zany_face":"🤪","zap":"⚡","zebra_face":"🦓","zero":"0️⃣","zipper_mouth_face":"🤐","zombie":"🧟","zzz":"💤"}}
diff --git a/modules/slack/module.json b/modules/slack/module.json
new file mode 100644
index 0000000..a0f75bb
--- /dev/null
+++ b/modules/slack/module.json
@@ -0,0 +1,129 @@
+{
+  "id": "slack",
+  "name": "Slack",
+  "version": "1.2.0",
+  "proddash": ">=1.4.0",
+  "description": "Live transcripts of this location's Slack channels, plus PIN-protected sending as the location",
+  "client": "client.js",
+  "server": "server.js",
+  "style": "style.css",
+  "minSize": {
+    "w": 2,
+    "h": 2
+  },
+  "defaultSize": {
+    "w": 4,
+    "h": 4
+  },
+  "configGroups": {
+    "Slack account": {
+      "collapsed": "whenSet",
+      "help": "Create a Slack app in the workspace (api.slack.com/apps → Create New App → From scratch) and, under OAuth & Permissions → User Token Scopes, add channels:history, channels:read, groups:history, groups:read, chat:write, users:read, reactions:write (emoji reactions) and emoji:read (the workspace's custom emoji). Sign in to Slack as this location's account — the one named for the campus — open the app's OAuth & Permissions page and press Install to Workspace (or Reinstall to Workspace), then copy the User OAuth Token (xoxp-…) it shows and paste it here: messages from this machine are then literally from the location. A bot token (xoxb-…) works too; it posts as the app, with \"Send as\" naming the location."
+    },
+    "Channels": {
+      "help": "Every channel picked here becomes its own transcript tile in the ＋ picker, titled with the channel's name. The Send message and Quick replies tiles post to whichever transcript was clicked last — its bottom edge lights up in the accent colour — and to the first channel here until one is clicked. Only channels the account has joined are listed; join one in Slack first. Each channel is read on its own schedule, all of them together kept inside Slack's rate limit."
+    },
+    "Sending": {
+      "toggle": "sendEnabled",
+      "help": "Messages and emoji reactions leave this machine only after the PIN is entered — on a Send or Quick replies tile, or in the reaction menu a right-click on a transcript message opens. One PIN unlocks every Slack tile on that dashboard page until Auto-lock minutes pass without a send; a reload asks again. Sending stays refused until a 4–8 digit PIN is set here. A message goes to the channel of the transcript clicked last. Quick emojis are sent with one press from the Send message tile and offered first when reacting. Quick replies are one per line, Label | Message, with an optional | #channel-name to bind that one to a channel: a bound reply always goes there, whichever transcript is selected."
+    }
+  },
+  "configSchema": {
+    "token": {
+      "type": "password",
+      "label": "Token",
+      "default": "",
+      "group": "Slack account",
+      "help": "The location account's User OAuth Token (xoxp-…, recommended) or a Bot User OAuth Token (xoxb-…)."
+    },
+    "sendAs": {
+      "type": "string",
+      "label": "Send as",
+      "default": "",
+      "group": "Slack account",
+      "help": "Only used with a bot token — a user token always sends as its own account; needs the chat:write.customize scope."
+    },
+    "channels": {
+      "type": "multiselect",
+      "label": "Channels",
+      "default": [],
+      "group": "Channels",
+      "optionsRoute": "/channels",
+      "help": "One transcript tile per channel; the first one is where sends go until a transcript is clicked. Only channels the account has joined are listed — join one in Slack first."
+    },
+    "pollSeconds": {
+      "type": "number",
+      "label": "Refresh interval (s)",
+      "default": 2,
+      "group": "Transcript",
+      "help": "How often each channel is re-read (1 s at the fastest). With several channels the interval stretches so the module stays inside Slack's rate limit — at least 1.5 s × the number of channels; the health line shows the interval in use."
+    },
+    "historyCount": {
+      "type": "number",
+      "label": "Messages kept",
+      "default": 40,
+      "group": "Transcript"
+    },
+    "includeReplies": {
+      "type": "switch",
+      "label": "Thread replies",
+      "default": false,
+      "group": "Transcript"
+    },
+    "sendEnabled": {
+      "type": "switch",
+      "label": "Sending",
+      "default": false,
+      "group": "Sending"
+    },
+    "pin": {
+      "type": "password",
+      "label": "PIN",
+      "default": "",
+      "group": "Sending",
+      "help": "4–8 digits; the pad unlocks by itself once they are all in."
+    },
+    "pinIdleMinutes": {
+      "type": "number",
+      "label": "Auto-lock (min)",
+      "default": 10,
+      "group": "Sending"
+    },
+    "quickReplies": {
+      "type": "text",
+      "label": "Quick replies",
+      "default": "",
+      "group": "Sending",
+      "help": "One per line: Label | Message. Add | #channel-name to bind one to a channel — it then ignores which transcript is selected."
+    },
+    "quickEmojis": {
+      "type": "string",
+      "label": "Quick emojis",
+      "default": "👍 🙏 ✅ 👀 🎉",
+      "group": "Sending",
+      "help": "Emoji or :codes: separated by spaces, eight at most. One press sends one from the Send message tile; they also head the reaction menu."
+    }
+  },
+  "instanceSchema": {
+    "showAvatars": {
+      "type": "switch",
+      "label": "Avatars",
+      "default": true
+    },
+    "showTimes": {
+      "type": "switch",
+      "label": "Timestamps",
+      "default": true
+    },
+    "showNames": {
+      "type": "switch",
+      "label": "Names",
+      "default": true
+    },
+    "showSystem": {
+      "type": "switch",
+      "label": "Channel notices",
+      "default": true
+    }
+  }
+}
diff --git a/modules/slack/server.js b/modules/slack/server.js
new file mode 100644
index 0000000..39d196e
--- /dev/null
+++ b/modules/slack/server.js
@@ -0,0 +1,1602 @@
+'use strict';
+
+/**
+ * Slack — server part.
+ *
+ * One Slack Web API connection per ProdDash machine — the campus's shared
+ * location account (a user token), or a bot — polling the configured
+ * channels' recent history (one poller per channel, all inside one rate
+ * budget) and fanning the lot out to every tile over SSE, plus PIN-gated
+ * sending from this machine so a message reads as coming from the location.
+ * Browsers never talk to Slack; the token and the PIN stay here.
+ *
+ *   GET  /state      snapshot: identity, channels (keyed by id), sending state
+ *   GET  /stream     SSE `state` events (change-detected, heartbeated)
+ *   GET  /channels   admin multiselect options — the channels the account is in
+ *   POST /unlock     { pin } → { token, expiresAt }   (constant-time, lockout)
+ *   POST /lock       Bearer → forget that unlock token
+ *   GET  /quick      Bearer → preset labels + indexes (never the message text)
+ *   POST /send       Bearer, { text, channel } → chat.postMessage
+ *   POST /react      Bearer, { channel, ts, name, remove? } → reactions.add / .remove
+ *   GET  /emoji      { standard: {code: emoji}, custom: {name: {url}|{char}}, version }
+ *   GET  /emoji-image/<name>, GET /avatar/<u/USER|b/BOT>   images proxied from Slack's CDN
+ *   POST /quick      Bearer, { index, channel } → post that preset
+ *
+ * `channel` on /send and /quick must be one of the configured channel ids
+ * (400 otherwise): a PIN-unlocked browser chooses among the admin's channels,
+ * never an arbitrary one. A quick reply with its own "| #channel" ignores the
+ * request's channel — an explicit binding wins over the selection.
+ *
+ * Rate budget. Slack allows an internal app roughly 50+ conversations.history
+ * calls a minute per token (Tier 3). The module keeps all its pollers under
+ * HISTORY_BUDGET_PER_MIN (40) so conversations.replies, users.info and sends
+ * have room:
+ *
+ *   interval per channel = max(pollSeconds, ceil(channels × 60 / 40)) seconds
+ *
+ *   1 channel  → max(2, ceil(1.5)) = 2 s   (30 history calls/min)
+ *   2 channels → max(2, ceil(3))   = 3 s   (40/min)
+ *   3 channels → max(2, ceil(4.5)) = 5 s   (36/min)
+ *   5 channels → max(2, ceil(7.5)) = 8 s   (37.5/min)
+ *
+ * Pollers are phase-staggered across that interval so they never fire in a
+ * burst; with no tile watching, every channel drops to IDLE_POLL_S.
+ *
+ * SLACK_API_BASE=http://127.0.0.1:24716/api points the module at
+ * tools/slack-mock.js for development.
+ */
+
+const crypto = require('crypto');
+
+const DEFAULT_API_BASE = 'https://slack.com/api';
+const API_BASE = String(process.env.SLACK_API_BASE || DEFAULT_API_BASE).replace(/\/+$/, '');
+
+/** Abort a hung Slack request well before the poll cadence stacks up. */
+const REQUEST_TIMEOUT_MS = 10000;
+/** The scopes on the token, as Slack's x-oauth-scopes header names them on every answer. */
+let tokenScopes = '';
+/** Scopes a feature needs beyond reading: what to tell the tech when one is missing. */
+const OPTIONAL_SCOPES = [['reactions:write', 'emoji reactions'], ['emoji:read', 'custom emoji']];
+/** SSE comment ping cadence — keeps idle connections alive through sleepy Wi-Fi. */
+const HEARTBEAT_MS = 15000;
+/** Fastest allowed history poll; the admin default is 2 s. */
+const MIN_POLL_S = 1;
+/**
+ * conversations.history calls per minute the whole module allows itself.
+ * Slack gives an internal app's token roughly 50+ a minute (Tier 3); the
+ * rest is headroom for conversations.replies, users.info and sends. The
+ * per-channel interval follows from it — see pollIntervalMs().
+ */
+const HISTORY_BUDGET_PER_MIN = 40;
+/** With no tile watching, poll this slowly instead — the API budget is shared with sends. */
+const IDLE_POLL_S = 15;
+/** …once nothing has asked for /state or /stream for this long. */
+const IDLE_AFTER_MS = 30000;
+const HISTORY_MIN = 5;
+const HISTORY_MAX = 200;
+/** Thread fetches per poll across the module, split between channels (at least one each). */
+const THREAD_FETCHES_PER_POLL = 3;
+const THREAD_REPLIES_LIMIT = 50;
+const USER_LOOKUPS_PER_POLL = 15;
+const USER_TTL_MS = 60 * 60 * 1000;
+const CHANNEL_LIST_TTL_MS = 10 * 60 * 1000;
+const RETRY_NETWORK_MS = 10000;
+/** A bad token or an unreadable channel: nothing we do fixes it, so re-check slowly. */
+const RETRY_CONFIG_MS = 60000;
+/** "Join it in Slack" — someone may just have. */
+const RETRY_MEMBERSHIP_MS = 30000;
+/** The first read of each channel right after boot, one after another (then the phase-locked cadence). */
+const FIRST_READ_MS = 50;
+const FIRST_READ_STAGGER_MS = 250;
+/** A slot that has (nearly) passed is skipped rather than fired late. */
+const MIN_SLOT_GAP_MS = 200;
+/** tiles() waits at most this long for the first conversations.info answers after boot. */
+const NAMES_WAIT_MS = 1500;
+const PIN_RE = /^\d{4,8}$/;
+const PIN_MAX_WRONG = 5;
+const PIN_LOCKOUT_MS = 30000;
+const SEND_MIN_INTERVAL_MS = 1000;
+const MAX_TEXT_CHARS = 4000;
+const BODY_LIMIT_BYTES = 64 * 1024;
+const DEFAULT_ICON = ':satellite_antenna:';
+const UNLOCK_SWEEP_MS = 30000;
+
+/** Set by init(), read by routes() and tiles() — all rebuilt together on remount. */
+let current = null;
+
+/* ── config ─────────────────────────────────────────────────────────── */
+
+/**
+ * The configured channel ids, in admin order. `channels` is the multiselect
+ * (an array); a `channel` string is what 1.0.0 saved and is honoured as a
+ * one-item list until the admin saves the new field — the module never
+ * rewrites admin config itself.
+ */
+function configuredChannels(config) {
+  const out = [];
+  const add = (v) => {
+    const s = String(v ?? '').trim();
+    if (s && !out.includes(s)) out.push(s);
+  };
+  if (Array.isArray(config?.channels) && config.channels.length) config.channels.forEach(add);
+  else add(config?.channel);
+  return out;
+}
+
+/**
+ * Effective per-channel poll interval, in ms:
+ *
+ *   max(pollSeconds, ceil(channels × 60 / HISTORY_BUDGET_PER_MIN)) seconds
+ *
+ * so all channels together stay at or under the budget. With the default
+ * 2 s: 1 channel → 2 s, 2 → 3 s, 3 → 5 s, 4 → 6 s, 5 → 8 s, 10 → 15 s.
+ */
+function pollIntervalMs(pollSeconds, channelCount) {
+  const budgeted = Math.ceil((Math.max(1, channelCount) * 60) / HISTORY_BUDGET_PER_MIN);
+  return Math.max(MIN_POLL_S, pollSeconds, budgeted) * 1000;
+}
+
+/* ── Slack Web API ──────────────────────────────────────────────────── */
+
+class SlackError extends Error {
+  constructor(code, extra = {}) {
+    super(code);
+    this.code = code;
+    Object.assign(this, extra);
+  }
+}
+
+/** Call one Web API method. Form-encoded by default; chat.postMessage takes JSON. */
+async function slackCall(token, method, params = {}, { json = false } = {}) {
+  const headers = { Authorization: `Bearer ${token}`, Accept: 'application/json' };
+  let body;
+  if (json) {
+    headers['Content-Type'] = 'application/json; charset=utf-8';
+    body = JSON.stringify(params);
+  } else {
+    headers['Content-Type'] = 'application/x-www-form-urlencoded';
+    const form = new URLSearchParams();
+    for (const [k, v] of Object.entries(params)) {
+      if (v !== undefined && v !== null && v !== '') form.set(k, String(v));
+    }
+    body = form.toString();
+  }
+  let response;
+  try {
+    response = await fetch(`${API_BASE}/${method}`, {
+      method: 'POST',
+      headers,
+      body,
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+    });
+  } catch (err) {
+    throw new SlackError('network', { network: true, detail: err?.message || String(err) });
+  }
+  const scopes = response.headers.get('x-oauth-scopes');
+  if (scopes) tokenScopes = scopes;
+  if (response.status === 429) {
+    const retryAfter = Math.max(1, Math.trunc(Number(response.headers.get('retry-after'))) || 5);
+    throw new SlackError('ratelimited', { retryAfter, status: 429 });
+  }
+  let data;
+  try {
+    data = await response.json();
+  } catch {
+    throw new SlackError('bad_response', { status: response.status });
+  }
+  if (!response.ok || !data || data.ok !== true) {
+    const meta = data?.response_metadata;
+    throw new SlackError(String(data?.error || `http_${response.status}`), {
+      status: response.status,
+      needed: data?.needed ? String(data.needed) : '',
+      detail: Array.isArray(meta?.messages) ? meta.messages.join('; ') : '',
+    });
+  }
+  return data;
+}
+
+/** A Slack error as a sentence a tech can act on. */
+function describeError(err, ctx = {}) {
+  const who = ctx.name || 'The Slack account';
+  const chan = ctx.channel ? `#${ctx.channel}` : 'the channel';
+  switch (err?.code) {
+    case 'network': return `Slack unreachable: ${err.detail}`;
+    case 'ratelimited': return `Slack is rate-limiting — try again in ${err.retryAfter} s`;
+    case 'invalid_auth': return 'Slack rejected the token (invalid_auth) — paste a current User OAuth Token in Admin → Slack';
+    case 'not_authed': return 'No token reached Slack (not_authed) — paste the User OAuth Token in Admin → Slack';
+    case 'token_revoked': return 'The token was revoked (token_revoked) — Reinstall to Workspace in the Slack app and paste the new token';
+    case 'token_expired': return 'The token expired (token_expired) — Reinstall to Workspace in the Slack app and paste the new token';
+    case 'account_inactive': return 'The Slack account behind the token is deactivated (account_inactive)';
+    case 'missing_scope': return `The token is missing the ${err.needed || 'required'} scope (missing_scope) — add it under OAuth & Permissions, reinstall, paste the new token`;
+    case 'not_in_channel': return `${who} isn't a member of ${chan} — join it in Slack`;
+    case 'channel_not_found': return `${chan} was not found (channel_not_found) — pick it again in Admin → Slack → Channels`;
+    case 'is_archived': return `${chan} is archived (is_archived)`;
+    case 'msg_too_long': return 'Message too long for Slack (msg_too_long)';
+    case 'no_text': return 'Nothing to send (no_text)';
+    case 'restricted_action': return `Posting in ${chan} is restricted by a workspace admin (restricted_action)`;
+    case 'invalid_name': return 'Slack has no emoji by that name (invalid_name)';
+    case 'too_many_reactions': return 'Slack allows 23 different reactions on a message (too_many_reactions)';
+    case 'too_many_emoji': return 'That message already carries as many reactions as Slack allows (too_many_emoji)';
+    case 'message_not_found': return 'That message is gone (message_not_found)';
+    case 'bad_response': return `Slack answered with something that isn't JSON (HTTP ${err.status})`;
+    default: return `Slack error: ${err?.code || err?.message || err}${err?.detail ? ` — ${err.detail}` : ''}`;
+  }
+}
+
+/** Errors that no amount of retrying fixes — config has to change. */
+function isConfigError(err) {
+  return ['invalid_auth', 'not_authed', 'token_revoked', 'token_expired', 'account_inactive', 'missing_scope', 'channel_not_found'].includes(err?.code);
+}
+
+/* ── mrkdwn → plain text with a few inline marks ────────────────────── */
+
+/* ── emoji: Slack's :codes: → characters; the workspace's custom set; images ── */
+
+/** Slack's short names → emoji — modules/slack/emoji.json, built from iamcal/emoji-data (MIT). */
+const EMOJI_NAMES = require('./emoji.json').names;
+/** One code as it sits between colons: "+1", "+1::skin-tone-3", "party_parrot". */
+const EMOJI_CODE_RE = /^([a-z0-9_+-]{1,100})(?:::(skin-tone-[2-6]))?$/i;
+/** How long the workspace's custom emoji list is believed before emoji.list is asked again. */
+const EMOJI_LIST_TTL_MS = 60 * 60 * 1000;
+let emojiReverse = null; // character (variation selector stripped) → the name Slack knows it by
+
+/** The character for a standard code, '' for a custom or unknown one. */
+function emojiChar(code) {
+  const m = EMOJI_CODE_RE.exec(String(code || ''));
+  if (!m) return '';
+  const base = EMOJI_NAMES[m[1].toLowerCase()];
+  if (!base) return '';
+  const tone = m[2] ? EMOJI_NAMES[m[2].toLowerCase()] : '';
+  return tone ? base.replace(/\uFE0F/g, '') + tone : base;
+}
+
+/** The short name for a character ('' if Slack has none) — a reaction needs the name, not the glyph. */
+function emojiName(char) {
+  if (!emojiReverse) {
+    emojiReverse = new Map();
+    for (const [name, ch] of Object.entries(EMOJI_NAMES)) {
+      if (name.startsWith('skin-tone-')) continue;
+      const key = ch.replace(/\uFE0F/g, '');
+      if (!emojiReverse.has(key)) emojiReverse.set(key, name); // keys are sorted: "+1" wins over "thumbsup"
+    }
+  }
+  const s = String(char || '').replace(/\uFE0F/g, '');
+  const tone = /[\u{1F3FB}-\u{1F3FF}]$/u.exec(s);
+  if (tone) {
+    const base = emojiReverse.get(s.slice(0, -tone[0].length));
+    const toneName = Object.keys(EMOJI_NAMES).find((n) => n.startsWith('skin-tone-') && EMOJI_NAMES[n] === tone[0]);
+    return base && toneName ? `${base}::${toneName}` : '';
+  }
+  return emojiReverse.get(s) || '';
+}
+
+/**
+ * The admin's "Quick emojis" — "👍 🙏 :white_check_mark: :party_parrot:" →
+ * [{ name, char }]. A standard emoji gets both; a custom code keeps its name
+ * and no character (the browser draws the image); a glyph Slack has no name
+ * for can be sent but not reacted with (name ''). Eight at most.
+ */
+function parseQuickEmojis(text) {
+  const out = [];
+  for (const tok of String(text || '').split(/\s+/).filter(Boolean)) {
+    const code = /^:([^:\s]+(?:::skin-tone-[2-6])?):$/i.exec(tok);
+    if (code) {
+      const name = code[1].toLowerCase();
+      if (EMOJI_CODE_RE.test(name)) out.push({ name, char: emojiChar(name) });
+    } else out.push({ name: emojiName(tok), char: tok });
+    if (out.length >= 8) break;
+  }
+  return out;
+}
+
+/* Avatars and custom emoji are images on Slack's CDN; browsers only talk to
+   ProdDash, so the module fetches them and keeps them a while. */
+const IMAGE_CACHE_MAX = 400;
+const IMAGE_TTL_MS = 6 * 60 * 60 * 1000;
+const IMAGE_MAX_BYTES = 2 * 1024 * 1024;
+const imageCache = new Map(); // url → { buf, type, at } — module-wide, survives a re-init
+const imageInFlight = new Map();
+
+function fetchImage(url) {
+  const hit = imageCache.get(url);
+  if (hit && Date.now() - hit.at < IMAGE_TTL_MS) return Promise.resolve(hit);
+  if (imageInFlight.has(url)) return imageInFlight.get(url);
+  const p = (async () => {
+    const response = await fetch(url, { signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS), redirect: 'follow' });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const type = String(response.headers.get('content-type') || 'image/png').split(';')[0].trim();
+    if (!type.startsWith('image/')) throw new Error(`not an image (${type})`);
+    const buf = Buffer.from(await response.arrayBuffer());
+    if (buf.length > IMAGE_MAX_BYTES) throw new Error('too large');
+    if (imageCache.size >= IMAGE_CACHE_MAX) imageCache.delete(imageCache.keys().next().value);
+    const entry = { buf, type, at: Date.now() };
+    imageCache.set(url, entry);
+    return entry;
+  })().finally(() => imageInFlight.delete(url));
+  imageInFlight.set(url, p);
+  return p;
+}
+
+/** Only https, or plain http on this machine (the mock) — never a URL a message could smuggle in. */
+function imageUrlAllowed(url) {
+  try {
+    const u = new URL(String(url || ''));
+    return u.protocol === 'https:' || (u.protocol === 'http:' && ['127.0.0.1', 'localhost', '[::1]'].includes(u.hostname));
+  } catch {
+    return false;
+  }
+}
+
+/** Answer with the image at `url`: 404 with none, 502 when the CDN fails — the <img> then falls back. */
+async function serveImage(res, url) {
+  if (!imageUrlAllowed(url)) {
+    res.writeHead(404, { 'Content-Type': 'text/plain', 'Cache-Control': 'no-store' });
+    return void res.end('No image');
+  }
+  try {
+    const img = await fetchImage(url);
+    res.writeHead(200, { 'Content-Type': img.type, 'Content-Length': img.buf.length, 'Cache-Control': 'private, max-age=3600' });
+    res.end(img.buf);
+  } catch {
+    res.writeHead(502, { 'Content-Type': 'text/plain', 'Cache-Control': 'no-store' });
+    res.end('Image unavailable');
+  }
+}
+
+function unescapeSlack(s) {
+  return s.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+}
+
+/**
+ * Slack mrkdwn → plain text. Mentions, channel links, broadcasts and URLs are
+ * spelled out; *bold* _italic_ ~strike~ `code` markers are kept for the
+ * client to style; standard :codes: become their emoji, and a custom one
+ * stays as :code: for the client to draw from the workspace's set.
+ */
+function renderMrkdwn(raw, lookupUser, lookupChannel) {
+  let text = String(raw || '');
+  text = text.replace(/<([^<>]+)>/g, (m, inner) => {
+    if (inner.startsWith('@')) {
+      const [id, label] = inner.slice(1).split('|');
+      return '@' + (label || lookupUser(id) || id);
+    }
+    if (inner.startsWith('#')) {
+      const [id, label] = inner.slice(1).split('|');
+      return '#' + (label || lookupChannel(id) || id);
+    }
+    if (inner.startsWith('!')) {
+      const [cmd, label] = inner.slice(1).split('|');
+      if (cmd.startsWith('subteam^')) return label ? (label.startsWith('@') ? label : '@' + label) : '@group';
+      if (cmd.startsWith('date^')) {
+        const secs = Number(cmd.split('^')[1]);
+        return label || (secs ? new Date(secs * 1000).toLocaleString() : 'date');
+      }
+      return '@' + (label || cmd);
+    }
+    const [url, label] = inner.split('|');
+    if (label && label !== url) return `${label} (${url})`;
+    return url.replace(/^mailto:/, '');
+  });
+  text = unescapeSlack(text);
+  text = text.replace(/:([a-z0-9_+-]+(?:::skin-tone-[2-6])?):/gi, (m, code) => emojiChar(code) || m);
+  return text;
+}
+
+/** Text from a blocks-only message (section / context / rich_text). */
+function textFromBlocks(blocks) {
+  const out = [];
+  const walk = (node) => {
+    if (!node || typeof node !== 'object') return;
+    if (Array.isArray(node)) return void node.forEach(walk);
+    if (typeof node.text === 'string' && (node.type === 'text' || node.type === 'mrkdwn' || node.type === 'plain_text')) {
+      out.push(node.text);
+      return;
+    }
+    if (node.type === 'link') return void out.push(node.text || node.url || '');
+    if (node.type === 'emoji' && node.name) return void out.push(`:${node.name}:`);
+    if (node.type === 'user' && node.user_id) return void out.push(`<@${node.user_id}>`);
+    if (node.type === 'channel' && node.channel_id) return void out.push(`<#${node.channel_id}>`);
+    if (node.type === 'broadcast' && node.range) return void out.push(`<!${node.range}>`);
+    for (const key of ['text', 'elements', 'fields', 'title']) if (node[key]) walk(node[key]);
+  };
+  walk(blocks);
+  return out.join(' ').replace(/\s+\n/g, '\n').trim();
+}
+
+/* ── small helpers ──────────────────────────────────────────────────── */
+
+function sendJson(res, code, body) {
+  res.writeHead(code, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(JSON.stringify(body));
+}
+
+function readJson(req) {
+  return new Promise((resolve, reject) => {
+    let data = '';
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > BODY_LIMIT_BYTES) {
+        reject(new Error('Request body too large.'));
+        req.destroy();
+        return;
+      }
+      data += chunk;
+    });
+    req.on('end', () => {
+      if (!data.trim()) return resolve({});
+      try {
+        const body = JSON.parse(data);
+        resolve(body && typeof body === 'object' ? body : {});
+      } catch {
+        reject(new Error('Malformed JSON.'));
+      }
+    });
+    req.on('error', reject);
+  });
+}
+
+/** Route handlers are async — the shell only catches synchronous throws. */
+function guard(fn) {
+  return (req, res) => {
+    Promise.resolve()
+      .then(() => fn(req, res))
+      .catch((err) => {
+        if (!res.headersSent) sendJson(res, 500, { error: err?.message || String(err) });
+        else try { res.end(); } catch { /* gone */ }
+      });
+  };
+}
+
+function bearer(req) {
+  const m = /^Bearer\s+([A-Za-z0-9]+)\s*$/.exec(String(req.headers.authorization || ''));
+  return m ? m[1] : '';
+}
+
+function clientIp(req) {
+  return String(req.socket?.remoteAddress || '');
+}
+
+/** Constant-time PIN compare (lengths are folded in after the timing-safe step). */
+function pinMatches(given, expected) {
+  const a = Buffer.alloc(16);
+  const b = Buffer.alloc(16);
+  a.write(String(given).slice(0, 16));
+  b.write(String(expected).slice(0, 16));
+  const same = crypto.timingSafeEqual(a, b);
+  return same && given.length === expected.length;
+}
+
+/**
+ * "Label | Message | #channel" per line. A line with no "|" is both its label
+ * and its message; the channel (optional) is a name the account can see —
+ * a reply that carries one always goes there, whatever transcript is selected.
+ */
+function parseQuickReplies(text) {
+  const out = [];
+  for (const rawLine of String(text || '').split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (!line) continue;
+    const parts = line.split('|').map((p) => p.trim());
+    const label = parts[0];
+    const message = parts.length > 1 && parts[1] ? parts[1] : label;
+    const channel = parts.length > 2 ? parts[2].replace(/^#/, '') : '';
+    if (!label || !message) continue;
+    out.push({ label, message, channel });
+  }
+  return out;
+}
+
+const SYSTEM_SUBTYPES = new Set([
+  'channel_join', 'channel_leave', 'channel_topic', 'channel_purpose', 'channel_name',
+  'channel_archive', 'channel_unarchive', 'group_join', 'group_leave', 'group_topic',
+  'group_purpose', 'group_name', 'pinned_item', 'unpinned_item', 'bot_add', 'bot_remove',
+  'sh_room_created', 'reminder_add', 'huddle_thread',
+]);
+
+/* ── the module ─────────────────────────────────────────────────────── */
+
+module.exports = {
+  init({ config, log }) {
+    /* ── config ── */
+    const token = String(config.token || '').trim();
+    const sendAs = String(config.sendAs || '').trim();
+    const channelIds = configuredChannels(config);
+    const pollSeconds = Math.max(MIN_POLL_S, Number(config.pollSeconds) || 2);
+    const pollMs = pollSeconds * 1000;
+    const intervalMs = pollIntervalMs(pollSeconds, channelIds.length);
+    const historyCount = Math.min(HISTORY_MAX, Math.max(HISTORY_MIN, Math.trunc(Number(config.historyCount)) || 40));
+    const includeReplies = Boolean(config.includeReplies);
+    const threadFetchesPerPoll = Math.max(1, Math.floor(THREAD_FETCHES_PER_POLL / Math.max(1, channelIds.length)));
+    const sendEnabled = Boolean(config.sendEnabled);
+    const pin = String(config.pin || '').trim();
+    const pinOk = PIN_RE.test(pin);
+    const idleMs = Math.min(240, Math.max(1, Number(config.pinIdleMinutes) || 10)) * 60 * 1000;
+    const quickReplies = parseQuickReplies(config.quickReplies);
+    const quickEmojis = parseQuickEmojis(config.quickEmojis);
+
+    /* ── state (all inside this closure so a re-init starts clean) ── */
+    let stopped = false;
+    let identity = null;        // { kind: 'user'|'bot', name, handle, userId, team, botId }
+    let authError = '';
+    let authPromise = null;     // one auth.test in flight, shared by every poller
+    let rateLimitedUntil = 0;   // a 429 applies to the token, so every poller waits
+    const pollers = new Map();  // channel id -> poller (configured order)
+    const users = new Map();    // user id -> { name, at }
+    const pendingUsers = new Set();
+    const channelNames = new Map(); // channel id -> name (from list/info calls)
+    let channelList = { at: 0, channels: [] };
+    let channelListPromise = null;
+    let lastSig = '';
+    let lastInterest = Date.now();
+    const epoch = Date.now();   // the phase-locked slots count from here
+    const streams = new Set();
+    const unlocks = new Map();     // token -> { expiresAt, lastSendAt, ip }
+    const pinAttempts = new Map(); // ip -> { count, lockedUntil }
+
+    /**
+     * One channel's poller: its own window, thread cache, timer and error,
+     * sharing the token, the name caches and the SSE fan-out with the rest.
+     */
+    function makePoller(id, index) {
+      const ch = {
+        id,
+        index,
+        name: '',            // from conversations.info (or the channel list)
+        isMember: null,      // null until conversations.info has answered
+        isPrivate: false,
+        checked: false,      // conversations.info succeeded at least once
+        error: '',           // one sentence a tech can act on; '' while fine
+        errorKind: '',       // 'config' | 'membership' | 'poll' — decides the retry
+        lastPollAt: 0,
+        periodMs: intervalMs, // the cadence the last schedule used (for staleness)
+        rawWindow: [],       // conversations.history messages, as Slack sent them (newest first)
+        threads: new Map(),  // parent ts -> { latestReply, replyCount, replies: [raw…] }
+        messagesCache: null, // normalised window, rebuilt when it or a name changed
+        timer: null,
+        polling: false,
+        pollAgain: false,
+        settleFirst: null,
+      };
+      ch.firstRead = new Promise((resolve) => { ch.settleFirst = resolve; });
+      return ch;
+    }
+    channelIds.forEach((id, index) => pollers.set(id, makePoller(id, index)));
+
+    /* ── names ── */
+    function lookupUser(id) {
+      if (!id) return '';
+      const hit = users.get(id);
+      if (hit && Date.now() - hit.at < USER_TTL_MS) return hit.name;
+      pendingUsers.add(id);
+      return hit ? hit.name : '';
+    }
+
+    function lookupChannel(id) {
+      return channelNames.get(id) || pollers.get(id)?.name || '';
+    }
+
+    /** A user's picture as Slack lists it (the 72 px one fits a transcript row). */
+    function profileImage(u) {
+      const p = u?.profile || {};
+      return String(p.image_72 || p.image_48 || p.image_32 || p.image_original || '');
+    }
+
+    /* Bot messages carry their own icon; remembered by bot so a later message
+       from the same bot without icons (a plain bot_message) still has one. */
+    const botIcons = new Map(); // bot id / username → image url
+    function botIconOf(m) {
+      const icons = m.icons || m.bot_profile?.icons || {};
+      const url = String(icons.image_72 || icons.image_64 || icons.image_48 || icons.image_36 || '');
+      const key = String(m.bot_id || m.username || m.bot_profile?.id || 'bot');
+      if (url) botIcons.set(key, url);
+      const emoji = icons.emoji ? emojiChar(String(icons.emoji).replace(/^:|:$/g, '')) : '';
+      return { key, url: url || botIcons.get(key) || '', emoji };
+    }
+
+    /** [{ name, count, me }] for a message's reactions, or nothing. `me` = this account reacted. */
+    function reactionsOf(m) {
+      if (!Array.isArray(m.reactions) || !m.reactions.length) return undefined;
+      const meId = identity?.userId || '';
+      const out = [];
+      for (const r of m.reactions) {
+        const name = String(r?.name || '');
+        if (!EMOJI_CODE_RE.test(name)) continue;
+        const users = Array.isArray(r.users) ? r.users : [];
+        const count = Math.max(0, Math.trunc(Number(r.count)) || users.length);
+        if (count > 0) out.push({ name, count, me: Boolean(meId && users.includes(meId)) });
+      }
+      return out.length ? out : undefined;
+    }
+
+    /* ── the workspace's custom emoji (emoji.list, hourly) ── */
+    let customEmoji = new Map(); // name → { url } | { char } (an alias of a standard emoji)
+    let customEmojiSig = '';
+    let emojiVersion = 0;        // bumps when the set changes; tiles refetch /emoji then
+    let emojiCheckedAt = 0;
+    let emojiPromise = null;
+    let emojiScopeMissing = false;
+
+    function loadCustomEmoji() {
+      if (emojiScopeMissing || Date.now() - emojiCheckedAt < EMOJI_LIST_TTL_MS) return Promise.resolve();
+      if (!emojiPromise) {
+        emojiPromise = (async () => {
+          emojiCheckedAt = Date.now();
+          const data = await slackCall(token, 'emoji.list', {});
+          const raw = data.emoji && typeof data.emoji === 'object' ? data.emoji : {};
+          const resolve = (name, depth) => {
+            const v = raw[name];
+            if (typeof v !== 'string' || depth > 5) return null;
+            if (v.startsWith('alias:')) {
+              const to = v.slice('alias:'.length);
+              if (to in raw) return resolve(to, depth + 1);
+              const ch = emojiChar(to);
+              return ch ? { char: ch } : null;
+            }
+            return imageUrlAllowed(v) ? { url: v } : null;
+          };
+          const next = new Map();
+          for (const name of Object.keys(raw).sort()) {
+            if (!EMOJI_CODE_RE.test(name) || name.includes('::')) continue;
+            const e = resolve(name, 0);
+            if (e) next.set(name, e);
+          }
+          const sig = JSON.stringify([...next]);
+          if (sig !== customEmojiSig) {
+            customEmoji = next;
+            customEmojiSig = sig;
+            emojiVersion += 1;
+            invalidateAll();
+            log(`${next.size} custom emoji in the workspace`);
+          }
+        })().catch((err) => {
+          if (err.code === 'missing_scope') {
+            emojiScopeMissing = true;
+            log('custom emoji stay as :codes: — the token lacks the emoji:read scope (add it under OAuth & Permissions, reinstall, paste the new token); standard emoji are unaffected');
+          } else {
+            emojiCheckedAt = Date.now() - EMOJI_LIST_TTL_MS + RETRY_NETWORK_MS; // ask again soon
+            if (err.code !== 'ratelimited') log(`emoji.list: ${describeError(err, { name: identity?.name })}`);
+          }
+        }).finally(() => { emojiPromise = null; });
+      }
+      return emojiPromise;
+    }
+
+    function invalidateAll() {
+      for (const ch of pollers.values()) ch.messagesCache = null;
+    }
+
+    async function resolveUsers() {
+      const ids = [...pendingUsers].slice(0, USER_LOOKUPS_PER_POLL);
+      if (!ids.length) return false;
+      let changed = false;
+      await Promise.all(ids.map(async (id) => {
+        pendingUsers.delete(id);
+        try {
+          const data = await slackCall(token, 'users.info', { user: id });
+          const u = data.user || {};
+          const name = String(u.profile?.display_name || u.real_name || u.profile?.real_name || u.name || id);
+          users.set(id, { name, image: profileImage(u), at: Date.now() });
+          changed = true;
+        } catch (err) {
+          // Unknown or deactivated: remember the raw id for a while so we
+          // don't ask again every poll. Rate limits and outages retry.
+          if (err.code !== 'network' && err.code !== 'ratelimited') users.set(id, { name: id, at: Date.now() });
+        }
+      }));
+      if (changed) invalidateAll();
+      return changed;
+    }
+
+    /* ── channel list (admin options, #name → id, <#C…> rendering) ── */
+    async function loadChannelList(force = false) {
+      if (!force && Date.now() - channelList.at < CHANNEL_LIST_TTL_MS) return channelList.channels;
+      if (channelListPromise) return channelListPromise;
+      channelListPromise = (async () => {
+        const all = [];
+        let cursor = '';
+        for (let page = 0; page < 10; page += 1) {
+          const data = await slackCall(token, 'conversations.list', {
+            types: 'public_channel,private_channel',
+            exclude_archived: 'true',
+            limit: 200,
+            cursor: cursor || undefined,
+          });
+          for (const c of data.channels || []) {
+            if (!c?.id) continue;
+            channelNames.set(String(c.id), String(c.name || ''));
+            all.push({ id: String(c.id), name: String(c.name || ''), isMember: Boolean(c.is_member), isPrivate: Boolean(c.is_private) });
+          }
+          cursor = String(data.response_metadata?.next_cursor || '');
+          if (!cursor) break;
+        }
+        all.sort((a, b) => a.name.localeCompare(b.name));
+        channelList = { at: Date.now(), channels: all };
+        // A poller that hasn't heard from conversations.info yet can take its name from here.
+        for (const ch of pollers.values()) if (!ch.name && channelNames.get(ch.id)) ch.name = channelNames.get(ch.id);
+        invalidateAll();
+        return all;
+      })();
+      try {
+        return await channelListPromise;
+      } finally {
+        channelListPromise = null;
+      }
+    }
+
+    /** "#name" or a channel id → the channel id, or '' when the account can't see it. */
+    async function resolveChannelRef(ref) {
+      const s = String(ref || '').trim();
+      if (!s) return '';
+      if (/^[CG][A-Z0-9]{6,}$/.test(s)) return s;
+      const name = s.replace(/^#/, '').toLowerCase();
+      let list = await loadChannelList();
+      let hit = list.find((c) => c.name.toLowerCase() === name);
+      if (!hit) {
+        list = await loadChannelList(true);
+        hit = list.find((c) => c.name.toLowerCase() === name);
+      }
+      return hit ? hit.id : '';
+    }
+
+    /* ── normalisation ── */
+    function nameFor(m) {
+      if (m.subtype === 'bot_message' && m.username) return String(m.username);
+      if (m.user) {
+        const n = lookupUser(String(m.user));
+        if (n) return n;
+      }
+      if (m.bot_profile?.name) return String(m.bot_profile.name);
+      if (m.username) return String(m.username);
+      return String(m.user || m.bot_id || 'unknown');
+    }
+
+    function textFor(m) {
+      let text = renderMrkdwn(m.text, lookupUser, lookupChannel).trim();
+      if (!text && Array.isArray(m.attachments)) {
+        text = m.attachments
+          .map((a) => renderMrkdwn(a?.fallback || a?.text || a?.title || '', lookupUser, lookupChannel).trim())
+          .filter(Boolean)
+          .join('\n');
+      }
+      if (!text && Array.isArray(m.blocks)) text = renderMrkdwn(textFromBlocks(m.blocks), lookupUser, lookupChannel);
+      if (Array.isArray(m.files) && m.files.length) {
+        const files = m.files.map((f) => `[file: ${f?.title || f?.name || 'file'}]`).join(' ');
+        text = text ? `${text}\n${files}` : files;
+      }
+      return text;
+    }
+
+    function normalize(m, ch, parentTs = '') {
+      if (!m || typeof m !== 'object' || !m.ts) return null;
+      if (m.subtype === 'tombstone') return null;
+      const name = nameFor(m);
+      const system = SYSTEM_SUBTYPES.has(m.subtype || '');
+      const chanLabel = ch.name ? '#' + ch.name : 'the channel';
+      let text = textFor(m);
+      if (m.subtype === 'channel_join' || m.subtype === 'group_join') text = `${name} joined ${chanLabel}`;
+      else if (m.subtype === 'channel_leave' || m.subtype === 'group_leave') text = `${name} left ${chanLabel}`;
+      const icon = m.user ? null : botIconOf(m);
+      const out = {
+        id: String(m.ts),
+        ts: String(m.ts),
+        time: Math.round(Number(m.ts) * 1000) || Date.now(),
+        name,
+        text,
+        edited: Boolean(m.edited),
+        system,
+        subtype: String(m.subtype || ''),
+        bot: Boolean(m.bot_id) || m.subtype === 'bot_message',
+        me: Boolean(identity && m.user && m.user === identity.userId),
+        // the picture in the row: a user's profile image or a bot's icon, by
+        // key for GET /avatar/<key>; a bot with only an :emoji: icon shows that
+        avatar: m.user ? `u/${m.user}` : icon?.url ? `b/${icon.key}` : '',
+        avatarEmoji: icon?.emoji || '',
+        reactions: reactionsOf(m),
+      };
+      if (parentTs) out.parent = parentTs;
+      else {
+        out.replyCount = Math.max(0, Math.trunc(Number(m.reply_count)) || 0);
+        if (includeReplies && out.replyCount) {
+          const t = ch.threads.get(out.ts);
+          out.replies = t ? t.replies.map((r) => normalize(r, ch, out.ts)).filter(Boolean) : [];
+        }
+      }
+      return out;
+    }
+
+    function messagesOf(ch) {
+      if (!ch.messagesCache) {
+        ch.messagesCache = ch.rawWindow
+          .map((m) => normalize(m, ch))
+          .filter(Boolean)
+          .sort((a, b) => Number(a.ts) - Number(b.ts));
+      }
+      return ch.messagesCache;
+    }
+
+    function identityLabel() {
+      if (!identity) return '';
+      if (identity.kind === 'bot') return sendAs ? `${identity.name} (bot) as "${sendAs}"` : `${identity.name} (bot)`;
+      return identity.name;
+    }
+
+    function sendingAs() {
+      if (!identity) return '';
+      return identity.kind === 'bot' && sendAs ? sendAs : identity.name;
+    }
+
+    function labelOf(ch) {
+      return `#${ch.name || lookupChannel(ch.id) || ch.id}`;
+    }
+
+    function isStale(ch) {
+      return ch.lastPollAt > 0 && Date.now() - ch.lastPollAt > 3 * ch.periodMs + 5000;
+    }
+
+    /** One channel's status as its transcript tile shows it (token trouble folded in). */
+    function channelStatus(ch) {
+      if (!token) return { state: 'error', message: 'No Slack token — paste the location account’s User OAuth Token in Admin → Slack' };
+      if (authError) return { state: 'error', message: authError };
+      if (!identity) return { state: 'connecting', message: 'Checking the Slack token…' };
+      if (ch.error) return { state: 'error', message: ch.error };
+      if (!ch.lastPollAt) return { state: 'connecting', message: `${labelOf(ch)} · first read…` };
+      if (isStale(ch)) return { state: 'connecting', message: `${labelOf(ch)} · last read ${Math.round((Date.now() - ch.lastPollAt) / 1000)} s ago` };
+      return { state: 'ok', message: `${labelOf(ch)} · live` };
+    }
+
+    /** The admin health line: who, which channels, what's wrong, sending. */
+    function health() {
+      if (!token) return { status: 'error', message: 'No Slack token — paste the location account’s User OAuth Token in Admin → Slack' };
+      if (authError) return { status: 'error', message: authError };
+      if (!identity) return { status: 'connecting', message: 'Checking the Slack token…' };
+      const who = identityLabel();
+      const list = [...pollers.values()];
+      if (!list.length) return { status: 'error', message: `${who} · pick channels in Admin → Slack → Channels` };
+      const names = list.map(labelOf).join(', ');
+      const sending = !sendEnabled ? 'sending off' : !pinOk ? 'sending on — set a 4–8 digit PIN' : 'sending on';
+      const problems = [...new Set(list.filter((ch) => ch.error).map((ch) => (ch.error.includes(labelOf(ch)) ? ch.error : `${labelOf(ch)}: ${ch.error}`)))];
+      if (problems.length) return { status: 'error', message: `${who} · ${names} · ${problems.join(' · ')} · ${sending}` };
+      if (list.some((ch) => !ch.lastPollAt)) return { status: 'connecting', message: `${who} · ${names} · first read…` };
+      const stale = list.filter(isStale);
+      if (stale.length) {
+        const ago = stale.map((ch) => `${labelOf(ch)} last read ${Math.round((Date.now() - ch.lastPollAt) / 1000)} s ago`).join(', ');
+        return { status: 'connecting', message: `${who} · ${names} · ${ago}` };
+      }
+      const cadence = intervalMs > pollMs ? ` · every ${intervalMs / 1000} s (rate budget)` : '';
+      return { status: 'ok', message: `${who} · ${names}${cadence} · ${sending}` };
+    }
+
+    function channelView(ch) {
+      return {
+        id: ch.id,
+        name: ch.name || lookupChannel(ch.id) || '',
+        isMember: ch.isMember,
+        isPrivate: ch.isPrivate,
+        messages: messagesOf(ch),
+        lastPollAt: ch.lastPollAt,
+        pollAge: ch.lastPollAt ? Date.now() - ch.lastPollAt : null,
+        error: ch.error,
+        status: channelStatus(ch),
+      };
+    }
+
+    function snapshot() {
+      const h = health();
+      const channels = {};
+      let lastPollAt = 0;
+      for (const ch of pollers.values()) {
+        channels[ch.id] = channelView(ch);
+        lastPollAt = Math.max(lastPollAt, ch.lastPollAt);
+      }
+      return {
+        identity: identity
+          ? { kind: identity.kind, name: identity.name, team: identity.team, sendAs: identity.kind === 'bot' ? sendAs : '' }
+          : null,
+        sendingAs: sendingAs(),
+        channelOrder: [...pollers.keys()],
+        channels,
+        includeReplies,
+        historyCount,
+        pollSeconds: intervalMs / 1000,
+        sending: { enabled: sendEnabled, pinSet: pinOk, idleMinutes: idleMs / 60000 },
+        // the pad submits by itself once this many digits are in (never the PIN)
+        pinLength: pinOk ? pin.length : 0,
+        quickEmojis,
+        emojiVersion,
+        status: { state: h.status, message: h.message, lastPollAt },
+        apiBase: API_BASE,
+      };
+    }
+
+    /** Broadcast the snapshot when anything a tile shows has changed (ages don't count). */
+    function broadcastIfChanged() {
+      const snap = snapshot();
+      const sig = JSON.stringify(snap, (key, value) => (key === 'pollAge' || key === 'lastPollAt' ? undefined : value));
+      if (sig === lastSig) return;
+      lastSig = sig;
+      if (!streams.size) return;
+      const payload = `event: state\ndata: ${JSON.stringify(snap)}\n\n`;
+      for (const res of streams) {
+        try {
+          res.write(payload);
+        } catch {
+          streams.delete(res);
+        }
+      }
+    }
+
+    /* ── the poll loops: token → channel → history (+ threads, names) ── */
+    function watched() {
+      return streams.size > 0 || Date.now() - lastInterest < IDLE_AFTER_MS;
+    }
+
+    /**
+     * Delay to poller `index`'s next slot at cadence `periodMs`: slots are
+     * spread evenly across the period from `epoch`, so channels never read
+     * in a burst, and a slot that has just passed is skipped, not fired late.
+     */
+    function slotDelay(index, periodMs) {
+      const phase = Math.round((index * periodMs) / Math.max(1, pollers.size));
+      const elapsed = Date.now() - epoch;
+      const k = Math.floor((elapsed - phase) / periodMs) + 1;
+      let delay = phase + k * periodMs - elapsed;
+      if (delay < MIN_SLOT_GAP_MS) delay += periodMs;
+      return delay;
+    }
+
+    /** `plainMs` for an error retry; without it, the regular phase-locked cadence. */
+    function scheduleNext(ch, plainMs = null) {
+      if (stopped) return;
+      clearTimeout(ch.timer);
+      let delay = plainMs;
+      if (delay === null) {
+        ch.periodMs = watched() ? intervalMs : Math.max(intervalMs, IDLE_POLL_S * 1000);
+        delay = slotDelay(ch.index, ch.periodMs);
+      }
+      ch.timer = setTimeout(() => tick(ch), delay);
+      ch.timer.unref?.();
+    }
+
+    function pollSoon(ch, delay = 250) {
+      if (stopped) return;
+      if (ch.polling) {
+        ch.pollAgain = true;
+        return;
+      }
+      clearTimeout(ch.timer);
+      ch.timer = setTimeout(() => tick(ch), delay);
+      ch.timer.unref?.();
+    }
+
+    async function checkAuth() {
+      const data = await slackCall(token, 'auth.test', {});
+      const userId = String(data.user_id || '');
+      const id = {
+        kind: data.bot_id ? 'bot' : 'user',
+        name: String(data.user || 'Slack'),
+        handle: String(data.user || ''),
+        userId,
+        team: String(data.team || ''),
+        botId: data.bot_id ? String(data.bot_id) : '',
+      };
+      // The handle is "apollo.beach"; the display name is "Apollo Beach".
+      if (userId) {
+        try {
+          const u = await slackCall(token, 'users.info', { user: userId });
+          const name = String(u.user?.profile?.display_name || u.user?.real_name || u.user?.profile?.real_name || '').trim();
+          if (name) id.name = name;
+          users.set(userId, { name: id.name, image: profileImage(u.user), at: Date.now() });
+        } catch { /* the handle will do */ }
+      }
+      identity = id;
+      authError = '';
+      invalidateAll();
+      log(`token belongs to ${identityLabel()} (${id.team || 'team unknown'})${id.kind === 'bot' && !sendAs ? ' — messages will read as the app; set "Send as" to name the location' : ''}`);
+      if (tokenScopes) {
+        const have = new Set(tokenScopes.split(',').map((x) => x.trim()));
+        const missing = OPTIONAL_SCOPES.filter(([scope]) => !have.has(scope));
+        log(`token scopes: ${tokenScopes}`);
+        if (missing.length) {
+          log(`without ${missing.map(([scope, what]) => `${scope} (${what})`).join(' and ')} — add under OAuth & Permissions → User Token Scopes, Reinstall to Workspace as this account, paste the token it shows`);
+        }
+      }
+    }
+
+    /** Every poller wants the identity; the first to ask makes the one call. */
+    function ensureAuth() {
+      if (identity) return Promise.resolve();
+      if (!authPromise) {
+        authPromise = checkAuth().finally(() => { authPromise = null; });
+      }
+      return authPromise;
+    }
+
+    async function checkChannel(ch) {
+      const data = await slackCall(token, 'conversations.info', { channel: ch.id });
+      const c = data.channel || {};
+      ch.name = String(c.name || c.name_normalized || ch.id);
+      ch.isPrivate = Boolean(c.is_private);
+      ch.isMember = c.is_member !== false;
+      ch.checked = true;
+      channelNames.set(ch.id, ch.name);
+      invalidateAll();
+      if (!ch.isMember) throw new SlackError('not_in_channel');
+    }
+
+    async function readHistory(ch) {
+      const data = await slackCall(token, 'conversations.history', { channel: ch.id, limit: historyCount });
+      const messages = Array.isArray(data.messages) ? data.messages.filter((m) => m && m.ts) : [];
+      ch.rawWindow = messages;
+      ch.messagesCache = null;
+      ch.lastPollAt = Date.now();
+      ch.isMember = true;
+
+      // Threads: parents in the window whose reply set changed since we
+      // last read it — oldest first, a few per poll.
+      const inWindow = new Set(messages.map((m) => String(m.ts)));
+      for (const ts of [...ch.threads.keys()]) if (!inWindow.has(ts)) ch.threads.delete(ts);
+      if (includeReplies) {
+        const stale = messages
+          .filter((m) => Number(m.reply_count) > 0)
+          .filter((m) => {
+            const t = ch.threads.get(String(m.ts));
+            return !t || t.latestReply !== String(m.latest_reply || '') || t.replyCount !== Number(m.reply_count);
+          })
+          .sort((a, b) => Number(a.ts) - Number(b.ts))
+          .slice(0, threadFetchesPerPoll);
+        for (const parent of stale) {
+          try {
+            const rep = await slackCall(token, 'conversations.replies', { channel: ch.id, ts: parent.ts, limit: THREAD_REPLIES_LIMIT });
+            const replies = (rep.messages || []).filter((r) => r && r.ts && String(r.ts) !== String(parent.ts));
+            ch.threads.set(String(parent.ts), { latestReply: String(parent.latest_reply || ''), replyCount: Number(parent.reply_count), replies });
+          } catch (err) {
+            if (err.code === 'ratelimited') throw err;
+            log(`${labelOf(ch)} thread ${parent.ts}: ${describeError(err, { name: identity?.name, channel: ch.name })}`);
+          }
+        }
+      }
+    }
+
+    /** Record a failed poll on its channel (or the token); returns the retry delay. */
+    function failed(ch, err) {
+      const text = describeError(err, { name: identity?.name, channel: ch.name || ch.id });
+      if (!identity) {
+        if (authError !== text) log(text);
+        authError = text;
+        return isConfigError(err) ? RETRY_CONFIG_MS : RETRY_NETWORK_MS;
+      }
+      let retry;
+      if (err.code === 'ratelimited') {
+        rateLimitedUntil = Date.now() + err.retryAfter * 1000;
+        ch.errorKind = 'poll';
+        retry = err.retryAfter * 1000 + 100 + ch.index * 100;
+      } else if (err.code === 'not_in_channel') {
+        ch.isMember = false;
+        ch.errorKind = 'membership';
+        retry = RETRY_MEMBERSHIP_MS;
+      } else if (isConfigError(err)) {
+        ch.errorKind = 'config';
+        retry = RETRY_CONFIG_MS;
+      } else {
+        ch.errorKind = 'poll';
+        retry = Math.max(intervalMs, RETRY_NETWORK_MS);
+      }
+      if (ch.error !== text) log(`${labelOf(ch)}: ${text}`);
+      ch.error = text;
+      return retry;
+    }
+
+    async function tick(ch) {
+      if (stopped || ch.polling) return;
+      ch.polling = true;
+      ch.pollAgain = false;
+      let retry = null; // a plain delay for error retries; null → the regular cadence
+      try {
+        const wait = rateLimitedUntil - Date.now();
+        if (wait > 0) {
+          retry = wait + 100 + ch.index * 100;
+        } else {
+          await ensureAuth();
+          await loadCustomEmoji();
+          if (!ch.checked || ch.errorKind === 'membership') await checkChannel(ch);
+          await readHistory(ch);
+          if (ch.error) log(`${labelOf(ch)}: reading again`);
+          ch.error = '';
+          ch.errorKind = '';
+          await resolveUsers();
+        }
+      } catch (err) {
+        retry = failed(ch, err);
+      } finally {
+        ch.polling = false;
+        if (ch.settleFirst) {
+          ch.settleFirst();
+          ch.settleFirst = null;
+        }
+        broadcastIfChanged();
+        if (ch.pollAgain) pollSoon(ch);
+        else scheduleNext(ch, retry);
+      }
+    }
+
+    /**
+     * tiles() names each transcript after its channel; right after boot the
+     * names are still on their way, so it waits (briefly) for the first
+     * conversations.info answers rather than baking "#C0123" into tile titles.
+     */
+    function namesReady() {
+      if (!token || authError || stopped) return Promise.resolve();
+      const pending = [...pollers.values()].filter((ch) => !ch.checked && !ch.error).map((ch) => ch.firstRead);
+      if (!pending.length) return Promise.resolve();
+      return Promise.race([
+        Promise.all(pending),
+        new Promise((resolve) => { setTimeout(resolve, NAMES_WAIT_MS).unref?.(); }),
+      ]);
+    }
+
+    /* ── unlock tokens ── */
+    function sweepUnlocks() {
+      const now = Date.now();
+      for (const [t, u] of unlocks) if (u.expiresAt <= now) unlocks.delete(t);
+      for (const [ip, a] of pinAttempts) if (a.lockedUntil && a.lockedUntil <= now && !a.count) pinAttempts.delete(ip);
+    }
+
+    /** The unlock behind a request, or null (the client re-asks for the PIN). */
+    function unlockFor(req) {
+      const t = bearer(req);
+      const u = t ? unlocks.get(t) : null;
+      if (!u) return null;
+      if (u.expiresAt <= Date.now()) {
+        unlocks.delete(t);
+        return null;
+      }
+      return { token: t, ...u };
+    }
+
+    /** Everything a send needs before Slack is asked; answers the response itself when refusing. */
+    function sendGate(req, res) {
+      if (!sendEnabled) {
+        sendJson(res, 403, { error: 'Sending is off — turn it on in Admin → Slack → Sending', code: 'sending_off' });
+        return null;
+      }
+      if (!pinOk) {
+        sendJson(res, 403, { error: 'Set a PIN in Admin → Slack → Sending', code: 'no_pin' });
+        return null;
+      }
+      const u = unlockFor(req);
+      if (!u) {
+        sendJson(res, 401, { error: 'Locked — enter the PIN', code: 'locked' });
+        return null;
+      }
+      return u;
+    }
+
+    /**
+     * The channel a browser asked to post to. Only a configured channel id is
+     * accepted — the selection is a choice among the admin's channels, never
+     * a way to reach some other one. Nothing asked for → the first configured.
+     */
+    function chooseTarget(requested) {
+      const s = String(requested ?? '').trim();
+      if (s) {
+        if (pollers.has(s)) return { id: s };
+        const name = lookupChannel(s);
+        return { error: `${name ? `#${name}` : s} isn't one of the configured channels — pick it in Admin → Slack → Channels` };
+      }
+      if (!channelIds.length) return { error: 'No channel configured — pick channels in Admin → Slack → Channels' };
+      return { id: channelIds[0] };
+    }
+
+    async function postMessage(targetChannelId, text) {
+      const params = { channel: targetChannelId, text };
+      if (identity?.kind === 'bot' && sendAs) {
+        params.username = sendAs;
+        params.icon_emoji = DEFAULT_ICON;
+      }
+      return slackCall(token, 'chat.postMessage', params, { json: true });
+    }
+
+    /**
+     * Add or remove a reaction on behalf of an unlock — the same gate as a
+     * send, since it is the location's name on it. The message's channel must
+     * be one of the configured ones. `already_reacted` / `no_reaction` count
+     * as done: Slack already holds the state that was asked for.
+     */
+    async function react(req, res, unlock, { channel, ts, name, remove }) {
+      if (!identity || authError) {
+        return sendJson(res, 502, { error: authError || 'Slack token not checked yet — try again in a moment' });
+      }
+      const target = String(channel ?? '').trim() ? chooseTarget(channel) : { error: 'Which channel?' };
+      if (target.error) return sendJson(res, 400, { error: target.error, code: 'bad_channel' });
+      const stamp = String(ts ?? '').trim();
+      if (!/^\d{1,16}\.\d{1,9}$/.test(stamp)) return sendJson(res, 400, { error: 'Which message?' });
+      const code = String(name ?? '').trim().replace(/^:|:$/g, '').toLowerCase();
+      if (!EMOJI_CODE_RE.test(code)) return sendJson(res, 400, { error: 'Not an emoji name' });
+      const targetName = lookupChannel(target.id) || target.id;
+      try {
+        await slackCall(token, remove ? 'reactions.remove' : 'reactions.add', { channel: target.id, timestamp: stamp, name: code });
+      } catch (err) {
+        if (err.code !== 'already_reacted' && err.code !== 'no_reaction') {
+          const message = describeError(err, { name: identity.name, channel: targetName });
+          log(`reaction :${code}: in #${targetName} failed: ${message}`);
+          const status = ['invalid_name', 'too_many_reactions', 'too_many_emoji'].includes(err.code) ? 400
+            : err.code === 'message_not_found' ? 404 : 502;
+          return sendJson(res, status, { error: message, code: err.code });
+        }
+      }
+      const u = unlocks.get(unlock.token);
+      if (u) u.expiresAt = Date.now() + idleMs;
+      log(`${remove ? 'removed' : 'added'} :${code}: on ${stamp} in #${targetName} as ${sendingAs()}`);
+      if (pollers.has(target.id)) pollSoon(pollers.get(target.id));
+      return sendJson(res, 200, { ok: true, expiresAt: u ? u.expiresAt : unlock.expiresAt, channel: `#${targetName}` });
+    }
+
+    /**
+     * Post on behalf of an unlock; answers the response. `targetId` is an
+     * already-validated configured channel; `presetChannel` (a quick reply's
+     * own "| #channel") overrides it.
+     */
+    async function deliver(req, res, unlock, { text, targetId, presetChannel = '', what }) {
+      const now = Date.now();
+      if (now - unlock.lastSendAt < SEND_MIN_INTERVAL_MS) {
+        return sendJson(res, 429, { error: 'One message per second — try again', code: 'too_fast' });
+      }
+      unlocks.get(unlock.token).lastSendAt = now;
+      if (!identity || authError) {
+        return sendJson(res, 502, { error: authError || 'Slack token not checked yet — try again in a moment' });
+      }
+      let target = targetId || '';
+      if (presetChannel) {
+        try {
+          target = await resolveChannelRef(presetChannel);
+        } catch (err) {
+          return sendJson(res, 502, { error: describeError(err, { name: identity.name, channel: presetChannel }) });
+        }
+        if (!target) return sendJson(res, 400, { error: `No channel named #${String(presetChannel).replace(/^#/, '')} that ${identity.name} can see` });
+      }
+      if (!target) return sendJson(res, 400, { error: 'No channel configured — pick channels in Admin → Slack → Channels' });
+      const targetName = lookupChannel(target) || target;
+      try {
+        const data = await postMessage(target, text);
+        const u = unlocks.get(unlock.token);
+        if (u) u.expiresAt = Date.now() + idleMs;
+        const preview = text.replace(/\s+/g, ' ').slice(0, 60);
+        log(`${what} → #${targetName} as ${sendingAs()}: "${preview}${text.length > 60 ? '…' : ''}"`);
+        if (pollers.has(target)) pollSoon(pollers.get(target));
+        return sendJson(res, 200, {
+          ok: true,
+          ts: String(data.ts || ''),
+          channel: `#${targetName}`,
+          channelId: target,
+          sendingAs: sendingAs(),
+          expiresAt: u ? u.expiresAt : unlock.expiresAt,
+        });
+      } catch (err) {
+        const message = describeError(err, { name: sendingAs() || identity.name, channel: targetName });
+        log(`${what} to #${targetName} failed: ${message}`);
+        return sendJson(res, err.code === 'ratelimited' ? 429 : 502, { error: message, code: err.code || 'slack_error' });
+      }
+    }
+
+    /* ── go ── */
+    const heartbeat = setInterval(() => {
+      for (const res of streams) {
+        try {
+          res.write(': ping\n\n');
+        } catch {
+          streams.delete(res);
+        }
+      }
+    }, HEARTBEAT_MS);
+    heartbeat.unref?.();
+    const sweeper = setInterval(sweepUnlocks, UNLOCK_SWEEP_MS);
+    sweeper.unref?.();
+
+    if (!token) log('no Slack token configured — paste one in /admin');
+    else {
+      if (sendEnabled && !pinOk) log('sending is on but no valid PIN (4–8 digits) is set — send tiles stay locked');
+      if (!channelIds.length) log('no channels configured — pick some in /admin → Slack → Channels');
+      else {
+        if (!Array.isArray(config.channels) || !config.channels.length) {
+          log(`using the single channel saved by an earlier version (${channelIds[0]}) — pick it under Channels in /admin to keep it`);
+        }
+        const budgeted = Math.ceil((channelIds.length * 60) / HISTORY_BUDGET_PER_MIN);
+        log(`polling ${channelIds.length} channel${channelIds.length === 1 ? '' : 's'} every ${intervalMs / 1000} s each — max(${pollSeconds} s, ceil(${channelIds.length}×60/${HISTORY_BUDGET_PER_MIN}) = ${budgeted} s) keeps history reads at ≤${HISTORY_BUDGET_PER_MIN}/min`);
+        for (const ch of pollers.values()) scheduleNext(ch, FIRST_READ_MS + ch.index * FIRST_READ_STAGGER_MS);
+      }
+    }
+
+    current = {
+      streams,
+      snapshot,
+      health,
+      quickReplies,
+      sendGate,
+      deliver,
+      react,
+      /** Everything a tile needs to draw emoji: the shipped table plus the workspace's own. */
+      emojiTable() {
+        const custom = {};
+        for (const [name, e] of customEmoji) {
+          custom[name] = e.url ? { url: `/api/modules/slack/emoji-image/${encodeURIComponent(name)}` } : { char: e.char };
+        }
+        return { standard: EMOJI_NAMES, custom, version: emojiVersion };
+      },
+      customEmojiUrl: (name) => customEmoji.get(String(name || ''))?.url || '',
+      /** "u/U123" → that user's profile image; "b/<bot>" → that bot's icon. */
+      avatarUrl(key) {
+        const [kind, id] = String(key || '').split('/');
+        if (kind === 'u') return users.get(id)?.image || '';
+        if (kind === 'b') return botIcons.get(id) || '';
+        return '';
+      },
+      unlockFor,
+      chooseTarget,
+      namesReady,
+      touch() { lastInterest = Date.now(); },
+      wake() {
+        lastInterest = Date.now();
+        if (!identity) return;
+        // Somebody is looking again: catch every channel up, one after another.
+        let n = 0;
+        for (const ch of pollers.values()) {
+          if (ch.checked && !ch.error && Date.now() - ch.lastPollAt > intervalMs) pollSoon(ch, 250 + 150 * n++);
+        }
+      },
+      loadChannelList,
+      channelIds,
+      channelName: (id) => lookupChannel(id),
+      pinOk,
+      sendEnabled,
+      identityName: () => identity?.name || '',
+      sendingAs,
+      unlock(req, res, given) {
+        if (!sendEnabled) return sendJson(res, 403, { error: 'Sending is off — turn it on in Admin → Slack → Sending', code: 'sending_off' });
+        if (!pinOk) return sendJson(res, 403, { error: 'Set a PIN in Admin → Slack → Sending', code: 'no_pin' });
+        const ip = clientIp(req);
+        const now = Date.now();
+        let a = pinAttempts.get(ip);
+        if (a && a.lockedUntil > now) {
+          const secs = Math.ceil((a.lockedUntil - now) / 1000);
+          return sendJson(res, 429, { error: `Too many wrong PINs — locked for ${secs} s`, code: 'lockout', retryAfter: secs });
+        }
+        if (a && a.lockedUntil && a.lockedUntil <= now) a = null; // lockout served — clean slate
+        const str = String(given ?? '');
+        if (!PIN_RE.test(str) || !pinMatches(str, pin)) {
+          const count = (a ? a.count : 0) + 1;
+          if (count >= PIN_MAX_WRONG) {
+            pinAttempts.set(ip, { count: 0, lockedUntil: now + PIN_LOCKOUT_MS });
+            log(`wrong PIN ×${PIN_MAX_WRONG} from ${ip} — locked for ${PIN_LOCKOUT_MS / 1000} s`);
+            return sendJson(res, 429, { error: `Wrong PIN — locked for ${PIN_LOCKOUT_MS / 1000} s`, code: 'lockout', retryAfter: PIN_LOCKOUT_MS / 1000 });
+          }
+          pinAttempts.set(ip, { count, lockedUntil: 0 });
+          return sendJson(res, 401, { error: 'Wrong PIN', code: 'wrong_pin', triesLeft: PIN_MAX_WRONG - count });
+        }
+        pinAttempts.delete(ip);
+        const t = crypto.randomBytes(32).toString('hex');
+        const expiresAt = now + idleMs;
+        unlocks.set(t, { expiresAt, lastSendAt: 0, ip });
+        log(`unlocked from ${ip} (auto-lock after ${idleMs / 60000} min idle)`);
+        return sendJson(res, 200, { token: t, expiresAt, idleMs, sendingAs: sendingAs() });
+      },
+      lock(req, res) {
+        const t = bearer(req);
+        if (t) unlocks.delete(t);
+        return sendJson(res, 200, { ok: true });
+      },
+    };
+
+    return {
+      stop() {
+        stopped = true;
+        for (const ch of pollers.values()) {
+          clearTimeout(ch.timer);
+          if (ch.settleFirst) {
+            ch.settleFirst();
+            ch.settleFirst = null;
+          }
+        }
+        clearInterval(heartbeat);
+        clearInterval(sweeper);
+        unlocks.clear(); // an admin Apply locks every send tile
+        for (const res of streams) {
+          try { res.end(); } catch { /* already gone */ }
+        }
+        streams.clear();
+        if (current && current.streams === streams) current = null;
+      },
+      health,
+    };
+  },
+
+  /**
+   * The picker: one transcript per configured channel, titled with the
+   * channel's name (the shell makes the entry's name the tile's title), then
+   * the two send surfaces, one of each per dashboard. Between init() and a
+   * poller's first answer a name may still be unknown — "#<id>" then.
+   */
+  async tiles({ config }) {
+    const c = current;
+    const ids = c ? c.channelIds : configuredChannels(config || {});
+    if (c) await c.namesReady();
+    const who = c?.sendingAs() ? ` as ${c.sendingAs()}` : '';
+    const entries = ids.map((id) => ({
+      id: `transcript:${id}`,
+      name: `#${(c && c.channelName(id)) || id}`,
+      description: 'Live transcript',
+      defaultSize: { w: 4, h: 4 },
+      minSize: { w: 2, h: 2 },
+      settings: { view: 'transcript', channel: id },
+    }));
+    entries.push(
+      {
+        id: 'send',
+        name: 'Send message',
+        description: `PIN-protected message to the transcript clicked last${who}`,
+        single: true,
+        defaultSize: { w: 3, h: 3 },
+        minSize: { w: 2, h: 2 },
+        settings: { view: 'send' },
+      },
+      {
+        id: 'quick',
+        name: 'Quick replies',
+        description: `PIN-protected preset buttons${who}`,
+        single: true,
+        defaultSize: { w: 3, h: 2 },
+        minSize: { w: 2, h: 1 },
+        settings: { view: 'quick' },
+      },
+    );
+    return entries;
+  },
+
+  routes() {
+    const unmounted = (res) => sendJson(res, 503, { error: 'Slack module is restarting — try again' });
+
+    return {
+      'GET /state': (req, res) => {
+        if (!current) return unmounted(res);
+        current.wake();
+        sendJson(res, 200, current.snapshot());
+      },
+
+      'GET /stream': (req, res) => {
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream; charset=utf-8',
+          'Cache-Control': 'no-cache, no-transform',
+          Connection: 'keep-alive',
+          'X-Accel-Buffering': 'no',
+        });
+        res.write('retry: 3000\n\n');
+        if (!current) {
+          res.write(`event: state\ndata: ${JSON.stringify({ channelOrder: [], channels: {}, status: { state: 'connecting', message: 'Slack module is restarting…' } })}\n\n`);
+          return void res.end();
+        }
+        res.write(`event: state\ndata: ${JSON.stringify(current.snapshot())}\n\n`);
+        // A viewer that stops reading (locked tablet, sleeping laptop) must
+        // not queue frames forever; keepalive probes make the OS notice.
+        try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
+        current.streams.add(res);
+        current.wake();
+        req.on('close', () => current && current.streams.delete(res));
+      },
+
+      // The admin "Channels" multiselect: channels the account is a member of.
+      'GET /channels': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        try {
+          const list = await current.loadChannelList(true);
+          const options = list
+            .filter((c) => c.isMember)
+            .map((c) => ({ value: c.id, label: `#${c.name}${c.isPrivate ? ' (private)' : ''}` }));
+          sendJson(res, 200, { options });
+        } catch (err) {
+          // 200 with no options: the admin page keeps the saved values checked.
+          sendJson(res, 200, { options: [], error: describeError(err, { name: current.identityName() }) });
+        }
+      }),
+
+      'POST /unlock': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        let body;
+        try {
+          body = await readJson(req);
+        } catch (err) {
+          return sendJson(res, 400, { error: err.message });
+        }
+        current.unlock(req, res, body.pin);
+      }),
+
+      'POST /lock': (req, res) => {
+        if (!current) return unmounted(res);
+        current.lock(req, res);
+      },
+
+      // The emoji a tile may need to draw — fetched once per page, again when the version bumps.
+      'GET /emoji': (req, res) => {
+        if (!current) return unmounted(res);
+        sendJson(res, 200, current.emojiTable());
+      },
+
+      // Pictures proxied from Slack's CDN: a custom emoji by name, a profile image or bot icon by key.
+      'GET /emoji-image/*': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        await serveImage(res, current.customEmojiUrl(decodeURIComponent(String(req.wildcard || '').replace(/^\/+/, ''))));
+      }),
+      'GET /avatar/*': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        await serveImage(res, current.avatarUrl(decodeURIComponent(String(req.wildcard || '').replace(/^\/+/, ''))));
+      }),
+
+      // A reaction as the location — PIN-gated like a send.
+      'POST /react': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        const unlock = current.sendGate(req, res);
+        if (!unlock) return;
+        let body;
+        try {
+          body = await readJson(req);
+        } catch (err) {
+          return sendJson(res, 400, { error: err.message });
+        }
+        await current.react(req, res, unlock, { channel: body.channel, ts: body.ts, name: body.name, remove: Boolean(body.remove) });
+      }),
+
+      // Labels and indexes only — the message text never leaves the server.
+      'GET /quick': (req, res) => {
+        if (!current) return unmounted(res);
+        const unlock = current.sendGate(req, res);
+        if (!unlock) return;
+        sendJson(res, 200, {
+          presets: current.quickReplies.map((q, index) => ({ index, label: q.label, channel: q.channel ? `#${q.channel}` : '' })),
+          expiresAt: unlock.expiresAt,
+        });
+      },
+
+      'POST /send': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        const unlock = current.sendGate(req, res);
+        if (!unlock) return;
+        let body;
+        try {
+          body = await readJson(req);
+        } catch (err) {
+          return sendJson(res, 400, { error: err.message });
+        }
+        const text = String(body.text ?? '').replace(/\r\n/g, '\n').trim();
+        if (!text) return sendJson(res, 400, { error: 'Nothing to send' });
+        if (text.length > MAX_TEXT_CHARS) return sendJson(res, 400, { error: `Too long — ${MAX_TEXT_CHARS} characters at most` });
+        const target = current.chooseTarget(body.channel);
+        if (target.error) return sendJson(res, 400, { error: target.error, code: 'bad_channel' });
+        await current.deliver(req, res, unlock, { text, targetId: target.id, what: 'sent' });
+      }),
+
+      'POST /quick': guard(async (req, res) => {
+        if (!current) return unmounted(res);
+        const unlock = current.sendGate(req, res);
+        if (!unlock) return;
+        let body;
+        try {
+          body = await readJson(req);
+        } catch (err) {
+          return sendJson(res, 400, { error: err.message });
+        }
+        const index = Math.trunc(Number(body.index));
+        const preset = Number.isInteger(index) ? current.quickReplies[index] : null;
+        if (!preset) return sendJson(res, 404, { error: 'No such quick reply — the list may have changed in Admin' });
+        // A channel the browser names is checked even when the preset's own
+        // binding is about to override it — an unconfigured id is never accepted.
+        const target = current.chooseTarget(body.channel);
+        if (target.error && (body.channel || !preset.channel)) return sendJson(res, 400, { error: target.error, code: 'bad_channel' });
+        await current.deliver(req, res, unlock, {
+          text: preset.message,
+          targetId: target.id || '',
+          presetChannel: preset.channel,
+          what: `quick reply "${preset.label}"`,
+        });
+      }),
+    };
+  },
+};
diff --git a/modules/slack/style.css b/modules/slack/style.css
new file mode 100644
index 0000000..4d6449f
--- /dev/null
+++ b/modules/slack/style.css
@@ -0,0 +1,677 @@
+/* Slack module — scoped to its tiles, shell variables only.
+   --sl-size (per tile, from the header's A− / A+) drives every font size.
+   Transcript rows follow the ProdCom transcript's layout: a square picture,
+   then a name line with the time, the text, the reactions. */
+
+[data-module="slack"] .sl-wrap {
+  --sl-size: 14px;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  container-type: size;
+  font-size: var(--sl-size);
+  color: var(--text);
+}
+[data-module="slack"] .sl-wrap:focus { outline: none; }
+[data-module="slack"] [hidden] { display: none !important; }
+
+/* ── degraded banner (transcript) ── */
+
+[data-module="slack"] .sl-banner {
+  flex: none;
+  padding: 4px 10px;
+  font-size: 0.8em;
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 12%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
+}
+[data-module="slack"] .sl-banner.is-error {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--danger) 35%, var(--border));
+}
+
+/* ── the send target ── */
+
+/* A click anywhere in a transcript's body makes its channel the one Send
+   message and Quick replies post to. The chosen one carries a 3px accent
+   stripe along the bottom edge of the tile body — drawn just inside our
+   root, since the tile chrome around it belongs to the shell. The others
+   hint at it faintly on hover. */
+[data-module="slack"] .sl-transcript::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background: var(--accent);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 3;
+  transition: opacity 0.15s ease;
+}
+[data-module="slack"] .sl-transcript:hover::after { opacity: 0.3; }
+[data-module="slack"] .sl-transcript.is-target::after { opacity: 1; }
+
+/* ── transcript stream ── */
+
+[data-module="slack"] .sl-stream {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 6px 10px 10px;
+  overscroll-behavior: contain;
+}
+
+[data-module="slack"] .sl-empty {
+  color: var(--muted);
+  font-size: 0.9em;
+  text-align: center;
+  padding: 14% 10px 0;
+  line-height: 1.45;
+}
+[data-module="slack"] .sl-empty.is-error { color: var(--danger); }
+
+[data-module="slack"] .sl-entry {
+  padding: 5px 6px;
+  border-radius: 8px;
+  line-height: 1.45;
+}
+[data-module="slack"] .sl-entry:hover { background: var(--bg); }
+[data-module="slack"] .sl-entry.sl-new { animation: sl-fade-in 0.25s ease-out; }
+@keyframes sl-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* one row: the picture, then everything else (.sl-row — .sl-msg is the
+   send tile's status line, a different thing) */
+[data-module="slack"] .sl-row,
+[data-module="slack"] .sl-reply {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+[data-module="slack"] .sl-body { flex: 1; min-width: 0; }
+
+/* the square: a profile image, a bot's icon or emoji, or initials on a tint
+   of a hue the name hashes to — the same size and corner as ProdCom's */
+[data-module="slack"] .sl-avatar {
+  flex: none;
+  width: calc(var(--sl-size) * 1.9);
+  height: calc(var(--sl-size) * 1.9);
+  border-radius: 26%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--sl-hue, 150) 45% 50% / 0.2);
+  color: hsl(var(--sl-hue, 150) 55% 60%);
+  font-size: 0.72em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  user-select: none;
+  -webkit-user-select: none;
+}
+/* "Avatars" off: the square goes and the row starts at the left edge, as in ProdCom */
+[data-module="slack"] .sl-wrap.hide-avatars .sl-avatar { display: none; }
+[data-module="slack"] .sl-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+[data-module="slack"] .sl-avatar-emoji { font-size: 1.25em; line-height: 1; }
+[data-module="slack"] .sl-reply .sl-avatar {
+  width: calc(var(--sl-size) * 1.5);
+  height: calc(var(--sl-size) * 1.5);
+  font-size: 0.6em;
+}
+
+[data-module="slack"] .sl-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin-bottom: 2px;
+}
+[data-module="slack"] .sl-name {
+  font-weight: 700;
+  font-size: 0.82em;
+  letter-spacing: 0.01em;
+  color: var(--accent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-module="slack"] .sl-bot .sl-name { color: var(--muted); }
+[data-module="slack"] .sl-time {
+  flex: none;
+  font-size: 0.72em;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+[data-module="slack"] .sl-wrap:not(.show-times) .sl-time { display: none; }
+[data-module="slack"] .sl-wrap:not(.show-names) .sl-body > .sl-meta { display: none; }
+[data-module="slack"] .sl-wrap.show-times:not(.show-names) .sl-body > .sl-meta { display: flex; }
+[data-module="slack"] .sl-wrap.show-times:not(.show-names) .sl-name { display: none; }
+[data-module="slack"] .sl-wrap:not(.show-system) .sl-entry.sl-system { display: none; }
+
+[data-module="slack"] .sl-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--text);
+}
+[data-module="slack"] .sl-text b { font-weight: 700; }
+[data-module="slack"] .sl-text i { font-style: italic; }
+[data-module="slack"] .sl-text s { color: var(--muted); }
+[data-module="slack"] .sl-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+  border: 1px solid var(--border);
+}
+[data-module="slack"] .sl-code.sl-block {
+  display: block;
+  padding: 4px 8px;
+  margin: 3px 0;
+  white-space: pre-wrap;
+}
+[data-module="slack"] .sl-edited {
+  font-size: 0.75em;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+/* a custom emoji is an image the size of a character */
+[data-module="slack"] .sl-emoji {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  object-fit: contain;
+  vertical-align: -0.28em;
+}
+
+/* reactions under a message: pills with the emoji and its count; the
+   location's own carry the accent — a click adds yours or takes it back */
+[data-module="slack"] .sl-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+[data-module="slack"] .sl-reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 7px 1px 5px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.78em;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background 0.1s, border-color 0.1s;
+}
+[data-module="slack"] .sl-reaction:hover { border-color: var(--accent); }
+[data-module="slack"] .sl-reaction.is-me {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+}
+[data-module="slack"] .sl-reaction .sl-emoji,
+[data-module="slack"] .sl-reaction .sl-emoji-char { font-size: 1.15em; line-height: 1; vertical-align: middle; }
+[data-module="slack"] .sl-reaction-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: var(--muted);
+}
+[data-module="slack"] .sl-reaction.is-me .sl-reaction-count { color: var(--text); }
+
+/* thread replies nest under their parent; without them, a muted count */
+[data-module="slack"] .sl-replies {
+  margin: 4px 0 0 10px;
+  padding-left: 10px;
+  border-left: 2px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+[data-module="slack"] .sl-reply { font-size: 0.92em; }
+[data-module="slack"] .sl-replycount {
+  margin-top: 2px;
+  font-size: 0.75em;
+  color: var(--muted);
+}
+
+/* system lines: joins, leaves, topic changes */
+[data-module="slack"] .sl-sysline {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 0.82em;
+  color: var(--muted);
+  font-style: italic;
+}
+[data-module="slack"] .sl-sysline .sl-time { font-style: normal; }
+
+[data-module="slack"] .sl-jump {
+  position: absolute;
+  left: 50%;
+  bottom: 10px;
+  transform: translateX(-50%);
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font: inherit;
+  font-size: 0.8em;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+}
+
+/* ── send / quick replies: the gate ── */
+
+[data-module="slack"] .sl-gate,
+[data-module="slack"] .sl-compose {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 10px;
+  overflow: auto;
+}
+
+[data-module="slack"] .sl-note {
+  margin: auto;
+  padding: 10px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.9em;
+  line-height: 1.45;
+}
+[data-module="slack"] .sl-note.is-error { color: var(--danger); }
+
+/* The pad never shrinks below its content (min-height stays `auto` on it
+   and on the key grid) — a shrunken grid would spill its rows under the
+   message line, which then swallows the taps. A tile too short for it
+   scrolls instead (.sl-gate has overflow: auto). */
+[data-module="slack"] .sl-pad {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 340px;
+  width: 100%;
+  margin: 0 auto;
+}
+[data-module="slack"] .sl-pad.sl-shake { animation: sl-shake 0.4s ease; }
+@keyframes sl-shake {
+  10%, 90% { transform: translateX(-2px); }
+  20%, 80% { transform: translateX(3px); }
+  30%, 50%, 70% { transform: translateX(-5px); }
+  40%, 60% { transform: translateX(5px); }
+}
+
+/* one line: "Enter PIN · sending as Apollo Beach → #production" */
+[data-module="slack"] .sl-pad-head {
+  flex: none;
+  text-align: center;
+  font-size: 0.8em;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-module="slack"] .sl-pad-head b { font-weight: 700; color: var(--text); }
+
+[data-module="slack"] .sl-dots {
+  flex: none;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  height: 14px;
+}
+[data-module="slack"] .sl-dot {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  border: 2px solid var(--muted);
+  transition: background 0.12s, border-color 0.12s;
+}
+[data-module="slack"] .sl-dot.on { background: var(--accent); border-color: var(--accent); }
+
+[data-module="slack"] .sl-keys {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, minmax(24px, 1fr));
+  gap: 4px;
+}
+[data-module="slack"] .sl-key {
+  min-width: 0;
+  min-height: 24px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--text) 5%, var(--panel));
+  color: var(--text);
+  font: inherit;
+  font-size: clamp(13px, 9cqh, 26px);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.1s;
+}
+[data-module="slack"] .sl-key:hover { background: var(--border); }
+[data-module="slack"] .sl-key:active { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
+[data-module="slack"] .sl-key svg { width: 1.1em; height: 1.1em; }
+[data-module="slack"] .sl-key-back { color: var(--muted); }
+[data-module="slack"] .sl-key-blank { visibility: hidden; }
+[data-module="slack"] .sl-pad.is-busy .sl-keys { opacity: 0.6; pointer-events: none; }
+
+[data-module="slack"] .sl-pad-msg {
+  flex: none;
+  min-height: 1.1em;
+  text-align: center;
+  font-size: 0.78em;
+  line-height: 1.1;
+  color: var(--muted);
+}
+[data-module="slack"] .sl-pad-msg.is-error { color: var(--danger); font-weight: 600; }
+
+/* A tile too short for the keypad (the smallest Send message / Quick replies
+   tiles) shows the dots and a hint instead — digits typed on the keyboard
+   still land, and a taller tile brings the keys back. .sl-wrap is the size
+   container the height is measured against. */
+[data-module="slack"] .sl-pad-hint {
+  display: none;
+  flex: none;
+  text-align: center;
+  font-size: 0.78em;
+  line-height: 1.3;
+  color: var(--muted);
+}
+@container (max-height: 176px) {
+  [data-module="slack"] .sl-pad .sl-keys { display: none; }
+  [data-module="slack"] .sl-pad .sl-pad-hint { display: block; }
+  [data-module="slack"] .sl-pad { justify-content: center; }
+}
+
+/* ── send / quick replies: unlocked ── */
+
+[data-module="slack"] .sl-compose { gap: 6px; }
+
+[data-module="slack"] .sl-compose-head {
+  flex: none;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 0.8em;
+  color: var(--muted);
+}
+[data-module="slack"] .sl-sending {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-module="slack"] .sl-lock-link {
+  flex: none;
+  padding: 1px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+[data-module="slack"] .sl-lock-link:hover { color: var(--text); background: var(--border); }
+
+[data-module="slack"] .sl-input {
+  flex: 1;
+  min-height: 2.6em;
+  width: 100%;
+  resize: none;
+  padding: 7px 9px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  line-height: 1.4;
+}
+[data-module="slack"] .sl-input:focus { outline: none; border-color: var(--accent); }
+
+[data-module="slack"] .sl-compose-foot {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 1.6em;
+}
+[data-module="slack"] .sl-msg {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.8em;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-module="slack"] .sl-msg.is-flash { color: var(--accent); font-weight: 700; }
+[data-module="slack"] .sl-msg.is-error { color: var(--danger); white-space: normal; font-weight: 600; }
+[data-module="slack"] .sl-countdown {
+  flex: none;
+  font-size: 0.75em;
+  color: var(--warn);
+  font-variant-numeric: tabular-nums;
+}
+[data-module="slack"] .sl-sendbtn {
+  flex: none;
+  padding: 6px 16px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+[data-module="slack"] .sl-sendbtn:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); }
+[data-module="slack"] .sl-sendbtn:disabled { opacity: 0.6; cursor: default; }
+
+/* quick emojis: one press each sends it as a message of its own */
+[data-module="slack"] .sl-emoji-sendrow {
+  flex: none;
+  display: flex;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+[data-module="slack"] .sl-emoji-send {
+  flex: none;
+  width: 2.1em;
+  height: 2.1em;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--text) 5%, var(--panel));
+  color: var(--text);
+  font: inherit;
+  font-size: 1.1em;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.1s, border-color 0.1s;
+}
+[data-module="slack"] .sl-emoji-send:hover { border-color: var(--accent); background: var(--border); }
+[data-module="slack"] .sl-emoji-send:active { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
+[data-module="slack"] .sl-emoji-send.is-busy { opacity: 0.6; }
+[data-module="slack"] .sl-emoji-send.is-sent { background: var(--accent); border-color: transparent; }
+[data-module="slack"] .sl-emoji-send .sl-emoji { width: 1.2em; height: 1.2em; vertical-align: middle; }
+
+/* the preset grid: big targets, labels wrap */
+[data-module="slack"] .sl-grid {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
+  grid-auto-rows: minmax(44px, auto);
+  gap: 6px;
+  align-content: start;
+  overflow-y: auto;
+}
+[data-module="slack"] .sl-grid .sl-note { grid-column: 1 / -1; }
+[data-module="slack"] .sl-quick {
+  min-width: 0;
+  min-height: 44px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
+  color: var(--text);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.1s;
+}
+[data-module="slack"] .sl-quick:hover { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
+[data-module="slack"] .sl-quick:active { background: color-mix(in srgb, var(--accent) 40%, var(--panel)); }
+[data-module="slack"] .sl-quick.is-busy { opacity: 0.7; }
+[data-module="slack"] .sl-quick.is-sent {
+  background: var(--accent);
+  border-color: transparent;
+  color: var(--accent-text);
+}
+[data-module="slack"] .sl-quick-label { overflow-wrap: anywhere; }
+[data-module="slack"] .sl-quick-chan {
+  font-size: 0.72em;
+  font-weight: 500;
+  color: var(--muted);
+}
+[data-module="slack"] .sl-quick.is-sent .sl-quick-chan { color: inherit; }
+
+/* ── the reaction menu (on document.body, so nothing clips it) ── */
+
+[data-module="slack"].sl-emoji-menu {
+  --sl-size: 14px;
+  position: fixed;
+  z-index: 90;
+  width: 292px;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel);
+  color: var(--text);
+  font-size: var(--sl-size);
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+}
+[data-module="slack"].sl-emoji-menu:focus { outline: none; }
+[data-module="slack"].sl-emoji-menu.is-busy { opacity: 0.7; pointer-events: none; }
+[data-module="slack"] .sl-emoji-head {
+  font-size: 0.8em;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-module="slack"] .sl-emoji-quickrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+[data-module="slack"] .sl-emoji-quickrow:empty { display: none; }
+[data-module="slack"] .sl-emoji-btn {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.1s, border-color 0.1s;
+}
+[data-module="slack"] .sl-emoji-quickrow .sl-emoji-btn { font-size: 22px; width: 38px; height: 38px; background: color-mix(in srgb, var(--text) 5%, var(--panel)); border-color: var(--border); }
+[data-module="slack"] .sl-emoji-btn:hover { background: var(--border); border-color: var(--accent); }
+[data-module="slack"] .sl-emoji-btn .sl-emoji { width: 1.1em; height: 1.1em; vertical-align: middle; }
+[data-module="slack"] .sl-emoji-search {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 9px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.9em;
+}
+[data-module="slack"] .sl-emoji-search:focus { outline: none; border-color: var(--accent); }
+[data-module="slack"] .sl-emoji-results {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  max-height: 150px;
+  overflow-y: auto;
+  min-height: 34px;
+}
+[data-module="slack"] .sl-emoji-none {
+  width: 100%;
+  padding: 8px 4px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.8em;
+}
+[data-module="slack"] .sl-emoji-msg {
+  min-height: 1em;
+  font-size: 0.78em;
+  color: var(--muted);
+}
+[data-module="slack"] .sl-emoji-msg:empty { display: none; }
+[data-module="slack"] .sl-emoji-msg.is-error { color: var(--danger); font-weight: 600; }
+
+/* the PIN pad inside the menu: fixed sizes, no tile to scale with */
+[data-module="slack"] .sl-emoji-menu .sl-pad { max-width: 100%; gap: 6px; }
+[data-module="slack"] .sl-emoji-menu .sl-keys { grid-template-rows: repeat(4, 40px); }
+[data-module="slack"] .sl-emoji-menu .sl-key { font-size: 17px; }
diff --git a/public/admin/admin.css b/public/admin/admin.css
index bb9816f..0ce9b0b 100644
--- a/public/admin/admin.css
+++ b/public/admin/admin.css
@@ -94,6 +94,35 @@ body { overflow: auto; }
 }
 .module-health.error { color: var(--danger); }
 
+/* a module card's own status line ("polling timers on 10.3.11.20:1025",
+   "no ProPresenter host configured"): a readout, so it sits in a bordered
+   monospace box a shade lighter than the card; ok / connecting / error
+   show as the text (and border) colour, the box itself never changes */
+.module-status {
+  display: inline-block;
+  max-width: 100%;
+  margin-top: 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--text) 5%, var(--panel));
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.module-status:empty { display: none; }
+.module-status.ok { color: var(--text); }
+.module-status.connecting {
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
+}
+.module-status.error {
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
+}
+
 .module-mount-error {
   margin-top: 8px;
   padding: 8px 10px;
@@ -106,11 +135,33 @@ body { overflow: auto; }
 .module-form { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
 .module-form .field { max-width: 420px; }
 
+/* a multi-line string (manifest type `text`): the same box as the other
+   inputs (those rules live in the shell's style.css), a few lines tall */
+.field textarea {
+  padding: 7px 9px;
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.4;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  resize: vertical;
+  min-height: 72px;
+}
+.field textarea:focus { outline: none; border-color: var(--accent); }
+
 /* endpoint fields: every module's upstream is entered the same way */
 .field .endpoint-row { display: flex; align-items: center; gap: 7px; }
 .endpoint-row .ep-host { flex: 1; min-width: 0; }
 .endpoint-row .ep-port { width: 92px; flex: none; }
 .endpoint-row .ep-sep { color: var(--muted); font-weight: 600; }
+/* several picks from a list (manifest type `multiselect`) */
+.field.multiselect-field { cursor: default; }
+.field.multiselect-field .multiselect { display: flex; flex-direction: column; gap: 6px; }
+.multiselect-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+.multiselect-empty { color: var(--muted); font-size: 12px; }
+
 .module-form-empty { color: var(--muted); font-size: 12px; margin-top: 10px; }
 
 /* labeled config subsections (manifest field `group`) */
@@ -121,6 +172,10 @@ body { overflow: auto; }
   border-radius: 9px;
 }
 .field-group-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  position: relative; /* the ⓘ popover hangs off this row */
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -128,8 +183,82 @@ body { overflow: auto; }
   color: var(--muted);
   margin-bottom: 10px;
 }
+.field-group-name { min-width: 0; }
 .field-group .field:last-child { margin-bottom: 0; }
 
+/* group help (configGroups[name].help): an ⓘ beside the title. Hover or
+   focus peeks at the text; a click pins it open until the next click. */
+.group-info { display: inline-flex; align-items: center; }
+.group-info-btn {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--muted);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--muted);
+  font: italic 700 10px/1 ui-serif, Georgia, "Times New Roman", serif;
+  text-transform: none;
+  letter-spacing: 0;
+  cursor: help;
+}
+.group-info-btn:hover,
+.group-info.is-open .group-info-btn { color: var(--text); border-color: var(--text); }
+.group-info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.group-info-pop {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: calc(100% + 6px);
+  z-index: 5;
+  max-width: min(440px, 100%);
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--text) 6%, var(--panel));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: normal;
+  cursor: auto;
+}
+/* keeps the popover open while the pointer crosses the gap down to it */
+.group-info-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
+.group-info:hover .group-info-pop,
+.group-info-btn:focus-visible + .group-info-pop,
+.group-info.is-open .group-info-pop { display: block; }
+
+/* group toggle (configGroups[name].toggle): the named switch sits at the
+   right of the title row as the group's on/off; the body dims while it is
+   off but stays editable */
+.field-group-toggle {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+.field-group-toggle .field {
+  margin: 0;
+  max-width: none;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--text);
+}
+.field-group-toggle .field.switch-field { flex-direction: row-reverse; gap: 8px; }
+.field-group-toggle .field.switch-field .switch-label { font-size: 12px; }
+.field-group-toggle .field.check { flex-direction: row-reverse; gap: 8px; }
+.field-group.is-off > .field-group-body { opacity: 0.45; transition: opacity 0.15s; }
+.field-group.has-toggle > .field-group-body { transition: opacity 0.15s; }
+
 /* collapsible groups (manifest configGroups[name].collapsed) */
 details.field-group > summary.field-group-title {
   cursor: pointer;
@@ -160,18 +289,16 @@ details.field-group > summary.field-group-title:hover { color: var(--text); }
   gap: 4px 16px;
 }
 .field-group-body.is-columns .field { margin-bottom: 4px; max-width: none; }
-.field-group-body.is-columns .field-group-help { grid-column: 1 / -1; }
 @media (max-width: 560px) { .field-group-body.is-columns { grid-template-columns: 1fr 1fr; } }
 
-.field-group-help,
+/* one line of guidance under a control (field `help`) */
 .field-help {
   display: block;
   font-size: 11.5px;
   line-height: 1.45;
   color: var(--muted);
+  margin-top: 2px;
 }
-.field-group-help { margin: -4px 0 8px; }
-.field-help { margin-top: 2px; }
 .field-help code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 
 /* showWhen: a hidden dependent field must actually collapse — `.field`'s
@@ -190,12 +317,19 @@ details.field-group > summary.field-group-title:hover { color: var(--text); }
 }
 .field.switch-field .switch-label { font-size: 13px; }
 
+/* the card's one action row: status on the left, Configure / Apply on the right */
 .module-actions {
   display: flex;
-  align-items: center;
+  align-items: flex-end;   /* the button stays bottom-right when a readout wraps */
   gap: 10px;
-  margin-top: 4px;
+  margin-top: 10px;
 }
+.module-name.is-toggle { cursor: pointer; }
+.module-name.is-toggle:hover,
+.module-name.is-toggle:focus-visible { color: var(--accent); outline: none; }
+.module-actions .admin-status { flex: 1; margin-top: 0; }
+.module-actions .module-status { flex: 0 1 auto; min-width: 0; margin-top: 0; }
+.module-actions .btn { flex: none; margin-left: auto; }
 
 .admin-status { min-height: 16px; font-size: 12px; color: var(--muted); margin-top: 8px; }
 .admin-status.error { color: var(--danger); }
@@ -312,3 +446,69 @@ a.btn { text-decoration: none; }
 .catalog-title { display: flex; align-items: center; gap: 8px; }
 .catalog-row .module-desc { margin: 4px 0 2px; }
 .catalog-row .module-health { margin-top: 2px; }
+
+/* ── theme ──────────────────────────────────────────────────────────── */
+
+/* one swatch per preset: a miniature dashboard (page, a tile on it, the
+   accent as a status dot) and the name; the current one wears the accent */
+.theme-swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
+  gap: 10px;
+  margin-bottom: 6px;
+}
+.theme-swatch {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 8px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.theme-swatch:hover { border-color: var(--muted); }
+.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.theme-swatch.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.theme-preview {
+  position: relative;
+  display: block;
+  height: 46px;
+  border-radius: 6px;
+  background: var(--sw-bg);
+  border: 1px solid color-mix(in srgb, var(--sw-panel) 60%, var(--sw-accent));
+  overflow: hidden;
+}
+.theme-preview::before {
+  content: "";
+  position: absolute;
+  left: 8px; right: 8px; top: 10px; bottom: 8px;
+  border-radius: 4px;
+  background: var(--sw-panel);
+  border: 1px solid color-mix(in srgb, var(--sw-panel) 75%, var(--sw-accent));
+}
+.theme-preview::after {
+  content: "";
+  position: absolute;
+  left: 14px; top: 16px;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--sw-accent);
+  box-shadow: 0 0 6px var(--sw-accent);
+}
+.theme-name { display: flex; align-items: center; gap: 6px; }
+.theme-swatch.is-current .theme-name::after {
+  content: "current";
+  margin-left: auto;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+#theme-status { margin-top: 4px; }
diff --git a/public/admin/admin.js b/public/admin/admin.js
index f44bb81..dfc1d02 100644
--- a/public/admin/admin.js
+++ b/public/admin/admin.js
@@ -22,6 +22,9 @@ const updateStatus = document.getElementById('update-status');
 const updateBtn = document.getElementById('update-btn');
 const updateChanges = document.getElementById('update-changes');
 const shellVersionEl = document.getElementById('shell-version');
+const themeSection = document.getElementById('theme-section');
+const themeSwatches = document.getElementById('theme-swatches');
+const themeStatus = document.getElementById('theme-status');
 
 /** The shell version the page loaded with — the update flow watches it change. */
 let shellVersion = '';
@@ -58,6 +61,7 @@ function showLogin() {
   availableSection.hidden = true;
   layoutsSection.hidden = true;
   updateCard.hidden = true;
+  themeSection.hidden = true;
   passcodeInput.focus();
 }
 
@@ -224,6 +228,73 @@ function fieldFor(key, spec, value, passwordSet, moduleId) {
     field.append(span, select);
     read = () => select.value;
     selectEl = select;
+  } else if (type === 'multiselect' && (Array.isArray(spec.options) || spec.optionsRoute)) {
+    // Several picks from one list — a switch per option, stored as an array
+    // of values. A saved value the list no longer offers stays checked and
+    // marked, so a channel the account has left isn't dropped in silence.
+    field.classList.add('multiselect-field');
+    // The wrapper is a <label>; with several controls inside, a click on the
+    // wrapper would activate the FIRST one. `for=""` makes it label nothing.
+    field.htmlFor = '';
+    const span = document.createElement('span');
+    span.textContent = label;
+    const list = document.createElement('div');
+    list.className = 'multiselect';
+    const chosen = new Set((Array.isArray(value) ? value : []).map(String).filter(Boolean));
+    const optValue = (opt) => String(typeof opt === 'object' ? opt.value : opt);
+    const fill = (options) => {
+      for (const input of list.querySelectorAll('input')) {
+        if (input.checked) chosen.add(input.value);
+        else chosen.delete(input.value);
+      }
+      list.innerHTML = '';
+      const missing = [...chosen].filter((v) => !options.some((opt) => optValue(opt) === v));
+      const all = [...options, ...missing.map((v) => ({ value: v, label: `${v} (saved — not listed now)` }))];
+      for (const opt of all) {
+        const row = document.createElement('div');
+        row.className = 'multiselect-row';
+        const toggle = document.createElement('span');
+        toggle.className = 'switch';
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.value = optValue(opt);
+        input.checked = chosen.has(input.value);
+        const track = document.createElement('span');
+        track.className = 'track';
+        toggle.append(input, track);
+        const text = document.createElement('span');
+        text.className = 'switch-label';
+        text.textContent = String(typeof opt === 'object' ? (opt.label ?? opt.value) : opt);
+        row.append(toggle, text);
+        row.addEventListener('click', (e) => {
+          if (e.target === input) return;           // the box toggles itself
+          input.checked = !input.checked;
+          input.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        list.appendChild(row);
+      }
+      if (!all.length) {
+        const none = document.createElement('div');
+        none.className = 'multiselect-empty';
+        none.textContent = 'Nothing to choose from yet.';
+        list.appendChild(none);
+      }
+    };
+    fill(Array.isArray(spec.options) ? spec.options : []);
+    if (spec.optionsRoute && moduleId) {
+      refetch = (query) => {
+        const qs = query && Object.keys(query).length ? `?${new URLSearchParams(query)}` : '';
+        return fetch(`/api/modules/${encodeURIComponent(moduleId)}${spec.optionsRoute}${qs}`)
+          .then((res) => (res.ok ? res.json() : null))
+          .then((body) => {
+            if (Array.isArray(body?.options)) fill(body.options);
+          })
+          .catch(() => { /* keep the static/saved options */ });
+      };
+      if (!spec.optionsDependsOn) refetch();
+    }
+    field.append(span, list);
+    read = () => [...list.querySelectorAll('input:checked')].map((input) => input.value);
   } else if (type === 'color') {
     // A swatch picker; the value is always a #rrggbb string.
     field.classList.add('color-field');
@@ -235,6 +306,17 @@ function fieldFor(key, spec, value, passwordSet, moduleId) {
     input.value = hex(value, hex(spec?.default, '#2ee59a'));
     field.append(span, input);
     read = () => input.value;
+  } else if (type === 'text') {
+    // A multi-line string — one item per line by convention (a list of
+    // presets, say). Stored as-is, newlines included.
+    const span = document.createElement('span');
+    span.textContent = label;
+    const textarea = document.createElement('textarea');
+    textarea.rows = 5;
+    textarea.spellcheck = false;
+    textarea.value = value === undefined || value === null ? '' : String(value);
+    field.append(span, textarea);
+    read = () => textarea.value;
   } else {
     const span = document.createElement('span');
     span.textContent = label;
@@ -277,6 +359,99 @@ function groupHasValues(fields, mod) {
   });
 }
 
+/* ── group title row: the ⓘ and the group toggle ────────────────────── */
+
+let groupInfoSeq = 0;
+
+function closeGroupInfos(except) {
+  for (const open of document.querySelectorAll('.group-info.is-open')) {
+    if (open === except) continue;
+    open.classList.remove('is-open');
+    open.querySelector('.group-info-btn')?.setAttribute('aria-expanded', 'false');
+  }
+}
+
+/**
+ * configGroups[name].help as an ⓘ beside the group title: click toggles a
+ * small popover with the text (hover and keyboard focus show it too), so a
+ * group can carry a paragraph without pushing its fields down the page. A
+ * real button, labelled, so it works from the keyboard; inside a <summary>
+ * it must never fold the group.
+ */
+function groupInfo(groupName, text) {
+  const wrap = document.createElement('span');
+  wrap.className = 'group-info';
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'group-info-btn';
+  btn.textContent = 'i';
+  btn.setAttribute('aria-label', `About ${groupName}`);
+  btn.setAttribute('aria-expanded', 'false');
+  const pop = document.createElement('span');
+  pop.className = 'group-info-pop';
+  pop.id = `group-info-${++groupInfoSeq}`;
+  pop.setAttribute('role', 'note');
+  pop.textContent = text;
+  btn.setAttribute('aria-describedby', pop.id);
+  wrap.append(btn, pop);
+  const setOpen = (open) => {
+    wrap.classList.toggle('is-open', open);
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+  };
+  btn.addEventListener('click', (e) => {
+    e.preventDefault(); // a click in a <summary> would otherwise fold the group
+    e.stopPropagation();
+    const open = !wrap.classList.contains('is-open');
+    closeGroupInfos(wrap);
+    setOpen(open);
+  });
+  pop.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  wrap.addEventListener('keydown', (e) => {
+    // Enter / Space activate the button (a click); they must not reach a
+    // <summary> above as well. Escape closes and hands focus back.
+    if (e.key === ' ' || e.key === 'Enter') e.stopPropagation();
+    if (e.key === 'Escape' && wrap.classList.contains('is-open')) {
+      e.stopPropagation();
+      setOpen(false);
+      btn.focus();
+    }
+  });
+  return wrap;
+}
+
+// A click anywhere else, or Escape, closes an open popover.
+document.addEventListener('pointerdown', (e) => {
+  if (!(e.target instanceof Element) || !e.target.closest('.group-info')) closeGroupInfos();
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeGroupInfos();
+});
+
+/**
+ * configGroups[name].toggle: the named switch/boolean field is the group's
+ * on/off. It moves into the title row, right-aligned, and the body dims
+ * while it is off (fields stay editable). The field itself is untouched —
+ * it is still read on save and still drives showWhen dependents.
+ */
+function mountGroupToggle(group, field, control) {
+  const slot = document.createElement('span');
+  slot.className = 'field-group-toggle';
+  slot.appendChild(field);
+  // Inside a <summary>, flipping the switch must not fold the group.
+  slot.addEventListener('click', (e) => e.stopPropagation());
+  slot.addEventListener('keydown', (e) => {
+    if (e.key === ' ' || e.key === 'Enter') e.stopPropagation();
+  });
+  group.title.appendChild(slot);
+  group.el.classList.add('has-toggle');
+  const sync = () => group.el.classList.toggle('is-off', !control.checked);
+  control.addEventListener('change', sync);
+  sync();
+}
+
 function buildModuleCard(mod) {
   const card = document.createElement('section');
   card.className = 'admin-card';
@@ -351,8 +526,11 @@ function buildModuleCard(mod) {
   desc.textContent = mod.description;
   card.appendChild(desc);
 
+  // The module's own words about its upstream ("polling timers on
+  // 10.3.11.20:1025") — a readout, so it sits in a bordered monospace box
+  // and the state (ok / connecting / error) is its text colour.
   const healthEl = document.createElement('div');
-  healthEl.className = 'module-health ' + (healthClass(mod) === 'error' ? 'error' : '');
+  healthEl.className = 'module-status ' + healthClass(mod);
   healthEl.textContent = healthText(mod);
   card.appendChild(healthEl);
 
@@ -395,7 +573,9 @@ function buildModuleCard(mod) {
     const collapsibles = []; // { el, meta, fields } groups that fold
     // Fields render in schema order; a `group` starts a labeled subsection
     // and consecutive same-group fields share it. The manifest's optional
-    // `configGroups[name]` adds { collapsed, columns, help } for that group.
+    // `configGroups[name]` adds { collapsed, columns, help, toggle } for
+    // that group: help is an ⓘ beside the title, toggle names the switch
+    // that is the group's on/off and lives in the title row.
     const groupMeta = mod.configGroups && typeof mod.configGroups === 'object' ? mod.configGroups : {};
     let groupName = null;
     let container = form;
@@ -412,7 +592,11 @@ function buildModuleCard(mod) {
           group.className = 'field-group';
           const title = document.createElement(folds ? 'summary' : 'div');
           title.className = 'field-group-title';
-          title.textContent = g;
+          const titleName = document.createElement('span');
+          titleName.className = 'field-group-name';
+          titleName.textContent = g;
+          title.appendChild(titleName);
+          if (meta.help) title.appendChild(groupInfo(g, String(meta.help)));
           group.appendChild(title);
           const body = document.createElement('div');
           body.className = 'field-group-body';
@@ -421,16 +605,16 @@ function buildModuleCard(mod) {
             body.classList.add('is-columns');
             body.style.setProperty('--cols', String(cols));
           }
-          if (meta.help) {
-            const help = document.createElement('div');
-            help.className = 'field-group-help';
-            help.textContent = meta.help;
-            body.appendChild(help);
-          }
           group.appendChild(body);
           form.appendChild(group);
           container = body;
-          currentGroup = { el: group, meta, fields: [] };
+          currentGroup = {
+            el: group,
+            title,
+            meta,
+            fields: [],
+            toggleKey: typeof meta.toggle === 'string' ? meta.toggle : '',
+          };
           if (folds) collapsibles.push(currentGroup);
         } else {
           container = form;
@@ -444,7 +628,13 @@ function buildModuleCard(mod) {
       else if (refetch) reloaders.push(() => refetch());
       if (spec?.showWhen) dependents.push({ field, when: spec.showWhen });
       if (currentGroup) currentGroup.fields.push({ key, spec });
-      container.appendChild(field);
+      if (currentGroup && control && key === currentGroup.toggleKey) {
+        // The group's on/off: title row, not the body (never both). A
+        // toggle naming a non-boolean field is ignored and renders normally.
+        mountGroupToggle(currentGroup, field, control);
+      } else {
+        container.appendChild(field);
+      }
     }
     // A field with showWhen:"K" is visible only while K's toggle is on.
     for (const dep of dependents) {
@@ -473,26 +663,52 @@ function buildModuleCard(mod) {
     const actions = document.createElement('div');
     actions.className = 'module-actions';
     const save = document.createElement('button');
-    save.className = 'btn primary';
-    save.textContent = 'Save & re-init';
     const status = document.createElement('span');
     status.className = 'admin-status';
-    actions.append(save, status);
-    form.appendChild(actions);
+    actions.append(status, save);
+    // A card is a status line until someone wants to change something: the
+    // form starts folded, and the row at the bottom holds one button that
+    // does both jobs — "Configure" opens the form and becomes "Apply", which
+    // saves without closing it. The name is the other way in and out.
     card.appendChild(form);
+    card.appendChild(actions);
+    const openKey = 'proddash:admin:open:' + mod.id;
+    const setOpen = (open) => {
+      form.hidden = !open;
+      status.hidden = !open;
+      save.textContent = open ? 'Apply' : 'Configure';
+      save.className = open ? 'btn primary' : 'btn';
+      // Folded, the readout shares the bottom row with Configure instead of
+      // taking a line of its own; open, it goes back above the form.
+      if (open) card.insertBefore(healthEl, mountError);
+      else actions.insertBefore(healthEl, status);
+      try { sessionStorage.setItem(openKey, open ? '1' : '0'); } catch { /* fine */ }
+    };
+    let wasOpen = false;
+    try { wasOpen = sessionStorage.getItem(openKey) === '1'; } catch { /* fine */ }
+    setOpen(wasOpen);
+    name.classList.add('is-toggle');
+    name.title = 'Show or hide this module\'s settings';
+    name.tabIndex = 0;
+    name.setAttribute('role', 'button');
+    name.addEventListener('click', () => setOpen(form.hidden));
+    name.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(form.hidden); }
+    });
 
     save.addEventListener('click', async () => {
+      if (form.hidden) return setOpen(true);
       const config = {};
       for (const [key, read] of readers) config[key] = read();
       save.disabled = true;
-      status.textContent = 'Saving…';
+      status.textContent = 'Applying…';
       status.className = 'admin-status';
       try {
         await api(`/api/admin/modules/${encodeURIComponent(mod.id)}/config`, {
           method: 'PUT',
           body: JSON.stringify({ config }),
         });
-        status.textContent = 'Saved — module re-initialised. Open tiles reconnect on their own.';
+        status.textContent = 'Applied — module re-initialised. Open tiles reconnect on their own.';
         status.className = 'admin-status ok';
         refreshStatus();
         // What the module can list may have changed (credentials just
@@ -531,7 +747,7 @@ async function refreshStatus() {
     if (!els) continue;
     els.dot.className = 'dot ' + healthClass(mod);
     els.healthEl.textContent = healthText(mod);
-    els.healthEl.className = 'module-health ' + (healthClass(mod) === 'error' ? 'error' : '');
+    els.healthEl.className = 'module-status ' + healthClass(mod);
     if (!mod.incompatible) {
       els.mountError.hidden = !mod.mountError;
       els.mountError.textContent = mod.mountError ? `Failed to start: ${mod.mountError}` : '';
@@ -543,7 +759,7 @@ async function refreshStatus() {
   }
 }
 
-/* ── named layouts ──────────────────────────────────────────────────── */
+/* ── saved layouts ──────────────────────────────────────────────────── */
 
 async function loadLayouts() {
   let body;
@@ -559,7 +775,7 @@ async function loadLayouts() {
   if (!layouts.length) {
     const none = document.createElement('div');
     none.className = 'layouts-empty';
-    none.textContent = 'No named layouts saved yet. Save one from the dashboard’s Layout menu.';
+    none.textContent = 'No layouts saved yet. Save one from the dashboard’s Layout menu.';
     layoutsList.appendChild(none);
     return;
   }
@@ -640,10 +856,133 @@ async function loadState() {
   for (const mod of state.modules || []) {
     modulesList.appendChild(buildModuleCard(mod));
   }
+  loadTheme();
   loadLayouts();
   loadCatalog(false);
 }
 
+/* ── theme ──────────────────────────────────────────────────────────── */
+
+/* The dashboard palette is a server-wide choice. The server lists the
+   presets (GET /api/theme — public, dashboards need it too) and the admin
+   page shows them as swatches; picking one POSTs it, applies it here at
+   once, and the server's `theme` shell event switches every open dashboard
+   — and any other admin page — live. The palettes themselves are
+   html[data-theme="…"] variable sets in the shell's style.css, which this
+   page shares, so the admin page follows its own choice. */
+
+const LS_THEME = 'proddash:theme';
+let themeList = [];
+let currentTheme = '';
+
+function applyTheme(id) {
+  const theme = String(id || '');
+  if (!/^[a-z][a-z0-9-]{0,31}$/.test(theme)) return;
+  document.documentElement.dataset.theme = theme;
+  try { localStorage.setItem(LS_THEME, theme); } catch { /* private mode — fine */ }
+}
+
+// The last-known theme first (shared with the dashboard, same origin), so
+// the page doesn't flash the default palette before the server answers.
+try { applyTheme(localStorage.getItem(LS_THEME)); } catch { /* fine */ }
+
+function themeName(id) {
+  return themeList.find((t) => t.id === id)?.name || id;
+}
+
+function renderThemes() {
+  themeSwatches.innerHTML = '';
+  for (const t of themeList) {
+    const current = t.id === currentTheme;
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'theme-swatch' + (current ? ' is-current' : '');
+    btn.setAttribute('role', 'radio');
+    btn.setAttribute('aria-checked', current ? 'true' : 'false');
+    btn.title = current ? `${t.name} — the current theme` : `Switch every dashboard to ${t.name}`;
+    const preview = document.createElement('span');
+    preview.className = 'theme-preview';
+    preview.style.setProperty('--sw-bg', String(t.colors?.bg || '#000'));
+    preview.style.setProperty('--sw-panel', String(t.colors?.panel || '#222'));
+    preview.style.setProperty('--sw-accent', String(t.colors?.accent || '#fff'));
+    const name = document.createElement('span');
+    name.className = 'theme-name';
+    name.textContent = t.name;
+    btn.append(preview, name);
+    btn.addEventListener('click', () => chooseTheme(t.id));
+    themeSwatches.appendChild(btn);
+  }
+}
+
+/**
+ * Fetch the server's theme and list. Applied to this page either way (the
+ * endpoint is public, so even the login card wears the right palette); the
+ * swatch section itself is only revealed for an unlocked page.
+ */
+async function loadTheme(reveal = true) {
+  let body;
+  try {
+    body = await api('/api/theme');
+  } catch {
+    if (reveal) themeSection.hidden = true; // a server without themes — nothing to offer
+    return;
+  }
+  themeList = Array.isArray(body.themes) ? body.themes.filter((t) => t && t.id && t.name) : [];
+  currentTheme = String(body.theme || '');
+  applyTheme(currentTheme);
+  renderThemes();
+  if (reveal) themeSection.hidden = !themeList.length;
+}
+
+loadTheme(false);
+
+async function chooseTheme(id) {
+  if (id === currentTheme) return;
+  const previous = currentTheme;
+  currentTheme = id;
+  applyTheme(id); // at once, here — the server's event confirms it everywhere else
+  renderThemes();
+  themeStatus.textContent = '';
+  themeStatus.className = 'admin-status';
+  try {
+    await api('/api/admin/theme', { method: 'POST', body: JSON.stringify({ theme: id }) });
+    themeStatus.textContent = `${themeName(id)} — every open dashboard switched.`;
+    themeStatus.className = 'admin-status ok';
+  } catch (e) {
+    currentTheme = previous;
+    applyTheme(previous);
+    renderThemes();
+    themeStatus.textContent = e.message;
+    themeStatus.className = 'admin-status error';
+    if (e.authRequired) showLogin();
+  }
+}
+
+// Follow a theme change made elsewhere (another admin page) live.
+let themeEvents = null;
+let themeEventsRetry = null;
+
+function subscribeThemeEvents() {
+  try { themeEvents?.close(); } catch { /* not open */ }
+  themeEvents = new EventSource('/api/events');
+  themeEvents.addEventListener('theme', (e) => {
+    let theme = '';
+    try { theme = String(JSON.parse(e.data).theme || ''); } catch { return; }
+    if (!theme || theme === currentTheme) return;
+    currentTheme = theme;
+    applyTheme(theme);
+    renderThemes();
+  });
+  themeEvents.onerror = () => {
+    if (themeEvents.readyState === EventSource.CLOSED) {
+      clearTimeout(themeEventsRetry);
+      themeEventsRetry = setTimeout(subscribeThemeEvents, 4000);
+    }
+  };
+}
+
+subscribeThemeEvents();
+
 /* ── the repo: available modules, module updates, shell update ──────── */
 
 function fmtTime(ms) {
diff --git a/public/admin/index.html b/public/admin/index.html
index ec8864c..ecccb6c 100644
--- a/public/admin/index.html
+++ b/public/admin/index.html
@@ -39,11 +39,14 @@
       <div class="admin-status" id="update-status"></div>
     </section>
 
+    <section id="theme-section" hidden>
+      <h1 class="admin-h1">Theme</h1>
+      <div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
+      <div class="admin-status" id="theme-status"></div>
+    </section>
+
     <section id="modules-section" hidden>
       <h1 class="admin-h1">Modules</h1>
-      <p class="admin-copy">Server-wide settings, shared by every dashboard. Saving re-initialises the
-        module immediately — open tiles reconnect on their own. Per-tile options (filters, text size)
-        live in each tile's gear menu instead.</p>
       <p class="admin-copy admin-storage" id="storage-note" hidden>Saved on the server at
         <code id="storage-path"></code> — outside the app folder, so updating ProdDash keeps them.</p>
       <div id="modules-list"></div>
@@ -51,9 +54,6 @@
 
     <section id="available-section" hidden>
       <h1 class="admin-h1">Available modules</h1>
-      <p class="admin-copy">Modules in the ProdDash repo that aren't installed here. Installing downloads the module
-        into the server's data directory — no restart, nothing written into the app folder. A module that needs a
-        newer ProdDash can't be installed until the shell is updated.</p>
       <div class="catalog-toolbar">
         <button class="btn small" id="catalog-refresh">Check again</button>
         <span class="admin-status" id="catalog-status"></span>
@@ -62,9 +62,7 @@
     </section>
 
     <section id="layouts-section" hidden>
-      <h1 class="admin-h1">Named layouts</h1>
-      <p class="admin-copy">Layouts saved to the server from the dashboard's Layout menu. Loading one
-        copies it into that browser; deleting one here does not touch any browser's current layout.</p>
+      <h1 class="admin-h1">Saved layouts</h1>
       <div id="layouts-list"></div>
     </section>
   </main>
diff --git a/public/index.html b/public/index.html
index 35f8f08..a1bfa52 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
 
     <span class="spacer"></span>
 
-    <button class="tb-btn icon" id="fs-btn" title="Fullscreen — auto-fits the layout to the screen" aria-label="Fullscreen">
+    <button class="tb-btn icon" id="fs-btn" title="Fullscreen" aria-label="Fullscreen">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <path d="M4 9V5a1 1 0 0 1 1-1h4"/><path d="M20 9V5a1 1 0 0 0-1-1h-4"/>
         <path d="M4 15v4a1 1 0 0 0 1 1h4"/><path d="M20 15v4a1 1 0 0 1-1 1h-4"/>
@@ -27,12 +27,14 @@
     </button>
 
     <div class="dropdown" id="add-dd">
-      <button class="tb-btn icon" id="add-btn" title="Add a module tile" aria-label="Add tile">＋</button>
+      <button class="tb-btn icon" id="add-btn" title="Add tile" aria-label="Add tile">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+      </button>
       <div class="menu" id="add-menu" hidden></div>
     </div>
 
     <div class="dropdown" id="layout-dd">
-      <button class="tb-btn icon" id="layout-btn" title="Save, load or reset layouts" aria-label="Layouts">
+      <button class="tb-btn icon" id="layout-btn" title="Layouts" aria-label="Layouts">
         <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
           <rect x="3" y="3" width="8" height="8" rx="1.5"/>
           <rect x="3" y="13" width="8" height="8" rx="1.5"/>
@@ -42,11 +44,8 @@
       <div class="menu" id="layout-menu" hidden></div>
     </div>
 
-    <a class="tb-btn" id="admin-link" href="/admin/" title="Configure modules (server-wide)">
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm8.4-2.1.1-1.4-.1-1.4 1.7-1.3-1.6-2.8-2 .7a7.9 7.9 0 0 0-2.4-1.4l-.3-2.1H11l-.3 2.1a7.9 7.9 0 0 0-2.4 1.4l-2-.7L4.7 9.3 6.4 10.6l-.1 1.4.1 1.4-1.7 1.3 1.6 2.8 2-.7a7.9 7.9 0 0 0 2.4 1.4l.3 2.1h2.8l.3-2.1a7.9 7.9 0 0 0 2.4-1.4l2 .7 1.6-2.8-1.7-1.3Z"/>
-      </svg>
-      Admin
+    <a class="tb-btn icon" id="admin-link" href="/admin/" title="Admin" aria-label="Admin">
+      <svg width="14" height="14" viewBox="0 0 90 90" fill="currentColor" aria-hidden="true"><path d="M 82.94 32.538 c -2.685 0 -5.093 -1.545 -6.327 -3.929 c -0.245 -0.476 -0.504 -0.948 -0.774 -1.416 c -0.27 -0.468 -0.55 -0.928 -0.84 -1.378 c -1.448 -2.26 -1.582 -5.117 -0.239 -7.443 c 1.951 -3.378 0.792 -7.696 -2.584 -9.645 l -9.352 -5.4 c -3.378 -1.951 -7.696 -0.792 -9.645 2.584 l -0.002 0.003 c -1.322 2.291 -3.815 3.641 -6.456 3.512 c -1.149 -0.056 -2.301 -0.057 -3.455 0 c -2.638 0.128 -5.124 -1.226 -6.444 -3.513 l -0.002 -0.002 c -1.951 -3.378 -6.269 -4.535 -9.645 -2.584 l -9.352 5.4 c -3.378 1.951 -4.535 6.269 -2.584 9.645 l 0.002 0.002 c 1.321 2.286 1.25 5.117 -0.18 7.336 c -0.625 0.972 -1.201 1.97 -1.726 2.993 c -1.209 2.353 -3.625 3.836 -6.269 3.836 H 7.063 c -3.9 0 -7.061 3.162 -7.061 7.061 v 10.801 c 0 3.9 3.162 7.061 7.061 7.061 l 0 0 c 2.685 0 5.093 1.545 6.327 3.929 c 0.245 0.475 0.504 0.948 0.774 1.416 c 0.27 0.468 0.55 0.928 0.84 1.378 c 1.448 2.26 1.582 5.117 0.239 7.443 c -1.951 3.378 -0.792 7.696 2.584 9.645 l 9.352 5.4 c 3.378 1.951 7.696 0.792 9.645 -2.584 l 0.002 -0.003 c 1.322 -2.291 3.815 -3.641 6.456 -3.512 c 1.149 0.056 2.301 0.057 3.455 0 c 2.638 -0.128 5.124 1.226 6.444 3.513 l 0.002 0.002 c 1.951 3.378 6.268 4.535 9.645 2.584 l 9.352 -5.4 c 3.378 -1.949 4.535 -6.268 2.584 -9.645 l -0.002 -0.002 c -1.321 -2.286 -1.25 -5.117 0.18 -7.336 c 0.625 -0.972 1.201 -1.97 1.726 -2.993 c 1.209 -2.353 3.625 -3.836 6.269 -3.836 h 0.003 c 3.9 0 7.061 -3.162 7.061 -7.061 V 39.599 C 90.001 35.7 86.84 32.538 82.94 32.538 z M 54.998 62.318 c -9.565 5.523 -21.796 2.245 -27.317 -7.32 c -5.523 -9.565 -2.245 -21.796 7.32 -27.317 s 21.796 -2.245 27.317 7.32 C 67.841 44.566 64.563 56.797 54.998 62.318 z"/></svg>
     </a>
   </header>
 
diff --git a/public/shell.js b/public/shell.js
index 3b2e20c..d9d24d8 100644
--- a/public/shell.js
+++ b/public/shell.js
@@ -71,12 +71,34 @@ function promptModal({ title, placeholder = '', value = '', okLabel = 'Save' })
 
 /* ── dropdown menus ─────────────────────────────────────────────────── */
 
+/* A menu opens the moment its button is clicked, drawn from what the page
+   already knows; whatever its rebuild has to fetch is slotted in when it
+   lands. It used to open only once the rebuild had finished, which made the
+   ＋ picker hostage to a network round trip — one that never completes when
+   the tiles' streams hold every connection the browser allows (see the
+   shared-stream pool below). rebuild(menu, stillOpen) may be async;
+   stillOpen() says whether the open it was started for is still current,
+   so a late fetch can't repaint a menu that has since closed or reopened. */
 function wireDropdown(btnId, menuId, rebuild) {
   const btn = document.getElementById(btnId);
   const menu = document.getElementById(menuId);
-  btn.addEventListener('click', async () => {
-    if (menu.hidden) await rebuild(menu);
-    menu.hidden = !menu.hidden;
+  let generation = 0;
+  btn.addEventListener('click', () => {
+    if (!menu.hidden) {
+      menu.hidden = true;
+      return;
+    }
+    const gen = ++generation;
+    const stillOpen = () => gen === generation && !menu.hidden;
+    menu.hidden = false;
+    // Whatever the rebuild does, the menu is on screen; a failure (now or
+    // later) leaves its previous contents rather than an invisible menu.
+    const failed = (err) => console.error(`[shell] ${menuId} could not be rebuilt:`, err);
+    try {
+      Promise.resolve(rebuild(menu, stillOpen)).catch(failed);
+    } catch (err) {
+      failed(err);
+    }
   });
   document.addEventListener('click', (e) => {
     if (!menu.hidden && !e.target.closest('#' + btnId) && !e.target.closest('#' + menuId)) {
@@ -86,9 +108,11 @@ function wireDropdown(btnId, menuId, rebuild) {
   return menu;
 }
 
-function menuItem(label, onClick, { sub = '', danger = false } = {}) {
+function menuItem(label, onClick, { sub = '', danger = false, disabled = false, title = '' } = {}) {
   const item = document.createElement('button');
   item.className = 'menu-item' + (danger ? ' danger' : '');
+  item.disabled = disabled;
+  if (title) item.title = title;
   const span = document.createElement('span');
   span.textContent = label;
   if (sub) {
@@ -106,11 +130,22 @@ function menuItem(label, onClick, { sub = '', danger = false } = {}) {
 
 let registry = new Map(); // module id -> manifest from GET /api/modules
 
+/** fetch that gives up after `ms`. A request the browser has queued behind
+    held connections would otherwise pend forever, and so would anything
+    awaiting it. */
+function fetchWithTimeout(url, ms, opts = {}) {
+  const ctl = new AbortController();
+  const timer = setTimeout(() => ctl.abort(), ms);
+  return fetch(url, { ...opts, signal: ctl.signal }).finally(() => clearTimeout(timer));
+}
+
 /** Refresh the enabled-module list. On failure the last known list is kept
     (the server may just be restarting mid-service). Returns true on success. */
 async function loadRegistry() {
   try {
-    const res = await fetch('/api/modules');
+    // Slow modules' tiles() are cut off server-side at 2 s, so a healthy
+    // answer is well inside this.
+    const res = await fetchWithTimeout('/api/modules', 8000);
     if (!res.ok) throw new Error('modules ' + res.status);
     const body = await res.json();
     registry = new Map((body.modules || []).map((m) => [m.id, m]));
@@ -216,7 +251,8 @@ function minSizeOf(tile) {
 
 /* ── tile DOM ───────────────────────────────────────────────────────── */
 
-const GEAR_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm8.4-2.1.1-1.4-.1-1.4 1.7-1.3-1.6-2.8-2 .7a7.9 7.9 0 0 0-2.4-1.4l-.3-2.1H11l-.3 2.1a7.9 7.9 0 0 0-2.4 1.4l-2-.7L4.7 9.3 6.4 10.6l-.1 1.4.1 1.4-1.7 1.3 1.6 2.8 2-.7a7.9 7.9 0 0 0 2.4 1.4l.3 2.1h2.8l.3-2.1a7.9 7.9 0 0 0 2.4-1.4l2 .7 1.6-2.8-1.7-1.3Z"/></svg>';
+const CLOSE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+const GEAR_SVG = '<svg viewBox="0 0 90 90" fill="currentColor" aria-hidden="true"><path d="M 82.94 32.538 c -2.685 0 -5.093 -1.545 -6.327 -3.929 c -0.245 -0.476 -0.504 -0.948 -0.774 -1.416 c -0.27 -0.468 -0.55 -0.928 -0.84 -1.378 c -1.448 -2.26 -1.582 -5.117 -0.239 -7.443 c 1.951 -3.378 0.792 -7.696 -2.584 -9.645 l -9.352 -5.4 c -3.378 -1.951 -7.696 -0.792 -9.645 2.584 l -0.002 0.003 c -1.322 2.291 -3.815 3.641 -6.456 3.512 c -1.149 -0.056 -2.301 -0.057 -3.455 0 c -2.638 0.128 -5.124 -1.226 -6.444 -3.513 l -0.002 -0.002 c -1.951 -3.378 -6.269 -4.535 -9.645 -2.584 l -9.352 5.4 c -3.378 1.951 -4.535 6.269 -2.584 9.645 l 0.002 0.002 c 1.321 2.286 1.25 5.117 -0.18 7.336 c -0.625 0.972 -1.201 1.97 -1.726 2.993 c -1.209 2.353 -3.625 3.836 -6.269 3.836 H 7.063 c -3.9 0 -7.061 3.162 -7.061 7.061 v 10.801 c 0 3.9 3.162 7.061 7.061 7.061 l 0 0 c 2.685 0 5.093 1.545 6.327 3.929 c 0.245 0.475 0.504 0.948 0.774 1.416 c 0.27 0.468 0.55 0.928 0.84 1.378 c 1.448 2.26 1.582 5.117 0.239 7.443 c -1.951 3.378 -0.792 7.696 2.584 9.645 l 9.352 5.4 c 3.378 1.951 7.696 0.792 9.645 -2.584 l 0.002 -0.003 c 1.322 -2.291 3.815 -3.641 6.456 -3.512 c 1.149 0.056 2.301 0.057 3.455 0 c 2.638 -0.128 5.124 1.226 6.444 3.513 l 0.002 0.002 c 1.951 3.378 6.268 4.535 9.645 2.584 l 9.352 -5.4 c 3.378 -1.949 4.535 -6.268 2.584 -9.645 l -0.002 -0.002 c -1.321 -2.286 -1.25 -5.117 0.18 -7.336 c 0.625 -0.972 1.201 -1.97 1.726 -2.993 c 1.209 -2.353 3.625 -3.836 6.269 -3.836 h 0.003 c 3.9 0 7.061 -3.162 7.061 -7.061 V 39.599 C 90.001 35.7 86.84 32.538 82.94 32.538 z M 54.998 62.318 c -9.565 5.523 -21.796 2.245 -27.317 -7.32 c -5.523 -9.565 -2.245 -21.796 7.32 -27.317 s 21.796 -2.245 27.317 7.32 C 67.841 44.566 64.563 56.797 54.998 62.318 z"/></svg>';
 
 function buildTile(tile) {
   const man = registry.get(tile.module);
@@ -225,6 +261,7 @@ function buildTile(tile) {
   el.className = 'tile';
   el.dataset.tileId = tile.id;
   if (man) el.dataset.module = man.id;
+  applyTint(tile, el);
 
   const head = document.createElement('div');
   head.className = 'tile-head';
@@ -243,23 +280,24 @@ function buildTile(tile) {
 
   head.append(dot, title, controls);
 
-  const hasSettings = man && man.instanceSchema && Object.keys(man.instanceSchema).length;
-  if (hasSettings) {
+  // Every tile has something to set: its own settings when the module
+  // offers any, and the tint either way.
+  if (man) {
     const gear = document.createElement('button');
     gear.className = 'tile-btn';
-    gear.title = 'Tile settings (this tile only)';
+    gear.title = 'Settings';
     gear.innerHTML = GEAR_SVG;
     gear.addEventListener('click', (e) => {
       e.stopPropagation();
-      toggleSettingsPopover(tile, el);
+      toggleSettingsPopover(tile, el, gear);
     });
     head.appendChild(gear);
   }
 
   const close = document.createElement('button');
   close.className = 'tile-btn close';
-  close.title = 'Remove this tile';
-  close.textContent = '✕';
+  close.title = 'Remove';
+  close.innerHTML = CLOSE_SVG; // a drawn cross, the same size in every browser (the ✕ glyph varies)
   close.addEventListener('click', (e) => {
     e.stopPropagation();
     removeTile(tile.id);
@@ -673,6 +711,10 @@ function buildDivider(L, R, top, bottom) {
  */
 function addTile(moduleId, entry = null) {
   const man = registry.get(moduleId);
+  if (entry?.single && tiles.some((t) => t.module === moduleId && t.variant === String(entry.id))) {
+    toast(`${entry.name} is already on this dashboard`);
+    return;
+  }
   const defaultSize = entry?.defaultSize || man?.defaultSize;
   const size = {
     w: Math.max(1, Math.min(COLS, defaultSize?.w || 4)),
@@ -680,7 +722,8 @@ function addTile(moduleId, entry = null) {
   };
   const spot = findSpot(size.w, size.h);
   const settings = {};
-  for (const [key, spec] of Object.entries(man?.instanceSchema || {})) {
+  const { schema: addSchema } = tileSchema({ variant: entry ? String(entry.id) : '' }, man);
+  for (const [key, spec] of Object.entries(addSchema)) {
     if (spec && 'default' in spec) settings[key] = spec.default;
   }
   Object.assign(settings, entry?.settings || {});
@@ -753,6 +796,134 @@ function tileMessage(entry, text) {
   entry.body.appendChild(msg);
 }
 
+/* ── one stream per page ─────────────────────────────────────────────── */
+
+/* Browsers allow about six HTTP/1.1 connections to one host, and an open
+   EventSource holds one of them for as long as it lives. Sharing one
+   stream per URL was not enough: a dashboard with six modules still ran
+   out (Safari first), and from then on every further request — a remounted
+   tile's /state, an avatar, the ＋ picker's list — sat in the browser's
+   queue waiting for a connection that was never handed back. So the page
+   holds ONE EventSource, GET /api/stream?s=<keys>, and the server relays
+   every stream named in it (a module's, or `shell:` for the shell's own)
+   with the key prefixed to each event name. Subscribers still see the
+   events they asked for by their own names. Adding or dropping a stream
+   remakes the connection with the new list, a moment later so several
+   tiles mounting together cause one reconnect; every stream announces
+   `open` again after it, so backfills run as before. */
+
+const muxSubs = new Map();     // key -> { subs: Set<{ handlers }> }
+let muxEs = null;              // the page's one EventSource
+let muxKeys = '';              // the key list it was opened with
+let muxTimer = null;           // the pending (re)connect
+let muxRetry = null;           // retry after the connection gave up
+const muxListened = new Set(); // "key|name" pairs with a listener on muxEs
+
+/** The stream key for a URL: `/api/modules/<id><path>` → `<id>:<path>`, `/api/events` → `shell:`. */
+function muxKeyFor(url) {
+  if (url === '/api/events') return 'shell:';
+  const m = /^\/api\/modules\/([^/?#]+)(\/[^?#]*)?$/.exec(url);
+  return m ? `${decodeURIComponent(m[1])}:${m[2] || '/'}` : null;
+}
+
+function muxFanOut(key, kind, e) {
+  for (const sub of [...(muxSubs.get(key)?.subs || [])]) {
+    const fn = kind === 'event' ? sub.handlers.events?.[e.type] : sub.handlers[kind];
+    try { fn?.(e); } catch (err) { console.error('[shell] stream handler failed:', err); }
+  }
+}
+
+/** Listen for `<key>|<name>` on the open connection and hand it to that key's subscribers as `name`. */
+function muxListen(key, name) {
+  const full = `${key}|${name}`;
+  if (!muxEs || muxListened.has(full)) return;
+  muxListened.add(full);
+  muxEs.addEventListener(full, (e) => {
+    if (name === '__open') return muxFanOut(key, 'open', new Event('open'));
+    if (name === '__down') return muxFanOut(key, 'error', new Event('error'));
+    const ev = { type: name, data: e.data, lastEventId: e.lastEventId };
+    muxFanOut(key, name === 'message' ? 'message' : 'event', ev);
+  });
+}
+
+function muxConnect() {
+  clearTimeout(muxTimer);
+  muxTimer = null;
+  clearTimeout(muxRetry);
+  muxRetry = null;
+  const keys = [...muxSubs.keys()].sort();
+  const wanted = keys.join(',');
+  if (!keys.length) {
+    try { muxEs?.close(); } catch { /* not open */ }
+    muxEs = null;
+    muxKeys = '';
+    return;
+  }
+  if (muxEs && muxKeys === wanted && muxEs.readyState !== EventSource.CLOSED) return;
+  try { muxEs?.close(); } catch { /* not open */ }
+  muxListened.clear();
+  muxKeys = wanted;
+  const es = new EventSource(`/api/stream?s=${encodeURIComponent(wanted)}`);
+  muxEs = es;
+  // Each stream says `open` for itself (the server's __open), so nothing to do on the connection's own open.
+  es.onerror = () => {
+    if (es !== muxEs) return;
+    for (const key of muxSubs.keys()) muxFanOut(key, 'error', new Event('error'));
+    // EventSource retries transient drops itself but gives up for good on a
+    // completed non-SSE response (a 502 while the server restarts).
+    if (es.readyState === EventSource.CLOSED && muxSubs.size) {
+      clearTimeout(muxRetry);
+      muxRetry = setTimeout(muxConnect, 3000);
+    }
+  };
+  for (const [key, entry] of muxSubs) {
+    muxListen(key, '__open');
+    muxListen(key, '__down');
+    muxListen(key, 'message');
+    for (const sub of entry.subs) for (const name of Object.keys(sub.handlers.events || {})) muxListen(key, name);
+  }
+}
+
+function sseSubscribe(url, handlers = {}) {
+  const key = muxKeyFor(url);
+  if (!key) {
+    console.warn('[shell] not a stream this page can carry:', url);
+    return { close() {} };
+  }
+  let entry = muxSubs.get(key);
+  if (!entry) {
+    entry = { subs: new Set() };
+    muxSubs.set(key, entry);
+  }
+  const sub = { handlers };
+  entry.subs.add(sub);
+  const carried = Boolean(muxEs) && muxKeys.split(',').includes(key) && muxEs.readyState !== EventSource.CLOSED;
+  if (carried) {
+    // Joining a stream the connection already carries: listeners for any
+    // new event names, and `open` a moment later so the caller's own setup
+    // finishes first — exactly as a fresh connection would have reported it.
+    for (const name of Object.keys(handlers.events || {})) muxListen(key, name);
+    if (muxEs.readyState === EventSource.OPEN) {
+      setTimeout(() => {
+        if (!entry.subs.has(sub)) return;
+        try { handlers.open?.(new Event('open')); } catch (err) { console.error('[shell] stream handler failed:', err); }
+      }, 0);
+    }
+  } else {
+    clearTimeout(muxTimer);
+    muxTimer = setTimeout(muxConnect, 20);
+  }
+  return {
+    close() {
+      if (!entry.subs.delete(sub) || entry.subs.size) return;
+      muxSubs.delete(key);
+      // A remount closes and reopens within milliseconds: wait before remaking the connection.
+      clearTimeout(muxTimer);
+      muxTimer = setTimeout(muxConnect, 500);
+    },
+  };
+}
+
 /**
  * The API handed to each module instance — the whole surface a module may
  * touch outside its root element. See docs/MODULE-GUIDE.md.
@@ -779,7 +950,7 @@ function buildModuleApi(tile, man, entry) {
     /** Per-tile settings: schema defaults overlaid with what this tile saved. */
     get instanceSettings() {
       const out = {};
-      for (const [key, spec] of Object.entries(man.instanceSchema || {})) {
+      for (const [key, spec] of Object.entries(tileSchema(tile, man).schema)) {
         if (spec && 'default' in spec) out[key] = spec.default;
       }
       return Object.assign(out, tile.settings || {});
@@ -798,40 +969,17 @@ function buildModuleApi(tile, man, entry) {
     },
 
     /**
-     * EventSource scoped the same way, with auto-reconnect: EventSource
-     * retries transient drops itself but gives up for good when a retry gets
-     * a completed non-SSE response (a 502 while the upstream is down), so a
-     * closed stream is recreated on a timer until it works again.
+     * EventSource scoped the same way, with auto-reconnect: a stream that
+     * gives up (a 502 while the upstream is down) is recreated on a timer
+     * until it works again. Tiles asking for the same stream share one
+     * connection — see the pool above; a module sees no difference.
      * handlers: { open(e), error(e), message(e), events: { name: fn } }
      */
     sse(subPath, handlers = {}) {
-      const url = '/api/modules/' + man.id + subPath;
-      let es = null;
-      let retryTimer = null;
-      let closed = false;
-      const connect = () => {
-        if (closed) return;
-        try { es?.close(); } catch { /* already closed */ }
-        es = new EventSource(url);
-        if (handlers.open) es.onopen = handlers.open;
-        if (handlers.message) es.onmessage = handlers.message;
-        for (const [name, fn] of Object.entries(handlers.events || {})) {
-          es.addEventListener(name, fn);
-        }
-        es.onerror = (e) => {
-          try { handlers.error?.(e); } catch { /* module's problem */ }
-          if (es.readyState === EventSource.CLOSED) {
-            clearTimeout(retryTimer);
-            retryTimer = setTimeout(connect, 3000);
-          }
-        };
-      };
-      connect();
+      const shared = sseSubscribe('/api/modules/' + man.id + subPath, handlers);
       const handle = {
         close() {
-          closed = true;
-          clearTimeout(retryTimer);
-          try { es?.close(); } catch { /* already closed */ }
+          shared.close();
           sseHandles.delete(handle);
         },
       };
@@ -987,6 +1135,23 @@ function unmountModule(tile) {
 /* ── per-tile settings popover ──────────────────────────────────────── */
 
 /** `<input type="color">` only accepts #rrggbb — anything else falls back. */
+/* ── the tile tint ───────────────────────────────────────────────────
+   Every tile can be washed in a colour of its own — a way to tell one
+   screen's tiles apart at a glance (this campus green, that one amber).
+   It is the shell's, not a module's: the key is reserved, it is offered in
+   every gear window, and it saves with the layout like any other tile
+   setting. A tile with no tint looks exactly as before. */
+const TINT_KEY = '__tint';
+
+/** Paint (or clear) a tile's tint on its element. */
+function applyTint(tile, el = tileEls.get(tile.id)?.el) {
+  if (!el) return;
+  const hex = colorHex(tile.settings?.[TINT_KEY], '');
+  if (hex) el.style.setProperty('--tile-tint', hex);
+  else el.style.removeProperty('--tile-tint');
+  el.classList.toggle('is-tinted', Boolean(hex));
+}
+
 function colorHex(value, fallback) {
   const s = String(value ?? '').trim();
   if (/^#[0-9a-fA-F]{6}$/.test(s)) return s.toLowerCase();
@@ -994,28 +1159,165 @@ function colorHex(value, fallback) {
   return fallback;
 }
 
+/** The settings a tile offers: its picker entry's own schema when it has one
+    — a solo timer wants none of a full tile's switches — else the module's.
+    Same for the groups that arrange them. */
+function tileSchema(tile, man) {
+  const own = (v) => (v && typeof v === 'object' ? v : null);
+  const variant = String(tile?.variant || '');
+  const entry = variant && Array.isArray(man?.tiles)
+    ? man.tiles.find((e) => String(e.id) === variant)
+      || man.tiles.find((e) => Array.isArray(e.aliases) && e.aliases.includes(variant))
+    : null;
+  return {
+    schema: own(entry?.instanceSchema) || own(man?.instanceSchema) || {},
+    groups: own(entry?.instanceGroups) || own(man?.instanceGroups) || {},
+  };
+}
+
+/* ── tooltips: at once on hover, short, one for the whole page ──────────
+   Every header and top-bar button's `title` becomes a tip the shell shows
+   the moment the pointer arrives — the browser's own waits about a second
+   and looks different in each browser. The text moves from `title` to
+   data-tip so the native one never appears; a module that sets `title`
+   again later is picked up on the next hover. */
+let tipEl = null;
+const TIP_TARGETS = '.tile-btn, .tb-btn, [data-tip]';
+
+function tipTextFor(el) {
+  if (el.title) {
+    el.dataset.tip = el.title;
+    if (!el.getAttribute('aria-label')) el.setAttribute('aria-label', el.title);
+    el.removeAttribute('title');
+  }
+  return el.dataset.tip || '';
+}
+
+function showTip(el) {
+  const text = tipTextFor(el);
+  if (!text) return;
+  if (!tipEl) {
+    tipEl = document.createElement('div');
+    tipEl.id = 'tip';
+    tipEl.setAttribute('role', 'tooltip');
+    document.body.appendChild(tipEl);
+  }
+  tipEl.textContent = text;
+  tipEl.hidden = false;
+  const r = el.getBoundingClientRect();
+  const w = tipEl.offsetWidth;
+  const h = tipEl.offsetHeight;
+  const left = Math.max(6, Math.min(r.left + r.width / 2 - w / 2, window.innerWidth - w - 6));
+  let top = r.bottom + 6;
+  if (top + h > window.innerHeight - 6) top = r.top - h - 6;
+  tipEl.style.left = `${Math.round(left)}px`;
+  tipEl.style.top = `${Math.round(top)}px`;
+  tipEl._for = el;
+}
+
+function hideTip(el = null) {
+  if (!tipEl || tipEl.hidden) return;
+  if (el && tipEl._for !== el) return;
+  tipEl.hidden = true;
+  tipEl._for = null;
+}
+
+document.addEventListener('pointerover', (e) => {
+  const el = e.target?.closest?.(TIP_TARGETS);
+  if (!el || (tipEl && tipEl._for === el && !tipEl.hidden)) return;
+  showTip(el);
+});
+document.addEventListener('pointerout', (e) => {
+  const el = e.target?.closest?.(TIP_TARGETS);
+  if (!el || (e.relatedTarget && el.contains(e.relatedTarget))) return;
+  hideTip(el);
+});
+document.addEventListener('pointerdown', () => hideTip(), true);
+document.addEventListener('focusin', (e) => {
+  const el = e.target?.closest?.(TIP_TARGETS);
+  if (el) showTip(el);
+});
+document.addEventListener('focusout', () => hideTip());
+window.addEventListener('scroll', () => hideTip(), true);
+window.addEventListener('resize', () => hideTip());
+
 function closeSettingsPopovers() {
   document.querySelectorAll('.tile-settings').forEach((p) => {
     p._cleanup?.();
+    p._button?.classList.remove('is-open');
     p.remove();
   });
 }
 
-function toggleSettingsPopover(tile, el) {
-  const existing = el.querySelector('.tile-settings');
+/* ── the per-tile settings window ───────────────────────────────────── */
+
+/* It opens beside its tile — to the right when there is room, else the
+   left, else over it — and always inside the viewport. A window rather than
+   something inside the tile, because a tile can be smaller than its own
+   settings, and because the point of live settings is watching the tile
+   change while you change them: the window must not sit on top of it. */
+function placePopover(pop, anchor) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const pad = 8;
+  const w = pop.offsetWidth;
+  const h = pop.offsetHeight;
+  let left = anchor.right + pad;
+  if (left + w > vw - pad) left = anchor.left - w - pad;
+  if (left < pad) left = Math.min(Math.max(pad, anchor.left), Math.max(pad, vw - w - pad));
+  let top = anchor.top;
+  if (top + h > vh - pad) top = vh - h - pad;
+  if (top < pad) top = pad;
+  pop.style.left = Math.round(left) + 'px';
+  pop.style.top = Math.round(top) + 'px';
+}
+
+function clampPopover(pop) {
+  const pad = 8;
+  const maxLeft = Math.max(pad, window.innerWidth - pop.offsetWidth - pad);
+  const maxTop = Math.max(pad, window.innerHeight - pop.offsetHeight - pad);
+  pop.style.left = Math.min(Math.max(pad, pop.offsetLeft), maxLeft) + 'px';
+  pop.style.top = Math.min(Math.max(pad, pop.offsetTop), maxTop) + 'px';
+}
+
+/** Open (or close) the settings window for `tile`, beside its element `el`; `button` is the gear that asked. */
+function toggleSettingsPopover(tile, el, button = null) {
+  const existing = document.querySelector(`.tile-settings[data-tile-id="${tile.id}"]`);
   closeSettingsPopovers();
   if (existing) return;
   const man = registry.get(tile.module);
-  if (!man || !man.instanceSchema) return;
+  if (!man) return;
+  const { schema, groups: groupMeta } = tileSchema(tile, man);
 
   const pop = document.createElement('div');
   pop.className = 'tile-settings';
-  const inputs = new Map();
+  pop.dataset.tileId = tile.id;
+  pop.setAttribute('role', 'dialog');
+  pop.setAttribute('aria-label', `${tile.title || man.name} settings`);
+  // The gear that opened it wears the window's colour while it is open.
+  if (button) {
+    button.classList.add('is-open');
+    pop._button = button;
+  }
 
-  /* These are display choices — a text size, a filter, a colour — so they
-     apply as they are changed and save with the layout. There is nothing to
-     confirm, so there is no Apply. Typing is debounced because applying
-     means remounting the module, which shouldn't happen per keystroke. */
+  // A slim bar to move it by — nothing else. No title (the window sits beside
+  // the tile it belongs to) and no close button: a click anywhere else, or
+  // Escape, closes it.
+  const bar = document.createElement('div');
+  bar.className = 'tile-settings-bar';
+  bar.title = 'Drag to move';
+  const body = document.createElement('div');
+  body.className = 'tile-settings-body';
+  pop.append(bar, body);
+
+  const inputs = new Map();
+  const shownWhen = []; // fields that appear only while another has a given value
+
+  /* Display choices apply as they change and save with the layout — nothing
+     to confirm, so no Apply. Typing is debounced because applying means
+     remounting the module, which shouldn't happen per keystroke. */
+  const same = (a, b) => a === b
+    || (Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((v, i) => v === b[i]));
   let applyTimer = null;
   const commit = (delay) => {
     clearTimeout(applyTimer);
@@ -1023,11 +1325,11 @@ function toggleSettingsPopover(tile, el) {
       applyTimer = null;
       // Only when something really moved: a text field fires `input` and then
       // `change` on the way out, and a module shouldn't be torn down twice
-      // over for one edit.
+      // over for one edit. A reader answering undefined has nothing to say.
       let changed = false;
       for (const [key, read] of inputs) {
         const value = read();
-        if (tile.settings[key] === value) continue;
+        if (value === undefined || same(tile.settings[key], value)) continue;
         tile.settings[key] = value;
         changed = true;
       }
@@ -1039,19 +1341,31 @@ function toggleSettingsPopover(tile, el) {
   const live = (input, event = 'change', delay = 0) => {
     input.addEventListener(event, () => commit(delay));
   };
+  /** Choices a module only knows at runtime, from one of its own routes. */
+  const fetchOptions = async (route) => {
+    try {
+      const res = await fetchWithTimeout(`/api/modules/${encodeURIComponent(man.id)}${route}`, 8000);
+      const data = res.ok ? await res.json() : null;
+      return Array.isArray(data?.options) ? data.options : null;
+    } catch {
+      return null;
+    }
+  };
+  const optValue = (opt) => String(typeof opt === 'object' ? opt.value : opt);
+  const optLabel = (opt) => String(typeof opt === 'object' ? (opt.label ?? opt.value) : opt);
 
   // Fields render in schema order; a field's `group` starts a labeled
-  // subsection that consecutive same-group fields share, and the manifest's
-  // optional `instanceGroups[name]` adds { collapsed, columns, help } —
-  // the same conventions as the admin page's config form.
-  const groupMeta = man.instanceGroups && typeof man.instanceGroups === 'object' ? man.instanceGroups : {};
+  // subsection that consecutive same-group fields share, and the groups map
+  // adds { collapsed, columns, help, toggle } — the same conventions as the
+  // admin page's config form.
   let groupName = null;
-  let container = pop;
+  let container = body;
+  let current = null; // the open group: { el, title, toggleKey }
 
-  for (const [key, spec] of Object.entries(man.instanceSchema)) {
+  for (const [key, spec] of Object.entries(schema)) {
     const type = spec?.type || 'string';
     const label = spec?.label || key;
-    const current = key in (tile.settings || {}) ? tile.settings[key] : spec?.default;
+    const value = key in (tile.settings || {}) ? tile.settings[key] : spec?.default;
 
     const g = spec?.group || '';
     if (g !== groupName) {
@@ -1064,54 +1378,151 @@ function toggleSettingsPopover(tile, el) {
         if (folds) group.open = !meta.collapsed;
         const title = document.createElement(folds ? 'summary' : 'div');
         title.className = 'field-group-title';
-        title.textContent = g;
+        const titleText = document.createElement('span');
+        titleText.className = 'field-group-name';
+        titleText.textContent = g;
+        title.appendChild(titleText);
         group.appendChild(title);
-        const body = document.createElement('div');
-        body.className = 'field-group-body';
+        const groupBody = document.createElement('div');
+        groupBody.className = 'field-group-body';
         const cols = Math.min(4, Math.trunc(Number(meta.columns)) || 0);
         if (cols > 1) {
-          body.classList.add('is-columns');
-          body.style.setProperty('--cols', String(cols));
+          groupBody.classList.add('is-columns');
+          groupBody.style.setProperty('--cols', String(cols));
         }
         if (meta.help) {
           const help = document.createElement('div');
           help.className = 'field-group-help';
           help.textContent = meta.help;
-          body.appendChild(help);
+          groupBody.appendChild(help);
         }
-        group.appendChild(body);
-        pop.appendChild(group);
+        group.appendChild(groupBody);
+        body.appendChild(group);
         pop.classList.add('has-groups');
-        container = body;
+        container = groupBody;
+        current = { el: group, title, toggleKey: typeof meta.toggle === 'string' ? meta.toggle : '' };
       } else {
-        container = pop;
+        container = body;
+        current = null;
       }
     }
 
-    const field = document.createElement('label');
-    field.className = 'field' + (type === 'boolean' ? ' check' : '');
+    const isSwitch = type === 'boolean' || type === 'switch';
+    // A multiselect holds several controls, so it can't be a <label>: a click
+    // anywhere in one would flip the first control.
+    const field = document.createElement(type === 'multiselect' ? 'div' : 'label');
+    field.className = 'field' + (isSwitch ? ' check' : '');
+    let switchInput = null;
 
-    if (type === 'boolean') {
+    if (isSwitch) {
+      // A switch: on is shown/enabled, off is hidden/disabled — the label
+      // names what it turns on. A real checkbox stays underneath (keyboard,
+      // label clicks and `change` all keep working); the track is the look.
+      const text = document.createElement('span');
+      text.className = 'check-label';
+      text.textContent = label;
+      const toggle = document.createElement('span');
+      toggle.className = 'switch';
       const input = document.createElement('input');
       input.type = 'checkbox';
-      input.checked = Boolean(current);
-      field.append(input, document.createTextNode(label));
+      input.checked = Boolean(value);
+      input.setAttribute('aria-label', label);
+      const track = document.createElement('span');
+      track.className = 'track';
+      toggle.append(input, track);
+      field.append(text, toggle);
       inputs.set(key, () => input.checked);
       live(input);
-    } else if (type === 'select' && Array.isArray(spec.options)) {
+      switchInput = input;
+    } else if (type === 'select' && (Array.isArray(spec.options) || spec.optionsRoute)) {
       const span = document.createElement('span');
       span.textContent = label;
       const select = document.createElement('select');
-      for (const opt of spec.options) {
-        const o = document.createElement('option');
-        o.value = String(typeof opt === 'object' ? opt.value : opt);
-        o.textContent = String(typeof opt === 'object' ? (opt.label ?? opt.value) : opt);
-        select.appendChild(o);
-      }
-      select.value = String(current ?? '');
+      const saved = value === undefined || value === null ? '' : String(value);
+      const fill = (options) => {
+        const wanted = select.options.length ? select.value : saved;
+        select.innerHTML = '';
+        // What this tile saved stays choosable even when the live list has
+        // moved on (a source that is off right now, say).
+        if (saved && !options.some((o) => optValue(o) === saved)) {
+          options = [{ value: saved, label: `${saved} (saved)` }, ...options];
+        }
+        for (const opt of options) {
+          const o = document.createElement('option');
+          o.value = optValue(opt);
+          o.textContent = optLabel(opt);
+          select.appendChild(o);
+        }
+        select.value = options.some((o) => optValue(o) === wanted) ? wanted : saved;
+      };
+      fill(Array.isArray(spec.options) ? spec.options : []);
+      if (spec.optionsRoute) fetchOptions(spec.optionsRoute).then((opts) => { if (opts) fill(opts); });
       field.append(span, select);
       inputs.set(key, () => select.value);
       live(select);
+    } else if (type === 'multiselect' && (Array.isArray(spec.options) || spec.optionsRoute)) {
+      // Several picks from a list, one switch each, stored as an array. With
+      // `allByDefault`, a tile that has never chosen shows every option on
+      // and saves nothing until someone flips one — so options that turn up
+      // later are on as well, until there is an explicit list.
+      field.classList.add('multiselect-field');
+      const span = document.createElement('span');
+      span.className = 'field-label';
+      span.textContent = label;
+      const list = document.createElement('div');
+      list.className = 'multiselect';
+      const cols = Math.min(4, Math.trunc(Number(spec.columns)) || 0);
+      if (cols > 1) {
+        list.classList.add('is-columns');
+        list.style.setProperty('--cols', String(cols));
+      }
+      const saved = Array.isArray(value) ? value.map(String) : null; // null: never chosen
+      let touched = false;
+      const chosen = new Set(saved || []);
+      const fill = (options) => {
+        for (const input of list.querySelectorAll('input')) {
+          if (input.checked) chosen.add(input.value);
+          else chosen.delete(input.value);
+        }
+        list.innerHTML = '';
+        const missing = [...chosen].filter((v) => !options.some((o) => optValue(o) === v));
+        const all = [...options, ...missing.map((v) => ({ value: v, label: `${v} (saved — not listed now)` }))];
+        for (const opt of all) {
+          const row = document.createElement('label');
+          row.className = 'multiselect-row';
+          const text = document.createElement('span');
+          text.className = 'check-label';
+          text.textContent = optLabel(opt);
+          const toggle = document.createElement('span');
+          toggle.className = 'switch';
+          const input = document.createElement('input');
+          input.type = 'checkbox';
+          input.value = optValue(opt);
+          input.checked = saved === null && !touched && spec.allByDefault ? true : chosen.has(input.value);
+          if (input.checked) chosen.add(input.value);
+          const track = document.createElement('span');
+          track.className = 'track';
+          toggle.append(input, track);
+          row.append(text, toggle);
+          input.addEventListener('change', () => {
+            touched = true;
+            commit(0);
+          });
+          list.appendChild(row);
+        }
+        if (!all.length) {
+          const none = document.createElement('div');
+          none.className = 'multiselect-empty';
+          none.textContent = 'Nothing to choose from yet.';
+          list.appendChild(none);
+        }
+      };
+      fill(Array.isArray(spec.options) ? spec.options : []);
+      if (spec.optionsRoute) fetchOptions(spec.optionsRoute).then((opts) => { if (opts) fill(opts); });
+      field.append(span, list);
+      inputs.set(key, () => (saved === null && !touched
+        ? undefined
+        : [...list.querySelectorAll('input:checked')].map((input) => input.value)));
     } else if (type === 'color') {
       // A swatch picker; the value is always a #rrggbb string.
       field.classList.add('color-field');
@@ -1119,16 +1530,54 @@ function toggleSettingsPopover(tile, el) {
       span.textContent = label;
       const input = document.createElement('input');
       input.type = 'color';
-      input.value = colorHex(current, colorHex(spec?.default, '#2ee59a'));
+      input.value = colorHex(value, colorHex(spec?.default, '#2ee59a'));
       field.append(span, input);
       inputs.set(key, () => input.value);
       live(input, 'input', 150);   // dragging the picker fires continuously
+    } else if (type === 'template') {
+      // Text with placeholders, built by dragging (or clicking) the variables
+      // the module offers into it — nobody should have to remember the names.
+      field.classList.add('template-field');
+      const span = document.createElement('span');
+      span.textContent = label;
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.spellcheck = false;
+      input.value = value === undefined || value === null ? '' : String(value);
+      const vars = document.createElement('div');
+      vars.className = 'template-vars';
+      for (const v of Array.isArray(spec.variables) ? spec.variables : []) {
+        const chip = document.createElement('button');
+        chip.type = 'button';
+        chip.className = 'template-var';
+        chip.draggable = true;
+        const token = optValue(v);
+        chip.textContent = optLabel(v);
+        chip.title = `Drag or click to insert ${token}`;
+        chip.addEventListener('dragstart', (e) => {
+          e.dataTransfer.setData('text/plain', token);
+          e.dataTransfer.effectAllowed = 'copy';
+        });
+        chip.addEventListener('click', (e) => {
+          e.preventDefault();
+          const start = input.selectionStart ?? input.value.length;
+          const end = input.selectionEnd ?? start;
+          input.setRangeText(token, start, end, 'end');
+          input.focus();
+          commit(0);
+        });
+        vars.appendChild(chip);
+      }
+      field.append(span, input, vars);
+      inputs.set(key, () => input.value);
+      live(input, 'input', 400);
+      live(input, 'change');
     } else {
       const span = document.createElement('span');
       span.textContent = label;
       const input = document.createElement('input');
       input.type = type === 'number' ? 'number' : (type === 'password' ? 'password' : 'text');
-      input.value = current === undefined || current === null ? '' : String(current);
+      input.value = value === undefined || value === null ? '' : String(value);
       field.append(span, input);
       inputs.set(key, () => (type === 'number' ? Number(input.value) : input.value));
       live(input, 'input', 400);   // mid-word is not the moment to remount
@@ -1140,23 +1589,115 @@ function toggleSettingsPopover(tile, el) {
       help.textContent = spec.help;
       field.appendChild(help);
     }
-    container.appendChild(field);
+
+    if (typeof spec?.showWhen === 'string' && spec.showWhen) shownWhen.push({ field, key: spec.showWhen });
+
+    if (current && switchInput && key === current.toggleKey) {
+      // The group's on/off lives in its title row, never in the body, and a
+      // click on it must not fold a <details>.
+      const grp = current;
+      field.classList.add('group-toggle');
+      field.addEventListener('click', (e) => e.stopPropagation());
+      const sync = () => grp.el.classList.toggle('is-off', !switchInput.checked);
+      switchInput.addEventListener('change', sync);
+      sync();
+      grp.title.appendChild(field);
+    } else {
+      container.appendChild(field);
+    }
   }
 
-  // Nothing to press: click away, press Escape, or click the gear again.
+  /* The tint sits on its own at the foot of the window, under a hairline —
+     it is the shell's setting, not one of the module's. Unlike those, a
+     change needs no remount: nothing but the tile's own chrome reads it. */
+  {
+    const field = document.createElement('div');
+    field.className = 'field color-field tint-field'; // the swatch reads like a module's colour field
+    const text = document.createElement('span');
+    text.textContent = 'Tile tint';
+    const input = document.createElement('input');
+    input.type = 'color';
+    input.setAttribute('aria-label', 'Tile tint');
+    const clear = document.createElement('button');
+    clear.type = 'button';
+    clear.className = 'tint-clear';
+    clear.textContent = 'Clear';
+    clear.title = 'No tint';
+    const paint = () => {
+      const hex = colorHex(tile.settings[TINT_KEY], '');
+      // With no tint the swatch opens on the panel colour, so the picker
+      // starts somewhere sane rather than at black.
+      input.value = hex || colorHex(getComputedStyle(document.documentElement).getPropertyValue('--panel'), '#1a1d21');
+      clear.hidden = !hex;
+    };
+    const set = (hex) => {
+      if (hex) tile.settings[TINT_KEY] = hex;
+      else delete tile.settings[TINT_KEY];
+      applyTint(tile);
+      paint();
+      saveLayout();
+    };
+    input.addEventListener('input', () => set(colorHex(input.value, '')));
+    clear.addEventListener('click', () => set(''));
+    paint();
+    field.append(text, clear, input);
+    body.appendChild(field);
+  }
+
+  // "Short day" appears once "Date" is on: a field with showWhen:"K" follows
+  // K's switch, live — the same rule the admin page applies.
+  if (shownWhen.length) {
+    const refresh = () => {
+      for (const rule of shownWhen) {
+        const read = inputs.get(rule.key);
+        rule.field.hidden = read ? !read() : false;
+      }
+    };
+    refresh();
+    body.addEventListener('change', refresh);
+    body.addEventListener('input', refresh);
+  }
+
+  // Nothing to press: click away, press Escape, or the gear again.
   // (The gear's own click stops propagating, so it toggles rather than
   // closing and reopening.)
   const closeOnClick = (e) => { if (!pop.contains(e.target)) closeSettingsPopovers(); };
   const closeOnEscape = (e) => { if (e.key === 'Escape') closeSettingsPopovers(); };
+  const keepInView = () => clampPopover(pop);
   pop._cleanup = () => {
     document.removeEventListener('click', closeOnClick);
     document.removeEventListener('keydown', closeOnEscape);
+    window.removeEventListener('resize', keepInView);
   };
   document.addEventListener('click', closeOnClick);
   document.addEventListener('keydown', closeOnEscape);
+  window.addEventListener('resize', keepInView);
+
+  // Moved by its bar.
+  bar.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0 && e.pointerType === 'mouse') return;
+    e.preventDefault();
+    bar.setPointerCapture(e.pointerId);
+    const dx = e.clientX - pop.offsetLeft;
+    const dy = e.clientY - pop.offsetTop;
+    const onMove = (ev) => {
+      pop.style.left = (ev.clientX - dx) + 'px';
+      pop.style.top = (ev.clientY - dy) + 'px';
+      clampPopover(pop);
+    };
+    const onUp = () => {
+      bar.removeEventListener('pointermove', onMove);
+      bar.removeEventListener('pointerup', onUp);
+      bar.removeEventListener('pointercancel', onUp);
+    };
+    bar.addEventListener('pointermove', onMove);
+    bar.addEventListener('pointerup', onUp);
+    bar.addEventListener('pointercancel', onUp);
+  });
 
   pop.addEventListener('pointerdown', (e) => e.stopPropagation());
-  el.appendChild(pop);
+  document.body.appendChild(pop);
+  placePopover(pop, el.getBoundingClientRect());
 }
 
 /** Tear a tile's module down and start it again (settings changed). */
@@ -1182,8 +1723,21 @@ function renderLayout(list) {
 
 /* ── menus ──────────────────────────────────────────────────────────── */
 
-wireDropdown('add-btn', 'add-menu', async (menu) => {
-  await loadRegistry();
+/* What the ＋ picker shows, as a string: repainting a menu the user is
+   already pointing at is only worth it when something in it changed. */
+function addMenuSignature() {
+  return JSON.stringify([...registry.values()].map((m) => [m.id, m.name, m.description, m.tiles]));
+}
+
+wireDropdown('add-btn', 'add-menu', async (menu, stillOpen) => {
+  // Painted from the list already in hand, then refreshed: a module's tile
+  // list is live data, and Admin may have enabled or disabled something.
+  const shown = addMenuSignature();
+  renderAddMenu(menu);
+  if (await loadRegistry() && stillOpen() && addMenuSignature() !== shown) renderAddMenu(menu);
+});
+
+function renderAddMenu(menu) {
   menu.innerHTML = '';
   const manifests = [...registry.values()];
   if (!manifests.length) {
@@ -1203,21 +1757,25 @@ wireDropdown('add-btn', 'add-menu', async (menu) => {
       title.textContent = man.name;
       menu.appendChild(title);
       for (const entry of entries) {
+        // An entry that allows one tile at most is offered greyed out once
+        // that tile exists — a second Send box would only confuse.
+        const placed = entry.single && tiles.some((t) => t.module === man.id && t.variant === String(entry.id));
+        // Descriptions ride along as tooltips: the list stays a list.
         menu.appendChild(menuItem(entry.name, () => {
           menu.hidden = true;
           addTile(man.id, entry);
-        }, { sub: entry.description || '' }));
+        }, { disabled: placed, title: placed ? 'Already on this dashboard' : (entry.description || '') }));
       }
     } else {
       menu.appendChild(menuItem(man.name, () => {
         menu.hidden = true;
         addTile(man.id);
-      }, { sub: man.description || '' }));
+      }, { title: man.description || '' }));
     }
   }
-});
+}
 
-wireDropdown('layout-btn', 'layout-menu', async (menu) => {
+wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
   menu.innerHTML = '';
 
   menu.appendChild(menuItem('Save as named layout…', async () => {
@@ -1250,43 +1808,46 @@ wireDropdown('layout-btn', 'layout-menu', async (menu) => {
   divider.className = 'menu-divider';
   menu.appendChild(divider);
 
-  // named layouts stored on the server
-  let layouts = [];
-  try {
-    const res = await fetch('/api/layouts');
-    if (res.ok) layouts = (await res.json()).layouts || [];
-  } catch { /* server briefly away — the menu just shows none */ }
-  if (layouts.length) {
-    const title = document.createElement('div');
-    title.className = 'menu-title';
-    title.textContent = 'Load from server';
-    menu.appendChild(title);
-    for (const l of layouts) {
-      menu.appendChild(menuItem(l.name, async () => {
-        menu.hidden = true;
-        try {
-          const res = await fetch('/api/layouts/' + encodeURIComponent(l.name));
-          const body = await res.json().catch(() => ({}));
-          if (!res.ok) throw new Error(body.error || 'Load failed (' + res.status + ')');
-          // Loading copies the layout into this browser's own state — it
-          // does not live-link browsers together.
-          renderLayout(body.layout.tiles || []);
-          saveLayout();
-          toast(`Loaded “${l.name}”`);
-        } catch (e) {
-          toast(e.message, true);
-        }
-      }, { sub: `${l.tiles} tile${l.tiles === 1 ? '' : 's'}` }));
-    }
-    menu.appendChild(divider.cloneNode());
-  }
-
-  menu.appendChild(menuItem('Reset layout', () => {
+  const reset = menuItem('Reset layout', () => {
     menu.hidden = true;
     renderLayout([]);
     saveLayout();
     toast('Layout cleared');
-  }, { danger: true, sub: 'Remove every tile from this browser' }));
+  }, { danger: true, sub: 'Remove every tile from this browser' });
+  menu.appendChild(reset);
+
+  // Named layouts stored on the server slot in above Reset once they
+  // arrive; until then (or if they never do) the menu is already usable.
+  let layouts = [];
+  try {
+    const res = await fetchWithTimeout('/api/layouts', 8000);
+    if (res.ok) layouts = (await res.json()).layouts || [];
+  } catch { /* server briefly away — the menu just shows none */ }
+  if (!layouts.length || !stillOpen()) return;
+  const block = document.createDocumentFragment();
+  const title = document.createElement('div');
+  title.className = 'menu-title';
+  title.textContent = 'Load from server';
+  block.appendChild(title);
+  for (const l of layouts) {
+    block.appendChild(menuItem(l.name, async () => {
+      menu.hidden = true;
+      try {
+        const res = await fetch('/api/layouts/' + encodeURIComponent(l.name));
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) throw new Error(body.error || 'Load failed (' + res.status + ')');
+        // Loading copies the layout into this browser's own state — it
+        // does not live-link browsers together.
+        renderLayout(body.layout.tiles || []);
+        saveLayout();
+        toast(`Loaded “${l.name}”`);
+      } catch (e) {
+        toast(e.message, true);
+      }
+    }, { sub: `${l.tiles} tile${l.tiles === 1 ? '' : 's'}` }));
+  }
+  block.appendChild(divider.cloneNode());
+  menu.insertBefore(block, reset);
 });
 
 /* ── menu bar show/hide (notch, like the tile title bars) ───────────── */
@@ -1504,19 +2065,14 @@ new ResizeObserver(() => {
    config or enabled flags change. Tiles of a changed module get
    onConfigChange(cfg) if they implement it, otherwise a clean remount. */
 
-let eventsSource = null;
-let eventsRetry = null;
-
 function subscribeEvents() {
-  try { eventsSource?.close(); } catch { /* not open */ }
-  eventsSource = new EventSource('/api/events');
-  eventsSource.addEventListener('modules-changed', () => handleModulesChanged());
-  eventsSource.onerror = () => {
-    if (eventsSource.readyState === EventSource.CLOSED) {
-      clearTimeout(eventsRetry);
-      eventsRetry = setTimeout(subscribeEvents, 4000);
-    }
-  };
+  // Rides on the page's one stream connection (see sseSubscribe) as `shell:`.
+  sseSubscribe('/api/events', {
+    events: {
+      'modules-changed': () => handleModulesChanged(),
+      theme: handleThemeEvent,
+    },
+  });
 }
 
 async function handleModulesChanged() {
@@ -1547,6 +2103,43 @@ async function handleModulesChanged() {
   }
 }
 
+/* ── theme ──────────────────────────────────────────────────────────── */
+
+/* The dashboard's palette is a server-wide choice (Admin → Theme). Five
+   preset variable sets live in style.css as html[data-theme="…"]; applying
+   one is setting that attribute. The last-known theme goes on synchronously
+   from localStorage so a reload never flashes the default palette, then the
+   server's answer (GET /api/theme) wins, and a `theme` shell event on
+   /api/events switches every open dashboard the moment an admin picks
+   another. Modules style with the shell variables, so they follow; a colour
+   a tile is configured with is set on the tile itself and stays as chosen. */
+
+const LS_THEME = 'proddash:theme';
+
+function applyTheme(id) {
+  const theme = String(id || '');
+  if (!/^[a-z][a-z0-9-]{0,31}$/.test(theme)) return;
+  document.documentElement.dataset.theme = theme;
+  try { localStorage.setItem(LS_THEME, theme); } catch { /* private mode — fine */ }
+}
+
+/** `theme` shell event from /api/events (wired in subscribeEvents). */
+function handleThemeEvent(e) {
+  try {
+    applyTheme(JSON.parse(e.data).theme);
+  } catch { /* a malformed frame changes nothing */ }
+}
+
+function initTheme() {
+  try { applyTheme(localStorage.getItem(LS_THEME)); } catch { /* fine */ }
+  fetch('/api/theme', { cache: 'no-store' })
+    .then((res) => (res.ok ? res.json() : null))
+    .then((body) => { if (body?.theme) applyTheme(body.theme); })
+    .catch(() => { /* offline: the remembered theme stands */ });
+}
+
+initTheme();
+
 /* ── boot ───────────────────────────────────────────────────────────── */
 
 async function boot() {
diff --git a/public/style.css b/public/style.css
index 85df025..dfb8491 100644
--- a/public/style.css
+++ b/public/style.css
@@ -10,6 +10,7 @@
   --text: #e6edf3;
   --muted: #8b98a5;
   --accent: #2ee59a;
+  --accent-text: #06281a; /* text that sits on --accent (buttons, badges) */
   --danger: #f4433c;
   --warn: #f0b429;
   /* grid geometry (shell.js reads these) */
@@ -169,6 +170,7 @@ body.menu-hidden #topbar {
   margin-top: 2px;
   white-space: normal;
 }
+.menu-item[disabled] { opacity: 0.45; cursor: default; }
 .menu-item.danger { color: var(--danger); }
 .menu-note {
   padding: 8px 10px;
@@ -232,6 +234,18 @@ body.menu-hidden #topbar {
   overflow: hidden;
 }
 
+/* A tile the user gave a colour: a wash over the panel, a stronger edge and
+   a tinted title bar. Module content keeps its own colours — this is the
+   tile's chrome, so a tinted tile still reads like every other one. */
+.tile.is-tinted {
+  background: color-mix(in srgb, var(--tile-tint) 14%, var(--panel));
+  border-color: color-mix(in srgb, var(--tile-tint) 45%, var(--border));
+}
+.tile.is-tinted > .tile-head {
+  background: color-mix(in srgb, var(--tile-tint) 20%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--tile-tint) 35%, var(--border));
+}
+
 .tile.dragging,
 .tile.resizing {
   z-index: 40;
@@ -304,6 +318,26 @@ body.menu-hidden #topbar {
 .tile-btn:hover { background: var(--border); color: var(--text); }
 .tile-btn.close:hover { color: var(--danger); }
 .tile-btn.active { color: var(--accent); }
+.tile-btn.is-open,
+.tile-btn.is-open:hover { background: var(--accent); color: var(--accent-text); }
+
+/* the shell's tooltip: shown at once under the button the pointer is on */
+#tip {
+  position: fixed;
+  z-index: 200;
+  pointer-events: none;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--panel);
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+}
+#tip[hidden] { display: none; }
 .tile-btn svg { width: 13px; height: 13px; display: block; }
 
 /* controls a module adds to its own title bar (moduleApi.header) */
@@ -532,28 +566,122 @@ body.fullscreen #grid { padding-bottom: 0; }
 
 /* ── per-tile settings popover ─────────────────────────────────────── */
 
+/* A small window beside its tile (shell.js places and clamps it), not a
+   box inside the tile: a tile can be smaller than its own settings, and the
+   whole point of live settings is watching the tile change. */
 .tile-settings {
-  position: absolute;
-  top: 36px;
-  right: 6px;
-  z-index: 45;
-  min-width: 220px;
-  max-width: calc(100% - 12px);
-  max-height: calc(100% - 40px);
-  overflow-y: auto;
+  position: fixed;
+  z-index: 80;
+  display: flex;
+  flex-direction: column;
+  /* as wide as its content wants and no wider: a couple of switches make a
+     small window, a three-column checklist a wide one */
+  width: max-content;
+  min-width: 150px;
+  max-width: min(560px, calc(100vw - 16px));
+  max-height: calc(100vh - 16px);
+  overflow: hidden;
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 10px;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
+}
+/* the grab bar: a slim accent strip with a grip mark, nothing to read or
+   press — the gear that opened the window wears the same colour meanwhile */
+.tile-settings-bar {
+  flex: none;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+.tile-settings-bar::before {
+  content: "";
+  width: 34px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--accent-text);
+  opacity: 0.7;
+  transition: opacity 0.12s;
+}
+.tile-settings-bar:hover::before { opacity: 1; }
+.tile-settings .field[hidden] { display: none; }
+/* the tint, the shell's own setting, under a hairline at the foot */
+.tile-settings .tint-field {
+  margin: 8px 0 0;
+  padding-top: 9px;
+  border-top: 1px solid var(--border);
+  gap: 8px;
+}
+.tile-settings .tint-clear {
+  flex: none;
+  padding: 1px 7px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.tile-settings .tint-clear:hover { color: var(--text); background: var(--border); }
+.tile-settings .tint-clear[hidden] { display: none; }
+.tile-settings-bar:active { cursor: grabbing; }
+.tile-settings-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
   padding: 10px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
 }
+/* Help lines never widen the window: they take no room of their own when the
+   content is measured, then wrap to whatever width the fields settled on. */
+.tile-settings .field-help,
+.tile-settings .field-group-help,
+.tile-settings .multiselect-empty { width: 0; min-width: 100%; }
+/* a group's on/off sits in its title row; the body dims while it is off */
+.tile-settings .field-group-title { display: flex; align-items: center; gap: 8px; }
+.tile-settings .field-group-name { flex: 1; min-width: 0; }
+.tile-settings .group-toggle { margin: 0 0 0 auto; }
+.tile-settings .group-toggle .check-label { display: none; }
+.tile-settings .field-group.is-off .field-group-body { opacity: 0.45; }
+/* several picks from a list (type `multiselect`) */
+.tile-settings .multiselect-field { display: flex; flex-direction: column; gap: 4px; }
+.tile-settings .multiselect { display: flex; flex-direction: column; gap: 3px; }
+.tile-settings .multiselect.is-columns {
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
+  gap: 3px 14px;
+}
+.tile-settings .multiselect-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text);
+  cursor: pointer;
+}
+.tile-settings .multiselect-row .check-label { flex: 1 1 0; min-width: 0; }
+.tile-settings .multiselect-empty { color: var(--muted); font-size: 12px; }
+/* a text built from offered variables (type `template`) */
+.tile-settings .template-vars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
+.tile-settings .template-var {
+  font: inherit;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  cursor: grab;
+}
+.tile-settings .template-var:hover { border-color: var(--accent); }
+.tile-settings .template-var:active { cursor: grabbing; }
 
-/* A popover with grouped settings needs room for its columns; it still
-   never grows past the tile (max-width above). */
-.tile-settings.has-groups {
-  min-width: min(540px, calc(100% - 12px));
-  container-type: inline-size;
-}
 .tile-settings .field-group {
   margin: 0 0 10px;
   padding: 8px 10px;
@@ -589,19 +717,20 @@ body.fullscreen #grid { padding-bottom: 0; }
 .tile-settings details.field-group[open] > summary.field-group-title::before { transform: rotate(90deg); }
 .tile-settings details.field-group[open] > summary.field-group-title { margin-bottom: 8px; }
 .tile-settings .field-group .field:last-child { margin-bottom: 0; }
+/* Settings apply as they change, so nothing sits under the last field — its
+   bottom margin would only pad the popover's own padding a second time. */
+.tile-settings-body > :last-child { margin-bottom: 0; }
 .tile-settings .field-group-body.is-columns {
   display: grid;
   grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
-  gap: 3px 14px;
+  gap: 6px 14px; /* the grid gap is the whole row spacing: no per-field margin */
 }
-.tile-settings .field-group-body.is-columns .field { margin-bottom: 3px; }
+.tile-settings .field-group-body.is-columns .field { margin-bottom: 0; }
 .tile-settings .field-group-body.is-columns .field-group-help { grid-column: 1 / -1; }
-@container (max-width: 420px) {
-  .tile-settings .field-group-body.is-columns { grid-template-columns: 1fr 1fr; }
-}
-@container (max-width: 260px) {
-  .tile-settings .field-group-body.is-columns { grid-template-columns: 1fr; }
-}
+/* a list of switches or a template with its chips is a row of its own, however
+   many columns the group lays its other fields out in */
+.tile-settings .field-group-body.is-columns .multiselect-field,
+.tile-settings .field-group-body.is-columns .template-field { grid-column: 1 / -1; }
 .tile-settings .field-group-help,
 .tile-settings .field-help {
   display: block;
@@ -636,14 +765,64 @@ body.fullscreen #grid { padding-bottom: 0; }
   outline: none;
   border-color: var(--accent);
 }
+/* boolean / switch settings: label on the left, switch on the right (help,
+   when there is any, wraps under both) */
 .field.check {
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 4px 10px;
   color: var(--text);
   cursor: pointer;
 }
-.field.check input { width: 15px; height: 15px; accent-color: var(--accent); }
+.field.check .check-label { flex: 1 1 0; min-width: 0; }
+.field.check .field-help { flex-basis: 100%; }
+
+/* The switch: the admin page's module switch, same track, knob and colours,
+   so a toggle reads the same on both surfaces. On = shown/enabled (accent),
+   off = hidden/disabled (border track, muted knob). The real checkbox lies
+   invisibly over the track — still focusable, so Tab reaches it and Space
+   flips it — and the label around it makes the text clickable too. */
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  cursor: pointer;
+}
+.switch input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.switch .track {
+  display: block;
+  position: relative;
+  width: 34px;
+  height: 19px;
+  border-radius: 999px;
+  background: var(--border);
+  transition: background 0.2s;
+}
+.switch .track::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--muted);
+  transition: transform 0.2s, background 0.2s;
+}
+.switch input:checked + .track { background: var(--accent); }
+.switch input:checked + .track::after { transform: translateX(15px); background: var(--bg); }
+.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 /* color fields: label on the left, swatch on the right */
 .field.color-field {
@@ -709,7 +888,7 @@ body.fullscreen #grid { padding-bottom: 0; }
 .btn.primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: #06281a;
+  color: var(--accent-text);
   font-weight: 600;
 }
 
@@ -756,3 +935,64 @@ body.fullscreen #grid { padding-bottom: 0; }
 @media (max-width: 560px) {
   #topbar { padding: 0 8px; gap: 6px; }
 }
+
+/* ── themes ────────────────────────────────────────────────────────── */
+
+/* Preset palettes, chosen in Admin → Theme and applied by shell.js (and the
+   admin page) as html[data-theme="…"]. Each swaps exactly the eight palette
+   variables the module guide names — nothing else — so every module and
+   every shell element follows, and a colour a tile is configured with (set
+   on the tile itself) still wins. The :root block at the top of this file is
+   "booth", the default; the list of ids and names lives in server.js
+   (GET /api/theme). All four are booth-grade: high contrast, the accent
+   nowhere near the danger red or the warning amber, muted still readable. */
+
+/* Harbor — deep navy, cyan accent */
+html[data-theme="harbor"] {
+  --bg: #06101f;
+  --panel: #0c1a30;
+  --border: #1a2b48;
+  --text: #e6eefb;
+  --muted: #8ea4c8;
+  --accent: #2ad4ee;
+  --danger: #ff5a5f;
+  --warn: #f7b53b;
+}
+
+/* Graphite — neutral charcoal, electric-blue accent */
+html[data-theme="graphite"] {
+  --bg: #0f1012;
+  --panel: #17191d;
+  --border: #2a2d33;
+  --text: #f0f2f4;
+  --muted: #9ca3ad;
+  --accent: #6cb4ff;
+  --danger: #ff4d4f;
+  --warn: #ffb224;
+}
+
+/* Ember — warm broadcast black, orange accent (danger stays a cool red,
+   warn a pale yellow, so the three status colours never blur) */
+html[data-theme="ember"] {
+  --bg: #120c0a;
+  --panel: #1d1411;
+  --border: #35251e;
+  --text: #f6ede6;
+  --muted: #b39b8c;
+  --accent: #ff8f3a;
+  --danger: #f03247;
+  --warn: #ffd86b;
+}
+
+/* Daylight — the light one, for a front-of-house desk in daytime */
+html[data-theme="daylight"] {
+  --bg: #eef1f5;
+  --panel: #ffffff;
+  --border: #cfd6e0;
+  --text: #14181f;
+  --muted: #5b6675;
+  --accent: #0b8a5f;
+  --accent-text: #ffffff; /* dark text drowns on this accent */
+  --danger: #d1242f;
+  --warn: #b26a00;
+}
diff --git a/server.js b/server.js
index 5655907..4c77a57 100644
--- a/server.js
+++ b/server.js
@@ -373,14 +373,17 @@ function mountModule(id) {
     // Re-require fresh config on every (re)mount; the module code itself stays cached.
     const mod = require(serverPath);
     const config = effectiveConfig(id);
+    // What a module needs to reach the rest of ProdDash — another module's
+    // routes over loopback, chiefly — without guessing.
+    const shell = { port: PORT };
     if (typeof mod.init === 'function') {
-      entry.handle = mod.init({ config, log }) || null;
+      entry.handle = mod.init({ config, log, shell }) || null;
     }
     if (typeof mod.routes === 'function') {
-      entry.routes = parseRouteTable(mod.routes({ config, log }));
+      entry.routes = parseRouteTable(mod.routes({ config, log, shell }));
     }
     if (typeof mod.tiles === 'function') {
-      entry.tiles = () => mod.tiles({ config, log });
+      entry.tiles = () => mod.tiles({ config, log, shell });
     }
     log('mounted' + (entry.routes.length ? ` (${entry.routes.length} routes)` : ''));
   } catch (err) {
@@ -460,7 +463,20 @@ function sanitizeTileEntry(raw) {
     name: String(raw.name),
     description: raw.description ? String(raw.description) : '',
     settings: raw.settings && typeof raw.settings === 'object' ? raw.settings : {},
+    // at most one tile of this entry per dashboard (the picker greys it out)
+    single: raw.single === true,
   };
+  // An entry may offer its own gear settings — a solo timer wants none of a
+  // full tile's switches. Same shape as the manifest's instanceSchema/Groups.
+  for (const key of ['instanceSchema', 'instanceGroups']) {
+    if (raw[key] && typeof raw[key] === 'object') out[key] = raw[key];
+  }
+  // Earlier variant ids this entry stands for, so a tile added under one of
+  // them (a layout from an older module version) gets this entry's settings.
+  if (Array.isArray(raw.aliases)) {
+    const aliases = raw.aliases.map((a) => String(a)).filter(Boolean);
+    if (aliases.length) out.aliases = aliases;
+  }
   for (const key of ['minSize', 'defaultSize']) {
     const size = raw[key];
     if (size && Number(size.w) > 0 && Number(size.h) > 0) {
@@ -510,6 +526,8 @@ async function clientManifest(id) {
     instanceSchema: man.instanceSchema || {},
     instanceGroups: man.instanceGroups && typeof man.instanceGroups === 'object' ? man.instanceGroups : {},
     hasServer: Boolean(man.server),
+    // capabilities other modules consume ("timers") — see the module guide
+    provides: Array.isArray(man.provides) ? man.provides.map(String) : [],
     config: clientConfig(id),
     tiles: await moduleTiles(id),
   };
@@ -541,6 +559,196 @@ setInterval(() => {
   }
 }, 25000).unref();
 
+/* ── one stream per page ─────────────────────────────────────────────
+   Browsers allow about six HTTP/1.1 connections to a host and an open
+   EventSource holds one for as long as it lives. A dashboard with six
+   modules ran out — Safari first — and from then on every further request
+   (a remounted tile's /state, an avatar) waited in the browser's queue for
+   ever. So a page opens ONE EventSource, GET /api/stream?s=<keys>, naming
+   the streams it wants: `slack:/stream`, `pco-plan:/timers/stream`, `shell:`
+   for the shell's own events. The server opens each module stream for it
+   over loopback (the module's route is untouched and still serves curl and
+   other tools), and forwards every frame with the event name prefixed by
+   its key — `event: slack:/stream|state`. Two frames of its own bracket a
+   stream's life: `<key>|__open` when the upstream answers, `<key>|__down`
+   when it ends (it is re-opened after a pause while the page stays). */
+
+const MUX_MAX_STREAMS = 32;
+const MUX_RETRY_MS = 3000;
+const MUX_RETRY_REFUSED_MS = 10000;
+const MUX_PING_MS = 15000;
+const MUX_KEY_RE = /^([A-Za-z0-9_-]+):(\/[A-Za-z0-9_\-./]*)?$/;
+
+function parseMuxKeys(search) {
+  const params = new URLSearchParams(search || '');
+  const out = [];
+  const seen = new Set();
+  for (const raw of String(params.get('s') || '').split(',')) {
+    const key = raw.trim();
+    const m = MUX_KEY_RE.exec(key);
+    if (!m || seen.has(key)) continue;
+    seen.add(key);
+    out.push({ key, id: m[1], subPath: m[2] || '' });
+    if (out.length >= MUX_MAX_STREAMS) break;
+  }
+  return out;
+}
+
+function handleMuxStream(req, res, search) {
+  const wanted = parseMuxKeys(search);
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream; charset=utf-8',
+    'Cache-Control': 'no-cache, no-transform',
+    Connection: 'keep-alive',
+    'X-Accel-Buffering': 'no',
+  });
+  res.write('retry: 3000\n\n');
+  try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
+  let closed = false;
+  const send = (frame) => {
+    if (closed) return;
+    try {
+      res.write(frame);
+    } catch {
+      /* the client is gone; 'close' follows */
+    }
+  };
+
+  // The shell's own events ride along under `shell:` — a stand-in sits in
+  // shellStreams and rewrites the event line of every frame it is handed.
+  let shellProxy = null;
+  const upstreams = [];
+  for (const entry of wanted) {
+    if (entry.id === 'shell') {
+      if (shellProxy) continue;
+      shellProxy = { write(frame) { send(String(frame).replace(/^event: /m, `event: ${entry.key}|`)); } };
+      shellStreams.add(shellProxy);
+      send(`event: ${entry.key}|__open\ndata: {}\n\n`);
+      continue;
+    }
+    upstreams.push({ ...entry, req: null, timer: null, gone: false });
+  }
+
+  function forwardBlock(entry, block) {
+    let name = 'message';
+    const data = [];
+    for (const line of block.split('\n')) {
+      if (line.startsWith(':')) continue; // the upstream's keepalive; this connection pings on its own
+      if (line.startsWith('event:')) name = line.slice(6).trim() || 'message';
+      else if (line.startsWith('data:')) data.push(line.slice(5).replace(/^ /, ''));
+      // id: and retry: belong to the upstream connection, not to the page's
+    }
+    if (!data.length) return;
+    send(`event: ${entry.key}|${name}\n${data.map((d) => `data: ${d}`).join('\n')}\n\n`);
+  }
+
+  function down(entry, why, delay) {
+    if (closed || entry.gone) return;
+    entry.gone = true;
+    send(`event: ${entry.key}|__down\ndata: ${JSON.stringify({ why })}\n\n`);
+    try { entry.req?.destroy(); } catch { /* already gone */ }
+    entry.req = null;
+    entry.timer = setTimeout(() => {
+      entry.gone = false;
+      open(entry);
+    }, delay);
+  }
+
+  function open(entry) {
+    if (closed) return;
+    const path = `/api/modules/${encodeURIComponent(entry.id)}${entry.subPath || '/'}`;
+    const up = http.request({ host: '127.0.0.1', port: PORT, path, method: 'GET', headers: { accept: 'text/event-stream' } }, (upRes) => {
+      if (upRes.statusCode !== 200 || !/text\/event-stream/.test(String(upRes.headers['content-type'] || ''))) {
+        upRes.resume();
+        return down(entry, `HTTP ${upRes.statusCode}`, MUX_RETRY_REFUSED_MS);
+      }
+      send(`event: ${entry.key}|__open\ndata: {}\n\n`);
+      let buf = '';
+      upRes.setEncoding('utf8');
+      upRes.on('data', (chunk) => {
+        buf += chunk;
+        let i;
+        while ((i = buf.indexOf('\n\n')) >= 0) {
+          forwardBlock(entry, buf.slice(0, i));
+          buf = buf.slice(i + 2);
+        }
+        if (buf.length > 1e6) buf = ''; // a frame that never ends is dropped, not kept
+      });
+      upRes.on('end', () => down(entry, 'ended', MUX_RETRY_MS));
+      upRes.on('error', (err) => down(entry, err.message, MUX_RETRY_MS));
+    });
+    up.on('error', (err) => down(entry, err.message, MUX_RETRY_MS));
+    up.end();
+    entry.req = up;
+  }
+
+  for (const entry of upstreams) open(entry);
+  const ping = setInterval(() => send(': ping\n\n'), MUX_PING_MS);
+  req.on('close', () => {
+    closed = true;
+    clearInterval(ping);
+    if (shellProxy) shellStreams.delete(shellProxy);
+    for (const entry of upstreams) {
+      clearTimeout(entry.timer);
+      try { entry.req?.destroy(); } catch { /* already gone */ }
+    }
+  });
+}
+
+/* ── themes ─────────────────────────────────────────────────────────── */
+
+/* Preset palettes for the whole dashboard, chosen in Admin → Theme. The
+   variable sets themselves live in public/style.css (html[data-theme="…"]);
+   this list is the one authority on ids and names, and carries the three
+   colours the admin page previews a theme with. The choice is a shell
+   setting — `theme` in the data directory's proddash.json — and reaches open
+   dashboards live as a `theme` shell event. */
+const THEMES = [
+  { id: 'booth',    name: 'Booth',    colors: { bg: '#0b0e12', panel: '#131920', accent: '#2ee59a' } },
+  { id: 'harbor',   name: 'Harbor',   colors: { bg: '#06101f', panel: '#0c1a30', accent: '#2ad4ee' } },
+  { id: 'graphite', name: 'Graphite', colors: { bg: '#0f1012', panel: '#17191d', accent: '#6cb4ff' } },
+  { id: 'ember',    name: 'Ember',    colors: { bg: '#120c0a', panel: '#1d1411', accent: '#ff8f3a' } },
+  { id: 'daylight', name: 'Daylight', colors: { bg: '#eef1f5', panel: '#ffffff', accent: '#0b8a5f' } },
+];
+const DEFAULT_THEME = THEMES[0].id;
+
+function themeExists(id) {
+  return THEMES.some((t) => t.id === id);
+}
+
+let currentTheme = themeExists(shellConfig.theme) ? shellConfig.theme : DEFAULT_THEME;
+
+/** What GET /api/theme returns — public, since dashboards need it before anyone logs in. */
+function themeView() {
+  return {
+    theme: currentTheme,
+    themes: THEMES.map((t) => ({ id: t.id, name: t.name, colors: { ...t.colors } })),
+  };
+}
+
+/**
+ * Persist the theme into this machine's proddash.json (every other key there
+ * — port, adminPasscode, repo… — is kept), remember it, and tell every open
+ * dashboard and admin page. Throws an httpError for an unknown id or an
+ * unreadable settings file; the route turns that into the response.
+ */
+function setTheme(id) {
+  if (!themeExists(id)) throw httpError(400, `Unknown theme "${id}".`);
+  const file = path.join(DATA_DIR, 'proddash.json');
+  let existing = {};
+  if (fs.existsSync(file)) {
+    existing = readJson(file, null);
+    if (!existing || typeof existing !== 'object' || Array.isArray(existing)) {
+      throw httpError(500, `${file} is not a JSON object — fix it by hand before changing the theme.`);
+    }
+  }
+  writeJson(file, { ...existing, theme: id });
+  currentTheme = id;
+  shellConfig.theme = id;
+  broadcastShellEvent('theme', { theme: id });
+  return themeView();
+}
+
 /* ── the repo: module catalog and shell updates ──────────────────────── */
 
 /* The admin page installs modules from, and updates the shell against, the
@@ -996,6 +1204,9 @@ function applyConfigPatch(id, patch) {
     }
     if (type === 'number') value = Number(value) || 0;
     else if (type === 'boolean' || type === 'switch') value = Boolean(value);
+    else if (type === 'multiselect') {
+      value = (Array.isArray(value) ? value : []).map((v) => String(v)).filter(Boolean);
+    }
     else if (type === 'endpoint') {
       const src = value && typeof value === 'object' ? value : {};
       value = {
@@ -1109,6 +1320,22 @@ async function handleAdminApi(req, res, urlPath) {
     return sendJson(res, 200, { ok: true, module: adminModuleView(id) });
   }
 
+  /* — theme: { "theme": "<id>" }, validated against THEMES — */
+  if (urlPath === '/api/admin/theme' && req.method === 'POST') {
+    if (refuseAdminWrite(req, res)) return;
+    let body = {};
+    try {
+      body = JSON.parse((await readBody(req)) || '{}');
+    } catch {
+      return sendJson(res, 400, { error: 'Malformed request.' });
+    }
+    try {
+      return sendJson(res, 200, { ok: true, ...setTheme(String(body.theme ?? '')) });
+    } catch (err) {
+      return sendJson(res, err.status || 500, { error: err.message || String(err) });
+    }
+  }
+
   sendJson(res, 404, { error: 'Unknown admin endpoint.' });
 }
 
@@ -1352,6 +1579,16 @@ function handleRequest(req, res) {
     return;
   }
 
+  /* — theme: public (dashboards need it without a passcode); changed via POST /api/admin/theme — */
+  if (urlPath === '/api/theme' && req.method === 'GET') {
+    return sendJson(res, 200, themeView());
+  }
+
+  /* — every stream a page wants, over one connection — */
+  if (urlPath === '/api/stream' && req.method === 'GET') {
+    return handleMuxStream(req, res, search);
+  }
+
   /* — shell events: open dashboards learn about admin changes live — */
   if (urlPath === '/api/events' && req.method === 'GET') {
     res.writeHead(200, {
diff --git a/tools/pco-mock.js b/tools/pco-mock.js
index 73da9c2..d793717 100644
--- a/tools/pco-mock.js
+++ b/tools/pco-mock.js
@@ -11,6 +11,10 @@
  *   GET /services/v2/service_types               every service type, with its
  *                                                parent folder relationship
  *   GET /services/v2/service_types/{id}
+ *   GET /services/v2/service_types/{id}/item_note_categories
+ *                                                the note categories the
+ *                                                items below use, plus one
+ *                                                ("Stage") no note uses yet
  *   GET /services/v2/service_types/{id}/plans    ?filter=future|past, order,
  *                                                per_page — today's plan,
  *                                                next week's and last week's
@@ -129,6 +133,22 @@ const ITEMS = [
   { id: 'i13', type: 'media', title: 'Walk-out Loop', pos: 'post', length: 600, notes: [['Video', 'Announcements loop until the room clears']] },
 ];
 
+/**
+ * Item note categories, per service type in Planning Center: every category
+ * the items above use, in the order the mock account lists them, plus one no
+ * note uses yet — a tile that has never chosen shows it on as well.
+ */
+const NOTE_CATEGORIES = ['Audio', 'Video', 'Lighting', 'ProPresenter', 'Stage'];
+
+function noteCategoryRecord(name, index, stId) {
+  return {
+    type: 'ItemNoteCategory',
+    id: `${stId}-nc${index + 1}`,
+    attributes: { name, sequence: index + 1, frequently_used: index < 2, deleted_at: null },
+    relationships: { service_type: { data: { type: 'ServiceType', id: stId } } },
+  };
+}
+
 function itemsDocument(planId, include) {
   const wants = new Set(String(include || '').split(',').map((s) => s.trim()).filter(Boolean));
   const data = [];
@@ -246,6 +266,9 @@ const server = http.createServer((req, res) => {
     const st = SERVICE_TYPES.find((x) => x.id === parts[1]);
     if (!st) return notFound(res);
     if (parts.length === 2) return send(res, 200, { data: serviceTypeRecord(st) });
+    if (parts[2] === 'item_note_categories' && parts.length === 3) {
+      return collection(res, NOTE_CATEGORIES.map((name, i) => noteCategoryRecord(name, i, st.id)), url);
+    }
     if (parts[2] !== 'plans') return notFound(res);
     const plans = plansFor(st.id);
     if (parts.length === 3) {
diff --git a/tools/slack-mock.js b/tools/slack-mock.js
new file mode 100644
index 0000000..af8c86f
--- /dev/null
+++ b/tools/slack-mock.js
@@ -0,0 +1,417 @@
+/**
+ * Mock Slack Web API for developing the slack module without a workspace.
+ *
+ *   node tools/slack-mock.js [port]                       (default 24716)
+ *   SLACK_API_BASE=http://127.0.0.1:24716/api node server.js
+ *
+ * Then, in /admin → Slack, paste any token that starts with xoxp- (a user
+ * token: auth.test answers as the location account "Apollo Beach") or xoxb-
+ * (a bot token: bot_id set, user "proddash"); anything else is invalid_auth.
+ * Two more tokens exercise the error paths: xoxp-revoked → token_revoked,
+ * xoxp-noscope → missing_scope (needed channels:history) on history reads.
+ *
+ * Methods, all under /api/<method>, POST form or JSON (GET works too):
+ *   auth.test               identity for the token (see above)
+ *   conversations.list      #production, #ops, #campus-leads (private) as
+ *                           member; #announcements not a member; paginated
+ *   conversations.info      one channel, with is_member
+ *   conversations.history   newest-first window (limit); not_in_channel for
+ *                           #announcements
+ *   conversations.replies   a thread's parent + replies
+ *   users.info              display names and profile images (SVG squares
+ *                           served by this mock under /img/u/<id>.svg)
+ *   chat.postMessage        appends to the channel (echoes `username` for
+ *                           bots as a bot_message); text containing "!429"
+ *                           answers HTTP 429 with Retry-After: 3
+ *   emoji.list              four custom emoji: two images (/img/e/<name>.svg),
+ *                           an alias of a standard emoji, an alias of a custom
+ *   reactions.add/.remove   on a message (or reply) by channel + timestamp;
+ *                           already_reacted / no_reaction / message_not_found
+ *                           as Slack answers them; name "nope" → invalid_name
+ *
+ * #production is seeded with mrkdwn, mentions, a link, a thread, a bot
+ * attachment and a file; it gains a new fake message every ~8 s, edits one
+ * every ~25 s, deletes one every ~40 s and adds a thread reply every ~30 s.
+ * #ops gets a quieter trickle (every ~20 s), so a dashboard with both
+ * transcripts shows two channels moving at their own pace — and a
+ * chat.postMessage to either lands in that channel's history, which is how
+ * a send to the *selected* transcript can be watched arriving in the right
+ * tile. Every request is logged.
+ *
+ * Multi-channel dev flow: run this, then ProdDash with SLACK_API_BASE set,
+ * paste xoxp-anything in /admin → Slack, tick #production and #ops under
+ * Channels, Apply, and add both transcripts plus Send message from ＋.
+ */
+'use strict';
+
+const http = require('http');
+
+const PORT = Number.parseInt(process.argv[2] || '24716', 10);
+
+/* ── data ───────────────────────────────────────────────────────────── */
+
+const USERS = {
+  U001: { name: 'apollo.beach', real_name: 'Apollo Beach', display_name: 'Apollo Beach' },
+  U002: { name: 'michael', real_name: 'Michael McGary', display_name: 'Michael' },
+  U003: { name: 'sarah.lee', real_name: 'Sarah Lee', display_name: 'Sarah' },
+  U004: { name: 'north.attleboro', real_name: 'North Attleboro', display_name: 'North Attleboro' },
+  U005: { name: 'dan.k', real_name: 'Dan Kowalski', display_name: 'Dan K' },
+  UBOT: { name: 'proddash', real_name: 'ProdDash', display_name: '', is_bot: true },
+};
+
+const CHANNELS = [
+  { id: 'C001', name: 'production', is_private: false, is_member: true },
+  { id: 'C002', name: 'ops', is_private: false, is_member: true },
+  { id: 'G001', name: 'campus-leads', is_private: true, is_member: true },
+  { id: 'C003', name: 'announcements', is_private: false, is_member: false },
+];
+
+let tsCounter = 0;
+function ts(offsetMs = 0) {
+  tsCounter += 1;
+  return `${Math.floor((Date.now() + offsetMs) / 1000)}.${String(tsCounter).padStart(6, '0')}`;
+}
+
+/** channel id -> messages (ascending); replies live inside their parent. */
+const history = new Map();
+for (const c of CHANNELS) history.set(c.id, []);
+
+function push(channelId, msg) {
+  const list = history.get(channelId);
+  const m = { type: 'message', ts: msg.ts || ts(), ...msg };
+  list.push(m);
+  if (list.length > 400) list.splice(0, list.length - 400);
+  return m;
+}
+
+/** A message or a reply by timestamp, anywhere in a channel. */
+function findMessage(channelId, stamp) {
+  for (const m of history.get(channelId) || []) {
+    if (m.ts === stamp) return m;
+    for (const r of m.replies || []) if (r.ts === stamp) return r;
+  }
+  return null;
+}
+
+/** Slack's reactions array: [{ name, users, count }], edited in place. */
+function addReaction(m, name, userId) {
+  m.reactions = m.reactions || [];
+  let r = m.reactions.find((x) => x.name === name);
+  if (r && r.users.includes(userId)) return 'already_reacted';
+  if (!r) {
+    r = { name, users: [], count: 0 };
+    m.reactions.push(r);
+  }
+  r.users.push(userId);
+  r.count = r.users.length;
+  return '';
+}
+
+function removeReaction(m, name, userId) {
+  const r = (m.reactions || []).find((x) => x.name === name);
+  if (!r || !r.users.includes(userId)) return 'no_reaction';
+  r.users = r.users.filter((u) => u !== userId);
+  r.count = r.users.length;
+  if (!r.count) m.reactions = m.reactions.filter((x) => x !== r);
+  if (!m.reactions.length) delete m.reactions;
+  return '';
+}
+
+/* A square SVG with an initial, one hue per id — the mock's stand-in for a
+   profile image or a custom emoji picture. */
+const IMAGE_HUES = { U001: 150, U002: 210, U003: 330, U004: 30, U005: 270, UBOT: 0, party_parrot: 120, waters: 200 };
+function squareSvg(id, letter) {
+  const hue = IMAGE_HUES[id] ?? 180;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><rect width="72" height="72" rx="18" fill="hsl(${hue} 50% 45%)"/><text x="36" y="47" text-anchor="middle" font-family="system-ui, sans-serif" font-size="34" font-weight="700" fill="#fff">${letter}</text></svg>`;
+}
+const CUSTOM_EMOJI = {
+  party_parrot: (port) => `http://127.0.0.1:${port}/img/e/party_parrot.svg`,
+  waters: (port) => `http://127.0.0.1:${port}/img/e/waters.svg`,
+  thumbsup_all: () => 'alias:+1',
+  parrot: () => 'alias:party_parrot',
+};
+
+function seed() {
+  const min = 60000;
+  const at = (minsAgo) => ts(-minsAgo * min);
+  push('C001', { ts: at(58), user: 'U003', subtype: 'channel_join', text: '<@U003> has joined the channel' });
+  push('C001', { ts: at(55), user: 'U002', text: 'Morning all — doors at 9:15, first service 10:00. Run of show is in <#C002|ops>.' });
+  push('C001', { ts: at(50), user: 'U001', text: 'Apollo Beach is up. Stream key checked, ProPresenter online :white_check_mark:' });
+  push('C001', { ts: at(47), user: 'U004', text: 'North Attleboro here — we have *no audio* on the sermon feed yet, working on it' });
+  push('C001', { ts: at(44), user: 'U002', text: '<@U004> try the Dante patch — `Sermon Feed L/R` should be on 31/32. _Ping me if not._' });
+  const parent = push('C001', { ts: at(40), user: 'U003', text: 'Countdown video is the new one this week, right? ~old one~ &lt;-- not this', reply_count: 2, latest_reply: '' });
+  parent.replies = [
+    { type: 'message', ts: at(39), user: 'U002', text: 'Yes — "Countdown 5 min (Sept)" in the media bin', thread_ts: parent.ts },
+    { type: 'message', ts: at(38), user: 'U003', text: 'Got it :+1:', thread_ts: parent.ts },
+  ];
+  parent.latest_reply = parent.replies[1].ts;
+  push('C001', {
+    ts: at(35), subtype: 'bot_message', bot_id: 'B002', username: 'Planning Center', text: '',
+    attachments: [{ fallback: 'Plan updated: Sunday Service — Sept 14 (2 items changed)', title: 'Plan updated', text: 'Sunday Service — Sept 14 (2 items changed)' }],
+  });
+  push('C001', { ts: at(30), user: 'U005', text: 'Lower thirds for the announcements: <https://waterschurch.org/plan|this week’s plan>', files: [{ id: 'F001', name: 'lower-thirds-0914.png', title: 'lower-thirds-0914.png' }] });
+  const fixed = push('C001', { ts: at(25), user: 'U004', text: 'Audio fixed — Dante patch was it. Thanks <@U002> :pray:', edited: { user: 'U004', ts: at(24) } });
+  fixed.reactions = [{ name: '+1', users: ['U002', 'U003', 'U001'], count: 3 }, { name: 'party_parrot', users: ['U005'], count: 1 }, { name: 'pray::skin-tone-3', users: ['U002'], count: 1 }];
+  push('C001', { ts: at(23), user: 'U002', text: 'Custom emoji check :party_parrot: :waters: and an unknown :not_an_emoji: stay put' });
+  push('C001', { ts: at(20), user: 'U002', text: '<!here> 10 minutes to doors. Campuses, post "ready" when your pre-service loop is running.' });
+  push('C001', { ts: at(15), user: 'U001', text: 'Apollo Beach ready' });
+  push('C001', { ts: at(14), user: 'U004', text: 'North Attleboro ready' });
+
+  push('C002', { ts: at(120), user: 'U002', text: 'Run of show for Sept 14 is pinned. Changes go here, not in DMs.' });
+  push('C002', { ts: at(90), user: 'U005', text: 'Bumper video is 0:42 this week, not 0:30 — adjust your timers.' });
+  push('G001', { ts: at(200), user: 'U002', text: 'Leads: budget call moved to Tuesday 2pm.' });
+  push('C003', { ts: at(300), user: 'U002', text: 'Staff meeting notes are in the drive.' });
+}
+seed();
+
+const CHATTER = [
+  { user: 'U003', text: 'Walk-in music is a touch loud at the back, can we come down 2 dB?' },
+  { user: 'U002', text: 'Cue 4 is the *baptism video* — heads up, it has its own audio' },
+  { user: 'U005', text: 'Livestream is live, 38 viewers already :tada:' },
+  { user: 'U004', text: 'North Attleboro: pastor is running about 3 min long today' },
+  { user: 'U002', text: 'Copy. Apollo Beach, hold your bumper until you hear from us' },
+  { user: 'U003', text: 'Lyrics slide 3 of "Living Hope" has a typo — fixing for second service' },
+  { user: 'U005', text: 'Stream bitrate dipped for a sec, back to normal now' },
+  { user: 'U002', text: 'Offering moment is *after* the sermon this week, not before' },
+  { user: 'U004', text: 'Anyone else seeing the ProPresenter stage display lag?' },
+  { user: 'U003', text: 'Kids check-in is slammed, could use one more volunteer at the desk' },
+  { user: 'U002', text: 'Great first service everyone :clap: reset in 15' },
+];
+let chatterIx = 0;
+
+const OPS_CHATTER = [
+  { user: 'U005', text: 'Ops: parking team is short two people, sending greeters over' },
+  { user: 'U002', text: 'Cafe is out of oat milk again :sweat_smile:' },
+  { user: 'U005', text: 'Second-service headcount: 412 in the room, 38 online' },
+  { user: 'U002', text: 'Facilities: the lobby HVAC is back, thanks Dan' },
+];
+let opsIx = 0;
+
+function tickNew() {
+  const line = CHATTER[chatterIx % CHATTER.length];
+  chatterIx += 1;
+  const m = push('C001', { user: line.user, text: line.text });
+  console.log(`[slack-mock] + new message ${m.ts} from ${line.user}`);
+}
+
+function tickOps() {
+  const line = OPS_CHATTER[opsIx % OPS_CHATTER.length];
+  opsIx += 1;
+  const m = push('C002', { user: line.user, text: line.text });
+  console.log(`[slack-mock] + new message ${m.ts} in #ops from ${line.user}`);
+}
+
+function tickEdit() {
+  const list = history.get('C001');
+  const recent = list.slice(-8).filter((m) => m.user && !m.subtype && !m.edited);
+  if (!recent.length) return;
+  const m = recent[Math.floor(Math.random() * recent.length)];
+  m.text += ' — fixed';
+  m.edited = { user: m.user, ts: ts() };
+  console.log(`[slack-mock] ~ edited ${m.ts}`);
+}
+
+function tickDelete() {
+  const list = history.get('C001');
+  const candidates = list.slice(-10, -2).filter((m) => m.user && !m.subtype && !m.reply_count);
+  if (!candidates.length) return;
+  const victim = candidates[Math.floor(Math.random() * candidates.length)];
+  list.splice(list.indexOf(victim), 1);
+  console.log(`[slack-mock] - deleted ${victim.ts}`);
+}
+
+function tickReply() {
+  const list = history.get('C001');
+  const parent = list.find((m) => m.reply_count);
+  if (!parent) return;
+  const reply = { type: 'message', ts: ts(), user: ['U002', 'U003', 'U005'][parent.replies.length % 3], text: `Thread reply ${parent.replies.length + 1} :eyes:`, thread_ts: parent.ts };
+  parent.replies.push(reply);
+  parent.reply_count = parent.replies.length;
+  parent.latest_reply = reply.ts;
+  console.log(`[slack-mock] ↳ reply on ${parent.ts} (${parent.reply_count} total)`);
+}
+
+setInterval(tickNew, 8000).unref();
+setInterval(tickOps, 20000).unref();
+setInterval(tickEdit, 25000).unref();
+setInterval(tickDelete, 40000).unref();
+setInterval(tickReply, 30000).unref();
+
+/* ── plumbing ───────────────────────────────────────────────────────── */
+
+function send(res, status, body, headers = {}) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store', ...headers });
+  res.end(JSON.stringify(body));
+}
+
+function readBody(req) {
+  return new Promise((resolve) => {
+    let data = '';
+    req.on('data', (c) => { data += c; });
+    req.on('end', () => resolve(data));
+    req.on('error', () => resolve(''));
+  });
+}
+
+function parseParams(req, url, raw) {
+  const params = Object.fromEntries(url.searchParams.entries());
+  const ctype = String(req.headers['content-type'] || '');
+  if (raw) {
+    if (ctype.includes('application/json')) {
+      try { Object.assign(params, JSON.parse(raw)); } catch { /* ignore */ }
+    } else {
+      for (const [k, v] of new URLSearchParams(raw)) params[k] = v;
+    }
+  }
+  return params;
+}
+
+function tokenOf(req, params) {
+  const m = /^Bearer\s+(\S+)/.exec(String(req.headers.authorization || ''));
+  return m ? m[1] : String(params.token || '');
+}
+
+function identity(token) {
+  if (token === 'xoxp-revoked') return { error: 'token_revoked' };
+  if (/^xoxp-/.test(token)) return { ok: true, url: 'https://waters.slack.com/', team: 'Waters Church', user: 'apollo.beach', team_id: 'T001', user_id: 'U001', noscope: token === 'xoxp-noscope' };
+  if (/^xoxb-/.test(token)) return { ok: true, url: 'https://waters.slack.com/', team: 'Waters Church', user: 'proddash', team_id: 'T001', user_id: 'UBOT', bot_id: 'B001' };
+  return { error: 'invalid_auth' };
+}
+
+function channelRecord(c) {
+  return { id: c.id, name: c.name, name_normalized: c.name, is_channel: !c.is_private, is_group: c.is_private, is_private: c.is_private, is_member: c.is_member, is_archived: false, num_members: 12 };
+}
+
+function publicMessage(m) {
+  const { replies, ...rest } = m;
+  return rest;
+}
+
+function findChannel(ref) {
+  const s = String(ref || '');
+  return CHANNELS.find((c) => c.id === s || c.name === s.replace(/^#/, ''));
+}
+
+const server = http.createServer(async (req, res) => {
+  const url = new URL(req.url, `http://127.0.0.1:${PORT}`);
+  const raw = req.method === 'POST' ? await readBody(req) : '';
+  const params = parseParams(req, url, raw);
+  const method = url.pathname.replace(/^\/api\//, '');
+  const summary = Object.entries(params).filter(([k]) => k !== 'token').map(([k, v]) => `${k}=${String(v).slice(0, 40)}`).join(' ');
+  console.log(`[slack-mock] ${req.method} ${url.pathname} ${summary}`);
+
+  const img = url.pathname.match(/^\/img\/(u|e)\/([A-Za-z0-9_+-]+)\.svg$/);
+  if (img) {
+    const id = img[2];
+    const letter = img[1] === 'u' ? (USERS[id]?.display_name || USERS[id]?.real_name || id)[0].toUpperCase() : id[0].toUpperCase();
+    res.writeHead(200, { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' });
+    return res.end(squareSvg(id, letter));
+  }
+  if (!url.pathname.startsWith('/api/')) return send(res, 404, { ok: false, error: 'unknown_method' });
+
+  const token = tokenOf(req, params);
+  const who = identity(token);
+  if (!who.ok) return send(res, 200, { ok: false, error: who.error });
+
+  switch (method) {
+    case 'auth.test': {
+      const { noscope, ...rest } = who;
+      return send(res, 200, rest);
+    }
+
+    case 'users.info': {
+      const u = USERS[String(params.user)];
+      if (!u) return send(res, 200, { ok: false, error: 'user_not_found' });
+      const img = `http://127.0.0.1:${PORT}/img/u/${params.user}.svg`;
+      return send(res, 200, { ok: true, user: { id: params.user, name: u.name, real_name: u.real_name, is_bot: Boolean(u.is_bot), profile: { display_name: u.display_name, real_name: u.real_name, image_48: img, image_72: img } } });
+    }
+
+    case 'conversations.list': {
+      const types = String(params.types || 'public_channel').split(',');
+      let list = CHANNELS.filter((c) => (c.is_private ? types.includes('private_channel') : types.includes('public_channel')));
+      if (who.bot_id) list = list.filter((c) => c.is_member); // a bot sees only what it's in
+      const limit = Math.max(1, Math.min(1000, Number(params.limit) || 100));
+      const start = params.cursor ? Number(Buffer.from(String(params.cursor), 'base64').toString()) || 0 : 0;
+      const page = list.slice(start, start + limit);
+      const next = start + limit < list.length ? Buffer.from(String(start + limit)).toString('base64') : '';
+      return send(res, 200, { ok: true, channels: page.map(channelRecord), response_metadata: { next_cursor: next } });
+    }
+
+    case 'conversations.info': {
+      const c = findChannel(params.channel);
+      if (!c) return send(res, 200, { ok: false, error: 'channel_not_found' });
+      return send(res, 200, { ok: true, channel: channelRecord(c) });
+    }
+
+    case 'conversations.history': {
+      const c = findChannel(params.channel);
+      if (!c) return send(res, 200, { ok: false, error: 'channel_not_found' });
+      if (who.noscope) return send(res, 200, { ok: false, error: 'missing_scope', needed: 'channels:history', provided: 'channels:read,chat:write' });
+      if (!c.is_member) return send(res, 200, { ok: false, error: 'not_in_channel' });
+      const limit = Math.max(1, Math.min(1000, Number(params.limit) || 100));
+      const list = history.get(c.id);
+      const window = list.slice(-limit).reverse().map(publicMessage);
+      return send(res, 200, { ok: true, messages: window, has_more: list.length > limit, pin_count: 0 });
+    }
+
+    case 'conversations.replies': {
+      const c = findChannel(params.channel);
+      if (!c) return send(res, 200, { ok: false, error: 'channel_not_found' });
+      if (!c.is_member) return send(res, 200, { ok: false, error: 'not_in_channel' });
+      const parent = history.get(c.id).find((m) => m.ts === String(params.ts));
+      if (!parent) return send(res, 200, { ok: false, error: 'thread_not_found' });
+      const limit = Math.max(1, Math.min(1000, Number(params.limit) || 100));
+      return send(res, 200, { ok: true, messages: [publicMessage(parent), ...(parent.replies || []).slice(0, limit - 1)], has_more: false });
+    }
+
+    case 'emoji.list': {
+      const emoji = {};
+      for (const [name, v] of Object.entries(CUSTOM_EMOJI)) emoji[name] = v(PORT);
+      return send(res, 200, { ok: true, emoji, cache_ts: '1700000000.000000' });
+    }
+
+    case 'reactions.add':
+    case 'reactions.remove': {
+      const c = findChannel(params.channel);
+      if (!c) return send(res, 200, { ok: false, error: 'channel_not_found' });
+      if (!c.is_member) return send(res, 200, { ok: false, error: 'not_in_channel' });
+      const name = String(params.name || '');
+      if (!name || name === 'nope') return send(res, 200, { ok: false, error: 'invalid_name' });
+      const m = findMessage(c.id, String(params.timestamp || ''));
+      if (!m) return send(res, 200, { ok: false, error: 'message_not_found' });
+      const err = method === 'reactions.add' ? addReaction(m, name, who.user_id) : removeReaction(m, name, who.user_id);
+      if (err) return send(res, 200, { ok: false, error: err });
+      console.log(`[slack-mock] ${method === 'reactions.add' ? '➕' : '➖'} :${name}: on ${m.ts} in #${c.name} by ${who.user}`);
+      return send(res, 200, { ok: true });
+    }
+
+    case 'chat.postMessage': {
+      const c = findChannel(params.channel);
+      if (!c) return send(res, 200, { ok: false, error: 'channel_not_found' });
+      if (!c.is_member) return send(res, 200, { ok: false, error: 'not_in_channel' });
+      const text = String(params.text || '');
+      if (!text.trim()) return send(res, 200, { ok: false, error: 'no_text' });
+      if (text.includes('!429')) return send(res, 429, { ok: false, error: 'ratelimited' }, { 'Retry-After': '3' });
+      let m;
+      if (who.bot_id && params.username) {
+        m = push(c.id, { subtype: 'bot_message', bot_id: who.bot_id, username: String(params.username), icons: params.icon_emoji ? { emoji: String(params.icon_emoji) } : undefined, text });
+      } else if (who.bot_id) {
+        m = push(c.id, { user: who.user_id, bot_id: who.bot_id, bot_profile: { id: who.bot_id, name: 'ProdDash' }, text });
+      } else {
+        m = push(c.id, { user: who.user_id, text });
+      }
+      if (params.thread_ts) m.thread_ts = String(params.thread_ts);
+      console.log(`[slack-mock] ✉ posted to #${c.name} as ${params.username || who.user}: ${text.slice(0, 60)}`);
+      return send(res, 200, { ok: true, channel: c.id, ts: m.ts, message: publicMessage(m) });
+    }
+
+    default:
+      return send(res, 200, { ok: false, error: 'unknown_method' });
+  }
+});
+
+server.listen(PORT, '127.0.0.1', () => {
+  console.log(`[slack-mock] Slack Web API mock on http://127.0.0.1:${PORT}/api`);
+  console.log('[slack-mock] tokens: xoxp-anything (user "Apollo Beach"), xoxb-anything (bot), xoxp-revoked, xoxp-noscope');
+  console.log('[slack-mock] run ProdDash with: SLACK_API_BASE=http://127.0.0.1:%d/api node server.js', PORT);
+});