domma-cms 0.116.0 → 0.116.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "0.116.0",
+  "version": "0.116.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@33c799d",
+  "source": "dcms-marketplace@149aff8",
   "plugins": {
     "blog": {
       "version": "1.9.4",
@@ -224,25 +224,25 @@
       }
     },
     "support": {
-      "version": "1.0.2",
+      "version": "1.1.0",
       "files": {
-        "CLAUDE.md": "a54f3af90bc273622e67d0da0502da39a9e0962633d43d82eebf1228cf996f79",
-        "admin/css/index.css": "43a792dbc08acafc9f79757ac96c3675a49abb39aab05a553c6871f6f2050a1e",
-        "admin/lib/kit.js": "bc52d8dfe031b470b49c51e7170d46689a6b2892871e53ec0d6a44f37a91afc1",
+        "CLAUDE.md": "ff42515f210dfdbeb1b14992012177ad8513323a340a0d4fe69a6ec13773db5a",
+        "admin/css/index.css": "bad02a487ebb131b64ee55e2a4533c8b79d6ada80fffd34b0952bf3b68204a36",
+        "admin/lib/kit.js": "22f02768625bcad9d9c8e64bf0a8fe95f7c5ff6dcf8abb189df8203362a7a4e1",
         "admin/templates/support.html": "2bb69d0443a367a402e6160fe68f4af3e8983b578cfff9575b4df9a534fcb480",
-        "admin/views/desk.js": "f0770c750dd340b83438c8f41b222b814c0937081201cb06b851a3fdea2952fd",
-        "admin/views/inbox.js": "53321d9efba883b7fb2b26fcfe72e902f484b9cb1eb85eb0e043b228a7035252",
-        "admin/views/support.js": "f5621fd99782e40d9faeeddf187c5c8b0412ee621ab53f03fb96d60b3f144478",
-        "collections/support-tickets.json": "aa1e6b4814fdfbbcd46d097edd93dfb838cc49f5232a86ba76b54c9b29d82ac5",
+        "admin/views/desk.js": "ac043630ad08c8f2053f3f908be18586d9a4798976d20427cf5215ee042c807c",
+        "admin/views/inbox.js": "f570595d7b2c831d151e0aaf85ff903e6e2b7066124b3f9d23c2c24f5b1734cf",
+        "admin/views/support.js": "360a50ff54b81f93fcd6fb6949710e0cff5d342bb8573408415ef3faf3fd29ff",
+        "collections/support-tickets.json": "55a0856bacd66c2e8f1e3c85bdf3638e5ff826560943cda854a8f2d336a88905",
         "config.js": "eb7ccc1169fa8b2be52a213536825492fedaec5fa73fd749cba9f498dd54b503",
         "lib/mail.js": "d14aae3a59aad6af61451863cdaaf94fc4a87810b16e1dcb9c655dda6c803b3b",
-        "lib/receiver.js": "ef958be2a8fadcec10169ff76f10404d395f9c6b401a51642ede9218547d6262",
-        "lib/sender.js": "71e9146729e443df401a1b84e9778e9243d057012462e48a05e32a73f7309aa2",
-        "lib/shape.js": "7bef95c823ee4c6d4041152a58fdb2279dbe6797710a89e1339f8aca60cd0f89",
-        "plugin.js": "7ff5ec08e469cc14aabca09c560d53d57d8c406eff44937c5464f8b60ae3b88f",
-        "plugin.json": "f41c2b77ab2f8986a67912c219b3a137af7fa500b5017d89ba43324a970d9508",
-        "tests/api.test.js": "c9483f1583d4449c6cb28624455b727e781063033878a79bd569162110980d36",
-        "tests/shape.test.js": "6d7b7a23dcb1933e4ed6e2f4b9fce2bf0b50125073f6ec60d15d6f2e6d7f8aa1"
+        "lib/receiver.js": "b95c569932c261a48849f0a6b7005f649d9c2a50d319b098a47d02da9363050c",
+        "lib/sender.js": "b20aaee34ade89814a897f68467f9902693843fa6b5c8eb0090c4059193c8227",
+        "lib/shape.js": "04d840b589d20700ccb2cfa4c72072f8d9f8e03f0573e2ea1177a7a83a383bea",
+        "plugin.js": "e3c50a05fa99cb24375782bbb3ca8c58cf5ddc3036937e6115f4d963715c120e",
+        "plugin.json": "e6efaf06f7f2c99b196909e56f0a0b6d65b438ffd6d616aa4207769861f9bd66",
+        "tests/api.test.js": "1fa87f6ae12c48fc34a5fb2b5bbeed6cfaa36329610674d4fae05d64734dbb15",
+        "tests/shape.test.js": "364c6b7680699f59fcd449cd448184486488838300f155135daea4c05387cf74"
       }
     }
   }

