domma-cms 1.6.37 → 1.6.39

package/plugins/shopping-cart/tests/api.test.js

@@ -114,6 +114,44 @@ test('a sale, from product to refund', async () => {
     assert.equal(sum.days30.orders, 0, 'a refunded sale is not revenue');
 });
 
+test('a part refund keeps the order paid and remembers what went back; the rest closes it', async () => {
+    await call('PUT', '/settings', {offlineEnabled: true, countries: ['GB'], taxRate: 0, shippingFlat: 0});
+    let r = await call('POST', '/products', {name: 'Teapot', price: 2500, status: 'active', trackStock: true, stock: 3, shippable: false});
+    const pot = r.body;
+    r = await call('POST', '/checkout', {lines: [{productId: pot.id, qty: 1}], provider: 'offline', customer: {name: 'Bo', email: 'bo@example.com'}});
+    assert.equal(r.status, 200, JSON.stringify(r.body));
+    const id = r.body.orderId;
+    r = await call('PUT', `/orders/${id}/status`, {status: 'paid'});
+    assert.equal(r.status, 200, JSON.stringify(r.body));
+
+    // Too much, nothing, a fraction: refused before anything is written.
+    assert.equal((await call('POST', `/orders/${id}/refund`, {amount: 2600})).status, 400);
+    assert.equal((await call('POST', `/orders/${id}/refund`, {amount: 0})).status, 400);
+    assert.equal((await call('POST', `/orders/${id}/refund`, {amount: 12.5})).status, 400);
+
+    r = await call('POST', `/orders/${id}/refund`, {amount: 1000, note: 'lid chipped', restock: true});
+    assert.equal(r.status, 200, JSON.stringify(r.body));
+    assert.equal(r.body.order.data.status, 'paid', 'a part refund is not a move');
+    assert.deepEqual(r.body.refund, {amount: 1000, refunded: 1000, remaining: 1500, full: false});
+    assert.equal(r.body.order.data.refunded, 1000);
+    assert.equal(r.body.order.data.refunds[0].note, 'lid chipped');
+    assert.match(r.body.order.data.history.at(-1).note, /^£10\.00 marked refunded - lid chipped$/);
+    assert.equal((await call('GET', '/products')).body.find(p => p.id === pot.id).data.stock, 2, 'stock stays out on a part refund');
+    assert.equal((await call('POST', `/orders/${id}/refund`, {amount: 1501})).status, 400, 'only what is left');
+
+    // The rest: now it is refunded, with both refunds on it and the stock back.
+    r = await call('POST', `/orders/${id}/refund`, {restock: true});
+    assert.equal(r.status, 200, JSON.stringify(r.body));
+    assert.equal(r.body.order.data.status, 'refunded');
+    assert.deepEqual(r.body.order.data.refunds.map(x => x.amount), [1000, 1500]);
+    assert.equal(r.body.order.data.refunded, 2500);
+    assert.equal((await call('GET', '/products')).body.find(p => p.id === pot.id).data.stock, 3);
+    assert.equal((await call('POST', `/orders/${id}/refund`, {})).status, 409);
+
+    const sales = (await call('GET', '/sales?range=today')).body;
+    assert.equal(sales.totals.refundCount >= 2, true);
+});
+
 test('free orders are paid at once; a provider that is off is refused', async () => {
     let r = await call('POST', '/products', {name: 'Free guide', price: 0, status: 'active', shippable: false});
     const guide = r.body;
@@ -325,3 +363,17 @@ test('review: links for emails never come from a request\'s Host header; two ref
     assert.deepEqual(both.map(r => r.status).sort(), [200, 409], JSON.stringify(both.map(r => r.body)));
     assert.equal((await reg.services.getOrder(order.id)).data.history.filter(h => h.status === 'refunded').length, 1);
 });
+
+test('1.6.2: the badge is kept between writes, and any write (here a new product) refreshes it', async () => {
+    const {writeGeneration} = await import('../lib/shop.js');
+    const first = (await call('GET', '/count')).body;
+    const gen = writeGeneration();
+    assert.deepEqual((await call('GET', '/count')).body, first, 'the same minute answers the same');
+    assert.equal(writeGeneration(), gen, 'a read writes nothing');
+    const r = await call('POST', '/products', {name: 'Badge cup', price: 500, status: 'active'});
+    assert.equal(r.status, 201, JSON.stringify(r.body));
+    assert.ok(writeGeneration() > gen, 'the write moved the generation');
+    const after = (await call('GET', '/count')).body;
+    if (first.inventory) assert.equal(after.count, first.count + 1, 'the new product is counted at once');
+    await call('DELETE', `/products/${r.body.id}`);
+});

package/plugins/shopping-cart/tests/commission.test.js

@@ -83,7 +83,7 @@ test('commission: stored on the sale when paid, at that day\'s rate; returned wi
     const r = (await call('GET', '/sales?range=year')).body;
     assert.deepEqual([r.totals.commission, r.totals.commissionBack, r.totals.commissionNet], [110, 110, 0]);
     const csv = (await call('GET', '/sales.csv?range=year')).text;
-    assert.ok(csv.split('\r\n')[0].endsWith('Commission,Commission rate'));
+    assert.ok(csv.split('\r\n')[0].endsWith('Commission,Commission rate,Refunded amount'));
     // The customer never sees it.
     const receipt = (await call('GET', `/order/${id}?t=${o.data.token}`)).body;
     assert.ok(!('commission' in receipt));

package/plugins/shopping-cart/tests/pure.test.js

@@ -313,3 +313,19 @@ test('payments: Stripe refunds and sessions carry an Idempotency-Key, so a retry
         assert.equal(seen[2].init.headers['Idempotency-Key'], 'shop-session-o1');
     } finally { globalThis.fetch = realFetch; }
 });
