domma-cms 0.113.0 → 0.114.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "0.113.0",
+  "version": "0.114.1",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/plugins/free-tier.lock.json

@@ -1,6 +1,6 @@
 {
   "note": "Written by `make sync-free-tier` in dcms-marketplace. Do not edit these plugins here - edit them there and sync.",
-  "source": "dcms-marketplace@ef8c865",
+  "source": "dcms-marketplace@26a9062",
   "plugins": {
     "blog": {
       "version": "1.9.4",
@@ -222,6 +222,28 @@
         "tests/api.test.js": "04105c5d4f7bf4fd7b9e4dea5e8b8de4a4ebbba0a8795b47c166b0a6798fd089",
         "tests/pure.test.js": "f00f27ee8c941d6268eb780520007b7413b0872e2590487f1b460ce5ea09dbb1"
       }
+    },
+    "support": {
+      "version": "1.0.0",
+      "files": {
+        "CLAUDE.md": "a54f3af90bc273622e67d0da0502da39a9e0962633d43d82eebf1228cf996f79",
+        "admin/css/index.css": "43a792dbc08acafc9f79757ac96c3675a49abb39aab05a553c6871f6f2050a1e",
+        "admin/lib/kit.js": "bc52d8dfe031b470b49c51e7170d46689a6b2892871e53ec0d6a44f37a91afc1",
+        "admin/templates/support.html": "2bb69d0443a367a402e6160fe68f4af3e8983b578cfff9575b4df9a534fcb480",
+        "admin/views/desk.js": "f0770c750dd340b83438c8f41b222b814c0937081201cb06b851a3fdea2952fd",
+        "admin/views/inbox.js": "fac961363a827ce5139689464a6b9a65c685752b0771f4bf956fb1dcd8d95ccb",
+        "admin/views/support.js": "448595a7087f7cff633bf5844755a931d1ca461af1c418f275dadb97673502dc",
+        "collections/support-tickets.json": "aa1e6b4814fdfbbcd46d097edd93dfb838cc49f5232a86ba76b54c9b29d82ac5",
+        "config.js": "07a72a5c7900d5eb3e2464f7f58b316fd2217f41f57fdad43ce917fe2da80b82",
+        "lib/mail.js": "4365511b2c3ab93bbe6e2635e4e2ebe39eb841f968a836507331b426ab6f4c1c",
+        "lib/receiver.js": "ef958be2a8fadcec10169ff76f10404d395f9c6b401a51642ede9218547d6262",
+        "lib/sender.js": "71e9146729e443df401a1b84e9778e9243d057012462e48a05e32a73f7309aa2",
+        "lib/shape.js": "7bef95c823ee4c6d4041152a58fdb2279dbe6797710a89e1339f8aca60cd0f89",
+        "plugin.js": "50db3f804ad987490d322c265be0d00e11202af265c5067b20816defa6ff990d",
+        "plugin.json": "75d1eaf11416b855e5255ae565781f2f7c144b42384362cd0f00f7da85f046ab",
+        "tests/api.test.js": "57a00bd19ba3569246f0841d8fb8f3d488fcf420c4c0556bfe07331576d74cf5",
+        "tests/shape.test.js": "cd7c44c8e2f676734c90044f25acc0583ab6074c1661cce05103fd0cbe307796"
+      }
     }
   }
 }

package/plugins/support/CLAUDE.md