package/plugins/support/CLAUDE.md

@@ -39,6 +39,25 @@ registration by where it runs.
 - **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.
 
+## Archive, remove and the row menus (1.1.0)
+
+Both screens are domma-reactive throughout (lists AND the request panel: the thread is a `data-each` over
+`threadRows()`, status/urgent/archived are computeds over the list's copy, so a move from a row menu shows in
+an open panel at once). Every row has ONE menu definition (`menuItems`) reached by right-click, the ⋮ kebab
+and Shift+F10 (`rowKeys()` in kit.js); click/Enter opens. The panel's thread has its own menu (copy; on the
+manager also "Quote in reply").
+
+- **Manager archive** = `data.archived` (PUT `/tickets/:id {archived}`), Domma's own filing: the site never
+  sees it, `/count` ignores archived requests, and `addTurn()` takes a request OUT of the archive when the
+  customer writes again (a close does not).
+- **Site shelf** = the outbox's `shelf` (`{ref: {state: archived|removed, dommaAt}}`), this site's own tidying
+  - Domma keeps every request. `applyShelf()` (pure) marks archived and drops removed, and either comes back
+  the moment `lastDommaAt` moves past the recorded `dommaAt`: a reply is never hidden. `remember()` prunes
+  entries Domma deleted or has written to since. Shelving marks the reply read. Removing a request that
+  never reached Domma (`discard()`) cancels it - it and its follow-ups leave the outbox. Writing to an
+  archived request unshelves it.
+- Manager **Delete** stays a real delete (with `deleted.json`); the confirm suggests archiving instead.
+
 ## Files
 
 - `plugin.js` - both route sets (see its header); `options.mode` / `mail` / `fetch` / `env` /

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

@@ -36,6 +36,7 @@
 .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:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
 .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; }
 
@@ -48,6 +49,8 @@
 .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-kebab { border: 0; background: none; color: var(--dm-text-secondary); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .2rem .4rem; border-radius: var(--dm-radius-md); flex: none; }
+.sp-kebab:hover, .sp-kebab:focus-visible { background: var(--dm-hover-bg); color: var(--dm-text); outline: none; }
 .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;
@@ -55,6 +58,7 @@
 .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-muted { color: var(--dm-text-secondary); }
 .sp-chip.is-bad { background: color-mix(in srgb, var(--dm-danger) 20%, transparent); }
 
 /* Forms */

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

@@ -1,7 +1,7 @@
 /**
  * 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.
+ * the API, escaping, dates, slideovers, the row menus and the conversation thread.
  *
  * @module support/admin/lib/kit
  */
@@ -21,6 +21,10 @@ export function loadKit() {
             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; }; }),
+            openMenuAt: tk.openMenuAt || ((el) => {
+                const r = el.getBoundingClientRect();
+                el.dispatchEvent(new MouseEvent('contextmenu', {bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window}));
+            }),
             viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
             helpPopovers: help.helpPopovers || (() => () => {})
         }));
@@ -38,6 +42,8 @@ export const api = {
     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}),
+    /** `at`: Domma's latest reply as the screen showed it (omitted for an offline copy, which has none). */
+    shelf: (ref, state, at) => H.put(`${BASE}/tickets/${seg(ref)}/shelf`, {state, ...(at !== undefined && {at})}),
     // manager
     ticket: (id) => H.get(`${BASE}/tickets/${seg(id)}`),
     reply: (id, d) => H.post(`${BASE}/tickets/${seg(id)}/reply`, d),