+
+test('admin: no form fields inside E.confirm (its message is sanitised; inputs vanish)', async () => {
+    const {readFileSync, readdirSync} = await import('node:fs');
+    const dir = new URL('../admin/views/', import.meta.url);
+    for (const f of readdirSync(dir).filter(n => n.endsWith('.js'))) {
+        const src = readFileSync(new URL(f, dir), 'utf8');
+        for (const m of src.matchAll(/E\.confirm\(\s*([A-Za-z_$][\w$]*)\s*[,)]/g)) {
+            // A variable passed to E.confirm: find its last assignment before the call and refuse form fields in it.
+            const before = src.slice(0, m.index);
+            const at = before.lastIndexOf(`${m[1]} =`);
+            const assigned = at < 0 ? '' : before.slice(at, at + 4000);
+            assert.ok(!/<(input|select|textarea)\b/.test(assigned), `${f}: E.confirm(${m[1]}) carries form fields`);
+        }
+        for (const m of src.matchAll(/E\.confirm\(`([^`]*)`/g)) assert.ok(!/<(input|select|textarea)\b/.test(m[1]), `${f}: E.confirm with form fields`);
+    }
+});

package/plugins/shopping-cart/tests/refunds.test.js

@@ -0,0 +1,42 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {refundPlan, refundable, refundedSoFar, refundsOf} from '../lib/refunds.js';
+import {salesReport} from '../lib/sales.js';
+
+const paid = {status: 'paid', total: 2500, currency: 'GBP', paidAt: '2026-10-01T10:00:00Z'};
+
+test('refundPlan: the rest by default, a part when asked, never more than is left', () => {
+    assert.deepEqual(refundPlan(paid), {amount: 2500, before: 0, after: 2500, remaining: 0, full: true});
+    assert.deepEqual(refundPlan(paid, 1000), {amount: 1000, before: 0, after: 1000, remaining: 1500, full: false});
+    const part = {...paid, refunds: [{at: '2026-10-02T10:00:00Z', amount: 1000}]};
+    assert.deepEqual(refundPlan(part, '1500'), {amount: 1500, before: 1000, after: 2500, remaining: 0, full: true});
+    assert.deepEqual(refundPlan(part), {amount: 1500, before: 1000, after: 2500, remaining: 0, full: true});
+    assert.throws(() => refundPlan(part, 1501), /Only 1500 is left/);
+    assert.throws(() => refundPlan(paid, 0), {status: 400});
+    assert.throws(() => refundPlan(paid, -5), {status: 400});
+    assert.throws(() => refundPlan(paid, 12.5), {status: 400});
+    assert.throws(() => refundPlan(paid, 'ten'), {status: 400});
+    assert.throws(() => refundPlan({...paid, refunds: [{amount: 2500}]}), {status: 409});
+});
+
+test('refunds: legacy whole-order refunds read as one refund of the total', () => {
+    const legacy = {status: 'refunded', total: 900, refundedAt: '2026-10-05T09:00:00Z'};
+    assert.deepEqual(refundsOf(legacy).map(r => [r.amount, r.at]), [[900, '2026-10-05T09:00:00Z']]);
+    assert.equal(refundedSoFar(legacy), 900);
+    assert.equal(refundable(legacy), 0);
+    assert.equal(refundable(paid), 2500);
+    assert.deepEqual(refundsOf({status: 'paid', total: 100}), []);
+    assert.throws(() => refundPlan(legacy), {status: 409});
+});
+
+test('sales: each part refund counts on its own day; the order stays a sale', () => {
+    const o = {id: 'o1', meta: {createdAt: '2026-10-01T10:00:00Z'}, data: {...paid, number: 1001, provider: 'stripe', lines: [{productId: 'mug', qty: 1, lineTotal: 2500}],
+        adjustments: [], subtotal: 2500, refunds: [{at: '2026-10-03T10:00:00Z', amount: 1000}, {at: '2026-10-06T10:00:00Z', amount: 500}], refunded: 1500}};
+    const r = salesReport([o], {from: '2026-10-01', to: '2026-10-07', by: 'day', timeZone: 'UTC'});
+    assert.deepEqual([r.totals.orders, r.totals.takings, r.totals.refunds, r.totals.refundCount, r.totals.net], [1, 2500, 1500, 2, 1000]);
+    const day = (d) => r.periods.find(p => p.period === d);
+    assert.equal(day('2026-10-03').refunds, 1000);
+    assert.equal(day('2026-10-06').refunds, 500);
+    const later = salesReport([o], {from: '2026-10-05', to: '2026-10-07', by: 'day', timeZone: 'UTC'});
+    assert.deepEqual([later.totals.orders, later.totals.refunds, later.totals.net], [0, 500, -500]);
+});

package/plugins/support/CLAUDE.md

@@ -82,3 +82,61 @@ Site: new replies (`info`), else open requests as an inventory. Manager: request
 - `docs/guide.md` added (the Documentation > Plugins page Feedback already had). The manifest entry carries
   `?v=1.1.2` and `V = '1.1.2'` loads the sub-views - bump both with the version. lib/receiver.js header corrected
   (fleet tokens are on disk since 2026-10-04).
+
+## 1.1.3 (2026-10-13 Tool sweep - caching)
+
+- **`allTickets()` is cached 30 s** (`lib/cache.js`): the manager badge, `/tickets`, every site's `/fleet/mine`
+  (nudged each minute by its badge) and `byRef()` read every request. Every write in lib/receiver.js (`openNow`,
+  `customerTurnNow`, `dommaTurnNow`, `patchNow`, `removeTicket`) calls `forget()` after the write. A test that
+  writes the collection behind the plugin's back calls `forget()` (see "a customer message lost"). Test:
+  `tests/api.test.js` "the inbox memory".
+
+## 1.1.4 (2026-10-13) - attachments
+
+Files on a customer's messages - the opening request and any follow-up - up to 3 per message, 2 MB each, PNG, JPEG,
+GIF, WebP, PDF or plain text. The same design as Feedback 1.1.6 (read its CLAUDE.md note); Support carries its own
+copy of the pure rules (lib/shape.js) and the store (lib/attachments.js) since either plugin can be installed alone.
+
+- Not the CMS media API: that folder is public and needs `media.create`. Own upload route (`POST /attachments`,
+  multipart, mime whitelist, size cap) into `data/attachments/` (0600/0700), with a sidecar the send routes read
+  the file's description from - never the form.
+- A message announces its files (`messages[].attachments[{id, name, type, size, stored}]`, set by `receivedTicket` /
+  `addTurn`); `flush()` sends the message, then each file raw to `POST /fleet/attach/:ticketRef/:attId` (token's
+  site only, announced file at the announced size; plugin-scoped `application/octet-stream` parser, own throttle).
+  The manager saves under `data/attachments/<ticket id>/` and `rx.markStored` (inside `serial()`) sets `stored`.
+- **The outbox keeps a sent item until its files are done** (`filesDone`): `remember()` used to drop an item the
+  moment the manager had it, which would have lost files still to send. `outbox.files` lists every file sent (newest
+  2000) so `fileIds()` keeps the site's copy - the desk thread shows files from this site's copy
+  (`GET /attachments/:id`); the inbox from `GET /tickets/:id/attachments/:att` (`manage`), listing a file still on
+  its way as such.
+- Files go with words: a follow-up still needs text, and a close carries none. Domma's own replies cannot carry
+  files (not built).
+- Thread: THREAD's row has a nested `{{#each files key=id}}`; `threadRows(messages, mine, {thumbs, available})`
+  builds it, `threadFiles()` fetches blob thumbnails into the `thumbs` observable, `fileKeys()` opens one on
+  click/Enter. The picker (`filePicker()`, compose and reply box) uploads on choose or paste and is bound on its own
+  host after the panel; its `room`/`uploading` are mirrored into the panel's model by an effect.
+- Deleting a request deletes its folder. Tests: shape.test.js (rules, a message's files, outbox keeps an item until
+  its files go), api.test.js (request + follow-up files travel and open, refusals, offline wait).
+
+## 1.1.5 (2026-10-13) - settings cog
+
+- Settings are read when used, per side (`cleanSettings(raw, current, side)`, `settingsErrors`, `SIDE_SETTINGS` in
+  lib/shape.js - emails by `EMAIL_RE`, the phone by the contact card's rule, an empty one allowed): the site's
+  `syncMinutes`; the manager's card (`email`, `phone`, `hours`, `responseTime`), `notifyEmail`, `perSiteMax`,
+  `perSiteMinutes`. A site still falls back to its own card (`allSettings()`) until the manager's arrives.
+  `GET/PUT /settings` answers this side only - a site's for `requireAdmin` (`send` without it), the manager's for
+  `manage`; 400 with `errors`; the save merges over the stored object. Tests inject `options.readSettings` /
+  `options.writeSettings` (tests/api.test.js's `managerSettings` is mutable - the flood test raises the limit live).
+- The sync timer re-arms itself, asking for `syncMinutes` before each wait; a save re-arms it. The throttles
+  (`createThrottle()` takes `{max, windowMs}` per call) and the notify email read the live values. kit.js now loads
+  plugin-chrome for `addBannerAction`.
+- `admin/lib/settings.js`: the cog, added by `support.js` once the mode is known, only when the silent
+  `GET /settings` answers; slideover through kit's `openPanel`, M bindings, data-help per field, discard guard,
+  Ctrl+Enter. Test: tests/settings.test.js.
+
+## 1.1.6 (2026-10-13) - a request deleted on the manager takes the site's files with it
+The site keeps a copy of each file it sent (`outbox.files`, newest 2000) to draw its own thread, and the prune spared
+every id on that list - so a request Domma deleted left its screenshots on the site for good. `remember(remote)` now
+narrows `files` with `keepFiles(files, remote, items)` (PURE, tested): only ids in a message of a request the manager
+still holds (its `/fleet/mine` is complete for the site) or named by an outbox item. The next prune (older than a day)
+removes the rest. Found on the dcm click-through.

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

@@ -1,7 +1,7 @@
 /* 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 [hidden], .sp-detail [hidden], .sp-form [hidden], .sp-files-host [hidden] { display: none !important; }
 
 .sp { max-width: 60rem; display: flex; flex-direction: column; gap: 1rem; }
 .sp-desk { display: flex; flex-direction: column; gap: 1rem; }
@@ -92,6 +92,21 @@
 .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; }
 
+/* Attached files: a thumbnail or the file's kind, its name and size */
+.sp-attach { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
+.sp-files { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem; }
+.sp-file { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
+  background: var(--dm-surface); cursor: pointer; min-width: 0; }
+.sp-file:hover, .sp-file:focus-visible { border-color: var(--dm-primary); outline: none; }
+.sp-thumb { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: var(--dm-radius-md); flex: none; }
+.sp-file-ext { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: var(--dm-font-size-xs);
+  font-weight: 700; color: var(--dm-text-secondary); background: var(--dm-hover-bg); border-radius: var(--dm-radius-md); }
+.sp-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.sp-file-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--dm-font-size-sm); }
+.sp-file-main small { color: var(--dm-text-secondary); font-size: var(--dm-font-size-xs); }
+.sp-file-x { border: 0; background: none; color: var(--dm-text-secondary); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .1rem .35rem; border-radius: var(--dm-radius-md); }
+.sp-file-x:hover { background: var(--dm-hover-bg); color: var(--dm-danger); }
+
 @media (max-width: 640px) {
   .sp-choices.is-two { grid-template-columns: 1fr; }
   .sp-row { flex-wrap: wrap; }

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

@@ -13,20 +13,23 @@ export const BASE = '/api/plugins/support';
 
 let kit = null;
 
-/** tool-kit, plugin-chrome and help-popover, once, with stand-ins for an older admin. */
+/** tool-kit, help-popover and plugin-chrome, 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]) => ({
+            import('/admin/js/lib/help-popover.js').catch(() => ({})),
+            import('/admin/js/lib/plugin-chrome.js').catch(() => ({}))
+        ]).then(([tk, help, chrome]) => ({
             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 || (() => () => {})
+            helpPopovers: help.helpPopovers || (() => () => {}),
+            // The banner's door (the settings cog, 1.1.5); an older admin has none and gets no cog.
+            addBannerAction: chrome.addBannerAction || (() => null)
         }));
     }
     return kit;
@@ -39,7 +42,7 @@ export const api = {
     // site
     tickets: () => H.get(`${BASE}/tickets`),
     open: (d) => H.post(`${BASE}/tickets`, d),
-    write: (ref, body) => H.post(`${BASE}/tickets/${seg(ref)}/messages`, {body}),
+    write: (ref, body, attachments = []) => H.post(`${BASE}/tickets/${seg(ref)}/messages`, {body, ...(attachments.length && {attachments})}),
     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). */
@@ -48,9 +51,102 @@ export const api = {
     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)}`)
+    remove: (id) => H.delete(`${BASE}/tickets/${seg(id)}`),
+    /** Where a file is read from: this site's own copy, or a request's on the manager. */
+    ownFileUrl: (id) => `${BASE}/attachments/${seg(id)}`,
+    ticketFileUrl: (id, att) => `${BASE}/tickets/${seg(id)}/attachments/${seg(att)}`
 };
 
+// ---------------------------------------------------------------------------------
+// Attachments
+// ---------------------------------------------------------------------------------
+
+const authHeaders = () => { const t = (() => { try { return S.get('auth_token'); } catch { return ''; } })(); return t ? {Authorization: `Bearer ${t}`} : {}; };
+
+/** Upload one file for the message being written. H has no multipart helper, so this is the admin's own upload pattern. */
+export async function uploadFile(file) {
+    const fd = new FormData();
+    fd.append('file', file, file.name);
+    const res = await fetch(`${BASE}/attachments`, {method: 'POST', headers: authHeaders(), body: fd});
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(body.error || `Upload failed (${res.status}).`);
+    return body;
+}
+
+/** A file behind the session as a blob: URL (an <img src> or a new tab cannot send the token). Revoke it when done. */
+export async function blobUrl(url) {
+    const res = await fetch(url, {headers: authHeaders()});
+    if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `Could not open the file (${res.status}).`);
+    return URL.createObjectURL(await res.blob());
+}
+
+export const FILE_TYPES = 'image/png,image/jpeg,image/gif,image/webp,application/pdf,text/plain';
+export const isImage = (type) => /^image\//.test(String(type || ''));
+const EXT = {'image/png': 'PNG', 'image/jpeg': 'JPG', 'image/gif': 'GIF', 'image/webp': 'WEBP', 'application/pdf': 'PDF', 'text/plain': 'TXT'};
+
+/** 812 B, 14 KB, 1.2 MB. */
+export function fileSize(n) {
+    const b = Number(n) || 0;
+    if (b < 1024) return `${b} B`;
+    if (b < 1024 * 1024) return `${Math.round(b / 1024)} KB`;
+    return `${(b / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/** One row of a file list (the picker's, or a message's). */
+export function fileRow(a, {thumb = '', note = '', removable = false, key} = {}) {
+    return {key: key || a.id, id: a.id || '', name: a.name, type: a.type, ext: EXT[a.type] || 'FILE', thumb: thumb || '',
+        meta: [fileSize(a.size), note].filter(Boolean).join(' · '), removable};
+}
+
+/** The compose panel's picked files, bound to a `files` observable of fileRow()s. Text bindings only, no icons (rows arrive after the icon scan). */
+export const FILES = `
+<ul class="sp-files" data-bind-hidden="!files.value.length" data-each="files.value key=key"><li class="sp-file" data-key="{{key}}" data-bind-title="name">
+  <img class="sp-thumb" alt="" data-bind-src="thumb || false" data-bind-hidden="!thumb">
+  <span class="sp-file-ext" data-bind-hidden="thumb" data-bind-text="ext"></span>
+  <span class="sp-file-main"><strong data-bind-text="name"></strong><small data-bind-text="meta"></small></span>
+  <button type="button" class="sp-file-x" data-bind-hidden="!removable" aria-label="Remove this file" title="Remove">&times;</button>
+</li></ul>`;
+
+/**
+ * Thumbnails and opening for the files in a thread. The thread's computed reads
+ * `thumbs.value`, so a thumbnail shows as soon as its blob arrives.
+ *
+ * @param {(a) => string} urlOf
+ * @param {(a) => boolean} [available] - false for a file that has not reached this server yet
+ */
+export function threadFiles(urlOf, available = () => true) {
+    const thumbs = M.observable({});
+    const urls = [];
+    const asked = new Set();
+    let live = true;
+    return {
+        thumbs,
+        /** Fetch the thumbnails not yet asked for. */
+        load(messages = []) {
+            for (const a of messages.flatMap(m => m.attachments || [])) {
+                if (!isImage(a.type) || !available(a) || asked.has(a.id)) continue;
+                asked.add(a.id);
+                blobUrl(urlOf(a)).then((u) => {
+                    if (!live) { URL.revokeObjectURL(u); return; }
+                    urls.push(u);
+                    thumbs.value = {...thumbs.peek(), [a.id]: u};
+                }).catch(() => { /* no thumbnail; the row still opens */ });
+            }
+        },
+        /** Open one in a new tab. */
+        async open(a) {
+            if (!a) return;
+            if (!available(a)) { E.toast(`${esc(a.name)} has not arrived yet - it follows its message.`, {type: 'info'}); return; }
+            try {
+                const u = await blobUrl(urlOf(a));
+                urls.push(u);
+                window.open(u, '_blank', 'noopener');
+            } catch (err) { E.toast(esc(err.message || String(err)), {type: 'error'}); }
+        },
+        dispose() { live = false; for (const u of urls.splice(0)) URL.revokeObjectURL(u); }
+    };
+}
+
 /** Some routes send a bare array, some an object. */
 export const listOf = (res, key) => res?.[key] ?? (Array.isArray(res) ? res : []);
 
@@ -97,24 +193,46 @@ export const TONE = {open: 'warning', answered: 'info', closed: 'success', waiti
  * The conversation, oldest first, as rows for THREAD. `mine` says which side is
  * "us" (customer on a site, domma on the manager).
  */
-export function threadRows(messages = [], mine) {
+export function threadRows(messages = [], mine, {thumbs = {}, available = () => true, missing = 'on its way'} = {}) {
     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 || ''
+        body: m.body || '',
+        files: (m.attachments || []).map(a => fileRow(a, {thumb: thumbs[a.id], note: available(a) ? '' : missing})),
+        hasFiles: Boolean((m.attachments || []).length)
     }));
 }
 
+/** A message's file, by id - for the thread's click handler. */
+export const findFile = (messages = [], id) => messages.flatMap(m => m.attachments || []).find(a => a.id === id) || null;
+
 /** 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>
+  <ul class="sp-files" data-bind-hidden="!hasFiles">{{#each files key=id}}<li class="sp-file" data-att="{{id}}" tabindex="0" role="button" data-bind-title="name">
+    <img class="sp-thumb" alt="" data-bind-src="thumb || false" data-bind-hidden="!thumb">
+    <span class="sp-file-ext" data-bind-hidden="thumb">{{ext}}</span>
+    <span class="sp-file-main"><strong>{{name}}</strong><small>{{meta}}</small></span>
+  </li>{{/each}}</ul>
 </li></ol>`;
 
+/**
+ * Click or Enter on a file in the thread opens it.
+ * @returns {Function} removes the listeners
+ */
+export function fileKeys(box, open) {
+    const onClick = (e) => { const li = e.target.closest('.sp-file[data-att]'); if (li) { e.stopPropagation(); open(li.dataset.att); } };
+    const onKey = (e) => { const li = e.target.closest('.sp-file[data-att]'); if (li && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); e.stopPropagation(); open(li.dataset.att); } };
+    box.addEventListener('click', onClick);
+    box.addEventListener('keydown', onKey);
+    return () => { box.removeEventListener('click', onClick); box.removeEventListener('keydown', onKey); };
+}
+
 /** Copy text, with a toast either way. */
 export async function copyText(text, what = 'Copied') {
     try {
@@ -166,3 +284,69 @@ export async function openPanel({title, size = 'md', html, model = {}, methods =
     so.open();
     return {so, panel, close: () => so.close()};
 }
+
+/**
+ * The picker for files going with a message: chosen with the button or pasted
+ * into the text box, uploaded at once (so Send only names them), shown with a
+ * thumbnail and a remove button. Bound on its own host, after the panel's own
+ * bindings - the panel's model has no `files`.
+ *
+ * @param {{host: HTMLElement, input: HTMLInputElement, paste?: HTMLElement, caps: {max: number, maxBytes: number}}} o
+ */
+export function filePicker({host, input, paste, caps}) {
+    const picked = M.observable([]);
+    const room = M.computed(() => picked.value.length < caps.max);
+    const uploading = M.computed(() => picked.value.some(x => x.busy));
+    const files = M.computed(() => picked.value.map(x => fileRow(x, {key: x.key, thumb: x.thumb, removable: !x.busy, note: x.busy ? 'uploading...' : ''})));
+    const localUrls = [];
+    host.innerHTML = FILES;
+    const bound = M.applyBindings({files}, host);
+    const onRemove = (e) => {
+        const x = e.target.closest('.sp-file-x');
+        if (x) picked.value = picked.peek().filter(r => r.key !== x.closest('.sp-file').dataset.key);
+    };
+    host.addEventListener('click', onRemove);
+    async function add(list) {
+        for (const file of list) {
+            if (picked.peek().length >= caps.max) { E.toast(`Up to ${caps.max} files a message.`, {type: 'warning'}); break; }
+            if (file.size > caps.maxBytes) { E.toast(`${esc(file.name)} is too big - up to ${fileSize(caps.maxBytes)} each.`, {type: 'warning'}); continue; }
+            if (!FILE_TYPES.split(',').includes(file.type)) { E.toast(`${esc(file.name)} cannot be attached - images, PDF or text only.`, {type: 'warning'}); continue; }
+            const key = `k${Date.now()}${Math.random().toString(16).slice(2)}`;
+            let thumb = '';
+            if (isImage(file.type)) { thumb = URL.createObjectURL(file); localUrls.push(thumb); }
+            picked.value = [...picked.peek(), {key, name: file.name, type: file.type, size: file.size, thumb, busy: true}];
+            try {
+                const a = await uploadFile(file);
+                picked.value = picked.peek().map(r => (r.key === key ? {...r, ...a, key, busy: false} : r));
+            } catch (err) {
+                picked.value = picked.peek().filter(r => r.key !== key);
+                E.toast(esc(err.message || String(err)), {type: 'error'});
+            }
+        }
+    }
+    const onChange = () => { const list = [...input.files]; input.value = ''; add(list); };
+    // A screenshot pasted into the message is the quickest way there is.
+    const onPaste = (e) => {
+        const list = [...(e.clipboardData?.files || [])];
+        if (!list.length) return;
+        e.preventDefault();
+        const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
+        add(list.map(f => (f.name && f.name !== 'image.png' ? f : new File([f], `screenshot-${stamp}.png`, {type: f.type}))));
+    };
+    input.addEventListener('change', onChange);
+    paste?.addEventListener('paste', onPaste);
+    return {
+        room, uploading,
+        /** What Send names: the uploaded ones. */
+        attachments: () => picked.peek().filter(x => x.id && !x.busy).map(x => ({id: x.id, name: x.name, type: x.type, size: x.size})),
+        clear() { picked.value = []; },
+        dispose() {
+            host.removeEventListener('click', onRemove);
+            input.removeEventListener('change', onChange);
+            paste?.removeEventListener('paste', onPaste);
+            bound.dispose();
+            [room, uploading, files].forEach(c => c.dispose?.());
+            for (const u of localUrls.splice(0)) URL.revokeObjectURL(u);
+        }
+    };
+}

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

@@ -0,0 +1,123 @@
+/**
+ * Support - the settings cog (1.1.5). Each side shows its own settings only:
+ *
+ *   a site      how often it sends what waits and looks for replies (administrators)
+ *   the manager  the contact card every site shows, where new requests are
+ *                emailed, and how many messages one site may send (`manage`)
+ *
+ * They used to be reachable only through Marketplace > Configure and were read
+ * at boot; the server now reads them when used, so a save here is live - the
+ * card reaches each site with its next sync.
+ *
+ * @module support/admin/lib/settings
+ */
+import {BASE, esc, openPanel} from './kit.js';
+
+/** As lib/shape.js checks them; the server checks again. */
+const EMAIL_RE = /^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/;
+const PHONE_RE = /^[+\d][\d\s().-]{4,}$/;
+const NUM = {syncMinutes: {min: 1, max: 1440}, perSiteMax: {min: 1, max: 1000}, perSiteMinutes: {min: 1, max: 1440}};
+
+const FIELDS = {
+    sender: [
+        {key: 'syncMinutes', kind: 'number', label: 'Check for replies every (minutes)',
+            help: 'How often this site sends any message still waiting and looks for Domma Support\'s replies. Opening Support always checks at once; this is the background check. 1 to 1440 (a day).'}
+    ],
+    receiver: [
+        {key: 'email', kind: 'email', label: 'Support email', max: 200,
+            help: 'Shown on every site\'s contact card, and the address replies to customers come from. Empty hides the line.'},
+        {key: 'phone', kind: 'phone', label: 'Support phone', max: 40,
+            help: 'Shown on every site\'s contact card as a tap-to-call link. Digits, spaces and + ( ) . - only. Empty hides the line.'},
+        {key: 'hours', kind: 'text', label: 'Opening hours', max: 200,
+            help: 'One line on the contact card, for example "Monday to Friday, 9am to 5pm (UK time)".'},
+        {key: 'responseTime', kind: 'text', label: 'How fast you answer', max: 300,
+            help: 'One line on the contact card, for example "We answer within one working day".'},
+        {key: 'notifyEmail', kind: 'email', label: 'Email new requests to', max: 200,
+            help: 'Every new request and every customer reply is emailed here, as well as appearing in the Inbox. Empty emails nobody.'},
+        {key: 'perSiteMax', kind: 'number', label: 'Messages per site',
+            help: 'The most messages one site may send within the window below; more are turned away for now and the site sends them later.'},
+        {key: 'perSiteMinutes', kind: 'number', label: 'Window (minutes)',
+            help: 'The window the limit above counts in, in minutes.'}
+    ]
+};
+
+const problem = (kind, v, key) => {
+    const s = String(v ?? '').trim();
+    if (kind === 'number') { const n = Number(s); const r = NUM[key]; return s !== '' && Number.isInteger(n) && n >= r.min && n <= r.max ? '' : `A whole number from ${r.min} to ${r.max}.`; }
+    if (kind === 'email') return !s || EMAIL_RE.test(s) ? '' : 'One email address, or leave it empty.';
+    if (kind === 'phone') return !s || PHONE_RE.test(s) ? '' : 'Digits, spaces and + ( ) . - only.';
+    return '';
+};
+
+/** Add the cog when this user may change this side's settings (asked once, silently). */
+export async function addSettingsCog($container, kit) {
+    let got = null;
+    try { got = await H.request('GET', `${BASE}/settings`, null, {silent: true}); } catch { return; }
+    if (!got?.side) return;
+    kit.addBannerAction($container, {id: 'support-settings', icon: 'settings', title: 'Support settings', onClick: () => openSettings()});
+}
+
+export async function openSettings() {
+    let got;
+    try { got = await H.get(`${BASE}/settings`); } catch (err) { E.toast(`Settings not loaded: ${esc(err?.message || err)}`, {type: 'error'}); return; }
+    const fields = FIELDS[got.side] || [];
+    const f = Object.fromEntries(fields.map(x => [x.key, M.observable(String(got.settings?.[x.key] ?? ''))]));
+    const values = () => Object.fromEntries(fields.map(x => [x.key, x.kind === 'number' ? Number(f[x.key].peek()) : f[x.key].peek().trim()]));
+    const opened = JSON.stringify(values());
+    const saving = M.observable(false);
+    const errs = Object.fromEntries(fields.map(x => [`${x.key}Err`, M.computed(() => problem(x.kind, f[x.key].value, x.key))]));
+    const model = {...f, ...errs, saving, cannot: M.computed(() => saving.value || Object.values(errs).some(e => e.value))};
+    const input = (x) => {
+        const type = x.kind === 'number' ? `type="number" min="${NUM[x.key].min}" max="${NUM[x.key].max}" step="1"`
+            : x.kind === 'email' ? 'type="email"' : x.kind === 'phone' ? 'type="tel"' : 'type="text"';
+        return `<input id="sp-set-${x.key}" ${type} class="form-input"${x.max ? ` maxlength="${x.max}"` : ''} data-model="${x.key}.value">`;
+    };
+    const html = `
+<div class="sp-form">
+  ${got.side === 'receiver' ? '<p class="sp-note">The contact card reaches every site with its next sync.</p>' : ''}
+  ${fields.map(x => `
+  <label class="form-label" for="sp-set-${x.key}">${x.label} <span data-help="${esc(x.help)}"></span></label>
+  ${input(x)}
+  <small class="sp-note is-bad" data-bind-hidden="!${x.key}Err.value" data-bind-text="${x.key}Err.value"></small>`).join('')}
+  <p class="sp-note">Saved settings take effect at once - no restart.</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="save" data-bind-disabled="cannot.value">Save</button>
+  </div>
+</div>`;
+    let panel = null;
+    let closed = false;
+    let asking = false;
+    const methods = {
+        cancel: () => panel?.so.close(),
+        async save() {
+            if (model.cannot.peek()) return;
+            saving.value = true;
+            try {
+                await H.put(`${BASE}/settings`, values());
+                E.toast('Support settings saved.', {type: 'success'});
+                panel.so.close(true);
+            } catch (err) {
+                E.toast(`Not saved: ${esc(err?.message || err)}`, {type: 'error'});
+            } finally {
+                saving.value = false;
+            }
+        }
+    };
+    panel = await openPanel({title: 'Support settings', size: 'md', html, model, methods});
+    // Closing with a change asks first - once (onceClosed calls close() again, argument-less).
+    const close = panel.so.close.bind(panel.so);
+    panel.so.close = async (force) => {
+        if (!closed && force !== true && JSON.stringify(values()) !== opened) {
+            if (asking) return undefined;
+            asking = true;
+            const ok = await E.confirm('Discard what you have entered?');
+            asking = false;
+            if (!ok) return undefined;
+        }
+        closed = true;
+        return close();
+    };
+    panel.panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); methods.save(); } });
+}