@@ -0,0 +1,59 @@
+# support - AI Assistant Guide
+
+## Purpose
+
+A customer gets help from Domma without leaving their admin: the contact card (email, phone, hours) is
+always on screen, and a request is a two-way CONVERSATION with the Domma team. **Every site gets it,
+whatever its tier** (Darryl, 2026-10-04): `tier: "free"`, shipped in the CMS by `make sync-free-tier`,
+and switched on (and locked) fleet-wide from the manager's Tool switches.
+
+Built on Feedback's transport (read `plugins/feedback/CLAUDE.md`): ONE plugin, TWO sides, chosen at
+registration by where it runs.
+
+- **site (sender)** - any site. Connected when the manager started it (`MANAGER_URL` + `FLEET_TOKEN`,
+  set by site-manager's processManager): contact card + conversations. A standalone install gets the
+  contact card only, and `POST /tickets` answers 409 ("email us instead").
+- **manager (receiver)** - dcm, detected by `plugins/site-manager/services/fleetTokens.js` beside this
+  plugin. The inbox of every site's requests.
+
+## How it differs from Feedback
+
+- **Conversations, not report + reply.** `data.messages[]` (`{id, from: customer|domma, name, body, at}`),
+  appended by `addTurn()` (pure, in `lib/shape.js`), which also moves the status: `open` (waiting on
+  Domma) / `answered` (Domma replied - the customer's turn) / `closed` (resolved; writing again reopens).
+  A turn whose id is already there is a retry and changes nothing.
+- **A site knows its requests by `ref`** (made on the site), never the manager's entry id - a waiting
+  request has no id yet. Follow-ups carry `ticketRef`, wait behind their request in the outbox, and are
+  refused with it. The manager looks a ref up in THAT site's requests only (another site's ref is 404).
+- **Email both ways** (`lib/mail.js`, the Waypoint pattern: no SMTP = not sent, never Ethereal, never
+  throws). New request / customer reply -> `settings.notifyEmail`, Reply-To the customer, `[URGENT]`
+  in the subject. Domma reply or resolve -> the customer, linking to
+  `https://<site primaryDomain>/admin/#/plugins/support/<ref>`. The inbox link is
+  `<manager site.json url>/admin/#/plugins/support/<id>`.
+- **The contact card comes from the MANAGER.** `/fleet/mine` returns `contactCard(settings)`, the site
+  keeps it in its outbox and shows it from then on, so hours/phone are changed once, on dcm. The site's
+  own settings are the fallback (and all a standalone install has). `contactCard()` lets through only a
+  real email and a phone of phone characters - the links are built from it.
+- **Faster sync.** `syncMinutes` 5 (Feedback: 60), plus `/count` nudges a background sync when the last
+  is over a minute old - the badge itself never waits on the manager.
+- **The CMS version comes from the manager's registry** (`sites.json` `cmsVersion`), not the payload: a
+  child site's package.json is the manager's, so its own answer is wrong.
+
+## Files
+
+- `plugin.js` - both route sets (see its header); `options.mode` / `mail` / `fetch` / `env` /
+  `slugFromToken` / `siteDirectory` / `timer: false` are test seams
+- `lib/shape.js` - PURE: categories, priorities, statuses, cleaning, `addTurn`, `senderView` (the
+  whitelist - no notes, no history), `contactCard`, throttle, both emails
+- `lib/sender.js` - outbox (`data/outbox.json`: items, seen, last remote view, contact), `managerApi`,
+  `flush`, `mergeTickets`
+- `lib/receiver.js` - the `support-tickets` collection (API off on all verbs), token -> slug, site
+  directory, `open` / `customerTurn` / `dommaTurn` / `patch`
+- `admin/views/support.js` (shell) -> `desk.js` (site) or `inbox.js` (manager); `admin/lib/kit.js`
+- `tests/shape.test.js` (pure), `tests/api.test.js` (site apps wired into a manager app via inject;
+  mail into an array)
+
+## Badges
+
+Site: new replies (`info`), else open requests as an inventory. Manager: requests waiting on Domma,
+`danger` while any is urgent, `attention` otherwise; nothing waiting = every request, inventory.

package/plugins/support/admin/css/index.css

@@ -0,0 +1,95 @@
+/* Support - admin styles. Theme tokens only (every one below is defined by every Domma theme). */
+
+/* data-bind-hidden sets [hidden]; any display rule below would otherwise beat it. */
+.sp [hidden], .sp-detail [hidden], .sp-form [hidden] { display: none !important; }
+
+.sp { max-width: 60rem; display: flex; flex-direction: column; gap: 1rem; }
+.sp-desk { display: flex; flex-direction: column; gap: 1rem; }
+.sp-card { background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: 1rem 1.1rem; }
+.sp-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
+.sp-spacer { flex: 1; }
+.sp-intro { display: flex; flex-direction: column; gap: .15rem; }
+.sp-intro span { color: var(--dm-text-secondary); font-size: var(--dm-font-size-sm); }
+.sp-note { margin: .5rem 0; color: var(--dm-text-secondary); font-size: var(--dm-font-size-sm); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
+.sp-note.is-bad { color: var(--dm-danger); }
+.sp-note.is-warn { color: var(--dm-text); background: color-mix(in srgb, var(--dm-warning) 14%, transparent); border-radius: var(--dm-radius-md); padding: .45rem .7rem; }
+.sp-small { font-size: var(--dm-font-size-xs); margin-top: 0; }
+.sp-hint { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); }
+
+/* The contact card */
+.sp-contact { border-color: color-mix(in srgb, var(--dm-primary) 40%, var(--dm-border)); }
+.sp-contact-lead { display: flex; gap: .9rem; align-items: center; }
+.sp-contact-lead h3 { margin: 0; }
+.sp-contact-lead p { margin: .15rem 0 0; color: var(--dm-text-secondary); }
+.sp-contact-icon { color: var(--dm-primary); display: inline-flex; padding: .6rem; border-radius: 50%; background: var(--dm-primary-light); }
+.sp-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; margin-top: 1rem; }
+.sp-way { display: flex; gap: .6rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
+  color: var(--dm-text); text-decoration: none; min-width: 0; }
+.sp-way:not(.is-static):hover { background: var(--dm-hover-bg); border-color: var(--dm-primary); }
+.sp-way > span:last-child { display: flex; flex-direction: column; min-width: 0; }
+.sp-way small { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); }
+.sp-way strong { overflow-wrap: anywhere; }
+.sp-contact-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
+
+/* Filters */
+.sp-seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
+.sp-seg button { border: 1px solid var(--dm-border); background: none; color: var(--dm-text-secondary); border-radius: var(--dm-radius-full);
+  padding: .2rem .7rem; font-size: var(--dm-font-size-sm); cursor: pointer; }
+.sp-seg button b { font-weight: 600; margin-left: .2rem; }
+.sp-seg button.is-on { background: var(--dm-primary-light); color: var(--dm-text); border-color: var(--dm-primary); }
+.sp-search { flex: 1; min-width: 12rem; max-width: 20rem; }
+
+/* Rows */
+.sp-list { display: flex; flex-direction: column; }
+.sp-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-top: 1px solid var(--dm-border); cursor: pointer; border-radius: var(--dm-radius-md); }
+.sp-row:first-child { border-top: 0; }
+.sp-row:hover, .sp-row:focus-visible { background: var(--dm-hover-bg); outline: none; }
+.sp-cat { display: inline-flex; color: var(--dm-text-secondary); }
+.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.sp-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sp-main small { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); }
+.sp-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--dm-primary); flex: none; }
+.sp-urgent { font-size: var(--dm-font-size-xs); font-weight: 700; color: var(--dm-danger); text-transform: uppercase; letter-spacing: .03em; }
+.sp-chip { font-size: var(--dm-font-size-xs); font-weight: 600; padding: .12rem .55rem; border-radius: var(--dm-radius-full); white-space: nowrap;
+  background: color-mix(in srgb, var(--dm-text-secondary) 14%, transparent); color: var(--dm-text); }
+.sp-chip.is-info { background: color-mix(in srgb, var(--dm-info) 18%, transparent); }
+.sp-chip.is-warning { background: color-mix(in srgb, var(--dm-warning) 22%, transparent); }
+.sp-chip.is-success { background: color-mix(in srgb, var(--dm-success) 20%, transparent); }
+.sp-chip.is-bad { background: color-mix(in srgb, var(--dm-danger) 20%, transparent); }
+
+/* Forms */
+.sp-form { display: flex; flex-direction: column; gap: .35rem; }
+.sp-form .form-label { margin-top: .5rem; }
+.sp-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem; }
+.sp-choices.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sp-choices button { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--dm-border); background: none; color: var(--dm-text);
+  border-radius: var(--dm-radius-md); padding: .5rem .6rem; cursor: pointer; text-align: left; font-size: var(--dm-font-size-sm); }
+.sp-choices.is-two button { flex-direction: column; align-items: flex-start; gap: .1rem; }
+.sp-choices.is-two small { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); }
+.sp-choices button:hover { background: var(--dm-hover-bg); }
+.sp-choices button.is-on { border-color: var(--dm-primary); background: var(--dm-primary-light); }
+.sp-choices [data-value="urgent"].is-on { border-color: var(--dm-danger); background: color-mix(in srgb, var(--dm-danger) 12%, transparent); }
+.sp-actions { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
+.sp-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-font-size-sm); }
+.sp-inline .form-select { width: auto; }
+.sp-danger { color: var(--dm-danger); }
+
+/* A request */
+.sp-detail { display: flex; flex-direction: column; gap: 1rem; }
+.sp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem 1rem; margin: 0; }
+.sp-facts dt { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); }
+.sp-facts dd { margin: 0; overflow-wrap: anywhere; }
+.sp-thread-host { max-height: 50vh; overflow-y: auto; }
+.sp-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
+.sp-msg { max-width: 88%; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: .55rem .75rem; background: var(--dm-background); }
+.sp-msg.is-mine { align-self: flex-end; background: var(--dm-primary-light); border-color: color-mix(in srgb, var(--dm-primary) 35%, var(--dm-border)); }
+.sp-msg-head { display: flex; gap: .6rem; justify-content: space-between; align-items: baseline; font-size: var(--dm-font-size-sm); }
+.sp-msg-head small { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); white-space: nowrap; }
+.sp-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .25rem; }
+.sp-reply, .sp-side { border-top: 1px solid var(--dm-border); padding-top: .8rem; }
+
+@media (max-width: 640px) {
+  .sp-choices.is-two { grid-template-columns: 1fr; }
+  .sp-row { flex-wrap: wrap; }
+  .sp-msg { max-width: 100%; }
+}