@@ -88,17 +94,60 @@ 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).
+ * The conversation, oldest first, as rows for THREAD. `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>`;
+export function threadRows(messages = [], mine) {
+    return messages.map((m, i) => ({
+        key: m.id || `m${i}`,
+        cls: `${m.from === mine ? 'is-mine' : 'is-theirs'}${m.from === 'domma' ? ' is-domma' : ''}`,
+        who: m.from === 'domma' ? `${m.name || 'Domma'} · Domma Support` : (m.name || 'Customer'),
+        when: `${stamp(m.at)}${m.pending ? ' · waiting to send' : ''}${m.refused ? ' · not accepted' : ''}`,
+        body: m.body || ''
+    }));
+}
+
+/** The thread, bound to a `thread` observable of threadRows(). Text bindings only: nothing is parsed as HTML. */
+export const THREAD = `
+<p class="sp-note" data-bind-hidden="thread.value.length">Nothing here yet.</p>
+<ol class="sp-thread" data-each="thread.value key=key"><li class="sp-msg" data-bind-class="cls" data-key="{{key}}" tabindex="-1">
+  <div class="sp-msg-head"><strong data-bind-text="who"></strong><small data-bind-text="when"></small></div>
+  <div class="sp-msg-body" data-bind-text="body"></div>
+</li></ol>`;
+
+/** Copy text, with a toast either way. */
+export async function copyText(text, what = 'Copied') {
+    try {
+        await navigator.clipboard.writeText(String(text ?? ''));
+        E.toast(`${what}.`, {type: 'success'});
+    } catch {
+        E.toast('Your browser would not let us copy that.', {type: 'warning'});
+    }
+}
+
+/**
+ * The one way into a list's row menu besides right-click: the row's ⋮ button
+ * and Shift+F10. Click (or Enter) on the row itself does `primary`.
+ *
+ * @returns {Function} removes the listeners
+ */
+export function rowKeys(listEl, {rowSel, kebabSel, openMenuAt, primary}) {
+    const onClick = (e) => {
+        const row = e.target.closest(rowSel);
+        if (!row) return;
+        const kebab = e.target.closest(kebabSel);
+        if (kebab) { e.stopPropagation(); openMenuAt(kebab); return; }
+        primary(row.dataset.id);
+    };
+    const onKey = (e) => {
+        const row = e.target.closest(rowSel);
+        if (!row) return;
+        if ((e.key === 'F10' && e.shiftKey) || e.key === 'ContextMenu') { e.preventDefault(); openMenuAt(row); }
+        else if ((e.key === 'Enter' || e.key === ' ') && e.target === row) { e.preventDefault(); primary(row.dataset.id); }
+    };
+    listEl.addEventListener('click', onClick);
+    listEl.addEventListener('keydown', onKey);
+    return () => { listEl.removeEventListener('click', onClick); listEl.removeEventListener('keydown', onKey); };
 }
 
 /**

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

@@ -6,19 +6,33 @@
  * 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.
+ *
+ * Right-click a request (or its ⋮, or Shift+F10) to reply, mark it resolved or
+ * read, archive it or remove it from this site's list. Archive and remove are
+ * this site's own tidying: Domma keeps the conversation, and a new reply from
+ * Domma brings it straight back. Removing one that never reached Domma cancels it.
  */
 
-import {TONE, api, esc, listOf, openPanel, refreshBadge, stamp, telHref, threadHtml, when} from '../lib/kit.js';
+import {THREAD, TONE, api, copyText, esc, listOf, openPanel, refreshBadge, rowKeys, stamp, telHref, threadRows, when} from '../lib/kit.js';
 
 const ROW = `
-<div class="sp-row" data-id="{{key}}" tabindex="0" role="button">
+<div class="sp-row" data-id="{{key}}" tabindex="0" role="button" aria-haspopup="menu">
   <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>
+  <button type="button" class="sp-kebab" aria-label="Actions" title="Actions">&#8942;</button>
 </div>`;
 