package/plugins/support/admin/lib/kit.js

@@ -0,0 +1,119 @@
+/**
+ * Support admin - what both screens share: the admin's helpers (loaded at run
+ * time; a plugin never imports admin/ statically - the updater replaces it),
+ * the API, escaping, dates, slideovers and the conversation thread.
+ *
+ * @module support/admin/lib/kit
+ */
+
+import {fmtDate, fmtDateTime} from '/plugins/_lib/admin/ui/dates.js';
+
+export const SIDEBAR_URL = '#/plugins/support';
+export const BASE = '/api/plugins/support';
+
+let kit = null;
+
+/** tool-kit, plugin-chrome and help-popover, once, with stand-ins for an older admin. */
+export function loadKit() {
+    if (!kit) {
+        kit = Promise.all([
+            import('/admin/js/lib/tool-kit.js').catch(() => ({})),
+            import('/admin/js/lib/help-popover.js').catch(() => ({}))
+        ]).then(([tk, help]) => ({
+            onceClosed: tk.onceClosed || ((so, fn) => { const c = so.close.bind(so); so.close = (...a) => { const r = c(...a); fn?.(); return r; }; }),
+            viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
+            helpPopovers: help.helpPopovers || (() => () => {})
+        }));
+    }
+    return kit;
+}
+
+const seg = (id) => encodeURIComponent(String(id));
+export const api = {
+    mode: () => H.get(`${BASE}/mode`),
+    meta: () => H.get(`${BASE}/meta`),
+    // site
+    tickets: () => H.get(`${BASE}/tickets`),
+    open: (d) => H.post(`${BASE}/tickets`, d),
+    write: (ref, body) => H.post(`${BASE}/tickets/${seg(ref)}/messages`, {body}),
+    close: (ref) => H.post(`${BASE}/tickets/${seg(ref)}/close`, {}),
+    seen: (ref, at) => H.put(`${BASE}/tickets/${seg(ref)}/seen`, {at}),
+    // manager
+    ticket: (id) => H.get(`${BASE}/tickets/${seg(id)}`),
+    reply: (id, d) => H.post(`${BASE}/tickets/${seg(id)}/reply`, d),
+    update: (id, d) => H.put(`${BASE}/tickets/${seg(id)}`, d),
+    remove: (id) => H.delete(`${BASE}/tickets/${seg(id)}`)
+};
+
+/** Some routes send a bare array, some an object. */
+export const listOf = (res, key) => res?.[key] ?? (Array.isArray(res) ? res : []);
+
+/** Slideover titles and E.confirm render HTML: user text goes in escaped. */
+export const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/** A small DOM tree from an HTML string that holds NO unescaped user data. */
+export function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+export const store = {
+    get(k) { try { return S.get(k); } catch { return null; } },
+    set(k, v) { try { S.set(k, v); } catch { /* a convenience */ } }
+};
+
+/** The sidebar re-asks the Support badge. */
+export function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+}
+
+/** "3 min ago", "26/09/2026". */
+export function when(iso) {
+    const t = new Date(iso).getTime();
+    if (!Number.isFinite(t)) return '';
+    const s = (Date.now() - t) / 1000;
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.round(s / 60)} min ago`;
+    if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+    if (s < 86400 * 6) return `${Math.round(s / 86400)} d ago`;
+    return fmtDate(t);
+}
+
+export const stamp = (iso) => (Number.isFinite(new Date(iso ?? '').getTime()) ? fmtDateTime(iso) : '');
+
+/** The tel: form of a phone number (shape.js has the same; admin code cannot import lib/). */
+export const telHref = (phone) => `tel:${String(phone || '').replace(/[^\d+]/g, '')}`;
+
+export const TONE = {open: 'warning', answered: 'info', closed: 'success', waiting: 'warning', refused: 'bad'};
+
+/**
+ * The conversation, oldest first, as HTML with every user string escaped.
+ * `mine` says which side is "us" (customer on a site, domma on the manager).
+ */
+export function threadHtml(messages = [], mine) {
+    if (!messages.length) return '<p class="sp-note">Nothing here yet.</p>';
+    return `<ol class="sp-thread">${messages.map(m => `
+<li class="sp-msg ${m.from === mine ? 'is-mine' : 'is-theirs'}${m.from === 'domma' ? ' is-domma' : ''}">
+  <div class="sp-msg-head"><strong>${esc(m.from === 'domma' ? `${m.name || 'Domma'} · Domma Support` : (m.name || 'Customer'))}</strong>
+    <small>${esc(stamp(m.at))}${m.pending ? ' · waiting to send' : ''}${m.refused ? ' · not accepted' : ''}</small></div>
+  <div class="sp-msg-body">${esc(m.body)}</div>
+</li>`).join('')}</ol>`;
+}
+
+/**
+ * A slideover holding `html`, bound to `model`. Everything is disposed and the
+ * element removed on close.
+ */
+export async function openPanel({title, size = 'md', html, model = {}, methods = {}, cleanup = () => {}}) {
+    const {onceClosed, helpPopovers} = await loadKit();
+    const so = E.slideover({title: esc(title), size, position: 'right'});
+    const panel = fragment(html);
+    so.element.appendChild(panel);
+    const disposeHelp = helpPopovers(panel, {position: 'bottom'});
+    const handle = M.applyBindings(model, panel, {methods});
+    onceClosed(so, () => { cleanup(); handle.dispose(); disposeHelp(); });
+    I.scan(panel);
+    so.open();
+    return {so, panel, close: () => so.close()};
+}

package/plugins/support/admin/templates/support.html

@@ -0,0 +1 @@
+<div class="sp" data-support-admin></div>

package/plugins/support/admin/views/desk.js

@@ -0,0 +1,289 @@
+/**
+ * Support on a site: how to reach Domma (always), and this site's conversations
+ * with Domma Support (when the manager started the site).
+ *
+ * Everything written is kept on this site before it is sent, so a Domma server
+ * that is restarting only delays it ("waiting to send"); opening this screen
+ * tries again. A standalone site has the contact card and nothing else - it has
+ * nowhere to send a conversation, so it says to email instead.
+ */
+
+import {TONE, api, esc, listOf, openPanel, refreshBadge, stamp, telHref, threadHtml, when} from '../lib/kit.js';
+
+const ROW = `
+<div class="sp-row" data-id="{{key}}" tabindex="0" role="button">
+  <span class="sp-cat" data-bind-title="categoryLabel"><span data-icon="{{icon}}" data-icon-size="16"></span></span>
+  <span class="sp-main"><strong data-bind-text="subject"></strong><small data-bind-text="meta"></small></span>
+  <span class="sp-urgent" data-bind-hidden="!urgent">Urgent</span>
+  <span class="sp-dot" data-bind-hidden="!unread" title="New reply from Domma"></span>
+  <span class="sp-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
+</div>`;
+
+export async function mount(root, ctx) {
+    const {kit, scope, here, meta, id} = ctx;
+    const categories = meta.categories || [];
+    const priorities = meta.priorities || [];
+    const iconOf = (c) => categories.find(x => x.key === c)?.icon || 'message-square';
+    const labelOf = (c) => categories.find(x => x.key === c)?.short || c;
+    const plural = (n, w) => (n ? `${n} ${w}${n === 1 ? '' : 's'}` : '');
+
+    const connected = M.observable(Boolean(ctx.mode.connected));
+    const contact = M.observable(ctx.mode.contact || {});
+    const tickets = M.observable([]);
+    const loading = M.observable(Boolean(ctx.mode.connected));
+    const reachable = M.observable(true);
+    const error = M.observable('');
+    const rows = M.observable([]);
+    scope(M.effect(() => {
+        rows.value = tickets.value.map(t => ({
+            key: t.ref,
+            subject: t.subject,
+            icon: iconOf(t.category),
+            categoryLabel: labelOf(t.category),
+            meta: [when(t.lastAt || t.createdAt), t.userName, plural((t.messages || []).length, 'message')].filter(Boolean).join(' · '),
+            statusLabel: t.statusLabel || t.status,
+            tone: `is-${TONE[t.status] || 'muted'}`,
+            urgent: t.priority === 'urgent',
+            unread: Boolean(t.unread)
+        }));
+    }));
+    const waitingCount = M.computed(() => tickets.value.filter(t => t.status === 'waiting'
+        || (t.messages || []).some(m => m.pending)).length);
+
+    root.innerHTML = '';
+    const view = document.createElement('div');
+    view.className = 'sp-desk';
+    view.innerHTML = `
+<section class="sp-card sp-contact" aria-label="Contact Domma">
+  <div class="sp-contact-lead">
+    <span class="sp-contact-icon"><span data-icon="headphones" data-icon-size="28"></span></span>
+    <div>
+      <h3>We are here to help</h3>
+      <p data-bind-text="contact.value.responseTime"></p>
+    </div>
+  </div>
+  <div class="sp-ways">
+    <a class="sp-way" data-bind-hidden="!contact.value.email" data-ref="mail">
+      <span data-icon="mail" data-icon-size="18"></span><span><small>Email</small><strong data-bind-text="contact.value.email"></strong></span></a>
+    <a class="sp-way" data-bind-hidden="!contact.value.phone" data-ref="tel">
+      <span data-icon="phone" data-icon-size="18"></span><span><small>Phone</small><strong data-bind-text="contact.value.phone"></strong></span></a>
+    <div class="sp-way is-static" data-bind-hidden="!contact.value.hours">
+      <span data-icon="clock" data-icon-size="18"></span><span><small>Hours</small><strong data-bind-text="contact.value.hours"></strong></span></div>
+  </div>
+  <div class="sp-contact-actions" data-bind-hidden="!connected.value">
+    <button type="button" class="btn btn-primary" data-on-click="compose"><span data-icon="send" data-icon-size="14"></span> Ask for help</button>
+    <span class="sp-hint">Fastest: it reaches the Domma team at once, with your site attached. Mark it urgent if your site is down.</span>
+  </div>
+</section>
+
+<section class="sp-card" data-bind-hidden="connected.value">
+  <p class="sp-note"><span data-icon="cloud-off" data-icon-size="16"></span> This site is not connected to the Domma server, so requests cannot be sent from here - email us and we will pick it up from there.</p>
+</section>
+
+<section class="sp-card" data-bind-hidden="!connected.value">
+  <div class="sp-bar">
+    <div class="sp-intro"><strong>Your requests</strong><span>Every conversation this site has had with Domma Support, whoever started it.</span></div>
+    <span data-help-title="Your requests" data-help="A request is a conversation with the Domma team. It shows Waiting on Domma until we answer, Domma replied when it is your turn, and Resolved when either of us marks it done - writing again reopens it. Replies also arrive by email, and the sidebar badge counts the ones you have not opened."></span>
+  </div>
+  <p class="sp-note is-warn" data-bind-hidden="!waitingCount.value">
+    <span data-icon="clock" data-icon-size="14"></span> Something is waiting to send - it goes as soon as the Domma server answers.
+    <button type="button" class="btn btn-ghost btn-xs" data-on-click="reload">Try now</button>
+  </p>
+  <p class="sp-note is-warn" data-bind-hidden="reachable.value || loading.value">Domma could not be reached just now, so what you see may be out of date.</p>
+  <div class="sp-loading dm-loading-slot" data-bind-hidden="!loading.value">Loading...</div>
+  <p class="sp-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+  <p class="sp-note" data-bind-hidden="loading.value || rows.value.length">No requests yet. Stuck on something, or something not working? Ask for help - a person reads every one.</p>
+  <div class="sp-list" data-each="rows.value key=key"></div>
+</section>`;
+    root.appendChild(view);
+    scope(kit.helpPopovers(view, {position: 'bottom'}));
+    const listEl = view.querySelector('.sp-list');
+    listEl.innerHTML = ROW;
+    scope(M.effect(() => { rows.value; Promise.resolve().then(() => { M.flush?.(); I.scan(listEl); }); }));
+    // The links are set here, from the cleaned card (the server lets through only a real email and phone).
+    const mailLink = view.querySelector('[data-ref="mail"]');
+    const tel = view.querySelector('[data-ref="tel"]');
+    scope(M.effect(() => {
+        const c = contact.value || {};
+        if (c.email) mailLink.setAttribute('href', `mailto:${c.email}`);
+        if (c.phone) tel.setAttribute('href', telHref(c.phone));
+    }));
+
+    async function load() {
+        loading.value = true;
+        try {
+            const res = await api.tickets();
+            if (!here()) return;
+            connected.value = Boolean(res.connected);
+            reachable.value = Boolean(res.reachable) || !res.connected;
+            if (res.contact) contact.value = res.contact;
+            tickets.value = listOf(res, 'tickets');
+            error.value = '';
+        } catch (err) {
+            error.value = `Could not load your requests: ${err.message || err}`;
+        } finally {
+            loading.value = false;
+            I.scan(view);
+        }
+    }
+
+    const byRef = (ref) => tickets.peek().find(t => t.ref === ref);
+
+    function compose() {
+        const f = {category: M.observable('help'), priority: M.observable('normal'), subject: M.observable(''), body: M.observable(''),
+            where: M.observable(''), busy: M.observable(false)};
+        let panel = null;
+        openPanel({
+            title: 'Ask Domma for help',
+            model: f,
+            html: `<div class="sp-form">
+  <label class="form-label">What is it about?</label>
+  <div class="sp-choices" data-group="category" role="radiogroup" aria-label="Category">
+    ${categories.map(c => `<button type="button" role="radio" data-value="${esc(c.key)}" data-bind-class="category.value === '${esc(c.key)}' && 'is-on'"><span data-icon="${esc(c.icon)}" data-icon-size="16"></span>${esc(c.label)}</button>`).join('')}
+  </div>
+  <label class="form-label" for="sp-subject">Subject</label>
+  <input id="sp-subject" class="form-input" maxlength="140" data-model="subject.value" placeholder="One line - e.g. My contact form stopped sending">
+  <label class="form-label" for="sp-body">How can we help? <span data-help="What you were doing, what you expected and what happened instead. A page address or the screen you were on helps us get there faster."></span></label>
+  <textarea id="sp-body" class="form-textarea" rows="8" maxlength="8000" data-model="body.value"></textarea>
+  <label class="form-label">How urgent is it?</label>
+  <div class="sp-choices is-two" data-group="priority" role="radiogroup" aria-label="Priority">
+    ${priorities.map(p => `<button type="button" role="radio" data-value="${esc(p.key)}" data-bind-class="priority.value === '${esc(p.key)}' && 'is-on'"><strong>${esc(p.label)}</strong><small>${esc(p.hint)}</small></button>`).join('')}
+  </div>
+  <label class="form-label" for="sp-where">Where <span data-help="The page or admin screen it is about, if there is one - e.g. /contact, or Pages. Optional."></span></label>
+  <input id="sp-where" class="form-input" maxlength="300" data-model="where.value" placeholder="Optional">
+  <p class="sp-hint">Sent with your name, email and this site, so we can reply here and by email.</p>
+  <div class="sp-actions"><span class="sp-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="busy.value"><span data-icon="send" data-icon-size="13"></span> Send</button>
+  </div>
+</div>`,
+            methods: {
+                cancel: () => panel?.close(),
+                async send() {
+                    if (f.busy.peek()) return;
+                    f.busy.value = true;
+                    try {
+                        const r = await api.open({category: f.category.peek(), priority: f.priority.peek(), subject: f.subject.peek(),
+                            body: f.body.peek(), where: f.where.peek()});
+                        E.toast(r.message || 'Sent.', {type: r.state === 'sent' ? 'success' : 'warning'});
+                        panel?.close();
+                        refreshBadge();
+                        await load();
+                    } catch (err) {
+                        E.toast(err.message || String(err), {type: 'error'});
+                    } finally {
+                        f.busy.value = false;
+                    }
+                }
+            }
+        }).then(p => {
+            panel = p;
+            p.panel.addEventListener('click', (e) => {
+                const b = e.target.closest('[data-value]');
+                const group = b?.closest('[data-group]')?.dataset.group;
+                if (group) f[group].value = b.dataset.value;
+            });
+            p.panel.querySelector('#sp-subject')?.focus();
+        });
+    }
+
+    async function open(ref) {
+        const t0 = byRef(ref);
+        if (!t0) return;
+        const draft = M.observable('');
+        const busy = M.observable(false);
+        const status = M.observable(t0.status);
+        const canWrite = !['waiting', 'refused'].includes(t0.status);
+        let panel = null;
+        const render = () => {
+            const t = byRef(ref) || t0;
+            status.value = t.status;
+            const box = panel?.panel.querySelector('.sp-thread-host');
+            if (box) { box.innerHTML = threadHtml(t.messages, 'customer'); box.scrollTop = box.scrollHeight; }
+            const chip = panel?.panel.querySelector('[data-ref="status"]');
+            if (chip) { chip.textContent = t.statusLabel || t.status; chip.className = `sp-chip is-${TONE[t.status] || 'muted'}`; }
+        };
+        const markSeen = async () => {
+            const t = byRef(ref);
+            const at = [...(t?.messages || [])].reverse().find(m => m.from === 'domma')?.at;
+            if (t?.unread && at) {
+                try { await api.seen(ref, at); tickets.value = tickets.peek().map(x => (x.ref === ref ? {...x, unread: false} : x)); refreshBadge(); }
+                catch { /* the badge catches up next time */ }
+            }
+        };
+        panel = await openPanel({
+            title: t0.subject,
+            size: 'lg',
+            model: {draft, busy, status},
+            html: `<div class="sp-detail">
+  <dl class="sp-facts">
+    <div><dt>Status</dt><dd><span data-ref="status" class="sp-chip"></span></dd></div>
+    <div><dt>About</dt><dd>${esc(labelOf(t0.category))}${t0.priority === 'urgent' ? ' · <span class="sp-urgent">Urgent</span>' : ''}</dd></div>
+    <div><dt>Opened</dt><dd>${esc(stamp(t0.createdAt))}${t0.userName ? ` by ${esc(t0.userName)}` : ''}</dd></div>
+    ${t0.where ? `<div><dt>Where</dt><dd>${esc(t0.where)}</dd></div>` : ''}
+    ${t0.lastError ? `<div><dt>Last try</dt><dd>${esc(t0.lastError)}</dd></div>` : ''}
+  </dl>
+  <div class="sp-thread-host"></div>
+  ${canWrite ? `<div class="sp-reply">
+    <label class="form-label" for="sp-write" data-bind-text="status.value === 'closed' ? 'Write again (this reopens it)' : 'Reply'"></label>
+    <textarea id="sp-write" class="form-textarea" rows="4" maxlength="8000" data-model="draft.value" placeholder="Write to Domma Support"></textarea>
+    <div class="sp-actions">
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="resolve" data-bind-hidden="status.value === 'closed'" data-bind-disabled="busy.value"><span data-icon="check-circle" data-icon-size="13"></span> Mark resolved</button>
+      <span class="sp-spacer"></span>
+      <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="busy.value || !draft.value.trim()"><span data-icon="send" data-icon-size="13"></span> Send</button>
+    </div>
+  </div>` : '<p class="sp-note">You can write again once this request reaches Domma.</p>'}
+</div>`,
+            methods: {
+                async send() {
+                    if (busy.peek() || !draft.peek().trim()) return;
+                    busy.value = true;
+                    try {
+                        const r = await api.write(ref, draft.peek());
+                        if (r.state !== 'sent') E.toast(r.message, {type: 'warning'});
+                        draft.value = '';
+                        await load();
+                        render();
+                    } catch (err) {
+                        E.toast(err.message || String(err), {type: 'error'});
+                    } finally {
+                        busy.value = false;
+                    }
+                },
+                async resolve() {
+                    if (busy.peek()) return;
+                    busy.value = true;
+                    try {
+                        const r = await api.close(ref);
+                        E.toast(r.message || 'Marked as resolved.', {type: r.state === 'sent' ? 'success' : 'warning'});
+                        await load();
+                        render();
+                    } catch (err) {
+                        E.toast(err.message || String(err), {type: 'error'});
+                    } finally {
+                        busy.value = false;
+                    }
+                }
+            }
+        });
+        render();
+        await markSeen();
+    }
+
+    const bindings = M.applyBindings({connected, contact, loading, reachable, error, rows, waitingCount}, view, {
+        methods: {compose, reload: () => load()}
+    });
+    scope(() => bindings.dispose());
+
+    const onClick = (e) => { const row = e.target.closest('.sp-row'); if (row) open(row.dataset.id); };
+    const onKey = (e) => { const row = e.target.closest('.sp-row'); if (row && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); open(row.dataset.id); } };
+    listEl.addEventListener('click', onClick);
+    listEl.addEventListener('keydown', onKey);
+    scope(() => { listEl.removeEventListener('click', onClick); listEl.removeEventListener('keydown', onKey); });
+
+    I.scan(view);
+    if (connected.peek()) {
+        await load();
+        if (id && here()) open(id);
+    }
+}