+const FILTERS = [
+    {key: 'active', label: 'Requests'},
+    {key: 'archived', label: 'Archived'}
+];
+
+/** The newest Domma message's time - what "read" is measured against. */
+const lastDomma = (t) => [...(t?.messages || [])].reverse().find(m => m.from === 'domma')?.at || '';
+
 export async function mount(root, ctx) {
     const {kit, scope, here, meta, id} = ctx;
     const categories = meta.categories || [];
@@ -33,9 +47,13 @@ export async function mount(root, ctx) {
     const loading = M.observable(Boolean(ctx.mode.connected));
     const reachable = M.observable(true);
     const error = M.observable('');
+    const filter = M.observable('active');
     const rows = M.observable([]);
+    const counts = M.observable({});
     scope(M.effect(() => {
-        rows.value = tickets.value.map(t => ({
+        const all = tickets.value;
+        counts.value = {active: all.filter(t => !t.archived).length, archived: all.filter(t => t.archived).length};
+        rows.value = all.filter(t => (filter.value === 'archived') === Boolean(t.archived)).map(t => ({
             key: t.ref,
             subject: t.subject,
             icon: iconOf(t.category),
@@ -43,10 +61,15 @@ export async function mount(root, ctx) {
             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',
+            urgent: t.priority === 'urgent' && t.status !== 'closed',
             unread: Boolean(t.unread)
         }));
     }));
+    // Nothing archived any more: back to the list, rather than an empty tab with no way to see it.
+    scope(M.effect(() => { if (filter.value === 'archived' && !counts.value.archived) filter.value = 'active'; }));
+    const hasArchive = M.computed(() => Boolean(counts.value.archived) || filter.value === 'archived');
+    const emptyText = M.computed(() => (filter.value === 'archived' ? 'Nothing archived.'
+        : 'No requests yet. Stuck on something, or something not working? Ask for help - a person reads every one.'));
     const waitingCount = M.computed(() => tickets.value.filter(t => t.status === 'waiting'
         || (t.messages || []).some(m => m.pending)).length);
 
@@ -83,7 +106,11 @@ export async function mount(root, ctx) {
 <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>
+    <span class="sp-spacer"></span>
+    <div class="sp-seg" role="tablist" aria-label="Show" data-bind-hidden="!hasArchive.value">
+      ${FILTERS.map(f => `<button type="button" role="tab" data-filter="${f.key}" data-bind-class="filter.value === '${f.key}' && 'is-on'">${esc(f.label)} <b data-bind-text="counts.value['${f.key}'] || 0"></b></button>`).join('')}
+    </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. Right-click a request (or use its ⋮ button, or Shift+F10) to archive it or remove it from this list - Domma keeps its copy either way, and a new reply from Domma brings it back. 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.
@@ -92,7 +119,7 @@ export async function mount(root, ctx) {
   <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>
+  <p class="sp-note" data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
   <div class="sp-list" data-each="rows.value key=key"></div>
 </section>`;
     root.appendChild(view);
@@ -128,6 +155,60 @@ export async function mount(root, ctx) {
     }
 
     const byRef = (ref) => tickets.peek().find(t => t.ref === ref);
+    const patchLocal = (ref, change) => { tickets.value = tickets.peek().map(x => (x.ref === ref ? {...x, ...change} : x)); };
+    const fail = (err) => E.toast(err.message || String(err), {type: 'error'});
+
+    // ---- The moves: one definition each, for the row menu and the panel alike ----
+
+    const actions = {
+        async seen(t) {
+            const at = lastDomma(t);
+            if (!t.unread || !at) return;
+            await api.seen(t.ref, at);
+            patchLocal(t.ref, {unread: false});
+            refreshBadge();
+        },
+        async resolve(t) {
+            const r = await api.close(t.ref);
+            E.toast(r.message || 'Marked as resolved.', {type: r.state === 'sent' ? 'success' : 'warning'});
+            await load();
+        },
+        async archive(t, on) {
+            await api.shelf(t.ref, on ? 'archived' : null, t.stale ? undefined : lastDomma(t));
+            patchLocal(t.ref, {archived: on, ...(on && {unread: false})});
+            refreshBadge();
+            E.toast(on ? `Archived "${t.subject}". A new reply from Domma brings it back.` : `"${t.subject}" is back in your requests.`, {type: 'success'});
+        },
+        async remove(t) {
+            const local = t.status === 'waiting' || t.status === 'refused';
+            const ask = local
+                ? `Remove "${esc(t.subject)}"? If it has not gone to Domma yet, it will not be sent.`
+                : `Remove "${esc(t.subject)}" from this site's list? Domma keeps the conversation, and it comes back here if Domma replies again.`;
+            if (!await E.confirm(ask)) return false;
+            const r = await api.shelf(t.ref, 'removed', t.stale ? undefined : lastDomma(t));
+            tickets.value = tickets.peek().filter(x => x.ref !== t.ref);
+            refreshBadge();
+            E.toast(r.state === 'discarded' ? 'Removed - it will not be sent.'
+                : local ? 'Removed from this list - it had already started on its way, so Domma has it.' : 'Removed from this list.', {type: 'success'});
+            return true;
+        }
+    };
+    const act = (name, ...args) => async (t) => { try { return await actions[name](t, ...args); } catch (err) { fail(err); return false; } };
+
+    function menuItems(t) {
+        const local = t.status === 'waiting' || t.status === 'refused';
+        return [
+            {label: local ? 'Open' : 'Open and reply', icon: 'message-square', action: () => open(t.ref)},
+            ...(t.unread ? [{label: 'Mark as read', icon: 'check', action: () => act('seen')(t)}] : []),
+            ...(!local && t.status !== 'closed' && !t.stale ? [{label: 'Mark resolved', icon: 'check-circle', action: () => act('resolve')(t)}] : []),
+            {type: 'divider'},
+            t.archived ? {label: 'Back to your requests', icon: 'inbox', action: () => act('archive', false)(t)}
+                : {label: 'Archive', icon: 'archive', action: () => act('archive', true)(t)},
+            {label: 'Copy reference', icon: 'copy', action: () => copyText(t.ref, 'Reference copied')},
+            {type: 'divider'},
+            {label: local ? 'Remove (do not send)' : 'Remove from this list', icon: 'trash', danger: true, action: () => act('remove')(t)}
+        ];
+    }
 
     function compose() {
         const f = {category: M.observable('help'), priority: M.observable('normal'), subject: M.observable(''), body: M.observable(''),
@@ -138,16 +219,16 @@ export async function mount(root, ctx) {
             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 class="sp-choices" role="radiogroup" aria-label="Category">
+    ${categories.map(c => `<button type="button" role="radio" data-on-click="pick('category', '${esc(c.key)}')" data-bind-class="category.value === '${esc(c.key)}' && 'is-on'" data-bind-aria-checked="category.value === '${esc(c.key)}' ? 'true' : 'false'"><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 class="sp-choices is-two" role="radiogroup" aria-label="Priority">
+    ${priorities.map(p => `<button type="button" role="radio" data-value="${esc(p.key)}" data-on-click="pick('priority', '${esc(p.key)}')" data-bind-class="priority.value === '${esc(p.key)}' && 'is-on'" data-bind-aria-checked="priority.value === '${esc(p.key)}' ? 'true' : 'false'"><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">
@@ -158,6 +239,7 @@ export async function mount(root, ctx) {
   </div>
 </div>`,
             methods: {
+                pick: (group, value) => { if (f[group]) f[group].value = value; },
                 cancel: () => panel?.close(),
                 async send() {
                     if (f.busy.peek()) return;
@@ -168,9 +250,10 @@ export async function mount(root, ctx) {
                         E.toast(r.message || 'Sent.', {type: r.state === 'sent' ? 'success' : 'warning'});
                         panel?.close();
                         refreshBadge();
+                        filter.value = 'active';
                         await load();
                     } catch (err) {
-                        E.toast(err.message || String(err), {type: 'error'});
+                        fail(err);
                     } finally {
                         f.busy.value = false;
                     }
@@ -178,11 +261,6 @@ export async function mount(root, ctx) {
             }
         }).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();
         });
     }
@@ -190,100 +268,106 @@ export async function mount(root, ctx) {
     async function open(ref) {
         const t0 = byRef(ref);
         if (!t0) return;
+        // The panel follows the list's copy, so a reload or a move from the row menu shows here at once.
+        const cur = M.computed(() => tickets.value.find(x => x.ref === ref) || t0);
+        const thread = M.computed(() => threadRows(cur.value.messages || [], 'customer'));
+        const status = M.computed(() => cur.value.status);
+        const statusLabel = M.computed(() => cur.value.statusLabel || cur.value.status);
+        const tone = M.computed(() => `is-${TONE[cur.value.status] || 'muted'}`);
+        const archived = M.computed(() => Boolean(cur.value.archived));
         const draft = M.observable('');
+        // Bindings may not call methods (.trim()), so the test is a computed.
+        const hasDraft = M.computed(() => Boolean(draft.value.trim()));
         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 */ }
-            }
+        let stopScroll = () => {};
+        let menu = null;
+        const run = async (fn) => {
+            if (busy.peek()) return;
+            busy.value = true;
+            try { await fn(); } catch (err) { fail(err); } finally { busy.value = false; }
         };
         panel = await openPanel({
             title: t0.subject,
             size: 'lg',
-            model: {draft, busy, status},
+            model: {thread, status, statusLabel, tone, archived, draft, hasDraft, busy},
+            cleanup: () => { stopScroll(); menu?.destroy?.(); [cur, thread, status, statusLabel, tone, archived, hasDraft].forEach(c => c.dispose?.()); },
             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>Status</dt><dd><span class="sp-chip" data-bind-class="tone.value" data-bind-text="statusLabel.value"></span>
+      <span class="sp-chip is-muted" data-bind-hidden="!archived.value">Archived</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>
+  <div class="sp-thread-host">${THREAD}</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>
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="archive" data-bind-disabled="busy.value">
+        <span data-icon="archive" data-icon-size="13"></span> <span data-bind-text="archived.value ? 'Back to your requests' : 'Archive'"></span></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>
+      <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="busy.value || !hasDraft.value"><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;
-                    }
-                }
+                send: () => run(async () => {
+                    if (!draft.peek().trim()) return;
+                    const r = await api.write(ref, draft.peek());
+                    if (r.state !== 'sent') E.toast(r.message, {type: 'warning'});
+                    draft.value = '';
+                    await load();
+                }),
+                resolve: () => run(() => actions.resolve(cur.peek())),
+                archive: () => run(async () => {
+                    const on = !archived.peek();
+                    await actions.archive(cur.peek(), on);
+                    if (on) panel?.close();
+                })
+            }
+        });
+        const box = panel.panel.querySelector('.sp-thread-host');
+        stopScroll = M.effect(() => { thread.value; Promise.resolve().then(() => { M.flush?.(); box.scrollTop = box.scrollHeight; }); });
+        menu = E.contextMenu(box, {
+            cursor: 'glyph', match: '.sp-msg', inherit: false, density: 'compact',
+            items: (li) => {
+                const m = thread.peek().find(x => x.key === li.dataset.key);
+                return m ? [{label: 'Copy message', icon: 'copy', action: () => copyText(m.body, 'Message copied')}] : [];
             }
         });
-        render();
-        await markSeen();
+        await act('seen')(cur.peek());
     }
 
-    const bindings = M.applyBindings({connected, contact, loading, reachable, error, rows, waitingCount}, view, {
+    const bindings = M.applyBindings({connected, contact, loading, reachable, error, filter, rows, counts, hasArchive, emptyText, 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); });
+    const seg = view.querySelector('.sp-seg');
+    const onFilter = (e) => { const b = e.target.closest('[data-filter]'); if (b) filter.value = b.dataset.filter; };
+    seg.addEventListener('click', onFilter);
+    scope(() => seg.removeEventListener('click', onFilter));
+
+    // Rows: click or Enter opens; right-click, the ⋮ or Shift+F10 = the menu.
+    const rowMenu = E.contextMenu(listEl, {
+        cursor: 'glyph', match: '.sp-row', inherit: false, density: 'compact',
+        items: (row) => { const t = byRef(row.dataset.id); return t ? menuItems(t) : []; }
+    });
+    scope(() => rowMenu?.destroy?.());
+    scope(rowKeys(listEl, {rowSel: '.sp-row', kebabSel: '.sp-kebab', openMenuAt: kit.openMenuAt, primary: open}));
 
     I.scan(view);
     if (connected.peek()) {
         await load();
-        if (id && here()) open(id);
+        if (id && here()) {
+            // A link to an archived request shows it where it is.
+            if (byRef(id)?.archived) filter.value = 'archived';
+            open(id);
+        }
     }
 }